三合一模板升级 会员领取页优化 智家守护模板bug修改

purchase_H5/src/templates/templatePage/index.vue

@@ -25,7 +25,7 @@
         <div class="productList" :style="{'background-color':info.pageBgcol}">
           <div class="product" :style="{'background-color':pageData.mainJson.orderBgcol}">
             <div class="title" :style="{'background-color':pageData.mainJson.tabMaincol}">基础版</div>
-            <div class="price">￥{{pageData.mainProduct.originalPrice}}<span>/月</span></div>
+            <div class="price">￥{{originalPrice}}<span>/月</span></div>
             <div>
               <div class="span">移网侧</div>
               <div class="explain">
@@ -134,10 +134,12 @@ export default {
       checkedVice: false,
       showTimeout: false,
       isBuy: "未订购",
-      htmlText: ""
+      htmlText: "",
+      originalPrice: 0
     }
   },
   created () {
+    this.originalPrice = this.pageData.mainProduct.originalPrice
     this.info = this.pageData.mainJson
     this.htmlText = this.pageData.mainProduct.givePhoneInfo
     this.mainProduct = this.pageData.mainProduct
@@ -328,7 +330,7 @@ export default {
     background: #ffffff;
     border-radius: 40px 40px 0px 0px;
     margin-top: -135px;
-    z-index: 1;
+    z-index: 3;
     padding: 56px 40px;
     box-sizing: border-box;
     .productList {
@@ -392,10 +394,10 @@ export default {
               background-size: cover;
             }
             .success {
-              background-image: url("../../assets/img/icon_you.png");
+              background-image: url('../../assets/img/icon_you.png');
             }
             .error {
-              background-image: url("../../assets/img/icon_wu.png");
+              background-image: url('../../assets/img/icon_wu.png');
             }
           }
         }

purchase_H5/src/templates/templateThree/index.scss

@@ -115,7 +115,7 @@
 
   .orderBox {
     width: 714px;
-    min-height: 200px;
+    min-height: 511px;
     margin: 0 auto;
     background: #ffffff;
     border-radius: 20px;
@@ -169,8 +169,63 @@
           line-height: 48px;
         }
       }
+
+      .orderContent2 {
+        width: 202px;
+        height: 242px;
+        border-radius: 14px;
+        padding: 2px;
+        box-sizing: border-box;
+
+        .content_box {
+          width: 100%;
+          height: 100%;
+          border-radius: 14px;
+          position: relative;
+          background-color: #fff;
+          box-sizing: border-box;
+          padding-top: 40px;
+
+          .div1 {
+            text-align: center;
+            // margin-top: 40px;
+            font-size: 30px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+          }
+
+          .div2 {
+            text-align: center;
+            font-size: 54px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            margin-top: 7px;
+          }
+        }
+
+
+
+
+        .buyBtn {
+          width: 132px;
+          height: 40px;
+          background: #FFFFFF;
+          border-radius: 23px;
+          margin: 0 auto;
+          z-index: 1;
+          font-size: 24px;
+          text-align: center;
+          font-weight: 600;
+          line-height: 40px;
+          margin-top: 27px;
+        }
+      }
     }
 
+
+
+
+
     .privacyBox {
       display: flex;
       flex-direction: row;
@@ -220,9 +275,34 @@
     }
   }
 
+  .buyBox {
+    position: relative;
+    z-index: 1;
+    margin-top: -44px;
+
+    .btn {
+      width: 640px;
+      height: 88px;
+      // margin: 30px auto;
+      border-radius: 44px;
+      line-height: 88px;
+      text-align: center;
+      color: #fff;
+      font-size: 36px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      margin: 0 auto;
+      // animation-name: scale;
+      // animation-duration: 0.6s;
+      // animation-timing-function: linear;
+      // animation-iteration-count: infinite;
+      // animation-direction: alternate-reverse;
+    }
+  }
+
   .descbox {
     background-color: #ffffff;
-    margin: 30px auto;
+    margin: 40px auto;
     width: 714px;
     min-height: 100px;
     border-radius: 20px;
@@ -404,4 +484,4 @@
       left: 37px;
     }
   }
-}
+}

purchase_H5/src/templates/templateThree/index.vue

@@ -28,7 +28,7 @@
       <div class="orderTitle" v-if="pageData.mainJson.explainTitle!==''">
         <img :src="imgUrl+pageData.mainJson.explainTitle" alt="">
       </div>
-      <div class="orderRow">
+      <div class="orderRow" v-if="pageData.remarks.img1!=''">
         <div class="orderContent" v-for="(item,index) in productDatas" :key="index">
           <img :src="imgUrl+item.img" alt="">
           <div class="buyBtn" @click="buyBtn(item)" :style="{'background-image': `linear-gradient(90deg,${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`,'color':pageData.mainJson.btnTextCol}">
@@ -36,6 +36,31 @@
           </div>
         </div>
       </div>
