purchase/purchase_H5/src/templates/templateTogether/index.vue

<template>
  <div class="togetherNew" id="temp">
    <div class="bannerBox" @click="bannerClick">
      <!-- 底层banner -->

      <img class="banner" v-if="pageData.mainProduct.bannerPics[0] && indexNum >= 0" :class="
          productJson.length > 0 &&
          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>
      <!-- 上层png -->
      <div class="banner2" :class="productJson[0].dongHua && productJson[0].dongHua == '1'? 'cartoon2': ''" v-if="pageData.mainProduct.bannerPics[2] && pageData.mainProduct.bannerPics[2] !== '' && indexNum >= 0">
        <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">
        <img :src="pageData.remarks.extendImg" alt="" />
      </div>
      <!-- <div class="extend" @click="extendClick">
        <img src="../assets/huiyuan.png" alt="" />
      </div> -->
    </div>
    <div v-if="newProduct.length>0">
      <div class="productBox">
        <div class="product" v-for="(item,index) in newProduct" :key="index" :style="clickCss === index? { 'border-color': item.themeColor[0] }: {}" @click="productClick(item.id, index)">
          <div v-if="index === 0">
            <div class="i" v-if="pageData.remarks.mainTagText &&  pageData.remarks.mainTagText!==''">{{pageData.remarks.mainTagText}}</div>
          </div>
          <div v-else-if="index===1">
            <div class="i" v-if="pageData.remarks.viceTagText &&  pageData.remarks.viceTagText!==''">{{pageData.remarks.viceTagText}}</div>
          </div>
          <p class="productName">{{item.productName }}</p>
          <div v-if="index === 0">
            <p class="productPrice">
              ￥{{ pageData.remarks.mainPrice && pageData.remarks.mainPrice!==''?pageData.remarks.mainPrice:item.originalPrice }}
            </p>
            <p class="productSale" v-if="pageData.remarks.mainPrice && pageData.remarks.mainPrice!==''">
              ￥{{ item.originalPrice }}
            </p>
          </div>
          <div v-else-if="index===1">
            <p class="productPrice">
              ￥{{ pageData.remarks.vicePrice && pageData.remarks.vicePrice!==''?pageData.remarks.vicePrice:item.originalPrice }}
            </p>
            <p class="productSale" v-if="pageData.remarks.vicePrice && pageData.remarks.vicePrice!==''">
              ￥{{ item.originalPrice }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 统一认证组件 -->
    <tong-ren ref="refs" v-if="pageData.remarks.attestation === 0" @btnClick="btnClick" :pageData="pageData" :isBuy="isBuy" :indexNum="indexNum">
    </tong-ren>
    <!-- 短信认证组件 -->
    <duan-ren v-else-if="pageData.remarks.attestation === 1" @btnClick="toBuy" :pageData="pageData" :checked="checked" :isBuy="isBuy" :indexNum="indexNum">
    </duan-ren>
    <!-- 简单认证组件 -->
    <jian-ren v-else-if="pageData.remarks.attestation === 2" @btnClick="toNewBuy" :pageData="pageData" :checked="checked" :isBuy="isBuy" :indexNum="indexNum">
    </jian-ren>
    <!-- 统一认证组件---升级 -->
    <unify-modal v-if="
        pageData.remarks.attestation === 3 ||
        pageData.remarks.attestation === 4 ||
        pageData.remarks.attestation === 5
      " @btnClick="btnUnify" :pageData="pageData" :isBuy="isBuy" @hideClick="showConceal = true" @ruleClick="ruleClick" @toBuy="toBuy" @toNewBuy="toNewBuy" :indexNum="indexNum" ref="modal">
    </unify-modal>
    <div v-if="
        pageData.remarks.attestation !== 3 &&
        pageData.remarks.attestation !== 4 &&
        pageData.remarks.attestation !== 5
      ">
      <div class="privacyBox">
        <van-checkbox v-model="checked" checked-color="#fc8940">
          <p style="margin: 0; padding: 0">我已阅读并同意</p>
        </van-checkbox>
        <span class="span" style="color: #fc8940" @click="showConceal = true">《隐私声明》</span>
        <span class="span" style="color: #fc8940" @click="ruleClick">《产品说明》</span>
      </div>
      <div class="textText" :style="
          productJson.length > 0 && productJson[0].rushC.e !== ''
            ? { color: `${productJson[0].rushC.e}` }
            : { color: '#000' }
        ">
        <span :style="
            productJson && productJson[0].rushC.e !== ''
              ? { color: `${productJson[0].rushC.s}` }
              : { color: '#ea1313' }
          ">{{ times }}</span>
        {{
          pageData.remarks.orderText !== "" && pageData.remarks.orderText
            ? pageData.remarks.orderText
            : "用户已抢购成功"
        }}
      </div>
      <div class="tips">
        {{ pageData.remarks.privacyText }}
      </div>
    </div>
    <!-- 用户状态 -->
    <div v-if="user.userid" class="memBox">
      {{ String(user.phone) | formatPhone }}（{{ isBuy }}）
    </div>
    <!-- 说明 -->
    <div class="descbox">
      <div class="main" v-html="pageData.mainProduct.givePhoneInfo"></div>
    </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="{
          backgroundImage: `url(${item.promotePhoto})`,
        }"></div>
    </div>
    <!-- 活动图 -->
    <div v-if="
        pageData.strategyInfo.posterPhoto &&
        pageData.strategyInfo.activityType !== 0
      " class="probox" @click="onGoLink()" :style="{
        backgroundImage: `url(${pageData.strategyInfo.posterPhoto})`,
      }"></div>
    <!-- tab导航 -->
    <div class="tabBox">
      <div class="tab" v-if="pageData.remarks.jiluBtn === '1'" @click="beforeLogin('manual')">
        <img src="../assets/record.png" alt="" />
        <div>订购记录</div>
      </div>
      <div class="tab" v-if="pageData.remarks.jihuoBtn === '1'" @click="jihuo('点击激活')">
        <img src="../assets/liuliang.png" alt="" />
        <div>流量激活</div>
      </div>
      <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'&&isApplet == false" @click="chaxun">
        <img src="../assets/guanzhu.png" alt="" />
        <div>剩余流量查询</div>
      </div>
      <div class="tab" v-if="pageData.remarks.guanzhuBtn === '1'" @click="toPhone()">
        <img src="../assets/fankui.png" alt="" />
        <div>一键反馈</div>
      </div>
      <div class="tab" v-if="pageData.remarks.tuidingBtn === '1'" @click="beforeLogin('unBUy')">
        <img src="../assets/tuiding.png" alt="" />
        <div>退订产品</div>
      </div>
    </div>
    <!-- 使用说明 -->
    <div class="rule" @click="ruleClick">
      <div class="icon"></div>
      <div class="text">产品说明</div>
    </div>
    <rule-modal v-if="showRule" @ruleShow="ruleShow" :pageData="pageData"></rule-modal>
    <!-- 反馈 -->
    <div class="tucaoModal" @click="showTucao = true">
      <div class="icon"></div>
      <div class="text">反馈</div>
    </div>
    <!-- 隐私条款 -->
    <conceal v-model="showConceal" :pageData="pageData"></conceal>
    <vent-modal v-model="showTucao"></vent-modal>
    <!-- 登录弹框组件 -->
    <login-modal v-model="showLogin" :type="type" @getIsBuy="getIsBuy"></login-modal>
    <!-- 退订弹框组件 -->
    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData" @jihuo="jihuo" @memberClick="beforeLogin"></unbuy-modal>
    <!-- 剩余流量查询 -->
    <account-modal v-model="showQr"></account-modal>
    <!-- 订购超时 -->
    <timeout-modal v-model="showTimeout"></timeout-modal>
    <!-- 遮罩 -->
    <newZheZhao v-if="showZhezhao" isZheZhao="1" :indexNum="indexNum"></newZheZhao>
    <!-- 退订挽留 -->
    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false">
      <div class="other-modal modal" @click.stop>
        <img src="../../assets/img/close.png" class="close" @click="unBuyDrainage = false" />
        <div class="text-box">确定要放弃本服务吗?</div>
        <div class="text-box">
          {{ unBuyDrainageText }}
        </div>
        <div class="text-box">不要错过！</div>
        <div class="btn-box">
          <div class="btn left" @click="unBuySure">确定</div>
          <div class="btn right" @click="recommend(pageData.strategyInfo.unsubscribeStrategyList[0])">
            去看看
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 重复订购引流 -->
    <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
    <!-- 合约产品退订提示 -->
    <opOut v-model="opoutShow" @opoutClick="showUnbuy = true"></opOut>
  </div>
