Информация о продаже #12

Open
opened 2024-11-20 10:24:03 +00:00 by ti · 0 comments
Owner

Добавление действия "Информация о продаже"

Цель

Добавить возможность выбирать действие "Информация о продаже" при создании QR-кода. Это действие позволит сканирующим получать информацию о продаже, предоставленную владельцем QR-кода.

Описание

На этапе выбора доступных действий для QR-кода пользователь сможет выбрать новое действие "Информация о продаже". При выборе этого действия пользователю будет предложено заполнить дополнительные поля, такие как описание товара/услуги, цена и контактные данные для продажи.

Критерии приемки

  1. Действие "Информация о продаже" отображается в списке доступных действий.
  2. При выборе действия отображаются дополнительные поля:
    • Название товара или услуги.
    • Цена.
    • Контактные данные для продажи (опционально).
  3. Пользователь может заполнить эти поля, и данные сохраняются в базе данных.
  4. На целевой странице сканирующий видит информацию о продаже:
    • Название товара/услуги.
    • Цена.
    • Контактные данные (если указаны).
  5. Владелец может редактировать или удалять эту информацию после создания QR-кода.

Этапы реализации

  1. Добавить действие:

    • Добавить действие "Информация о продаже" в список действий в компоненте CreateActionsSection.
    • При выборе действия отображать форму для ввода данных о продаже.
  2. Создание формы:

    • Создать отдельный компонент для ввода данных о продаже.
    • Включить в форму следующие поля:
      • Название (обязательно).
      • Цена (обязательно).
      • Контактная информация (необязательно).
    • Добавить валидацию для обязательных полей.
  3. Обновление базы данных:

    • Обновить структуру документа QR-кода, добавив раздел saleInfo:
      • title: Название товара/услуги.
      • price: Цена.
      • contact: Контактные данные.
    • Сохранять данные о продаже в базе данных CouchDB.
  4. Обновление целевой страницы:

    • На странице сканирования QR-кода отображать раздел "Информация о продаже", если действие выбрано:
      • Название товара/услуги.
      • Цена.
      • Контактная информация (если указана).
  5. Редактирование данных:

    • Добавить возможность редактирования информации о продаже через интерфейс управления QR-кодом.

Примеры

{
  "_id": "qr_code:example123",
  "type": "qr_code",
  "uri": "example123",
  "url": "https://example.com/qr/example123",
  "name": "Мой товар",
  "actions": ["saleInfo"],
  "saleInfo": {
    "title": "Продажа велосипеда",
    "price": "5000 руб.",
    "contact": "example@example.com"
  },
  "created_at": "2024-11-20T10:00:00Z"
}
<template>
<section>
  <h2 class="text-xl font-semibold mb-4">Информация о продаже</h2>
  <div class="flex flex-col gap-4">
    <InputText v-model="saleInfo.title" placeholder="Название товара/услуги" />
    <InputText v-model="saleInfo.price" placeholder="Цена" />
    <InputText v-model="saleInfo.contact" placeholder="Контактная информация (опционально)" />
  </div>
</section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const saleInfo = ref({
title: '',
price: '',
contact: ''
})
</script>

Пример реализации раздела "Информация о продаже" на целевой странице

Описание

На целевой странице, открывающейся при сканировании QR-кода, будет отображаться информация о продаже, если владелец выбрал соответствующее действие. Раздел включает:

  • Название товара или услуги.
  • Указанную цену.
  • Контактную информацию для связи.

Пример реализации

<template>
  <section v-if="saleInfo" class="sale-info-section p-4 bg-gray-100 rounded-lg mb-6">
    <h2 class="text-lg font-semibold mb-2">Информация о продаже</h2>
    <p class="mb-1"><strong>Товар:</strong> {{ saleInfo.title }}</p>
    <p class="mb-1"><strong>Цена:</strong> {{ saleInfo.price }}</p>
    <p v-if="saleInfo.contact" class="mb-1">
      <strong>Контакт:</strong>
      <a :href="`mailto:${saleInfo.contact}`" class="text-blue-500 underline">
        {{ saleInfo.contact }}
      </a>
    </p>
  </section>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

// Пропсы
const props = defineProps<{
  saleInfo: {
    title: string
    price: string
    contact?: string
  } | null
}>()
</script>

Пример реализации раздела "Информация о продаже" на целевой странице

Описание

На целевой странице, открывающейся при сканировании QR-кода, будет отображаться информация о продаже, если владелец выбрал соответствующее действие. Раздел включает:

  • Название товара или услуги.
  • Указанную цену.
  • Контактную информацию для связи.

Пример реализации

<template>
  <section v-if="saleInfo" class="sale-info-section p-4 bg-gray-100 rounded-lg mb-6">
    <h2 class="text-lg font-semibold mb-2">Информация о продаже</h2>
    <p class="mb-1"><strong>Товар:</strong> {{ saleInfo.title }}</p>
    <p class="mb-1"><strong>Цена:</strong> {{ saleInfo.price }}</p>
    <p v-if="saleInfo.contact" class="mb-1">
      <strong>Контакт:</strong>
      <a :href="`mailto:${saleInfo.contact}`" class="text-blue-500 underline">
        {{ saleInfo.contact }}
      </a>
    </p>
  </section>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

// Пропсы
const props = defineProps<{
  saleInfo: {
    title: string
    price: string
    contact?: string
  } | null
}>()
</script>

Пример данных для целевой страницы

