91 lines
2.6 KiB
Vue
91 lines
2.6 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 mt-4 flex-col gap-2">
|
||
|
|
<div class="grid grid-cols-3 gap-4">
|
||
|
|
<Card v-for="(item, index) in benefitsList">
|
||
|
|
<div class="grid grid-cols-1 gap-4 mt-3">
|
||
|
|
<div class="text">(16 در 9)</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="flex items-center gap-2 my-2">
|
||
|
|
<span>نمایش:</span>
|
||
|
|
<a-switch v-model:checked="item.show" />
|
||
|
|
</div>
|
||
|
|
</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"
|
||
|
|
|
||
|
|
const benefitsList = ref<IBenefits[]>([])
|
||
|
|
let id: number | null = null
|
||
|
|
|
||
|
|
function addRow() {
|
||
|
|
benefitsList.value.push({ icon: null, show: true, caption: null, link: null })
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeRow(index: number) {
|
||
|
|
benefitsList.value.splice(index, 1)
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleUpload(file: any, index: number, size: string) {
|
||
|
|
benefitsList.value[index][size] = file.src
|
||
|
|
}
|
||
|
|
|
||
|
|
function handelRemoveFile(index: number, size: string) {
|
||
|
|
benefitsList.value.splice(benefitsList?.value[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 && res.length > 0) {
|
||
|
|
id = res[0].id || res[0].const_id || null
|
||
|
|
if (res[0].value) {
|
||
|
|
benefitsList.value = JSON.parse(res[0].value)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('خطا در دریافت بنرها:', error)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less"></style>
|