手厅控制端 新增订购成功活动提示 新增活动模板

purchase_H5/src/common/common.js

@@ -96,33 +96,12 @@ export default {
       //  addr相关埋点也需要增加该参数  旭哥在改接口  今天更新
       this.$store.commit('setTid', tid)
     }
-    if (this.pageData.remarks.dispose && this.pageData.remarks.dispose !== '') {
-      this.pageData.remarks.dispose.split(',').forEach(val => {
-        if (val === 'ksInfo' || val === 'kuaishou') {
-          if (this.$store.state.global.js === 0) {
-            let head = document.getElementsByTagName("head")[0];
-            let script = document.createElement("script");
-            script.innerHTML = `
-                        (function (root) {
-                          var ksscript = document.createElement('script');
-                          ksscript.setAttribute('charset', 'utf-8');
-                          ksscript.src = 'https://tx2.a.kwimgs.com/udata/pkg/ks-ad-trace-sdk/ks-trace.3.2.0.min.js';
-                          var s = document.getElementsByTagName('script')[0];
-                          s.parentNode.insertBefore(ksscript, s);
-                        })(window);`;
-            head.appendChild(script);
-          }
+    // if (this.pageData.remarks.dispose && this.pageData.remarks.dispose !== '') {
+    //   this.pageData.remarks.dispose.split(',').forEach(val => {
 
-        } else if (val === 'bili') {
-          biliUser()
-        } else if (val === 'tencent') {
-          if (QQVideoBridge.auth) {
-            QQVideoBridge.auth()
-          }
-        }
 
-      })
-    }
+    //   })
+    // }
     this.userMatch()
   },
   mounted () {
@@ -288,7 +267,12 @@ export default {
             this.isBuy = '已订购'
             this.payState = true
             addR.buySuccess()
-            this.$toast.success('订购成功');
+            let templateCode = this.pageData.strategyInfo.templateCode
+            if (templateCode == 'activity-template' || templateCode == 'activity-three' || templateCode == 'templateThree' || templateCode == 'templateColorNew') {
+              this.handelShow = true
+            } else {
+              this.$toast.success('订购成功');
+            }
             if (this.pageData.remarks.isZhic === '1') {
               setTimeout(() => {
                 this.giveMember()
@@ -622,6 +606,7 @@ export default {
       let {
         mappid,
         userid,
+        ticket
       } = util.query2obj(location.search)
       if (mappid) {
         changeBackUserid({
@@ -654,12 +639,36 @@ export default {
           addR.loginSuccess()
           this.number(res.data)
         })
-      }else if (localStorage.getItem('phone')) {
+      } else if (localStorage.getItem('phone')) {
         this.number(localStorage.getItem('phone'))
       }
       if (this.pageData.remarks.dispose && this.pageData.remarks.dispose !== '' && this.$route.query.token) {
         this.pageData.remarks.dispose.split(',').forEach(val => {
-          if (val === 'aqy') {
+          if (val === 'ksInfo' || val === 'kuaishou') {
+            if (this.$store.state.global.js === 0) {
+              let head = document.getElementsByTagName("head")[0];
+              let script = document.createElement("script");
+              script.innerHTML = `
+                          (function (root) {
+                            var ksscript = document.createElement('script');
+                            ksscript.setAttribute('charset', 'utf-8');
+                            ksscript.src = 'https://tx2.a.kwimgs.com/udata/pkg/ks-ad-trace-sdk/ks-trace.3.2.0.min.js';
+                            var s = document.getElementsByTagName('script')[0]; 
+                            s.parentNode.insertBefore(ksscript, s);
+                          })(window);`;
+              head.appendChild(script);
+            }
+          } else if (val === 'bili') {
+            biliUser()
+          } else if (val === 'tencent') {
+            if (QQVideoBridge.auth) {
+              QQVideoBridge.auth()
+            }
+          } else if (val === "ticket") {
+            if (ticket) {
+              console.log(123)
+            }
+          } else if (val === 'aqy') {
             if (this.$route.query.token) {
               let token = this.$route.query.token
               aqyUser({

purchase_H5/src/common/loadTemps.js

@@ -57,8 +57,10 @@ let tempNames = [
   'templatePage',
   'tuiding-zhijia',
   'templateThree',
-  'templateColorNew',
-  'templateYuku'
+  'templateColorNew', 
+  'templateYuku',
+  'activity-three',
+  'activity-template',
 ]
 
 tempNames.forEach(name => {

purchase_H5/src/componentsNew/handelModal.vue

@@ -0,0 +1,132 @@
+<template>
+  <van-overlay :show="value" :duration="0.1">
+    <div class="handal-modal handalModal" @click.stop>
+      <div class="title">
+        <div class="successImg">
+          <img src="../assets/img/icon_you.png" alt="">
+        </div>
+        <div class="titleText"> 订购成功</div>
+      </div>
+      <div class="text-box">
+        您可在3G/4G/5G网络下打开产品相应客户端进行视频观看，在播放页面查看是否显示有联通免流标识，如无标识，可点击页面下方查看激活指引进行激活。
+      </div>
+      <div class="btn-box">
+        <div class="btn right" @click="$emit('change', false)">
+          确定
+        </div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+<script>
+export default {
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: Boolean
+  },
+};
+</script>
+<style lang="scss" scoped>
+.handal-modal {
+  top: 412px;
+  padding: 60px 51px;
+  font-size: 28px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #222222;
+
+  .title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    // margin: 0 auto;
+    .successImg {
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      border: 1px solid #909090;
+      border-radius: 50%;
+      display: inline-block;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .titleText {
+      font-size: 36px;
+      font-weight: 700;
+      text-align: center;
+      margin-left: 10px;
+
+    }
+  }
+
+  .text-box {
+    line-height: 48px;
+    // text-align: center;
+  }
+
+  .btn-box {
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      width: 100%;
+      margin-top: 60px;
+      height: 80px;
+      line-height: 80px;
+      border-radius: 40px;
+      font-size: 34px;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    // .left {
+    //   border: 2px #fdc51b solid;
+    //   color: #fdc51b;
+    //   background-color: #ffffff;
+    // }
+
+    .right {
+      color: #0d0d0d;
+      background: #fdc51b;
+    }
+  }
+
+  // .btn {
+  //     margin-top: 40px;
+  //     height: 80px;
+  //     line-height: 80px;
+  //     background: #fdc51b;
+  //     border-radius: 40px;
+  //     font-size: 34px;
+  //     font-weight: bold;
+  //     color: #0d0d0d;
+  //     text-align: center;
+  // }
+}
+
+.handalModal {
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 333px;
+  transform: translateX(-50%);
+  width: 520px;
+  background-color: #fff;
+  border-radius: 8px;
+  .close {
+    width: 80px;
+    height: 80px;
+    position: absolute;
+    bottom: -130px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

purchase_H5/src/templates/activity-template/components/tabModal.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <div class="tabBox">
+      <div class="tab" v-for="(item,index) in tabArr" :key="index" @click="$emit('tabClick',item)">
+        <img :src="item.icon" alt="" />
+        <div>{{item.tabName}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tabArr: []
+    }
+  },
+  props: {
+    isApplet: Boolean
+  },
+  computed: {
+    user () {
+      return this.$store.state.user
+    },
+    pageData () {
+      return this.$store.state.pageData
+    }
+  },
+  created () {
+    if (this.pageData.remarks.tabArr && this.pageData.remarks.tabArr.length > 0) {
+      this.tabArr = this.pageData.remarks.tabArr
+      let arr = []
+      this.tabArr.forEach(val => {
+        // if (val.tabName == '订购记录') {
+        //   let obj = {}
+        //   obj.tabName = val.tabName
+        //   obj.tabUrlBasics = val.tabUrlBasics
+        //   obj.tabUrlApplet = val.tabUrlApplet
+        //   obj.icon = require("../templates/assets/record.png")
+        //   arr.push(obj)
+        // }
+        if (val.tabName == '流量激活') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./img/icon_jihuo.png")
+          arr.push(obj)
+        } if (val.tabName == '一键反馈') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./img/icon_fankui.png")
+          arr.push(obj)
+        }
+        if (val.tabName == '退订产品') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./img/icon_tuiding.png")
+          arr.push(obj)
+        }
+        if (val.tabName == '剩余流量查询' && this.isApplet == false) {
+          let obj = {}
+          obj.tabName = '流量查询'
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./img/icon_chaxun.png")
+          arr.push(obj)
+        }
+        if (val.tabName == '会员领取') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./img/icon_huiyuan.png")
+          arr.push(obj)
+        }
+      })
+      this.tabArr = arr
+    } else {
+      // if (this.pageData.remarks.jiluBtn === '1') {
+      //   let obj = {}
+      //   obj.tabUrlBasics = ""
+      //   obj.tabUrlApplet = ""
+      //   obj.icon = require("../templates/assets/record.png")
+      //   obj.tabName = '订购记录'
+      //   this.tabArr.push(obj)
+      // } 
+      if (this.pageData.remarks.jihuoBtn === '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./img/icon_jihuo.png")
+        obj.tabName = '流量激活'
+        this.tabArr.push(obj)
+      }
+      if (this.pageData.remarks.memberBtn === '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./img/icon_huiyuan.png")
+        obj.tabName = '会员领取'
+        this.tabArr.push(obj)
+      }
+      if (this.pageData.remarks.chaxunBtn === '1' && this.isApplet == false) {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./img/icon_chaxun.png")
+        obj.tabName = '流量查询'
+        this.tabArr.push(obj)
+      }
+      if (this.pageData.remarks.guanzhuBtn === '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./img/icon_fankui.png")
+        obj.tabName = '一键反馈'
+        this.tabArr.push(obj)
+      } if (this.pageData.remarks.tuidingBtn === '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./img/icon_tuiding.png")
+        obj.tabName = '退订产品'
+        this.tabArr.push(obj)
+      }
+    }
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.tabBox {
+  // margin: 20px 30px;
+  width: 714px;
+  margin: 0 auto;
+  border-radius: 20px;
+  background: #ffffff;
+  margin-bottom: 40px;
+  display: flex;
+  justify-content: space-around;
+  // overflow-x: scroll;
+  // -webkit-overflow-scrolling: touch;
+
+  .tab {
+    width: 115px;
+    // margin-right: 21px;
+    // margin: 21px 5px;
+    text-align: center;
+    img {
+      width: 62px;
+      height: 62px;
+      margin-top: 29px;
+    }
+
+    div {
+      text-align: center;
+      font-size: 28px;
+      font-weight: 400;
+      // font-weight: bold;
+      color: #222222;
+      margin-top: 21px;
+      margin-bottom: 28px;
+      // line-height: 28px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,440 @@
+.templateColorNew {
+  background-color: #f6f5f5;
+  color: #0d0d0d;
+  min-height: 100vh;
+  font-family: PingFang SC;
+  position: relative;
+  padding-bottom: 20px;
+  width: 100vw;
+  overflow-x: hidden;
+
+  .iframe {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 9999;
+  }
+
+  @keyframes scale1 {
+    from {
+      transform: scale(1.1);
+    }
+
+    to {
+      transform: scale(1);
+    }
+  }
+
+  .bannerBox {
+    width: 100%;
+    height: auto;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    position: relative;
+    overflow: hidden;
+    display: inline-flex;
+
+    .rule {
+      position: absolute;
+      right: 0;
+      top: 140px;
+      width: 48px;
+      //height: 124px;
+      background: #FFFFFF;
+      // box-shadow: 0px 0px 12px 0px #ACACAC;
+      opacity: 0.7;
+      border-radius: 12px 0px 0px 12px;
+      font-size: 24px;
+      font-weight: 400;
+      color: #000;
+      z-index: 5;
+      writing-mode: vertical-lr;
+      //padding-left: 10px;
+      //padding-top: 10px;
+      padding: 10px;
+      box-sizing: border-box;
+    }
+
+
+    .banner {
+      width: 100%;
+      height: 100%;
+    }
+
+    .banner2 {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .svgBanner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+
+    .activity {
+      position: absolute;
+      right: 10px;
+      width: 180px;
+      height: 140px;
+      bottom: 0;
+      z-index: 4;
+    }
+
+    .extend {
+      width: 160px;
+      height: 152px;
+      position: fixed;
+      top: 640px;
+      z-index: 4;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    // 主banner 动画效果  从105% 缩放到100%
+    .cartoon1 {
+      animation-name: scale1;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes scale1 {
+      from {
+        transform: scale(1.1);
+      }
+
+      to {
+        transform: scale(1);
+      }
+    }
+
+    // 顶层banner 从100%  放大到105%
+    .cartoon2 {
+      animation-name: scale2;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes scale2 {
+      from {
+        transform: scale(1);
+      }
+
+      to {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .orderBox {
+    width: 714px;
+    min-height: 200px;
+    margin: 0 auto;
+    background: #ffffff;
+    border-radius: 20px;
+    margin-top: -98px;
+    position: relative;
+    z-index: 1;
+    padding: 0 37px;
+    padding-bottom: 30px;
+    box-sizing: border-box;
+
+    .orderTitle {
+      width: 400px;
+      height: 60px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: center;
+
+      img {
+        width: auto;
+        height: 100%;
+      }
+    }
+
+    .orderRow {
+      width: 621px;
+      height: 183px;
+      margin: 36px auto;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .buyBtn {
+      width: 626px;
+      height: 90px;
+      position: relative;
+      margin: 0 auto;
+      font-size: 36px;
+      text-align: center;
+      line-height: 90px;
+      font-weight: 700;
+      color: #F3E4C9;
+      border-radius: 45px;
+      animation-name: scale;
+      animation-duration: 1s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate-reverse;
+
+
+      .markBox {
+        position: absolute;
+        top: -22px;
+        right: 20px;
+        width: 144px;
+        height: 44px;
+        background: linear-gradient(180deg, #FDE5B9 0%, #F2C073 100%);
+        border-radius: 19px 19px 19px 0px;
+
+        .markText {
+          width: 100%;
+          height: 100%;
+          font-size: 20px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #EF2908;
+          line-height: 44px;
+          text-align: center;
+          transform: scale(0.8);
+        }
+      }
+    }
+
+    .privacyBox {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      margin-top: 21px;
+      font-size: 22px;
+
+      .van-checkbox {
+        text-align: right;
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      p {
+        color: #8E8E8E;
+      }
+    }
+
+    .priacyText {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      font-size: 22px;
+      // color: #6DBAFF;
+    }
+
+    .van-icon {
+      transform: scale(0.75, 0.75);
+      border-color: #e4e4e4;
+    }
+
+    .van-checkbox__label {
+      margin-left: 5px;
+    }
+
+    .tips {
+      font-size: 20px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      opacity: 0.8;
+      text-align: center;
+      margin-top: 18px;
+      transform: scale(0.85, 0.85);
+      width: 120%;
+      margin-left: -10%;
+      line-height: 40px;
+    }
+
+  }
+
+  .descbox {
+    background-color: #ffffff;
+    margin: 30px auto;
+    width: 714px;
+    min-height: 100px;
+    border-radius: 20px;
+    box-shadow: 0px 0px 2px 0px #ACACAC;
+    padding: 0 37px;
+    padding-bottom: 60px;
+    box-sizing: border-box;
+    position: relative;
+
+    .explainTitle {
+      width: 240px;
+      height: 60px;
+      margin: 0 auto;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .main {
+      word-break: break-all;
+      // margin: 30px 0 60px 0;
+      margin-top: 30px;
+
+      h2 {
+        // color: #0d0d0d;
+        margin: 0;
+        line-height: 60px;
+      }
+
+      p {
+        // color: #707070;
+        font-size: 28px;
+        line-height: 34px;
+        margin: 15px 0 0 0;
+      }
+    }
+  }
+
+  .other-modal {
+    color: #333333;
+    top: 366px;
+    padding: 60px 65px;
+
+    .input-box {
+      display: flex;
+      line-height: 75px;
+      margin-bottom: 25px;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #fdc620;
+
+      .input {
+        font-size: 32px;
+        color: #000;
+        flex: 1;
+        background-color: transparent;
+
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
+        }
+      }
+
+      .code {
+        font-size: 28px;
+        width: 150px;
+        margin: 0 10px;
+        color: #222222;
+
+        &.number {
+          color: #a7a7a7;
+        }
+      }
+    }
+
+    .text-box {
+      font-family: PingFang-SC-Medium;
+      text-align: center;
+      line-height: 55px;
+      font-size: 32px;
+    }
+
+    .btn-box {
+      display: flex;
+      justify-content: space-between;
+
+      .btn {
+        width: 190px;
+        margin-top: 20px;
+        height: 80px;
+        line-height: 80px;
+        border-radius: 40px;
+        font-size: 34px;
+        font-weight: bold;
+        text-align: center;
+      }
+
+      .left {
+        border: 2px #777777 solid;
+        color: #777777;
+        background-color: #ffffff;
+      }
+
+      .right {
+        color: #fff;
+        background: #FF7B00;
+      }
+    }
+
+    .btn {
+      margin-top: 40px;
+      height: 80px;
+      line-height: 80px;
+      background: #fdc51b;
+      border-radius: 40px;
+      font-size: 34px;
+      font-weight: bold;
+      color: #0d0d0d;
+      text-align: center;
+    }
+  }
+
+  .modal {
+    color: #000;
+    box-sizing: border-box;
+    position: absolute;
+    left: 50%;
+    top: 333px;
+    transform: translateX(-50%);
+    width: 530px;
+    background-color: #fff;
+    border-radius: 8px;
+
+    .close {
+      width: 80px;
+      height: 80px;
+      position: absolute;
+      bottom: -130px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .top {
+      width: 100%;
+      height: 96px;
+    }
+
+    .logo {
+      width: 92px;
+      height: 50px;
+      position: absolute;
+      top: 22px;
+      left: 37px;
+    }
+  }
+
+}

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

@@ -0,0 +1,382 @@
+<template>
+  <div class="templateColorNew" id="temp" :style="{'backgroundColor':pageData.mainJson.pageBgcol}">
+    <div class="bannerBox">
+      <!-- 底层banner -->
+      <img class="banner" v-if="pageData.mainJson.bannerImg" :class="pageData.mainJson.dongHua == '1'?'cartoon1': ''
+        " :src="imgUrl + pageData.mainJson.bannerImg" alt="" />
+      <!-- json动图 -->
+      <div class="svgBanner">
+        <div id="lottie_box"></div>
+      </div>
+      <!-- 上层png -->
+      <div class="banner2" :class="pageData.mainJson.dongHua == '1'? 'cartoon2': ''" v-if="pageData.mainJson.upImg !== ''">
+        <img :src="imgUrl + pageData.mainJson.upImg" alt="" />
+      </div>
+      <!-- 顶层png/gif -->
+      <div class="banner2" v-if="pageData.mainJson.topImg !== ''">
+        <img :src="imgUrl + pageData.mainJson.topImg" alt="" />
+      </div>
+      <img @click.stop class="activity" v-if="pageData.strategyInfo.activityType !== 0 && pageData.strategyInfo.activityLogo" :src="`${pageData.strategyInfo.activityLogo}`" @click="onGoLink()" />
+      <div class="extend" v-if="pageData.remarks.extendImg" @click="extendClick">
+        <img :src="pageData.remarks.extendImg" alt="" />
+      </div>
+      <div class="rule" @click="ruleClick">
+        产品说明
+      </div>
+    </div>
+    <div class="orderBox" :style="{'background':pageData.mainJson.orderBgcol}">
+      <div class="orderTitle" v-if="pageData.mainJson.explainTitle!==''">
+        <img :src="imgUrl+pageData.mainJson.explainTitle" alt="">
+      </div>
+      <div class="orderRow">
+        <img :src="imgUrl+pageData.mainJson.explainImg" alt="">
+      </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>
+        </div>
+        {{ pageData.remarks.btnText!=='' ? pageData.remarks.btnText : "立即订购" }}
+      </div>
+      <div class="privacyBox" v-if="pageData.remarks.isBuy === '1'">
+        <van-checkbox v-model="checked" checked-color="#6696FF">
+          <div>
+            <p style="margin: 0; padding: 0">手机号仅用于开通服务,我已阅读并同意
+            </p>
+          </div>
+        </van-checkbox>
+      </div>
+      <div class="priacyText" :style="pageData.mainJson.hideCol!==''?{'color':pageData.mainJson.hideCol}:{}">
+        <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="descbox" :style="{'background':pageData.mainJson.orderBgcol}">
+      <div class="explainTitle">
+        <img :src="imgUrl+pageData.mainJson.orderImg" alt="">
+      </div>
+      <div class="main" :style="pageData.mainJson.pageTextcol!==''?{'color':pageData.mainJson.pageTextcol}:{'color':'#000'}" v-html="pageData.mainProduct.givePhoneInfo"></div>
+    </div>
+    <!-- tab导航 -->
+    <tab-Modal @tabClick="tabClick" :isApplet="isApplet"></tab-Modal>
+    <!-- 隐私条款 -->
+    <conceal v-model="showConceal" :pageData="pageData"></conceal>
+    <!-- 产品说明 -->
+    <rule-modal v-model="showRule" @ruleShow="showRule = false" :pageData="pageData"></rule-modal>
+    <!-- <vent-modal v-model="showTucao"></vent-modal> -->
+    <!-- 登录弹框组件 -->
+    <login-modal v-model="showLogin" :type="type" :text="text" @getIsBuy="getIsBuy"></login-modal>
+    <!-- 退订弹框组件 -->
+    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData" @jihuo="jihuo" @memberClick="beforeLogin"></unbuy-modal>
+    <!-- 剩余流量查询 -->
+    <account-modal v-model="showQr"></account-modal>
+    <!-- 订购超时 -->
+    <timeout-modal v-model="showTimeout"></timeout-modal>
+    <!-- 遮罩 -->
+    <newZheZhao v-if="showZhezhao" isZheZhao="1" :indexNum="indexNum"></newZheZhao>
+    <!-- 退订挽留 -->
+    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false">
+      <div class="other-modal modal" @click.stop>
+        <img src="../../assets/img/close.png" class="close" @click="unBuyDrainage = false" />
+        <div class="text-box">确定要放弃本服务吗?</div>
+        <div class="text-box">
+          {{ unBuyDrainageText }}
+        </div>
+        <div class="text-box">不要错过！</div>
+        <div class="btn-box">
+          <div class="btn left" @click="unBuySure">确定</div>
+          <div class="btn right" @click="recommend(pageData.strategyInfo.unsubscribeStrategyList[0])">
+            去看看
+          </div>
+        </div>
+      </div>
+    </van-overlay>
+    <!-- 重复订购引流 -->
+    <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
+    <!-- 订购成功提示  -->
+    <handel-modal v-model="handelShow"></handel-modal>
+  </div>
+</template>
+
+<script>
+import { detMainProduct, strategytemplate } from "../../api";
+import common from '@/common/common'
+import ruleModal from "../../componentsNew/ruleModal002.vue";
+import conceal from "../../componentsNew/hideModal.vue";
+import tabModal from "./components/tabModal.vue";
+import loginModal from "../../componentsNew/login.vue";
+import accountModal from "../../componentsNew/gongZongHao.vue";
+import timeoutModal from "../../componentsNew/timeoutModal.vue";
+import newZheZhao from "../../componentsNew/newZheZhao.vue";
+import unbuyModal from "../../componentsNew/unbuyModal.vue";
+import repeatModal from "../../componentsNew/repeatModal.vue";
+import handelModal from "../../componentsNew/handelModal.vue";
+import MgtvApi from "@/util/mgTvJssdk.js";
+import lottie from "lottie-web";
+import addR from "../../common/addRecord";
+
+export default {
+  mixins: [common],
+  components: {
+    ruleModal,
+    conceal,
+    tabModal,
+    loginModal,
+    accountModal,
+    timeoutModal,
+    newZheZhao,
+    unbuyModal,
+    repeatModal,
+    handelModal
+  },
+  data () {
+    return {
+      lottie: {},
+      imgUrl: process.env.VUE_APP_IMGS_URL,
+      dataIds: [],
+      productDatas: [],
+      imgDatas: [],
+      key: 0,
+      type: "",
+      checked: false,
+      showConceal: false,
+      showRule: false,
+      showUnbuy: false,
+      showLogin: false,
+      showTimeout: false,
+      unBuyDrainage: false,
+      showQr: false,
+      repeatShow: false,
+      unBuyDrainageText: "",
+      phone: "",
+      isBuy: "未订购",
+      text: "",
+      handelShow: false
+    }
+  },
+  created () {
+    // console.log(this.pageData)
+    if (this.pageData.remarks.privacy === '1') {
+      this.checked = true
+    }
+  },
+  mounted () {
+    addR.showSP();
+    this.callSvg();
+  },
+  methods: {
+    ruleClick () {
+      this.showRule = true;
+      localStorage.setItem("startTime", new Date().getTime());
+    },
+    buyBtn () {
+      if (this.checked == false) {
+        this.$toast('请勾选隐私声明')
+      } else {
+        this.openIframe()
+      }
+    },
+    // 点击确定
+    unBuySure () {
+      addR.clickUnsubscribe();
+      this.unBuyDrainage = false;
+      this.showUnbuy = true;
+    },
+    getChildData (data) {
+      this.isBuy = data;
+    },
+    // 一键拨号反馈
+    toPhone () {
+      addR.dialNumber();
+      let phone = 4000600611;
+      window.location.href = "tel://" + phone;
+    },
+    async beforeLogin (type) {
+      this.type = type;
+      if (this.user.userid) {
+        if (type === "manual" || type === "member") {
+          this.toLink(type);
+        } else if (type === "unBUy") {
+          addR.unBuyClick();
+          if (this.pageData.strategyInfo.unsubscribeStrategyList.length > 0) {
+            let productId = await strategytemplate(
+              this.pageData.strategyInfo.unsubscribeStrategyList[0]
+            );
+            let drainageRes = await detMainProduct({
+              productId: productId.data.primaryProductId,
+            });
+            this.unBuyDrainageText = drainageRes.data.productName;
+            this.unBuyDrainage = true;
+          } else {
+            this.showUnbuy = true;
+          }
+        }
+      } else if (type === "unBUy") {
+        addR.unBuyClick();
+        if (this.pageData.strategyInfo.unsubscribeStrategyList.length > 0) {
+          let productId = await strategytemplate(
+            this.pageData.strategyInfo.unsubscribeStrategyList[0]
+          );
+          let drainageRes = await detMainProduct({
+            productId: productId.data.primaryProductId,
+          });
+          this.unBuyDrainageText = drainageRes.data.productName;
+          this.unBuyDrainage = true;
+        } else {
+          this.showUnbuy = true;
+        }
+      } else {
+        addR.loginClick();
+        this.showLogin = true;
+      }
+    },
+    chaxun () {
+      addR.clickFollow();
+      this.showQr = true;
+    },
+    // 推荐产品跳转
+    recommend (val) {
+      strategytemplate(val).then(async (res) => {
+        let info = await detMainProduct({
+          productId: res.data.primaryProductId,
+        });
+        let productJson = JSON.parse(res.data.productJson).product;
+        let mainProduct = {
+          activeType: info.data.activeType,
+          bannerPics: [
+            productJson.bannerImg,
+            productJson.jsonImg,
+            productJson.upImg,
+            productJson.topImg,
+          ],
+          bgColor: [
+            productJson.pageBgcol,
+            "",
+            productJson.orderBgcol,
+            productJson.orderBdcol,
+          ],
+          cacheSeatOne: [
+            {
+              dongHua: productJson.drawVal,
+              memberUrl: info.data.cacheSeatOne[0].memberUrl,
+              proC: {
+                e: productJson.hideCol,
+                s: productJson.pageTextcol,
+              },
+              productV: productJson.productV,
+              rushC: {
+                e: productJson.orderTextcol,
+                s: productJson.orderNumcol,
+              },
+              tabC: {
+                e: productJson.tabVicecol,
+                s: productJson.tabMaincol,
+              },
+              btnUrl: "",
+              relationIds: info.data.cacheSeatOne[0].relationIds ? info.data.cacheSeatOne[0].relationIds : ""
+            },
+          ],
+          cpid: info.data.cpid,
+          discountInfo: null,
+          flowJumpUrl: info.data.flowJumpUrl,
+          givePhoneInfo: info.data.givePhoneInfo,
+          guidancePic: {
+            c: productJson.orderImg,
+            p: productJson.explainImg,
+          },
+          id: res.data.primaryProductId,
+          isCompositeProduct: 0, //是否复合产品
+          logoPic: productJson.logoPic,
+          manualInfo: info.data.manualInfo,
+          memberName: info.data.memberName,
+          orderingInfo: info.data.orderingInfo,
+          originalPrice: info.data.originalPrice,
+          pageTitle: productJson.pageTitle,
+          productName: info.data.productName,
+          productType: info.data.productType,
+          promotionPic: info.data.promotionPic,
+          pushJumpUrl: info.data.pushJumpUrl,
+          remark: info.data.remark,
+          remark1: info.data.remark1,
+          remark2: info.data.remark2,
+          remark3: productJson.remark3,
+          spid: info.data.spid,
+          themeColor: [productJson.btnTopcol, productJson.btnBotcol],
+        };
+        let recommend = [];
+        if (
+          res.data.recommendStrategyIds.length > 0 &&
+          res.data.recommendStrategyIds
+        ) {
+          res.data.recommendStrategyIds.forEach(async (val) => {
+            let list = await strategytemplate(val);
+            recommend.push(list.data);
+          });
+        }
+        let pageData = {
+          mainProduct: mainProduct,
+          channl: {
+            channelKey: this.pageData.channl.channelKey,
+            channelName: this.pageData.channl.channelName,
+            fullCode: this.pageData.channl.fullCode,
+            edition: this.pageData.channl.edition,
+          },
+          recommend: recommend,
+          remarks: JSON.parse(res.data.extJson), //策略信息
+          otherJson: JSON.parse(res.data.otherJson), //备用json
+          strategyInfo: res.data,
+        };
+        let title =
+          mainProduct.pageTitle !== ""
+            ? mainProduct.pageTitle
+            : mainProduct.productName;
+        document.title = title;
+        MgtvApi.setWebviewTitle({
+          title: title,
+        });
+        pageData.strategyInfo.recommendStrategyList =
+          res.data.recommendStrategyIds;
+        pageData.strategyInfo.unsubscribeStrategyList =
+          res.data.unsubscribeStrategyIds;
+        pageData.strategyInfo.viceProductStrategyList =
+          res.data.viceProductIds;
+        if (JSON.parse(res.data.productJson).viceProduct) {
+          pageData.viceJson = JSON.parse(res.data.productJson).viceProduct;
+        }
+        pageData.mainJson = JSON.parse(res.data.productJson).product;
+        this.$store.commit("setPageData", pageData);
+        this.getIsBuy();
+        setTimeout(() => {
+          this.callSvg();
+        }, 200);
+        this.$store.commit("setTempName", res.data.templateCode);
+      });
+
+      this.unBuyDrainage = false;
+    },
+    // 调用svg动画
+    callSvg () {
+      let lottieBox = document.getElementById("lottie_box");
+      lottieBox.innerHTML = "";
+      if (this.pageData.mainJson.jsonImg !== '') {
+        this.lottie = lottie.loadAnimation({
+          container: lottieBox,
+          renderer: "svg",
+          loop: true,
+          autoplay: true,
+          path: this.imgUrl + this.pageData.mainJson.jsonImg,
+        });
+      }
+    },
+  }
+
+
+}
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

purchase_H5/src/templates/activity-three/components/tabModal.vue

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div class="tabBox">
+      <div class="tab" v-for="(item,index) in tabArr" :key="index" @click="$emit('tabClick',item)">
+        <img :src="item.icon" alt="" />
+        <div>{{item.tabName}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tabArr: []
+    }
+  },
+  props: {
+    isApplet: Boolean
+  },
+  computed: {
+    user () {
+      return this.$store.state.user
+    },
+    pageData () {
+      return this.$store.state.pageData
+    }
+  },
+  created () {
+    if (this.pageData.remarks.tabArr && this.pageData.remarks.tabArr.length > 0) {
+      this.tabArr = this.pageData.remarks.tabArr
+      let arr = []
+      this.tabArr.forEach(val => {
+        // if (val.tabName == '订购记录') {
+        //   let obj = {}
+        //   obj.tabName = val.tabName
+        //   obj.tabUrlBasics = val.tabUrlBasics
+        //   obj.tabUrlApplet = val.tabUrlApplet
+        //   obj.icon = require("../templates/assets/record.png")
+        //   arr.push(obj)
+        // }
+        if (val.tabName == '流量激活') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./img/icon_jihuo.png")
+          arr.push(obj)
+        } if (val.tabName == '一键反馈') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./img/icon_fankui.png")
+          arr.push(obj)
+        }
+        if (val.tabName == '退订产品') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./img/icon_tuiding.png")
+          arr.push(obj)
+        }
+        if (val.tabName == '剩余流量查询' && this.isApplet == false) {
+          let obj = {}
+          obj.tabName = "流量查询"
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./img/icon_chaxun.png")
+          arr.push(obj)
+        }
+        // if (val.tabName == '会员领取') {
+        //   let obj = {}
+        //   obj.tabName = val.tabName
+        //   obj.tabUrlBasics = val.tabUrlBasics
+        //   obj.tabUrlApplet = val.tabUrlApplet
+        //   obj.icon = require("../templates/assets/huiyuan.png")
+        //   arr.push(obj)
+        // }
+      })
+      this.tabArr = arr
+    } else {
+      // if (this.pageData.remarks.jiluBtn === '1') {
+      //   let obj = {}
+      //   obj.tabUrlBasics = ""
+      //   obj.tabUrlApplet = ""
+      //   obj.icon = require("../templates/assets/record.png")
+      //   obj.tabName = '订购记录'
+      //   this.tabArr.push(obj)
+      // } 
+      if (this.pageData.remarks.jihuoBtn === '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./img/icon_jihuo.png")
+        obj.tabName = '流量激活'
+        this.tabArr.push(obj)
+      }
+      // if (this.pageData.remarks.memberBtn === '1') {
+      //   let obj = {}
+      //   obj.tabUrlBasics = ""
+      //   obj.tabUrlApplet = ""
+      //   obj.icon = require("../templates/assets/huiyuan.png")
+      //   obj.tabName = '会员领取'
+      //   this.tabArr.push(obj)
+      // }
+      if (this.pageData.remarks.chaxunBtn === '1' && this.isApplet == false) {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./img/icon_chaxun.png")
+        obj.tabName = '流量查询'
+        this.tabArr.push(obj)
+      }
+      if (this.pageData.remarks.guanzhuBtn === '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./img/icon_fankui.png")
+        obj.tabName = '一键反馈'
+        this.tabArr.push(obj)
+      } if (this.pageData.remarks.tuidingBtn === '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./img/icon_tuiding.png")
+        obj.tabName = '退订产品'
+        this.tabArr.push(obj)
+      }
+    }
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.tabBox {
+  // margin: 20px 30px;
+  width: 714px;
+  margin: 0 auto;
+  border-radius: 20px;
+  background: #ffffff;
+  display: -webkit-box;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+  margin-bottom: 56px;
+
+  .tab {
+    width: 160px;
+    margin: 26px 5px;
+
+    img {
+      width: 62px;
+      height: 62px;
+      margin: 0 55px;
+    }
+
+    div {
+      text-align: center;
+      font-size: 28px;
+      // font-weight: bold;
+      color: #0d0d0d;
+      margin-top: 20px;
+    }
+  }
+}
+</style>

purchase_H5/src/templates/activity-three/components/tabUnbuy.vue

@@ -0,0 +1,112 @@
+<template>
+  <van-overlay :show="value" :duration="0.1">
+    <div class="tabUnbuy tabmodal" @click.stop>
+      <!-- <img src="../assets/img/close.png" class="close" @click="$emit('change', false)" /> -->
+      <div class="text-box">退订</div>
+      <div class="text-group">
+        <van-radio-group v-model="radio">
+          <van-cell-group>
+            <van-cell v-for="(item, index) in datas" :key="index" :title="item.productName" clickable @click="itemInfo = item">
+              <template #right-icon>
+                <van-radio checked-color="#fdc51b" :name="index" />
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </van-radio-group>
+      </div>
+
+      <div class="btn-box">
+        <div class="btn left" @click="$emit('change', false)">取消</div>
+        <div class="btn right" @click="itemClick">
+          退订
+        </div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      showSheet: true,
+      radio: null,
+      itemInfo: {}
+    }
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: Boolean,
+    datas: Array
+  },
+  methods: {
+    itemClick () {
+      if (this.radio == null) {
+        return this.$toast('请选择退订产品')
+      }
+      this.$emit('itemClick', this.itemInfo)
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.tabUnbuy {
+  top: 412px;
+  padding: 20px 30px;
+  font-size: 40px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  color: #222222;
+
+  .text-box {
+    line-height: 48px;
+    text-align: center;
+  }
+  .text-group {
+    margin-top: 40px;
+    font-size: 30px;
+  }
+
+  .btn-box {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    margin-bottom: 20px;
+
+    .btn {
+      width: 190px;
+      margin-top: 30px;
+      height: 80px;
+      line-height: 80px;
+      border-radius: 40px;
+      font-size: 34px;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    .left {
+      border: 2px #777777 solid;
+      color: #777777;
+      background-color: #ffffff;
+    }
+
+    .right {
+      color: #fff;
+      background: #FF7B00;
+    }
+  }
+}
+
+.tabmodal {
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 333px;
+  transform: translateX(-50%);
+  width: 580px;
+  background-color: #fff;
+  border-radius: 8px;
+}
+</style>

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

@@ -0,0 +1,509 @@
+.templateThree {
+  background-color: #f6f5f5;
+  color: #0d0d0d;
+  min-height: 100vh;
+  font-family: PingFang SC;
+  position: relative;
+  padding-bottom: 20px;
+  width: 100vw;
+  overflow-x: hidden;
+
+  .iframe {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 9999;
+  }
+
+  .bannerBox {
+    width: 100%;
+    height: auto;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    position: relative;
+    overflow: hidden;
+    display: inline-flex;
+
+    .banner {
+      width: 100%;
+      height: 100%;
+    }
+
+    .banner2 {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .svgBanner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+
+    .activity {
+      position: absolute;
+      right: 10px;
+      width: 180px;
+      height: 140px;
+      bottom: 0;
+      z-index: 4;
+    }
+
+    .extend {
+      width: 160px;
+      height: 152px;
+      position: fixed;
+      top: 640px;
+      z-index: 4;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    // 主banner 动画效果  从105% 缩放到100%
+    .cartoon1 {
+      animation-name: scale1;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes scale1 {
+      from {
+        transform: scale(1.1);
+      }
+
+      to {
+        transform: scale(1);
+      }
+    }
+
+    // 顶层banner 从100%  放大到105%
+    .cartoon2 {
+      animation-name: scale2;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes scale2 {
+      from {
+        transform: scale(1);
+      }
+
+      to {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .orderBox {
+    width: 714px;
+    min-height: 511px;
+    margin: 0 auto;
+    background: #ffffff;
+    border-radius: 20px;
+    margin-top: -98px;
+    position: relative;
+    z-index: 1;
+    padding: 0 37px;
+    padding-bottom: 30px;
+    box-sizing: border-box;
+
+    .orderTitle {
+      width: 400px;
+      height: 60px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: center;
+
+      img {
+        width: auto;
+        height: 100%;
+      }
+    }
+
+    .orderRow {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 38px;
+
+      .orderContent {
+        width: 200px;
+        height: 240px;
+        position: relative;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+
+        .buyBtn {
+          width: 180px;
+          height: 48px;
+          border-radius: 24px;
+          position: absolute;
+          bottom: 24px;
+          left: 10px;
+          z-index: 1;
+          color: #662B00;
+          font-size: 28px;
+          text-align: center;
+          font-weight: 700;
+          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;
+          }
+
+          .discount {
+            position: absolute;
+            left: 25px;
+            top: 0;
+            width: 150px;
+            height: 32px;
+            background: linear-gradient(180deg, #46D38F 0%, #18A461 100%);
+            border-radius: 0px 0px 14px 14px;
+
+            .text {
+              width: 100%;
+              height: 100%;
+              margin: 0 auto;
+              text-align: center;
+              font-size: 22px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #FFFFFF;
+              transform: scale(0.85);
+            }
+          }
+        }
+
+
+
+
+        .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;
+      justify-content: center;
+      margin-top: 20px;
+      font-size: 22px;
+
+      .van-checkbox {
+        text-align: right;
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      p {
+        color: #8E8E8E;
+      }
+    }
+
+    .priacyText {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      font-size: 22px;
+      color: #6DBAFF;
+    }
+
+    .van-icon {
+      transform: scale(0.75, 0.75);
+      border-color: #e4e4e4;
+    }
+
+    .van-checkbox__label {
+      margin-left: 5px;
+    }
+
+    .tips {
+      font-size: 20px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      opacity: 0.8;
+      text-align: center;
+      margin-top: 18px;
+      transform: scale(0.85, 0.85);
+      width: 120%;
+      margin-left: -10%;
+      line-height: 40px;
+    }
+  }
+
+  .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: 40px auto;
+    width: 714px;
+    min-height: 100px;
+    border-radius: 20px;
+    box-shadow: 0px 0px 2px 0px #ACACAC;
+    padding: 0 37px;
+    padding-bottom: 60px;
+    box-sizing: border-box;
+    position: relative;
+
+    .explainTitle {
+      width: 240px;
+      height: 60px;
+      margin: 0 auto;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .main {
+      word-break: break-all;
+      // margin: 30px 0 60px 0;
+      margin-top: 30px;
+
+      h2 {
+        // color: #0d0d0d;
+        margin: 0;
+        line-height: 60px;
+      }
+
+      p {
+        // color: #707070;
+        font-size: 28px;
+        line-height: 34px;
+        margin: 15px 0 0 0;
+      }
+    }
+  }
+
+  .other-modal {
+    color: #333333;
+    top: 366px;
+    padding: 60px 65px;
+
+    .input-box {
+      display: flex;
+      line-height: 75px;
+      margin-bottom: 25px;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #fdc620;
+
+      .input {
+        font-size: 32px;
+        color: #000;
+        flex: 1;
+        background-color: transparent;
+
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
+        }
+      }
+
+      .code {
+        font-size: 28px;
+        width: 150px;
+        margin: 0 10px;
+        color: #222222;
+
+        &.number {
+          color: #a7a7a7;
+        }
+      }
+    }
+
+    .text-box {
+      font-family: PingFang-SC-Medium;
+      text-align: center;
+      line-height: 55px;
+      font-size: 32px;
+    }
+
+    .btn-box {
+      display: flex;
+      justify-content: space-between;
+
+      .btn {
+        width: 190px;
+        margin-top: 20px;
+        height: 80px;
+        line-height: 80px;
+        border-radius: 40px;
+        font-size: 34px;
+        font-weight: bold;
+        text-align: center;
+      }
+
+      .left {
+        border: 2px #777777 solid;
+        color: #777777;
+        background-color: #ffffff;
+      }
+
+      .right {
+        color: #fff;
+        background: #FF7B00;
+      }
+    }
+
+    .btn {
+      margin-top: 40px;
+      height: 80px;
+      line-height: 80px;
+      background: #fdc51b;
+      border-radius: 40px;
+      font-size: 34px;
+      font-weight: bold;
+      color: #0d0d0d;
+      text-align: center;
+    }
+  }
+
+  .rule {
+    position: absolute;
+    right: 0;
+    top: 140px;
+    width: 48px;
+    //height: 124px;
+    background: #FFFFFF;
+    // box-shadow: 0px 0px 12px 0px #ACACAC;
+    opacity: 0.7;
+    border-radius: 12px 0px 0px 12px;
+    font-size: 24px;
+    font-weight: 400;
+    color: #000;
+    z-index: 5;
+    writing-mode: vertical-lr;
+    //padding-left: 10px;
+    //padding-top: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .modal {
+    color: #000;
+    box-sizing: border-box;
+    position: absolute;
+    left: 50%;
+    top: 333px;
+    transform: translateX(-50%);
+    width: 530px;
+    background-color: #fff;
+    border-radius: 8px;
+
+    .close {
+      width: 80px;
+      height: 80px;
+      position: absolute;
+      bottom: -130px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .top {
+      width: 100%;
+      height: 96px;
+    }
+
+    .logo {
+      width: 92px;
+      height: 50px;
+      position: absolute;
+      top: 22px;
+      left: 37px;
+    }
+  }
+}

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

@@ -0,0 +1,540 @@
+<template>
+  <div class="templateThree" id="temp" :style="{'backgroundColor':pageData.mainJson.pageBgcol}">
+    <div class="bannerBox">
+      <!-- 底层banner -->
+      <img class="banner" v-if="pageData.mainJson.bannerImg" :class="pageData.mainJson.dongHua == '1'?'cartoon1': ''
+        " :src="imgUrl + pageData.mainJson.bannerImg" alt="" />
+      <!-- json动图 -->
+      <div class="svgBanner">
+        <div id="lottie_box"></div>
+      </div>
+      <!-- 上层png -->
+      <div class="banner2" :class="pageData.mainJson.dongHua == '1'? 'cartoon2': ''" v-if="pageData.mainJson.upImg !== ''">
+        <img :src="imgUrl + pageData.mainJson.upImg" alt="" />
+      </div>
+      <!-- 顶层png/gif -->
+      <div class="banner2" v-if="pageData.mainJson.topImg !== ''">
+        <img :src="imgUrl + pageData.mainJson.topImg" alt="" />
+      </div>
+      <img @click.stop class="activity" v-if="pageData.strategyInfo.activityType !== 0 && pageData.strategyInfo.activityLogo" :src="`${pageData.strategyInfo.activityLogo}`" @click="onGoLink()" />
+      <div class="extend" v-if="pageData.remarks.extendImg" @click="extendClick">
+        <img :src="pageData.remarks.extendImg" alt="" />
+      </div>
+      <div class="rule" @click="ruleClick">
+        产品说明
+      </div>
+    </div>
+    <div class="orderBox" :style="{'background':pageData.mainJson.orderBgcol}">
+      <div class="orderTitle" v-if="pageData.mainJson.explainTitle!==''">
+        <img :src="imgUrl+pageData.mainJson.explainTitle" alt="">
+      </div>
+      <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}">
+            ￥{{item.originalPrice}}/月
+          </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-for="(v,i) in discountList" :key="i">
+              <div class="discount" v-if="item.spid == v.spid">
+                <div class="text">
+                  最高优惠{{v.price}}元
+                </div>
+              </div>
+
+            </div>
+            <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>
+            <p style="margin: 0; padding: 0">手机号仅用于开通服务,我已阅读并同意
+            </p>
+          </div>
+        </van-checkbox>
+      </div>
+      <div class="priacyText" :style="pageData.mainJson.hideCol!==''?{'color':pageData.mainJson.hideCol}:{}">
+        <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">
+        <img :src="imgUrl+pageData.mainJson.orderImg" alt="">
+      </div>
+      <div class="main" :style="pageData.mainJson.pageTextcol!==''?{'color':pageData.mainJson.pageTextcol}:{'color':'#000'}" v-html="pageData.mainProduct.givePhoneInfo"></div>
+    </div>
+    <!-- tab导航 -->
+    <tab-Modal @tabClick="tabClickThree" :isApplet="isApplet"></tab-Modal>
+    <!-- 隐私条款 -->
+    <conceal v-model="showConceal" :pageData="pageData"></conceal>
+    <!-- 产品说明 -->
+    <rule-modal v-model="showRule" @ruleShow="showRule = false" :pageData="pageData"></rule-modal>
+    <!-- <vent-modal v-model="showTucao"></vent-modal> -->
+    <!-- 登录弹框组件 -->
+    <login-modal v-model="showLogin" :type="type" :text="text" @getIsBuy="getIsBuy"></login-modal>
+    <!-- 退订弹框组件 -->
+    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData" @jihuo="jihuo" @memberClick="beforeLogin"></unbuy-modal>
+    <!-- 剩余流量查询 -->
+    <account-modal v-model="showQr"></account-modal>
+    <!-- 订购超时 -->
+    <timeout-modal v-model="showTimeout"></timeout-modal>
+    <!-- 遮罩 -->
+    <newZheZhao v-if="showZhezhao" isZheZhao="1" :indexNum="indexNum"></newZheZhao>
+    <!-- 退订挽留 -->
+    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false">
+      <div class="other-modal modal" @click.stop>
+        <img src="../../assets/img/close.png" class="close" @click="unBuyDrainage = false" />
+        <div class="text-box">确定要放弃本服务吗?</div>
+        <div class="text-box">
+          {{ unBuyDrainageText }}
+        </div>
+        <div class="text-box">不要错过！</div>
+        <div class="btn-box">
+          <div class="btn left" @click="unBuySure">取消</div>
+          <div class="btn right" @click="recommend(pageData.strategyInfo.unsubscribeStrategyList[0])">
+            去看看
+          </div>
+        </div>
+      </div>
+    </van-overlay>
+    <!-- 重复订购引流 -->
+    <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
+    <!-- 选择退订产品 -->
+    <tab-unbuy @itemClick="itemClick" :datas="productDatas" v-model="unbuyShow" />
+    <!-- 订购成功提示  -->
+    <handel-modal v-model="handelShow"></handel-modal>
+  </div>
+</template>
+
+<script>
+import { detMainProduct, strategytemplate } from "../../api";
+import common from '@/common/common'
+import ruleModal from "../../componentsNew/ruleModal002.vue";
+import conceal from "../../componentsNew/hideModal.vue";
+import tabModal from "./components/tabModal.vue";
+import tabUnbuy from "./components/tabUnbuy.vue";
+import loginModal from "../../componentsNew/login.vue";
+import accountModal from "../../componentsNew/gongZongHao.vue";
+import timeoutModal from "../../componentsNew/timeoutModal.vue";
+import newZheZhao from "../../componentsNew/newZheZhao.vue";
+import unbuyModal from "../../componentsNew/unbuyModal.vue";
+import repeatModal from "../../componentsNew/repeatModal.vue";
+import handelModal from "../../componentsNew/handelModal.vue";
+import MgtvApi from "@/util/mgTvJssdk.js";
+import lottie from "lottie-web";
+import addR from "../../common/addRecord";
+
+export default {
+  mixins: [common],
+  components: {
+    ruleModal,
+    conceal,
+    tabModal,
+    loginModal,
+    accountModal,
+    timeoutModal,
+    newZheZhao,
+    unbuyModal,
+    repeatModal,
+    tabUnbuy,
+    handelModal
+  },
+  data () {
+    return {
+      lottie: {},
+      imgUrl: process.env.VUE_APP_IMGS_URL,
+      dataIds: [],
+      productDatas: [],
+      imgDatas: [],
+      key: 0,
+      type: "",
+      checked: false,
+      showConceal: false,
+      showRule: false,
+      showUnbuy: false,
+      showLogin: false,
+      showTimeout: false,
+      unBuyDrainage: false,
+      showQr: false,
+      repeatShow: false,
+      unbuyShow: false,
+      unBuyDrainageText: "",
+      phone: "",
+      isBuy: "未订购",
+      text: "",
+      productNum: 0,
+      discountList: [
+        { spid: 1291, price: 15 },
+        { spid: 1285, price: 10 },
+        { spid: 1284, price: 15 },
+        { spid: 1288, price: 10 },
+        { spid: 1290, price: 15 },
+        { spid: 1271, price: 10 },
+        { spid: 1331, price: 10 },
+        { spid: 1350, price: 15 },
+        { spid: 1278, price: 15 },
+        { spid: 1287, price: 10 },
+        { spid: 1277, price: 15 },
+        { spid: 1281, price: 10 },
+        { spid: 1276, price: 15 },
+        { spid: 1286, price: 10 },
+        { spid: 1339, price: 15 },
+        { spid: 1342, price: 25 },
+        { spid: 1349, price: 10 },
+      ],
+      handelShow: false
+    }
+  },
+  async created () {
+    this.dataIds.push(this.pageData.mainProduct.id)
+    if (this.pageData.remarks.img1 !== '') {
+      this.imgDatas.push(this.pageData.remarks.img1)
+    }
+    if (this.pageData.strategyInfo.viceProductStrategyList.length > 0) {
+      this.dataIds.push(this.pageData.strategyInfo.viceProductStrategyList[0])
+      if (this.pageData.remarks.img2 !== '') {
+        this.imgDatas.push(this.pageData.remarks.img2)
+      }
+    }
+    if (this.pageData.remarks.viceProductId2 !== '') {
+      this.dataIds.push(this.pageData.remarks.viceProductId2)
+      if (this.pageData.remarks.img3 !== '') {
+        this.imgDatas.push(this.pageData.remarks.img3)
+      }
+    }
+    for (let i = 0; i < this.dataIds.length; i++) {
+      await detMainProduct({ productId: this.dataIds[i] }).then(res => {
+        this.key = this.key + 1
+        let obj = res.data
+        obj.img = this.imgDatas[i]
+        this.productDatas.push(obj)
+      })
+    }
+  },
+  mounted () {
+    addR.showSP();
+    this.callSvg();
+
+    if (this.pageData.remarks.privacy === '1') {
+      this.checked = true
+    }
+  },
+  methods: {
+    tabClickThree (item) {
+      if (this.isApplet == true) {
+        if (item.tabUrlApplet !== '') {
+          let url = item.tabUrlApplet + '&channelName=' + this.pageData.channl.channelKey
+          window.location.href = url
+        } else {
+          if (item.tabName == '流量激活') {
+            this.jihuo('点击激活')
+          } else if (item.tabName == '一键反馈') {
+            this.toPhone()
+          } else if (item.tabName == '退订产品') {
+            // this.beforeLogin('unBUy')
+            this.unbuyShow = true
+          } else if (item.tabName == '剩余流量查询' || item.tabName == '流量查询') {
+            this.chaxun()
+          }
+        }
+      } else {
+        if (item.tabUrlBasics !== '') {
+          let url = item.tabUrlBasics + '&channelName=' + this.pageData.channl.channelKey
+          window.location.href = url
+        } else {
+          if (item.tabName == '流量激活') {
+            this.jihuo('点击激活')
+          } else if (item.tabName == '一键反馈') {
+            this.toPhone()
+          } else if (item.tabName == '退订产品') {
+            this.unbuyShow = true
+          } else if (item.tabName == '剩余流量查询' || item.tabName == '流量查询') {
+            this.chaxun()
+          }
+        }
+      }
+    },
+    itemClick (data) {
+      this.unbuyShow = false
+      this.pageData.mainProduct.cpid = data.cpid
+      this.pageData.mainProduct.spid = data.spid
+      this.pageData.mainProduct.id = data.id
+      this.param.cpid = data.cpid
+      this.param.spid = data.spid
+      this.beforeLogin('unBUy')
+    },
+    ruleClick () {
+      this.showRule = true;
+      localStorage.setItem("startTime", new Date().getTime());
+    },
+    // 点击确定
+    unBuySure () {
+      addR.clickUnsubscribe();
+      this.unBuyDrainage = false;
+      this.showUnbuy = true;
+    },
+    getChildData (data) {
+      this.isBuy = data;
+    },
+    // 一键拨号反馈
+    toPhone () {
+      addR.dialNumber();
+      let phone = 4000600611;
+      window.location.href = "tel://" + phone;
+    },
+    async beforeLogin (type) {
+      this.type = type;
+      if (this.user.userid) {
+        if (type === "manual" || type === "member") {
+          this.toLink(type);
+        } else if (type === "unBUy") {
+          addR.unBuyClick();
+          if (this.pageData.strategyInfo.unsubscribeStrategyList.length > 0) {
+            let productId = await strategytemplate(
+              this.pageData.strategyInfo.unsubscribeStrategyList[0]
+            );
+            let drainageRes = await detMainProduct({
+              productId: productId.data.primaryProductId,
+            });
+            this.unBuyDrainageText = drainageRes.data.productName;
+            this.unBuyDrainage = true;
+          } else {
+            this.showUnbuy = true;
+          }
+        }
+      } else if (type === "unBUy") {
+        addR.unBuyClick();
+        if (this.pageData.strategyInfo.unsubscribeStrategyList.length > 0) {
+          let productId = await strategytemplate(
+            this.pageData.strategyInfo.unsubscribeStrategyList[0]
+          );
+          let drainageRes = await detMainProduct({
+            productId: productId.data.primaryProductId,
+          });
+          this.unBuyDrainageText = drainageRes.data.productName;
+          this.unBuyDrainage = true;
+        } else {
+          this.showUnbuy = true;
+        }
+      } else {
+        addR.loginClick();
+        this.showLogin = true;
+      }
+    },
+    chaxun () {
+      addR.clickFollow();
+      this.showQr = true;
+    },
+    // 推荐产品跳转
+    recommend (val) {
+      strategytemplate(val).then(async (res) => {
+        let info = await detMainProduct({
+          productId: res.data.primaryProductId,
+        });
+        let productJson = JSON.parse(res.data.productJson).product;
+        let mainProduct = {
+          activeType: info.data.activeType,
+          bannerPics: [
+            productJson.bannerImg,
+            productJson.jsonImg,
+            productJson.upImg,
+            productJson.topImg,
+          ],
+          bgColor: [
+            productJson.pageBgcol,
+            "",
+            productJson.orderBgcol,
+            productJson.orderBdcol,
+          ],
+          cacheSeatOne: [
+            {
+              dongHua: productJson.drawVal,
+              memberUrl: info.data.cacheSeatOne[0].memberUrl,
+              proC: {
+                e: productJson.hideCol,
+                s: productJson.pageTextcol,
+              },
+              productV: productJson.productV,
+              rushC: {
+                e: productJson.orderTextcol,
+                s: productJson.orderNumcol,
+              },
+              tabC: {
+                e: productJson.tabVicecol,
+                s: productJson.tabMaincol,
+              },
+              btnUrl: "",
+              relationIds: info.data.cacheSeatOne[0].relationIds ? info.data.cacheSeatOne[0].relationIds : ""
+            },
+          ],
+          cpid: info.data.cpid,
+          discountInfo: null,
+          flowJumpUrl: info.data.flowJumpUrl,
+          givePhoneInfo: info.data.givePhoneInfo,
+          guidancePic: {
+            c: productJson.orderImg,
+            p: productJson.explainImg,
+          },
+          id: res.data.primaryProductId,
+          isCompositeProduct: 0, //是否复合产品
+          logoPic: productJson.logoPic,
+          manualInfo: info.data.manualInfo,
+          memberName: info.data.memberName,
+          orderingInfo: info.data.orderingInfo,
+          originalPrice: info.data.originalPrice,
+          pageTitle: productJson.pageTitle,
+          productName: info.data.productName,
+          productType: info.data.productType,
+          promotionPic: info.data.promotionPic,
+          pushJumpUrl: info.data.pushJumpUrl,
+          remark: info.data.remark,
+          remark1: info.data.remark1,
+          remark2: info.data.remark2,
+          remark3: productJson.remark3,
+          spid: info.data.spid,
+          themeColor: [productJson.btnTopcol, productJson.btnBotcol],
+        };
+        let recommend = [];
+        if (
+          res.data.recommendStrategyIds.length > 0 &&
+          res.data.recommendStrategyIds
+        ) {
+          res.data.recommendStrategyIds.forEach(async (val) => {
+            let list = await strategytemplate(val);
+            recommend.push(list.data);
+          });
+        }
+        let pageData = {
+          mainProduct: mainProduct,
+          channl: {
+            channelKey: this.pageData.channl.channelKey,
+            channelName: this.pageData.channl.channelName,
+            fullCode: this.pageData.channl.fullCode,
+            edition: this.pageData.channl.edition,
+          },
+          recommend: recommend,
+          remarks: JSON.parse(res.data.extJson), //策略信息
+          otherJson: JSON.parse(res.data.otherJson), //备用json
+          strategyInfo: res.data,
+        };
+        let title =
+          mainProduct.pageTitle !== ""
+            ? mainProduct.pageTitle
+            : mainProduct.productName;
+        document.title = title;
+        MgtvApi.setWebviewTitle({
+          title: title,
+        });
+        pageData.strategyInfo.recommendStrategyList =
+          res.data.recommendStrategyIds;
+        pageData.strategyInfo.unsubscribeStrategyList =
+          res.data.unsubscribeStrategyIds;
+        pageData.strategyInfo.viceProductStrategyList =
+          res.data.viceProductIds;
+        if (JSON.parse(res.data.productJson).viceProduct) {
+          pageData.viceJson = JSON.parse(res.data.productJson).viceProduct;
+        }
+        pageData.mainJson = JSON.parse(res.data.productJson).product;
+        this.$store.commit("setPageData", pageData);
+        this.getIsBuy();
+        setTimeout(() => {
+          this.callSvg();
+        }, 200);
+        this.$store.commit("setTempName", res.data.templateCode);
+      });
+
+      this.unBuyDrainage = false;
+    },
+    buyBtn (item) {
+      // this.$store.commit("setPageData", pageData);
+      if (this.checked == false) {
+        this.$toast('请勾选隐私声明')
+      } else {
+        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
+        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");
+      lottieBox.innerHTML = "";
+      if (this.pageData.mainJson.jsonImg !== '') {
+        this.lottie = lottie.loadAnimation({
+          container: lottieBox,
+          renderer: "svg",
+          loop: true,
+          autoplay: true,
+          path: this.imgUrl + this.pageData.mainJson.jsonImg,
+        });
+      }
+    },
+  }
+
+
+}
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

purchase_H5/src/templates/templateColorNew/index.vue

@@ -93,6 +93,8 @@
     </van-overlay>
     <!-- 重复订购引流 -->
     <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
+    <!-- 订购成功提示  -->
+    <handel-modal v-model="handelShow"></handel-modal>
   </div>
 </template>
 
@@ -108,6 +110,7 @@ import timeoutModal from "../../componentsNew/timeoutModal.vue";
 import newZheZhao from "../../componentsNew/newZheZhao.vue";
 import unbuyModal from "../../componentsNew/unbuyModal.vue";
 import repeatModal from "../../componentsNew/repeatModal.vue";
+import handelModal from "../../componentsNew/handelModal.vue";
 import MgtvApi from "@/util/mgTvJssdk.js";
 import lottie from "lottie-web";
 import addR from "../../common/addRecord";
@@ -123,7 +126,8 @@ export default {
     timeoutModal,
     newZheZhao,
     unbuyModal,
-    repeatModal
+    repeatModal,
+    handelModal
   },
   data () {
     return {
@@ -146,7 +150,8 @@ export default {
       unBuyDrainageText: "",
       phone: "",
       isBuy: "未订购",
-      text: ""
+      text: "",
+      handelShow: false
     }
   },
   created () {
@@ -268,7 +273,7 @@ export default {
                 s: productJson.tabMaincol,
               },
               btnUrl: "",
-              relationIds: info.data.cacheSeatOne[0].relationIds?info.data.cacheSeatOne[0].relationIds:""
+              relationIds: info.data.cacheSeatOne[0].relationIds ? info.data.cacheSeatOne[0].relationIds : ""
             },
           ],
           cpid: info.data.cpid,

purchase_H5/src/templates/templateThree/index.vue

@@ -127,6 +127,8 @@
     <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
     <!-- 选择退订产品 -->
     <tab-unbuy @itemClick="itemClick" :datas="productDatas" v-model="unbuyShow" />
+    <!-- 订购成功提示  -->
+    <handel-modal v-model="handelShow"></handel-modal>
   </div>
 </template>
 
@@ -143,6 +145,7 @@ import timeoutModal from "../../componentsNew/timeoutModal.vue";
 import newZheZhao from "../../componentsNew/newZheZhao.vue";
 import unbuyModal from "../../componentsNew/unbuyModal.vue";
 import repeatModal from "../../componentsNew/repeatModal.vue";
+import handelModal from "../../componentsNew/handelModal.vue";
 import MgtvApi from "@/util/mgTvJssdk.js";
 import lottie from "lottie-web";
 import addR from "../../common/addRecord";
@@ -159,7 +162,8 @@ export default {
     newZheZhao,
     unbuyModal,
     repeatModal,
-    tabUnbuy
+    tabUnbuy,
+    handelModal
   },
   data () {
     return {
@@ -184,7 +188,8 @@ export default {
       phone: "",
       isBuy: "未订购",
       text: "",
-      productNum: 0
+      productNum: 0,
+      handelShow: false
     }
   },
   async created () {

purchase_ao/src/views/login/renlian.vue

@@ -0,0 +1,305 @@
+<template>
+  <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
+    <el-form-item prop="username" style="padding-left: 44px">
+      <div class="video" style="z-index: 1">
+        <video id="video" width="274" height="265" preload autoplay loop muted style="z-index: 1;"></video>
+      </div>
+      <!-- <div class="renlian" style="z-index: 999">
+        <div class="box">
+          <div class="line"></div>
+          <div class="bottom"></div>
+        </div>
+      </div> -->
+      <canvas id="canvas" width="500" height="500" style="position: fixed;top: -10000px"></canvas>
+    </el-form-item>
+    <!--    <a href="#" style="color: red;font-weight: bold">提示：如果未录入人脸请联系管理员进行录入</a>-->
+  </el-form>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+// import { info } from "@/api/system/tenant";
+// import * as user from "@/api/user";
+// import { getTopUrl } from "@/util/util";
+export default {
+  name: "renlian",
+  data () {
+    return {
+      tenantMode: false,
+      loginForm: {
+        //租户ID
+        tenantId: "000000",
+        //用户名
+        username: "",
+        //密码
+        password: "",
+        //账号类型
+        type: "account",
+        //验证码的值
+        code: "",
+        //验证码的索引
+        key: "",
+        //预加载白色背景
+        image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+      },
+      loginRules: {
+        tenantId: [
+          { required: false, message: "请输入租户ID", trigger: "blur" }
+        ],
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" }
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 1, message: "密码长度最少为6位", trigger: "blur" }
+        ]
+      },
+      passwordType: "password"
+    };
+  },
+  created () {
+
+  },
+  mounted () {
+    let that = this
+    setTimeout(function () {
+      that.openCamera()
+      that.getTenant();
+      that.refreshCode();
+    }, 1000)
+  },
+  destroyed () {
+    // console.log(1111111111)
+    // // 停止侦测
+    this.trackerTask.stop()
+    // // 关闭摄像头
+    // window.tracking.closeCamera()
+  },
+  // computed: {
+  //   ...mapGetters(["tagWel"])
+  // },
+  props: [],
+  methods: {
+    closeshexiangtou () {
+      this.trackerTask.stop()
+    },
+    refreshCode () {
+      user.getCaptcha().then(res => {
+        const data = res.data;
+        this.loginForm.key = data.key;
+        this.loginForm.image = data.image;
+      })
+    },
+    showPassword () {
+      this.passwordType === ""
+        ? (this.passwordType = "password")
+        : (this.passwordType = "");
+    },
+    handleLogin () {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          const loading = this.$loading({
+            lock: true,
+            text: '登录中,请稍后。。。',
+            spinner: "el-icon-loading"
+          });
+          this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
+            // this.$router.push({ path: this.tagWel.value });
+            loading.close();
+          }).catch(() => {
+            loading.close();
+            this.refreshCode();
+          });
+        }
+      });
+    },
+    getTenant () {
+      let domain = getTopUrl();
+      info(domain).then(res => {
+        const data = res.data;
+        if (data.success && data.data.tenantId) {
+          this.tenantMode = false;
+          this.loginForm.tenantId = data.data.tenantId;
+          this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
+        }
+      })
+    },
+
+
+    openCamera () {
+
+      console.log(new tracking)
+      
+      var video = document.getElementById('video');
+      var canvas = document.getElementById('canvas');
+      var context = canvas.getContext('2d');
+
+
+      var tracker = new tracking.ObjectTracker('face');  // 引入第三方 库
+      tracker.setInitialScale(1);
+      tracker.setStepSize(2);
+      tracker.setEdgesDensity(0.1);
+
+      this.trackerTask = tracking.track('#video', tracker, { camera: true });
+      //-------  指定 canvas 的宽高 ，auto 自动播放
+      let constraints = {
+        video: { width: 300, height: 300 },
+        audio: true
+      };
+
+      let promise = navigator.mediaDevices.getUserMedia(constraints);   // h5 新的API
+
+      promise.then(function (MediaStream) {
+        video.srcObject = MediaStream;
+        video.play();
+      }).catch(function (PermissionDeniedError) {
+        console.log(PermissionDeniedError);
+      })
+      //--------------
+      let that = this;
+      that.tracker_fun(tracker, video, context, canvas); //open 摄像头，执行tracker_fun( 传入参数 )
+
+    },
+    tracker_fun (tracker, video, context, canvas) {
+      let that = this;
+      let set_clear;
+      set_clear = setInterval(function () { // 每秒 检测人脸 结果
+        tracker.on('track', function (event) {     // 视频流
+          if (!that.first) {     // if  --- > else  检测到人脸 success() =>{}
+            event.data.forEach(function (rect) {
+              if (rect.x) {
+                that.first = rect.x;
+                // video.pause();    // success  将暂停 video
+                context.drawImage(video, 0, 0, 500, 500);   // 绘制到 canvas
+                context.font = '11px Helvetica';
+                context.fillText("", 100, 40);
+                context.strokeStyle = '#a64ceb';
+                context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+                var data_url = canvas.toDataURL('image/png'); //base64 request
+                that.$store.dispatch("LoginByrenlian", data_url).then((res) => {
+                  if (res.error_code == 400) {
+                    setTimeout(function () {
+                      that.first = null;
+                    }, 3000)
+                    this.$message.error(res.error_msg);
+                  } else {
+                    const loading = that.$loading({
+                      lock: true,
+                      text: '登录中,请稍后。。。',
+                      spinner: "el-icon-loading"
+                    });
+                    clearInterval(set_clear)
+                    setTimeout(function () {
+                      loading.close();
+                      location.reload();
+                      // that.$router.resolve({path: that.tagWel.value});
+                    }, 3000)
+                  }
+
+
+                }).catch(() => {
+                  setTimeout(function () {
+                    that.first = null;
+                  }, 3000)
+                });
+                // return;
+              }
+            });
+          }
+        });
+        // clearTimeout(set_clear)
+        // console.log('-------')
+      }, 3000)
+
+    }
+  }
+};
+</script>
+
+<style>
+.renlian {
+  position: relative;
+  height: 90px;
+  width: 274px;
+  background-size: 100% 100%;
+}
+.video {
+  position: relative;
+  height: 90px;
+  width: 274px;
+  background-size: 100% 100%;
+}
+
+.renlian .box {
+  width: 30vw;
+  height: 30vw;
+  max-height: 30vh;
+  max-width: 30vh;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+  border: 0.1rem solid rgba(3, 169, 244, 0.2);
+}
+
+.renlian .line {
+  height: calc(100% - 2px);
+  width: 100%;
+  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #03a9f4 211%);
+  border-bottom: 2px solid #03a9f4;
+  transform: translateY(-100%);
+  animation: radar-beam 2s infinite;
+  animation-timing-function: cubic-bezier(0.3, 0, 0.43, 0.7);
+  animation-delay: 1.4s;
+  z-index: 999;
+}
+
+.renlian .box:after,
+.renlian .box:before,
+.renlian .bottom:after,
+.renlian .bottom:before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 3vw;
+  height: 3vw;
+  z-index: 999;
+  border: 0.2rem solid transparent;
+}
+
+.renlian .box:after,
+.renlian .box:before {
+  top: 0;
+  border-top-color: #03a9f4;
+  z-index: 999;
+}
+
+.renlian .bottom:after,
+.renlian .bottom:before {
+  bottom: 0;
+  border-bottom-color: #03a9f4;
+}
+
+.renlian .box:before,
+.renlian .bottom:before {
+  left: 0;
+  border-left-color: #03a9f4;
+}
+
+.renlian .box:after,
+.renlian .bottom:after {
+  right: 0;
+  border-right-color: #03a9f4;
+}
+
+@keyframes radar-beam {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+</style>

purchase_ao/src/views/strategy/add.vue

@@ -62,7 +62,7 @@
                   <el-option v-for="item in productInfoList" :key="item.id" :label="`${item.productName}/${item.remark}/${item.spid}`" :value="item.id" />
                 </el-select>
               </el-form-item>
-              <el-form-item label="副产品2" v-if="form.templateCode =='templateThree'">
+              <el-form-item label="副产品2" v-if="form.templateCode =='templateThree' || form.templateCode =='activity-three' ">
                 <el-select v-model="extJson.viceProductId2" filterable clearable placeholder="请选择副产品2" @change="viceChange2">
                   <el-option v-for="item in productInfoList" :key="item.id" :label="`${item.productName}/${item.remark}/${item.spid}`" :value="item.id" />
                 </el-select>
@@ -1007,6 +1007,7 @@ export default {
       },
       // 客户端适配
       disposeList: [
+        { value: "ticket  ", label: "手厅客户端", },
         { value: "tencent", label: "腾讯客户端", },
         { value: "aqy", label: "爱奇艺客户端", },
         { value: "bili", label: "B站客户端", },
@@ -1015,12 +1016,16 @@ export default {
         { value: "ksJhuo", label: "快手激活", },
         { value: "zijie", label: "字节跳动信息流", },
         { value: "zijieStart", label: "字节星图信息流", },
+
+        
       ],
       // 模板列表
       templateList: [],
       //产品列表
       productInfoList: [],
-      //策略列表
+      //策略列表.
+
+
       strategyInfoList: [],
       editId: null,
       copy: 0,