{
  "saleInfo": {
    "title": "Продажа велосипеда",
    "price": "5000 руб.",
    "contact": "example@example.com"
  }
}
# Добавление действия "Информация о продаже" ## Цель Добавить возможность выбирать действие "Информация о продаже" при создании QR-кода. Это действие позволит сканирующим получать информацию о продаже, предоставленную владельцем QR-кода. ## Описание На этапе выбора доступных действий для QR-кода пользователь сможет выбрать новое действие "Информация о продаже". При выборе этого действия пользователю будет предложено заполнить дополнительные поля, такие как описание товара/услуги, цена и контактные данные для продажи. ### Критерии приемки 1. Действие "Информация о продаже" отображается в списке доступных действий. 2. При выборе действия отображаются дополнительные поля: - Название товара или услуги. - Цена. - Контактные данные для продажи (опционально). 3. Пользователь может заполнить эти поля, и данные сохраняются в базе данных. 4. На целевой странице сканирующий видит информацию о продаже: - Название товара/услуги. - Цена. - Контактные данные (если указаны). 5. Владелец может редактировать или удалять эту информацию после создания QR-кода. ### Этапы реализации 1. **Добавить действие**: - Добавить действие "Информация о продаже" в список действий в компоненте `CreateActionsSection`. - При выборе действия отображать форму для ввода данных о продаже. 2. **Создание формы**: - Создать отдельный компонент для ввода данных о продаже. - Включить в форму следующие поля: - Название (обязательно). - Цена (обязательно). - Контактная информация (необязательно). - Добавить валидацию для обязательных полей. 3. **Обновление базы данных**: - Обновить структуру документа QR-кода, добавив раздел `saleInfo`: - `title`: Название товара/услуги. - `price`: Цена. - `contact`: Контактные данные. - Сохранять данные о продаже в базе данных CouchDB. 4. **Обновление целевой страницы**: - На странице сканирования QR-кода отображать раздел "Информация о продаже", если действие выбрано: - Название товара/услуги. - Цена. - Контактная информация (если указана). 5. **Редактирование данных**: - Добавить возможность редактирования информации о продаже через интерфейс управления QR-кодом. ## Примеры ```json { "_id": "qr_code:example123", "type": "qr_code", "uri": "example123", "url": "https://example.com/qr/example123", "name": "Мой товар", "actions": ["saleInfo"], "saleInfo": { "title": "Продажа велосипеда", "price": "5000 руб.", "contact": "example@example.com" }, "created_at": "2024-11-20T10:00:00Z" } ``` ```vue <template> <section> <h2 class="text-xl font-semibold mb-4">Информация о продаже</h2> <div class="flex flex-col gap-4"> <InputText v-model="saleInfo.title" placeholder="Название товара/услуги" /> <InputText v-model="saleInfo.price" placeholder="Цена" /> <InputText v-model="saleInfo.contact" placeholder="Контактная информация (опционально)" /> </div> </section> </template> <script setup lang="ts"> import { ref } from 'vue' const saleInfo = ref({ title: '', price: '', contact: '' }) </script> ``` # Пример реализации раздела "Информация о продаже" на целевой странице ## Описание На целевой странице, открывающейся при сканировании QR-кода, будет отображаться информация о продаже, если владелец выбрал соответствующее действие. Раздел включает: - Название товара или услуги. - Указанную цену. - Контактную информацию для связи. ## Пример реализации ```vue <template> <section v-if="saleInfo" class="sale-info-section p-4 bg-gray-100 rounded-lg mb-6"> <h2 class="text-lg font-semibold mb-2">Информация о продаже</h2> <p class="mb-1"><strong>Товар:</strong> {{ saleInfo.title }}</p> <p class="mb-1"><strong>Цена:</strong> {{ saleInfo.price }}</p> <p v-if="saleInfo.contact" class="mb-1"> <strong>Контакт:</strong> <a :href="`mailto:${saleInfo.contact}`" class="text-blue-500 underline"> {{ saleInfo.contact }} </a> </p> </section> </template> <script setup lang="ts"> import { defineProps } from 'vue' // Пропсы const props = defineProps<{ saleInfo: { title: string price: string contact?: string } | null }>() </script> ``` # Пример реализации раздела "Информация о продаже" на целевой странице ## Описание На целевой странице, открывающейся при сканировании QR-кода, будет отображаться информация о продаже, если владелец выбрал соответствующее действие. Раздел включает: - Название товара или услуги. - Указанную цену. - Контактную информацию для связи. ## Пример реализации ```vue <template> <section v-if="saleInfo" class="sale-info-section p-4 bg-gray-100 rounded-lg mb-6"> <h2 class="text-lg font-semibold mb-2">Информация о продаже</h2> <p class="mb-1"><strong>Товар:</strong> {{ saleInfo.title }}</p> <p class="mb-1"><strong>Цена:</strong> {{ saleInfo.price }}</p> <p v-if="saleInfo.contact" class="mb-1"> <strong>Контакт:</strong> <a :href="`mailto:${saleInfo.contact}`" class="text-blue-500 underline"> {{ saleInfo.contact }} </a> </p> </section> </template> <script setup lang="ts"> import { defineProps } from 'vue' // Пропсы const props = defineProps<{ saleInfo: { title: string price: string contact?: string } | null }>() </script> ``` #### Пример данных для целевой страницы ```json { "saleInfo": { "title": "Продажа велосипеда", "price": "5000 руб.", "contact": "example@example.com" } } ```
ti added this to the (deleted) project 2024-11-20 10:24:03 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: ti/hereconnect#12