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']
|
||||
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']
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user