页面修改

src/components/sallCenter/plugin/shopinfo.vue

@@ -21,9 +21,10 @@
     </div>
     <div class="diy-component-preview">
       <div class="user-info-container" flex="cross:center" style=" background-color: rgba(255,255,255,1);background-size: cover;background-position: center;padding: 50px;
-       height:156px;box-shadow:0px 6px 12px 0px rgba(76,76,76,0.14);border-radius:20px;" :style="'background-image: url('+getIconLink(data.backgroundPicUrl)+');'">
+       height:156px;box-shadow:0px 6px 12px 0px rgba(76,76,76,0.14);border-radius:20px;"
+        :style="'background-image: url('+getIconLink(data.backgroundPicUrl)+');'">
         <div style="width: 100%;display:none" :style="cOutBoxStyle">
-          <div style="width: 100%;" >
+          <div style="width: 100%;">
             <div :style="cAvatarBoxStyle">
               <div class="Useravatar-icon"></div>
             </div>
@@ -43,8 +44,8 @@
           <el-input type="text" v-model="data.headInfo" size="small" style="margin-right: 25px;">
           </el-input>
         </el-form-item>
-        <el-form-item label="背景图片" >
-          <div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
+        <el-form-item label="背景图片">
+          <div class="zk_pic_box" @click="checkType=1,choicImg=true" flex="main:center cross:center"
             :style="{backgroundImage:'url(' + getIconLink(data.backgroundPicUrl) + ')'}">
             <i v-if="data.backgroundPicUrl==''" class="el-icon-picture-outline"></i>
             <el-button type="danger" v-if="data.backgroundPicUrl!=''" class="image-delete" size="mini"
@@ -52,6 +53,15 @@
           </div>
         </el-form-item>
 
+        <el-form-item label="按钮图片">
+          <div class="zk_pic_box" @click="checkType=2,choicImg=true" flex="main:center cross:center"
+            :style="{backgroundImage:'url(' + getIconLink(data.bottonImg) + ')'}">
+            <i v-if="data.bottonImg==''" class="el-icon-picture-outline"></i>
+            <el-button type="danger" v-if="data.bottonImg!=''" class="image-delete" size="mini" icon="el-icon-close"
+              @click.stop="data.bottonImg=''" circle></el-button>
+          </div>
+        </el-form-item>
+
         <el-form-item label="背景颜色" style="display:none">
           <el-color-picker v-model="data.backgroundColor"></el-color-picker>
         </el-form-item>
@@ -72,6 +82,7 @@
     },
     data() {
       return {
+        checkType: 1,
         choicImg: false,
         data: this.shopinfoData.data,
       };
@@ -90,7 +101,11 @@
       },
       //选择图片
       SelectId(msg) {
-        this.data.backgroundPicUrl = this.getIconLink(msg.url);
+        if (this.checkType == 1) {
+          this.data.backgroundPicUrl = this.getIconLink(msg.url);
+        } else {
+          this.data.bottonImg = this.getIconLink(msg.url);
+        }
         this.choicImg = false;
       },
     },

src/components/sallCenter/templateEdit.vue

@@ -1248,7 +1248,8 @@
                 headName: "赞羊小店", //用户信息
                 headInfo: "赞美生活,样样满意", //用户介绍
                 backgroundPicUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/shopinfo.jpg', //背景图片
-                backgroundColor: '#ffffff', //背景颜色         
+                backgroundColor: '#ffffff', //背景颜色      
+                bottonImg:"",//按钮图片   
               }
             };
             this.dataList.push(shopInfoObj);