6.14更新

purchase_H5/src/components/opOut.vue

@@ -0,0 +1,120 @@
+<template>
+  <van-overlay :show="value" :duration="0.1">
+    <div class="repeat-modal modal" @click.stop>
+      <img src="../assets/img/close.png" class="close" @click="$emit('change', false)" />
+      <div class="text-box" v-if="text!==''">{{text}}</div>
+      <div class="text-box" v-else>合约期外退订无需缴纳违约金，合约期内退订需一次性支付违约金话费<span style="color:red">{{Number(pageData.mainProduct.originalPrice)-0.01}}</span>元，是否确认退订</div>
+      <div class="btn-box">
+        <div class="btn left" @click="sure">确定</div>
+        <div class="btn right" @click="$emit('change', false)">
+          再想想
+        </div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      text: ""
+    }
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: Boolean
+  },
+  computed: {
+    pageData () {
+      return this.$store.state.pageData;
+    },
+  },
+  created () {
+    if (this.pageData.remarks.treatyText && this.pageData.remarks.treatyText !== '') {
+      this.text = this.pageData.remarks.treatyText
+    }
+  },
+  methods: {
+    sure () {
+      this.$emit('change', false)
+      this.$emit('opoutClick')
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.repeat-modal {
+  top: 412px;
+  padding: 60px 51px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #222222;
+
+  .text-box {
+    line-height: 48px;
+    text-align: center;
+  }
+
+  .btn-box {
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      width: 190px;
+      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;
+  // }
+}
+
+.modal {
+  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/components/unifyColor.vue

@@ -166,7 +166,7 @@ export default {
     indexNum: Number,
   },
   created () {
-    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne!==null) {
+    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
       this.productJson = this.pageData.mainProduct.cacheSeatOne;
     }
     if (
@@ -452,6 +452,8 @@ export default {
     border-radius: 20px;
     border-width: 1px;
     border-style: solid;
+    position: relative;
+    z-index: 3;
 
     .matchImage {
       width: 100%;
@@ -518,6 +520,8 @@ export default {
   .buyBox {
     margin-top: -48px;
     padding: 0 25px;
+    position: relative;
+    z-index: 3;
 
     .btnImg {
       width: 387px;

purchase_H5/src/components/unifyModal.vue

@@ -1,48 +1,26 @@
 <template>
   <!-- 统一认证组件 升级 -->
-  <div
-    class="unifyModal"
-    v-if="
+  <div class="unifyModal" v-if="
       pageData.remarks.isBuy === '1' &&
       isBuy !== '已订购' &&
       (pageData.remarks.attestation === 3 ||
         pageData.remarks.attestation === 4 ||
         pageData.remarks.attestation === 5)
-    "
-  >
+    ">
     <div class="buyBox">
-      <div
-        :style="{ 'border-color': pageData.mainProduct.themeColor[1] }"
-        class="btnInput"
-      >
-        <input
-          type="text"
-          @input="inpChange"
-          maxlength="11"
-          placeholder="请输入联通号码"
-          v-model="loginForm.phone"
-        />
+      <div :style="{ 'border-color': pageData.mainProduct.themeColor[1] }" class="btnInput">
+        <input type="text" @input="inpChange" maxlength="11" placeholder="请输入联通号码" v-model="loginForm.phone" />
       </div>
-      <div
-        class="btn"
-        @click="btnClick"
-        v-if="!indexNum || indexNum === 0"
-        :style="{
+      <div class="btn" @click="btnClick" v-if="!indexNum || indexNum === 0" :style="{
           'background-color': pageData.mainProduct.themeColor[0],
           'border-color': pageData.mainProduct.themeColor[1],
-        }"
-      >
+        }">
         {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
       </div>
-      <div
-        class="btn"
-        @click="btnClick"
-        v-else
-        :style="{
+      <div class="btn" @click="btnClick" v-else :style="{
           'background-color': pageData.mainProduct.themeColor[0],
           'border-color': pageData.mainProduct.themeColor[1],
-        }"
-      >
+        }">
         {{
           pageData.remarks.btnTextAss ? pageData.remarks.btnTextAss : "点我领取"
         }}
@@ -51,29 +29,19 @@
         <van-checkbox v-model="checked" checked-color="#fc8940">
           <p style="margin: 0; padding: 0">我已阅读并同意</p>
         </van-checkbox>
-        <span class="span" style="color: #fc8940" @click="$emit('hideClick')"
-          >《隐私声明》</span
-        >
-        <span class="span" style="color: #fc8940" @click="$emit('ruleClick')"
-          >《产品说明》</span
-        >
+        <span class="span" style="color: #fc8940" @click="$emit('hideClick')">《隐私声明》</span>
+        <span class="span" style="color: #fc8940" @click="$emit('ruleClick')">《产品说明》</span>
       </div>
-      <div
-        class="text"
-        :style="
+      <div class="text" :style="
           productJson.length > 0 && productJson[0].rushC.e !== ''
             ? { color: `${productJson[0].rushC.e}` }
             : { color: '#000' }
-        "
-      >
-        <span
-          :style="
+        ">
+        <span :style="
             productJson.length > 0 && productJson[0].rushC.e !== ''
               ? { color: `${productJson[0].rushC.s}` }
               : { color: '#ea1313' }
-          "
-          >{{ times }}</span
-        >{{
+          ">{{ times }}</span>{{
           pageData.remarks.orderText !== "" && pageData.remarks.orderText
             ? pageData.remarks.orderText
             : "用户已抢购成功"
@@ -83,43 +51,21 @@
         {{ pageData.remarks.privacyText }}
       </div>
     </div>
-    <van-overlay
-      :show="value"
-      :duration="0.1"
-      lock-scroll
-    >
+    <van-overlay :show="value" :duration="0.1" lock-scroll>
       <div class="modalInput" @click.stop>
-        <img
-          src="../assets/img/close.png"
-          class="close"
-          @click="value = false"
-        />
+        <img src="../assets/img/close.png" class="close" @click="value = false" />
         <div class="name">
           您正在订购<span>{{ pageData.mainProduct.productName }}</span>
         </div>
         <div class="maskText" v-if="pageData.remarks.isMask === '1'">
           {{ pageData.remarks.maskText }}
         </div>
-        <div
-          class="maskText2"
-          v-if="pageData.remarks.isMask === '1' && pageData.remarks.maskText2"
-        >
+        <div class="maskText2" v-if="pageData.remarks.isMask === '1' && pageData.remarks.maskText2">
           ({{ pageData.remarks.maskText2 }})
         </div>
         <div class="getCode">
-          <input
-            type="text"
-            v-model="loginForm.vcode"
-            v-on:input="checkVcode"
-            placeholder="验证码"
-            maxlength="6"
-          />
-          <span
-            class="code"
-            :class="{ code: 1, number: codeState.state }"
-            @click="getCode()"
-            >{{ codeState.state ? codeState.time + "s" : "重新获取" }}</span
-          >
+          <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码" maxlength="6" />
+          <span class="code" :class="{ code: 1, number: codeState.state }" @click="getCode()">{{ codeState.state ? codeState.time + "s" : "重新获取" }}</span>
         </div>
         <div class="inputBtn" @click="unified">确认订购</div>
       </div>
@@ -131,7 +77,7 @@
 import { getCode, getNewCode, numberSearch } from "../api";
 import { Dialog } from "vant";
 export default {
-  data() {
+  data () {
     return {
       imgUrl: process.env.VUE_APP_IMGS_URL,
       productJson: [],
@@ -158,8 +104,8 @@ export default {
     isBuy: String,
     indexNum: Number,
   },
-  created() {
-    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne!==null) {
+  created () {
+    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
       this.productJson = this.pageData.mainProduct.cacheSeatOne;
     }
     if (
@@ -184,7 +130,7 @@ export default {
     let times = (now - 1600476800000) / 180000;
     this.times = String(Math.ceil(times * add) + start);
   },
-  mounted() {
+  mounted () {
     if (this.$route.query.phone) {
       this.loginForm.phone = this.$route.query.phone;
     } else if (localStorage.getItem("phone")) {
@@ -197,12 +143,12 @@ export default {
     }
   },
   methods: {
-    checkVcode() {
+    checkVcode () {
       if (this.loginForm.vcode.length > 6) {
         this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
       }
     },
-    inpChange(e) {
+    inpChange (e) {
       // if (/^1[3456789]\d{9}$/.test(this.loginForm.phone)) {
       //     if (this.checked === false) {
       //         this.$toast.fail("请先勾选隐私声明");
@@ -221,7 +167,7 @@ export default {
       //     }
       // }
     },
-    btnClick() {
+    btnClick () {
       if (this.loginForm.phone === "") {
         this.$toast("请输入手机号");
         return false;
@@ -286,7 +232,7 @@ export default {
         this.$toast("手机号格式错误");
       }
     },
-    getCode() {
+    getCode () {
       if (this.codeState.state) return;
       let { phone } = this.loginForm;
       if (!/^1[23456789]\d{9}$/.test(phone)) {
@@ -407,7 +353,7 @@ export default {
       }
     },
     // 短人订购&&简认订购
-    unified() {
+    unified () {
       if (this.checked === false) {
         this.$toast.fail("请先勾选隐私声明");
       } else {
@@ -456,6 +402,8 @@ export default {
 
   .buyBox {
     padding: 0 60px;
+    position: relative;
+    z-index: 3;
 
     .btnInput {
       width: 504px;

purchase_H5/src/templates/templateColor/components/duanRen.vue

@@ -1,375 +1,366 @@
 <template>
-    <!-- 短信认证组件 -->
-    <div class="duanCol">
-        <div class="matchBanner" :style="{
+  <!-- 短信认证组件 -->
+  <div class="duanCol">
+    <div class="matchBanner" :style="{
         backgroundColor: pageData.mainProduct.bgColor[2],
         borderColor: pageData.mainProduct.bgColor[3],
       }">
-            <div v-if="pageData.mainProduct.guidancePic.p" class="matchImage" :style="{
+      <div v-if="pageData.mainProduct.guidancePic.p" class="matchImage" :style="{
           backgroundImage: `url(${imgUrl}${pageData.mainProduct.guidancePic.p})`,
         }"></div>
-            <div class="textBox">
-                <div class="input">
-                    <input type="text" maxlength="11" v-model="loginForm.phone" placeholder="联通手机号" />
-                </div>
-                <div class="input">
-                    <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码"
-                        maxlength="6" />
-                    <span class="getcode" :class="{ code: 1, number: codeState.state }"
-                        @click="getCode()">{{ codeState.state ? codeState.time + "s" : "获取验证码" }}</span>
-                </div>
-            </div>
-            <div class="privacyBox">
-                <van-checkbox v-model="checked" checked-color="#fc8940">
-                    <div
-                        :style="productJson.length>0 && productJson[0].proC.s!==''  ?{color:`${productJson[0].proC.s}`}:{color:'#000'}">
-                        <p style="margin: 0; padding: 0">我已阅读并同意
-                        </p>
-                    </div>
-                </van-checkbox>
-                <span class="span"
-                    :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}"
-                    @click="$emit('hideClick')">《隐私声明》</span>
-                <span class="span"
-                    :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}"
-                    @click="$emit('ruleClick')">《产品说明》</span>
-            </div>
-            <div class="tips"
-                :style="productJson.length>0 && productJson[0].proC.s!=='' ?{color:`${productJson[0].proC.s}`}:{color:'#fff'}">
-                {{pageData.remarks.privacyText}}
-            </div>
+      <div class="textBox">
+        <div class="input">
+          <input type="text" maxlength="11" v-model="loginForm.phone" placeholder="联通手机号" />
         </div>
-        <!-- 订购按钮 -->
-        <div class="buyBox" v-if="pageData.remarks.isBuy === '1'">
-            <div v-if="productJson.length>0 && productJson[0].btnUrl!=='' && productJson[0].productV==='2'"
-                class="btnImg" @click="btnClick()">
-                <img :src="productJson[0].btnUrl" alt="">
-            </div>
-            <div v-else class="btn" @click="btnClick()"
-                :style="pageData.remarks.btnText.length<=7?{
+        <div class="input">
+          <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码" maxlength="6" />
+          <span class="getcode" :class="{ code: 1, number: codeState.state }" @click="getCode()">{{ codeState.state ? codeState.time + "s" : "获取验证码" }}</span>
+        </div>
+      </div>
+      <div class="privacyBox">
+        <van-checkbox v-model="checked" checked-color="#fc8940">
+          <div :style="productJson.length>0 && productJson[0].proC.s!==''  ?{color:`${productJson[0].proC.s}`}:{color:'#000'}">
+            <p style="margin: 0; padding: 0">我已阅读并同意
+            </p>
+          </div>
+        </van-checkbox>
+        <span class="span" :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}" @click="$emit('hideClick')">《隐私声明》</span>
+        <span class="span" :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}" @click="$emit('ruleClick')">《产品说明》</span>
+      </div>
+      <div class="tips" :style="productJson.length>0 && productJson[0].proC.s!=='' ?{color:`${productJson[0].proC.s}`}:{color:'#fff'}">
+        {{pageData.remarks.privacyText}}
+      </div>
+    </div>
+    <!-- 订购按钮 -->
+    <div class="buyBox" v-if="pageData.remarks.isBuy === '1'">
+      <div v-if="productJson.length>0 && productJson[0].btnUrl!=='' && productJson[0].productV==='2'" class="btnImg" @click="btnClick()">
+        <img :src="productJson[0].btnUrl" alt="">
+      </div>
+      <div v-else class="btn" @click="btnClick()" :style="pageData.remarks.btnText.length<=7?{
           'background-image': `linear-gradient(${pageData.mainProduct.themeColor[0]},${pageData.mainProduct.themeColor[1]})`,
         }:{'background-image': `linear-gradient(${pageData.mainProduct.themeColor[0]},${pageData.mainProduct.themeColor[1]})`,'width':345+'px'}">
-                {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
-                <div class="originalPrice" :style="{ color: pageData.mainProduct.bgColor[2] }">
-                    <s>{{ pageData.mainProduct.originalPrice }}元/月</s>
-                </div>
-            </div>
-            <div class="text"
-                :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
-                <span
-                    :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
-            </div>
+        {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
+        <div class="originalPrice" :style="{ color: pageData.mainProduct.bgColor[2] }">
+          <s>{{ pageData.mainProduct.originalPrice }}元/月</s>
         </div>
+      </div>
+      <div class="text" :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
+        <span :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-    import {
-        getCode
-    } from '../../../api'
-    import {
-    Dialog
-    } from "vant";
-    export default {
-        data() {
-            return {
-                imgUrl: process.env.VUE_APP_IMGS_URL,
-                productJson: [],
-                checked: false,
-                times: 0,
-                loginForm: {
-                    phone: "",
-                    vcode: "",
-                },
-                codeState: {
-                    state: false,
-                    time: 60,
-                    task: null,
-                },
-            }
-        },
-        props: {
-            pageData: Object
-        },
-        created() {
-            if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne!==null) {
-                this.productJson = this.pageData.mainProduct.cacheSeatOne
-            }
-            if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
-                .privacy !==
-                null) {
-                if (this.pageData.remarks.privacy === '1') {
-                    this.checked = true
-                }
-            }
-            let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
-                .remarks.orderNum) : 0
-            let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
-                .remarks.orderAdd) : 1
-            let now = new Date().getTime();
-            let times = (now - 1600476800000) / 180000;
-            this.times = String(Math.ceil(times * add) + start)
-        },
-        methods: {
-            btnClick() {
-                if (this.checked === false) {
-                    this.$toast.fail("请先勾选隐私声明");
-                } else {
-                    let {
-                        phone,
-                        vcode
-                    } = this.loginForm;
-                    if (!/^1[23456789]\d{9}$/.test(phone)) {
-                        return this.$toast("请输入正确手机号");
-                    }
-                    if (!vcode) {
-                        return this.$toast("请输入验证码");
-                    }
-                    this.$emit("btnClick", this.loginForm);
-                    this.loginForm = {}
-                }
-            },
-            checkVcode() {
-                if (this.loginForm.vcode.length > 6) {
-                    this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
-                }
-            },
-            getCode() {
-                if (this.codeState.state) return;
-                let {
-                    phone
-                } = this.loginForm;
-                if (!/^1[23456789]\d{9}$/.test(phone)) {
-                    return this.$toast("请输入正确手机号");
-                }
-                    let str = phone.slice(0,3)
-                    let str2 =  phone.slice(0,4)
-                    let number = this.$store.state.fictitious.split(',')
-                    let isDialog = true
-                    if(number !== ''){
-                      number.forEach(element => {
-                        if(element===str || element===str2){
-                           isDialog = false
-                        }
-                      });
-                    }
-                    if(isDialog === false){
-                        Dialog({
-                          message: '您的号码为虚拟运营商号码，不支持办理此业务',
-                          theme: 'round-button',
-                          })
-                      return false
-                    }
-                if (this.checked === false) {
-                    return this.$toast.fail("请先勾选隐私声明");
-                }
-                getCode({
-                    phone
-                }).then(res => {
-                    this.$toast("验证码已发送");
-                    this.codeState.state = true;
-                    this.codeState.task = setInterval(() => {
-                        if (this.codeState.time <= 0) {
-                            clearInterval(this.codeState.task);
-                            this.codeState.task = null;
-                            this.codeState.state = false;
-                            this.codeState.time = 60;
-                        } else {
-                            this.codeState.time--;
-                        }
-                    }, 1000);
-                }, res => {
-                    this.$toast(res.message);
-                })
-            }
+import {
+  getCode
+} from '../../../api'
+import {
+  Dialog
+} from "vant";
+export default {
+  data () {
+    return {
+      imgUrl: process.env.VUE_APP_IMGS_URL,
+      productJson: [],
+      checked: false,
+      times: 0,
+      loginForm: {
+        phone: "",
+        vcode: "",
+      },
+      codeState: {
+        state: false,
+        time: 60,
+        task: null,
+      },
+    }
+  },
+  props: {
+    pageData: Object
+  },
+  created () {
+    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
+      this.productJson = this.pageData.mainProduct.cacheSeatOne
+    }
+    if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
+      .privacy !==
+      null) {
+      if (this.pageData.remarks.privacy === '1') {
+        this.checked = true
+      }
+    }
+    let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
+      .remarks.orderNum) : 0
+    let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
+      .remarks.orderAdd) : 1
+    let now = new Date().getTime();
+    let times = (now - 1600476800000) / 180000;
+    this.times = String(Math.ceil(times * add) + start)
+  },
+  methods: {
+    btnClick () {
+      if (this.checked === false) {
+        this.$toast.fail("请先勾选隐私声明");
+      } else {
+        let {
+          phone,
+          vcode
+        } = this.loginForm;
+        if (!/^1[23456789]\d{9}$/.test(phone)) {
+          return this.$toast("请输入正确手机号");
         }
-
+        if (!vcode) {
+          return this.$toast("请输入验证码");
+        }
+        this.$emit("btnClick", this.loginForm);
+        this.loginForm = {}
+      }
+    },
+    checkVcode () {
+      if (this.loginForm.vcode.length > 6) {
+        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
+      }
+    },
+    getCode () {
+      if (this.codeState.state) return;
+      let {
+        phone
+      } = this.loginForm;
+      if (!/^1[23456789]\d{9}$/.test(phone)) {
+        return this.$toast("请输入正确手机号");
+      }
+      let str = phone.slice(0, 3)
+      let str2 = phone.slice(0, 4)
+      let number = this.$store.state.fictitious.split(',')
+      let isDialog = true
+      if (number !== '') {
+        number.forEach(element => {
+          if (element === str || element === str2) {
+            isDialog = false
+          }
+        });
+      }
+      if (isDialog === false) {
+        Dialog({
+          message: '您的号码为虚拟运营商号码，不支持办理此业务',
+          theme: 'round-button',
+        })
+        return false
+      }
+      if (this.checked === false) {
+        return this.$toast.fail("请先勾选隐私声明");
+      }
+      getCode({
+        phone
+      }).then(res => {
+        this.$toast("验证码已发送");
+        this.codeState.state = true;
+        this.codeState.task = setInterval(() => {
+          if (this.codeState.time <= 0) {
+            clearInterval(this.codeState.task);
+            this.codeState.task = null;
+            this.codeState.state = false;
+            this.codeState.time = 60;
+          } else {
+            this.codeState.time--;
+          }
+        }, 1000);
+      }, res => {
+        this.$toast(res.message);
+      })
     }
+  }
+
+}
 </script>
 
 <style lang="scss">
-    .duanCol {
-
-        // 产品配图样式
-        .matchBanner {
-            margin: 0 auto;
-            margin-top: -8px;
-            width: 690px;
-            padding: 70px 35px 90px 35px;
-            box-sizing: border-box;
-            border-radius: 20px;
-            border-width: 1px;
-            border-style: solid;
+.duanCol {
+  // 产品配图样式
+  .matchBanner {
+    margin: 0 auto;
+    margin-top: -8px;
+    width: 690px;
+    padding: 70px 35px 90px 35px;
+    box-sizing: border-box;
+    border-radius: 20px;
+    border-width: 1px;
+    border-style: solid;
+    position: relative;
+    z-index: 3;
 
-            .matchImage {
-                width: 100%;
-                height: 134px;
-                background-size: 100%;
-                background-repeat: no-repeat;
-            }
-
-            .textBox {
-                // width: 750px;
-                // padding: 0 50px;
-                box-sizing: border-box;
+    .matchImage {
+      width: 100%;
+      height: 134px;
+      background-size: 100%;
+      background-repeat: no-repeat;
+    }
 
-                .input {
-                    width: 100%;
-                    height: 80px;
-                    background: #FFFFFF;
-                    border-radius: 10px;
-                    margin-top: 25px;
-                    opacity: 0.5;
-                    display: flex;
-                    flex-direction: row;
-                    padding: 0 15px;
-                    box-sizing: border-box;
-                    position: relative;
+    .textBox {
+      // width: 750px;
+      // padding: 0 50px;
+      box-sizing: border-box;
 
-                    input {
-                        margin: 0;
-                        padding: 0;
-                        border: none;
-                        outline: none;
-                        width: 70%;
-                        height: 100%;
-                        line-height: 80px;
-                        font-size: 34px;
-                        font-family: PingFang SC;
-                        font-weight: 500;
-                        color: #000;
-                    }
+      .input {
+        width: 100%;
+        height: 80px;
+        background: #ffffff;
+        border-radius: 10px;
+        margin-top: 25px;
+        opacity: 0.5;
+        display: flex;
+        flex-direction: row;
+        padding: 0 15px;
+        box-sizing: border-box;
+        position: relative;
 
-                    .getcode {
-                        font-size: 34px;
-                        font-family: PingFang SC;
-                        font-weight: bold;
-                        color: #0D0D0D;
-                        position: absolute;
-                        right: 20px;
-                        bottom: 24px;
-                    }
-                }
-            }
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 70%;
+          height: 100%;
+          line-height: 80px;
+          font-size: 34px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #000;
         }
 
-        @keyframes scale {
-            from {
-                transform: scale(1);
-            }
-
-            to {
-                transform: scale(0.8);
-            }
+        .getcode {
+          font-size: 34px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #0d0d0d;
+          position: absolute;
+          right: 20px;
+          bottom: 24px;
         }
+      }
+    }
+  }
 
-        .buyBox {
-            margin-top: -48px;
-            padding: 0 25px;
+  @keyframes scale {
+    from {
+      transform: scale(1);
+    }
 
-            .btnImg {
-                width: 387px;
-                height: 114px;
-                margin: 0 auto;
-                border-radius: 50px;
-                line-height: 114px;
-                font-size: 48px;
-                font-weight: bold;
-                color: #ffffff;
-                text-align: center;
-                text-shadow: 2px 2px #1b1414;
-                animation-name: scale;
-                animation-duration: 0.3s;
-                animation-timing-function: ease-in-out;
-                animation-iteration-count: infinite;
-                animation-direction: alternate-reverse;
-                position: relative;
+    to {
+      transform: scale(0.8);
+    }
+  }
 
-                img {
-                    width: auto;
-                    height: 100%;
-                }
-            }
+  .buyBox {
+    margin-top: -48px;
+    padding: 0 25px;
+    position: relative;
+    z-index: 3;
 
-            .btn {
-                width: 387px;
-                height: 100px;
-                margin: 0 auto;
-                line-height: 100px;
-                border-radius: 50px;
-                font-size: 48px;
-                font-weight: bold;
-                color: #ffffff;
-                text-align: center;
-                text-shadow: 2px 2px #1b1414;
-                animation-name: scale;
-                animation-duration: 0.3s;
-                animation-timing-function: ease-in-out;
-                animation-iteration-count: infinite;
-                animation-direction: alternate-reverse;
-                position: relative;
+    .btnImg {
+      width: 387px;
+      height: 114px;
+      margin: 0 auto;
+      border-radius: 50px;
+      line-height: 114px;
+      font-size: 48px;
+      font-weight: bold;
+      color: #ffffff;
+      text-align: center;
+      text-shadow: 2px 2px #1b1414;
+      animation-name: scale;
+      animation-duration: 0.3s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate-reverse;
+      position: relative;
 
-                .originalPrice {
-                    text-shadow: 0px 0px #1b1414;
-                    width: 120px;
-                    height: 50px;
-                    line-height: 50px;
-                    text-align: center;
-                    position: absolute;
-                    top: -25px;
-                    left: 0;
-                    border-top-left-radius: 25px;
-                    border-top-right-radius: 25px;
-                    border-bottom-left-radius: 25px;
-                    background-color: #fef5e4;
-                    color: #89271a;
-                    font-size: 16px;
-                }
-            }
+      img {
+        width: auto;
+        height: 100%;
+      }
+    }
 
-            .text {
-                // color: #0d0d0d;
-                line-height: 50px;
-                font-size: 26px;
-                // font-weight: bold;
-                text-align: center;
+    .btn {
+      width: 387px;
+      height: 100px;
+      margin: 0 auto;
+      line-height: 100px;
+      border-radius: 50px;
+      font-size: 48px;
+      font-weight: bold;
+      color: #ffffff;
+      text-align: center;
+      text-shadow: 2px 2px #1b1414;
+      animation-name: scale;
+      animation-duration: 0.3s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate-reverse;
+      position: relative;
 
-                span {
-                    font-weight: bold;
-                }
-            }
-        }
+      .originalPrice {
+        text-shadow: 0px 0px #1b1414;
+        width: 120px;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        position: absolute;
+        top: -25px;
+        left: 0;
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        border-bottom-left-radius: 25px;
+        background-color: #fef5e4;
+        color: #89271a;
+        font-size: 16px;
+      }
+    }
 
-        .privacyBox {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            margin-top: 49px;
-            font-size: 22px;
+    .text {
+      // color: #0d0d0d;
+      line-height: 50px;
+      font-size: 26px;
+      // font-weight: bold;
+      text-align: center;
 
-            .van-checkbox {
-                text-align: right;
-                display: flex;
-                justify-content: flex-end;
-            }
+      span {
+        font-weight: bold;
+      }
+    }
+  }
 
-            .span {
-                display: flex;
-                align-items: center;
-            }
-        }
+  .privacyBox {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 49px;
+    font-size: 22px;
 
-        .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;
-        }
+    .van-checkbox {
+      text-align: right;
+      display: flex;
+      justify-content: flex-end;
     }
+
+    .span {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .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;
+  }
+}
 </style>

purchase_H5/src/templates/templateColor/components/jianRen.vue

@@ -1,394 +1,385 @@
 <template>
-    <!-- 短信认证组件 -->
-    <div class="jianCol">
-        <div class="matchBanner" :style="{
+  <!-- 短信认证组件 -->
+  <div class="jianCol">
+    <div class="matchBanner" :style="{
         backgroundColor: pageData.mainProduct.bgColor[2],
         borderColor: pageData.mainProduct.bgColor[3],
       }">
-            <div v-if="pageData.mainProduct.guidancePic.p" class="matchImage" :style="{
+      <div v-if="pageData.mainProduct.guidancePic.p" class="matchImage" :style="{
           backgroundImage: `url(${imgUrl}${pageData.mainProduct.guidancePic.p})`,
         }"></div>
-            <div class="textBox">
-                <div class="input">
-                    <input type="text" maxlength="11" v-model="loginForm.phone" placeholder="联通手机号" />
-                </div>
-                <div class="input">
-                    <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码"
-                        maxlength="6" />
-                    <span class="getcode" :class="{ code: 1, number: codeState.state }"
-                        @click="getCode()">{{ codeState.state ? codeState.time + "s" : "获取验证码" }}</span>
-                </div>
-            </div>
-            <div class="privacyBox">
-                <van-checkbox v-model="checked" checked-color="#fc8940">
-                    <div
-                        :style="productJson.length>0 && productJson[0].proC.s!==''  ?{color:`${productJson[0].proC.s}`}:{color:'#000'}">
-                        <p style="margin: 0; padding: 0">我已阅读并同意
-                        </p>
-                    </div>
-                </van-checkbox>
-                <span class="span"
-                    :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}"
-                    @click="$emit('hideClick')">《隐私声明》</span>
-                <span class="span"
-                    :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}"
-                    @click="$emit('ruleClick')">《产品说明》</span>
-            </div>
-            <div class="tips"
-                :style="productJson.length>0 && productJson[0].proC.s!=='' ?{color:`${productJson[0].proC.s}`}:{color:'#fff'}">
-                {{pageData.remarks.privacyText}}
-            </div>
+      <div class="textBox">
+        <div class="input">
+          <input type="text" maxlength="11" v-model="loginForm.phone" placeholder="联通手机号" />
         </div>
-        <!-- 订购按钮 -->
-        <div class="buyBox" v-if="pageData.remarks.isBuy === '1'">
-            <div v-if="productJson.length>0 && productJson[0].btnUrl!=='' && productJson[0].productV==='2'"
-                class="btnImg" @click="btnClick()">
-                <img :src="productJson[0].btnUrl" alt="">
-            </div>
-            <div v-else class="btn" @click="btnClick()"
-                :style="pageData.remarks.btnText.length<=7?{
+        <div class="input">
+          <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码" maxlength="6" />
+          <span class="getcode" :class="{ code: 1, number: codeState.state }" @click="getCode()">{{ codeState.state ? codeState.time + "s" : "获取验证码" }}</span>
+        </div>
+      </div>
+      <div class="privacyBox">
+        <van-checkbox v-model="checked" checked-color="#fc8940">
+          <div :style="productJson.length>0 && productJson[0].proC.s!==''  ?{color:`${productJson[0].proC.s}`}:{color:'#000'}">
+            <p style="margin: 0; padding: 0">我已阅读并同意
+            </p>
+          </div>
+        </van-checkbox>
+        <span class="span" :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}" @click="$emit('hideClick')">《隐私声明》</span>
+        <span class="span" :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}" @click="$emit('ruleClick')">《产品说明》</span>
+      </div>
+      <div class="tips" :style="productJson.length>0 && productJson[0].proC.s!=='' ?{color:`${productJson[0].proC.s}`}:{color:'#fff'}">
+        {{pageData.remarks.privacyText}}
+      </div>
+    </div>
+    <!-- 订购按钮 -->
+    <div class="buyBox" v-if="pageData.remarks.isBuy === '1'">
+      <div v-if="productJson.length>0 && productJson[0].btnUrl!=='' && productJson[0].productV==='2'" class="btnImg" @click="btnClick()">
+        <img :src="productJson[0].btnUrl" alt="">
+      </div>
+      <div v-else class="btn" @click="btnClick()" :style="pageData.remarks.btnText.length<=7?{
           'background-image': `linear-gradient(${pageData.mainProduct.themeColor[0]},${pageData.mainProduct.themeColor[1]})`,
         }:{'background-image': `linear-gradient(${pageData.mainProduct.themeColor[0]},${pageData.mainProduct.themeColor[1]})`,'width':345+'px'}">
-                {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
-                <div class="originalPrice" :style="{ color: pageData.mainProduct.bgColor[2] }">
-                    <s>{{ pageData.mainProduct.originalPrice }}元/月</s>
-                </div>
-            </div>
-            <div class="text"
-                :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
-                <span
-                    :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
-            </div>
+        {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
+        <div class="originalPrice" :style="{ color: pageData.mainProduct.bgColor[2] }">
+          <s>{{ pageData.mainProduct.originalPrice }}元/月</s>
         </div>
+      </div>
+      <div class="text" :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
+        <span :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-    import {
-        getNewCode
-    } from '../../../api'
-    import {
-    Dialog
-    } from "vant";
-    export default {
-        data() {
-            return {
-                imgUrl: process.env.VUE_APP_IMGS_URL,
-                productJson: [],
-                checked: false,
-                times: 0,
-                loginForm: {
-                    phone: '',
-                    vcode: "",
-                },
-                codeState: {
-                    state: false,
-                    time: 60,
-                    task: null,
-                },
-            }
-        },
-        props: {
-            pageData: Object
-        },
-        created() {
-            if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne!==null) {
-                this.productJson = this.pageData.mainProduct.cacheSeatOne
-            }
-            if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
-                .privacy !==
-                null) {
-                if (this.pageData.remarks.privacy === '1') {
-                    this.checked = true
-                }
-            }
-            let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
-                .remarks.orderNum) : 0
-            let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
-                .remarks.orderAdd) : 1
-            let now = new Date().getTime();
-            let times = (now - 1600476800000) / 180000;
-            this.times = String(Math.ceil(times * add) + start)
-        },
-        mounted() {
-            setTimeout(() => {
-                let phone = localStorage.getItem('phone')
-                if (phone) {
-                    this.loginForm.phone = phone
-                }
-            }, 1000)
-        },
-        methods: {
-            btnClick() {
-                if (this.checked === false) {
-                    this.$toast.fail("请先勾选隐私声明");
-                } else {
-                    let {
-                        phone,
-                        vcode
-                    } = this.loginForm;
-                    if (!/^1[23456789]\d{9}$/.test(phone)) {
-                        return this.$toast("请输入正确手机号");
-                    }
-                    if (!vcode) {
-                        return this.$toast("请输入验证码");
-                    }
-                    this.$emit("btnClick", this.loginForm);
-                    this.loginForm = {}
-                }
-            },
-            checkVcode() {
-                if (this.loginForm.vcode.length > 6) {
-                    this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
-                }
-            },
-            getCode() {
-                if (this.codeState.state) return;
-                let {
-                    phone
-                } = this.loginForm
-                if (!/^1[23456789]\d{9}$/.test(phone)) {
-                    return this.$toast("请输入正确手机号");
-                }
-                    let str = phone.slice(0,3)
-                    let str2 =  phone.slice(0,4)
-                    let number = this.$store.state.fictitious.split(',')
-                    let isDialog = true
-                    if(number !== ''){
-                      number.forEach(element => {
-                        if(element===str || element===str2){
-                           isDialog = false
-                        }
-                      });
-                    }
-                    if(isDialog === false){
-                        Dialog({
-                          message: '您的号码为虚拟运营商号码，不支持办理此业务',
-                          theme: 'round-button',
-                          })
-                      return false
-                    }
-                if (this.checked === false) {
-                    return this.$toast.fail("请先勾选隐私声明");
-                }
-                let params = {
-                    cpid: this.pageData.mainProduct.cpid,
-                    spid: this.pageData.mainProduct.spid,
-                    type: '',
-                    userid: phone
-                }
-                getNewCode(params).then(res => {
-                    if (res.code === 10000) {
-                        this.$toast("验证码已发送");
-                        this.codeState.state = true;
-                        this.codeState.task = setInterval(() => {
-                            if (this.codeState.time <= 0) {
-                                clearInterval(this.codeState.task);
-                                this.codeState.task = null;
-                                this.codeState.state = false;
-                                this.codeState.time = 60;
-                            } else {
-                                this.codeState.time--;
-                            }
-                        }, 1000);
-                        this.$store.commit("setUser", {
-                            userid: res.data,
-                            phone: this.loginForm.phone,
-                        });
-                    }
-
-                }, res => {
-                    this.$toast(res.message);
-                })
+import {
+  getNewCode
+} from '../../../api'
+import {
+  Dialog
+} from "vant";
+export default {
+  data () {
+    return {
+      imgUrl: process.env.VUE_APP_IMGS_URL,
+      productJson: [],
+      checked: false,
+      times: 0,
+      loginForm: {
+        phone: '',
+        vcode: "",
+      },
+      codeState: {
+        state: false,
+        time: 60,
+        task: null,
+      },
+    }
+  },
+  props: {
+    pageData: Object
+  },
+  created () {
+    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
+      this.productJson = this.pageData.mainProduct.cacheSeatOne
+    }
+    if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
+      .privacy !==
+      null) {
+      if (this.pageData.remarks.privacy === '1') {
+        this.checked = true
+      }
+    }
+    let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
+      .remarks.orderNum) : 0
+    let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
+      .remarks.orderAdd) : 1
+    let now = new Date().getTime();
+    let times = (now - 1600476800000) / 180000;
+    this.times = String(Math.ceil(times * add) + start)
+  },
+  mounted () {
+    setTimeout(() => {
+      let phone = localStorage.getItem('phone')
+      if (phone) {
+        this.loginForm.phone = phone
+      }
+    }, 1000)
+  },
+  methods: {
+    btnClick () {
+      if (this.checked === false) {
+        this.$toast.fail("请先勾选隐私声明");
+      } else {
+        let {
+          phone,
+          vcode
+        } = this.loginForm;
+        if (!/^1[23456789]\d{9}$/.test(phone)) {
+          return this.$toast("请输入正确手机号");
+        }
+        if (!vcode) {
+          return this.$toast("请输入验证码");
+        }
+        this.$emit("btnClick", this.loginForm);
+        this.loginForm = {}
+      }
+    },
+    checkVcode () {
+      if (this.loginForm.vcode.length > 6) {
+        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
+      }
+    },
+    getCode () {
+      if (this.codeState.state) return;
+      let {
+        phone
+      } = this.loginForm
+      if (!/^1[23456789]\d{9}$/.test(phone)) {
+        return this.$toast("请输入正确手机号");
+      }
+      let str = phone.slice(0, 3)
+      let str2 = phone.slice(0, 4)
+      let number = this.$store.state.fictitious.split(',')
+      let isDialog = true
+      if (number !== '') {
+        number.forEach(element => {
+          if (element === str || element === str2) {
+            isDialog = false
+          }
+        });
+      }
+      if (isDialog === false) {
+        Dialog({
+          message: '您的号码为虚拟运营商号码，不支持办理此业务',
+          theme: 'round-button',
+        })
+        return false
+      }
+      if (this.checked === false) {
+        return this.$toast.fail("请先勾选隐私声明");
+      }
+      let params = {
+        cpid: this.pageData.mainProduct.cpid,
+        spid: this.pageData.mainProduct.spid,
+        type: '',
+        userid: phone
+      }
+      getNewCode(params).then(res => {
+        if (res.code === 10000) {
+          this.$toast("验证码已发送");
+          this.codeState.state = true;
+          this.codeState.task = setInterval(() => {
+            if (this.codeState.time <= 0) {
+              clearInterval(this.codeState.task);
+              this.codeState.task = null;
+              this.codeState.state = false;
+              this.codeState.time = 60;
+            } else {
+              this.codeState.time--;
             }
+          }, 1000);
+          this.$store.commit("setUser", {
+            userid: res.data,
+            phone: this.loginForm.phone,
+          });
         }
 
+      }, res => {
+        this.$toast(res.message);
+      })
     }
+  }
+
+}
 </script>
 
 <style lang="scss">
-    .jianCol {
-
-        // 产品配图样式
-        .matchBanner {
-            margin: 0 auto;
-            margin-top: -8px;
-            width: 690px;
-            padding: 70px 35px 90px 35px;
-            box-sizing: border-box;
-            border-radius: 20px;
-            border-width: 1px;
-            border-style: solid;
-
-            .matchImage {
-                width: 100%;
-                height: 134px;
-                background-size: 100%;
-                background-repeat: no-repeat;
-            }
+.jianCol {
+  // 产品配图样式
+  .matchBanner {
+    margin: 0 auto;
+    margin-top: -8px;
+    width: 690px;
+    padding: 70px 35px 90px 35px;
+    box-sizing: border-box;
+    border-radius: 20px;
+    border-width: 1px;
+    border-style: solid;
+    position: relative;
+    z-index: 3;
 
-            .textBox {
-                // width: 750px;
-                // padding: 0 50px;
-                box-sizing: border-box;
+    .matchImage {
+      width: 100%;
+      height: 134px;
+      background-size: 100%;
+      background-repeat: no-repeat;
+    }
 
-                .input {
-                    width: 100%;
-                    height: 80px;
-                    background: #FFFFFF;
-                    border-radius: 10px;
-                    margin-top: 25px;
-                    opacity: 0.5;
-                    display: flex;
-                    flex-direction: row;
-                    padding: 0 15px;
-                    box-sizing: border-box;
-                    position: relative;
+    .textBox {
+      // width: 750px;
+      // padding: 0 50px;
+      box-sizing: border-box;
 
-                    input {
-                        margin: 0;
-                        padding: 0;
-                        border: none;
-                        outline: none;
-                        width: 70%;
-                        height: 100%;
-                        line-height: 80px;
-                        font-size: 34px;
-                        font-family: PingFang SC;
-                        font-weight: 500;
-                        color: #000;
-                    }
+      .input {
+        width: 100%;
+        height: 80px;
+        background: #ffffff;
+        border-radius: 10px;
+        margin-top: 25px;
+        opacity: 0.5;
+        display: flex;
+        flex-direction: row;
+        padding: 0 15px;
+        box-sizing: border-box;
+        position: relative;
 
-                    .getcode {
-                        font-size: 34px;
-                        font-family: PingFang SC;
-                        font-weight: bold;
-                        color: #0D0D0D;
-                        position: absolute;
-                        right: 20px;
-                        bottom: 24px;
-                    }
-                }
-            }
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 70%;
+          height: 100%;
+          line-height: 80px;
+          font-size: 34px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #000;
         }
 
-        @keyframes scale {
-            from {
-                transform: scale(1);
-            }
-
-            to {
-                transform: scale(0.8);
-            }
+        .getcode {
+          font-size: 34px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #0d0d0d;
+          position: absolute;
+          right: 20px;
+          bottom: 24px;
         }
+      }
+    }
+  }
 
-        .buyBox {
-            margin-top: -48px;
-            padding: 0 25px;
+  @keyframes scale {
+    from {
+      transform: scale(1);
+    }
 
-            .btnImg {
-                width: 387px;
-                height: 114px;
-                margin: 0 auto;
-                border-radius: 50px;
-                line-height: 114px;
-                font-size: 48px;
-                font-weight: bold;
-                color: #ffffff;
-                text-align: center;
-                text-shadow: 2px 2px #1b1414;
-                animation-name: scale;
-                animation-duration: 0.3s;
-                animation-timing-function: ease-in-out;
-                animation-iteration-count: infinite;
-                animation-direction: alternate-reverse;
-                position: relative;
+    to {
+      transform: scale(0.8);
+    }
+  }
 
-                img {
-                    width: auto;
-                    height: 100%;
-                }
-            }
+  .buyBox {
+    margin-top: -48px;
+    padding: 0 25px;
+    position: relative;
+    z-index: 3;
 
-            .btn {
-                width: 387px;
-                height: 100px;
-                margin: 0 auto;
-                line-height: 100px;
-                border-radius: 50px;
-                font-size: 48px;
-                font-weight: bold;
-                color: #ffffff;
-                text-align: center;
-                text-shadow: 2px 2px #1b1414;
-                animation-name: scale;
-                animation-duration: 0.3s;
-                animation-timing-function: ease-in-out;
-                animation-iteration-count: infinite;
-                animation-direction: alternate-reverse;
-                position: relative;
+    .btnImg {
+      width: 387px;
+      height: 114px;
+      margin: 0 auto;
+      border-radius: 50px;
+      line-height: 114px;
+      font-size: 48px;
+      font-weight: bold;
+      color: #ffffff;
+      text-align: center;
+      text-shadow: 2px 2px #1b1414;
+      animation-name: scale;
+      animation-duration: 0.3s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate-reverse;
+      position: relative;
 
-                .originalPrice {
-                    text-shadow: 0px 0px #1b1414;
-                    width: 120px;
-                    height: 50px;
-                    line-height: 50px;
-                    text-align: center;
-                    position: absolute;
-                    top: -25px;
-                    left: 0;
-                    border-top-left-radius: 25px;
-                    border-top-right-radius: 25px;
-                    border-bottom-left-radius: 25px;
-                    background-color: #fef5e4;
-                    color: #89271a;
-                    font-size: 16px;
-                }
-            }
+      img {
+        width: auto;
+        height: 100%;
+      }
+    }
 
-            .text {
-                // color: #0d0d0d;
-                line-height: 50px;
-                font-size: 26px;
-                // font-weight: bold;
-                text-align: center;
+    .btn {
+      width: 387px;
+      height: 100px;
+      margin: 0 auto;
+      line-height: 100px;
+      border-radius: 50px;
+      font-size: 48px;
+      font-weight: bold;
+      color: #ffffff;
+      text-align: center;
+      text-shadow: 2px 2px #1b1414;
+      animation-name: scale;
+      animation-duration: 0.3s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate-reverse;
+      position: relative;
 
-                span {
-                    font-weight: bold;
-                }
-            }
-        }
+      .originalPrice {
+        text-shadow: 0px 0px #1b1414;
+        width: 120px;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        position: absolute;
+        top: -25px;
+        left: 0;
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        border-bottom-left-radius: 25px;
+        background-color: #fef5e4;
+        color: #89271a;
+        font-size: 16px;
+      }
+    }
 
-        .privacyBox {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            margin-top: 49px;
-            font-size: 22px;
+    .text {
+      // color: #0d0d0d;
+      line-height: 50px;
+      font-size: 26px;
+      // font-weight: bold;
+      text-align: center;
 
-            .van-checkbox {
-                text-align: right;
-                display: flex;
-                justify-content: flex-end;
-            }
+      span {
+        font-weight: bold;
+      }
+    }
+  }
 
-            .span {
-                display: flex;
-                align-items: center;
-            }
-        }
+  .privacyBox {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 49px;
+    font-size: 22px;
 
-        .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;
-        }
+    .van-checkbox {
+      text-align: right;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .span {
+      display: flex;
+      align-items: center;
     }
+  }
+
+  .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;
+  }
+}
 </style>

purchase_H5/src/templates/templateColor/components/tongRen.vue

@@ -1,282 +1,274 @@
 <template>
-    <!-- 统一认证组件 -->
-    <div class="tongCol">
-        <div class="matchBanner"
-            :style="{ backgroundColor: pageData.mainProduct.bgColor[2], borderColor: pageData.mainProduct.bgColor[3]}">
-            <div class="matchImage" :style="{ backgroundImage: `url(${imgUrl}${ pageData.mainProduct.guidancePic.p})`}">
-            </div>
-            <div class="privacyBox">
-                <van-checkbox v-model="checked" checked-color="#fc8940">
-                    <div
-                        :style="productJson.length>0 && productJson[0].proC.s!==''  ?{color:`${productJson[0].proC.s}`}:{color:'#000'}">
-                        <p style="margin: 0; padding: 0">我已阅读并同意
-                        </p>
-                    </div>
-                </van-checkbox>
-                <span class="span"
-                    :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}"
-                    @click="$emit('hideClick')">《隐私声明》</span>
-                <span class="span"
-                    :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}"
-                    @click="$emit('ruleClick')">《产品说明》</span>
-            </div>
-            <div class="tips"
-                :style="productJson.length>0 && productJson[0].proC.s!=='' ?{color:`${productJson[0].proC.s}`}:{color:'#fff'}">
-                {{pageData.remarks.privacyText}}
-            </div>
-        </div>
-        <!-- 订购按钮 -->
-        <div class="buyBox" v-if="pageData.remarks.isBuy === '1'">
-            <div v-if="productJson.length>0 && productJson[0].btnUrl!=='' && productJson[0].productV==='2'"
-                class="btnImg" @click="btnClick()">
-                <img :src="productJson[0].btnUrl" alt="">
-            </div>
-            <div v-else class="btn" @click="btnClick()"
-                :style="pageData.remarks.btnText.length<=7?{
+  <!-- 统一认证组件 -->
+  <div class="tongCol">
+    <div class="matchBanner" :style="{ backgroundColor: pageData.mainProduct.bgColor[2], borderColor: pageData.mainProduct.bgColor[3]}">
+      <div class="matchImage" :style="{ backgroundImage: `url(${imgUrl}${ pageData.mainProduct.guidancePic.p})`}">
+      </div>
+      <div class="privacyBox">
+        <van-checkbox v-model="checked" checked-color="#fc8940">
+          <div :style="productJson.length>0 && productJson[0].proC.s!==''  ?{color:`${productJson[0].proC.s}`}:{color:'#000'}">
+            <p style="margin: 0; padding: 0">我已阅读并同意
+            </p>
+          </div>
+        </van-checkbox>
+        <span class="span" :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}" @click="$emit('hideClick')">《隐私声明》</span>
+        <span class="span" :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}" @click="$emit('ruleClick')">《产品说明》</span>
+      </div>
+      <div class="tips" :style="productJson.length>0 && productJson[0].proC.s!=='' ?{color:`${productJson[0].proC.s}`}:{color:'#fff'}">
+        {{pageData.remarks.privacyText}}
+      </div>
+    </div>
+    <!-- 订购按钮 -->
+    <div class="buyBox" v-if="pageData.remarks.isBuy === '1'">
+      <div v-if="productJson.length>0 && productJson[0].btnUrl!=='' && productJson[0].productV==='2'" class="btnImg" @click="btnClick()">
+        <img :src="productJson[0].btnUrl" alt="">
+      </div>
+      <div v-else class="btn" @click="btnClick()" :style="pageData.remarks.btnText.length<=7?{
           'background-image': `linear-gradient(${pageData.mainProduct.themeColor[0]},${pageData.mainProduct.themeColor[1]})`,
         }:{'background-image': `linear-gradient(${pageData.mainProduct.themeColor[0]},${pageData.mainProduct.themeColor[1]})`,'width':345+'px'}">
-                {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
-                <div class="originalPrice" style="color: #89271a">
-                    <span>{{ pageData.mainProduct.originalPrice }}元/月</span>
-                </div>
-            </div>
-            <div class="text"
-                :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
-                <span
-                    :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
-            </div>
+        {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
+        <div class="originalPrice" style="color: #89271a">
+          <span>{{ pageData.mainProduct.originalPrice }}元/月</span>
         </div>
+      </div>
+      <div class="text" :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
+        <span :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-                imgUrl: process.env.VUE_APP_IMGS_URL,
-                productJson: [],
-                checked: false,
-                times: 0,
-            }
-        },
-        props: {
-            pageData: Object
-        },
-        created() {
-            if (this.pageData.mainProduct.cacheSeatOne  && this.pageData.mainProduct.cacheSeatOne!==null) {
-                this.productJson = this.pageData.mainProduct.cacheSeatOne
-            }
-            if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
-                .privacy !==
-                null) {
-                if (this.pageData.remarks.privacy === '1') {
-                    this.checked = true
-                }
-            }
-            let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
-                .remarks.orderNum) : 0
-            let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
-                .remarks.orderAdd) : 1
-            let now = new Date().getTime();
-            let times = (now - 1600476800000) / 180000;
-            this.times = String(Math.ceil(times * add) + start)
-        },
-        methods: {
-            btnClick() {
-                if (this.checked === false) {
-                    this.$toast.fail("请先勾选隐私声明");
-                } else {
-                    this.$emit("btnClick");
-                }
-            }
-        }
-
+export default {
+  data () {
+    return {
+      imgUrl: process.env.VUE_APP_IMGS_URL,
+      productJson: [],
+      checked: false,
+      times: 0,
+    }
+  },
+  props: {
+    pageData: Object
+  },
+  created () {
+    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
+      this.productJson = this.pageData.mainProduct.cacheSeatOne
+    }
+    if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
+      .privacy !==
+      null) {
+      if (this.pageData.remarks.privacy === '1') {
+        this.checked = true
+      }
     }
+    let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
+      .remarks.orderNum) : 0
+    let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
+      .remarks.orderAdd) : 1
+    let now = new Date().getTime();
+    let times = (now - 1600476800000) / 180000;
+    this.times = String(Math.ceil(times * add) + start)
+  },
+  methods: {
+    btnClick () {
+      if (this.checked === false) {
+        this.$toast.fail("请先勾选隐私声明");
+      } else {
+        this.$emit("btnClick");
+      }
+    }
+  }
+
+}
 </script>
 
 <style lang="scss">
-    .tongCol {
-
-        // 产品配图样式
-        .matchBanner {
-            margin: 0 auto;
-            margin-top: -8px;
-            width: 690px;
-            padding: 70px 35px 90px 35px;
-            box-sizing: border-box;
-            border-radius: 20px;
-            border-width: 1px;
-            border-style: solid;
+.tongCol {
+  // 产品配图样式
+  .matchBanner {
+    margin: 0 auto;
+    margin-top: -8px;
+    width: 690px;
+    padding: 70px 35px 90px 35px;
+    box-sizing: border-box;
+    border-radius: 20px;
+    border-width: 1px;
+    border-style: solid;
+    position: relative;
+    z-index: 3;
 
-            .matchImage {
-                width: 100%;
-                height: 134px;
-                background-size: 100%;
-                background-repeat: no-repeat;
-            }
-
-            .textBox {
-                // width: 750px;
-                // padding: 0 50px;
-                box-sizing: border-box;
+    .matchImage {
+      width: 100%;
+      height: 134px;
+      background-size: 100%;
+      background-repeat: no-repeat;
+    }
 
-                .input {
-                    width: 100%;
-                    height: 80px;
-                    background: #FFFFFF;
-                    border-radius: 10px;
-                    margin-top: 25px;
-                    opacity: 0.5;
-                    display: flex;
-                    flex-direction: row;
-                    padding: 0 15px;
-                    box-sizing: border-box;
-                    position: relative;
+    .textBox {
+      // width: 750px;
+      // padding: 0 50px;
+      box-sizing: border-box;
 
-                    input {
-                        margin: 0;
-                        padding: 0;
-                        border: none;
-                        outline: none;
-                        width: 70%;
-                        height: 100%;
-                        line-height: 80px;
-                        font-size: 34px;
-                        font-family: PingFang SC;
-                        font-weight: 500;
-                        color: #000;
-                    }
+      .input {
+        width: 100%;
+        height: 80px;
+        background: #ffffff;
+        border-radius: 10px;
+        margin-top: 25px;
+        opacity: 0.5;
+        display: flex;
+        flex-direction: row;
+        padding: 0 15px;
+        box-sizing: border-box;
+        position: relative;
 
-                    .getcode {
-                        font-size: 34px;
-                        font-family: PingFang SC;
-                        font-weight: bold;
-                        color: #0D0D0D;
-                        position: absolute;
-                        right: 20px;
-                        bottom: 24px;
-                    }
-                }
-            }
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 70%;
+          height: 100%;
+          line-height: 80px;
+          font-size: 34px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #000;
         }
 
-        @keyframes scale {
-            from {
-                transform: scale(1);
-            }
-
-            to {
-                transform: scale(0.8);
-            }
+        .getcode {
+          font-size: 34px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #0d0d0d;
+          position: absolute;
+          right: 20px;
+          bottom: 24px;
         }
+      }
+    }
+  }
 
-        .buyBox {
-            margin-top: -48px;
-            padding: 0 25px;
+  @keyframes scale {
+    from {
+      transform: scale(1);
+    }
 
-            .btnImg {
-                width: 387px;
-                height: 114px;
-                margin: 0 auto;
-                border-radius: 50px;
-                line-height: 114px;
-                font-size: 48px;
-                font-weight: bold;
-                color: #ffffff;
-                text-align: center;
-                text-shadow: 2px 2px #1b1414;
-                animation-name: scale;
-                animation-duration: 0.3s;
-                animation-timing-function: ease-in-out;
-                animation-iteration-count: infinite;
-                animation-direction: alternate-reverse;
-                position: relative;
+    to {
+      transform: scale(0.8);
+    }
+  }
 
-                img {
-                    width: auto;
-                    height: 100%;
-                }
-            }
+  .buyBox {
+    margin-top: -48px;
+    padding: 0 25px;
+    position: relative;
+    z-index: 3;
 
-            .btn {
-                width: 387px;
-                height: 100px;
-                margin: 0 auto;
-                line-height: 100px;
-                border-radius: 50px;
-                font-size: 48px;
-                font-weight: bold;
-                color: #ffffff;
-                text-align: center;
-                text-shadow: 2px 2px #1b1414;
-                animation-name: scale;
-                animation-duration: 0.3s;
-                animation-timing-function: ease-in-out;
-                animation-iteration-count: infinite;
-                animation-direction: alternate-reverse;
-                position: relative;
+    .btnImg {
+      width: 387px;
+      height: 114px;
+      margin: 0 auto;
+      border-radius: 50px;
+      line-height: 114px;
+      font-size: 48px;
+      font-weight: bold;
+      color: #ffffff;
+      text-align: center;
+      text-shadow: 2px 2px #1b1414;
+      animation-name: scale;
+      animation-duration: 0.3s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate-reverse;
+      position: relative;
 
-                .originalPrice {
-                    text-shadow: 0px 0px #1b1414;
-                    width: 120px;
-                    height: 50px;
-                    line-height: 50px;
-                    text-align: center;
-                    position: absolute;
-                    top: -25px;
-                    left: 0;
-                    border-top-left-radius: 25px;
-                    border-top-right-radius: 25px;
-                    border-bottom-left-radius: 25px;
-                    background-color: #fef5e4;
-                    color: #89271a;
-                    font-size: 16px;
-                }
-            }
+      img {
+        width: auto;
+        height: 100%;
+      }
+    }
 
-            .text {
-                // color: #0d0d0d;
-                line-height: 50px;
-                font-size: 26px;
-                // font-weight: bold;
-                text-align: center;
+    .btn {
+      width: 387px;
+      height: 100px;
+      margin: 0 auto;
+      line-height: 100px;
+      border-radius: 50px;
+      font-size: 48px;
+      font-weight: bold;
+      color: #ffffff;
+      text-align: center;
+      text-shadow: 2px 2px #1b1414;
+      animation-name: scale;
+      animation-duration: 0.3s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate-reverse;
+      position: relative;
 
-                span {
-                    font-weight: bold;
-                }
-            }
-        }
+      .originalPrice {
+        text-shadow: 0px 0px #1b1414;
+        width: 120px;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        position: absolute;
+        top: -25px;
+        left: 0;
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        border-bottom-left-radius: 25px;
+        background-color: #fef5e4;
+        color: #89271a;
+        font-size: 16px;
+      }
+    }
 
-        .privacyBox {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            margin-top: 49px;
-            font-size: 22px;
+    .text {
+      // color: #0d0d0d;
+      line-height: 50px;
+      font-size: 26px;
+      // font-weight: bold;
+      text-align: center;
 
-            .van-checkbox {
-                text-align: right;
-                display: flex;
-                justify-content: flex-end;
-            }
+      span {
+        font-weight: bold;
+      }
+    }
+  }
 
-            .span {
-                display: flex;
-                align-items: center;
-            }
-        }
+  .privacyBox {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 49px;
+    font-size: 22px;
 
-        .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;
-        }
+    .van-checkbox {
+      text-align: right;
+      display: flex;
+      justify-content: flex-end;
     }
+
+    .span {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .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;
+  }
+}
 </style>

purchase_H5/src/templates/templateColor/index.scss

@@ -1,431 +1,474 @@
 .tempalteColor {
-    background-color: #000;
-    color: #333333;
-    min-height: 100vh;
-    font-family: PingFang SC;
+  background-color: #000;
+  color: #333333;
+  min-height: 100vh;
+  font-family: PingFang SC;
+  position: relative;
+  padding-bottom: 20px;
+  width: 100vw;
+  overflow-x: hidden;
+
+  .van-icon {
+    background-color: #f6f6f6;
+    border: 1px solid #9e9e9e
+  }
+
+  .iframe {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 9999;
+  }
+
+  .bannerBox {
+    width: 100%;
+    height: auto;
+    background-size: 100%;
+    // border-radius: 0 0 60px 60px;
+    background-repeat: no-repeat;
     position: relative;
-    padding-bottom: 20px;
-    width: 100vw;
-    overflow-x: hidden;
+    overflow: hidden;
+    display: inline-flex;
+
+    .banner {
+      width: 100%;
+      height: 100%;
+    }
 
-    .van-icon {
-        background-color: #f6f6f6;
-        border: 1px solid #9e9e9e
+    .svgBanner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
     }
 
-    .iframe {
-        position: fixed;
+    .banner2 {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+
+      img {
         width: 100%;
         height: 100%;
-        left: 0;
-        top: 0;
-        z-index: 9999;
+      }
     }
 
-    .bannerBox {
-        width: 100%;
-        height: auto;
-        background-size: 100%;
-        // border-radius: 0 0 60px 60px;
-        background-repeat: no-repeat;
-        position: relative;
+    .activity {
+      width: 180px;
+      height: 140px;
+      position: absolute;
+      right: 10px;
+      bottom: 0;
+      z-index: 4;
+    }
 
-        .banner {
-            width: 100%;
-            height: 100%;
-        }
-        .svgBanner{
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-        }   
-        .banner2{
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 2;
-            img{
-                width: 100%;
-                height: 100%;
-            }
-        }   
-
-        .activity {
-            position: absolute;
-            right: 10px;
-            width: 180px;
-            height: 140px;
-            top: 260px;
-            z-index: 99;
-        }
+    // 主banner 动画效果  从105% 缩放到100%
+    .cartoon1 {
+      animation-name: scale1;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
     }
 
-    .rule {
-        position: fixed;
-        right: 0;
-        top: 81px;
-        width: 170px;
-        height: 76px;
-        background: #F6F5F5;
-        box-shadow: 0px 0px 12px 0px #ACACAC;
-        opacity: 0.5;
-        border-radius: 30px 0px 0px 30px;
-        font-size: 24px;
-        color: #0D0D0D;
-        line-height: 75px;
-        display: flex;
-        justify-content: space-around;
-        z-index: 5;
-
-        .icon {
-            margin: 20px 0 20px 20px;
-            background: url("../assets/guize.png");
-            width: 36px;
-            height: 36px;
-            background-size: 100%;
-            background-repeat: no-repeat;
-        }
+    @keyframes scale1 {
+      from {
+        transform: scaleX(1.1);
+      }
 
-        .text {
-            width: 150px;
-            text-align: center;
-        }
+      to {
+        transform: scaleX(1);
+      }
     }
 
-    .tucaoModal {
-        position: fixed;
-        bottom: 250px;
-        right: 0;
-        width: 120px;
-        height: 60px;
-        background: #141517;
-        opacity: 0.5;
-        border-radius: 30px 0px 0px 30px;
-        font-size: 24px;
-        color: #FFFFFF;
-        line-height: 60px;
-        display: flex;
-        justify-content: space-around;
-        z-index: 1;
-
-        .icon {
-            margin: 18px 0 18px 20px;
-            background: url("../assets/tucao.png");
-            width: 24px;
-            height: 24px;
-            background-size: 100%;
-        }
+    // 顶层banner 从100%  放大到105%
+    .cartoon2 {
+      animation-name: scale2;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
     }
 
+    @keyframes scale2 {
+      from {
+        transform: scale(1);
+      }
 
-    .memBox {
-        width: 690px;
-        height: 100px;
-        background: #ffffff;
-        font-size: 34px;
-        font-weight: bold;
-        color: #0d0d0d;
-        line-height: 100px;
-        padding-left: 40px;
-        border-radius: 20px;
-        margin: 0 auto;
-        margin-top: 30px;
-        box-sizing: border-box;
+      to {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .rule {
+    position: fixed;
+    right: 0;
+    top: 81px;
+    width: 170px;
+    height: 76px;
+    background: #F6F5F5;
+    box-shadow: 0px 0px 12px 0px #ACACAC;
+    opacity: 0.5;
+    border-radius: 30px 0px 0px 30px;
+    font-size: 24px;
+    color: #0D0D0D;
+    line-height: 75px;
+    display: flex;
+    justify-content: space-around;
+    z-index: 5;
+
+    .icon {
+      margin: 20px 0 20px 20px;
+      background: url("../assets/guize.png");
+      width: 36px;
+      height: 36px;
+      background-size: 100%;
+      background-repeat: no-repeat;
+    }
 
+    .text {
+      width: 150px;
+      text-align: center;
+    }
+  }
+
+  .tucaoModal {
+    position: fixed;
+    bottom: 250px;
+    right: 0;
+    width: 120px;
+    height: 60px;
+    background: #141517;
+    opacity: 0.5;
+    border-radius: 30px 0px 0px 30px;
+    font-size: 24px;
+    color: #FFFFFF;
+    line-height: 60px;
+    display: flex;
+    justify-content: space-around;
+    z-index: 5;
+
+    .icon {
+      margin: 18px 0 18px 20px;
+      background: url("../assets/tucao.png");
+      width: 24px;
+      height: 24px;
+      background-size: 100%;
     }
+  }
+
+
+  .memBox {
+    width: 690px;
+    height: 100px;
+    background: #ffffff;
+    font-size: 34px;
+    font-weight: bold;
+    color: #0d0d0d;
+    line-height: 100px;
+    padding-left: 40px;
+    border-radius: 20px;
+    margin: 0 auto;
+    margin-top: 30px;
+    box-sizing: border-box;
+
+  }
+
+  .probox {
+    margin: 20px auto;
+    width: 690px;
+    border-radius: 20px;
+    box-shadow: 0px 0px 2px 0px #ACACAC;
+    height: 140px;
+    background-size: 100% 100%;
+
+  }
+
+  .descbox {
+    margin: 20px auto;
+    width: 700px;
+    //height: 470px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    padding: 15px 0;
+    border-radius: 20px;
+    box-sizing: border-box;
+    // border-width: 1px;
+    // border-style: solid;
+    position: relative;
+
 
-    .probox {
-        margin: 20px auto;
-        width: 690px;
-        border-radius: 20px;
-        box-shadow: 0px 0px 2px 0px #ACACAC;
-        height: 140px;
-        background-size: 100% 100%;
+    .titleImg {
+      width: 50%;
+      height: 25px;
+      margin: 0 auto;
+      position: relative;
 
+      .titleText {
+        width: 50%;
+        height: 25px;
+        line-height: 25px;
+        font-size: 38px;
+        font-weight: bold;
+        position: absolute;
+        left: 25%;
+        top: 0;
+        text-align: center;
+      }
     }
 
-    .descbox {
-        margin: 20px auto;
-        width: 700px;
-        //height: 470px;
-        background-size: 100%;
-        background-repeat: no-repeat;
-        padding: 15px 0;
-        border-radius: 20px;
-        box-sizing: border-box;
-        // border-width: 1px;
-        // border-style: solid;
-        position: relative;
 
+    .main {
+      width: 100%;
+      padding-left: 85px;
+      padding-right: 90px;
+      box-sizing: border-box;
+      margin: 0 auto;
+      overflow-y: scroll;
+      // max-height: 500px;
+      word-break: break-all;
+      margin-top: 15px;
+
+      p {
+        font-size: 28px;
+        line-height: 45px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        // opacity: 0.8;
+        width: 100%;
+        padding-left: 100px;
+        position: relative;
+        box-sizing: border-box;
 
-        .titleImg {
-            width: 50%;
-            height: 25px;
-            margin: 0 auto;
-            position: relative;
-
-            .titleText {
-                width: 50%;
-                height: 25px;
-                line-height: 25px;
-                font-size: 38px;
-                font-weight: bold;
-                position: absolute;
-                left: 25%;
-                top: 0;
-                text-align: center;
-            }
+        strong {
+          opacity: 0.8;
+          font-family: PingFang SC;
+          font-weight: bold;
         }
+      }
 
+      p>strong:first-child {
+        display: inline-block;
+        position: absolute;
+        left: 0px;
+        top: 0;
+        font-size: 30px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        margin-right: 20px;
+        opacity: 1;
+      }
+    }
+  }
+
+  .extend {
+    width: 160px;
+    height: 152px;
+    position: fixed;
+    top: 1100px;
+    z-index: 4;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .tabBox {
+    margin: 0 auto;
+    margin-top: 36px;
+    width: 690px;
+    // height: 138px;
+    background: #FFFFFF;
+    border-radius: 20px;
+    display: -webkit-box;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+
+    .tab {
+      width: 160px;
+      margin: 26px 5px;
+
+      img {
+        width: 50px;
+        height: 50px;
+        margin: 0 55px;
+      }
 
-        .main {
-            width: 100%;
-            padding-left: 85px;
-            padding-right: 90px;
-            box-sizing: border-box;
-            margin: 0 auto;
-            overflow-y: scroll;
-            // max-height: 500px;
-            word-break: break-all;
-            margin-top: 15px;
-
-            p {
-                font-size: 28px;
-                line-height: 45px;
-                font-family: PingFang SC;
-                font-weight: 400;
-                // opacity: 0.8;
-                width: 100%;
-                padding-left: 100px;
-                position: relative;
-                box-sizing: border-box;
-
-                strong {
-                    opacity: 0.8;
-                    font-family: PingFang SC;
-                    font-weight: bold;
-                }
-            }
-
-            p>strong:first-child {
-                display: inline-block;
-                position: absolute;
-                left: 0px;
-                top: 0;
-                font-size: 30px;
-                font-family: PingFang SC;
-                font-weight: 800;
-                margin-right: 20px;
-                opacity: 1;
-            }
-        }
+      div {
+        text-align: center;
+        font-size: 24px;
+        font-weight: bold;
+        color: #0D0D0D;
+      }
     }
-    .extend {
-        width: 160px;
-        height: 152px;
-        position: fixed;
-        top: 1100px;
-        z-index: 2;
-
-        img {
-            width: 100%;
-            height: 100%;
-        }
+  }
+
+  .privacy {
+    font-size: 26px;
+    margin-top: 26px;
+    margin-bottom: 41px;
+    text-align: center;
+    text-decoration: underline;
+  }
+
+  .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%);
     }
 
-    .tabBox {
-        margin: 0 auto;
-        margin-top: 36px;
-        width: 690px;
-        // height: 138px;
-        background: #FFFFFF;
-        border-radius: 20px;
-        display: -webkit-box;
-        overflow-x: scroll;
-        -webkit-overflow-scrolling: touch;
-
-        .tab {
-            width: 160px;
-            margin: 26px 5px;
-
-            img {
-                width: 50px;
-                height: 50px;
-                margin: 0 55px;
-            }
-
-            div {
-                text-align: center;
-                font-size: 24px;
-                font-weight: bold;
-                color: #0D0D0D;
-            }
-        }
+    .top {
+      width: 100%;
+      height: 96px;
     }
 
-    .privacy {
-        font-size: 26px;
-        margin-top: 26px;
-        margin-bottom: 41px;
-        text-align: center;
-        text-decoration: underline;
+    .logo {
+      width: 92px;
+      height: 50px;
+      position: absolute;
+      top: 22px;
+      left: 37px;
     }
+  }
+
 
-    .modal {
+  .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;
-        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%);
-        }
+        flex: 1;
+        background-color: transparent;
 
-        .top {
-            width: 100%;
-            height: 96px;
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
         }
+      }
 
-        .logo {
-            width: 92px;
-            height: 50px;
-            position: absolute;
-            top: 22px;
-            left: 37px;
+      .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;
+    }
 
-    .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;
-                }
-            }
-        }
+    .btn-box {
+      display: flex;
+      justify-content: space-between;
 
-        .text-box {
-            font-family: PingFang-SC-Medium;
-            text-align: center;
-            line-height: 55px;
-            font-size: 32px;
-        }
+      .btn {
+        width: 190px;
+        margin-top: 20px;
+        height: 80px;
+        line-height: 80px;
+        border-radius: 40px;
+        font-size: 34px;
+        font-weight: bold;
+        text-align: center;
+      }
 
-        .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 #fdc51b solid;
-                color: #fdc51b;
-                background-color: #ffffff;
-            }
-
-            .right {
-                color: #0d0d0d;
-                background: #fdc51b;
-            }
-        }
+      .left {
+        border: 2px #fdc51b solid;
+        color: #fdc51b;
+        background-color: #ffffff;
+      }
 
-        .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;
-        }
+      .right {
+        color: #0d0d0d;
+        background: #fdc51b;
+      }
     }
 
-    .van-notice-bar {
-        background-color: transparent;
-        padding: 0 0;
-        color: #000;
+    .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;
+    }
+  }
 
-        .van-notice-bar__wrap {
-            margin-top: 17rem;
-        }
+  .van-notice-bar {
+    background-color: transparent;
+    padding: 0 0;
+    color: #000;
 
-        .van-notice-bar__content {
-            background-color: #fff;
-            padding: 10px 30px;
-            border-radius: 30px;
-            opacity: 0.7;
-        }
+    .van-notice-bar__wrap {
+      margin-top: 17rem;
     }
 
-    .van-icon {
-        background-color: #f6f6f6;
-        border: 0 !important;
-        transform: scale(0.75, 0.75);
+    .van-notice-bar__content {
+      background-color: #fff;
+      padding: 10px 30px;
+      border-radius: 30px;
+      opacity: 0.7;
     }
+  }
 
-    .van-checkbox__label {
-        margin-left: 5px;
-    }
-    .van-overlay {
-        z-index: 999 !important;
-      }
+  .van-icon {
+    background-color: #f6f6f6;
+    border: 0 !important;
+    transform: scale(0.75, 0.75);
+  }
+
+  .van-checkbox__label {
+    margin-left: 5px;
+  }
+
+  .van-overlay {
+    z-index: 999 !important;
+  }
 
 }

purchase_H5/src/templates/templateColor/index.vue

@@ -1,23 +1,22 @@
 <!-- 2022-04-06 开发者:韩明亮  user:hanmingliang123-->
 <template>
-  <div id="temp" class="tempalteColor" :style="
-      pageData.mainProduct.bgColor !== null &&
-      pageData.mainProduct.bgColor.length > 0
-        ? { backgroundColor: pageData.mainProduct.bgColor[0] }
-        : { backgroundColor: '#000' }
-    ">
+  <div id="temp" class="tempalteColor" :style="pageData.mainProduct.bgColor !== null &&pageData.mainProduct.bgColor.length > 0? { backgroundColor: pageData.mainProduct.bgColor[0] }: { backgroundColor: '#000' } ">
     <div class="bannerBox" @click="bannerClick">
-      <img class="banner" :src="imgUrl + pageData.mainProduct.bannerPics[0]" alt="" />
-      <div class="banner2" v-if="pageData.mainProduct.bannerPics[2]&& pageData.mainProduct.bannerPics[2]!==''">
-        <img :src="imgUrl + pageData.mainProduct.bannerPics[2]" alt="" />
-      </div>
+      <!-- 底层banner -->
+      <img class="banner" :class="productJson[0].dongHua && productJson[0].dongHua!==''&& productJson[0].dongHua=='1'?'cartoon1':''" :src="imgUrl + pageData.mainProduct.bannerPics[0]" alt="" />
+      <!-- json动图 -->
       <div class="svgBanner">
         <div id="lottie_box"></div>
       </div>
-      <img @click.stop class="activity" v-if="
-          pageData.strategyInfo.activityType !== 0 &&
-          pageData.strategyInfo.activityLogo
-        " :src="`${pageData.strategyInfo.activityLogo}`" @click="onGoLink()" />
+      <!-- 上层png -->
+      <div class="banner2" :class="productJson[0].dongHua && productJson[0].dongHua!==''&& productJson[0].dongHua=='1'?'cartoon2':''" v-if="pageData.mainProduct.bannerPics[2]&& pageData.mainProduct.bannerPics[2]!==''">
+        <img :src="imgUrl + pageData.mainProduct.bannerPics[2]" alt="" />
+      </div>
+      <!-- 顶层png/gif -->
+      <div class="banner2" v-if="pageData.mainProduct.bannerPics[3]&& pageData.mainProduct.bannerPics[3]!==''">
+        <img :src="imgUrl + pageData.mainProduct.bannerPics[3]" alt="" />
+      </div>
+      <img @click.stop class="activity" v-if="pageData.strategyInfo.activityType !== 0 && pageData.strategyInfo.activityLogo" :src="`${pageData.strategyInfo.activityLogo}`" @click="onGoLink()" />
       <!-- 轮播条 -->
       <van-notice-bar v-show="showScroll" scrollable :text="pageData.remarks.zoetropeText" />
     </div>
@@ -109,7 +108,7 @@
     <!-- 遮罩 -->
     <newZheZhao v-if="showZhezhao" isZheZhao="1"></newZheZhao>
     <!-- 退订挽留 -->
-    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false" pageData.strategyInfo.unsubscribeStrategyList.length>0 > 0 >
+    <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>
@@ -129,6 +128,8 @@
     <conceal v-model="showConceal" :pageData="pageData"></conceal>
     <!-- 重复订购引流 -->
     <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
+    <!-- 合约产品退订提示 -->
+    <opOut v-model="opoutShow" @opoutClick="showUnbuy = true"></opOut>
   </div>
 </template>
 
@@ -155,6 +156,7 @@ import tongRen from "./components/tongRen.vue";
 import duanRen from "./components/duanRen.vue";
 import jianRen from "./components/jianRen.vue";
 import unifyColor from "../../components/unifyColor.vue";
+import opOut from "../../components/opOut.vue";
 import { Dialog } from "vant";
 import lottie from 'lottie-web';
 export default {
@@ -179,6 +181,7 @@ export default {
       productJson: [],
       repeatShow: false,
       isBuy: "未订购",
+      opoutShow: false
     };
   },
   components: {
@@ -195,11 +198,12 @@ export default {
     duanRen,
     jianRen,
     unifyColor,
+    opOut
   },
   created () {
     document.title = this.pageData.mainProduct.productName;
     this.phone = this.$route.query.phone;
-    if (this.pageData.mainProduct.cacheSeatOne  && this.pageData.mainProduct.cacheSeatOne!==null) {
+    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
       this.productJson = this.pageData.mainProduct.cacheSeatOne;
     }
   },
@@ -283,7 +287,11 @@ export default {
             this.unBuyDrainageText = drainageRes.data.productName;
             this.unBuyDrainage = true;
           } else {
-            this.showUnbuy = true;
+            if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+              this.opoutShow = true
+            } else {
+              this.showUnbuy = true;
+            }
           }
         }
       } else if (type === "unBUy") {
@@ -301,7 +309,11 @@ export default {
           this.unBuyDrainageText = drainageRes.data.productName;
           this.unBuyDrainage = true;
         } else {
-          this.showUnbuy = true;
+          if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+            this.opoutShow = true
+          } else {
+            this.showUnbuy = true;
+          }
         }
       } else {
         addR.loginClick();
@@ -477,7 +489,11 @@ export default {
     unBuySure () {
       addR.clickUnsubscribe();
       this.unBuyDrainage = false;
-      this.showUnbuy = true;
+      if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+        this.opoutShow = true
+      } else {
+        this.showUnbuy = true
+      }
     },
     getChildData (data) {
       this.isBuy = data;

purchase_H5/src/templates/templateCom/components/tongRen.vue

@@ -157,6 +157,8 @@
         .buyBox {
             margin-top: -48px;
             padding: 0 25px;
+            position: relative;
+            z-index: 3;
 
             .btn {
                 width: 700px;

purchase_H5/src/templates/templateCom/index.scss

@@ -1,420 +1,463 @@
 .templateCom {
-    background-color: #f6f5f5;
-    color: #0d0d0d;
-    min-height: 100vh;
-    font-family: PingFang SC;
-    position: relative;
-    padding-bottom: 20px;
-    width: 100vw;
-    overflow-x: hidden;
+  background-color: #f6f5f5;
+  color: #0d0d0d;
+  min-height: 100vh;
+  font-family: PingFang SC;
+  position: relative;
+  padding-bottom: 20px;
+  width: 100vw;
+  overflow-x: hidden;
+
+  @keyframes scale {
+    from {
+      transform: scale(1);
+    }
 
-    @keyframes scale {
-        from {
-            transform: scale(1);
-        }
+    to {
+      transform: scale(0.8);
+    }
+  }
+
+  .iframe {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 9999;
+  }
+
+  .bannerBox {
+    width: 100%;
+    height: auto;
+    background-size: 100%;
+    // border-radius: 0 0 60px 60px;
+    background-repeat: no-repeat;
+    position: relative;
+    overflow: hidden;
+    display: inline-flex;
 
-        to {
-            transform: scale(0.8);
-        }
+    .banner {
+      width: 100%;
+      height: 100%;
     }
 
-    .iframe {
-        position: fixed;
+    .banner2 {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+
+      img {
         width: 100%;
         height: 100%;
-        left: 0;
-        top: 0;
-        z-index: 9999;
+      }
     }
 
-    .bannerBox {
-        width: 100%;
-        height: auto;
-        background-size: 100%;
-        border-radius: 0 0 60px 60px;
-        background-repeat: no-repeat;
-        position: relative;
-
-        .banner {
-            width: 100%;
-            height: 100%;
-        }
-        .banner2{
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 2;
-            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;
-            top: 260px;
-            z-index: 99;
-        }
+    .svgBanner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
 
-        .extend {
-            width: 160px;
-            height: 152px;
-            position: fixed;
-            top: 640px;
-            z-index: 2;
-
-            img {
-                width: 100%;
-                height: 100%;
-            }
-        }
+    .activity {
+      position: absolute;
+      right: 10px;
+      width: 180px;
+      height: 140px;
+      bottom: 0;
+      z-index: 4;
     }
 
-    .rule {
-        position: fixed;
-        right: 0;
-        top: 30px;
-        width: 220px;
-        height: 76px;
-        background: #FFFFFF;
-        box-shadow: 0px 0px 12px 0px #ACACAC;
-        opacity: 0.8;
-        border-radius: 30px 0px 0px 30px;
-        font-size: 30px;
-        color: #0D0D0D;
-        line-height: 75px;
-        display: flex;
-        justify-content: space-around;
-        z-index: 5;
-
-        .icon {
-            margin: 20px 0 20px 20px;
-            background: url("../assets/guize.png");
-            width: 36px;
-            height: 36px;
-            background-size: 100%;
-        }
+    .extend {
+      width: 160px;
+      height: 152px;
+      position: fixed;
+      top: 640px;
+      z-index: 4;
 
-        .text {
-            width: 150px;
-            text-align: center;
-        }
+      img {
+        width: 100%;
+        height: 100%;
+      }
     }
 
-    .tucaoModal {
-        position: fixed;
-        bottom: 450px;
-        right: 0;
-        width: 120px;
-        height: 60px;
-        background: #141517;
-        opacity: 0.5;
-        border-radius: 30px 0px 0px 30px;
-        font-size: 24px;
-        color: #FFFFFF;
-        line-height: 60px;
-        display: flex;
-        justify-content: space-around;
-        z-index: 1;
-
-        .icon {
-            margin: 18px 0 18px 20px;
-            background: url("../assets/tucao.png");
-            width: 24px;
-            height: 24px;
-            background-size: 100%;
-        }
+    // 主banner 动画效果  从105% 缩放到100%
+    .cartoon1 {
+      animation-name: scale1;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
     }
 
-    .memBox {
-        width: 690px;
-        height: 100px;
-        background: #ffffff;
-        font-size: 34px;
-        font-weight: bold;
-        color: #0d0d0d;
-        line-height: 100px;
-        padding-left: 40px;
-        border-radius: 20px;
-        margin: 0 auto;
-        margin-top: 30px;
-        box-sizing: border-box;
+    @keyframes scale1 {
+      from {
+        transform: scale(1.1);
+      }
 
+      to {
+        transform: scale(1);
+      }
     }
 
-    .probox {
-        margin: 20px 30px;
-        width: 690px;
-        border-radius: 20px;
-        box-shadow: 0px 0px 2px 0px #ACACAC;
-        height: 140px;
-        background-size: 100% 100%;
-
+    // 顶层banner 从100%  放大到105%
+    .cartoon2 {
+      animation-name: scale2;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
     }
 
-    .descbox {
-        background-color: #ffffff;
-        margin: 20px 30px;
-        width: 690px;
-        max-height: 560px;
-        border-radius: 20px;
-        box-shadow: 0px 0px 2px 0px #ACACAC;
-        padding: 20px 40px;
-        box-sizing: border-box;
-        position: relative;
-        overflow-y: scroll;
-
-        .main {
-
-            word-break: break-all;
-
-            h2 {
-                color: #0d0d0d;
-                margin: 0;
-                line-height: 60px;
-            }
-
-            p {
-                color: #707070;
-                font-size: 26px;
-                line-height: 45px;
-                margin: 0;
-            }
-        }
+    @keyframes scale2 {
+      from {
+        transform: scale(1);
+      }
+
+      to {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .rule {
+    position: fixed;
+    right: 0;
+    top: 30px;
+    width: 220px;
+    height: 76px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 12px 0px #ACACAC;
+    opacity: 0.8;
+    border-radius: 30px 0px 0px 30px;
+    font-size: 30px;
+    color: #0D0D0D;
+    line-height: 75px;
+    display: flex;
+    justify-content: space-around;
+    z-index: 5;
+
+    .icon {
+      margin: 20px 0 20px 20px;
+      background: url("../assets/guize.png");
+      width: 36px;
+      height: 36px;
+      background-size: 100%;
     }
 
-    .tabBox {
-        margin: 20px 30px;
-        width: 690px;
-        border-radius: 20px;
-        box-shadow: 0px 0px 2px 0px #ACACAC;
-        //height: 138px;
-        background: #FFFFFF;
-        border-radius: 8px;
-        display: -webkit-box;
-        overflow-x: scroll;
-        -webkit-overflow-scrolling: touch;
-
-        .tab {
-            width: 160px;
-            margin: 26px 5px;
-
-            img {
-                width: 50px;
-                height: 50px;
-                margin: 0 55px;
-            }
-
-            div {
-                text-align: center;
-                font-size: 24px;
-                font-weight: bold;
-                color: #0D0D0D;
-            }
-        }
+    .text {
+      width: 150px;
+      text-align: center;
+    }
+  }
+
+  .tucaoModal {
+    position: fixed;
+    bottom: 450px;
+    right: 0;
+    width: 120px;
+    height: 60px;
+    background: #141517;
+    opacity: 0.5;
+    border-radius: 30px 0px 0px 30px;
+    font-size: 24px;
+    color: #FFFFFF;
+    line-height: 60px;
+    display: flex;
+    justify-content: space-around;
+    z-index: 5;
+
+    .icon {
+      margin: 18px 0 18px 20px;
+      background: url("../assets/tucao.png");
+      width: 24px;
+      height: 24px;
+      background-size: 100%;
     }
+  }
+
+  .memBox {
+    width: 690px;
+    height: 100px;
+    background: #ffffff;
+    font-size: 34px;
+    font-weight: bold;
+    color: #0d0d0d;
+    line-height: 100px;
+    padding-left: 40px;
+    border-radius: 20px;
+    margin: 0 auto;
+    margin-top: 30px;
+    box-sizing: border-box;
+
+  }
+
+  .probox {
+    margin: 20px 30px;
+    width: 690px;
+    border-radius: 20px;
+    box-shadow: 0px 0px 2px 0px #ACACAC;
+    height: 140px;
+    background-size: 100% 100%;
+
+  }
+
+  .descbox {
+    background-color: #ffffff;
+    margin: 20px 30px;
+    width: 690px;
+    max-height: 560px;
+    border-radius: 20px;
+    box-shadow: 0px 0px 2px 0px #ACACAC;
+    padding: 20px 40px;
+    box-sizing: border-box;
+    position: relative;
+    overflow-y: scroll;
 
-    .modal {
-        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%);
-        }
+    .main {
 
-        .top {
-            width: 100%;
-            height: 96px;
-        }
+      word-break: break-all;
 
-        .logo {
-            width: 92px;
-            height: 50px;
-            position: absolute;
-            top: 22px;
-            left: 37px;
-        }
+      h2 {
+        color: #0d0d0d;
+        margin: 0;
+        line-height: 60px;
+      }
+
+      p {
+        color: #707070;
+        font-size: 26px;
+        line-height: 45px;
+        margin: 0;
+      }
     }
+  }
+
+  .tabBox {
+    margin: 20px 30px;
+    width: 690px;
+    border-radius: 20px;
+    box-shadow: 0px 0px 2px 0px #ACACAC;
+    //height: 138px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    display: -webkit-box;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+
+    .tab {
+      width: 160px;
+      margin: 26px 5px;
+
+      img {
+        width: 50px;
+        height: 50px;
+        margin: 0 55px;
+      }
 
+      div {
+        text-align: center;
+        font-size: 24px;
+        font-weight: bold;
+        color: #0D0D0D;
+      }
+    }
+  }
+
+  .modal {
+    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%);
+    }
 
-    .other-modal {
-        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;
-                }
-            }
-        }
+    .top {
+      width: 100%;
+      height: 96px;
+    }
 
-        .text-box {
-            font-family: PingFang-SC-Medium;
-            text-align: center;
-            line-height: 55px;
-            font-size: 32px;
-        }
+    .logo {
+      width: 92px;
+      height: 50px;
+      position: absolute;
+      top: 22px;
+      left: 37px;
+    }
+  }
 
-        .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 #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;
-        }
-    }
+  .other-modal {
+    top: 366px;
+    padding: 60px 65px;
 
-    .van-notice-bar {
-        background-color: transparent;
-        padding: 0 0;
+    .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;
 
-        .van-notice-bar__wrap {
-            margin-top: 17rem;
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
         }
+      }
+
+      .code {
+        font-size: 28px;
+        width: 150px;
+        margin: 0 10px;
+        color: #222222;
 
-        .van-notice-bar__content {
-            background-color: #fff;
-            padding: 10px 30px;
-            border-radius: 30px;
-            opacity: 0.7;
+        &.number {
+          color: #a7a7a7;
         }
+      }
     }
 
-    .content {
-        padding: 0 20px 40px 20px;
-        box-sizing: border-box;
+    .text-box {
+      font-family: PingFang-SC-Medium;
+      text-align: center;
+      line-height: 55px;
+      font-size: 32px;
+    }
 
-        p {
-            text-align: center;
-            font-size: 26px;
-            font-weight: bold;
-        }
+    .btn-box {
+      display: flex;
+      justify-content: space-between;
 
-        .btn {
-            width: 60%;
-            height: 80px;
-            line-height: 80px;
-            margin: 40px auto;
-            text-align: center;
-            font-size: 34px;
-            font-weight: bold;
-            color: #fff;
-            border-radius: 40px;
-            background-color: rgb(255, 161, 11);
-        }
+      .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 #fdc51b solid;
+        color: #fdc51b;
+        background-color: #ffffff;
+      }
+
+      .right {
+        color: #0d0d0d;
+        background: #fdc51b;
+      }
     }
 
-    .van-icon {
-        transform: scale(0.75, 0.75);
-        border-color: #fc8940;
+    .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;
     }
+  }
+
+  .van-notice-bar {
+    background-color: transparent;
+    padding: 0 0;
+    color: #000;
 
-    .van-checkbox__label {
-        margin-left: 5px;
+    .van-notice-bar__wrap {
+      margin-top: 17rem;
     }
 
-    .privacyBox {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        margin-top: 20px;
-        font-size: 22px;
+    .van-notice-bar__content {
+      background-color: #fff;
+      padding: 10px 30px;
+      border-radius: 30px;
+      opacity: 0.7;
+    }
+  }
 
-        .van-checkbox {
-            text-align: right;
-            display: flex;
-            justify-content: flex-end;
-        }
+  .content {
+    padding: 0 20px 40px 20px;
+    box-sizing: border-box;
 
-        .span {
-            display: flex;
-            align-items: center;
-        }
+    p {
+      text-align: center;
+      font-size: 26px;
+      font-weight: bold;
     }
-    .van-overlay {
-        z-index: 999 !important;
-      }
+
+    .btn {
+      width: 60%;
+      height: 80px;
+      line-height: 80px;
+      margin: 40px auto;
+      text-align: center;
+      font-size: 34px;
+      font-weight: bold;
+      color: #fff;
+      border-radius: 40px;
+      background-color: rgb(255, 161, 11);
+    }
+  }
+
+  .van-icon {
+    transform: scale(0.75, 0.75);
+    border-color: #fc8940;
+  }
+
+  .van-checkbox__label {
+    margin-left: 5px;
+  }
+
+  .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;
+    }
+
+    .span {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .van-overlay {
+    z-index: 999 !important;
+  }
 }

purchase_H5/src/templates/templateCom/index.vue

@@ -1,35 +1,25 @@
 <template>
   <div class="templateCom" id="temp">
     <div class="bannerBox" @click="bannerClick">
-      <img
-        class="banner"
-        :src="imgUrl + pageData.mainProduct.bannerPics[0]"
-        alt=""
-      />
-      <div class="banner2" v-if="pageData.mainProduct.bannerPics[2]&& pageData.mainProduct.bannerPics[2]!==''">
-        <img
-        :src="imgUrl + pageData.mainProduct.bannerPics[2]"
-        alt=""
-      />
-      </div>
+      <!-- 底层banner -->
+      <img class="banner" :class="productJson[0].dongHua && productJson[0].dongHua!==''&& productJson[0].dongHua=='1'?'cartoon1':''" :src="imgUrl + pageData.mainProduct.bannerPics[0]" alt="" />
+      <!-- json动图 -->
       <div class="svgBanner">
         <div id="lottie_box"></div>
       </div>
-      <img
-        @click.stop
-        class="activity"
-        v-if="
+      <!-- 上层png -->
+      <div class="banner2" :class="productJson[0].dongHua && productJson[0].dongHua!==''&& productJson[0].dongHua=='1'?'cartoon2':''" v-if="pageData.mainProduct.bannerPics[2]&& pageData.mainProduct.bannerPics[2]!==''">
+        <img :src="imgUrl + pageData.mainProduct.bannerPics[2]" alt="" />
+      </div>
+      <!-- 顶层png/gif -->
+      <div class="banner2" v-if="pageData.mainProduct.bannerPics[3]&& pageData.mainProduct.bannerPics[3]!==''">
+        <img :src="imgUrl + pageData.mainProduct.bannerPics[3]" 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"
-      >
+        " :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="extend" @click="extendClick">
@@ -37,51 +27,18 @@
             </div>      -->
     </div>
     <!-- 统一认证组件 -->
-    <tong-ren
-      ref="refs"
-      v-if="pageData.remarks.attestation === 0"
-      @btnClick="openIframe"
-      :pageData="pageData"
-      :isBuy="isBuy"
-      @hideClick="showConceal = true"
-      @ruleClick="ruleClick"
-    >
+    <tong-ren ref="refs" v-if="pageData.remarks.attestation === 0" @btnClick="openIframe" :pageData="pageData" :isBuy="isBuy" @hideClick="showConceal = true" @ruleClick="ruleClick">
     </tong-ren>
     <!-- 短信认证组件 -->
-    <duan-ren
-      ref="refs"
-      v-else-if="pageData.remarks.attestation === 1"
-      @btnClick="toBuy"
-      :pageData="pageData"
-      :isBuy="isBuy"
-      @hideClick="showConceal = true"
-      @ruleClick="ruleClick"
-    ></duan-ren>
+    <duan-ren ref="refs" v-else-if="pageData.remarks.attestation === 1" @btnClick="toBuy" :pageData="pageData" :isBuy="isBuy" @hideClick="showConceal = true" @ruleClick="ruleClick"></duan-ren>
     <!-- 短信认证组件 -->
-    <jian-ren
-      ref="refs"
-      v-else-if="pageData.remarks.attestation === 2"
-      @btnClick="toNewBuy"
-      :pageData="pageData"
-      :isBuy="isBuy"
-      @hideClick="showConceal = true"
-      @ruleClick="ruleClick"
-    ></jian-ren>
+    <jian-ren ref="refs" v-else-if="pageData.remarks.attestation === 2" @btnClick="toNewBuy" :pageData="pageData" :isBuy="isBuy" @hideClick="showConceal = true" @ruleClick="ruleClick"></jian-ren>
     <!-- 统一认证组件---升级 -->
-    <unify-modal
-      v-if="
+    <unify-modal v-if="
         pageData.remarks.attestation === 3 ||
         pageData.remarks.attestation === 4 ||
         pageData.remarks.attestation === 5
-      "
-      @btnClick="btnClick"
-      :pageData="pageData"
-      :isBuy="isBuy"
-      @hideClick="showConceal = true"
-      @ruleClick="ruleClick"
-      @toBuy="toBuy"
-      @toNewBuy="toNewBuy"
-    >
+      " @btnClick="btnClick" :pageData="pageData" :isBuy="isBuy" @hideClick="showConceal = true" @ruleClick="ruleClick" @toBuy="toBuy" @toNewBuy="toNewBuy">
     </unify-modal>
     <!-- 用户状态 -->
     <div v-if="user.userid" class="memBox">
@@ -93,33 +50,18 @@
     </div>
     <!-- 推荐产品 -->
     <div v-if="pageData.recommend.length > 0">
-      <div
-        v-for="(item, index) in pageData.recommend"
-        :key="index"
-        class="probox"
-        @click="recommend(item.id)"
-        :style="{
+      <div v-for="(item, index) in pageData.recommend" :key="index" class="probox" @click="recommend(item.id)" :style="{
           backgroundImage: `url(${item.promotePhoto})`,
-        }"
-      ></div>
+        }"></div>
     </div>
 
     <!-- 活动图 -->
-    <div
-      v-if="pageData.strategyInfo.posterPhoto"
-      class="probox"
-      @click="onGoLink()"
-      :style="{
+    <div v-if="pageData.strategyInfo.posterPhoto" class="probox" @click="onGoLink()" :style="{
         backgroundImage: `url(${pageData.strategyInfo.posterPhoto})`,
-      }"
-    ></div>
+      }"></div>
     <!-- tab导航 -->
     <div class="tabBox">
-      <div
-        class="tab"
-        v-if="pageData.remarks.jiluBtn === '1'"
-        @click="beforeLogin('manual')"
-      >
+      <div class="tab" v-if="pageData.remarks.jiluBtn === '1'" @click="beforeLogin('manual')">
         <img src="../assets/record.png" alt="" />
         <div>订购记录</div>
       </div>
@@ -127,27 +69,15 @@
         <img src="../assets/liuliang.png" alt="" />
         <div>流量激活</div>
       </div>
-      <div
-        class="tab"
-        v-if="pageData.remarks.memberBtn === '1'"
-        @click="beforeLogin('member')"
-      >
+      <div class="tab" v-if="pageData.remarks.memberBtn === '1'" @click="beforeLogin('member')">
         <img src="../assets/huiyuan.png" alt="" />
         <div>领取会员</div>
       </div>
-      <div
-        class="tab"
-        v-if="pageData.remarks.chaxunBtn === '1'"
-        @click="chaxun"
-      >
+      <div class="tab" v-if="pageData.remarks.chaxunBtn === '1'" @click="chaxun">
         <img src="../assets/guanzhu.png" alt="" />
         <div>剩余流量查询</div>
       </div>
-      <div
-        class="tab"
-        v-if="pageData.remarks.tuidingBtn === '1'"
-        @click="beforeLogin('unBUy')"
-      >
+      <div class="tab" v-if="pageData.remarks.tuidingBtn === '1'" @click="beforeLogin('unBUy')">
         <img src="../assets/tuiding.png" alt="" />
         <div>退订产品</div>
       </div>
@@ -157,11 +87,7 @@
       <div class="icon"></div>
       <div class="text">产品说明</div>
     </div>
-    <rule-modal
-      v-if="showRule"
-      @ruleShow="ruleShow"
-      :pageData="pageData"
-    ></rule-modal>
+    <rule-modal v-if="showRule" @ruleShow="ruleShow" :pageData="pageData"></rule-modal>
     <!-- 反馈 -->
     <div class="tucaoModal" @click="showTucao = true">
       <div class="icon"></div>
@@ -169,18 +95,9 @@
     </div>
     <vent-modal v-model="showTucao"></vent-modal>
     <!-- 登录弹框组件 -->
-    <login-modal
-      v-model="showLogin"
-      :type="type"
-      :text="text"
-      @getIsBuy="getIsBuy"
-    ></login-modal>
+    <login-modal v-model="showLogin" :type="type" :text="text" @getIsBuy="getIsBuy"></login-modal>
     <!-- 退订弹框组件 -->
-    <unbuy-modal
-      v-model="showUnbuy"
-      :pageData="pageData"
-      @childData="getChildData"
-    ></unbuy-modal>
+    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData"></unbuy-modal>
     <!-- 剩余流量查询 -->
     <account-modal v-model="showQr"></account-modal>
     <!-- 订购超时 -->
@@ -188,18 +105,9 @@
     <!-- 遮罩 -->
     <newZheZhao v-if="showZhezhao" isZheZhao="1"></newZheZhao>
     <!-- 退订挽留 -->
-    <van-overlay
-      :show="unBuyDrainage"
-      :duration="0.1"
-      @click="unBuyDrainage = false"
-      pageData.strategyInfo.unsubscribeStrategyList.length
-      >0 > 0 >
+    <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"
-        />
+        <img src="../../assets/img/close.png" class="close" @click="unBuyDrainage = false" />
         <div class="text-box">确定要放弃本服务吗?</div>
         <div class="text-box">
           {{ unBuyDrainageText }}
@@ -207,10 +115,7 @@
         <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 class="btn right" @click="recommend(pageData.strategyInfo.unsubscribeStrategyList[0])">
             去看看
           </div>
         </div>
@@ -220,6 +125,8 @@
     <conceal v-model="showConceal" :pageData="pageData"></conceal>
     <!-- 重复订购引流 -->
     <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
+    <!-- 合约产品退订提示 -->
+    <opOut v-model="opoutShow" @opoutClick="showUnbuy = true"></opOut>
   </div>
 </template>
 
@@ -247,12 +154,13 @@ import tongRen from "./components/tongRen.vue";
 import duanRen from "./components/duanRen.vue";
 import jianRen from "./components/jianRen.vue";
 import unifyModal from "../../components/unifyModal.vue";
+import opOut from "../../components/opOut.vue";
 import { Dialog } from "vant";
 export default {
   mixins: [common],
-  data() {
+  data () {
     return {
-      lottie:{},
+      lottie: {},
       imgUrl: process.env.VUE_APP_IMGS_URL,
       showLogin: false,
       showRule: false,
@@ -270,6 +178,7 @@ export default {
       productJson: [],
       isBuy: "未订购",
       phone: "",
+      opoutShow: false
     };
   },
   components: {
@@ -286,6 +195,7 @@ export default {
     duanRen,
     jianRen,
     unifyModal,
+    opOut
   },
   filters: {
     formatPhone: (phone) => {
@@ -293,23 +203,20 @@ export default {
       return phone.substr(0, 3) + "****" + phone.substr(7, 11);
     },
   },
-  created() {
+  created () {
     document.title = this.pageData.mainProduct.productName;
     this.phone = this.$route.query.phone;
     if (this.pageData.mainProduct.cacheSeatOne) {
       this.productJson = this.pageData.mainProduct.cacheSeatOne;
     }
   },
-  mounted() {
+  mounted () {
     addR.showSP();
     this.callSvg()
   },
   methods: {
-    extendClick() {
-      if (
-        this.pageData.remarks.extendVal &&
-        this.pageData.remarks.extendVal === "1"
-      ) {
+    extendClick () {
+      if (this.pageData.remarks.extendVal && this.pageData.remarks.extendVal === "1") {
         if (this.isBuy === "未订购") {
           Dialog({
             message: "您还未订购成功，请继续通过此页面订购，即可领取会员；",
@@ -329,18 +236,18 @@ export default {
         }
       }
     },
-    btnClick(phone) {
+    btnClick (phone) {
       this.phone = phone;
       this.openIframe();
     },
-    ruleShow() {
+    ruleShow () {
       this.showRule = false;
     },
-    ruleClick() {
+    ruleClick () {
       this.showRule = true;
       localStorage.setItem("startTime", new Date().getTime());
     },
-    bannerClick() {
+    bannerClick () {
       addR.clickBanner();
       // if (
       //     this.pageData.remarks.isBuy === "1" &&
@@ -354,11 +261,11 @@ export default {
       //     }
       // }
     },
-    chaxun() {
+    chaxun () {
       addR.clickFollow();
       this.showQr = true;
     },
-    async beforeLogin(type) {
+    async beforeLogin (type) {
       this.type = type;
       if (this.user.userid) {
         if (type === "manual" || type === "member") {
@@ -378,7 +285,11 @@ export default {
             this.unBuyDrainageText = drainageRes.data.productName;
             this.unBuyDrainage = true;
           } else {
-            this.showUnbuy = true;
+            if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+              this.opoutShow = true
+            } else {
+              this.showUnbuy = true;
+            }
           }
         }
       } else if (type === "unBUy") {
@@ -396,14 +307,18 @@ export default {
           this.unBuyDrainageText = drainageRes.data.productName;
           this.unBuyDrainage = true;
         } else {
-          this.showUnbuy = true;
+          if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+            this.opoutShow = true
+          } else {
+            this.showUnbuy = true;
+          }
         }
       } else {
         addR.loginClick();
         this.showLogin = true;
       }
     },
-    toLink(type) {
+    toLink (type) {
       let cpid = this.$store.state.pageData.mainProduct.cpid;
       let spid = this.$store.state.pageData.mainProduct.spid;
       let isCompositeProduct =
@@ -442,7 +357,7 @@ export default {
       });
     },
     // 推荐产品跳转
-    recommend(val) {
+    recommend (val) {
       // this.$store.commit("setTempName", "loading");
       strategyGetID({
         id: val,
@@ -523,10 +438,10 @@ export default {
           }
           document.title = pageData.mainProduct.productName;
           this.$store.commit("setPageData", pageData);
-          if(this.$store.state.tempName ===data.templateCode ){
-            setTimeout(()=>{
+          if (this.$store.state.tempName === data.templateCode) {
+            setTimeout(() => {
               this.callSvg()
-            },500)
+            }, 500)
           }
           this.$store.commit("setTempName", data.templateCode);
           if (item.data !== null) {
@@ -534,11 +449,11 @@ export default {
               item.data.templateName !== "" &&
               item.data.templateName !== null
             ) {
-          if(this.$store.state.tempName ===item.data.templateName){
-            setTimeout(()=>{
-              this.callSvg()
-            },500)
-          }
+              if (this.$store.state.tempName === item.data.templateName) {
+                setTimeout(() => {
+                  this.callSvg()
+                }, 500)
+              }
               this.$store.commit("setTempName", item.data.templateName);
             }
           }
@@ -549,12 +464,11 @@ export default {
       this.unBuyDrainage = false;
     },
     // 活动链接跳转
-    onGoLink() {
+    onGoLink () {
       if (this.user.userid) {
         if (this.pageData.strategyInfo.activityType === 2) {
-          let url = `${
-            this.pageData.strategyInfo.linkUrl
-          }&userid=${encodeURIComponent(this.user.userid)}`;
+          let url = `${this.pageData.strategyInfo.linkUrl
+            }&userid=${encodeURIComponent(this.user.userid)}`;
           window.location.href = url;
         } else if (this.pageData.strategyInfo.activityType === 1) {
           changeUserid({
@@ -572,27 +486,31 @@ export default {
       }
     },
     // 点击确定
-    unBuySure() {
+    unBuySure () {
       addR.clickUnsubscribe();
       this.unBuyDrainage = false;
-      this.showUnbuy = true;
+      if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+        this.opoutShow = true
+      } else {
+        this.showUnbuy = true
+      }
     },
-    getChildData(data) {
+    getChildData (data) {
       this.isBuy = data;
     },
     // 调用svg动画
-    callSvg(){
-    let lottieBox =document.getElementById('lottie_box')    
-    lottieBox.innerHTML = ''
-    if( this.pageData.mainProduct.bannerPics[1] && this.pageData.mainProduct.bannerPics[1] !==''){
-          this.lottie = lottie.loadAnimation({
-           container: lottieBox,
-           renderer: 'svg',
-           loop: true,
-           autoplay: true,
-           path: this.imgUrl+this.pageData.mainProduct.bannerPics[1]
-      })
-    }
+    callSvg () {
+      let lottieBox = document.getElementById('lottie_box')
+      lottieBox.innerHTML = ''
+      if (this.pageData.mainProduct.bannerPics[1] && this.pageData.mainProduct.bannerPics[1] !== '') {
+        this.lottie = lottie.loadAnimation({
+          container: lottieBox,
+          renderer: 'svg',
+          loop: true,
+          autoplay: true,
+          path: this.imgUrl + this.pageData.mainProduct.bannerPics[1]
+        })
+      }
     }
   },
 };

purchase_H5/src/templates/templateTogether-Col/index.scss

@@ -1,431 +1,474 @@
 .tempalteTogetherColor {
-    background-color: #000;
-    color: #333333;
-    min-height: 100vh;
-    font-family: PingFang SC;
+  background-color: #000;
+  color: #333333;
+  min-height: 100vh;
+  font-family: PingFang SC;
+  position: relative;
+  padding-bottom: 20px;
+  width: 100vw;
+  overflow-x: hidden;
+
+  .van-icon {
+    background-color: #f6f6f6;
+    border: 1px solid #9e9e9e
+  }
+
+  .iframe {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 9999;
+  }
+
+  .bannerBox {
+    width: 100%;
+    height: auto;
+    background-size: 100%;
+    // border-radius: 0 0 60px 60px;
+    background-repeat: no-repeat;
     position: relative;
-    padding-bottom: 20px;
-    width: 100vw;
-    overflow-x: hidden;
+    overflow: hidden;
+    display: inline-flex;
+
+    .banner {
+      width: 100%;
+      height: 100%;
+    }
 
-    .van-icon {
-        background-color: #f6f6f6;
-        border: 1px solid #9e9e9e
+    .svgBanner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
     }
 
-    .iframe {
-        position: fixed;
+    .banner2 {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+
+      img {
         width: 100%;
         height: 100%;
-        left: 0;
-        top: 0;
-        z-index: 9999;
+      }
     }
 
-    .bannerBox {
-        width: 100%;
-        height: auto;
-        background-size: 100%;
-        // border-radius: 0 0 60px 60px;
-        background-repeat: no-repeat;
-        position: relative;
+    .activity {
+      width: 180px;
+      height: 140px;
+      position: absolute;
+      right: 10px;
+      bottom: 0;
+      z-index: 4;
+    }
 
-        .banner {
-            width: 100%;
-            height: 100%;
-        }
-        .svgBanner{
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-        }   
-        .banner2{
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 2;
-            img{
-                width: 100%;
-                height: 100%;
-            }
-        }   
-
-        .activity {
-            position: absolute;
-            right: 10px;
-            width: 180px;
-            height: 140px;
-            top: 260px;
-            z-index: 99;
-        }
+    // 主banner 动画效果  从105% 缩放到100%
+    .cartoon1 {
+      animation-name: scale1;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
     }
 
-    .rule {
-        position: fixed;
-        right: 0;
-        top: 81px;
-        width: 170px;
-        height: 76px;
-        background: #F6F5F5;
-        box-shadow: 0px 0px 12px 0px #ACACAC;
-        opacity: 0.5;
-        border-radius: 30px 0px 0px 30px;
-        font-size: 24px;
-        color: #0D0D0D;
-        line-height: 75px;
-        display: flex;
-        justify-content: space-around;
-        z-index: 5;
-
-        .icon {
-            margin: 20px 0 20px 20px;
-            background: url("../assets/guize.png");
-            width: 36px;
-            height: 36px;
-            background-size: 100%;
-            background-repeat: no-repeat;
-        }
+    @keyframes scale1 {
+      from {
+        transform: scale(1.1);
+      }
 
-        .text {
-            width: 150px;
-            text-align: center;
-        }
+      to {
+        transform: scale(1);
+      }
     }
 
-    .tucaoModal {
-        position: fixed;
-        bottom: 250px;
-        right: 0;
-        width: 120px;
-        height: 60px;
-        background: #141517;
-        opacity: 0.5;
-        border-radius: 30px 0px 0px 30px;
-        font-size: 24px;
-        color: #FFFFFF;
-        line-height: 60px;
-        display: flex;
-        justify-content: space-around;
-        z-index: 1;
-
-        .icon {
-            margin: 18px 0 18px 20px;
-            background: url("../assets/tucao.png");
-            width: 24px;
-            height: 24px;
-            background-size: 100%;
-        }
+    // 顶层banner 从100%  放大到105%
+    .cartoon2 {
+      animation-name: scale2;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
     }
 
+    @keyframes scale2 {
+      from {
+        transform: scale(1);
+      }
 
-    .memBox {
-        width: 690px;
-        height: 100px;
-        background: #ffffff;
-        font-size: 34px;
-        font-weight: bold;
-        color: #0d0d0d;
-        line-height: 100px;
-        padding-left: 40px;
-        border-radius: 20px;
-        margin: 0 auto;
-        margin-top: 30px;
-        box-sizing: border-box;
+      to {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .rule {
+    position: fixed;
+    right: 0;
+    top: 81px;
+    width: 170px;
+    height: 76px;
+    background: #F6F5F5;
+    box-shadow: 0px 0px 12px 0px #ACACAC;
+    opacity: 0.5;
+    border-radius: 30px 0px 0px 30px;
+    font-size: 24px;
+    color: #0D0D0D;
+    line-height: 75px;
+    display: flex;
+    justify-content: space-around;
+    z-index: 5;
+
+    .icon {
+      margin: 20px 0 20px 20px;
+      background: url("../assets/guize.png");
+      width: 36px;
+      height: 36px;
+      background-size: 100%;
+      background-repeat: no-repeat;
+    }
 
+    .text {
+      width: 150px;
+      text-align: center;
+    }
+  }
+
+  .tucaoModal {
+    position: fixed;
+    bottom: 250px;
+    right: 0;
+    width: 120px;
+    height: 60px;
+    background: #141517;
+    opacity: 0.5;
+    border-radius: 30px 0px 0px 30px;
+    font-size: 24px;
+    color: #FFFFFF;
+    line-height: 60px;
+    display: flex;
+    justify-content: space-around;
+    z-index: 5;
+
+    .icon {
+      margin: 18px 0 18px 20px;
+      background: url("../assets/tucao.png");
+      width: 24px;
+      height: 24px;
+      background-size: 100%;
     }
+  }
+
+
+  .memBox {
+    width: 690px;
+    height: 100px;
+    background: #ffffff;
+    font-size: 34px;
+    font-weight: bold;
+    color: #0d0d0d;
+    line-height: 100px;
+    padding-left: 40px;
+    border-radius: 20px;
+    margin: 0 auto;
+    margin-top: 30px;
+    box-sizing: border-box;
+
+  }
+
+  .probox {
+    margin: 20px auto;
+    width: 690px;
+    border-radius: 20px;
+    box-shadow: 0px 0px 2px 0px #ACACAC;
+    height: 140px;
+    background-size: 100% 100%;
+
+  }
+
+  .descbox {
+    margin: 20px auto;
+    width: 700px;
+    //height: 470px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    padding: 15px 0;
+    border-radius: 20px;
+    box-sizing: border-box;
+    // border-width: 1px;
+    // border-style: solid;
+    position: relative;
+
 
-    .probox {
-        margin: 20px auto;
-        width: 690px;
-        border-radius: 20px;
-        box-shadow: 0px 0px 2px 0px #ACACAC;
-        height: 140px;
-        background-size: 100% 100%;
+    .titleImg {
+      width: 50%;
+      height: 25px;
+      margin: 0 auto;
+      position: relative;
 
+      .titleText {
+        width: 50%;
+        height: 25px;
+        line-height: 25px;
+        font-size: 38px;
+        font-weight: bold;
+        position: absolute;
+        left: 25%;
+        top: 0;
+        text-align: center;
+      }
     }
 
-    .descbox {
-        margin: 20px auto;
-        width: 700px;
-        //height: 470px;
-        background-size: 100%;
-        background-repeat: no-repeat;
-        padding: 15px 0;
-        border-radius: 20px;
-        box-sizing: border-box;
-        // border-width: 1px;
-        // border-style: solid;
-        position: relative;
 
+    .main {
+      width: 100%;
+      padding-left: 85px;
+      padding-right: 90px;
+      box-sizing: border-box;
+      margin: 0 auto;
+      overflow-y: scroll;
+      // max-height: 500px;
+      word-break: break-all;
+      margin-top: 15px;
+
+      p {
+        font-size: 28px;
+        line-height: 45px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        // opacity: 0.8;
+        width: 100%;
+        padding-left: 100px;
+        position: relative;
+        box-sizing: border-box;
 
-        .titleImg {
-            width: 50%;
-            height: 25px;
-            margin: 0 auto;
-            position: relative;
-
-            .titleText {
-                width: 50%;
-                height: 25px;
-                line-height: 25px;
-                font-size: 38px;
-                font-weight: bold;
-                position: absolute;
-                left: 25%;
-                top: 0;
-                text-align: center;
-            }
+        strong {
+          opacity: 0.8;
+          font-family: PingFang SC;
+          font-weight: bold;
         }
+      }
 
+      p>strong:first-child {
+        display: inline-block;
+        position: absolute;
+        left: 0px;
+        top: 0;
+        font-size: 30px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        margin-right: 20px;
+        opacity: 1;
+      }
+    }
+  }
+
+  .extend {
+    width: 160px;
+    height: 152px;
+    position: fixed;
+    top: 1100px;
+    z-index: 4;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .tabBox {
+    margin: 0 auto;
+    margin-top: 36px;
+    width: 690px;
+    // height: 138px;
+    background: #FFFFFF;
+    border-radius: 20px;
+    display: -webkit-box;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+
+    .tab {
+      width: 160px;
+      margin: 26px 5px;
+
+      img {
+        width: 50px;
+        height: 50px;
+        margin: 0 55px;
+      }
 
-        .main {
-            width: 100%;
-            padding-left: 85px;
-            padding-right: 90px;
-            box-sizing: border-box;
-            margin: 0 auto;
-            overflow-y: scroll;
-            // max-height: 500px;
-            word-break: break-all;
-            margin-top: 15px;
-
-            p {
-                font-size: 28px;
-                line-height: 45px;
-                font-family: PingFang SC;
-                font-weight: 400;
-                // opacity: 0.8;
-                width: 100%;
-                padding-left: 100px;
-                position: relative;
-                box-sizing: border-box;
-
-                strong {
-                    opacity: 0.8;
-                    font-family: PingFang SC;
-                    font-weight: bold;
-                }
-            }
-
-            p>strong:first-child {
-                display: inline-block;
-                position: absolute;
-                left: 0px;
-                top: 0;
-                font-size: 30px;
-                font-family: PingFang SC;
-                font-weight: 800;
-                margin-right: 20px;
-                opacity: 1;
-            }
-        }
+      div {
+        text-align: center;
+        font-size: 24px;
+        font-weight: bold;
+        color: #0D0D0D;
+      }
     }
-    .extend {
-        width: 160px;
-        height: 152px;
-        position: fixed;
-        top: 1100px;
-        z-index: 2;
-
-        img {
-            width: 100%;
-            height: 100%;
-        }
+  }
+
+  .privacy {
+    font-size: 26px;
+    margin-top: 26px;
+    margin-bottom: 41px;
+    text-align: center;
+    text-decoration: underline;
+  }
+
+  .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%);
     }
 
-    .tabBox {
-        margin: 0 auto;
-        margin-top: 36px;
-        width: 690px;
-        // height: 138px;
-        background: #FFFFFF;
-        border-radius: 20px;
-        display: -webkit-box;
-        overflow-x: scroll;
-        -webkit-overflow-scrolling: touch;
-
-        .tab {
-            width: 160px;
-            margin: 26px 5px;
-
-            img {
-                width: 50px;
-                height: 50px;
-                margin: 0 55px;
-            }
-
-            div {
-                text-align: center;
-                font-size: 24px;
-                font-weight: bold;
-                color: #0D0D0D;
-            }
-        }
+    .top {
+      width: 100%;
+      height: 96px;
     }
 
-    .privacy {
-        font-size: 26px;
-        margin-top: 26px;
-        margin-bottom: 41px;
-        text-align: center;
-        text-decoration: underline;
+    .logo {
+      width: 92px;
+      height: 50px;
+      position: absolute;
+      top: 22px;
+      left: 37px;
     }
+  }
+
 
-    .modal {
+  .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;
-        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%);
-        }
+        flex: 1;
+        background-color: transparent;
 
-        .top {
-            width: 100%;
-            height: 96px;
+        input {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          width: 100%;
         }
+      }
 
-        .logo {
-            width: 92px;
-            height: 50px;
-            position: absolute;
-            top: 22px;
-            left: 37px;
+      .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;
+    }
 
-    .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;
-                }
-            }
-        }
+    .btn-box {
+      display: flex;
+      justify-content: space-between;
 
-        .text-box {
-            font-family: PingFang-SC-Medium;
-            text-align: center;
-            line-height: 55px;
-            font-size: 32px;
-        }
+      .btn {
+        width: 190px;
+        margin-top: 20px;
+        height: 80px;
+        line-height: 80px;
+        border-radius: 40px;
+        font-size: 34px;
+        font-weight: bold;
+        text-align: center;
+      }
 
-        .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 #fdc51b solid;
-                color: #fdc51b;
-                background-color: #ffffff;
-            }
-
-            .right {
-                color: #0d0d0d;
-                background: #fdc51b;
-            }
-        }
+      .left {
+        border: 2px #fdc51b solid;
+        color: #fdc51b;
+        background-color: #ffffff;
+      }
 
-        .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;
-        }
+      .right {
+        color: #0d0d0d;
+        background: #fdc51b;
+      }
     }
 
-    .van-notice-bar {
-        background-color: transparent;
-        padding: 0 0;
-        color: #000;
+    .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;
+    }
+  }
 
-        .van-notice-bar__wrap {
-            margin-top: 17rem;
-        }
+  .van-notice-bar {
+    background-color: transparent;
+    padding: 0 0;
+    color: #000;
 
-        .van-notice-bar__content {
-            background-color: #fff;
-            padding: 10px 30px;
-            border-radius: 30px;
-            opacity: 0.7;
-        }
+    .van-notice-bar__wrap {
+      margin-top: 17rem;
     }
 
-    .van-icon {
-        background-color: #f6f6f6;
-        border: 0 !important;
-        transform: scale(0.75, 0.75);
+    .van-notice-bar__content {
+      background-color: #fff;
+      padding: 10px 30px;
+      border-radius: 30px;
+      opacity: 0.7;
     }
+  }
 
-    .van-checkbox__label {
-        margin-left: 5px;
-    }
-    .van-overlay {
-        z-index: 999 !important;
-      }
+  .van-icon {
+    background-color: #f6f6f6;
+    border: 0 !important;
+    transform: scale(0.75, 0.75);
+  }
+
+  .van-checkbox__label {
+    margin-left: 5px;
+  }
+
+  .van-overlay {
+    z-index: 999 !important;
+  }
 
 }

purchase_H5/src/templates/templateTogether-Col/index.vue

@@ -2,13 +2,21 @@
 <template>
   <div id="temp" class="tempalteTogetherColor" :style="pageData.mainProduct.bgColor !== null &&pageData.mainProduct.bgColor.length > 0 ? { backgroundColor: pageData.mainProduct.bgColor[0] }: { backgroundColor: '#000' }">
     <div class="bannerBox" @click="bannerClick">
-      <img class="banner" :src="imgUrl + pageData.mainProduct.bannerPics[0]" alt="" />
-      <div class="banner2" v-if="pageData.mainProduct.bannerPics[2]&& pageData.mainProduct.bannerPics[2]!==''">
+      <!-- 底层banner -->
+      <img class="banner" :class="pageData.mainProduct.cacheSeatOne[0].dongHua && pageData.mainProduct.cacheSeatOne[0].dongHua!==''&& pageData.mainProduct.cacheSeatOne[0].dongHua=='1'?'cartoon1':''" :src="imgUrl + pageData.mainProduct.bannerPics[0]" alt="" />
+       <!-- json动图 -->
+      <div class="svgBanner" >
+        <div id="lottie_box"></div>
+      </div>
+      <!-- 上层png -->
+      <div class="banner2" :class="pageData.mainProduct.cacheSeatOne[0].dongHua && pageData.mainProduct.cacheSeatOne[0].dongHua!==''&& pageData.mainProduct.cacheSeatOne[0].dongHua=='1'?'cartoon2':''" v-if="pageData.mainProduct.bannerPics[2]&& pageData.mainProduct.bannerPics[2]!==''">
         <img :src="imgUrl + pageData.mainProduct.bannerPics[2]" alt="" />
       </div>
-      <div class="svgBanner">
-        <div id="lottie_box"></div>
+      <!-- 顶层png/gif -->
+      <div class="banner2" v-if="pageData.mainProduct.bannerPics[3]&& pageData.mainProduct.bannerPics[3]!==''">
+        <img :src="imgUrl + pageData.mainProduct.bannerPics[3]" alt="" />
       </div>
+
       <img @click.stop class="activity" v-if="pageData.strategyInfo.activityType !== 0 &&pageData.strategyInfo.activityLogo" :src="`${pageData.strategyInfo.activityLogo}`" @click="onGoLink()" />
       <!-- 轮播条 -->
       <van-notice-bar v-show="showScroll" scrollable :text="pageData.remarks.zoetropeText" />
@@ -86,7 +94,7 @@
     <!-- 遮罩 -->
     <newZheZhao v-if="showZhezhao" isZheZhao="1"></newZheZhao>
     <!-- 退订挽留 -->
-    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false" pageData.strategyInfo.unsubscribeStrategyList.length>0 > 0 >
+    <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>
@@ -106,6 +114,8 @@
     <conceal v-model="showConceal" :pageData="pageData"></conceal>
     <!-- 重复订购引流 -->
     <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
+    <!-- 合约产品退订提示 -->
+    <opOut v-model="opoutShow" @opoutClick="showUnbuy = true"></opOut>
   </div>
 </template>
 
@@ -128,6 +138,7 @@ import unbuyModal from "../../components/unbuyModal.vue";
 import conceal from "../../components/hideModal.vue";
 import repeatModal from "../../components/repeatModal.vue";
 import unify from "./unify.vue";
+import opOut from "../../components/opOut.vue";
 import {
   Dialog
 } from "vant";
@@ -154,6 +165,7 @@ export default {
       productJson: [],
       repeatShow: false,
       isBuy: "未订购",
+      opoutShow: false
     };
   },
   components: {
@@ -166,7 +178,8 @@ export default {
     unbuyModal,
     conceal,
     repeatModal,
-    unify
+    unify,
+    opOut
   },
   created () {
     document.title = this.pageData.mainProduct.productName;
@@ -182,7 +195,7 @@ export default {
     this.callSvg()
   },
   methods: {
-    productClick (id,index) {
+    productClick (id, index) {
       this.indexNum = index
       detMainProduct({
         productId: id,
@@ -268,7 +281,11 @@ export default {
             this.unBuyDrainageText = drainageRes.data.productName;
             this.unBuyDrainage = true;
           } else {
-            this.showUnbuy = true;
+            if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+              this.opoutShow = true
+            } else {
+              this.showUnbuy = true;
+            }
           }
         }
       } else if (type === "unBUy") {
@@ -286,7 +303,11 @@ export default {
           this.unBuyDrainageText = drainageRes.data.productName;
           this.unBuyDrainage = true;
         } else {
-          this.showUnbuy = true;
+          if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+            this.opoutShow = true
+          } else {
+            this.showUnbuy = true;
+          }
         }
       } else {
         addR.loginClick();
@@ -462,7 +483,11 @@ export default {
     unBuySure () {
       addR.clickUnsubscribe();
       this.unBuyDrainage = false;
-      this.showUnbuy = true;
+      if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+        this.opoutShow = true
+      } else {
+        this.showUnbuy = true
+      }
     },
     getChildData (data) {
       this.isBuy = data;

purchase_H5/src/templates/templateTogether-Col/unify.vue

@@ -146,7 +146,7 @@ export default {
         let times = (now - 1600476800000) / 180000;
         this.times = String(Math.ceil(times * add) + start);
       }
-      this.$emit('productClick', val,index)
+      this.$emit('productClick', val, index)
 
     },
     // 获取副产品
@@ -385,6 +385,8 @@ export default {
     font-size: 36px;
     font-weight: 700;
     font-family: PingFang SC, PingFang SC-Bold;
+    position: relative;
+    z-index: 3;
     .tab {
       width: 50%;
       border-top-left-radius: 20px;
@@ -409,6 +411,8 @@ export default {
     border-radius: 20px;
     border-width: 1px;
     border-style: solid;
+    position: relative;
+    z-index: 3;
 
     .matchImage {
       width: 100%;
@@ -475,6 +479,8 @@ export default {
   .buyBox {
     margin-top: -48px;
     padding: 0 25px;
+    position: relative;
+    z-index: 3;
 
     .btnImg {
       width: 387px;

purchase_H5/src/templates/templateTogether/index.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="togetherNew" id="temp">
     <div class="bannerBox" @click="bannerClick">
-      <img class="banner" :src="imgUrl + pageData.mainProduct.bannerPics[0]" alt="" />
-      <div class="banner2" v-if="pageData.mainProduct.bannerPics[2]&& pageData.mainProduct.bannerPics[2]!==''">
-        <img :src="imgUrl + pageData.mainProduct.bannerPics[2]" alt="" />
-      </div>
+      <!-- 底层banner -->
+      <img class="banner" :class="pageData.mainProduct.cacheSeatOne[0].dongHua && pageData.mainProduct.cacheSeatOne[0].dongHua!==''&& pageData.mainProduct.cacheSeatOne[0].dongHua=='1'?'cartoon1':''" :src="imgUrl + pageData.mainProduct.bannerPics[0]" alt="" />
+      <!-- json动图 -->
       <div class="svgBanner">
         <div id="lottie_box"></div>
       </div>
+      <!-- 上层png -->
+      <div class="banner2" :class="pageData.mainProduct.cacheSeatOne[0].dongHua && pageData.mainProduct.cacheSeatOne[0].dongHua!==''&& pageData.mainProduct.cacheSeatOne[0].dongHua=='1'?'cartoon2':''" v-if="pageData.mainProduct.bannerPics[2]&& pageData.mainProduct.bannerPics[2]!==''">
+        <img :src="imgUrl + pageData.mainProduct.bannerPics[2]" alt="" />
+      </div>
+      <!-- 顶层png/gif -->
+      <div class="banner2" v-if="pageData.mainProduct.bannerPics[3]&& pageData.mainProduct.bannerPics[3]!==''">
+        <img :src="imgUrl + pageData.mainProduct.bannerPics[3]" alt="" />
+      </div>
+
       <img @click.stop class="activity" v-if="
           pageData.strategyInfo.activityType !== 0 &&
           pageData.strategyInfo.activityLogo
@@ -160,7 +168,7 @@
     <!-- 遮罩 -->
     <newZheZhao v-if="showZhezhao" isZheZhao="1"></newZheZhao>
     <!-- 退订挽留 -->
-    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false" pageData.strategyInfo.unsubscribeStrategyList.length>0
+    <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>
@@ -178,6 +186,8 @@
     </van-overlay>
     <!-- 重复订购引流 -->
     <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
+    <!-- 合约产品退订提示 -->
+    <opOut v-model="opoutShow" @opoutClick="showUnbuy = true"></opOut>
   </div>
 </template>
 
@@ -206,6 +216,7 @@ import tongRen from "./components/tongRen.vue";
 import duanRen from "./components/duanRen.vue";
 import jianRen from "./components/jianRen.vue";
 import unifyModal from "../../components/unifyModal.vue";
+import opOut from "../../components/opOut.vue";
 import lottie from 'lottie-web';
 export default {
   name: "baseNew",
@@ -231,6 +242,7 @@ export default {
       repeatShow: false,
       isBuy: "未订购",
       phone: "",
+      opoutShow: false
     };
   },
   components: {
@@ -246,7 +258,8 @@ export default {
     tongRen,
     duanRen,
     jianRen,
-    unifyModal
+    unifyModal,
+    opOut
   },
   filters: {
     formatPhone: (phone) => {
@@ -281,14 +294,8 @@ export default {
   },
   mounted () {
     addR.showSP();
-    let start =
-      this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== ""
-        ? Number(this.pageData.remarks.orderNum)
-        : 0;
-    let add =
-      this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== ""
-        ? Number(this.pageData.remarks.orderAdd)
-        : 1;
+    let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== "" ? Number(this.pageData.remarks.orderNum) : 0;
+    let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== "" ? Number(this.pageData.remarks.orderAdd) : 1;
     let now = new Date().getTime();
     let times = (now - 1600476800000) / 180000;
     this.times = String(Math.ceil(times * add) + start);
@@ -296,10 +303,7 @@ export default {
   },
   methods: {
     extendClick () {
-      if (
-        this.pageData.remarks.extendVal &&
-        this.pageData.remarks.extendVal === "1"
-      ) {
+      if (this.pageData.remarks.extendVal && this.pageData.remarks.extendVal === "1") {
         if (this.isBuy === "未订购") {
           Dialog({
             message: "您还未订购成功，请继续通过此页面订购，即可领取会员；",
@@ -337,30 +341,14 @@ export default {
       this.pageData.mainProduct.isTreaty = index;
       this.indexNum = index;
       if (index !== 0) {
-        let start =
-          this.pageData.remarks.orderNum &&
-            this.pageData.remarks.orderNum !== ""
-            ? Number(this.pageData.remarks.orderNum)
-            : 0;
-        let add =
-          this.pageData.remarks.orderAdd &&
-            this.pageData.remarks.orderAdd !== ""
-            ? Number(this.pageData.remarks.orderAdd)
-            : 1;
+        let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== "" ? Number(this.pageData.remarks.orderNum) : 0;
+        let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== "" ? Number(this.pageData.remarks.orderAdd) : 1;
         let now = new Date().getTime();
         let times = (now - 1600476800000) / 200000;
         this.times = String(Math.ceil(times * add) + start);
       } else {
-        let start =
-          this.pageData.remarks.orderNum &&
-            this.pageData.remarks.orderNum !== ""
-            ? Number(this.pageData.remarks.orderNum)
-            : 0;
-        let add =
-          this.pageData.remarks.orderAdd &&
-            this.pageData.remarks.orderAdd !== ""
-            ? Number(this.pageData.remarks.orderAdd)
-            : 1;
+        let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== "" ? Number(this.pageData.remarks.orderNum) : 0;
+        let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== "" ? Number(this.pageData.remarks.orderAdd) : 1;
         let now = new Date().getTime();
         let times = (now - 1600476800000) / 180000;
         this.times = String(Math.ceil(times * add) + start);
@@ -447,7 +435,11 @@ export default {
             this.unBuyDrainageText = drainageRes.data.productName;
             this.unBuyDrainage = true;
           } else {
-            this.showUnbuy = true;
+            if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+              this.opoutShow = true
+            } else {
+              this.showUnbuy = true;
+            }
           }
         }
       } else if (type === "unBUy") {
@@ -465,7 +457,11 @@ export default {
           this.unBuyDrainageText = drainageRes.data.productName;
           this.unBuyDrainage = true;
         } else {
-          this.showUnbuy = true;
+          if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+            this.opoutShow = true
+          } else {
+            this.showUnbuy = true;
+          }
         }
       } else {
         addR.loginClick();
@@ -638,7 +634,11 @@ export default {
     unBuySure () {
       addR.clickUnsubscribe();
       this.unBuyDrainage = false;
-      this.showUnbuy = true;
+      if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
+        this.opoutShow = true
+      } else {
+        this.showUnbuy = true
+      }
     },
     getChildData (data) {
       this.isBuy = data;

purchase_H5/src/views/page/jihuo-tencent.vue

@@ -1,16 +1,19 @@
 <template>
   <div class="jihuo-tencent">
-    <img class="img" src="./img/jihuo.jpg" alt="" />
-    <div class="logo">
-      <img src="./img/tencent-logo.png" alt="" @click="go" />
+    <div class="banner">
+      <img class="img" src="./img/jihuo.jpg" alt="" />
+      <div class="logo">
+        <img src="./img/tencent-logo.png" alt="" @click="go" />
+      </div>
     </div>
+
   </div>
 </template>
 
 <script>
 export default {
   methods: {
-    go() {
+    go () {
       window.location = "http://m.v.qq.com/mobile.html?ptag=51";
     },
   },
@@ -19,25 +22,29 @@ export default {
 
 <style lang="scss" scoped>
 .jihuo-tencent {
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  position: relative;
-  .img {
-    width: 100%;
-    height: 100%;
-  }
-  .logo {
+  width: 100vw;
+  height: 100vh;
+  // position: relative;
+  .banner {
     width: 100%;
-    position: absolute;
-    left: 0;
-    bottom: 60px;
-    img {
-      display: block;
-      width: 124px;
-      height: 124px;
-      margin: 0 auto;
+    height: auto;
+    position: relative;
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+    .logo {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 60px;
+      // margin-bottom: -60px;
+      img {
+        display: block;
+        width: 124px;
+        height: 124px;
+        margin: 0 auto;
+      }
     }
   }
 }

purchase_ao/src/views/productV2/addProduct.vue

@@ -16,12 +16,12 @@
       <el-form-item label="activeType">
         <el-input style="width: 300px" v-model="form.activeType" placeholder="科创定义activeType，根据对照表填写"></el-input>
       </el-form-item>
-      <el-form-item label="直冲阈值">
+      <!-- <el-form-item label="直冲阈值">
         <el-input style="width: 300px" v-model="form.threshold" placeholder="如无阈值设置，则填0"></el-input>
         <div style="color: red">
           直冲阈值>0，开启订购自动领取会员，当日订购成功数满足阈值则开始自动领取该产品会员
         </div>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="产品形态">
         <el-select v-model="form.isCompositeProduct" placeholder="请选择" style="width: 300px">
           <el-option label="单产品" :value="0" />
@@ -117,20 +117,27 @@
         </el-upload>
         <span v-if="bannerUrl!==''" @click="bannerRemove()" style="color: #409eff; cursor: pointer">删除</span>
       </el-form-item>
-      <el-form-item label="动态文件(内测)">
+      <el-form-item label="动态文件">
         <div style="display: inline-block;width:250px:height:250px" id="lottie_box"></div>
         <el-upload v-if="svgUrl===''" class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="svgSuccess">
           <i class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         <span v-if="svgUrl!==''" @click="svgRemove()" style="color: #409eff; cursor: pointer">删除</span>
       </el-form-item>
-      <el-form-item label="顶层素材">
+      <el-form-item label="上层素材">
         <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="bannerSuccess2">
           <img v-if="bannerUrl2!==''" :src="bannerUrl2" class="avatar" />
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         <span v-if="bannerUrl2!==''" @click="bannerRemove2()" style="color: #409eff; cursor: pointer">删除</span>
       </el-form-item>
+      <el-form-item label="顶层素材">
+        <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="bannerSuccess3">
+          <img v-if="bannerUrl3!==''" :src="bannerUrl3" class="avatar" />
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+        <span v-if="bannerUrl3!==''" @click="bannerRemove3()" style="color: #409eff; cursor: pointer">删除</span>
+      </el-form-item>
       <el-form-item label="Logo">
         <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="logoSuccess">
           <img v-if="form.logoPic" :src="logoUrl" class="avatar" />
@@ -163,6 +170,9 @@
         <el-radio v-model="productJson[0].productV" label="1" @change="radioChange">V1</el-radio>
         <el-radio v-model="productJson[0].productV" label="2" @change="radioChange">V2</el-radio>
       </el-form-item>
+      <el-form-item label="动画效果">
+        <el-switch v-model="productJson[0].dongHua" active-text="启用" inactive-text="不启用" active-value="1" inactive-value="0" />
+      </el-form-item>
       <!-- 富文本编辑 -->
       <el-form-item>
         <el-tabs type="border-card" style="margin-top: 20px">
@@ -225,7 +235,8 @@ export default {
         rushC: { s: "", e: "" },
         proC: { s: "", e: "" },
         tabC: { s: "", e: "" },
-        memberUrl: ""
+        memberUrl: "",
+        dongHua: "0"
       },], //产品信息json
       form: {
         bannerPics: "",
@@ -251,7 +262,8 @@ export default {
       },
       cpidList: [],
       bannerUrl: "", //banner图片
-      bannerUrl2: "", //banner图片
+      bannerUrl2: "", //上层素材
+      bannerUrl3: "", //顶层素材
       svgUrl: "", //svg文件
       imgUrl: ['', ''],
       logoUrl: "", //logo图片
@@ -323,6 +335,9 @@ export default {
           if (this.imgUrl[2] !== '' && this.imgUrl[2] !== null && this.imgUrl[2]) {
             this.bannerUrl2 = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[2];
           }
+          if (this.imgUrl[3] !== '' && this.imgUrl[3]) {
+            this.bannerUrl3 = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[3];
+          }
           if (this.imgUrl[1] !== '' && this.imgUrl[1] !== null && this.imgUrl[1]) {
             this.svgUrl = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[1];
             this.lottie = lottie.loadAnimation({
@@ -366,6 +381,8 @@ export default {
                 s: "",
                 e: ""
               }
+            } else if (!val.dongHua) {
+              val.dongHua = '0'
             }
             list.push(val)
           });
@@ -397,6 +414,10 @@ export default {
         this.addColors.bgc.ee ? this.addColors.bgc.ee : ''
       ]);
       this.form.bannerPics = JSON.stringify(this.imgUrl);
+      if (this.productJson[0].dongHua === '0' && this.form.bannerUrl2 === '') {
+        this.$message.error('请上传顶层素材!')
+        return false
+      }
       this.form.cacheSeatOne = JSON.stringify(this.productJson)
       this.form.guidancePic = JSON.stringify(this.guidancePic);
       this.$confirm("确定要提交吗？").then((_) => {
@@ -422,6 +443,10 @@ export default {
       this.bannerUrl2 = process.env.VUE_APP_BASE_IMG_URL + file.data;
       this.imgUrl[2] = file.data
     },
+    bannerSuccess3 (file, fileList) {
+      this.bannerUrl3 = process.env.VUE_APP_BASE_IMG_URL + file.data;
+      this.imgUrl[3] = file.data
+    },
     svgSuccess (file) {
       this.svgUrl = process.env.VUE_APP_BASE_IMG_URL + file.data;
       this.imgUrl[1] = file.data
@@ -469,6 +494,10 @@ export default {
     bannerRemove2 () {
       this.bannerUrl2 = ""
       this.imgUrl[2] = ''
+    },
+    bannerRemove3 () {
+      this.bannerUrl3 = ""
+      this.imgUrl[3] = ''
     }
   },
 };

purchase_ao/src/views/productV2/editProduct.vue

@@ -16,12 +16,12 @@
       <el-form-item label="activeType">
         <el-input style="width: 300px" v-model="form.activeType" placeholder="科创定义activeType，根据对照表填写"></el-input>
       </el-form-item>
-      <el-form-item label="直冲阈值">
+      <!-- <el-form-item label="直冲阈值">
         <el-input style="width: 300px" v-model="form.threshold" placeholder="如无阈值设置，则填0"></el-input>
         <div style="color: red">
           直冲阈值>0，开启订购自动领取会员，当日订购成功数满足阈值则开始自动领取该产品会员
         </div>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="产品形态">
         <el-select v-model="form.isCompositeProduct" placeholder="请选择" style="width: 300px">
           <el-option label="单产品" :value="0" />
@@ -117,20 +117,27 @@
         </el-upload>
         <span v-if="bannerUrl !== ''" @click="bannerRemove()" style="color: #409eff; cursor: pointer">删除</span>
       </el-form-item>
-      <el-form-item label="动态文件(内测)">
+      <el-form-item label="动态文件">
         <div style="display: inline-block;width:250px:height:250px" id="lottie_box"></div>
         <el-upload v-if="svgUrl === ''" class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="svgSuccess">
           <i class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         <span v-if="svgUrl !== ''" @click="svgRemove()" style="color: #409eff; cursor: pointer">删除</span>
       </el-form-item>
-      <el-form-item label="顶层素材">
+      <el-form-item label="上层素材">
         <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="bannerSuccess2">
           <img v-if="bannerUrl2 !== ''" :src="bannerUrl2" class="avatar" />
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         <span v-if="bannerUrl2 !== ''" @click="bannerRemove2()" style="color: #409eff; cursor: pointer">删除</span>
       </el-form-item>
+      <el-form-item label="顶层素材">
+        <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="bannerSuccess3">
+          <img v-if="bannerUrl3!==''" :src="bannerUrl3" class="avatar" />
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+        <span v-if="bannerUrl3!==''" @click="bannerRemove3()" style="color: #409eff; cursor: pointer">删除</span>
+      </el-form-item>
       <el-form-item label="Logo">
         <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="logoSuccess">
           <img v-if="form.logoPic" :src="logoUrl" class="avatar" />
@@ -163,6 +170,9 @@
         <el-radio v-model="productJson[0].productV" label="1">V1</el-radio>
         <el-radio v-model="productJson[0].productV" label="2">V2</el-radio>
       </el-form-item>
+      <el-form-item label="动画效果">
+        <el-switch v-model="productJson[0].dongHua" active-text="启用" inactive-text="不启用" active-value="1" inactive-value="0" />
+      </el-form-item>
       <!-- 富文本编辑 -->
       <el-form-item>
         <el-tabs type="border-card" style="margin-top: 20px">
@@ -227,6 +237,7 @@ export default {
         proC: { s: "", e: "", },
         tabC: { s: "", e: "" },
         memberUrl: "",
+        dongHua: "0"
       }], //产品信息json
       form: {
         bannerPics: [],
@@ -253,7 +264,8 @@ export default {
       },
       cpidList: [],
       bannerUrl: "", //banner图片
-      bannerUrl2: "", //banner图片
+      bannerUrl2: "", //上层素材
+      bannerUrl3: "", //顶层素材
       svgUrl: "", //svg文件
       imgUrl: ["", ""],
       logoUrl: "", //logo图片
@@ -292,17 +304,13 @@ export default {
         if (this.imgUrl[0] !== "" && this.imgUrl[0] !== null && this.imgUrl[0]) {
           this.bannerUrl = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[0];
         }
-        if (this.imgUrl[2] !== "" &&
-          this.imgUrl[2] !== null &&
-          this.imgUrl[2]
-        ) {
+        if (this.imgUrl[2] !== "" && this.imgUrl[2] !== null && this.imgUrl[2]) {
           this.bannerUrl2 = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[2];
         }
-        if (
-          this.imgUrl[1] !== "" &&
-          this.imgUrl[1] !== null &&
-          this.imgUrl[1]
-        ) {
+        if (this.imgUrl[3] !== '' && this.imgUrl[3]) {
+          this.bannerUrl3 = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[3];
+        }
+        if (this.imgUrl[1] !== "" && this.imgUrl[1] !== null && this.imgUrl[1]) {
           this.svgUrl = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[1];
           this.lottie = lottie.loadAnimation({
             container: document.getElementById("lottie_box"),
@@ -345,6 +353,8 @@ export default {
               s: "",
               e: ""
             }
+          } else if (!val.dongHua) {
+            val.dongHua = '0'
           }
           list.push(val)
         });
@@ -377,6 +387,10 @@ export default {
           if (!this.form.threshold) this.form.threshold = 0;
           this.form.bannerPics = JSON.stringify(this.imgUrl);
           this.form.guidancePic = JSON.stringify(this.guidancePic);
+          if (this.productJson[0].dongHua === '0' && this.form.bannerUrl2 === '') {
+            this.$message.error('请上传顶层素材!')
+            return false
+          }
           this.form.cacheSeatOne = JSON.stringify(this.productJson);
           this.$post("/productInfo/update/" + this.form.id, this.form).then(
             (res) => {
@@ -406,6 +420,10 @@ export default {
       this.bannerUrl2 = process.env.VUE_APP_BASE_IMG_URL + file.data;
       this.imgUrl[2] = file.data;
     },
+    bannerSuccess3 (file, fileList) {
+      this.bannerUrl3 = process.env.VUE_APP_BASE_IMG_URL + file.data;
+      this.imgUrl[3] = file.data
+    },
     svgSuccess (file) {
       this.svgUrl = process.env.VUE_APP_BASE_IMG_URL + file.data;
       this.imgUrl[1] = file.data;
@@ -446,6 +464,10 @@ export default {
       this.bannerUrl2 = "";
       this.imgUrl[2] = "";
     },
+    bannerRemove3 () {
+      this.bannerUrl3 = ""
+      this.imgUrl[3] = ''
+    }
   },
 };
 </script>

purchase_ao/src/views/schemeV2/channelEdit.vue

@@ -61,10 +61,10 @@
               <el-radio v-model="form.channelPattern" label="0">V1</el-radio>
               <el-radio v-model="form.channelPattern" label="1">V2</el-radio>
             </el-form-item>
-            <el-form-item label="开启WO186域名">
+            <!-- <el-form-item label="开启WO186域名">
               <el-radio v-model="form.wotv" label="0">关闭</el-radio>
               <el-radio v-model="form.wotv" label="1">开启</el-radio>
-            </el-form-item>
+            </el-form-item> -->
             <el-form-item>
               <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
               <el-button @click="close">关闭</el-button>

purchase_ao/src/views/schemeV2/schemeAdd.vue

@@ -30,6 +30,7 @@
                         </el-popover>
                       </el-option>
                     </el-select>
+                    <div style="width:300px;font-size:10px;line-height: 20px;">聚合及炫彩聚合模板，暂不建议使用“简单认证-升级及短信认证-升级”</div>
                   </el-form-item>
                 </el-col>
                 <el-col :span="10">
@@ -118,6 +119,18 @@
               </el-row>
               <el-row :gutter="20">
                 <el-col :span="6">
+                  <el-form-item label="合约退订">
+                    <el-switch style="width: 300px" v-model="extJson.treaty" active-text="启用" inactive-text="不启用" active-value="1" inactive-value="0" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="14">
+                  <el-form-item label="提示文案">
+                    <el-input type="textarea" placeholder="不填写则默认为：合约期外退订无需缴纳违约金，合约期内退订需一次性支付违约金话费xxx元，是否退订" :autosize="{ minRows: 2, maxRows: 4 }" v-model="extJson.treatyText" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="6">
                   <el-form-item label="启用遮罩">
                     <el-switch style="width: 300px" v-model="extJson.isMask" active-text="启用" inactive-text="不启用" active-value="1" inactive-value="0" />
                   </el-form-item>
@@ -496,6 +509,8 @@ export default {
         returnApi: "",
         extendImg: "",
         extendVal: "0",
+        treaty: '0',
+        treatyText: "",
       },
       //策略匹配信息
       rulesform: {
@@ -782,11 +797,6 @@ export default {
                 this.$message.error("遮罩文案未填写");
                 return false;
               }
-              // if (this.extJson.isZoetrope === '1' && (!this.extJson.zoetropeText || this.extJson
-              //     .zoetropeText === "")) {
-              //   this.$message.error('走马灯文案未填写');
-              //   return false
-              // }
               this.form.extJson = JSON.stringify(this.extJson);
               this.rulesform.weeks = this.checkedWeeks
                 .map((i) => weekOptions.findIndex((j) => j == i))
@@ -869,9 +879,9 @@ export default {
                     duration: 3000,
                     offset: 360,
                   });
-                  setTimeout(() => {
-                    window.close();
-                  }, 1200);
+                  // setTimeout(() => {
+                  //   window.close();
+                  // }, 1200);
                 });
               } else {
                 post("/strategyInfoNew/create", this.form).then((res) => {
@@ -897,9 +907,9 @@ export default {
                     duration: 3000,
                     offset: 360,
                   });
-                  setTimeout(() => {
-                    window.close();
-                  }, 1200);
+                  // setTimeout(() => {
+                  //   window.close();
+                  // }, 1200);
                 });
               }
             } else {