151 lines
4.5 KiB
Vue
151 lines
4.5 KiB
Vue
<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-75vh " >
|
|
<Card v-for="(item, index) in benefitsList">
|
|
<div class="grid grid-cols-1 gap-4 mt-3">
|
|
|
|
<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"/>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<UploadPic
|
|
: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>
|
|
<div v-if="item.typeClick=='link'" class="flex flex-col gap-1 mt-1">
|
|
<div>آدرس لینک</div>
|
|
<BasicInput v-model:value="item.link"></BasicInput>
|
|
</div>
|
|
<div class="flex flex-col gap-1" v-if="item.typeClick=='modal'">
|
|
<div>متن پیام</div>
|
|
<QuillEditor
|
|
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">
|
|
<BaseButton type="primary" @click="handleSubmit">
|
|
<span>ذخیره تغییرات</span>
|
|
</BaseButton>
|
|
</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 '@vueup/vue-quill/dist/vue-quill.snow.css'
|
|
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},
|
|
|
|
])
|
|
let content = ''
|
|
|
|
function addRow() {
|
|
benefitsList.value.push({icon: null, show: true, caption: null, link: null, typeClick: null ,modalText:null})
|
|
}
|
|
|
|
function removeRow(index: number) {
|
|
benefitsList.value.splice(index, 1)
|
|
}
|
|
|
|
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))
|
|
|
|
benefitsList.value.splice(index, 1)
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
try {
|
|
await updateBannerConst({
|
|
id: 14,
|
|
value: JSON.stringify(benefitsList.value),
|
|
key: "header_banner"
|
|
})
|
|
message.success("اطلاعات با موفقیت ذخیره شد")
|
|
} catch (error) {
|
|
message.error("خطا در ذخیره اطلاعات")
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const res = await getHeaderBannerConst()
|
|
|
|
if (res) {
|
|
if (res.length > 0) {
|
|
id = res[0].id || res[0].const_id || null
|
|
if (res[0].value) {
|
|
benefitsList.value = JSON.parse(res[0].value)
|
|
}
|
|
} else {
|
|
benefitsList.value = JSON.parse(res.value)
|
|
}
|
|
console.log(benefitsList.value)
|
|
|
|
}
|
|
} catch (error) {
|
|
console.error('خطا در دریافت بنرها:', error)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.editor-box2 {
|
|
max-height: 40vh;
|
|
overflow-y: auto;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.editor-box2 .ql-editor {
|
|
min-height: 10vh;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |