营销：完善装修编辑器预览功能

Author: owen118z

.env.base

@@ -17,3 +17,6 @@ VITE_API_URL=/admin-api
 
 # 打包路径
 VITE_BASE_PATH=/
+
+# 商城H5会员端域名
+VITE_MALL_H5_DOMAIN=http://localhost:3000

.env.dev

@@ -29,3 +29,6 @@ VITE_SOURCEMAP=false
 
 # 输出路径
 VITE_OUT_DIR=dist
+
+# 商城H5会员端域名
+VITE_MALL_H5_DOMAIN=http://localhost:3000

src/components/DiyEditor/index.vue

@@ -15,7 +15,7 @@
             <Icon icon="system-uicons:reset-alt" :size="24" />
           </el-button>
         </el-tooltip>
-        <el-tooltip content="预览">
+        <el-tooltip content="预览" v-if="previewUrl">
           <el-button @click="handlePreview">
             <Icon icon="ep:view" :size="24" />
           </el-button>
@@ -119,6 +119,19 @@
       </el-aside>
     </el-container>
   </el-container>
+  <!-- 预览弹框 -->
+  <Dialog v-model="previewDialogVisible" title="预览" width="700">
+    <div class="flex justify-around">
+      <IFrame
+        class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
+        :src="previewUrl"
+      />
+      <div class="flex flex-col">
+        <el-text>手机扫码预览</el-text>
+        <Qrcode :text="previewUrl" logo="/logo.gif" />
+      </div>
+    </div>
+  </Dialog>
 </template>
 <script lang="ts">
 // 注册所有的组件
@@ -137,12 +150,12 @@ import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/confi
 import { isString } from '@/utils/is'
 import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
 import { componentConfigs } from '@/components/DiyEditor/components/mobile'
+import { array, oneOfType } from 'vue-types'
+import { propTypes } from '@/utils/propTypes'
 
 /** 页面装修详情页 */
 defineOptions({ name: 'DiyPageDetail' })
 
-// 消息弹窗
-const message = useMessage()
 // 左侧组件库
 const componentLibrary = ref()
 // 页面设置组件
@@ -159,20 +172,22 @@ const selectedComponentIndex = ref<number>(-1)
 // 组件列表
 const pageComponents = ref<DiyComponent<any>[]>([])
 // 定义属性
-const props = defineProps<{
+const props = defineProps({
   // 页面配置，支持Json字符串
-  modelValue: string | PageConfig
+  modelValue: oneOfType<string | PageConfig>([String, Object]).isRequired,
   // 标题
-  title: string
+  title: propTypes.string.def(''),
   // 组件库
-  libs: DiyComponentLibrary[]
+  libs: array<DiyComponentLibrary>(),
   // 是否显示顶部导航栏
-  showNavigationBar: boolean
+  showNavigationBar: propTypes.bool.def(true),
   // 是否显示底部导航菜单
-  showTabBar: boolean
+  showTabBar: propTypes.bool.def(false),
   // 是否显示页面配置
-  showPageConfig: boolean
-}>()
+  showPageConfig: propTypes.bool.def(true),
+  // 预览地址：提供了预览地址，才会显示预览按钮
+  previewUrl: propTypes.string.def('')
+})
 
 // 监听传入的页面配置
 watch(
@@ -315,8 +330,9 @@ const handleReset = () => {
   emits('reset')
 }
 // 预览
+const previewDialogVisible = ref(false)
 const handlePreview = () => {
-  message.warning('开发中~')
+  previewDialogVisible.value = true
   emits('preview')
 }
 

src/views/mall/promotion/diy/page/decorate.vue

@@ -4,9 +4,6 @@
     v-model="formData.property"
     :title="formData.name"
     :libs="PAGE_LIBS"
-    :show-page-config="true"
-    :show-navigation-bar="true"
-    :show-tab-bar="false"
     @save="submitForm"
   />
 </template>