+      <div class="orderRow" v-else>
+        <div class="orderContent2" v-for="(item,index) in productDatas" :key="index" :style="{'background-image': `linear-gradient(313deg,${pageData.remarks.threeBgCol1},${pageData.remarks.threeBgCol2})`}">
+          <div class="content_box" v-if="productNum>-1" @click="tabProduct(item,index)" :style="productNum===index?
+          {'background-image': `linear-gradient(313deg,${pageData.remarks.threeBgCol1},${pageData.remarks.threeBgCol2})`,'color':'#fff'}
+          :{'background-image': `linear-gradient(313deg,${pageData.remarks.threeBgCol3},${pageData.remarks.threeBgCol4})`,'color':`${pageData.remarks.threeTxtCol2}`}">
+            <div v-if="index==0">
+              <div class="div1">5G速率</div>
+              <div class="div2">5GB</div>
+            </div>
+            <div v-if="index==1">
+              <div class="div1">5G速率</div>
+              <div class="div2">10GB</div>
+            </div>
+            <div v-if="index==2">
+              <div class="div1">5G速率</div>
+              <div class="div2">20GB</div>
+            </div>
+            <div class="buyBtn" :style="productNum==index?{'color':`${pageData.remarks.threeTxtCol2}`,'opacity': '0.6'}:{'border':`1px solid ${pageData.remarks.threeTxtCol2}`,'color':`${pageData.remarks.threeTxtCol2}`}">
+              ￥{{item.originalPrice}}/月
+            </div>
+          </div>
+
+        </div>
+      </div>
+
       <div class="privacyBox" v-if="pageData.remarks.isBuy === '1'">
         <van-checkbox v-model="checked" checked-color="#6696FF">
           <div>
@@ -52,6 +77,11 @@
         {{pageData.remarks.privacyText}}
       </div>
     </div>
+    <div class="buyBox" v-if="pageData.remarks.isBuy === '1' && pageData.remarks.img1 ==''">
+      <div class="btn" @click="orderBtn" :style="{'background-image': `linear-gradient(to right,${ pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`}">
+        {{ pageData.remarks.btnText ? pageData.sremarks.btnText : "立即订购" }}
+      </div>
+    </div>
     <!-- 说明 -->
     <div class="descbox" :style="{'background':pageData.mainJson.orderBgcol}">
       <div class="explainTitle">
