<template>
  <div>
    <div style="height: 100vh;overflow: auto">
      <div class="group-index" ref="index" v-if="groupDetail" style="min-height: 120vh">
        <swiper :options="swiperOption" class="banner" ref="mySwiper">
          <swiper-slide
            v-if="groupDetail.goods_desc"
            v-for="(data,index) in groupDetail.goods_desc.img"
            :key="index"
          >
            <img :src="data.url" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <!-- <img
          :src="refIcon"
          class="ref-icon shake"
          @click="goToActivity();buttonClick('功能','生成海报')"
        v-if="groupDetail.is_auth_user === 1&&!closeStatus">-->
        <img
          :src="couponTipImg"
          class="ref-icon shake"
          @click="couponPopup=true"
          v-if="closeStatus"/>
        <div class="head">
          <div class="title">{{groupDetail.name}}</div>
          <span class="detail">{{groupDetail.goods_desc.desc}}</span>
          <div class="price">
            <span class="price-content">￥{{groupDetail.current_price/100}}元</span>
            <span
              style="text-decoration:line-through;color: #bbb;font-size: 14px"
              v-if="groupDetail.goods_type === 1 && groupDetail.original_price > groupDetail.current_price"
            >￥{{groupDetail.original_price/100}}</span>
          </div>
        </div>
        <div class="head-icon">
          <img
            class="icon"
            v-for="(data,index) in groupDetail.header_url"
            v-if="index<5"
            :src="data"
            :key="data"/>
          <img class="more" :src="moreUrl" />
          <span class="has">已售{{groupDetail.has_group_num}}件</span>
        </div>
        <div
          class="welfare"
          v-if="groupDetail.head_welfare && groupDetail.head_welfare !== '' && groupDetail.head_welfare !== null"
        >团长福利：{{groupDetail.head_welfare}}</div>
        <div class="main-detail">
          <div class="tab-content">
            <div
              :class="{'tab-btn':true,active:tabType}"
              @click="tabType=true;buttonClick('展示','图文详情')"
            >图文详情</div>
            <div
              :class="{'tab-btn':true,active:!tabType}"
              @click="tabType=false;buttonClick('展示','购买须知')"
            >购买须知</div>
          </div>
          <div v-if="tabType" class="detail">
            <div v-html="groupDetail.desc.detail" v-lazy-container="{ selector: 'img' }" class="detail-content"></div>
          </div>
          <div v-if="!tabType" class="qa-block">
            <div class="qa-content qaDetail" v-html="groupDetail.desc.qa"></div>
          </div>
        </div>
        <div v-if="groupDetail.desc.customer_service[0]">
          <mt-popup v-model="popupVisible">
            <div class="pop-block">
              <img v-if="popType" :src="qrCode" />
              <img v-if="!popType" :src="groupDetail.desc.customer_service[0].url" />
              <div>
                <span v-if="popType" v-html="popcontentW"></span>
                <span v-if="!popType" v-html="popcontentT"></span>
              </div>
              <img class="close" :src="closeUrl" @click="popupVisible = false" />
            </div>
          </mt-popup>
        </div>
        <mt-popup v-model="popFill" :closeOnClickModal="false">
          <div class="pop-fill">
            您好，本次拼团已经结束。您可以选择重新开团或单独购买
            <div class="btn-block">
              <div class="btn" @click="rePlay()">重新开团</div>
            </div>
          </div>
        </mt-popup>
        <!-- 优惠券弹窗 -->
        <mt-popup
          class="couponPop"
          popup-transition="popup-fade"
          v-model="couponPopup"
          :closeOnClickModal="false"
        >
          <div class="box">
            <img class="bg" :src="couponBg" alt />
            <img class="closeImg" @click="closeCouponPop" :src="closeImg" alt />
            <div class="content">
              <p>您的好友<span class="name">{{shareName}}</span>赠您</p>
              <img class="btn couponBtn" ref="couponBtn" @click="getCoupon" :src="couponBtn" alt />
            </div>
          </div>
        </mt-popup>
        <mt-popup
          v-model="refVisible"
          style="background-color: transparent;margin-top: -80vw;margin-left: -40vw;transform: none"
        >
          <div
            :style="{backgroundImage:`url(${refBg})`}"
            class="ref-content"
            v-if="groupDetail.share_desc.refImg && groupDetail.share_desc.refImg.length > 0"
          >
            <div class="tips">长按保存图片</div>
          </div>
          <div
            class="img-cvs"
            id="capture"
            ref="imageWrapper"
            v-if="groupDetail.share_desc.refImg && groupDetail.share_desc.refImg.length > 0"
          >
            <img :src="groupDetail.share_desc.refImg[0].url" />
            <div id="qrcode" class="qrcode"></div>
          </div>
          <img :src="dataURL" class="cvs-img" />
        </mt-popup>
        <div v-if="groupDetail.status === 1 && invite_code_f">
          <div v-if="couponShadow" class="couponBox">您有{{couponInfo.money/100}}元优惠券可使用</div>
          <footer v-if="groupDetail.goods_type && groupDetail.goods_type === 2">
            <div
              class="btn"
              @click="showTeacher();buttonClick('老师','客服')"
              v-if="groupDetail.desc.customer_service[0]"
            >
              <img :src="weChatIcon" />
            </div>
            <div class="btn big price full" v-if="groupData && groupData.status !== 0">
              <div v-if="groupId">该团已满</div>
            </div>
            <div
              :class=" groupData && groupData.status !== 0 ? 'btn big price':'btn big'"
              @click="groupPay(0);buttonClick('购买按钮',groupId ? '重新开团':'单独购买')"
              :id="groupId ? 'reGroup':'singleBuy'"
            >
              <span v-if="!groupId">￥{{groupDetail.original_price/100}}</span>
              <div v-if="!groupId">单独购</div>
              <span v-if="groupId">￥{{groupDetail.current_price/100}}</span>
              <div v-if="groupId">重新开团</div>
            </div>
            <div
              class="btn big price"
              @click="groupPay(1);buttonClick('购买按钮',groupId ? '立即参团':'创建团')"
              :id="groupId ? 'joinGroup':'newGroup'"
              v-if="!groupData || groupData.status === 0"
            >
              <span>￥{{groupDetail.current_price/100}}</span>
              <div v-if="!groupId">{{groupDetail.desc.group_number}}人团</div>
              <div v-if="groupId">立即参团</div>
            </div>
          </footer>
          <footer v-if="groupDetail.goods_type && groupDetail.goods_type !== 2">
            <div
              class="btn"
              @click="showTeacher();buttonClick('功能','客服')"
              v-if="groupDetail.desc.customer_service[0]"
            >
              <img :src="weChatIcon" />
            </div>
            <div
              class="btn big price"
              v-if="groupDetail.current_price>0"
              @click="groupPay(1);buttonClick('购买按钮','直购购买')"
            >
              <span>￥{{groupDetail.current_price/100}}</span>
              <div>立即购买</div>
            </div>
            <div
              class="btn big price"
              v-if="groupDetail.current_price==0"
              @click="groupPay(1);buttonClick('购买按钮','直购购买')"
            >
              <!-- <span>￥{{groupDetail.current_price/100}}</span> -->
              <div class="free">免费领</div>
            </div>
          </footer>
        </div>
        <div v-if="groupDetail.goods_type==4" class="couponBox">代金券自领取成功后{{groupDetail.goods_desc.time_limit}}小时有效</div>
        <div v-if="groupDetail.status !== 1">
          <footer>
            <div style="color: #888">已售罄</div>
          </footer>
        </div>
      </div>
    </div>
    <login-page
      :bind-mobile="bindMobile"
      v-if="groupDetail"
      :groupDetail="groupDetail"
      @goToBuyPage="goToBuyPage"
    ></login-page>
  </div>
