weixin_52219567 4 天之前
父节点
当前提交
9a1baab900

+ 8 - 0
src/api/diy/index.ts

@@ -9,6 +9,14 @@ export function diyList(query: any) {
   });
 }
 
+// H5删除自定义页面
+export function delDiy(id: any) {
+  return request({
+    url: '/mall/diyPage/' + id,
+    method: 'delete'
+  });
+}
+
 // 自定义页面模版
 export function template(query: any) {
   return request({

二进制
src/assets/images/diy/diy1.jpg


二进制
src/assets/images/diy/diy2.jpg


二进制
src/assets/images/diy/diy3.jpg


二进制
src/assets/images/diy/diy4.png


二进制
src/assets/images/diy/diy5.jpg


+ 1 - 0
src/components/WebLinkInput/index.vue

@@ -130,6 +130,7 @@ defineExpose({
 <style lang="scss" scoped>
 .web-link-input-wrapper {
   position: relative;
+  width: 100%;
 
   .el-input {
     width: 100%;

+ 6 - 1
src/router/index.ts

@@ -49,7 +49,12 @@ export const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: '/diy/pcedit',
-    component: () => import('@/views/diy/pcedit.vue'),
+    component: () => import('@/views/diy/pcEdit.vue'),
+    hidden: true
+  },
+  {
+    path: '/diy/edit',
+    component: () => import('@/views/diy/edit.vue'),
     hidden: true
   },
   {

+ 4 - 14
src/store/modules/diy.ts

@@ -67,10 +67,7 @@ const useDiyStore = defineStore('diy', {
           textAlign: 'center', // 文字对齐方式
           inputPlaceholder: '请输入搜索关键词',
           imgUrl: '', // 图片
-          link: {
-            // 跳转链接
-            name: ''
-          }
+          link: ''
         },
 
         // 底部导航
@@ -97,9 +94,7 @@ const useDiyStore = defineStore('diy', {
           imgHeight: '',
           count: 'once', // 'once'(仅一次) | 'always'(每次)
           show: 0,
-          link: {
-            name: ''
-          }
+          link: ''
         },
 
         // 公共模板属性,所有组件都继承,无需重复定义,组件内部根据业务自行调用
@@ -172,10 +167,7 @@ const useDiyStore = defineStore('diy', {
           textAlign: 'center', // 文字对齐方式
           inputPlaceholder: '请输入搜索关键词',
           imgUrl: '', // 图片
-          link: {
-            // 跳转链接
-            name: ''
-          }
+          link: ''
         },
 
         // 底部导航
@@ -203,9 +195,7 @@ const useDiyStore = defineStore('diy', {
           imgHeight: '',
           count: 'once', // 'once'(仅一次) | 'always'(每次)
           show: 0,
-          link: {
-            name: ''
-          }
+          link: ''
         },
 
         // 公共模板属性,所有组件都继承,无需重复定义,组件内部根据业务自行调用

+ 119 - 0
src/views/diy/components/edit-page.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <!-- 内容 -->
+    <div class="content-wrap" v-show="diyStore.editTab == 'content'">
+      <div class="edit-attr-item-wrap">
+        <h3 class="mb-[10px]">页面内容</h3>
+        <el-form label-width="80px" class="px-[10px]" @submit.prevent>
+          <el-form-item label="页面名称">
+            <el-input v-model.trim="diyStore.pageTitle" placeholder="请输入页面名称" clearable maxlength="16" show-word-limit />
+            <div class="text-sm text-gray-400">页面名称用于后台显示</div>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表单布局 页面设置 -->
+      <slot name="content"></slot>
+
+      <div class="edit-attr-item-wrap" v-if="diyStore.global.topStatusBar.control">
+        <h3 class="mb-[10px]">导航栏内容</h3>
+        <el-form label-width="80px" class="px-[10px]" @submit.prevent>
+          <el-form-item label="导航栏" class="display-block">
+            <el-switch v-model="diyStore.global.topStatusBar.isShow" />
+            <div class="text-sm text-gray-400">此处控制当前页面导航栏是否显示</div>
+          </el-form-item>
+          <template v-if="diyStore.global.topStatusBar.isShow">
+            <el-form-item label="页面标题">
+              <el-input v-model.trim="diyStore.global.title" placeholder="请输入页面标题" clearable maxlength="12" show-word-limit />
+              <div class="text-sm text-gray-400">页面标题用于前台显示</div>
+            </el-form-item>
+            <el-form-item label="对齐方式" v-show="diyStore.global.topStatusBar.style == 'style-1'">
+              <el-radio-group v-model="diyStore.global.topStatusBar.textAlign">
+                <el-radio :value="'left'">居左</el-radio>
+                <el-radio :value="'center'">居中</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </template>
+        </el-form>
+      </div>
+      <div class="edit-attr-item-wrap" v-if="diyStore.global.bottomTabBar.control">
+        <h3 class="mb-[10px]">底部导航内容</h3>
+        <el-form label-width="80px" class="px-[10px]">
+          <el-form-item label="底部导航" class="display-block">
+            <el-switch v-model="diyStore.global.bottomTabBar.isShow" />
+            <div class="text-sm text-gray-400">此处控制当前页面底部导航菜单是否显示</div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <!-- 样式 -->
+    <div class="style-wrap" v-show="diyStore.editTab == 'style'">
+      <div class="edit-attr-item-wrap">
+        <h3 class="mb-[10px]">页面样式</h3>
+        <el-form label-width="115px" class="px-[10px]">
+          <el-form-item label="页面颜色">
+            <el-color-picker v-model="diyStore.editComponent.pageStartBgColor" show-alpha :predefine="diyStore.predefineColors" />
+            <icon name="iconfont iconmap-connect" size="20px" class="block !text-gray-400 mx-[5px]" />
+            <el-color-picker v-model="diyStore.editComponent.pageEndBgColor" show-alpha :predefine="diyStore.predefineColors" />
+          </el-form-item>
+          <el-form-item label="渐变角度">
+            <el-radio-group v-model="diyStore.editComponent.pageGradientAngle">
+              <el-radio value="to bottom">从上到下</el-radio>
+              <el-radio value="to right">从左到右</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="高度比例">
+            <el-slider v-model="diyStore.global.bgHeightScale" show-input size="small" class="ml-[10px] diy-nav-slider" />
+          </el-form-item>
+          <div class="text-sm text-gray-400 ml-[80px] mb-[10px]">为0时背景高度自适应展示</div>
+          <el-form-item label="背景图片">
+            <upload-image v-model="diyStore.global.bgUrl" :limit="1" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="edit-attr-item-wrap" v-if="diyStore.global.topStatusBar.control">
+        <h3 class="mb-[10px]">导航栏样式</h3>
+        <el-form label-width="115px" class="px-[10px]">
+          <el-form-item label="头部颜色" class="display-block">
+            <el-color-picker v-model="diyStore.global.topStatusBar.bgColor" show-alpha />
+          </el-form-item>
+          <el-form-item label="滚动后头部颜色" class="display-block">
+            <el-color-picker v-model="diyStore.global.topStatusBar.rollBgColor" show-alpha />
+          </el-form-item>
+          <el-form-item label="标题颜色" class="display-block">
+            <el-color-picker v-model="diyStore.global.topStatusBar.textColor" show-alpha />
+          </el-form-item>
+          <el-form-item label="滚动后标题颜色" class="display-block">
+            <el-color-picker v-model="diyStore.global.topStatusBar.rollTextColor" show-alpha />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="edit-attr-item-wrap">
+        <h3 class="mb-[10px]">边距设置</h3>
+        <el-form label-width="115px" class="px-[10px]">
+          <el-form-item label="左右边距">
+            <el-slider v-model="diyStore.global.template.margin.both" show-input size="small" @input="inputBoth" class="ml-[10px] diy-nav-slider" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import useDiyStore from '@/store/modules/diy';
+
+const diyStore = useDiyStore();
+
+// 改变页面的左右边距时,更新所有组件的数值
+const inputBoth = (value: any) => {
+  diyStore.value.forEach((item, index) => {
+    item.margin.both = value;
+  });
+};
+
+defineExpose({});
+</script>
+
+<style lang="scss" scoped></style>

+ 396 - 0
src/views/diy/components/edit-shop-goods-detail-basic-info.vue

@@ -0,0 +1,396 @@
+<template>
+  <!-- 内容 -->
+  <div class="content-wrap goods-detail-basic-info" v-show="diyStore.editTab == 'content'">
+    <div class="edit-attr-item-wrap">
+      <h3 class="mb-[10px]">顶部导航</h3>
+      <el-form label-width="100px" class="px-[10px]">
+        <el-form-item label="菜单内容">
+          <el-checkbox-group v-model="menuContent" :min="2" @change="menuContentChange">
+            <el-checkbox label="首页" value="index" />
+            <el-checkbox label="搜索" value="search" />
+            <el-checkbox label="购物车" value="cart" />
+            <el-checkbox label="个人中心" value="member" />
+            <el-checkbox label="我的收藏" value="collect" />
+            <el-checkbox label="商品列表" value="goods_list" />
+            <el-checkbox label="商品分类" value="goods_category" />
+          </el-checkbox-group>
+          <div class="text-sm text-gray-400">菜单内容最少选择2个</div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="edit-attr-item-wrap">
+      <h3 class="mb-[10px]">商品媒体</h3>
+      <el-form label-width="100px" class="px-[10px]">
+        <el-form-item label="商品主图">
+          <el-radio-group v-model="diyStore.editComponent.medium.type">
+            <el-radio label="square_img">固定方图</el-radio>
+            <el-radio label="height_adaptive">高度自适应</el-radio>
+            <div class="text-sm text-gray-400 leading-[1.6]">注意:高度自适应指商品主图的高度与第一张商品图的高度保持一致</div>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="轮播点">
+          <el-radio-group v-model="diyStore.editComponent.medium.indicator">
+            <el-radio :label="true">显示</el-radio>
+            <el-radio :label="false">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="edit-attr-item-wrap">
+      <h3 class="mb-[10px]">价格展示</h3>
+      <el-form label-width="100px" class="px-[10px]">
+        <el-form-item label="展示方式">
+          <el-radio-group v-model="diyStore.editComponent.priceRegion.showWay">
+            <el-radio label="normal">常规</el-radio>
+            <el-radio label="fixed">置顶</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="edit-attr-item-wrap" v-if="diyStore.editComponent.priceRegion.showWay == 'fixed'">
+      <h3 class="mb-[10px]">普通价格背景图</h3>
+      <el-form label-width="100px" class="px-[10px]">
+        <el-form-item label="风格选择" class="flex">
+          <span class="text-primary flex-1 cursor-pointer" @click="showGoodsStyle">{{ diyStore.editComponent.priceRegion.goodsStyle.title }}</span>
+          <el-icon>
+            <ArrowRight />
+          </el-icon>
+        </el-form-item>
+        <el-form-item label="背景图片">
+          <upload-image v-model="diyStore.editComponent.priceRegion.bgImg" :limit="1" />
+          <div class="text-sm text-gray-400">背景图片推荐尺寸:750*148</div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="edit-attr-item-wrap">
+      <h3 class="mb-[10px]">活动价格背景图</h3>
+      <el-form label-width="100px" class="px-[10px]">
+        <div class="text-sm text-gray-400 mb-[10px]">适用场景:限时折扣、新人专享、会员价</div>
+        <el-form-item label="风格选择" class="flex">
+          <span class="text-primary flex-1 cursor-pointer" @click="showMarketingStyle">{{
+            diyStore.editComponent.priceRegion.marketingStyle.title
+          }}</span>
+          <el-icon>
+            <ArrowRight />
+          </el-icon>
+        </el-form-item>
+        <el-form-item label="背景图片">
+          <upload-image v-model="diyStore.editComponent.priceRegion.marketingBgImg" :limit="1" />
+          <div class="text-sm text-gray-400">背景图片推荐尺寸:750*148</div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="edit-attr-item-wrap">
+      <h3 class="mb-[10px]">销售信息</h3>
+      <el-form label-width="100px" class="px-[10px]">
+        <el-form-item label="是否展示">
+          <el-checkbox-group v-model="saleInfo" @change="saleInfoChange">
+            <el-checkbox label="划线价" value="underlined_price" />
+            <el-checkbox label="累计销量" value="sales" />
+            <el-checkbox label="库存" value="stock" />
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 普通商品风格 -->
+    <el-dialog v-model="goodsStyleDialog" title="selectStyle" width="460px">
+      <div class="flex flex-wrap">
+        <template v-for="(item, index) in Object.values(goodsStyleList)" :key="index">
+          <div
+            :class="{ 'border-primary': selectGoodsStyle.value == item.value }"
+            @click="changeGoodsStyle(item)"
+            class="flex items-center justify-center overflow-hidden w-[200px] h-[100px] mr-[12px] mb-[12px] cursor-pointer border bg-[#eee]"
+          >
+            <img :src="img(item.url)" />
+          </div>
+        </template>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="goodsStyleDialog = false">取消</el-button>
+          <el-button type="primary" @click="confirmGoodsStyle">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 营销活动风格 -->
+    <el-dialog v-model="marketingStyleDialog" title="风格" width="460px">
+      <div class="flex flex-wrap">
+        <template v-for="(item, index) in Object.values(marketingGoodsStyleList)" :key="index">
+          <div
+            :class="{ 'border-primary': selectMarketingStyle.value == item.value }"
+            @click="changeMarketingStyle(item)"
+            class="flex items-center justify-center overflow-hidden w-[200px] h-[100px] mr-[12px] mb-[12px] cursor-pointer border bg-[#eee]"
+          >
+            <img :src="img(item.url)" />
+          </div>
+        </template>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="marketingStyleDialog = false">取消</el-button>
+          <el-button type="primary" @click="confirmMarketingStyle">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+
+  <!-- 样式 -->
+  <div class="style-wrap" v-show="diyStore.editTab == 'style'">
+    <!-- 价格模块样式 -->
+    <div class="edit-attr-item-wrap">
+      <h3 class="mb-[10px]">价格样式</h3>
+      <div class="text-sm text-gray-400 mb-[10px] leading-[1.6]">仅在普通价格置顶时或营销活动开启的情况下生效</div>
+      <el-form label-width="100px" class="px-[10px]">
+        <el-form-item label="价格背景色">
+          <el-color-picker v-model="diyStore.editComponent.goodsInfo.priceBgColor" />
+        </el-form-item>
+        <el-form-item label="价格上圆角">
+          <el-slider
+            v-model="diyStore.editComponent.goodsInfo.priceTopRounded"
+            show-input
+            size="small"
+            class="ml-[10px] diy-nav-slider"
+            :min="0"
+            :max="100"
+          />
+        </el-form-item>
+        <el-form-item label="价格下圆角">
+          <el-slider
+            v-model="diyStore.editComponent.goodsInfo.priceBottomRounded"
+            show-input
+            size="small"
+            class="ml-[10px] diy-nav-slider"
+            :min="0"
+            :max="100"
+          />
+        </el-form-item>
+        <el-form-item label="上边距">
+          <el-slider
+            v-model="diyStore.editComponent.goodsInfo.priceTopMargin"
+            show-input
+            size="small"
+            class="ml-[10px] diy-nav-slider"
+            :min="-50"
+            :max="50"
+          />
+        </el-form-item>
+        <el-form-item label="左右边距">
+          <el-slider
+            v-model="diyStore.editComponent.goodsInfo.priceAboutMargin"
+            show-input
+            size="small"
+            class="ml-[10px] diy-nav-slider"
+            :min="0"
+            :max="20"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 商品信息样式 -->
+    <div class="edit-attr-item-wrap">
+      <h3 class="mb-[10px]">商品信息样式</h3>
+      <el-form label-width="100px" class="px-[10px]">
+        <el-form-item label="标题颜色">
+          <el-color-picker v-model="diyStore.editComponent.goodsInfo.titleColor" />
+        </el-form-item>
+        <el-form-item label="副标题颜色">
+          <el-color-picker v-model="diyStore.editComponent.goodsInfo.subTitleColor" />
+        </el-form-item>
+        <el-form-item label="销售信息色">
+          <el-color-picker v-model="diyStore.editComponent.goodsInfo.saleInfoColor" />
+        </el-form-item>
+        <el-form-item label="商品背景色">
+          <el-color-picker v-model="diyStore.editComponent.goodsInfo.startBgColor" show-alpha :predefine="diyStore.predefineColors" />
+          <icon name="iconfont iconmap-connect" size="20px" class="block !text-gray-400 mx-[5px]" />
+          <el-color-picker v-model="diyStore.editComponent.goodsInfo.endBgColor" show-alpha :predefine="diyStore.predefineColors" />
+        </el-form-item>
+        <el-form-item label="商品上圆角">
+          <el-slider
+            v-model="diyStore.editComponent.goodsInfo.topRounded"
+            show-input
+            size="small"
+            class="ml-[10px] diy-nav-slider"
+            :min="0"
+            :max="100"
+          />
+        </el-form-item>
+        <el-form-item label="商品下圆角">
+          <el-slider
+            v-model="diyStore.editComponent.goodsInfo.bottomRounded"
+            show-input
+            size="small"
+            class="ml-[10px] diy-nav-slider"
+            :min="0"
+            :max="100"
+          />
+        </el-form-item>
+        <el-form-item label="上边距">
+          <el-slider
+            v-model="diyStore.editComponent.goodsInfo.topMargin"
+            show-input
+            size="small"
+            class="ml-[10px] diy-nav-slider"
+            :min="-50"
+            :max="50"
+          />
+        </el-form-item>
+        <el-form-item label="左右边距">
+          <el-slider
+            v-model="diyStore.editComponent.goodsInfo.aboutMargin"
+            show-input
+            size="small"
+            class="ml-[10px] diy-nav-slider"
+            :min="0"
+            :max="20"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 组件样式 -->
+    <slot name="style"></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { img } from '@/utils/common';
+import useDiyStore from '@/store/modules/diy';
+import { ref, reactive, onMounted } from 'vue';
+
+const diyStore: any = useDiyStore();
+diyStore.editComponent.ignore = ['pageBgColor', 'componentBgUrl', 'marginTop', 'marginBottom', 'marginBoth', 'topRounded', 'bottomRounded']; // 忽略公共属性
+
+// 组件验证
+diyStore.editComponent.verify = (index: number) => {
+  const res = { code: true, message: '' };
+
+  if (diyStore.value[index].priceRegion.showWay == 'fixed') {
+    if (diyStore.value[index].priceRegion.bgImg.length == 0) {
+      res.code = false;
+      res.message = '请上传普通价格的置顶背景图';
+    }
+  }
+  return res;
+};
+
+const initFn = () => {
+  if (diyStore.editComponent.menuContent) {
+    menuContent.value =
+      typeof diyStore.editComponent.menuContent == 'object' ? diyStore.editComponent.menuContent : diyStore.editComponent.menuContent.split(',');
+  }
+  if (diyStore.editComponent.saleInfo) {
+    saleInfo.value =
+      typeof diyStore.editComponent.saleInfo == 'object' ? diyStore.editComponent.saleInfo : diyStore.editComponent.saleInfo.split(',');
+  }
+};
+
+// 菜单内容
+const menuContent = ref([]);
+const menuContentChange = (val: any) => {
+  diyStore.editComponent.menuContent = val;
+};
+
+// 销售信息
+const saleInfo = ref([]);
+const saleInfoChange = (val: any) => {
+  diyStore.editComponent.saleInfo = val;
+};
+
+// 普通商品风格
+const goodsStyleDialog = ref(false);
+const goodsStyleList = reactive({
+  'style-1': {
+    url: 'addon/shop/diy/goods_detail/style_01.jpg',
+    title: '风格1',
+    value: 'style-1'
+  },
+  'style-2': {
+    url: 'addon/shop/diy/goods_detail/style_02.jpg',
+    title: '风格2',
+    value: 'style-2'
+  },
+  'style-3': {
+    url: 'addon/shop/diy/goods_detail/style_03.jpg',
+    title: '风格3',
+    value: 'style-3'
+  },
+  'style-4': {
+    url: 'addon/shop/diy/goods_detail/style_04.jpg',
+    title: '风格4',
+    value: 'style-4'
+  }
+});
+const selectGoodsStyle = reactive({
+  title: '风格1',
+  url: 'addon/shop/diy/goods_detail/style_01.jpg',
+  value: 'style-1'
+});
+
+const showGoodsStyle = () => {
+  selectGoodsStyle.title = diyStore.editComponent.priceRegion.goodsStyle.title;
+  selectGoodsStyle.value = diyStore.editComponent.priceRegion.goodsStyle.value;
+  selectGoodsStyle.url = diyStore.editComponent.priceRegion.bgImg;
+  goodsStyleDialog.value = true;
+};
+
+const changeGoodsStyle = (item: any) => {
+  selectGoodsStyle.title = item.title;
+  selectGoodsStyle.value = item.value;
+  selectGoodsStyle.url = item.url;
+};
+
+const confirmGoodsStyle = () => {
+  diyStore.editComponent.priceRegion.goodsStyle.title = selectGoodsStyle.title;
+  diyStore.editComponent.priceRegion.goodsStyle.value = selectGoodsStyle.value;
+  diyStore.editComponent.priceRegion.bgImg = selectGoodsStyle.url || goodsStyleList[selectGoodsStyle.value].url;
+  goodsStyleDialog.value = false;
+};
+
+// 营销商品风格
+const marketingStyleDialog = ref(false);
+const marketingGoodsStyleList = reactive({
+  'style-1': {
+    url: 'addon/shop/diy/goods_detail/marketing_style_01.jpg',
+    title: '风格1',
+    value: 'style-1'
+  },
+  'style-2': {
+    url: 'addon/shop/diy/goods_detail/marketing_style_02.jpg',
+    title: '风格2',
+    value: 'style-2'
+  }
+});
+const selectMarketingStyle = reactive({
+  title: '风格1',
+  url: 'addon/shop/diy/goods_detail/marketing_style_01.jpg',
+  value: 'style-1'
+});
+
+const showMarketingStyle = () => {
+  selectMarketingStyle.title = diyStore.editComponent.priceRegion.marketingStyle.title;
+  selectMarketingStyle.value = diyStore.editComponent.priceRegion.marketingStyle.value;
+  selectMarketingStyle.url = diyStore.editComponent.priceRegion.marketingBgImg;
+  marketingStyleDialog.value = true;
+};
+
+const changeMarketingStyle = (item: any) => {
+  selectMarketingStyle.title = item.title;
+  selectMarketingStyle.value = item.value;
+  selectMarketingStyle.url = item.url;
+};
+
+const confirmMarketingStyle = () => {
+  diyStore.editComponent.priceRegion.marketingStyle.title = selectMarketingStyle.title;
+  diyStore.editComponent.priceRegion.marketingStyle.value = selectMarketingStyle.value;
+  diyStore.editComponent.priceRegion.marketingBgImg = selectMarketingStyle.url || marketingGoodsStyleList[selectMarketingStyle.value].url;
+  marketingStyleDialog.value = false;
+};
+
+onMounted(() => {
+  initFn();
+});
+
+defineExpose({});
+</script>
+
+<style lang="scss" scoped></style>

+ 2 - 2
src/views/diy/components/edit-text.vue

@@ -20,7 +20,7 @@
             <el-input v-model.trim="diyStore.editComponent.text" placeholder="请输入标题" clearable maxlength="15" show-word-limit />
           </el-form-item>
           <el-form-item label="链接地址">
-            <diy-link v-model="diyStore.editComponent.link" />
+            <WebLinkInput v-model="diyStore.editComponent.link" placeholder="请输入或选择链接" />
           </el-form-item>
           <el-form-item label="对齐方式" v-show="diyStore.editComponent.style == 'style-1'">
             <el-radio-group v-model="diyStore.editComponent.textAlign">
@@ -60,7 +60,7 @@
             <el-input v-model.trim="diyStore.editComponent.more.text" placeholder="请输入文字" clearable maxlength="8" show-word-limit />
           </el-form-item>
           <el-form-item label="链接地址">
-            <diy-link v-model="diyStore.editComponent.more.link" />
+            <diy-link v-model="diyStore.editComponent.more.link" style="width: 100%" />
           </el-form-item>
           <el-form-item label="是否显示">
             <el-switch v-model="diyStore.editComponent.more.isShow" />

+ 1599 - 0
src/views/diy/edit.ts

@@ -0,0 +1,1599 @@
+export const data1 = {
+  'page': '/app/pages/index/diy',
+  'component': {
+    'BASIC': {
+      'title': '基础组件',
+      'list': {
+        'Text': {
+          'title': '标题',
+          'icon': 'iconfont iconbiaotipc',
+          'path': 'edit-text',
+          'uses': 0,
+          'position': '',
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 0
+            }
+          },
+          'value': {
+            'style': 'style-1',
+            'styleName': '风格1',
+            'text': '标题栏',
+            'link': '',
+            'textColor': '#303133',
+            'fontSize': 16,
+            'fontWeight': 'normal',
+            'textAlign': 'center',
+            'subTitle': {
+              'text': '副标题',
+              'color': '#999999',
+              'fontSize': 14,
+              'control': false,
+              'fontWeight': 'normal'
+            },
+            'more': {
+              'text': '更多',
+              'control': false,
+              'isShow': true,
+              'link': '',
+              'color': '#999999'
+            }
+          }
+        },
+        'ImageAds': {
+          'title': '图片广告',
+          'icon': 'iconfont icontupiandaohangpc',
+          'path': 'edit-image-ads',
+          'uses': 0,
+          'value': {
+            'imageHeight': 180,
+            'isSameScreen': false,
+            'list': [
+              {
+                'link': '',
+                'imageUrl': '',
+                'imgWidth': 0,
+                'imgHeight': 0
+              }
+            ]
+          }
+        },
+        'GraphicNav': {
+          'title': '图文导航',
+          'icon': 'iconfont icontuwendaohangpc',
+          'path': 'edit-graphic-nav',
+          'uses': 0,
+          'value': {
+            'layout': 'horizontal',
+            'mode': 'graphic',
+            'type': 'img',
+            'showStyle': 'fixed',
+            'rowCount': 4,
+            'pageCount': 2,
+            'carousel': {
+              'type': 'circle',
+              'color': '#FFFFFF'
+            },
+            'imageSize': 40,
+            'aroundRadius': 25,
+            'font': {
+              'size': 14,
+              'weight': 'normal',
+              'color': '#303133'
+            },
+            'list': [
+              {
+                'title': '',
+                'link': '',
+                'imageUrl': '',
+                'label': {
+                  'control': false,
+                  'text': '热门',
+                  'textColor': '#FFFFFF',
+                  'bgColorStart': '#F83287',
+                  'bgColorEnd': '#FE3423'
+                }
+              },
+              {
+                'title': '',
+                'link': '',
+                'imageUrl': '',
+                'label': {
+                  'control': false,
+                  'text': '热门',
+                  'textColor': '#FFFFFF',
+                  'bgColorStart': '#F83287',
+                  'bgColorEnd': '#FE3423'
+                }
+              },
+              {
+                'title': '',
+                'link': '',
+                'imageUrl': '',
+                'label': {
+                  'control': false,
+                  'text': '热门',
+                  'textColor': '#FFFFFF',
+                  'bgColorStart': '#F83287',
+                  'bgColorEnd': '#FE3423'
+                }
+              },
+              {
+                'title': '',
+                'link': '',
+                'imageUrl': '',
+                'label': {
+                  'control': false,
+                  'text': '热门',
+                  'textColor': '#FFFFFF',
+                  'bgColorStart': '#F83287',
+                  'bgColorEnd': '#FE3423'
+                }
+              }
+            ],
+            'swiper': {
+              'indicatorColor': 'rgba(0, 0, 0, 0.3)',
+              'indicatorActiveColor': '#FF0E0E',
+              'indicatorStyle': 'style-1',
+              'indicatorAlign': 'center'
+            },
+            'template': {
+              'margin': {
+                'top': 10,
+                'bottom': 10,
+                'both': 0
+              }
+            }
+          }
+        },
+        'RubikCube': {
+          'title': '魔方',
+          'icon': 'iconfont iconmofangpc',
+          'path': 'edit-rubik-cube',
+          'uses': 0,
+          'value': {
+            'mode': 'row1-of2',
+            'imageGap': 0,
+            'list': [
+              {
+                'imageUrl': '',
+                'imgWidth': 0,
+                'imgHeight': 0,
+                'link': ''
+              },
+              {
+                'imageUrl': '',
+                'imgWidth': 0,
+                'imgHeight': 0,
+                'link': ''
+              }
+            ]
+          }
+        },
+        'HotArea': {
+          'title': '热区',
+          'icon': 'iconfont iconrequpc',
+          'path': 'edit-hot-area',
+          'uses': 0,
+          'value': {
+            'imageUrl': '',
+            'imgWidth': 0,
+            'imgHeight': 0,
+            'heatMapData': []
+          }
+        },
+        'MemberLevel': {
+          'title': '会员等级',
+          'icon': 'iconfont iconhuiyuandengjipc',
+          'path': 'edit-member-level',
+          'uses': 1,
+          'value': {
+            'style': 'style-1',
+            'styleName': '风格1'
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 12,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'Notice': {
+          'title': '公告',
+          'icon': 'iconfont icongonggaopc',
+          'path': 'edit-notice',
+          'uses': 0,
+          'value': {
+            'noticeType': 'img',
+            'imgType': 'system',
+            'systemUrl': 'style_1',
+            'imageUrl': '',
+            'showType': 'popup',
+            'scrollWay': 'upDown',
+            'fontSize': 14,
+            'fontWeight': 'normal',
+            'noticeTitle': '公告',
+            'list': [
+              {
+                'text': '公告',
+                'link': ''
+              }
+            ]
+          }
+        },
+        'RichText': {
+          'title': '富文本',
+          'icon': 'iconfont iconfuwenbenpc',
+          'path': 'edit-rich-text',
+          'uses': 0,
+          'value': {
+            'html': ''
+          }
+        },
+        'ActiveCube': {
+          'title': '活动魔方',
+          'icon': 'iconfont iconmofangpc',
+          'path': 'edit-active-cube',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'text': '超值爆款',
+            'textImg': 'static/resource/images/diy/active_cube/active_cube_text1.png',
+            'textLink': {
+              'name': ''
+            },
+            'titleColor': '#F91700',
+            'subTitle': {
+              'text': '为您精选爆款',
+              'textColor': '#FFFFFF',
+              'startColor': '#FB792F',
+              'endColor': '#F91700',
+              'link': ''
+            },
+            'blockStyle': {
+              'title': '风格1',
+              'value': 'style-1',
+              'fontWeight': 'normal',
+              'btnText': 'normal'
+            },
+            'list': [
+              {
+                'title': {
+                  'text': '今日推荐',
+                  'textColor': '#303133'
+                },
+                'subTitle': {
+                  'text': '诚意推荐',
+                  'textColor': '#999999',
+                  'startColor': '',
+                  'endColor': ''
+                },
+                'moreTitle': {
+                  'text': '去看看',
+                  'startColor': '#FEA715',
+                  'endColor': '#FE1E00'
+                },
+                'listFrame': {
+                  'startColor': '#FFFAF5',
+                  'endColor': '#FFFFFF'
+                },
+                'link': '',
+                'imageUrl': 'static/resource/images/diy/active_cube/active_cube_goods1.png'
+              },
+              {
+                'title': {
+                  'text': '优惠好物',
+                  'textColor': '#303133'
+                },
+                'subTitle': {
+                  'text': '领券更优惠',
+                  'textColor': '#999999',
+                  'startColor': '',
+                  'endColor': ''
+                },
+                'moreTitle': {
+                  'text': '去看看',
+                  'startColor': '#FFBF50',
+                  'endColor': '#FF9E03'
+                },
+                'listFrame': {
+                  'startColor': '#FFFAF5',
+                  'endColor': '#FFFFFF'
+                },
+                'link': '',
+                'imageUrl': 'static/resource/images/diy/active_cube/active_cube_goods2.png'
+              },
+              {
+                'title': {
+                  'text': '热销推荐',
+                  'textColor': '#303133'
+                },
+                'subTitle': {
+                  'text': '本周热销商品',
+                  'textColor': '#999999',
+                  'startColor': '',
+                  'endColor': ''
+                },
+                'moreTitle': {
+                  'text': '去看看',
+                  'startColor': '#A2E792',
+                  'endColor': '#49CD2D'
+                },
+                'listFrame': {
+                  'startColor': '#FFFAF5',
+                  'endColor': '#FFFFFF'
+                },
+                'link': '',
+                'imageUrl': 'static/resource/images/diy/active_cube/active_cube_goods3.png'
+              },
+              {
+                'title': {
+                  'text': '书桌好物',
+                  'textColor': '#303133'
+                },
+                'subTitle': {
+                  'text': '办公好物推荐',
+                  'textColor': '#999999',
+                  'startColor': '',
+                  'endColor': ''
+                },
+                'moreTitle': {
+                  'text': '去看看',
+                  'startColor': '#4AC1FF',
+                  'endColor': '#1D7CFF'
+                },
+                'listFrame': {
+                  'startColor': '#FFFAF5',
+                  'endColor': '#FFFFFF'
+                },
+                'link': '',
+                'imageUrl': 'static/resource/images/diy/active_cube/active_cube_goods4.png'
+              }
+            ],
+            'template': {
+              'textColor': '#303133',
+              'pageStartBgColor': '',
+              'pageEndBgColor': '',
+              'pageGradientAngle': 'to bottom',
+              'componentBgUrl': '',
+              'componentBgAlpha': 2,
+              'componentStartBgColor': '',
+              'componentEndBgColor': '',
+              'componentGradientAngle': 'to bottom',
+              'topRounded': 12,
+              'bottomRounded': 12,
+              'elementBgColor': '#FFFAF5',
+              'topElementRounded': 10,
+              'bottomElementRounded': 10,
+              'margin': {
+                'top': 10,
+                'bottom': 10,
+                'both': 10
+              }
+            }
+          }
+        },
+        'CarouselSearch': {
+          'title': '轮播搜索',
+          'icon': 'iconfont iconlunbosousuopc',
+          'path': 'edit-carousel-search',
+          'uses': 1,
+          'position': 'top_fixed',
+          'value': {
+            'positionWay': 'static',
+            'fixedBgColor': '',
+            'bgGradient': false,
+            'search': {
+              'logo': '',
+              'text': '请输入搜索关键词',
+              'link': '',
+              'style': 'style-1',
+              'styleName': '风格一',
+              'subTitle': {
+                'text': '本地好价·优选生活',
+                'textColor': '#000000',
+                'startColor': 'rgba(255,255,255,0.7)',
+                'endColor': ''
+              },
+              'positionColor': '#ffffff',
+              'hotWord': {
+                'interval': 3,
+                'list': []
+              },
+              'color': '#999999',
+              'btnColor': '#ffffff',
+              'bgColor': '#ffffff',
+              'btnBgColor': '#ff3434'
+            },
+            'tab': {
+              'control': true,
+              'noColor': '',
+              'selectColor': '',
+              'fixedNoColor': '',
+              'fixedSelectColor': '',
+              'list': [
+                {
+                  'text': '分类名称',
+                  'source': 'diy_page',
+                  'diy_id': '',
+                  'diy_title': ''
+                },
+                {
+                  'text': '分类名称',
+                  'source': 'diy_page',
+                  'diy_id': '',
+                  'diy_title': ''
+                },
+                {
+                  'text': '分类名称',
+                  'source': 'diy_page',
+                  'diy_id': '',
+                  'diy_title': ''
+                },
+                {
+                  'text': '分类名称',
+                  'source': 'diy_page',
+                  'diy_id': '',
+                  'diy_title': ''
+                }
+              ]
+            },
+            'swiper': {
+              'control': true,
+              'interval': 5,
+              'indicatorColor': 'rgba(0, 0, 0, 0.3)',
+              'indicatorActiveColor': '#FF0E0E',
+              'indicatorStyle': 'style-1',
+              'indicatorAlign': 'center',
+              'swiperStyle': 'style-1',
+              'imageHeight': 168,
+              'topRounded': 0,
+              'bottomRounded': 0,
+              'list': [
+                {
+                  'imageUrl': '',
+                  'imgWidth': 690,
+                  'imgHeight': 330,
+                  'link': ''
+                }
+              ]
+            }
+          }
+        },
+        'FloatBtn': {
+          'title': '浮动按钮',
+          'icon': 'iconfont iconfudonganniupc',
+          'path': 'edit-float-btn',
+          'uses': 1,
+          'position': 'fixed',
+          'value': {
+            'imageSize': 40,
+            'aroundRadius': 0,
+            'style': 'style-1',
+            'styleName': '风格一',
+            'bottomPosition': 'lowerRight',
+            'list': [
+              {
+                'imageUrl': '',
+                'link': ''
+              }
+            ],
+            'offset': 0,
+            'lateralOffset': 15
+          }
+        },
+        'HorzBlank': {
+          'title': '辅助空白',
+          'icon': 'iconfont iconfuzhukongbaipc',
+          'path': 'edit-horz-blank',
+          'uses': 0,
+          'value': {
+            'height': 20
+          }
+        },
+        'HorzLine': {
+          'title': '辅助线',
+          'icon': 'iconfont iconfuzhuxianpc',
+          'path': 'edit-horz-line',
+          'uses': 0,
+          'value': {
+            'borderWidth': 1,
+            'borderColor': '#303133',
+            'borderStyle': 'solid'
+          }
+        },
+        'PictureShow': {
+          'title': '图片展播',
+          'icon': 'iconfont icona-tupianzhanbopc302',
+          'path': 'edit-picture-show',
+          'uses': 0,
+          'value': {
+            'moduleOne': {
+              'head': {
+                'textImg': 'static/resource/images/diy/picture_show/picture_show_head_text3.png',
+                'subText': '最高补1200元',
+                'subTextColor': '#666666'
+              },
+              'list': [
+                {
+                  'btnTitle': {
+                    'text': '全网低价',
+                    'color': '#ffffff',
+                    'startColor': '#F5443E',
+                    'endColor': '#F5443E'
+                  },
+                  'link': '',
+                  'imageUrl': 'static/resource/images/diy/picture_show/picture_05.png'
+                },
+                {
+                  'btnTitle': {
+                    'text': '大牌特惠',
+                    'color': '#ffffff',
+                    'startColor': '#F5443E',
+                    'endColor': '#F5443E'
+                  },
+                  'link': {
+                    'name': ''
+                  },
+                  'imageUrl': 'static/resource/images/diy/picture_show/picture_06.png'
+                }
+              ],
+              'listFrame': {
+                'startColor': '#D4EFFF',
+                'endColor': '#EBF4FA'
+              }
+            },
+            'moduleTwo': {
+              'head': {
+                'textImg': 'static/resource/images/diy/picture_show/picture_show_head_text4.png',
+                'subText': '每日上新',
+                'subTextColor': '#666666'
+              },
+              'list': [
+                {
+                  'btnTitle': {
+                    'text': '人气爆款',
+                    'color': '#ffffff',
+                    'startColor': '#F5443E',
+                    'endColor': '#F5443E'
+                  },
+                  'link': {
+                    'name': ''
+                  },
+                  'imageUrl': 'static/resource/images/diy/picture_show/picture_07.png'
+                },
+                {
+                  'btnTitle': {
+                    'text': '官方正品',
+                    'color': '#ffffff',
+                    'startColor': '#F5443E',
+                    'endColor': '#F5443E'
+                  },
+                  'link': {
+                    'name': ''
+                  },
+                  'imageUrl': 'static/resource/images/diy/picture_show/picture_08.png'
+                }
+              ],
+              'listFrame': {
+                'startColor': '#FFF1D4',
+                'endColor': '#F9F2E5'
+              }
+            },
+            'moduleRounded': {
+              'topRounded': 10,
+              'bottomRounded': 10
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        }
+      }
+    },
+    'SHOP_COMPONENT': {
+      'title': '商城组件',
+      'list': {
+        'GoodsList': {
+          'title': '商品列表',
+          'icon': 'iconfont iconshangpinliebiaopc',
+          'path': 'edit-goods-list',
+          'uses': 0,
+          'value': {
+            'style': 'style-1',
+            'source': 'all',
+            'num': 10,
+            'goods_category': '',
+            'goods_category_name': '请选择',
+            'goods_ids': [],
+            'sortWay': 'default',
+            'goodsNameStyle': {
+              'color': '#303133',
+              'control': true,
+              'fontWeight': 'normal',
+              'isShow': true
+            },
+            'priceStyle': {
+              'color': '#FF4142',
+              'control': true,
+              'isShow': true
+            },
+            'saleStyle': {
+              'color': '#999999',
+              'control': true,
+              'isShow': true
+            },
+            'labelStyle': {
+              'control': true,
+              'isShow': true
+            },
+            'btnStyle': {
+              'fontWeight': false,
+              'padding': 0,
+              'aroundRadius': 25,
+              'cartEvent': 'detail',
+              'text': '购买',
+              'textColor': '#FFFFFF',
+              'startBgColor': '#FF4142',
+              'endBgColor': '#FF4142',
+              'style': 'button',
+              'control': true
+            },
+            'imgElementRounded': 10
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'ShopSearch': {
+          'title': '搜索',
+          'icon': 'iconfont iconsousuopc-1',
+          'path': 'edit-shop-search',
+          'uses': 1,
+          'value': {
+            'searchStyle': 'style-1',
+            'searchLink': {
+              'name': ''
+            },
+            'text': '请输入搜索关键词',
+            'iconType': 'img',
+            'icon': '',
+            'imageUrl': ''
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'ManyGoodsList': {
+          'title': '多商品组',
+          'icon': 'iconfont iconduoshangpinzupc',
+          'path': 'edit-many-goods-list',
+          'uses': 0,
+          'value': {
+            'style': 'style-2',
+            'num': 6,
+            'sortWay': 'default',
+            'headStyle': 'style-1',
+            'aroundRadius': 25,
+            'source': 'custom',
+            'goods_category': '',
+            'goods_category_name': '请选择',
+            'goodsNameStyle': {
+              'color': '#303133',
+              'control': true,
+              'fontWeight': 'normal',
+              'isShow': true
+            },
+            'priceStyle': {
+              'color': '#FF4142',
+              'control': true,
+              'isShow': true
+            },
+            'saleStyle': {
+              'color': '#999999',
+              'control': true,
+              'isShow': true
+            },
+            'labelStyle': {
+              'control': true,
+              'isShow': true
+            },
+            'btnStyle': {
+              'fontWeight': false,
+              'padding': 0,
+              'aroundRadius': 25,
+              'cartEvent': 'detail',
+              'text': '购买',
+              'textColor': '#FFFFFF',
+              'startBgColor': '#FF4142',
+              'endBgColor': '#FF4142',
+              'style': 'button',
+              'control': true
+            },
+            'list': [
+              {
+                'title': '推荐',
+                'desc': '猜你喜欢',
+                'source': 'all',
+                'goods_category': '',
+                'goods_category_name': '请选择',
+                'goods_ids': [],
+                'imageUrl': ''
+              }
+            ],
+            'imgElementRounded': 0
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'GoodsCoupon': {
+          'title': '优惠券',
+          'icon': 'iconfont iconyouhuiquanpc',
+          'path': 'edit-goods-coupon',
+          'uses': 0,
+          'value': {
+            'style': 'style-1',
+            'styleName': '风格一',
+            'source': 'all',
+            'num': 6,
+            'couponIds': [],
+            'btnText': '立即领取',
+            'couponTitle': '先领券 再购物',
+            'couponSubTitle': '领券下单 享购物优惠',
+            'titleColor': '#ffffff',
+            'subTitleColor': '#ffffff',
+            'couponItem': {
+              'bgColor': '#ffffff',
+              'textColor': '#333333',
+              'subTextColor': '#666666',
+              'moneyColor': '#333333',
+              'aroundRadius': 12
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'ShopExchangeInfo': {
+          'title': '积分兑换',
+          'icon': 'iconfont iconjifenpc',
+          'path': 'edit-shop-exchange-info',
+          'uses': 0,
+          'value': {
+            'bgUrl': 'addon/shop/diy/point/point_index_bg.jpg'
+          }
+        },
+        'ShopExchangeGoods': {
+          'title': '积分商品',
+          'icon': 'iconfont iconjifenshangpinpc',
+          'path': 'edit-shop-exchange-goods',
+          'uses': 0,
+          'value': {
+            'style': 'style-2',
+            'source': 'all',
+            'num': 10,
+            'goods_category': '',
+            'goods_category_name': '请选择',
+            'goods_ids': [],
+            'sortWay': 'total_order_num',
+            'goodsNameStyle': {
+              'color': '#333',
+              'control': true,
+              'fontWeight': 'normal'
+            },
+            'priceStyle': {
+              'mainColor': '#FF4142',
+              'mainControl': true,
+              'lineColor': '#999CA7',
+              'lineControl': true
+            },
+            'saleStyle': {
+              'color': '#999999',
+              'control': true
+            },
+            'imgElementRounded': 10
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'ShopGoodsRecommend': {
+          'title': '商品推荐',
+          'icon': 'iconfont icona-shangpintuijianpc30',
+          'path': 'edit-shop-goods-recommend',
+          'uses': 0,
+          'value': {
+            'priceStyle': {
+              'mainColor': '#333333'
+            },
+            'source': 'all',
+            'goods_ids': [],
+            'list': [
+              {
+                'title': {
+                  'text': '今日推荐',
+                  'textColor': '#303133'
+                },
+                'moreTitle': {
+                  'text': '精选',
+                  'textColor': '#FFFFFF',
+                  'startColor': '#FF7234',
+                  'endColor': '#FF213F'
+                },
+                'listFrame': {
+                  'startColor': '#FFE5E5',
+                  'endColor': '#FFF5F0'
+                },
+                'button': {
+                  'text': '首单',
+                  'textColor': '#FFFFFF',
+                  'color': '#FF1128'
+                }
+              },
+              {
+                'title': {
+                  'text': '品质好物',
+                  'textColor': '#303133'
+                },
+                'moreTitle': {
+                  'text': '精选',
+                  'textColor': '#FFFFFF',
+                  'startColor': '#F2C719',
+                  'endColor': '#FBBA08'
+                },
+                'listFrame': {
+                  'startColor': '#FFEFBA',
+                  'endColor': '#FFF5D7'
+                },
+                'button': {
+                  'text': '首单',
+                  'textColor': '#FFFFFF',
+                  'color': '#FF1128'
+                }
+              },
+              {
+                'title': {
+                  'text': '热销爆款',
+                  'textColor': '#303133'
+                },
+                'moreTitle': {
+                  'text': '精选',
+                  'textColor': '#FFFFFF',
+                  'startColor': '#FFA629',
+                  'endColor': '#FF8E1E'
+                },
+                'listFrame': {
+                  'startColor': '#FFE4D9',
+                  'endColor': '#FFFBF9'
+                },
+                'button': {
+                  'text': '首单',
+                  'textColor': '#FFFFFF',
+                  'color': '#FF1128'
+                }
+              }
+            ],
+            'imgElementRounded': 10
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'SingleRecommend': {
+          'title': '精选推荐',
+          'icon': 'iconfont icona-jingxuantuijianpc30-12',
+          'path': 'edit-single-recommend',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'textImg': 'addon/shop/diy/index/style3/single_recommend_text1.png',
+            'textLink': {
+              'name': ''
+            },
+            'titleColor': '#999999',
+            'subTitle': {
+              'text': '更多',
+              'textColor': '#999999',
+              'link': {
+                'name': ''
+              }
+            },
+            'source': 'all',
+            'goods_ids': [],
+            'imageHeight': 250,
+            'list': [
+              {
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': 'addon/shop/diy/index/style3/single_recommend_banner1.jpg',
+                'imgWidth': 345,
+                'imgHeight': 495
+              },
+              {
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': 'addon/shop/diy/index/style3/single_recommend_banner2.jpg',
+                'imgWidth': 345,
+                'imgHeight': 495
+              }
+            ],
+            'goodsNameStyle': {
+              'color': '#303133',
+              'control': true,
+              'fontWeight': 'normal'
+            },
+            'priceStyle': {
+              'mainColor': '#FF4142',
+              'mainControl': true,
+              'lineColor': '#999CA7',
+              'lineControl': true
+            },
+            'saleStyle': {
+              'color': '#FF0000',
+              'control': true
+            },
+            'topCarouselRounded': 12,
+            'bottomCarouselRounded': 12,
+            'indicatorColor': 'rgba(255, 255, 255, 0.6)',
+            'indicatorActiveColor': '#ffffff'
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'ShopNewcomer': {
+          'title': '新人专享',
+          'icon': 'iconfont icona-xinrenzhuanxiangpc30',
+          'path': 'edit-shop-newcomer',
+          'uses': 1,
+          'value': {
+            'style': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'textImg': 'addon/shop/diy/newcomer/style_title_01.png',
+            'subTitle': {
+              'text': '查看更多',
+              'textColor': '#FFFFFF',
+              'startColor': '#FB792F',
+              'endColor': '#F91700',
+              'link': {
+                'name': ''
+              }
+            },
+            'countDown': {
+              'numberColor': 'rgba(255, 0, 0, 1)',
+              'numberBg': {
+                'startColor': 'rgba(255, 255, 255, 1)',
+                'endColor': ''
+              },
+              'otherColor': 'rgba(255, 255, 255, 1)'
+            },
+            'source': 'all',
+            'num': 10,
+            'goods_category': '',
+            'goods_category_name': '请选择',
+            'goods_ids': [],
+            'imgElementRounded': 10
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentStartBgColor': '#ff6D1A',
+            'componentEndBgColor': 'rgba(255, 70, 56, 1)',
+            'componentGradientAngle': 'to right',
+            'topRounded': 12,
+            'bottomRounded': 12,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'ShopGoodsRanking': {
+          'title': '排行榜',
+          'icon': 'iconfont icona-paihangbangpc30',
+          'path': 'edit-shop-goods-ranking',
+          'uses': 0,
+          'value': {
+            'list': [
+              {
+                'bgUrl': 'addon/shop/rank/rank_bg_01.jpg',
+                'text': '热销排行榜',
+                'textColor': '#FFFFFF',
+                'imgUrl': 'addon/shop/rank/rank_trophy.png',
+                'subTitle': {
+                  'text': '查看更多',
+                  'textColor': '#FFFFFF',
+                  'link': {
+                    'name': 'SHOP_GOODS_RANK',
+                    'parent': 'SHOP_LINK',
+                    'title': '商品排行榜',
+                    'url': '/addon/shop/pages/goods/rank',
+                    'action': ''
+                  }
+                },
+                'listFrame': {
+                  'startColor': '#FEA715',
+                  'endColor': '#FE1E00'
+                },
+                'source': 'default',
+                'rankIds': []
+              },
+              {
+                'bgUrl': 'addon/shop/rank/rank_bg_02.jpg',
+                'text': '人气排行榜',
+                'textColor': '#FFFFFF',
+                'imgUrl': 'addon/shop/rank/rank_top.png',
+                'subTitle': {
+                  'text': '查看更多',
+                  'textColor': '#FFFFFF',
+                  'link': {
+                    'name': 'SHOP_GOODS_RANK',
+                    'parent': 'SHOP_LINK',
+                    'title': '商品排行榜',
+                    'url': '/addon/shop/pages/goods/rank',
+                    'action': ''
+                  }
+                },
+                'listFrame': {
+                  'startColor': '#FEA715',
+                  'endColor': '#FE1E00'
+                },
+                'source': 'default',
+                'rankIds': []
+              }
+            ]
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        }
+      }
+    }
+  },
+  // wap/app/pages/index/index?mode=decorate
+  'domain_url': {
+    'wap_url': 'http://localhost:5173/wap'
+  },
+  'global': []
+};
+
+export const data2 = {
+  'shop_goods_detail_style1': {
+    'title': '商品详情',
+    'cover': '',
+    'preview': '',
+    'desc': '',
+    'mode': 'diy',
+    'data': {
+      'global': {
+        'title': '商品详情',
+        'completeLayout': 'style-1',
+        'completeAlign': 'left',
+        'borderControl': true,
+        'pageStartBgColor': 'rgba(246, 246, 246, 1)',
+        'pageEndBgColor': '',
+        'pageGradientAngle': 'to bottom',
+        'bgUrl': '',
+        'bgHeightScale': 100,
+        'imgWidth': '',
+        'imgHeight': '',
+        'topStatusBar': {
+          'control': false,
+          'isShow': false,
+          'bgColor': '#ffffff',
+          'rollBgColor': '#ffffff',
+          'style': 'style-1',
+          'styleName': '风格1',
+          'textColor': '#333333',
+          'rollTextColor': '#333333',
+          'textAlign': 'center',
+          'inputPlaceholder': '请输入搜索关键词',
+          'imgUrl': '',
+          'link': ''
+        },
+        'bottomTabBar': {
+          'control': false,
+          'isShow': false
+        },
+        'popWindow': {
+          'imgUrl': '',
+          'imgWidth': '',
+          'imgHeight': '',
+          'count': 'once',
+          'show': false,
+          'link': ''
+        },
+        'template': {
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 0,
+          'bottomRounded': 0,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 0,
+            'bottom': 0,
+            'both': 0
+          },
+          'isHidden': false
+        }
+      },
+      'value': [
+        {
+          'path': 'edit-shop-goods-detail-basic-info',
+          'uses': 1,
+          'position': 'top_fixed',
+          'id': 'j3hqu5tg1zk',
+          'componentName': 'ShopGoodsDetailBasicInfo',
+          'componentTitle': '基础信息',
+          'ignore': ['pageBgColor', 'componentBgUrl', 'marginTop', 'marginBottom', 'marginBoth', 'topRounded', 'bottomRounded'],
+          'menuContent': 'index,search,cart,member',
+          'medium': {
+            'type': 'square_img',
+            'indicator': true
+          },
+          'priceRegion': {
+            'showWay': 'normal',
+            'bgImg': 'addon/shop/diy/goods_detail/style_01.jpg',
+            'marketingBgImg': 'addon/shop/diy/goods_detail/marketing_style_01.jpg',
+            'goodsStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'marketingStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            }
+          },
+          'goodsInfo': {
+            'titleColor': '#333333',
+            'subTitleColor': '#999999',
+            'saleInfoColor': '#999999',
+            'priceTopRounded': 17,
+            'priceBottomRounded': 0,
+            'topRounded': 12,
+            'bottomRounded': 0,
+            'priceBgColor': '',
+            'startBgColor': '#ffffff',
+            'endBgColor': '#f6f6f6',
+            'priceAboutMargin': 0,
+            'priceTopMargin': -22,
+            'topMargin': -13,
+            'aboutMargin': 0
+          },
+          'saleInfo': ['underlined_price', 'sales', 'stock'],
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 0,
+          'bottomRounded': 0,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 0,
+            'bottom': 0,
+            'both': 0
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-purchase-service',
+          'uses': 1,
+          'id': 'c4wh1kcz3i0',
+          'componentName': 'ShopGoodsDetailPurchaseService',
+          'componentTitle': '商品服务',
+          'ignore': [],
+          'serviceConfig': ['goods_service', 'spec_select', 'delivery_info', 'coupons', 'activity'],
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 0,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-sow',
+          'uses': 0,
+          'id': '1zi5tkyxurpc',
+          'componentName': 'ShopGoodsDetailSow',
+          'componentTitle': '种草秀',
+          'ignore': [],
+          'isShow': true,
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 0,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-evaluate',
+          'uses': 1,
+          'id': '1jgv7ysvlh0g',
+          'componentName': 'ShopGoodsDetailEvaluate',
+          'componentTitle': '商品评价',
+          'ignore': [],
+          'isShow': true,
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 0,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-attr',
+          'uses': 1,
+          'id': '19m7738ofq68',
+          'componentName': 'ShopGoodsDetailAttr',
+          'componentTitle': '商品属性',
+          'ignore': [],
+          'isShow': true,
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 0,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-desc',
+          'uses': 1,
+          'id': '37i90so3cly0',
+          'componentName': 'ShopGoodsDetailDesc',
+          'componentTitle': '商品详情',
+          'ignore': [],
+          'isShow': true,
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 20,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-bottom',
+          'position': 'bottom_fixed',
+          'uses': 1,
+          'id': 'p313pc2eduo',
+          'componentName': 'ShopGoodsDetailBottom',
+          'componentTitle': '底部菜单',
+          'ignore': ['pageBgColor', 'componentBgUrl', 'marginTop', 'marginBottom', 'marginBoth', 'topRounded', 'bottomRounded'],
+          'menuContent': ['index', 'service', 'cart'],
+          'cartName': '加入购物车',
+          'buyName': '立即购买',
+          'cartIsShow': true,
+          'cartStyle': {
+            'textColor': '#FFFFFF',
+            'fontSize': 12,
+            'gradientAngle': 'to right',
+            'startColor': '#FFB000',
+            'endColor': '#FFA029'
+          },
+          'buyStyle': {
+            'textColor': '#FFFFFF',
+            'fontSize': 12,
+            'gradientAngle': 'to right',
+            'startColor': '#FB7939',
+            'endColor': '#FF4142'
+          },
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 0,
+          'bottomRounded': 0,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 0,
+            'bottom': 0,
+            'both': 0
+          },
+          'isHidden': false
+        }
+      ]
+    }
+  }
+};

文件差异内容过多而无法显示
+ 13 - 2376
src/views/diy/edit.vue


+ 122 - 46
src/views/diy/list.vue

@@ -6,12 +6,6 @@
           <el-form-item label="页面名称">
             <el-input v-model="queryParams.title" placeholder="请输入页面名称" clearable @keyup.enter="handleQuery" />
           </el-form-item>
-          <el-form-item label="所属应用">
-            <el-input v-model="queryParams.addon_name" placeholder="请输入所属应用" clearable @keyup.enter="handleQuery" />
-          </el-form-item>
-          <el-form-item label="页面类型">
-            <el-input v-model="queryParams.type" placeholder="请输入页面类型" clearable @keyup.enter="handleQuery" />
-          </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -24,12 +18,7 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">添加页面</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
-              删除
-            </el-button>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd">添加页面</el-button>
           </el-col>
         </el-row>
       </template>
@@ -71,22 +60,26 @@
     </el-card>
 
     <!--添加页面-->
-    <el-dialog v-model="dialogVisible" title="创建新页面" width="400px">
-      <el-form :model="formData" label-width="90px" ref="formRef" :rules="formRules">
-        <el-form-item label="页面名称" prop="title">
-          <el-input v-model.trim="formData.title" placeholder="请输入标题" clearable maxlength="12" show-word-limit class="w-full" />
-        </el-form-item>
-        <el-form-item label="页面类型" prop="type">
-          <el-select v-model="formData.type" placeholder="请选择页面类型" class="!w-full">
-            <el-option v-for="(item, key) in pageType" :label="item.title" :value="key" :key="key" />
-          </el-select>
-        </el-form-item>
-      </el-form>
+    <el-dialog v-model="dialogVisible" title="创建新页面" width="1122px">
+      <div class="card-container">
+        <div
+          v-for="(item, index) in dialogList"
+          @click="onDialog(item)"
+          :key="index"
+          class="card-item"
+          :class="{ active: dialogType === item.diyType }"
+        >
+          <div class="card-image">
+            <img :src="item.img" alt="图片" />
+          </div>
+          <div class="card-text">{{ item.title }}</div>
+        </div>
+      </div>
 
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="addEvent(formRef)">确认</el-button>
+          <el-button type="primary" @click="addEvent()">确认</el-button>
         </span>
       </template>
     </el-dialog>
@@ -94,12 +87,25 @@
 </template>
 
 <script setup lang="ts">
-import { diyList, template } from '@/api/diy/index';
+import { diyList, delDiy, template } from '@/api/diy/index';
 import { FormInstance } from 'element-plus';
+import diy1 from '@/assets/images/diy/diy1.jpg';
+import diy2 from '@/assets/images/diy/diy2.jpg';
+import diy3 from '@/assets/images/diy/diy3.jpg';
+import diy4 from '@/assets/images/diy/diy4.png';
+import diy5 from '@/assets/images/diy/diy5.jpg';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const dataList = ref<any[]>([]);
 const loading = ref(true);
-const multiple = ref(true);
 const total = ref(0);
+const dialogType = ref();
+const dialogList = ref<any>([
+  { title: '首页', diyType: 1, img: diy1 },
+  { title: '分类', diyType: 2, img: diy2 },
+  { title: '个人中心', diyType: 3, img: diy3 },
+  { title: '商品详情', diyType: 4, img: diy4 },
+  { title: '自定义页面', diyType: 5, img: diy5 }
+]);
 
 const pageType: any = reactive({}); // 页面类型
 const dialogVisible = ref(false);
@@ -136,9 +142,6 @@ const getList = () => {
     }
   });
 };
-
-/** 表单重置 */
-const reset = () => {};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -151,7 +154,7 @@ const resetQuery = () => {
 /** 新增按钮操作 */
 const router = useRouter();
 const handleAdd = () => {
-  dialogVisible.value = true
+  dialogVisible.value = true;
   // const url = router.resolve({
   //   path: '/diy/edit',
   //   query: {}
@@ -161,7 +164,12 @@ const handleAdd = () => {
 /** 修改按钮操作 */
 const handleUpdate = async (row?: any) => {};
 /** 删除按钮操作 */
-const handleDelete = async (row?: any) => {};
+const handleDelete = async (row?: any) => {
+  await proxy?.$modal.confirm('是否确认删除"' + row.name + '"的diy数据项?').finally(() => (loading.value = false));
+  await delDiy(row.id);
+  proxy?.$modal.msgSuccess('删除成功');
+  getList();
+};
 
 const getTemplate = () => {
   template({ mode: '', addon: '' }).then((res) => {
@@ -176,23 +184,40 @@ const getTemplate = () => {
     }
   });
 };
-const addEvent = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-
-  await formEl.validate(async (valid) => {
-    if (valid) {
-      const query = { type: formData.type, title: formData.title };
-      const url = router.resolve({
-        path: '/diy/edit',
-        query
-      });
-      window.open(url.href);
-      dialogVisible.value = false;
-      formData.title = '';
-      formData.type = '';
-    }
+
+const addEvent = () => {
+  const obj = dialogList.value.find((item: any) => item.diyType == dialogType.value);
+  const query = { type: obj.diyType, title: obj.title };
+  const url = router.resolve({
+    path: '/diy/edit',
+    query
   });
+  window.open(url.href);
+  dialogVisible.value = false;
+};
+
+// const addEvent = async (formEl: FormInstance | undefined) => {
+//   if (!formEl) return;
+
+//   await formEl.validate(async (valid) => {
+//     if (valid) {
+//       const query = { type: formData.type, title: formData.title };
+//       const url = router.resolve({
+//         path: '/diy/edit',
+//         query
+//       });
+//       window.open(url.href);
+//       dialogVisible.value = false;
+//       formData.title = '';
+//       formData.type = '';
+//     }
+//   });
+// };
+
+const onDialog = (item: any) => {
+  dialogType.value = item.diyType;
 };
+
 onMounted(() => {
   getList();
   getTemplate();
@@ -206,4 +231,55 @@ onMounted(() => {
     padding-bottom: 0px !important;
   }
 }
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 15px;
+  width: 1060px;
+  .card-item {
+    width: 200px;
+    height: 390px;
+    padding: 5px;
+    border-radius: 8px;
+    border: 1px solid #e5e7eb;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+
+    &:hover {
+      border-color: #b0b0b0;
+    }
+
+    &.active {
+      border-color: #409eff;
+      background-color: #ecf5ff;
+    }
+    .card-image {
+      width: 190px;
+      height: 340px;
+      overflow: hidden;
+      border-radius: 4px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .card-text {
+      width: 190px;
+      bottom: 0;
+      left: 0;
+      font-size: 14px;
+      color: #333;
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
+      margin-top: 20px;
+    }
+  }
+}
 </style>

部分文件因为文件数量过多而无法显示