@@ -153,7 +183,8 @@ export default {
       unBuyDrainageText: "",
       phone: "",
       isBuy: "未订购",
-      text: ""
+      text: "",
+      productNum: 0
     }
   },
   async created () {
@@ -416,7 +447,6 @@ export default {
 
       this.unBuyDrainage = false;
     },
-
     buyBtn (item) {
       // this.$store.commit("setPageData", pageData);
       if (this.checked == false) {
@@ -430,6 +460,27 @@ export default {
         this.openIframe()
       }
     },
+    tabProduct (item, index) {
+      if (this.productNum != index) {
+        this.productNum = -1
+        setTimeout(() => {
+          this.productNum = index
+        }, 0)
+      }
+      this.pageData.mainProduct.cpid = item.cpid
+      this.pageData.mainProduct.spid = item.spid
+      this.pageData.mainProduct.id = item.id
+      this.param.cpid = item.cpid
+      this.param.spid = item.spid
+
+    },
+    orderBtn () {
+      if (this.checked == false) {
+        this.$toast('请勾选隐私声明')
+      } else {
+        this.openIframe()
+      }
+    },
     // 调用svg动画
     callSvg () {
       let lottieBox = document.getElementById("lottie_box");
@@ -451,5 +502,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

purchase_H5/src/views/members/member001.vue

@@ -16,18 +16,11 @@
             <div class="title">
               {{ (item.memberName != "" && item.memberName != null)  ? item.memberName : item.productName }}
             </div>
-            <div v-if="
-                item.resultcode === '9083' &&
-                (itemInfo.isCompositeProduct === 0 ||
-                  itemInfo.isCompositeProduct === null)
-              " @click="giveMember(item)">
-              领取
-            </div>
-            <div v-else-if="
-                item.resultcode === '0' && itemInfo.isCompositeProduct > 0
-              " @click="giveMember(item)">
+            <div v-if="item.resultcode === '9083' &&(itemInfo.isCompositeProduct === 0 ||itemInfo.isCompositeProduct === null)" @click="giveMember(item)">
               领取
             </div>
+            <div v-else-if="item.resultcode === '0' && itemInfo.isCompositeProduct > 0" @click="giveMember(item)">领取</div>
+            <div v-else-if="item.resultcode==='9091'" class="isMem">领取中</div>
             <div v-else class="isMem">已领取</div>
           </div>
         </div>
@@ -45,17 +38,17 @@
             <div v-else class="isMem">已领取</div>
           </div>
         </div>
-<!--      </div>-->
-<!--            <div class="order"  v-for="item in fuhelist">-->
-<!--                <div class="inner">-->
-<!--            <div class="title-box">-->
-<!--                <div class="title">-->
-<!--                    {{ item.productName }}-->
-<!--                </div>-->
-<!--                <div v-if="memberState !== 0" @click="receiveMember()">{{item.errorinfo}}</div>-->
-<!--                <div v-else class="isMem">已领取</div>-->
-<!--            </div>-->
-<!--        </div>-->
+        <!--      </div>-->
+        <!--            <div class="order"  v-for="item in fuhelist">-->
+        <!--                <div class="inner">-->
+        <!--            <div class="title-box">-->
+        <!--                <div class="title">-->
+        <!--                    {{ item.productName }}-->
+        <!--                </div>-->
+        <!--                <div v-if="memberState !== 0" @click="receiveMember()">{{item.errorinfo}}</div>-->
+        <!--                <div v-else class="isMem">已领取</div>-->
+        <!--            </div>-->
+        <!--        </div>-->
       </div>
     </div>
     <div class="hint">显示您的会员领取记录</div>
@@ -78,7 +71,7 @@ export default {
       filter: filter,
       memberState: 1,
       itemInfo: {},
-        fuhelist:null
+      fuhelist: null
     };
   },
   filters: {
@@ -124,9 +117,9 @@ export default {
     this.itemInfo.activeType = this.$route.query.activeType;
     this.itemInfo.productName = this.$route.query.productName;
     if (this.itemInfo.spid == 1219) {
-        this.itemInfo.memberName = "keep周会员*2";
-    }else{
-        this.itemInfo.memberName = null
+      this.itemInfo.memberName = "keep周会员*2";
+    } else {
+      this.itemInfo.memberName = null
     }
     if (
       this.itemInfo.isCompositeProduct === 0 ||
@@ -159,7 +152,8 @@ export default {
             for (var i = 0; i < res.data.length; i++) {
               if (
                 res.data[i].resultcode == "9083" ||
-                res.data[i].resultcode == "0"
+                res.data[i].resultcode == "0" ||
+                res.data[i].resultcode == "9091"
               ) {
                 list.push(res.data[i]);
               }
@@ -189,7 +183,7 @@ export default {
       })
         .then((res) => {
           if (res.code === 10000) {
-              // this.fuhelist = res.data
+            // this.fuhelist = res.data
             for (var i = 0; i < res.data.length; i++) {
               if (res.data[i].resultcode !== "9087") {
                 this.memberState = 1;

purchase_ao/src/views/strategy/add.vue

@@ -513,7 +513,7 @@
                     <template slot="label">
                       <span>产品说明标题</span>
                     </template>
-                    <img-Content :imgValue="imgUrl+viceJson.orderImg" @imgVal="viceJson.orderImg =$event"  @removeClick="viceJson.orderImg = $event"/>
+                    <img-Content :imgValue="imgUrl+viceJson.orderImg" @imgVal="viceJson.orderImg =$event" @removeClick="viceJson.orderImg = $event" />
                     <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副orderImg')})">
                       <img v-if="viceJson.orderImg" :src="imgUrl+viceJson.orderImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -560,6 +560,20 @@
                     </el-upload>
                     <span v-if="extJson.img3!==''" @click="extJson.img3=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
+                  <el-form-item label="背景色(渐变)-选中">
+                    <el-color-picker v-model="extJson.threeBgCol1" size="small" show-alpha />
+                    <el-color-picker style="margin-left:20px" v-model="extJson.threeBgCol2" size="small" show-alpha />
+                  </el-form-item>
+                  <el-form-item label="背景色(渐变)-未选中">
+                    <el-color-picker v-model="extJson.threeBgCol3" size="small" show-alpha />
+                    <el-color-picker style="margin-left:20px" v-model="extJson.threeBgCol4" size="small" show-alpha />
+                  </el-form-item>
+                  <!-- <el-form-item label="文字色-选中">
+                    <el-color-picker v-model="extJson.threeTxtCol1" size="small" show-alpha />
+                  </el-form-item> -->
+                  <el-form-item label="文字色-未选中">
+                    <el-color-picker v-model="extJson.threeTxtCol2" size="small" show-alpha />
+                  </el-form-item>
                 </el-collapse-item>
                 <el-collapse-item title="菜单按钮" name="4">
                   <el-checkbox-group v-model="tabList">
@@ -934,6 +948,12 @@ export default {
         img1: "",
         img2: "",
         img3: "",
+        threeBgCol1: "",
+        threeBgCol2: "",
+        threeBgCol3: "",
+        threeBgCol4: "",
+        // threeTxtCol1: "",
+        threeTxtCol2: "",
       },   //策略json
       productJson: {
         logoPic: "",   //logo图   (对应原字段)
@@ -959,7 +979,7 @@ export default {
         explainImg: "", //产品说明图
         productV: "2",//产品ui样式,
         explainTitle: "", //订购窗标题图,
-        btnTextCol:""
+        btnTextCol: ""
       },  //产品json
       otherJson: {}, // 备用json
       // 副产品json
@@ -983,7 +1003,7 @@ export default {
         explainImg: "", //产品说明图
         productV: "2",
         drawVal: "0", //副产品动画
-        btnTextCol:""
+        btnTextCol: ""
       },
       // 客户端适配
       disposeList: [