</template>

<script>
  import "swiper/dist/css/swiper.css";
  import { swiper, swiperSlide } from "vue-awesome-swiper";
  import { Popup } from "mint-ui";
  import comment from "../../util/common";
  import { Toast } from "vant";
  import {
    getwechatParam,
    getGoodsDetailApi,
    bindMobileApi,
    getUserDetailApi,
    sendMobileCodeApi,
    getGroupDetailApi,
    getStatusWechatApi,
    getCouponListApi,
    getAutomationCouponApi,
    getInvitedCouponApi,
    getReceiveCouponApi,
    getPassGoodInfoApi
  } from "../../service/api";
  import refBg from "../../assets/refBg.png";
  import moreUrl from "../../assets/moreIcon.png";
  import weChatIcon from "../../assets/wechatIcon.png";
  import weChatQrUrl from "../../assets/weChatCode.png";
  import loginPage from "./login";
  import closeUrl from "../../assets/closemy.png";
  import refIcon from "../../assets/refIcon.png";
  import couponBtn from "../../assets/activity/btn@2x.png";
  import couponBg from "../../assets/activity/popup@2x.png";
  import closeImg from "../../assets/activity/close.png";
  import couponTip from "../../assets/activity/popup_btn.png";
  import common from '../../util/common';
  export default {
    name: "index",
    components: {
      swiper,
      swiperSlide,
      loginPage,
      [Popup.name]: Popup
    },
    data() {
      return {
        refBg: refBg,
        bindMobile: {
          show: false,
          mobile: "",
          img_code: "",
          verify_code: "",
          flag: false
        },
        join: false,
        popType: false,
        popFill: false,
        popupVisible: false,
        refVisible: false,
        tabType: true,
        popcontentW: `您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`,
        popcontentT: `为了更好地为您进行课程服务，<br>请扫码添加老师二维码`,
        qrCode: weChatQrUrl,
        weChatIcon: weChatIcon,
        closeUrl: closeUrl,
        moreUrl: moreUrl,
        refIcon: refIcon,
        swiperOption: {
          pagination: {
            el: ".swiper-pagination"
          }
        },
        QRCodeB: false,
        payFlag: true,
        dataURL: null,
        user_id: null,
        invite_code_f: true,
        invite_code: "",
        this_code: "",
        shopId: "",
        buyType: "",
        groupId: null,
        groupDetail: false,
        groupData: null,
        couponInfo: {},
        couponShadow: false,
        groupSuc: "",
        couponBg: couponBg,
        couponBtn: couponBtn,
        couponPopup: false,
        shareName: this.$route.query.nickname,
        closeImg: closeImg,
        couponTipImg: couponTip,
        closeStatus: false
      };
    },
    mounted() {
      this.getDetail();
      // document.body.addEventListener('focusout', () => { //软键盘关闭事件
      // document.documentElement.scrollTop = 0
      // document.body.scrollTop = 0
      //   console.log("键盘收起")
      // })
    },
    methods: {
      getCoupon() {
        this.$sa.quick('trackHeatMap',this.$refs.couponBtn)
        getReceiveCouponApi(this.$route.query.shopId).then(res => {
          this.couponShadow = true;
          this.couponPopup = false;
          this.closeStatus = false;
          Toast("领取成功");
        });
      },
      closeCouponPop() {
        this.couponPopup = false;
        this.closeStatus = true;
      },
      goToBuyPage(type) {
        this.buyType = type
        let query = { shopId: this.shopId, invite_code: this.invite_code };
        let invite = this.invite_code;

        if (this.groupId) {
          query.group_order_id = this.groupId;
        }
        console.log(this.buyType,333);
        if (this.buyType === 0 && !this.groupId) {
          query.type = "single";
          this.buyType = "single";
        } else if (this.buyType === 0 && this.groupId) {
          // 已购买生成团
          this.$router.push({
            name: "buy",
            query: {
              shopId: this.shopId,
              invite_code: this.invite_code,
              type: ""
            }
          });
          // debugger
          // window.location.reload();
          return false;
        } else {
          query.type = "";
        }
        if (localStorage.getItem("gdt_vid")) {
          query.gdt_vid = localStorage.getItem("gdt_vid");
        }

        if (window.location.href.indexOf("cct_user_id") > -1) {
          // console.log(comment.getParamhref())
          // console.log(comment.getUrlParam())
          query.cct_user_id = comment.getParamhref().cct_user_id;
        }
        this.$sa.track("buyCourse", {
          buyType:
              this.groupDetail.goods_type === 2 && this.buyType === 0
                  ? "团购"
                  : "直购",
          goodsID: this.shopId,
          salesType: invite ? invite.split("-")[1] : "null",
          salesID: invite ? Number(invite.split("-")[2]) : 0,
          gdt_vid: comment.getUrlParam().gdt_vid,
          cct_user_id: comment.getUrlParam().cct_user_id,
          redeem_code: comment.getUrlParam().redeem_code,
        });
        // debugger
        this.$router.push({
          name: "buy",
          query: query
        });
        this.$nextTick(() => {
          this.payFlag = true;
        });
      },
      goToActivity() {
        let query = {};
        if (window.location.href.indexOf("shopId") > -1) {
          query.shopId = this.$route.query.shopId;
        }
        if (window.location.href.indexOf("groupId") > -1) {
          query.groupId = this.$route.query.groupId;
        }
        if (window.location.href.indexOf("invite_code") > -1) {
          query.invite_code = this.$route.query.invite_code;
        }
        this.$router.push({ name: "activity", query: query });
      },
      enableShare: function(option) {
        let that = this;
        getwechatParam({
          api_list: "onMenuShareAppMessage,onMenuShareTimeline",
          url: window.location.href.split("#")[0]
        }).then(wechatRes => {
          wx.config({
            debug: false,
            appId: wechatRes.appId,
            timestamp: parseInt(wechatRes.timestamp),
            nonceStr: wechatRes.nonceStr,
            signature: wechatRes.signature,
            jsApiList: wechatRes.jsApiList
          });
          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: option.product_title, // 分享标题
              desc: option.desc, // 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl:
                  option.shareIcon ||
                  "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
              success: function() {
                console.log("分享成功");
              },
              cancel: function() {
                // alert("失败")
                console.log("分享失败");
              }
            });
            wx.onMenuShareAppMessage({
              title: option.product_title, // 分享标题
              desc: option.desc, // 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl:
                  option.shareIcon ||
                  "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
              success: function() {},
              cancel: function() {}
            });
          });
        });
      },
      handleInviteCode() {
        if (!this.invite_code) {
          this.this_code = "CC-USER-" + this.user_id;
        } else {
          let invite_code = this.invite_code.split("-");
          if (
              invite_code.length > 2 &&
              (invite_code[1] === "TEACHER" || invite_code[1] === "XXMM")
          ) {
            invite_code[1] = "USER";
          }
          let code = `${invite_code[0]}-${invite_code[1]}`;
          this.this_code = `${code}-${this.user_id}`;
        }
      },
      onShare: function(type) {
        this.handleInviteCode();
        let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${this.this_code}`;
        this.enableShare({
          product_title: this.groupDetail.share_desc.title,
          desc: this.groupDetail.share_desc.content,
          shareIcon: this.groupDetail.share_desc.img.length !== 0 ? this.groupDetail.share_desc.img[0].url : '',
          shareUrl: URL
        });
      },
      toDataURLBase64(src, callback) {
        let xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
          let fileReader = new FileReader();
          fileReader.onloadend = function() {
            callback(fileReader.result);
          };
          fileReader.readAsDataURL(xhttp.response);
        };
        xhttp.responseType = "blob";
        xhttp.open("GET", src, true);
        xhttp.send();
      },
      // 初始化
      getDetail() {
        if (window.location.href.indexOf("invite_code") > -1) {
          this.invite_code = this.$route.query.invite_code;
          let l = this.invite_code.split("-").length;
          console.log(l,470)
          if (l === 2) {
            this.invite_code_f = false;
          }
        }
        // if(window.location.href.indexOf('gdt_vid')> -1){
        //   comment.getUrlParam().gdt_vid
        //   console.log(comment.getUrlParam().gdt_vid)
        // }
        if (this.$route.query.invite_code) {
          this.invite_code = this.$route.query.invite_code;
        }

        if (window.location.href.indexOf("shopId") > -1) {
          this.shopId = this.$route.query.shopId;
          getPassGoodInfoApi(this.shopId).then(res => {
            res.desc = JSON.parse(res.desc);
            res.goods_desc = JSON.parse(res.goods_desc);
            res.share_desc = JSON.parse(res.share_desc);
            //商品下架跳转绑定商品
            if (res.status === 2 && res.bind_goods_id) {
              this.$router.push({
                name: "buyDetail",
                query: {
                  shopId: res.bind_goods_id,
                  invite_code: this.invite_code
                }
              });
              this.getDetail();
              return;
            }
            Toast.clear()
            this.groupDetail = res;
            sessionStorage.setItem('groupDetail', res)
            this.groupDetail.desc.detail = comment.letslazyload(this.groupDetail.desc.detail)
            for (let i = 0; i < this.groupDetail.header_url.length; i++) {
              this.groupDetail.header_url[i] = this.groupDetail.header_url[
                  i
                  ].replace("http://", "https://");
            }
            this.groupDetail.desc.detail = this.groupDetail.desc.detail.replace(
                /http:\/\//g,
                "https://"
            );
            this.groupDetail.desc.qa = this.groupDetail.desc.qa.replace(
                /http:\/\//g,
                "https://"
            );
            if (
                this.groupDetail.share_desc.refImg &&
                this.groupDetail.share_desc.refImg.length === 1
            ) {
              this.groupDetail.share_desc.refImg[0].url = this.groupDetail.share_desc.refImg[0].url.replace(
                  "http://",
                  "https://"
              );
              let _this = this;
              this.toDataURLBase64(
                  this.groupDetail.share_desc.refImg[0].url,
                  function(avatarUrl) {
                    _this.groupDetail.share_desc.refImg[0].url = avatarUrl;
                  }
              );
            }
            let invite = this.invite_code;
            this.$sa.track("viewCourseDetail190726", {
              goodsID: this.groupDetail.id.toString(),
              courseCate:
                  this.groupDetail.course_type === 1 ? "体验课" : "正式课",
              lessonNumber: this.groupDetail.watch_num,
              goodsName: this.groupDetail.name,
              coursePrice: Number(this.groupDetail.original_price / 100),
              discountPrice: Number(this.groupDetail.current_price / 100),
              courseID: this.groupDetail.course_id,
              courseName: "",
              salesType: invite ? invite.split("-")[1] : "null",
              salesID: invite ? Number(invite.split("-")[2]) : 0,
              gdt_vid: comment.getUrlParam().gdt_vid,
              cct_user_id: comment.getUrlParam().cct_user_id,
              redeem_code: comment.getUrlParam().redeem_code,
            });
            if (this.groupDetail.goods_type === 2) {
              if (localStorage.getItem("cc_token")) {
                getStatusWechatApi({ goods_id: this.shopId }).then(res => {
                  if (res.out_trade_no) {
                    if (res.buy_type === 1) {
                      this.$router.push({
                        name: "buySuccess",
                        query: { out_trade_no: res.out_trade_no, shopId: this.shopId }
                      });
                    } else {
                      this.$router.push({
                        name: "success",
                        query: { out_trade_no: res.out_trade_no, shopId: this.shopId  }
                      });
                    }
                  }
                });
              }
              if (window.location.href.indexOf("groupId") > -1) {
                this.groupId = this.$route.query.groupId;
                getGroupDetailApi(this.groupId).then(res => {
                  this.groupData = res;
                });
                this.onShare(0);
              } else {
                this.onShare(1);
              }
            } else {
              this.onShare(1);
              this.handleInviteCode();
            }
            console.log(sessionStorage.getItem('clickTag'), 979876896)
            if(sessionStorage.getItem('clickTag')){
              console.log(JSON.parse(localStorage.getItem("userDesc")))
              if (!JSON.parse(localStorage.getItem("userDesc")).mobile || JSON.parse(localStorage.getItem("userDesc")).mobile === "") {
                this.bindMobile.flag = sessionStorage.getItem('type');
                this.bindMobile.show = true;
                setTimeout(() => {
                  this.$sa.track("ViewRegisterpage", {});
                }, 1000);
              } else {
                this.goToBuyPage();
              }
              sessionStorage.setItem('clickTag','')
            }
            //   getInvitedCouponApi(this.$route.query.shopId).then(res => {
            //   if (res.code && res.code == 100) {
            //     if (res.data.flag == 0) {
            //       this.couponShadow = true;
            //       this.couponInfo.money = res.data.original_price;
            //       console.log(this.couponInfo);
            //     }
            //   } else if (this.$route.query.invite_code&&this.groupDetail.is_auth_user==1) {
            //     this.couponInfo = res;
            //     this.couponInfo.money = res.original_price;
            //     this.couponPopup = true;
            //     this.$sa.track('ViewShareCouponWindow',{});
            //     // res.original_price
            //   }
            // });
          });
        }
        let userCourse = JSON.parse(localStorage.getItem("userCourse"));
        // console.log(localStorage.getItem("userDesc"))
        // this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id;

        if (userCourse && !userCourse.periods_list) {
          // 优惠券
          getCouponListApi(this.$route.query.shopId).then(res => {
            if (res.length) {
              this.couponInfo = res[0];
              this.couponShadow = true;
            }
            console.log(this.couponInfo);
          });
        }
      },
      showTeacher() {
        this.popType = false;
        this.popupVisible = true;
      },
      buttonClick(buttonType, buttonName) {
        this.$sa.track("buttonClick", {
          tabTitle: "商品",
          moduleTitle: "详情页",
          buttonType: buttonType,
          buttonName: buttonName
        });
      },
      groupPay(type, status) {
        if (status) {
          this.groupSuc = status;
          // console.log(status)
        }
        getUserDetailApi().then(res => {
          // debugger
          localStorage.setItem('userDesc', JSON.stringify(res));
          if (!JSON.parse(localStorage.getItem("userDesc")).mobile || JSON.parse(localStorage.getItem("userDesc")).mobile === "") {
            this.bindMobile.flag = type;
            this.bindMobile.show = true;
            setTimeout(() => {
              this.$sa.track("ViewRegisterpage", {});
            }, 1000);
          } else {
            this.goToBuyPage();
          }
        }).catch((res) => {
        });
        /*if (!JSON.parse(localStorage.getItem("userDesc")).mobile || JSON.parse(localStorage.getItem("userDesc")).mobile === "") {
          this.bindMobile.flag = type;
          this.bindMobile.show = true;
          setTimeout(() => {
            this.$sa.track("ViewRegisterpage", {});
          }, 1000);
        } else {
          this.goToBuyPage(type);
        }*/
      }
    }
  };
</script>
<style>
  img,
  video {
    max-width: 100%;
  }
  @-webkit-keyframes swing {
    10% {
      transform: rotate(15deg);
    }
    20% {
      transform: rotate(-10deg);
    }
    30% {
      transform: rotate(5deg);
    }
    40% {
      transform: rotate(-5deg);
    }
    50%,
    100% {
      transform: rotate(0deg);
    }
  }
  .shake {
    -webkit-animation-name: swing;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  }
</style>
<style scoped lang="less">
  @import "../../util/public";
  .child-view {
    // position: relative;
  }
  .couponPop {
    background: transparent;
    .box {
      width: 319 * @toVw;
      .bg {
        width: 100%;
      }
      .content {
        position: absolute;
        top: 170 * @toVw;
        padding: 0 40 * @toVw;
        p {
          color: #ffefa8;
          font-size: 22 * @toVw;
        }
        .btn {
          margin-top: 150 * @toVw;
        }
        .name{display: inline-block;max-width: 90 * @toVw;vertical-align: bottom;
          overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
      }
      .closeImg {
        position: absolute;
        top: -26 * @toVw;
        right: 10 * @toVw;
        width: 27 * @toVw;
      }
    }
  }
  .img-cvs {
    position: absolute;
    width: 233 * @toVw;
    top: 176 * @toVw;
    left: 29 * @toVw;
    .qrcode {
      position: absolute;
      top: 305 * @toVw;
      left: 15 * @toVw;
      width: 60 * @toVw;
    }
  }
  .cvs-img {
    position: absolute;
    width: 233 * @toVw;
    top: 176 * @toVw;
    left: 29 * @toVw;
    z-index: 10;
  }
  .ref-content {
    width: 299 * @toVw;
    height: 564 * @toVw;
    background-size: 100% 100%;
    position: relative;
    .tips {
      font-size: 12px;
      position: absolute;
      color: #666;
      right: 10 * @toVw;
      top: 250 * @toVw;
      width: 1em;
    }
  }
  .group-index {
    z-index: 2;
    padding-bottom: toVw(150);
    background: #f0f0f0;
    font-family: PingFangSC-Regular;
    .ref-icon {
      position: fixed;
      height: 100/375 * 90vw;
      top: 70vw;
      z-index: 6;
      right: 10 * 100 /375vw;
      /*border-radius: 100px;*/
    }
    .banner {
      background: white;
      img {
        width: 100%;
      }
    }
    .head {
      background: white;
      margin-bottom: 10px;
      padding: 20/7.5vw;
      .title {
        font-size: 20px;
        color: #333333;
        margin-bottom: 15/7.5vw;
      }
      .detail {
        font-size: 12px;
        line-height: 1.6em;
        color: #333333;
        display: block;
        margin-bottom: 15/7.5vw;
      }
      .price {
        .price-content {
          font-family: PingFang-SC-Bold;
          font-size: 20px;
          color: #f83534;
        }
      }
    }
    .head-icon {
      padding: 20/7.5vw;
      background: white;
      margin-bottom: 2px;
      .icon {
        display: inline-block;
        width: 60/7.5vw;
        margin: 0 10/7.5vw;
        border-radius: 1000px;
        vertical-align: middle;
      }
      .more {
        width: 50/7.5vw;
        vertical-align: middle;
      }
      .has {
        font-size: 12px;
        line-height: 60/7.5vw;
        color: #999999;
        float: right;
      }
    }
    .welfare {
      background: white;
      padding: 10/7.5vw;
      font-size: 12px;
      text-align: center;
      color: #999999;
      margin-bottom: 20px;
    }
    .main-detail {
      padding: 20/7.5vw;
      background: white;
      .tab-content {
        border-radius: 9px;
        border: 1px solid #f63539;
        &:after {
          content: "";
          display: block;
          clear: both;
        }
        .tab-btn {
          width: 50%;
          float: left;
          height: 80/7.5vw;
          line-height: 80/7.5vw;
          text-align: center;
          color: #f63539;
          border-radius: 9px;
          &.active {
            background: #f63539;
            color: white;
          }
        }
      }
      .qa-block {
        padding-bottom: 50 * @toVw;
        img,
        video {
          max-width: 100%;
        }
        .qa-content {
          margin: toVw(10) 0;
          .qa-q {
            font-size: 16px;
            color: #666666;
          }
          .qa-a {
            font-size: 16px;
            color: #333333;
          }
        }
      }
      .detail {
        padding: 20/7.5vw 0 150/7.5vw 0;
        .detail-content {
          img,
          video {
            max-width: 100%;
          }
        }
      }
    }
    .couponBox {
      position: fixed;
      width: 100%;
      height: 25 * @toVw;
      background: #ffe83c;
      bottom: 70 * @toVw;
      text-align: center;
      color: #ff4d4f;
      line-height: 25 * @toVw;
      font-size: 12px;
    }
    footer {
      position: absolute;
      position: fixed;
      bottom: 0;
      width: 97.7vw;
      height: 120/7.5vw;
      display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6 //
      display: -moz-box; // OLD - Firefox 19- (buggy but mostly works) //
      display: -ms-flexbox; // TWEENER - IE 10 //
      display: -webkit-flex; // NEW - Chrome //
      display: flex; // NEW, Spec - Opera 12.1, Firefox 20+ //
      background: white;
      padding: 1.3vw;
      border-top: 1px solid #d8d8d8;
      justify-content: space-around;
      .btn {
        border: 1px solid #cccccc;
        border-radius: 8px;
        width: 0;
        flex-grow: 2;
        text-align: center;
        padding: 15/7.5vw 0;
        margin: 0 10/7.5vw;
        line-height: 1.4em;
        font-size: 16px;
        color: #666666;
        .free {
          line-height: 120/9vw;
        }
        span {
          display: block;
          font-size: 20px;
          font-family: PingFang-SC-Bold;
        }
        img {
          width: 50/7.5vw;
        }
        &.big {
          padding: 5/7.5vw 0;
          flex-grow: 5;
          &.price {
            background: #f83534;
            border-color: #f83534;
            color: white;
            &.full {
              background: #dddddd;
              border-color: #dddddd;
              line-height: 50 * @toVw;
            }
          }
        }
      }
    }
    .pop-block {
      padding: 40/7.5vw 10/7.5vw;
      width: 600/7.5vw;
      text-align: center;
      font-size: 14px;
      color: #666666;
      position: relative;
      img {
        width: 250/7.5vw;
      }
      .close {
        width: 50/7.5vw;
        position: absolute;
        top: 20/7.5vw;
        right: 20/7.5vw;
      }
    }

    .pop-fill {
      width: 500/7.5vw;
      padding: 30/7.5vw 30/7.5vw;
      font-size: 16px;
      color: #333333;
      .btn-block {
        margin-top: 30/7.5vw;
        &:after {
          content: "";
          display: block;
          clear: both;
        }
        .btn {
          float: right;
          background: #f83534;
          font-size: 14px;
          padding: 5/7.5vw 10/7.5vw;
          border-radius: 8px;
          color: #ffffff;
        }
      }
    }
  }
</style>