added more help
This commit is contained in:
@@ -1,84 +1,124 @@
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BaseButton size="small" type="primary" @click="addRow">
|
||||
<span> افزودن بنر</span>
|
||||
<BaseIcon icon="vuesax-linear:add" size="17"/>
|
||||
</BaseButton>
|
||||
<div class="flex my-4 flex-col gap-2">
|
||||
<div class="grid md:grid-cols-3 grid-cols-1 gap-4 overflow-y-scroll max-h-52vh md:max-h-75vh " >
|
||||
<Card v-for="(item, index) in benefitsList">
|
||||
<div class="grid grid-cols-1 gap-4 mt-3">
|
||||
<AdminFieldHelp :text="bannersPageIntro" root-class="mb-4 text-xs md:text-sm" />
|
||||
|
||||
<div class="flex items-center justify-between gap-2 my-2">
|
||||
<div class="text">(16 در 9)</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>نمایش:</span>
|
||||
<a-switch v-model:checked="item.show"/>
|
||||
<BaseButton size="small" type="primary" @click="addRow">
|
||||
<span>افزودن بنر</span>
|
||||
<BaseIcon icon="vuesax-linear:add" size="17" />
|
||||
</BaseButton>
|
||||
<AdminFieldHelp
|
||||
text="هر بار «افزودن بنر» یک اسلاید جدید به انتهای لیست اضافه می‌کند."
|
||||
root-class="mt-2"
|
||||
/>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<div
|
||||
class="grid max-h-52vh grid-cols-1 gap-4 overflow-y-scroll md:max-h-75vh md:grid-cols-3"
|
||||
>
|
||||
<Card v-for="(item, index) in benefitsList" :key="index">
|
||||
<div class="mt-3 grid grid-cols-1 gap-4">
|
||||
<div class="my-2 flex items-center justify-between gap-2">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<div class="text-sm font-medium">نسبت تصویر ۱۶:۹</div>
|
||||
<AdminFieldHelp :text="bannersAspectHelp" />
|
||||
</div>
|
||||
<div class="flex shrink-0 flex-col items-end gap-0.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span>نمایش:</span>
|
||||
<a-switch v-model:checked="item.show" />
|
||||
</div>
|
||||
<AdminFieldHelp :text="bannersShowHelp" root-class="text-left" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<AdminFieldHelp :text="bannersImageHelp" root-class="mb-2 text-center" />
|
||||
<UploadPic
|
||||
:compressed="true"
|
||||
@upload="handleUpload($event, index, 'icon')"
|
||||
@remove="handelRemoveFile(index, 'icon')"
|
||||
:imageUrl="item.icon"
|
||||
:compressed="true"
|
||||
@upload="handleUpload($event, index, 'icon')"
|
||||
@remove="handelRemoveFile(index, 'icon')"
|
||||
:imageUrl="item.icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between ">
|
||||
<div class="w-full gap-1 flex flex-col ">
|
||||
<div>
|
||||
انتخاب رویداد (پس از کلیک):
|
||||
</div>
|
||||
<BasicSelect v-model:value="item.typeClick" :items="typeList" value-name="lable" key-name="value"></BasicSelect>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">انتخاب رویداد (پس از کلیک):</div>
|
||||
<AdminFieldHelp :text="bannersEventHelp" />
|
||||
<BasicSelect
|
||||
v-model:value="item.typeClick"
|
||||
:items="typeList"
|
||||
value-name="lable"
|
||||
key-name="value"
|
||||
/>
|
||||
<AdminFieldHelp v-if="item.typeClick === 'link'" :text="bannersLinkHelp" />
|
||||
<AdminFieldHelp v-else-if="item.typeClick === 'modal'" :text="bannersModalHelp" />
|
||||
<AdminFieldHelp v-else-if="item.typeClick === 'share'" :text="bannersShareHelp" />
|
||||
<AdminFieldHelp v-else :text="bannersNoEventHelp" />
|
||||
</div>
|
||||
<div v-if="item.typeClick=='link'" class="flex flex-col gap-1 mt-1">
|
||||
<div>آدرس لینک</div>
|
||||
<BasicInput v-model:value="item.link"></BasicInput>
|
||||
|
||||
<div v-if="item.typeClick == 'link'" class="mt-2 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">آدرس لینک</div>
|
||||
<BasicInput v-model:value="item.link" placeholder="https://..." />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1" v-if="item.typeClick=='modal'">
|
||||
<div>متن پیام</div>
|
||||
|
||||
<div v-if="item.typeClick == 'modal'" class="mt-2 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">متن پیام</div>
|
||||
<QuillEditor
|
||||
placeholder=" متن پیام"
|
||||
v-model:content="item.modalText"
|
||||
toolbar="full"
|
||||
theme="snow"
|
||||
content-type="html"
|
||||
class="editor-box2"
|
||||
placeholder="متن پیام"
|
||||
v-model:content="item.modalText"
|
||||
toolbar="full"
|
||||
theme="snow"
|
||||
content-type="html"
|
||||
class="editor-box2"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left mt-5 md:mt-0">
|
||||
|
||||
<div class="mt-5 text-left md:mt-0">
|
||||
<BaseButton type="primary" @click="handleSubmit">
|
||||
<span>ذخیره تغییرات</span>
|
||||
</BaseButton>
|
||||
<AdminFieldHelp
|
||||
text="بدون زدن این دکمه، هیچ‌کدام از تغییرات بالا در اپ مشتری دیده نمی‌شود."
|
||||
root-class="mt-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {Card, message} from "ant-design-vue"
|
||||
import type {IBenefits} from "@/model/banner"
|
||||
import UploadPic from "@/components/UploadPic.vue"
|
||||
import {updateBannerConst, getHeaderBannerConst} from "@/api/consts"
|
||||
import { Card, message } from 'ant-design-vue'
|
||||
import type { IBenefits } from '@/model/banner'
|
||||
import UploadPic from '@/components/UploadPic.vue'
|
||||
import AdminFieldHelp from '@/components/AdminFieldHelp.vue'
|
||||
import { updateBannerConst, getHeaderBannerConst } from '@/api/consts'
|
||||
import {
|
||||
bannersAspectHelp,
|
||||
bannersEventHelp,
|
||||
bannersImageHelp,
|
||||
bannersLinkHelp,
|
||||
bannersModalHelp,
|
||||
bannersNoEventHelp,
|
||||
bannersPageIntro,
|
||||
bannersShareHelp,
|
||||
bannersShowHelp,
|
||||
} from '@/utils/adminHelpCopy'
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
||||
import {QuillEditor} from '@vueup/vue-quill'
|
||||
import {baseURL} from "@root/config";
|
||||
import { QuillEditor } from '@vueup/vue-quill'
|
||||
import { baseURL } from '@root/config'
|
||||
|
||||
const benefitsList = ref<IBenefits[]>([])
|
||||
let id: number | null = null
|
||||
const typeList = ref([
|
||||
{lable: 'باز شدن لینک', value: 'link'},
|
||||
{lable: ' پنجره بازشو', value: 'modal'},
|
||||
{lable: 'اشتراک گذاری', value: 'share'},
|
||||
{lable: 'بدون رویداد', value: null},
|
||||
|
||||
{ lable: 'باز شدن لینک', value: 'link' },
|
||||
{ lable: 'پنجره بازشو', value: 'modal' },
|
||||
{ lable: 'اشتراک گذاری', value: 'share' },
|
||||
{ lable: 'بدون رویداد', value: null },
|
||||
])
|
||||
|
||||
function parseBannerList(value: string | null | undefined): IBenefits[] {
|
||||
if (!value) return []
|
||||
try {
|
||||
@@ -93,20 +133,21 @@ function addRow() {
|
||||
if (!Array.isArray(benefitsList.value)) {
|
||||
benefitsList.value = []
|
||||
}
|
||||
benefitsList.value.push({icon: null, show: true, caption: null, link: null, typeClick: null, modalText: null})
|
||||
}
|
||||
|
||||
function removeRow(index: number) {
|
||||
benefitsList.value.splice(index, 1)
|
||||
benefitsList.value.push({
|
||||
icon: null,
|
||||
show: true,
|
||||
caption: null,
|
||||
link: null,
|
||||
typeClick: null,
|
||||
modalText: null,
|
||||
})
|
||||
}
|
||||
|
||||
async function handleUpload(file: any, index: number, size: string) {
|
||||
benefitsList.value[index][size] = `${baseURL}/${file.src}`
|
||||
}
|
||||
|
||||
function handelRemoveFile(index: number, size: string) {
|
||||
// console.log( benefitsList.value.splice(benefitsList?.value[index], 1))
|
||||
|
||||
function handelRemoveFile(index: number, _size: string) {
|
||||
benefitsList.value.splice(index, 1)
|
||||
}
|
||||
|
||||
@@ -143,7 +184,7 @@ onMounted(async () => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less">
|
||||
.editor-box2 {
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
|
||||
Reference in New Issue
Block a user