修改

src/components/StoreDesign/customPoster.vue

@@ -347,12 +347,14 @@
     display: inline-block;
     border: 1px solid #E2E2E2;
     border-radius: 3px;
-    height: 245px;
+    height: 255px;
     width: 160px;
     margin: 5px;
     padding: 0 5px;
   }
-
+   .activeCustomer {
+      border: 1px solid #409eff!important;
+  }
   .custom_rightCheck .el-radio {
     height: 32px;
     line-height: 32px;
@@ -371,7 +373,7 @@
     display: inline-block;
     border: 1px solid #E2E2E2;
     border-radius: 3px;
-    height: 147px;
+    height: 155px;
     width: 112px;
     margin: 5px;
     padding: 0 5px;
@@ -505,13 +507,13 @@
       <div class="custom_Main">
         <div class="custom_mobile_box">
           <div class="poster_bg_box">
-            <template v-if="goodsPostersMsg.PosterStyle==1">
+            <template v-if="myPostStyle==1">
               <div flex="dir:left cross:center" class="poster_User">
                 <img src="../../assets/img/storeDesign/default_head.png" alt="" />
                 <div flex="dir:left cross:center main-center">用户昵称向您推荐一个好物</div>
               </div>
               <div class="poster_goodImg">
-                <PictureCheck :GoodsImgCount="goodsPostersMsg.GoodsImgCount"></PictureCheck>
+                <PictureCheck :GoodsImgCount="myImgStyle"></PictureCheck>
               </div>
               <div flex="dir:left cross:center" class="goodsone_bg">
                 <div flex="dir:top main:center">
@@ -525,9 +527,9 @@
                 <img src="../../assets/img/default_qr_code.png" alt="" />
               </div>
             </template>
-            <template v-else-if="goodsPostersMsg.PosterStyle==2">
+            <template v-else-if="myPostStyle==2">
               <div class="custom_Second">
-                <PictureCheck :GoodsImgCount="goodsPostersMsg.GoodsImgCount"></PictureCheck>
+                <PictureCheck :GoodsImgCount="myImgStyle"></PictureCheck>
               </div>
               <div class="custom_SecondBG">
                 <div class="cuSecond_goodsName">商品名称|商品名称</div>
@@ -550,7 +552,7 @@
                 </div>
               </div>
             </template>
-            <template v-else-if="goodsPostersMsg.PosterStyle==3">
+            <template v-else-if="myPostStyle==3">
               <div class="app-style-three">
                 <div flex="dir:left cross:center" class="three_User" style="margin:40px 0 38px 0;">
                   <img src="../../assets/img/storeDesign/default_head.png">
@@ -562,7 +564,7 @@
                 </div>
               </div>
               <div style="width:680px;height:680px;margin:0 auto;">
-                <PictureCheck :GoodsImgCount="goodsPostersMsg.GoodsImgCount"></PictureCheck>
+                <PictureCheck :GoodsImgCount="myImgStyle"></PictureCheck>
               </div>
               <div flex="dir:top cross:center">
                 <div class="cusThree_name">商品名称|商品名称</div>
@@ -576,7 +578,7 @@
                 <div>长按识别小程序码 即可查看</div>
               </div>
             </template>
-            <template v-else-if="goodsPostersMsg.PosterStyle==4">
+            <template v-else-if="myPostStyle==4">
               <div class="app-style-four">
                 <div flex="dir:left cross:center" class="user"><img src="../../assets/img/storeDesign/default_head.png">
                   <div flex="dir:left cross:center main-center">
@@ -590,7 +592,7 @@
                     <div style="font-size: 56px; line-height: 1;">160</div>
                   </div>
                   <div class="goods-image">
-                    <PictureCheck :GoodsImgCount="goodsPostersMsg.GoodsImgCount"></PictureCheck>
+                    <PictureCheck :GoodsImgCount="myImgStyle"></PictureCheck>
                   </div>
                   <div flex="cross:center dir:top" class="qrcode">
                     <img src="../../assets/img/default_qr_code.png" alt="">
@@ -605,51 +607,51 @@
           <div class="custom_rightCheck" style="padding:30px 0 50px;">
             <el-form label-width="100px">
               <el-form-item label="海报样式">
-                <el-radio-group v-model="goodsPostersMsg.PosterStyle" style="width:345px;">
-                  <div class="poster-style-box" @click="goodsPostersMsg.PosterStyle=1">
-                    <el-radio :label="1">样式一</el-radio>
-                    <img src="../../assets/img/storeDesign/check1.png" alt="">
+                <el-checkbox-group v-model="goodsPostersMsg.PosterStyleList" style="width:345px;">
+                  <div class="poster-style-box" :class="{'activeCustomer':getClass(0,1)}">
+                    <el-checkbox :label="1" :key="1">样式一</el-checkbox>
+                    <img src="../../assets/img/storeDesign/check1.png" @click="getPost(0,1)" alt="">
                   </div>
-                  <div class="poster-style-box" @click="goodsPostersMsg.PosterStyle=2">
-                    <el-radio :label="2">样式二</el-radio>
-                    <img src="../../assets/img/storeDesign/check2.png" alt="">
+                  <div class="poster-style-box" :class="{'activeCustomer':getClass(0,2)}">
+                    <el-checkbox :label="2" :key="2">样式二</el-checkbox>
+                    <img src="../../assets/img/storeDesign/check2.png" @click="getPost(0,2)" alt="">
                   </div>
-                  <div class="poster-style-box" @click="goodsPostersMsg.PosterStyle=3">
-                    <el-radio :label="3">样式三</el-radio>
-                    <img src="../../assets/img/storeDesign/check3.png" alt="">
+                  <div class="poster-style-box" :class="{'activeCustomer':getClass(0,3)}">
+                    <el-checkbox :label="3" :key="3">样式三</el-checkbox>
+                    <img src="../../assets/img/storeDesign/check3.png" @click="getPost(0,3)" alt="">
                   </div>
-                  <div class="poster-style-box" @click="goodsPostersMsg.PosterStyle=4">
-                    <el-radio :label="4">样式四</el-radio>
-                    <img src="../../assets/img/storeDesign/check4.png" alt="">
+                  <div class="poster-style-box" :class="{'activeCustomer':getClass(0,4)}">
+                    <el-checkbox :label="4" :key="4">样式四</el-checkbox>
+                    <img src="../../assets/img/storeDesign/check4.png" @click="getPost(0,4)" alt="">
                   </div>
-                </el-radio-group>
+                </el-checkbox-group>
               </el-form-item>
               <el-form-item label="商品图数量">
-                <el-radio-group v-model="goodsPostersMsg.GoodsImgCount" style="width:450px;">
-                  <div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=1">
-                    <el-radio :label="1">一张</el-radio>
+                <el-checkbox-group v-model="goodsPostersMsg.GoodsImgCountList" style="width:450px;">
+                  <div class="poster-pic-box" :class="{'activeCustomer':getClass(1,1)}">
+                    <el-checkbox :label="1">一张</el-checkbox>
                     <div flex="dir:left" class="custom_grid">
-                      <div style="height: 50%; width: 100%;"></div>
+                      <div style="height: 50%; width: 100%;" @click.stop="getPost(1,1)"></div>
                     </div>
                   </div>
-                  <div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=2">
-                    <el-radio :label="2">二张</el-radio>
-                    <div flex="dir:left" class="custom_grid">
+                  <div class="poster-pic-box" :class="{'activeCustomer':getClass(1,2)}">
+                    <el-checkbox :label="2">二张</el-checkbox>
+                    <div flex="dir:left" class="custom_grid" @click="getPost(1,2)">
                       <div style="height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
                       <div style="height: 50%; width: 100%;"></div>
                     </div>
                   </div>
-                  <div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=3">
-                    <el-radio :label="3">三张</el-radio>
-                    <div flex="dir:left" class="custom_grid">
+                  <div class="poster-pic-box" :class="{'activeCustomer':getClass(1,3)}">
+                    <el-checkbox :label="3">三张</el-checkbox>
+                    <div flex="dir:left" class="custom_grid" @click="getPost(1,3)">
                       <div style="height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
                       <div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
                       <div style="height: 50%; width: 50%;"></div>
                     </div>
                   </div>
-                  <div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=4">
-                    <el-radio :label="4">四张</el-radio>
-                    <div flex="dir:left" class="custom_grid">
+                  <div class="poster-pic-box" :class="{'activeCustomer':getClass(1,4)}">
+                    <el-checkbox :label="4">四张</el-checkbox>
+                    <div flex="dir:left" class="custom_grid" @click="getPost(1,4)">
                       <div
                         style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);">
                       </div>
