feat: 进入店铺组件更新为单元格组件（功能更强大）

src/assets/iconfont/iconfont.json

@@ -427,7 +427,7 @@
     },
     {
       "icon_id": "13455314",
-      "name": "进入店铺",
+      "name": "单元格",
       "font_class": "jinrudianpu",
       "unicode": "e642",
       "unicode_decimal": 58946

src/components/componentscom/entertheshop/index.vue

@@ -2,10 +2,12 @@
   <div class="entertheshop">
     <!-- 内容 -->
     <van-cell
-      icon="shop-collect-o"
+      :icon="datas.icon"
       :title="datas.shopName"
       is-link
       :value="datas.copywriting"
+      :to="datas.type==10?datas.http.externalLink:''"
+      :url="datas.type==11?datas.http.externalLink:''"
     />
 
     <!-- 删除组件 -->

src/components/rightslider/entertheshopstyle/index.vue

@@ -12,13 +12,13 @@
       size="small"
     >
       <el-form-item
-        label="店铺名称"
+        label="左侧标题"
         :hide-required-asterisk="true"
         prop="shopName"
       >
         <el-input
           v-model="datas.shopName"
-          placeholder="请输入店铺名称"
+          placeholder="请输入左侧标题"
           maxlength="10"
           show-word-limit
         />
@@ -26,18 +26,31 @@
 
       <!-- 文案 -->
       <el-form-item
-        label="文案"
+        label="右侧内容"
         :hide-required-asterisk="true"
         prop="copywriting"
       >
         <el-input
           v-model="datas.copywriting"
-          placeholder="请输入文案"
+          placeholder="请输入右侧内容"
           maxlength="8"
           show-word-limit
         />
       </el-form-item>
 
+      <el-form-item label="左侧图标">
+        <img :src="datas.icon" v-if="datas.icon" />
+        <!-- 添加导航按钮 -->
+        <el-button
+          @click="$refs.upload.showUpload()"
+          class="uploadImg"
+          type="primary"
+          plain
+        >
+          <i class="el-icon-plus" />点击{{datas.icon?'更换':'添加'}}图片
+        </el-button>
+      </el-form-item>
+
       <!-- 跳转页面 -->
       <el-form-item label="跳转页面">
         <div class="imgText">
@@ -67,10 +80,15 @@
         </div>
       </el-form-item>
     </el-form>
+
+    <!-- 上传图片 -->
+    <uploadimg ref="upload" @uploadInformation="uploadInformation" />
   </div>
 </template>
 
 <script>
+import uploadimg from '../../uploadImg' //图片上传
+
 export default {
   name: 'entertheshopstyle',
   props: {
@@ -82,11 +100,10 @@ export default {
         //校验表单输入
         shopName: [
           //页面名称
-          { required: true, message: '请输入店铺名称', trigger: 'blur' },
+          { required: true, message: '请输入左侧标题', trigger: 'blur' },
         ],
         copywriting: [
           //页面描述
-          { required: true, message: '请输入文案', trigger: 'blur' },
         ],
       },
       optionsType: [
@@ -101,7 +118,17 @@ export default {
       ], // 选择跳转类型
       emptyText: '',
     }
-  }
+  },
+  methods: {
+    // 提交
+    uploadInformation(res) {
+      this.datas.icon = res
+      console.log(res)
+    },
+  },
+  components: {
+    uploadimg,
+  },
 }
 </script>
 
@@ -132,5 +159,17 @@ export default {
       width: 40%;
     }
   }
+  /* 上传图片按钮 */
+  .uploadImg {
+    width: 345px;
+    height: 40px;
+    margin-top:20px ;
+  }
+  img{
+    display: block;
+    margin: 0 auto;
+    width: 56px;
+    height: 56px;
+  }
 }
 </style>

src/components/sliderassembly/index.vue

@@ -108,7 +108,7 @@ export default {
               name: 'storeinformation',
             },
             {
-              text: '进入店铺',
+              text: '单元格',
               type: '1-13',
               icon: 'icon-jinrudianpu',
               name: 'entertheshop',

src/utils/componentProperties.js

@@ -217,14 +217,15 @@ componentProperties.set('storeinformation', {
 })
 componentProperties.set('entertheshop', {
   component: 'entertheshop',
-  text: '进入店铺',
+  text: '单元格',
   type: '1-13',
   active: true,
   style: 'entertheshopstyle',
   setStyle: {
-    text: '进入店铺',
+    text: '单元格',
-    shopName: '店铺名称',
+    icon: '', // 左侧图标
-    copywriting: '进入店铺',
+    shopName: '左侧标题',
+    copywriting: '右侧内容',
     type: '10',
     http: {},
   },