三产品 新炫彩 (含春节活动) 智家守护模板 新适配统一认证升级

purchase_H5/src/templates/activity-template/index.scss

@@ -182,6 +182,41 @@
       }
     }
 
+    .textBox {
+      width: 550px;
+      // width: 750px;
+      // padding: 0 50px;
+      margin: 0 auto;
+
+      .input {
+        width: 100%;
+        height: 70px;
+        background: #ffffff;
+        border-radius: 50px;
+        margin: 25px 0;
+        // padding: 0 15px;
+        box-sizing: border-box;
+        border: 3px solid rgba(238, 238, 238, 0.877);
+        padding-left: 20px;
+        box-sizing: border-box;
+
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
+          height: 100%;
+          line-height: 80px;
+          font-size: 28px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #000;
+          border-radius: 50px;
+        }
+      }
+    }
+
     .buyBtn {
       width: 626px;
       height: 90px;

purchase_H5/src/templates/activity-template/index.vue

@@ -31,6 +31,11 @@
       <div class="orderRow">
         <img :src="imgUrl+pageData.mainJson.explainImg" alt="">
       </div>
+      <div class="textBox">
+        <div class="input">
+          <input type="text" maxlength="11" placeholder="请输入联通号码" v-model="phone" />
+        </div>
+      </div>
       <div class="buyBtn" v-if="pageData.remarks.isBuy === '1'" :style="{'background-image': `linear-gradient(90deg,${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`,'color':pageData.mainJson.btnTextCol}" @click="buyBtn">
         <div class="markBox">
           <div class="markText">最高返25元</div>
@@ -162,6 +167,10 @@ export default {
     if (this.pageData.remarks.privacy === '1') {
       this.checked = true
     }
+    let phone = localStorage.getItem("phone");
+    if (phone) {
+      this.phone = phone;
+    }
   },
   mounted () {
     addR.showSP();
@@ -173,11 +182,16 @@ export default {
       localStorage.setItem("startTime", new Date().getTime());
     },
     buyBtn () {
-      if (this.checked == false) {
-        this.$toast('请勾选隐私声明')
+      if (this.phone == "") {
+        this.$toast('请输入手机号')
       } else {
-        this.openIframe()
+        if (this.checked == false) {
+          this.$toast('请勾选隐私声明')
+        } else {
+          this.openIframe()
+        }
       }
+
     },
     // 点击确定
     unBuySure () {

purchase_H5/src/templates/activity-three/index.scss

@@ -245,9 +245,6 @@
     }
 
 
-
-
-
     .privacyBox {
       display: flex;
       flex-direction: row;
@@ -295,33 +292,72 @@
       margin-left: -10%;
       line-height: 40px;
     }
-  }
 
-  .buyBox {
-    position: relative;
-    z-index: 1;
-    margin-top: -44px;
 
-    .btn {
+    .textBox {
       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;
+      // width: 750px;
+      // padding: 0 50px;
       margin: 0 auto;
-      // animation-name: scale;
-      // animation-duration: 0.6s;
-      // animation-timing-function: linear;
-      // animation-iteration-count: infinite;
-      // animation-direction: alternate-reverse;
+
+      .input {
+        width: 100%;
+        height: 70px;
+        background: #ffffff;
+        border-radius: 50px;
+        margin-top: 35px;
+        // padding: 0 15px;
+        border: 3px solid rgba(238, 238, 238, 0.877);
+        padding-left: 20px;
+        box-sizing: border-box;
+
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
+          height: 100%;
+          line-height: 80px;
+          font-size: 28px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #000;
+          border-radius: 50px;
+        }
+      }
     }
+
+    .buyBox {
+      // position: relative;
+      // z-index: 1;
+      // margin-top: -44px;
+      margin-top: 20px;
+      .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: 40px auto;

purchase_H5/src/templates/activity-three/index.vue

@@ -71,6 +71,16 @@
         </div>
       </div>
 
+      <div class="textBox">
+        <div class="input">
+          <input type="text" maxlength="11" placeholder="请输入联通号码" v-model="phone" />
+        </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="privacyBox" v-if="pageData.remarks.isBuy === '1'">
         <van-checkbox v-model="checked" checked-color="#6696FF">
           <div>
@@ -83,15 +93,12 @@
         <span class="span" @click="showConceal = true">《隐私声明》</span>、
         <span class="span" @click="showRule = true">《产品说明》</span>
       </div>
+
       <div class="tips" v-if="pageData.remarks.privacyText!==''" :style="pageData.mainJson.pageTextcol!==''?{'color':pageData.mainJson.pageTextcol}:{'color':'#000'}">
         {{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">
@@ -254,6 +261,10 @@ export default {
     if (this.pageData.remarks.privacy === '1') {
       this.checked = true
     }
+    let phone = localStorage.getItem("phone");
+    if (phone) {
+      this.phone = phone;
+    }
   },
   methods: {
     tabClickThree (item) {
@@ -509,10 +520,14 @@ export default {
 
     },
     orderBtn () {
-      if (this.checked == false) {
-        this.$toast('请勾选隐私声明')
+      if (this.phone == "") {
+        this.$toast('请输入手机号')
       } else {
-        this.openIframe()
+        if (this.checked == false) {
+          this.$toast('请勾选隐私声明')
+        } else {
+          this.openIframe()
+        }
       }
     },
     // 调用svg动画

purchase_H5/src/templates/templateColorNew/index.scss

@@ -182,6 +182,41 @@
       }
     }
 
+    .textBox {
+      width: 550px;
+      // width: 750px;
+      // padding: 0 50px;
+      margin: 0 auto;
+
+      .input {
+        width: 100%;
+        height: 70px;
+        background: #ffffff;
+        border-radius: 50px;
+        margin: 25px 0;
+        // padding: 0 15px;
+        box-sizing: border-box;
+        border: 3px solid rgba(238, 238, 238, 0.877);
+        padding-left: 20px;
+        box-sizing: border-box;
+
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
+          height: 100%;
+          line-height: 80px;
+          font-size: 28px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #000;
+          border-radius: 50px;
+        }
+      }
+    }
+
     .buyBtn {
       width: 626px;
       height: 90px;

purchase_H5/src/templates/templateColorNew/index.vue

@@ -31,6 +31,11 @@
       <div class="orderRow">
         <img :src="imgUrl+pageData.mainJson.explainImg" alt="">
       </div>
+      <div class="textBox">
+        <div class="input">
+          <input type="text" maxlength="11" placeholder="请输入联通号码" v-model="phone" />
+        </div>
+      </div>
       <div class="buyBtn" v-if="pageData.remarks.isBuy === '1'" :style="{'background-image': `linear-gradient(90deg,${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`,'color':pageData.mainJson.btnTextCol}" @click="buyBtn">
         {{ pageData.remarks.btnText!=='' ? pageData.remarks.btnText : "立即订购" }}
       </div>
@@ -159,6 +164,10 @@ export default {
     if (this.pageData.remarks.privacy === '1') {
       this.checked = true
     }
+    let phone = localStorage.getItem("phone");
+    if (phone) {
+      this.phone = phone;
+    }
   },
   mounted () {
     addR.showSP();
@@ -170,11 +179,16 @@ export default {
       localStorage.setItem("startTime", new Date().getTime());
     },
     buyBtn () {
-      if (this.checked == false) {
-        this.$toast('请勾选隐私声明')
+      if (this.phone == "") {
+        this.$toast('请输入手机号')
       } else {
-        this.openIframe()
+        if (this.checked == false) {
+          this.$toast('请勾选隐私声明')
+        } else {
+          this.openIframe()
+        }
       }
+
     },
     // 点击确定
     unBuySure () {

purchase_H5/src/templates/templatePage/index.vue

@@ -97,8 +97,13 @@
         </div>
 
       </van-radio-group>
+      <div class="textBox">
+        <div class="input">
+          <input type="text" maxlength="11" placeholder="请输入联通号码" v-model="phone" />
+        </div>
+      </div>
       <!-- 统一认证组件 -->
-      <tong-ren :infoData="info" :remarks="pageData.remarks" @btnClick="openIframe"></tong-ren>
+      <tong-ren :infoData="info" :remarks="pageData.remarks" @btnClick="btnClick"></tong-ren>
       <!-- 流量使用说明 -->
       <div class="contentTitle" :style="{'color':info.pageTextcol}">订购须知</div>
       <div class="main" v-html="htmlText" :style="{'color':info.pageTextcol}"></div>
@@ -135,7 +140,8 @@ export default {
       showTimeout: false,
       isBuy: "未订购",
       htmlText: "",
-      originalPrice: 0
+      originalPrice: 0,
+      phone: ""
     }
   },
   created () {
@@ -148,9 +154,20 @@ export default {
         this.viceProduct = res.data
       })
     }
-    console.log(this.pageData)
+
+    let phone = localStorage.getItem("phone");
+    if (phone) {
+      this.phone = phone;
+    }
   },
   methods: {
+    btnClick () {
+      if (this.phone == "") {
+        this.$toast('请输入手机号')
+      } else {
+        this.openIframe()
+      }
+    },
     checkClick (e) {
       if (e == '2') {
         this.param.cpid = this.viceProduct.cpid
@@ -394,15 +411,49 @@ 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");
             }
           }
         }
       }
     }
+    .textBox {
+      width: 670px;
+      // width: 750px;
+      // padding: 0 50px;
+      margin: 0 auto;
+
+      .input {
+        width: 100%;
+        height: 87px;
+        background: #ffffff;
+        border-radius: 10px;
+        margin: 25px 0;
+        // padding: 0 15px;
+        box-sizing: border-box;
+        border: 3px solid rgba(238, 238, 238, 0.877);
+        padding-left: 20px;
+        box-sizing: border-box;
+
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
+          height: 100%;
+          line-height: 80px;
+          font-size: 28px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #000;
+          border-radius: 10px;
+        }
+      }
+    }
   }
   .privacyBox {
     display: flex;

purchase_H5/src/templates/templateThree/index.scss

@@ -273,33 +273,67 @@
       margin-left: -10%;
       line-height: 40px;
     }
-  }
-
-  .buyBox {
-    position: relative;
-    z-index: 1;
-    margin-top: -44px;
 
-    .btn {
+    .textBox {
       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;
+      // width: 750px;
+      // padding: 0 50px;
       margin: 0 auto;
-      // animation-name: scale;
-      // animation-duration: 0.6s;
-      // animation-timing-function: linear;
-      // animation-iteration-count: infinite;
-      // animation-direction: alternate-reverse;
+
+      .input {
+        width: 100%;
+        height: 70px;
+        background: #ffffff;
+        border-radius: 50px;
+        margin-top: 35px;
+        // padding: 0 15px;
+        border: 3px solid rgba(238, 238, 238, 0.877);
+        padding-left: 20px;
+        box-sizing: border-box;
+
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
+          height: 100%;
+          line-height: 80px;
+          font-size: 28px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #000;
+          border-radius: 50px;
+        }
+      }
+    }
+
+    .buyBox {
+      margin-top: 20px;
+
+      .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: 40px auto;

purchase_H5/src/templates/templateThree/index.vue

@@ -60,7 +60,16 @@
 
         </div>
       </div>
-
+      <div class="textBox">
+        <div class="input">
+          <input type="text" maxlength="11" placeholder="请输入联通号码" v-model="phone" />
+        </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="privacyBox" v-if="pageData.remarks.isBuy === '1'">
         <van-checkbox v-model="checked" checked-color="#6696FF">
           <div>
@@ -77,11 +86,7 @@
         {{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">
@@ -225,7 +230,10 @@ export default {
     if (this.pageData.remarks.privacy === '1') {
       this.checked = true
     }
-
+    let phone = localStorage.getItem("phone");
+    if (phone) {
+      this.phone = phone;
+    }
   },
   methods: {
     tabClickThree (item) {
@@ -481,10 +489,14 @@ export default {
 
     },
     orderBtn () {
-      if (this.checked == false) {
-        this.$toast('请勾选隐私声明')
+      if (this.phone == "") {
+        this.$toast('请输入手机号')
       } else {
-        this.openIframe()
+        if (this.checked == false) {
+          this.$toast('请勾选隐私声明')
+        } else {
+          this.openIframe()
+        }
       }
     },
     // 调用svg动画