</template>

<script>
import {
  orderList,
  changeUserid,
  strategyGetID,
  detMainProduct,
  strategytemplate,
} from "../../api";
import { Dialog } from "vant";
import common from "../../common/common";
import loginModal from "../../components/login.vue";
import addR from "../../common/addRecord";
import ruleModal from "../../components/ruleModal002.vue";
import ventModal from "../../components/helpModal.vue";
import accountModal from "../../components/gongZongHao.vue";
import timeoutModal from "../../components/timeoutModal.vue";
import newZheZhao from "../../components/newZheZhao.vue";
import unbuyModal from "../../components/unbuyModal.vue";
import MgtvApi from "@/util/mgTvJssdk.js";
import conceal from "../../components/hideModal.vue";
import repeatModal from "../../components/repeatModal.vue";
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",
  mixins: [common],
  data () {
    return {
      lottie: {},
      imgUrl: process.env.VUE_APP_IMGS_URL,
      times: 0,
      numberNum: 0,
      showLogin: false,
      showRule: false,
      showTucao: false,
      showQr: false,
      type: "",
      showUnbuy: false,
      showScroll: false,
      unBuyDrainage: false,
      unBuyDrainageText: "",
      newProduct: [],
      clickCss: 0,
      showConceal: false,
      checked: false,
      repeatShow: false,
      isBuy: "未订购",
      phone: "",
      opoutShow: false,
      productJson: [],
    };
  },
  components: {
    loginModal,
    ruleModal,
    ventModal,
    accountModal,
    timeoutModal,
    newZheZhao,
    unbuyModal,
    conceal,
    repeatModal,
    tongRen,
    duanRen,
    jianRen,
    unifyModal,
    opOut,
  },
  filters: {
    formatPhone: (phone) => {
      phone = phone.toString();
      return phone.substr(0, 3) + "****" + phone.substr(7, 11);
    },
  },
  created () {
    // document.title = this.pageData.mainProduct.productName;
    this.phone = this.$route.query.phone;
    this.pageData.mainProduct.isTreaty = 0;
    if (this.pageData.strategyInfo.viceProductStrategyList !== null && this.pageData.strategyInfo.viceProductStrategyList.length > 0) {
      this.productList();
    } else {
      this.newProduct.push(this.pageData.mainProduct);
    }
    if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== "" && this.pageData.remarks.privacy !== null) {
      if (this.pageData.remarks.privacy === "1") {
        this.checked = true;
      }
    }
    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
      this.productJson = this.pageData.mainProduct.cacheSeatOne;
    }
    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 () {
    addR.showSP();
    this.callSvg();
  },
  methods: {
    // 一键拨号反馈
    toPhone () {
      addR.dialNumber()
      let phone = 4000600611;
      window.location.href = "tel://" + phone;
    },
    extendClick () {
      if (this.pageData.remarks.extendVal && this.pageData.remarks.extendVal === "1") {
        if (this.isBuy === "未订购") {
          Dialog({
            message: "您还未订购成功，请继续通过此页面订购，即可领取会员；",
            theme: "round-button",
          });
        } else if (this.isBuy === "已订购") {
          Dialog({
            message:
              " 您已订购成功，请留意订购成功短信，点击其中链接领取会员；",
            theme: "round-button",
          });
        } else if (this.isBuy === "已退订") {
          Dialog({
            message: "您已退订",
            theme: "round-button",
          });
        }
      }
    },
    btnUnify (phone) {
      this.phone = phone;
      this.openIframe();
    },
    btnClick () {
      if (this.checked === false) {
        this.$toast.fail("请先勾选隐私声明");
      } else {
        this.openIframe();
      }
    },
    ruleShow () {
      this.showRule = false;
    },
    async productClick (val, index) {
      this.indexNum = -1;
      this.clickCss = index;
      this.pageData.mainProduct.isTreaty = index;
      setTimeout(() => {
        this.indexNum = index;
      }, 1);
      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 now = new Date().getTime();
        let times = (now - 1600476800000) / 180000;
        if (this.pageData.remarks.attestation === 3 || this.pageData.remarks.attestation === 4 || this.pageData.remarks.attestation === 5) {
          this.$refs.modal.times = String(Math.ceil(times * add) + start);
        }
        this.times = String(Math.ceil(times * add) + start);
      } else if (index === 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;
        if (this.pageData.remarks.attestation === 3 || this.pageData.remarks.attestation === 4 || this.pageData.remarks.attestation === 5) {
          this.$refs.modal.times = String(Math.ceil(times * add) + start);
        }
        this.times = String(Math.ceil(times * add) + start);
      }
      if (this.pageData.channl.edition && this.pageData.channl.edition === 1) {
        let info = await detMainProduct({ productId: val });
        let viceProduct = this.pageData.viceJson;
        let mainJson = this.pageData.mainJson;
        if (index === 1) {
          let mainProduct = {
            activeType: info.data.activeType,
            bannerPics: [
              viceProduct.bannerImg,
              viceProduct.jsonImg,
              viceProduct.upImg,
              viceProduct.topImg,
            ],
            bgColor: [
              viceProduct.pageBgcol,
              "",
              viceProduct.orderBgcol,
              viceProduct.orderBdcol,
            ],
            cacheSeatOne: [
              {
                dongHua: viceProduct.drawVal,
                memberUrl: info.data.cacheSeatOne[0].memberUrl,
                proC: {
                  e: viceProduct.hideCol,
                  s: viceProduct.pageTextcol,
                },
                productV: viceProduct.productV,
                rushC: {
                  e: viceProduct.orderTextcol,
                  s: viceProduct.orderNumcol,
                },
                tabC: {
                  e: viceProduct.tabVicecol,
                  s: viceProduct.tabMaincol,
                },
                btnUrl: "",
              },
            ],
            cpid: info.data.cpid,
            discountInfo: null,
            flowJumpUrl: info.data.flowJumpUrl,
            givePhoneInfo: info.data.givePhoneInfo,
            guidancePic: {
              c: viceProduct.orderImg,
              p: viceProduct.explainImg,
            },
            id: info.data.id,
            isCompositeProduct: info.data.isCompositeProduct, //是否复合产品
            logoPic: mainJson.logoPic,
            manualInfo: info.data.manualInfo,
            memberName: info.data.memberName,
            orderingInfo: info.data.orderingInfo,
            originalPrice: info.data.originalPrice,
            pageTitle: mainJson.pageTitle,
            productName: info.data.productName,
            productType: info.data.productType,
            promotionPic: info.data.promotionPic,
            pushJumpUrl: info.data.pushJumpUrl,
            remark: info.data.remark,
            remark1: info.data.remark1,
            remark2: info.data.remark2,
            remark3: mainJson.remark3,
            spid: info.data.spid,
            themeColor: [viceProduct.btnTopcol, viceProduct.btnBotcol],
          };
          this.productJson = mainProduct.cacheSeatOne;
          this.pageData.mainProduct = mainProduct;
        } else if (index === 0) {
          let mainProduct = {
            activeType: info.data.activeType,
            bannerPics: [
              mainJson.bannerImg,
              mainJson.jsonImg,
              mainJson.upImg,
              mainJson.topImg,
            ],
            bgColor: [
              mainJson.pageBgcol,
              "",
              mainJson.orderBgcol,
              mainJson.orderBdcol,
            ],
            cacheSeatOne: [
              {
                dongHua: mainJson.drawVal,
                memberUrl: info.data.cacheSeatOne[0].memberUrl,
                proC: {
                  e: mainJson.hideCol,
                  s: mainJson.pageTextcol,
                },
                productV: mainJson.productV,
                rushC: {
                  e: mainJson.orderTextcol,
                  s: mainJson.orderNumcol,
                },
                tabC: {
                  e: mainJson.tabVicecol,
                  s: mainJson.tabMaincol,
                },
                btnUrl: "",
              },
            ],
            cpid: info.data.cpid,
            discountInfo: null,
            flowJumpUrl: info.data.flowJumpUrl,
            givePhoneInfo: info.data.givePhoneInfo,
            guidancePic: {
              c: mainJson.orderImg,
              p: mainJson.explainImg,
            },
            id: info.data.id,
            isCompositeProduct: 0, //是否复合产品
            logoPic: mainJson.logoPic,
            manualInfo: info.data.manualInfo,
            memberName: info.data.memberName,
            orderingInfo: info.data.orderingInfo,
            originalPrice: info.data.originalPrice,
            pageTitle: mainJson.pageTitle,
            productName: info.data.productName,
            productType: info.data.productType,
            promotionPic: info.data.promotionPic,
            pushJumpUrl: info.data.pushJumpUrl,
            remark: info.data.remark,
            remark1: info.data.remark1,
            remark2: info.data.remark2,
            remark3: mainJson.remark3,
            spid: info.data.spid,
            themeColor: [mainJson.btnTopcol, mainJson.btnBotcol],
          };

          this.productJson = mainProduct.cacheSeatOne;
          this.pageData.mainProduct = mainProduct;
        }
        this.param.cpid = info.data.cpid;
        this.param.spid = info.data.spid;
        let title = this.pageData.mainProduct.productName
        document.title = title;
        MgtvApi.setWebviewTitle({
          title: title,
        });
        this.getIsBuy()
        this.$store.commit("setPageData", this.pageData);

      } else {
        detMainProduct({
          productId: val,
        }).then(async (res) => {
          if (res.data.cacheSeatOne && res.data.cacheSeatOne !== null) {
            this.productJson = res.data.cacheSeatOne;
          }
          this.pageData.mainProduct = res.data;
          this.param.cpid = res.data.cpid;
          this.param.spid = res.data.spid;
          document.title = res.data.remark;
          this.$store.commit("setPageData", this.pageData);
          this.getIsBuy()
        });
      }
      this.callSvg();
    },
    result (a, b) {
      return (Number(a) - Number(b)).toFixed(2);
    },
    ruleClick () {
      this.showRule = true;
      localStorage.setItem("startTime", new Date().getTime());
    },
    bannerClick () {
      addR.clickBanner();
    },
    chaxun () {
      addR.clickFollow();
      this.showQr = true;
    },
    async beforeLogin (type) {
      this.type = type;
      if (this.user.userid) {
        if (type === "manual" || type === "member") {
          this.toLink(type);
        } else if (type === "unBUy") {
          addR.unBuyClick();
          if (
            this.pageData.strategyInfo.unsubscribeStrategyList !== null &&
            this.pageData.strategyInfo.unsubscribeStrategyList.length > 0
          ) {
            if (
              this.pageData.channl.edition &&
              this.pageData.channl.edition === 1
            ) {
              let productId = await strategytemplate(
                this.pageData.strategyInfo.unsubscribeStrategyList[0]
              );
              let drainageRes = await detMainProduct({
                productId: productId.data.primaryProductId,
              });
              this.unBuyDrainageText = drainageRes.data.productName;
            } else {
              let productId = await strategyGetID({
                id: this.pageData.strategyInfo.unsubscribeStrategyList[0],
              });
              let drainageRes = await detMainProduct({
                productId: productId.data.primaryProductId,
              });
              this.unBuyDrainageText = drainageRes.data.productName;
            }
            this.unBuyDrainage = true;
          } else {
            if (
              this.pageData.remarks.treaty &&
              this.pageData.remarks.treaty === "1"
            ) {
              this.opoutShow = true;
            } else {
              this.showUnbuy = true;
            }
          }
        }
      } else if (type === "unBUy") {
        addR.unBuyClick();
        if (
          this.pageData.strategyInfo.unsubscribeStrategyList !== null &&
          this.pageData.strategyInfo.unsubscribeStrategyList.length > 0
        ) {
          if (
            this.pageData.channl.edition &&
            this.pageData.channl.edition === 1
          ) {
            let productId = await strategytemplate(
              this.pageData.strategyInfo.unsubscribeStrategyList[0]
            );
            let drainageRes = await detMainProduct({
              productId: productId.data.primaryProductId,
            });
            this.unBuyDrainageText = drainageRes.data.productName;
          } else {
            let productId = await strategyGetID({
              id: this.pageData.strategyInfo.unsubscribeStrategyList[0],
            });
            let drainageRes = await detMainProduct({
              productId: productId.data.primaryProductId,
            });
            this.unBuyDrainageText = drainageRes.data.productName;
          }
          this.unBuyDrainage = true;
        } else {
          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) {
    //   let cpid = this.$store.state.pageData.mainProduct.cpid;
    //   let spid = this.$store.state.pageData.mainProduct.spid;
    //   let isCompositeProduct =
    //     this.$store.state.pageData.mainProduct.isCompositeProduct;
    //   let activeType = this.$store.state.pageData.mainProduct.activeType;
    //   let url;
    //   if (type === "manual") {
    //     addR.clickOrderRecord();
    //     url = "/order001";
    //   } else if (type === "member") {
    //     addR.memberClick();
    //     if (
    //       this.productJson[0].memberUrl &&
    //       this.productJson.length > 0 &&
    //       this.pageData.mainProduct.cacheSeatOne[0].memberUrl !== ""
    //     ) {
    //       window.location.href = this.productJson[0].memberUrl;
    //       return false;
    //     } else {
    //       if (this.pageData.mainProduct.isCompositeProduct === 2) {
    //         url = "/member002";
    //       } else {
    //         url = "/member001";
    //       }
    //     }
    //   }
    //   this.$router.push({
    //     path: url,
    //     query: {
    //       cpid: cpid,
    //       spid: spid,
    //       isCompositeProduct: isCompositeProduct,
    //       activeType: activeType,
    //     },
    //   });
    // },
    // 推荐产品跳转
    recommend (val) {
      // this.$store.commit("setTempName", "loading");
      let edition = this.$store.state.pageData.channl.edition;
      if (edition && edition === 1) {
        strategytemplate(val).then(async (res) => {
          let info = await detMainProduct({
            productId: res.data.primaryProductId,
          });
          let productJson = JSON.parse(res.data.productJson).product;
          let mainProduct = {
            activeType: info.data.activeType,
            bannerPics: [
              productJson.bannerImg,
              productJson.jsonImg,
              productJson.upImg,
              productJson.topImg,
            ],
            bgColor: [
              productJson.pageBgcol,
              "",
              productJson.orderBgcol,
              productJson.orderBdcol,
            ],
            cacheSeatOne: [
              {
                dongHua: productJson.drawVal,
                memberUrl: info.data.cacheSeatOne[0].memberUrl,
                proC: {
                  e: productJson.hideCol,
                  s: productJson.pageTextcol,
                },
                productV: productJson.productV,
                rushC: {
                  e: productJson.orderTextcol,
                  s: productJson.orderNumcol,
                },
                tabC: {
                  e: productJson.tabVicecol,
                  s: productJson.tabMaincol,
                },
                btnUrl: "",
              },
            ],
            cpid: info.data.cpid,
            discountInfo: null,
            flowJumpUrl: info.data.flowJumpUrl,
            givePhoneInfo: info.data.givePhoneInfo,
            guidancePic: {
              c: productJson.orderImg,
              p: productJson.explainImg,
            },
            id: res.data.primaryProductId,
            isCompositeProduct: 0, //是否复合产品
            logoPic: productJson.logoPic,
            manualInfo: info.data.manualInfo,
            memberName: info.data.memberName,
            orderingInfo: info.data.orderingInfo,
            originalPrice: info.data.originalPrice,
            pageTitle: productJson.pageTitle,
            productName: info.data.productName,
            productType: info.data.productType,
            promotionPic: info.data.promotionPic,
            pushJumpUrl: info.data.pushJumpUrl,
            remark: info.data.remark,
            remark1: info.data.remark1,
            remark2: info.data.remark2,
            remark3: productJson.remark3,
            spid: info.data.spid,
            themeColor: [productJson.btnTopcol, productJson.btnBotcol],
          };
          let recommend = [];
          if (
            res.data.recommendStrategyIds.length > 0 &&
            res.data.recommendStrategyIds
          ) {
            res.data.recommendStrategyIds.forEach(async (val) => {
              let list = await strategytemplate(val);
              recommend.push(list.data);
            });
          }
          let pageData = {
            mainProduct: mainProduct,
            channl: {
              channelKey: this.pageData.channl.channelKey,
              channelName: this.pageData.channl.channelName,
              fullCode: this.pageData.channl.fullCode,
              edition: this.pageData.channl.edition,
            },
            recommend: recommend,
            remarks: JSON.parse(res.data.extJson), //策略信息
            // viceJson: JSON.parse(res.data.viceJson), //副产品json
            otherJson: JSON.parse(res.data.otherJson), //备用json
            strategyInfo: res.data,
          };
          pageData.strategyInfo.recommendStrategyList =
            res.data.recommendStrategyIds;
          pageData.strategyInfo.unsubscribeStrategyList =
            res.data.unsubscribeStrategyIds;
          pageData.strategyInfo.viceProductStrategyList =
            res.data.viceProductIds;
          if (JSON.parse(res.data.productJson).viceProduct) {
            pageData.viceJson = JSON.parse(res.data.productJson).viceProduct;
          }
          let title = mainProduct.pageTitle !== '' ? mainProduct.pageTitle : mainProduct.productName
          document.title = title;
          MgtvApi.setWebviewTitle({
            title: title,
          });
          pageData.mainJson = JSON.parse(res.data.productJson).product;
          this.$store.commit("setPageData", pageData);
          this.getIsBuy()
          setTimeout(() => {
            this.callSvg()
          }, 200)
          this.$store.commit("setTempName", res.data.templateCode);
        });
      } else {
        strategyGetID({ id: val }).then(async (res) => {
          if (res.data.strategyStatus === 1) {
            let data = res.data;
            let info = await detMainProduct({
              productId: data.primaryProductId,
            });
            let recommend = [];
            if (
              data.recommendStrategyList !== null &&
              data.recommendStrategyList.length > 0
            ) {
              for (let i = 0; i < data.recommendStrategyList.length; i++) {
                let list = await strategyGetID({
                  id: data.recommendStrategyList[i],
                });
                recommend.push(list.data);
              }
            }
            let pageData = {
              mainProduct: info.data,
              strategyInfo: data,
              remarks: data.extJson,
              channl: {
                channelKey: localStorage.getItem("key"),
              },
              recommend: recommend,
            };
            MgtvApi.setWebviewTitle({
              title: pageData.mainProduct.productName,
            });
            document.title = pageData.mainProduct.productName;
            this.$store.commit("setPageData", pageData);
            this.getIsBuy()
            setTimeout(() => {
              this.callSvg()
            }, 200)
            this.$store.commit("setTempName", data.templateCode);
          } else {
            this.$toast.fail("当前策略未生效");
          }
        });
      }
      this.unBuyDrainage = false;
    },
    // 点击确定
    unBuySure () {
      addR.clickUnsubscribe();
      this.unBuyDrainage = false;
      if (
        this.pageData.remarks.treaty &&
        this.pageData.remarks.treaty === "1"
      ) {
        this.opoutShow = true;
      } else {
        this.showUnbuy = true;
      }
    },
    getChildData (data) {
      this.isBuy = data;
    },
    async productList () {
      this.newProduct.push(this.pageData.mainProduct);
      let list = this.pageData.strategyInfo.viceProductStrategyList;
      for (let i = 0; i < list.length; i++) {
        let res = await detMainProduct({
          productId: list[i],
        });
        this.newProduct.push(res.data);
      }
    },
    // 调用svg动画
    callSvg () {
      let lottieBox = document.getElementById("lottie_box");
      lottieBox.innerHTML = "";
      setTimeout(() => {
        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],
          });
        }
      }, 200);
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>