<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" 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.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,
  payApi,
  getCouponListApi,
  getAutomationCouponApi,
  getInvitedCouponApi,
  getReceiveCouponApi
} 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";
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;
      // this.refIcon =
      // this.
    },
    goToBuyPage() {
      let query = { shopId: this.shopId, invite_code: this.invite_code };
      let invite = this.invite_code;
      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
      });
      if (this.groupId) {
        query.group_order_id = this.groupId;
      }
      console.log(this.buyType);
      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;
      }
      console.log(query);
      // 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[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;
        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;
      }
      this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id;
      if (window.location.href.indexOf("shopId") > -1) {
        this.shopId = this.$route.query.shopId;
        getGoodsDetailApi(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;
          }
          this.groupDetail = res;
          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("viewCourseDetail", {
            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
          });
          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 }
                    });
                  } else {
                    this.$router.push({
                      name: "success",
                      query: { out_trade_no: res.out_trade_no }
                    });
                  }
                }
              });
            }
            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();
          }
        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"));

      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)
      }
      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();
      }
    }
  }
};
</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>
