mpShop.vue

<template>
  <div class="group-index" ref="index" v-if="groupDetail">
    <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>
    <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>
    <div v-if="groupDetail.status === 1 && invite_code_f">
      <footer v-if="groupDetail.goods_type && groupDetail.goods_type === 2">
        <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)" :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)" :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 big price" @click="groupPay(1)">
          <span>￥{{groupDetail.current_price/100}}</span>
          <div>立即购买</div>
        </div>
      </footer>
    </div>
    <mt-popup v-model="showQrCode">
      <div class="pop-block">
        <div class="qrcode-text">
          <div class="title">购买说明</div>
          <div class="main-text">长按识别二维码→点击关注公众号</div>
          <div>或 截图二维码→在微信中识别</div>
        </div>
        <img v-if="$route.query.code === 'yinghe'" style="width: 60vw" :src="qr1"/>
        <img v-if="$route.query.code === 'yunying'" style="width: 60vw" :src="qr2"/>
        <img class="close" :src="closeUrl" @click="showQrCode = false">
      </div>
    </mt-popup>
    <div v-if="groupDetail.status !== 1">
      <footer>
        <div style="color: #888">
          已售罄
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import  QRCode from 'qrcodejs2'
  import {getwechatParam,getGoodsDetailApi,getGroupDetailApi} 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 closeUrl from '../../assets/closemy.png'
  import qr1 from '../../assets/shop/qr1.png'
  import qr2 from '../../assets/shop/qr2.png'
  import {Popup} from 'mint-ui'
  export default {
    name: "index",
    components: {
      swiper,
      swiperSlide,
      [Popup.name]:Popup
    },
    data(){
      return {
        refBg:refBg,
        qr1:qr1,
        qr2:qr2,
        join:false,
        showQrCode:false,
        popType:false,
        popFill:false,
        popupVisible:false,
        refVisible:false,
        tabType:true,
        popcontentW:`您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`,
        popcontentT:`为了更好地为您进行课程服务，<br>请扫码添加老师二维码`,
        qrCode:weChatQrUrl,
        weChatIcon:weChatIcon,
        closeUrl:closeUrl,
        moreUrl:moreUrl,
        refIcon:'https://cdn.singsingenglish.com/new-sing/b7f43ced8f8268655c2c5b289360df990ec8f18e.png',
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        QRCodeB:false,
        payFlag:true,
        dataURL:null,
        user_id:null,
        invite_code_f:true,
        invite_code:'',
        this_code:'',
        shopId:'',
        groupId:null,
        groupDetail:false,
        groupData:null,
      }
    },
    mounted(){
      this.getDetail();
    },
    methods:{
      qrcode(data){
        if(this.QRCodeB){
          this.QRCodeB.makeCode(data)
        }else{
          this.QRCodeB = new QRCode('qrcode', {
            width: 80,
            height: 80, // 高度
            text: data, // 二维码内容
            image: ''
          });
        }

      },
      // 分享
      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() {
              }
            });
          })
        })
      },
      // 处理invite_code
      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
        })
      },
      // 初始化
      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
          }
        }
        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')){
              }
              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()
            }
          })
        }
      },
      showTeacher(){
        this.popType = false;
        this.popupVisible = true
      },
      buttonClick(buttonType,buttonName){
        this.$sa.track('buttonClick',{
          tabTitle:'商品',
          moduleTitle:'详情页',
          buttonType:buttonType,
          buttonName:buttonName
        });
      },
      groupPay(type){
        this.showQrCode = true
      }
    }
  }
</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";
  .qrcode-text{
    font-size: 14*@toVw;
    margin-bottom: 10*@toVw;
    .title{
      margin-bottom: 15*@toVw;
    }
    .main-text{
      font-weight: bold;
      font-size: 16*@toVw;
      margin-bottom: 8*@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{
    height: 100%;
    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: 20/7.5vw 0 toVw(150) 0;
        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%;
          }
        }

      }
    }
    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;
        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>