1405/02/12-dev banner settings
This commit is contained in:
Vendored
-3
@@ -33,9 +33,6 @@ declare module '@vue/runtime-core' {
|
|||||||
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
|
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
|
||||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||||
APagination: typeof import('ant-design-vue/es')['Pagination']
|
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']
|
ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
|
||||||
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
|
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
|
||||||
ASelect: typeof import('ant-design-vue/es')['Select']
|
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||||
|
|||||||
@@ -21,6 +21,8 @@ export interface IBenefits {
|
|||||||
icon: string | null
|
icon: string | null
|
||||||
caption: string | null
|
caption: string | null
|
||||||
link: string | null
|
link: string | null
|
||||||
|
typeClick:string | null
|
||||||
|
modalText:string|null
|
||||||
}
|
}
|
||||||
export interface countryCreator {
|
export interface countryCreator {
|
||||||
caption: string | null
|
caption: string | null
|
||||||
|
|||||||
@@ -2,27 +2,52 @@
|
|||||||
<div class="p-4">
|
<div class="p-4">
|
||||||
<BaseButton size="small" type="primary" @click="addRow">
|
<BaseButton size="small" type="primary" @click="addRow">
|
||||||
<span> افزودن بنر</span>
|
<span> افزودن بنر</span>
|
||||||
<BaseIcon icon="vuesax-linear:add" size="17" />
|
<BaseIcon icon="vuesax-linear:add" size="17"/>
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
<div class="flex mt-4 flex-col gap-2">
|
<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">
|
<Card v-for="(item, index) in benefitsList">
|
||||||
<div class="grid grid-cols-1 gap-4 mt-3">
|
<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">
|
<div class="text-center">
|
||||||
<UploadPic
|
<UploadPic
|
||||||
:compressed="true"
|
:compressed="true"
|
||||||
@upload="handleUpload($event, index, 'icon')"
|
@upload="handleUpload($event, index, 'icon')"
|
||||||
@remove="handelRemoveFile(index, 'icon')"
|
@remove="handelRemoveFile(index, 'icon')"
|
||||||
:imageUrl="item.icon"
|
:imageUrl="item.icon"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between ">
|
||||||
<div class="flex items-center gap-2 my-2">
|
<div class="w-full gap-1 flex flex-col ">
|
||||||
<span>نمایش:</span>
|
<div>
|
||||||
<a-switch v-model:checked="item.show" />
|
انتخاب رویداد (پس از کلیک):
|
||||||
|
</div>
|
||||||
|
<BasicSelect v-model:value="item.typeClick" :items="typeList" value-name="lable" key-name="value"></BasicSelect>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
@@ -33,19 +58,30 @@
|
|||||||
</BaseButton>
|
</BaseButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Card, message } from "ant-design-vue"
|
import {Card, message} from "ant-design-vue"
|
||||||
import type { IBenefits } from "@/model/banner"
|
import type {IBenefits} from "@/model/banner"
|
||||||
import UploadPic from "@/components/UploadPic.vue"
|
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[]>([])
|
const benefitsList = ref<IBenefits[]>([])
|
||||||
let id: number | null = null
|
let id: number | null = null
|
||||||
|
const typeList = ref([
|
||||||
|
{lable: 'باز شدن لینک', value: 'link'},
|
||||||
|
{lable: ' پنجره بازشو', value: 'modal'},
|
||||||
|
{lable: 'اشتراک گذاری', value: 'share'},
|
||||||
|
{lable: 'بدون رویداد', value: null},
|
||||||
|
|
||||||
|
])
|
||||||
|
let content = ''
|
||||||
|
|
||||||
function addRow() {
|
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) {
|
function removeRow(index: number) {
|
||||||
@@ -76,11 +112,18 @@ async function handleSubmit() {
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await getHeaderBannerConst()
|
const res = await getHeaderBannerConst()
|
||||||
if (res && res.length > 0) {
|
|
||||||
id = res[0].id || res[0].const_id || null
|
if (res) {
|
||||||
if (res[0].value) {
|
if (res.length > 0) {
|
||||||
benefitsList.value = JSON.parse(res[0].value)
|
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) {
|
} catch (error) {
|
||||||
console.error('خطا در دریافت بنرها:', error)
|
console.error('خطا در دریافت بنرها:', error)
|
||||||
@@ -88,4 +131,18 @@ onMounted(async () => {
|
|||||||
})
|
})
|
||||||
</script>
|
</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>
|
</div>
|
||||||
<QuillEditor
|
<QuillEditor
|
||||||
placeholder="متن قانون"
|
placeholder="متن"
|
||||||
v-model:content="content"
|
v-model:content="content"
|
||||||
toolbar="full"
|
toolbar="full"
|
||||||
theme="snow"
|
theme="snow"
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ const Setting: RouteRecordRaw = {
|
|||||||
name: 'settingMain',
|
name: 'settingMain',
|
||||||
path: '',
|
path: '',
|
||||||
component: () => import('@/pages/menuPages/setting/index.vue'),
|
component: () => import('@/pages/menuPages/setting/index.vue'),
|
||||||
|
redirect: { name: 'configuration' },
|
||||||
meta: {
|
meta: {
|
||||||
permissionsKey: 'config',
|
permissionsKey: 'config',
|
||||||
icon: 'vuesax-linear:setting',
|
icon: 'vuesax-linear:setting',
|
||||||
|
|||||||
Reference in New Issue
Block a user