From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mall/promotion/diy/template/decorate.vue | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 214 insertions(+), 0 deletions(-)
diff --git a/src/views/mall/promotion/diy/template/decorate.vue b/src/views/mall/promotion/diy/template/decorate.vue
new file mode 100644
index 0000000..63f3931
--- /dev/null
+++ b/src/views/mall/promotion/diy/template/decorate.vue
@@ -0,0 +1,214 @@
+<template>
+ <DiyEditor
+ v-if="formData && !formLoading"
+ v-model="currentFormData!.property"
+ :libs="libs"
+ :preview-url="previewUrl"
+ :show-navigation-bar="selectedTemplateItem !== 0"
+ :show-page-config="selectedTemplateItem !== 0"
+ :show-tab-bar="selectedTemplateItem === 0"
+ :title="templateItems[selectedTemplateItem].name"
+ @reset="handleEditorReset"
+ @save="submitForm"
+ >
+ <template #toolBarLeft>
+ <el-radio-group
+ :model-value="selectedTemplateItem"
+ class="h-full!"
+ @change="handleTemplateItemChange"
+ >
+ <el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
+ <el-radio-button :value="index">
+ <Icon :icon="item.icon" :size="24" />
+ </el-radio-button>
+ </el-tooltip>
+ </el-radio-group>
+ </template>
+ </DiyEditor>
+</template>
+<script lang="ts" setup>
+// TODO @鐤媯锛氳涓嶈寤轰釜 decorate 鐩綍锛岀劧鍚庢尓杩涘幓锛屾敼鎴� index.vue锛岃繖鏍峰彲浠ユ洿鏄庣‘鐪嬪埌鏄釜鐙珛鐣岄潰鍝堬紝鏇村ソ鎵�
+import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 鍟嗗煄鐨� DIY 缁勪欢锛屽湪 DiyEditor 鐩綍涓�
+import { toNumber } from 'lodash-es'
+import { isEmpty } from '@/utils/is'
+import { getTenantId } from '@/utils/auth'
+
+/** 瑁呬慨妯℃澘琛ㄥ崟 */
+defineOptions({ name: 'DiyTemplateDecorate' })
+
+// 宸︿笂瑙掑伐鍏锋爮鎿嶄綔鎸夐挳
+const selectedTemplateItem = ref(0)
+const templateItems = reactive([
+ { name: '鍩虹璁剧疆', icon: 'ep:iphone' },
+ { name: '棣栭〉', icon: 'ep:home-filled' },
+ { name: '鎴戠殑', icon: 'ep:user-filled' }
+])
+
+const message = useMessage() // 娑堟伅寮圭獥
+
+const formLoading = ref(false) // 琛ㄥ崟鐨勫姞杞戒腑锛�1锛変慨鏀规椂鐨勬暟鎹姞杞斤紱2锛夋彁浜ょ殑鎸夐挳绂佺敤
+const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
+const formRef = ref() // 琛ㄥ崟 Ref
+// 褰撳墠缂栬緫鐨勫睘鎬�
+const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>({
+ property: ''
+} as DiyPageApi.DiyPageVO)
+// templateItem 瀵瑰簲鐨勭紦瀛�
+const currentFormDataMap = ref<
+ Map<string, DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>
+>(new Map())
+// 鍟嗗煄 H5 棰勮鍦板潃
+const previewUrl = ref('')
+
+// 鑾峰彇璇︽儏
+const getPageDetail = async (id: any) => {
+ formLoading.value = true
+ try {
+ formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
+ // 鎷兼帴鎵嬫満棰勮閾炬帴
+ const domain = import.meta.env.VITE_MALL_H5_DOMAIN
+ previewUrl.value = `${domain}?templateId=${formData.value.id}&tenantId=${getTenantId()}`
+ } finally {
+ formLoading.value = false
+ }
+}
+
+// 妯℃澘缁勪欢搴�
+const templateLibs = [] as DiyComponentLibrary[]
+// 褰撳墠缁勪欢搴�
+const libs = ref<DiyComponentLibrary[]>(templateLibs)
+// 妯℃澘閫夐」鍒囨崲
+const handleTemplateItemChange = (val: number) => {
+ // 缂撳瓨妯＄増缂栬緫鏁版嵁
+ currentFormDataMap.value.set(
+ templateItems[selectedTemplateItem.value].name,
+ currentFormData.value!
+ )
+ // 璇诲彇妯＄増缂撳瓨
+ const data = currentFormDataMap.value.get(templateItems[val].name)
+
+ // 鍒囨崲妯＄増
+ selectedTemplateItem.value = val
+ // 缂栬緫妯℃澘
+ if (val === 0) {
+ libs.value = templateLibs
+ currentFormData.value = (isEmpty(data) ? formData.value : data) as
+ | DiyTemplateApi.DiyTemplatePropertyVO
+ | DiyPageApi.DiyPageVO
+ return
+ }
+
+ // 缂栬緫椤甸潰
+ libs.value = PAGE_LIBS
+ currentFormData.value = (
+ isEmpty(data)
+ ? formData.value!.pages.find(
+ (page: DiyPageApi.DiyPageVO) => page.name === templateItems[val].name
+ )
+ : data
+ ) as DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO
+}
+
+// 鎻愪氦琛ㄥ崟
+const submitForm = async () => {
+ // 鏍￠獙琛ㄥ崟
+ if (!formRef) return
+ // 鎻愪氦璇锋眰
+ formLoading.value = true
+ try {
+ // 瀵规墍鏈夌殑 templateItems 閮借繘琛屼繚瀛橈紝鏈夌紦瀛樺垯淇濆瓨缂撳瓨锛岃В鍐抽兘鏈変慨鏀规椂鍙繚瀛樹簡褰撳墠鎵�缂栬緫鐨� templateItem锛屽鑷磋淇晥鏋滃瓨鍦ㄥ樊寮�
+ for (let i = 0; i < templateItems.length; i++) {
+ const data = currentFormDataMap.value.get(templateItems[i].name) as any
+ // 鎯呭喌涓�锛氬熀纭�璁剧疆
+ if (i === 0) {
+ // 鎻愪氦妯℃澘灞炴��
+ await DiyTemplateApi.updateDiyTemplateProperty(isEmpty(data) ? unref(formData)! : data)
+ continue
+ }
+ // 鎻愪氦椤甸潰灞炴��
+ // 鎯呭喌浜岋細鎻愪氦褰撳墠姝ｅ湪缂栬緫鐨勯〉闈�
+ if (currentFormData.value?.name.includes(templateItems[i].name)) {
+ await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+ continue
+ }
+ // 鎯呭喌涓夛細鎻愪氦椤甸潰缂栬緫缂撳瓨
+ if (!isEmpty(data)) {
+ await DiyPageApi.updateDiyPageProperty(data!)
+ }
+ }
+ message.success('淇濆瓨鎴愬姛')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+// 閲嶇疆琛ㄥ崟
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ used: false,
+ usedTime: undefined,
+ remark: '',
+ previewPicUrls: [],
+ property: '',
+ pages: []
+ } as DiyTemplateApi.DiyTemplatePropertyVO
+ formRef.value?.resetFields()
+}
+
+// 閲嶇疆鏃惰褰曞綋鍓嶇紪杈戠殑椤甸潰
+const handleEditorReset = () => storePageIndex()
+
+//#region 鏃犳劅鍒锋柊
+// 璁板綍鏍囪瘑
+const DIY_PAGE_INDEX_KEY = 'diy_page_index'
+
+// 1. 璁板綍
+function storePageIndex() {
+ debugger
+ return sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
+}
+// 2. 鎭㈠
+const recoverPageIndex = () => {
+ debugger
+ // 鎭㈠閲嶇疆鍓嶇殑椤甸潰锛岄粯璁ゆ槸绗竴涓〉闈�
+ const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
+ // 绉婚櫎鏍囪
+ sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
+
+ // 閲嶆柊鍒濆鍖栨暟鎹�
+ currentFormData.value = formData.value as
+ | DiyTemplateApi.DiyTemplatePropertyVO
+ | DiyPageApi.DiyPageVO
+ currentFormDataMap.value = new Map<
+ string,
+ DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO
+ >()
+ // 鍒囨崲椤甸潰
+ if (pageIndex !== selectedTemplateItem.value) {
+ handleTemplateItemChange(pageIndex)
+ }
+}
+//#endregion
+
+/** 鍒濆鍖� **/
+const { currentRoute } = useRouter() // 璺敱
+const { delView } = useTagsViewStore() // 瑙嗗浘鎿嶄綔
+onMounted(async () => {
+ resetForm()
+ if (!currentRoute.value.params.id) {
+ message.warning('鍙傛暟閿欒锛岄〉闈㈢紪鍙蜂笉鑳戒负绌猴紒')
+ delView(unref(currentRoute))
+ return
+ }
+
+ // 鏌ヨ璇︽儏
+ await getPageDetail(currentRoute.value.params.id)
+ // 鎭㈠閲嶇疆鍓嶇殑椤甸潰
+ recoverPageIndex()
+})
+</script>
--
Gitblit v1.8.0