@@ -658,9 +660,9 @@
                       <div style="height: 50%; width: 50%;"></div>
                     </div>
                   </div>
-                  <div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=5">
-                    <el-radio :label="5">五张</el-radio>
-                    <div flex="dir:left" class="custom_grid">
+                  <div class="poster-pic-box" :class="{'activeCustomer':getClass(1,5)}">
+                    <el-checkbox :label="5">五张</el-checkbox>
+                    <div flex="dir:left" class="custom_grid" @click="getPost(1,5)">
                       <div
                         style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);">
                       </div>
@@ -670,7 +672,7 @@
                       <div style="height: 33.3%; width: 50%;"></div>
                     </div>
                   </div>
-                </el-radio-group>
+                </el-checkbox-group>
               </el-form-item>
             </el-form>
           </div>
@@ -753,9 +755,15 @@
         //商品海报msg
         goodsPostersMsg: {
           Id: 0,
-          PosterStyle: 1, //海报样式
-          GoodsImgCount: 1
-        }
+          PosterStyle: '', //海报样式
+          GoodsImgCount: 1,
+          PosterStyleList:[],
+          GoodsImgCountList:[]
+        },
+        //显示哪一个海报
+        myPostStyle:0,
+        //显示图片张数
+        myImgStyle:0
       };
     },
     created() {},
