1405/02/12-dev banner settings

This commit is contained in:
2026-05-02 13:53:43 +03:30
parent a958c8c64a
commit a34c604592
5 changed files with 81 additions and 24 deletions
-3
View File
@@ -33,9 +33,6 @@ declare module '@vue/runtime-core' {
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
AModal: typeof import('ant-design-vue/es')['Modal']
APagination: typeof import('ant-design-vue/es')['Pagination']
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
APopover: typeof import('ant-design-vue/es')['Popover']
ARadio: typeof import('ant-design-vue/es')['Radio']
ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ASelect: typeof import('ant-design-vue/es')['Select']
+2
View File
@@ -21,6 +21,8 @@ export interface IBenefits {
icon: string | null
caption: string | null
link: string | null
typeClick:string | null
modalText:string|null
}
export interface countryCreator {
caption: string | null
+77 -20
View File
@@ -2,27 +2,52 @@
<div class="p-4">
<BaseButton size="small" type="primary" @click="addRow">
<span> افزودن بنر</span>
<BaseIcon icon="vuesax-linear:add" size="17" />
<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">
<div class="grid grid-cols-3 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="text">(16 در 9)</div>
<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"
: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 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>
@@ -33,19 +58,30 @@
</BaseButton>
</div>
</div>
</template>
<script setup lang="ts">
import { Card, message } from "ant-design-vue"
import type { IBenefits } from "@/model/banner"
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 {updateBannerConst, getHeaderBannerConst} from "@/api/consts"
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {QuillEditor} from '@vueup/vue-quill'
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 })
benefitsList.value.push({icon: null, show: true, caption: null, link: null, typeClick: null ,modalText:null})
}
function removeRow(index: number) {
@@ -76,11 +112,18 @@ async function handleSubmit() {
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)
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)
@@ -88,4 +131,18 @@ onMounted(async () => {
})
</script>
<style scoped lang="less"></style>
<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>
@@ -13,7 +13,7 @@
/>
</div>
<QuillEditor
placeholder="متن قانون"
placeholder="متن"
v-model:content="content"
toolbar="full"
theme="snow"
+1
View File
@@ -19,6 +19,7 @@ const Setting: RouteRecordRaw = {
name: 'settingMain',
path: '',
component: () => import('@/pages/menuPages/setting/index.vue'),
redirect: { name: 'configuration' },
meta: {
permissionsKey: 'config',
icon: 'vuesax-linear:setting',