@@ -769,6 +777,40 @@
       handleClick(tab) {
         this.checkIndex = tab.name;
       },
+      getClass(type,num){
+        if(type==0){
+          if(this.goodsPostersMsg.PosterStyleList.indexOf(num)!=-1){
+            return true
+          }else{
+            return false
+          }
+        }else{
+          if(this.goodsPostersMsg.GoodsImgCountList.indexOf(num)!=-1){
+            return true
+          }else{
+            return false
+          }
+        }
+      },
+      getPost(type,num){
+        if(type==0){
+          this.myPostStyle=num;
+          if(this.goodsPostersMsg.PosterStyleList.indexOf(num)!=-1){
+            let index1=this.goodsPostersMsg.PosterStyleList.indexOf(num);
+            this.goodsPostersMsg.PosterStyleList.splice(index1,1);
+          }else{
+            this.goodsPostersMsg.PosterStyleList.push(num);
+          }
+        }else{
+          this.myImgStyle=num;
+          if(this.goodsPostersMsg.GoodsImgCountList.indexOf(num)!=-1){
+            let index1=this.goodsPostersMsg.GoodsImgCountList.indexOf(num);
+            this.goodsPostersMsg.GoodsImgCountList.splice(index1,1);
+          }else{
+            this.goodsPostersMsg.GoodsImgCountList.push(num);
+          }
+        }
+      },
       //点击切换
       getChecked(item, index) {
         this.ShareTabs.forEach(x => {
@@ -889,11 +931,17 @@
             var jsonData = res.data.data;
             if (jsonData) {
               this.goodsPostersMsg.Id = jsonData.Id;
-              this.goodsPostersMsg.PosterStyle = jsonData.PosterStyle;
-              this.goodsPostersMsg.GoodsImgCount = jsonData.GoodsImgCount;
+              this.goodsPostersMsg.PosterStyleList = jsonData.PosterStyleList;
+              this.goodsPostersMsg.GoodsImgCountList = jsonData.GoodsImgCountList;
+              if(jsonData.PosterStyleList.length>0){
+                this.myPostStyle = jsonData.PosterStyleList[jsonData.PosterStyleList.length-1];
+              }
+              if(this.goodsPostersMsg.GoodsImgCountList.length>0){
+                this.myImgStyle = jsonData.GoodsImgCountList[jsonData.GoodsImgCountList.length-1];
+              }
             } else {
-              this.goodsPostersMsg.PosterStyle = 1;
-              this.goodsPostersMsg.GoodsImgCount = 1;
+              this.goodsPostersMsg.PosterStyle = '';
+              this.goodsPostersMsg.GoodsImgCount = '';
             }
           } else {
             this.Info(res.data.message);
@@ -902,6 +950,8 @@
       },
       //添加修改商品海报
       SetGoodPosterModule() {
+        this.goodsPostersMsg.PosterStyle=this.goodsPostersMsg.PosterStyleList.join(',');
+        this.goodsPostersMsg.GoodsImgCount=this.goodsPostersMsg.GoodsImgCountList.join(',');
         this.apipost("/api/Tenant/SetGoodPosterModule", this.goodsPostersMsg, res => {
           if (res.data.resultCode == 1) {
             this.GetGoodPoster();

src/components/StoreDesign/userCenter.vue

@@ -242,10 +242,6 @@
     margin-bottom: 18px;
   }
 
-  .UserCenter .mobile_menuList:last-child {
-    margin-bottom: 0;
-  }
-
   .UserCenter .mobile_menu_image {
     background-size: cover;
     background-position: center center;