<template>
  <view class="app-container">
    <view class="recommender-container" v-if="isGroupbuyGoods && !isHeadUser">
      <view class="content">
        <image :src="detail.groupPic"></image>
        <view class="name ellipsis">{{ detail.groupUserName }}</view>
        <view>向你推荐</view>
      </view>
    </view>

    <!-- <no-data v-if="!isLoaded" :showText="'加载中'"></no-data> -->
    <no-data v-if="isLoaded && noData" :showText="'该商品已失效'"></no-data>
    <block v-if="isLoaded && !noData">
      <view class="swiper-container">
        <swiper @change="changeBanner">
          <swiper-item v-if="detail.vedio">
            <video
              id="video1"
              :src="detail.vedio"
              @play="playVideo"
              @pause="pauseVideo"
              controls
              loop
              :enable-progress-gesture="false"
              :muted="isFixedVideo"
            ></video>
          </swiper-item>
          <block v-for="(item, index) in bannerList" :key="index" v-if="bannerList.length > 0">
            <swiper-item>
              <!-- <image :src="item.url" mode="aspectFill" @tap="previewImage(item.url)" ></image> -->
              <view class="image" @tap="previewImage(item.url)">
                <image :src="item.url" mode="aspectFill" class="img"></image>
                <image :src="detail.logo" mode="aspectFill" class="water" v-if="isShowWater"></image>
              </view>
            </swiper-item>
          </block>
        </swiper>
        <view class="nums" v-show="(detail.vedio && bannerCurrent != 0) || !detail.vedio"
          >{{ bannerCurrent + 1 }}/{{ bannerList.length + (detail.vedio ? 1 : 0) }}</view
        >
      </view>
      <view class="video-container" :class="isFixedVideo ? 'isFixed' : ''" v-if="detail.vedio">
        <view class="content">
          <view class="close" @tap="closeFixedVideo"><image src="@/static/icon/close.png"></image></view>
          <video
            id="video2"
            :src="detail.vedio"
            @error="videoErrorCallback"
            controls
            loop
            :enable-progress-gesture="false"
          ></video>
        </view>
      </view>
      <view class="seckill-container" v-if="isSeckillGoods">
        <view class="price">
          <view class="price-1">¥{{ detail.goodsPrice | priceFilter }}</view>
          <view class="price-2">¥{{ detail.orgGoodsPrice | priceFilter }}</view>
        </view>
        <view class="right">
          <text>距结束还剩：</text>
          <view class="time"
            ><text>{{ countdownTime[0] }}</text
            >时<text>{{ countdownTime[1] }}</text
            >分<text>{{ countdownTime[2] }}</text
            >秒</view
          >
        </view>
        <view class="clock"><image src="@/static/icon/clock.png"></image></view>
      </view>
      <view class="main-container">
        <view class="title">{{ detail.goodsName }}</view>
        <view class="des">{{ detail.describeText ? detail.describeText : '' }}</view>
        <view class="tags" v-if="detail.tags1 && detail.tags1.length > 0">
          <view class="it" v-for="(it, idx) in detail.tags1" :key="idx">{{ it }}</view>
        </view>
        <view
          class="tags2"
          v-if="(detail.tags2 && detail.tags2.length > 0) || detail.promotionFullPiece || detail.isTrade == 'YES'"
        >
          <view class="it" v-if="detail.promotionFullPiece">满件打折</view>
          <view class="it" v-if="detail.isTrade == 'YES'">以旧换新</view>
          <view class="it" v-for="(it, idx) in detail.tags2" :key="idx">{{ it }}</view>
        </view>
        <view class="stock">
          <block v-if="!isSeckillGoods">
            <view class="left">
              <text>剩余{{ detail.stock }}件</text>
            </view>
          </block>
          <block v-if="isSeckillGoods">
            <view class="left">
              <text>剩余{{ detail.secStockNum }}件</text>
              <view class="progress-box">
                <progress
                  :percent="(detail.secStockNum / detail.limitBuy) * 100"
                  activeColor="#FF3F42"
                  active
                  stroke-width="6"
                />
              </view>
            </view>
            <view
              class="right"
              @tap="isOpen = !isOpen"
              v-if="((isServiceUser || isWorkerUser) && !isGroupbuyGoods) || (isHeadUser && isGroupbuyGoods)"
            >
              <text>{{ isOpen ? '收起' : '展开' }}</text>
              <image :src="isOpen ? '../../static/icon/arrow_2.png' : '../../static/icon/arrow_1.png'"></image>
            </view>
          </block>
        </view>
        <view class="price-con" v-if="!isSeckillGoods">
          <view class="left">
            <view class="price">
              <view class="price-1">¥{{ detail.goodsPrice | priceFilter }}</view>
              <view class="price-2">¥{{ detail.orgGoodsPrice | priceFilter }}</view>
            </view>
            <view class="box" v-if="detail.promotionFullPiece">
              {{ detail.promotionFullPieceNum }}件单价约¥{{ detail.promotionFullPiecePrice }}
            </view>
          </view>
          <view
            class="right"
            @tap="isOpen = !isOpen"
            v-if="((isServiceUser || isWorkerUser) && !isGroupbuyGoods) || (isHeadUser && isGroupbuyGoods)"
          >
            <text>{{ isOpen ? '收起' : '展开' }}</text>
            <image :src="isOpen ? '../../static/icon/arrow_2.png' : '../../static/icon/arrow_1.png'"></image>
          </view>
        </view>
        <view class="bottom" v-if="isOpen">
          <block v-if="detail.isMaster">
            <view class="row">
              <view>分销金额</view>
              <view>￥{{ commission | priceFilter }}{{ detail.goodsSpecs.length > 1 ? '起' : '' }}</view>
            </view>
            <view class="row">
              <view>内部分销金额</view>
              <view>￥{{ commission2 | priceFilter }}{{ detail.goodsSpecs.length > 1 ? '起' : '' }}</view>
            </view>
          </block>
          <block v-else-if="userInfo.innerr">
            <view class="row">
              <view>分享可获得收益</view>
              <view>￥{{ commission2 | priceFilter }}{{ detail.goodsSpecs.length > 1 ? '起' : '' }}</view>
            </view>
          </block>
          <block v-else>
            <view class="row">
              <view>分享可获得收益</view>
              <view>￥{{ commission | priceFilter }}{{ detail.goodsSpecs.length > 1 ? '起' : '' }}</view>
            </view>
          </block>
        </view>
      </view>

      <view class="line-container">
        <view>运费：包邮</view>
        <view
          >销量：<text>{{ detail.soldNum }}</text></view
        >
      </view>

      <view class="evaluate-container" v-if="evaluateList.length">
        <view class="title">
          <view class="left">用户评价({{ evaluateList.length }})</view>
          <view class="right" @tap="toAllEvaluate">查看全部<text class="iconfont icon-jinru"></text></view>
        </view>
        <view class="list">
          <view class="item" v-for="(item, index) in evaluateList.filter((o, i) => i === 0)" :key="index">
            <view class="top">
              <view class="user">
                <image :src="item.avatar" mode="aspectFill" v-if="item.avatar.indexOf('http') >= 0"></image>
                <image :src="imageUrl + item.avatar" mode="aspectFill" v-else></image>
                <view class="right">
                  <view class="name ellipsis">{{ item.userName }}</view>
                  <view class="date">{{ item.createTime }}</view>
                </view>
              </view>
            </view>
            <view class="tags">
              <view class="it" v-for="(it, idx) in item.tags" :key="idx">{{ it }}</view>
            </view>
            <view class="content">{{ item.content }}</view>
            <view class="images" v-if="item.imgs && item.imgs.length > 0">
              <image
                v-for="(it, idx) in item.imgs"
                :key="idx"
                :src="it"
                @tap="previewEvaluateImage(it, item.imgs)"
              ></image>
            </view>
          </view>
        </view>
      </view>

      <view class="tradein-container" v-if="detail.isTrade == 'YES'">
        <view class="left">
          <view class="top">
            <text class="iconfont icon-huishou"></text>
            <view class="text">以旧换新</view>
            <u-tag :text="`最高补贴${tradeMaxPrice}元`" plain size="mini" type="warning"></u-tag>
          </view>
          <view class="bottom">旧机拆运免费，新机补贴可立减！</view>
        </view>
        <view class="right" @tap="clickCartOrBuy(5)">立即换新<text class="iconfont icon-jinru"></text></view>
      </view>

      <view class="detail-container">
        <view class="title">商品详情</view>
        <view class="content" v-if="detail.pubCommonTemplate">
          <u-parse :content="detail.pubCommonTemplate.content"></u-parse>
        </view>
        <view class="content" v-if="detail.commonTemplate">
          <u-parse :content="detail.commonTemplate.content"></u-parse>
        </view>
        <view class="content">
          <u-parse :content="detail.content"></u-parse>
        </view>
      </view>

      <view class="allBottom-container">
        <view class="tradeinBottom-container" v-if="detail.isTrade == 'YES'">
          <view class="left">
            <view class="tag">
              <text class="iconfont icon-huishou"></text>
              <view class="name">以旧换新</view>
            </view>
            <view class="text">旧机拆运免费，新机补贴可立减！</view>
          </view>
          <view class="right" @tap="clickCartOrBuy(5)">立即换新<text class="iconfont icon-jinru"></text></view>
        </view>

        <view class="bottom-container">
          <view class="left">
            <view class="item" @tap="clickShare">
              <view class="iconfont icon-fenxiang"></view>
              <text>分享</text>
            </view>
            <view class="item" @tap="handleCollect" v-if="!isGroupbuyGoods">
              <block v-if="detail.favorite">
                <view class="iconfont icon-shoucang2 active"></view>
                <text>已收藏</text>
              </block>
              <block v-else>
                <view class="iconfont icon-shoucang"></view>
                <text>收藏</text>
              </block>
            </view>
            <view class="item" @tap="$navPage(`/packageGoods/pages/cart`)">
              <view class="iconfont icon-gouwuche1"></view>
              <text>购物车</text>
              <view class="dot" v-if="cartCount > 0">{{ cartCount <= 99 ? cartCount : '99+' }}</view>
            </view>
          </view>
          <view class="right" v-if="!isSeckillGoods && !isGroupbuyGoods">
            <view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
            <view class="button buy" @tap="clickCartOrBuy(2)">立即购买</view>
          </view>
          <view class="right" v-if="!isSeckillGoods && isGroupbuyGoods">
            <view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
            <view class="button buy" @tap="clickCartOrBuy(4)">立即拼团</view>
          </view>
          <view class="right" v-if="isSeckillGoods">
            <view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
            <view class="button buy" @tap="clickCartOrBuy(3)">马上抢购</view>
          </view>
        </view>
      </view>

      <u-popup :round="10" :closeable="true" :show="isBuyDialog" @close="isBuyDialog = false">
        <view class="cart-container">
          <view class="main">
            <image :src="specList[specCurrent].imgUrl" mode="aspectFill"></image>
            <view class="right">
              <view class="title ellipsis-2">{{ detail.goodsName }}</view>
              <block v-if="isGroupbuyGoods">
                <view class="price">
                  <view class="price-con">
                    <view class="price-1">¥{{ specList[specCurrent].price }}</view>
                    <view class="price-2">¥{{ specList[specCurrent].orgPrice }}</view>
                  </view>
                  <view class="box" v-if="detail.promotionFullPiece">
                    {{ specList[specCurrent].promotionFullPieceNum }}件单价约¥{{
                      specList[specCurrent].promotionFullPiecePrice
                    }}
                  </view>
                </view>
                <view class="stock">剩余{{ specList[specCurrent].stockNum }}件</view>
              </block>
              <block v-else-if="isSeckillGoods">
                <view class="price">
                  <view class="price-con">
                    <view class="price-1">¥{{ specList[specCurrent].secPrice }}</view>
                    <view class="price-2">¥{{ specList[specCurrent].price }}</view>
                  </view>
                  <view class="box" v-if="detail.promotionFullPiece">
                    {{ specList[specCurrent].promotionFullPieceNum }}件单价约¥{{
                      specList[specCurrent].promotionFullPiecePrice
                    }}
                  </view>
                </view>
                <view class="stock">剩余{{ detail.secStockNum }}件</view>
              </block>
              <block v-else>
                <view class="price">
                  <view class="price-con">
                    <view class="price-1">¥{{ specList[specCurrent].price }}</view>
                    <view class="price-2">¥{{ detail.orgGoodsPrice }}</view>
                  </view>
                  <view class="box" v-if="detail.promotionFullPiece">
                    {{ specList[specCurrent].promotionFullPieceNum }}件单价约¥{{
                      specList[specCurrent].promotionFullPiecePrice
                    }}
                  </view>
                </view>
                <view class="stock">剩余{{ specList[specCurrent].stockNum }}件</view>
              </block>
            </view>
          </view>
          <view class="attr">
            <view class="title">已选属性</view>
            <view class="list">
              <block v-for="(item, index) in specList" :key="index">
                <view class="item" @tap="changeSpec(index)" :class="specCurrent == index ? 'current' : ''">{{
                  item.specValue
                }}</view>
              </block>
            </view>
          </view>
          <view class="num">
            <view class="title">购买数量</view>
            <u-number-box
              v-model="buyNum"
              :disabled="isTradeTag"
              :min="1"
              :buttonSize="26"
              iconStyle="font-size: 12px;"
            >
            </u-number-box>
          </view>
          <view class="tradein" v-if="dialogType == 5">
            <view class="top">
              <view class="name">以旧换新：</view>
              <view class="text">{{ detail.tradeRemark }}</view>
            </view>
            <view class="tag" :class="isTradeTag ? 'active' : ''" @click="changeTradeTag"
              >旧机拆运免费，新机补贴可立减！</view
            >

            <view class="agreement">
              <view class="content" v-if="isTradeTag">
                <text
                  class="iconfont"
                  :class="isTradeAgree ? 'icon-danxuan2' : 'icon-danxuan'"
                  @click="isTradeAgree = !isTradeAgree"
                ></text>
                <view class="text">我已阅读并同意<text @click="toAgreement">《以旧换新协议》</text></view>
              </view>
            </view>
          </view>

          <block v-if="dialogType == 5">
            <view class="button buy" v-if="isTradeTag" @tap="toTradein">立即换新</view>
            <view class="button buy" v-if="!isTradeTag" @tap="nowBuy">立即购买</view>
          </block>
          <view class="button cart" v-if="dialogType == 1" @tap="addToCart">加入购物车</view>
          <view class="button buy" v-if="dialogType == 2" @tap="nowBuy">立即购买</view>
          <view class="button sec" v-if="dialogType == 3" @tap="rushBuy">马上抢购</view>
          <view class="button sec" v-if="dialogType == 4" @tap="nowBuy">马上拼团</view>
        </view>
      </u-popup>

      <u-popup :round="10" :closeable="false" :show="isShareDialog" @close="isShareDialog = false">
        <view class="sharelist-container">
          <view
            class="item"
            v-if="isH5"
            @tap="
              isShareDialog = false
              isShowShareGuideDialog = true
            "
          >
            <image src="@/static/icon/wechat.png"></image>
            <text>分享给微信好友</text>
          </view>

          <view class="item" @tap="markImage">
            <image src="@/static/icon/image.png"></image>
            <text>生成图片分享</text>
          </view>
        </view>
      </u-popup>

      <view class="global-mask" v-show="isShowCanvas" @tap="closeCanvas"></view>
      <view class="canvas-container" v-show="isShowCanvas">
        <view class="content">
          <image style="width: 300px; height: 520px" :src="canvasImg" v-if="canvasImg"></image>
          <canvas style="width: 300px; height: 520px" canvas-id="myCanvas" id="myCanvas" v-else></canvas>
        </view>
        <view class="button"><text>长按图片保存</text></view>
      </view>

      <view class="shareGuideDialog" v-if="isShowShareGuideDialog" @tap="isShowShareGuideDialog = false">
        <view class="content">
          <view class="icon">
            <text class="iconfont icon-arrow-up-right"></text>
          </view>
          <view class="text">
            <view>点击右上角</view>
            <view>与好友分享好物！</view>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import { compareTime, wxShare, getQueryVariable, mini_env } from '@/common/utils/util.js'
import { toBase64src } from '@/common/utils/base.js'

export default {
  data() {
    return {
      imageUrl: this.$imageUrl,
      userInfo: {},
      configInfo: {},
      isLoaded: false,
      noData: true,
      goodsId: null, // 商品id
      detail: {}, // 商品详情
      commission: 0, // 分佣金额（师傅）
      commission2: 0, // 分佣金额（分销员）
      bannerList: [], // 轮播图列表
      bannerCurrent: 0, // 轮播图当前值
      specList: [], // 规格列表
      specCurrent: 0, // 规格当前值
      isOpen: false, // 是否展开
      isBuyDialog: false, // 是否显示购买/加入购物车弹窗
      dialogType: 1, // 弹窗类型: 1加入购物车，2立即购买，3秒杀抢购
      isShareDialog: false, // 是否显示分享弹窗
      isShowCanvas: false, // 是否显示海报弹窗
      buyNum: 1, // 购买/加入购物车 数量
      isSeckillGoods: false, // 是否秒杀商品
      isGroupbuyGoods: false, // 是否团购商品
      cartCount: 0, // 购物车内商品数
      isFinishCanvas: false, // 是否已完成海报
      canvasImg: '',
      codeUrl: '', // 商品码
      videoContext1: '', // 视频对象
      videoContext2: '', // 视频对象
      isFixedVideo: false, // 是否显示视频弹窗
      isPlayVideo: false, // 视频是否播放中
      isCloseMyself: false, // 是否亲自关闭视频弹窗
      countdownTime: '', // 倒计时
      endHour: 0, // 倒计时结束时间
      evaluateList: [],
      isShowWater: false,

      isShowShareGuideDialog: false,

      isH5: false,

      isTradeTag: true,
      isTradeAgree: false,
      tradeMaxPrice: 0
    }
  },
  computed: {
    isLogin() {
      return this.$store.state.user.token ? true : false
    },

    isHeadUser() {
      // 是否团长
      return this.userInfo.promotionGroupLeader
    },
    isServiceUser() {
      // 是否业务员
      return this.userInfo.type === 'SERVICE'
    },
    isWorkerUser() {
      // 是否师傅
      return this.userInfo.type === 'WORKER'
    }
  },
  watch: {
    countdownTime() {
      if (this.countdownTime[0] == 0 && this.countdownTime[1] == 0 && this.countdownTime[2] == 0) {
        this.getDetail()
      }
    }
  },
  onPageScroll(res) {
    if (res.scrollTop > 300 && this.isPlayVideo && !this.isCloseMyself && this.detail.vedio) {
      this.isFixedVideo = true
      this.videoContext2.play()
    } else {
      this.isFixedVideo = false
      this.videoContext2.pause()
    }
    if (res.scrollTop < 300) {
      this.isCloseMyself = false
    }
  },
  async onLoad({ id }) {
    this.goodsId = id

    uni.showLoading({
      title: '加载中'
    })

    await this.getDetail()
    this.configInfo = await this.$getConfigInfo()
    this.userInfo = await this.$getUserInfo()
    this.getEvaluateList()

    mini_env(bool => {
      if (bool) {
        this.isH5 = false
      } else {
        this.isH5 = true

        var appid = getQueryVariable('appid') || getQueryVariable('appId')
        wxShare({
          configInfo: this.configInfo,
          userInfo: this.userInfo,
          title: `分享商品「 ${this.detail.goodsName} 」`,
          desc: `点击前往购买`,
          link: `${process.env.VUE_APP_HREF}/packageGoods/pages/detail?appid=${appid}&id=${this.goodsId}&serviceId=${this.$store.state.user.userId}`,
          imgUrl: this.detail.imgUrl
        })
      }
    })
  },

  onShow() {
    this.isBuyDialog = false
    this.getCartCount()
  },

  onReady() {
    this.videoContext1 = uni.createVideoContext('video1')
    this.videoContext2 = uni.createVideoContext('video2')
  },

  methods: {
    // 获取详情
    getDetail() {
      return new Promise((resolve, reject) => {
        this.$api
          .get('/goods/detail', {
            goodsId: this.goodsId,
            userId: this.$store.state.user.userId
          })
          .then(res => {
            this.detail = res.data
            this.noData = false
            this.isLoaded = true
            // 团购
            this.isGroupbuyGoods = res.data.promotionGroup
            // 秒杀
            this.isSeckillGoods = res.data.secType
            this.endHour = res.data.endHour
            this.countTime()

            this.bannerList = res.data.images
            this.specList = res.data.goodsSpecs
            this.specCurrent = 0

            let commissionList = []
            let commission2List = []
            this.specList.forEach((item, index) => {
              item.price = item.price.toFixed(2)
              item.orgPrice = item.orgPrice.toFixed(2)
              commissionList.push(item.shareAmount)
              commission2List.push(item.innerShareAmount)
            })
            this.commission = Math.min(...commissionList)
            this.commission2 = Math.min(...commission2List)

            // 水印
            if (res.data.logo && res.data.logoStartTime) {
              this.isShowWater = compareTime(res.data.logoStartTime, res.data.logoEndTime)
            } else {
              this.isShowWater = false
            }

            if (res.data.isTrade == 'YES') {
              this.getMaxPrice()
            }
            resolve(1)
          })
          .catch(res => {
            this.noData = true
            this.isLoaded = true
            reject(0)
          })
          .finally(res => {
            uni.hideLoading()
          })
      })
    },

    getMaxPrice() {
      this.$api.get('/trade/getMaxPrice').then(res => {
        this.tradeMaxPrice = res.data || 0
      })
    },

    // 获取评价列表
    getEvaluateList() {
      this.$api
        .get('/order/comment/goods', {
          pageNo: 1,
          pageSize: 5,
          goodsId: this.goodsId
        })
        .then(res => {
          this.evaluateList = res.data.records
        })
    },

    // 查询结束时间
    checkEndTime(val) {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      // dd = val == 10 ? dd + 1 : dd;

      // 每月有多少天
      let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      if ((yy % 4 == 0 && yy % 100 != 0) || yy % 400 == 0) {
        days[1] = 29
      }

      // 如果结束时间=10（表示第二天10点），dd需加一天
      if (val == 10) {
        if (dd >= days[mm - 1]) {
          mm = mm + 1
        } else {
          dd = dd + 1
        }
      }

      let date = yy + '/' + mm + '/' + dd
      let dateTime = date + ' ' + val + ':00:00'
      return dateTime
    },

    // 计算倒计时
    countTime() {
      let endDateTime = this.checkEndTime(this.endHour)
      var nowtime = new Date(), //获取当前时间
        endtime = new Date(endDateTime) //定义结束时间
      var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
        hh = Math.floor(lefttime / (1000 * 60 * 60)), //计算小时数
        mm = Math.floor((lefttime / (1000 * 60)) % 60), //计算分钟数
        ss = Math.floor((lefttime / 1000) % 60) //计算秒数
      function checkTime(i) {
        if (i < 10) {
          i = '0' + i
        }
        return i
      }
      setTimeout(() => {
        this.countTime()
      }, 1000)
      this.countdownTime = [checkTime(hh), checkTime(mm), checkTime(ss)]
    },

    // 获取商品二维码
    async getGoodsCode() {
      return new Promise((resolve, reject) => {
        var appid = getQueryVariable('appid') || getQueryVariable('appId')
        this.$api
          .get('/goods/qrcode', {
            url: `${process.env.VUE_APP_HREF}/packageGoods/pages/detail?appid=${appid}&id=${this.goodsId}&serviceId=${this.$store.state.user.userId}`
          })
          .then(res => {
            // this.codeUrl = 'data:image/jpeg;base64,' + res.data;
            this.codeUrl = res.data
            resolve(res.data)
          })
      })
    },

    // 视频播放
    playVideo(e) {
      this.isPlayVideo = true
    },

    // 视频暂停
    pauseVideo(e) {
      this.isPlayVideo = false
    },

    // 关闭视频弹窗
    closeFixedVideo() {
      this.isFixedVideo = false
      this.isCloseMyself = true
      this.videoContext2.pause()
    },

    // 从个人信息获取购物车商品数量
    getCartCount() {
      this.$api
        .get('/user/user/detail', {
          userId: this.$store.state.user.userId
        })
        .then(res => {
          this.cartCount = res.data.shoppingCartNums

          if (!res.data.openId) {
            return this.$navToPage({
              url: '/pages/login/index?isNotOpenid=' + true
            })
          }
        })
    },

    // 查看所有评价
    toAllEvaluate() {
      this.$navToPage({
        url: '/packageGoods/pages/evaluate?goodsId=' + this.goodsId
      })
    },

    // 收藏/取消收藏
    handleCollect() {
      if (!this.isLogin) {
        return this.$navToPage({
          url: '/pages/login/index'
        })
      }
      if (!this.detail.favorite) {
        this.$api
          .post('/goods/favorite/add', {
            goodsId: this.goodsId,
            userId: this.$store.state.user.userId
          })
          .then(res => {
            this.$successToast('收藏成功')
            this.getDetail()
          })
      } else {
        this.$api
          .post('/goods/favorite/detail/del', {
            goodsId: this.goodsId,
            userId: this.$store.state.user.userId
          })
          .then(res => {
            this.$successToast('取消收藏成功')
            this.getDetail()
          })
      }
    },

    // 切换图片
    changeBanner(e) {
      this.bannerCurrent = e.detail.current
      if (this.bannerCurrent > 0 && this.detail.vedio) {
        this.videoContext1.pause()
      }
    },

    // 预览图片
    previewImage(url) {
      let imgs = []
      this.bannerList.forEach((item, index) => {
        imgs.push(item.url)
      })
      uni.previewImage({
        urls: imgs,
        current: url
      })
    },

    // 预览评价图片
    previewEvaluateImage(url, imgs) {
      uni.previewImage({
        urls: imgs,
        current: url
      })
    },

    // 点击分享
    clickShare() {
      if (!this.isLogin) {
        return this.$navToPage({
          url: '/pages/login/index'
        })
      }
      // this.getGoodsCode();
      this.isShareDialog = true
    },

    // 点击加入购物车/立即购买
    clickCartOrBuy(type) {
      if (!this.isLogin) {
        return this.$navToPage({
          url: '/pages/login/index'
        })
      }
      if (type == 5) {
        this.buyNum = 1
        this.isTradeTag = true
        this.isTradeAgree = false
      } else {
        this.isTradeTag = false
      }
      this.dialogType = type
      this.isBuyDialog = true
    },

    // 切换规格
    changeSpec(index) {
      this.specCurrent = index
    },

    // 加入购物车
    addToCart() {
      if (this.specList[this.specCurrent].stockNum == 0) {
        return this.$toast('该规格库存不足')
      }
      this.$api
        .postJson('/shpping/cart/add/one', {
          userId: this.$store.state.user.userId,
          buyGoods: [
            {
              goodsId: this.goodsId,
              goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
              num: this.buyNum,
              secKillId: this.detail.secKillId || '',
              promotionGroupId: this.detail.promotionGroupId || ''
            }
          ]
        })
        .then(res => {
          this.$successToast('添加成功')
          this.getCartCount()
          this.isBuyDialog = false
        })
    },

    // 立即购买
    nowBuy() {
      if (this.specList[this.specCurrent].stockNum == 0) {
        return this.$toast('该规格库存不足')
      }
      let buyList = [
        {
          goodsId: this.goodsId,
          goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
          num: this.buyNum,
          secKillId: this.detail.secKillId || '',
          promotionGroupId: this.detail.promotionGroupId || ''
        }
      ]
      let url = '/packageGoods/pages/order'
      if (this.detail.promotionGroupId) {
        url = url + '?groupbuyId=' + this.detail.promotionGroupId
      }

      this.$setStorage('goodsBuyList', buyList)

      this.$navToPage({
        url
      })
    },

    // 马上抢购（秒杀）
    rushBuy() {
      if (this.detail.secStockNum == 0) {
        return this.$toast('该规格库存不足')
      }
      this.$api
        .post('/goods/sec/kill/start', {
          secKillId: this.detail.secKillId
        })
        .then(res => {
          if (res.data) {
            let buyList = [
              {
                goodsId: this.goodsId,
                goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
                num: this.buyNum,
                secKillId: this.detail.secKillId || '',
                promotionGroupId: this.detail.promotionGroupId || ''
              }
            ]

            this.$setStorage('goodsBuyList', buyList)

            this.$navToPage({
              url:
                '/packageGoods/pages/order?secKillId=' +
                this.detail.secKillId +
                '&secKillSpecId=' +
                this.detail.secKillSpecId +
                '&secToken=' +
                res.data
            })
          } else {
            this.$toast('活动异常')
          }
        })
    },

    // 去购物车
    toCart() {
      this.$navToPage({
        url: '/packageGoods/pages/cart'
      })
    },

    // 去以旧换新协议
    toAgreement() {
      this.$navToPage({
        url: `/packageMine/pages/agreement?type=4`
      })
    },

    changeTradeTag() {
      this.isTradeTag = !this.isTradeTag
      this.buyNum = 1
    },

    toTradein() {
      if (!this.isTradeAgree) return this.$toast('请阅读并同意《以旧换新协议》')

      let buyList = [
        {
          goodsId: this.goodsId,
          goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
          num: this.buyNum,
          secKillId: this.detail.secKillId || '',
          promotionGroupId: this.detail.promotionGroupId || ''
        }
      ]
      this.$setStorage('goodsBuyList', buyList)

      this.$navToPage({
        url: `/packageGoods/pages/tradein/category?goodsId=${this.goodsId}`
      })
    },

    // 生成图片
    async markImage() {
      this.isShareDialog = false
      this.isShowCanvas = true

      if (this.isFinishCanvas) {
        return false
      }

      uni.showLoading({
        title: '海报生成中'
      })

      await this.getGoodsCode()

      let img = this.detail.imgUrl
      let title = this.detail.goodsName
      let des = this.detail.describeText
      let price1 = this.detail.goodsPrice
      let price2 = this.detail.orgGoodsPrice
      let sales = this.detail.soldNum
      let fullPieceNum = this.detail.promotionFullPieceNum
      let fullPiecePrice = this.detail.promotionFullPiecePrice
      let fullPiece = `${fullPieceNum}件单价约¥${fullPiecePrice}`
      // let code = this.codeUrl;
      // base64src(this.codeUrl , resCurrent => {
      // 	code = resCurrent;
      // })

      var ctx = uni.createCanvasContext('myCanvas')

      /**
       * @param {Object} str 要绘制的字符串
       * @param {Number} initX 绘制字符串起始x坐标
       * @param {Number} initY 绘制字符串起始y坐标
       * @param {Number} lineHeight 字行高
       */
      function canvasTextAutoLine(str, initX, initY, lineHeight) {
        var lineWidth = 0
        var canvasWidth = 260
        var lastSubStrIndex = 0
        var lineNum = 0
        var state = true
        for (let i = 0; i < str.length; i++) {
          lineWidth += ctx.measureText(str[i]).width
          if (lineWidth > canvasWidth && lineNum < 1) {
            ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
            initY += lineHeight
            lineWidth = 0
            lastSubStrIndex = i
            lineNum++
          } else if (lineWidth > canvasWidth && lineNum < 2) {
            ctx.fillText(str.substring(lastSubStrIndex + 2, i) + '...', initX, initY)
            lineNum++
            state = false
          }
          if (i == str.length - 1 && state) {
            ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
          }
        }
      }

      // 白色背景
      ctx.rect(0, 0, 300, 520)
      ctx.setFillStyle('#FFFFFF')
      ctx.fill()
      ctx.stroke()

      // 商品名称
      ctx.setFontSize(14)
      ctx.setFillStyle('#333333')
      canvasTextAutoLine(title, 20, 300, 18)

      // 商品描述
      if (des) {
        ctx.setFontSize(12)
        ctx.setFillStyle('#999999')
        canvasTextAutoLine(des, 20, 336, 16)
      }

      // 现价
      ctx.setFontSize(16)
      ctx.setFillStyle('#FF3F42')
      ctx.fillText('¥' + price1, 20, 380)

      // 原价
      ctx.setFontSize(13)
      ctx.setFillStyle('#666666')
      ctx.fillText('¥' + price2, 20, 396)
      ctx.setStrokeStyle('#666666')
      ctx.moveTo(20, 392)
      ctx.lineTo(ctx.measureText('¥' + price2).width + 20, 392)
      ctx.stroke()

      // 销量
      ctx.setFontSize(12)
      ctx.setFillStyle('#666666')
      ctx.fillText('销量：' + sales, 260 - ctx.measureText('销量：' + sales).width + 20, 380)

      // 满件打折
      if (fullPieceNum) {
        ctx.setFillStyle('#FF3F42')
        ctx.fillRect(ctx.measureText('¥' + price1).width + 40, 370, ctx.measureText(fullPiece).width + 16, 22)
        ctx.setFontSize(12)
        ctx.setFillStyle('#FFFFFF')
        ctx.fillText(fullPiece, ctx.measureText('¥' + price1).width + 48, 385)
      }

      // 二维码
      // ctx.drawImage(code, 110, 404, 80, 80)

      // 提示
      ctx.setFontSize(12)
      ctx.setFillStyle('#FE781F')
      ctx.fillText('打开微信扫描识别查看商品', 78, 500)

      // 图片
      if (img.indexOf('https://zf-mall-test.oss-cn-shenzhen.aliyuncs.com') >= 0) {
        img = img.replace(
          'https://zf-mall-test.oss-cn-shenzhen.aliyuncs.com',
          'https://jiasm.zfire.top/jsm-sxbh5/imgfile'
        )
      }
      let codeUrl = ''
      if (this.codeUrl.indexOf('https://zf-mall-test.oss-cn-shenzhen.aliyuncs.com') >= 0) {
        codeUrl = this.codeUrl.replace(
          'https://zf-mall-test.oss-cn-shenzhen.aliyuncs.com',
          'https://jiasm.zfire.top/jsm-sxbh5/imgfile'
        )
      }

      console.log(img, codeUrl)

      const imgRes = await toBase64src(img)
      const codeRes = await toBase64src(codeUrl)

      ctx.drawImage(imgRes, 20, 20, 260, 260)
      ctx.drawImage(codeRes, 110, 404, 80, 80)

      ctx.draw()
      setTimeout(() => {
        uni.canvasToTempFilePath(
          {
            x: 0,
            y: 0,
            width: 300,
            height: 520,
            canvasId: 'myCanvas',
            success: res => {
              this.canvasImg = res.tempFilePath
              console.log(res.tempFilePath)
              console.log('生成画布成功')
              uni.hideLoading()
              this.isFinishCanvas = true
            },
            fail: res => {
              console.log(res)
            },
            complete: res => {
              console.log(res)
            }
          },
          this
        )
      }, 500)
    },

    // 关闭canvas
    closeCanvas() {
      this.isShowCanvas = false
      uni.hideLoading()
    }
  }
}
</script>

<style lang="scss">
.app-container {
  background: #f4f2f2;
  box-sizing: border-box;
  padding-bottom: 100rpx;
}
.recommender-container {
  position: fixed;
  top: 20rpx;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  width: 100%;
  .content {
    font-size: 28rpx;
    color: #ffffff;
    background: rgba($color: #000000, $alpha: 0.8);
    display: flex;
    padding: 0 15rpx;
    height: 60rpx;
    border-radius: 60rpx;
    justify-content: center;
    align-items: center;
    image {
      width: 40rpx;
      height: 40rpx;
      display: block;
      border-radius: 50%;
      margin-right: 10rpx;
    }
    .name {
      max-width: 160rpx;
      margin-right: 6rpx;
    }
  }
}
.swiper-container {
  position: relative;
  swiper {
    height: 750rpx;
  }
  .image {
    width: 750rpx;
    height: 750rpx;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    .img {
      width: 750rpx;
      height: 750rpx;
      display: block;
    }
    .water {
      width: 750rpx;
      height: 750rpx;
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
  }
  // image {
  // 	height: 750rpx;
  // 	width: 750rpx;
  // 	display: block;
  // 	margin: 0 auto;
  // 	overflow: hidden;
  // }
  video {
    height: 750rpx;
    width: 750rpx;
    display: block;
    margin: 0 auto;
    overflow: hidden;
  }
  .nums {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    background: rgba($color: #000000, $alpha: 0.2);
    border-radius: 8rpx;
    line-height: 48rpx;
    padding: 0 12rpx;
    font-size: 28rpx;
    color: #ffffff;
  }
}
.video-container {
  position: fixed;
  right: 20rpx;
  bottom: 300rpx;
  z-index: -99;
  &.isFixed {
    z-index: 99;
  }
  .content {
    position: relative;
  }
  video {
    height: 200rpx;
    width: 375rpx;
  }
  .close {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
    background: rgba($color: #000000, $alpha: 0.4);
    padding: 10rpx;
    image {
      width: 28rpx;
      height: 28rpx;
      display: block;
    }
  }
}
.seckill-container {
  height: 120rpx;
  background: linear-gradient(-90deg, rgba(255, 37, 118, 1) 0%, #ff5648 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  position: relative;
  .clock {
    position: absolute;
    right: 220rpx;
    top: 20rpx;
    image {
      width: 74rpx;
      height: 72rpx;
      display: block;
    }
  }
  .price-1 {
    font-size: 40rpx;
    color: #ffffff;
    line-height: 44rpx;
  }
  .price-2 {
    font-size: 28rpx;
    line-height: 32rpx;
    color: #dddddd;
    text-decoration: line-through;
  }
  .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text {
      font-size: 24rpx;
      color: #ffffff;
    }
    .time {
      font-size: 24rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      margin-top: 6rpx;
      text {
        width: 40rpx;
        height: 40rpx;
        background: #ffffff;
        border-radius: 4rpx;
        color: #ff2775;
        font-size: 24rpx;
        line-height: 40rpx;
        text-align: center;
        margin: 0 4rpx;
      }
    }
  }
}
.main-container {
  background: #ffffff;
  padding: 20rpx 20rpx 0;
  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 40rpx;
    font-weight: 600;
  }
  .des {
    font-size: 24rpx;
    color: #999999;
    line-height: 28rpx;
    margin-top: 8rpx;
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    .it {
      height: 28rpx;
      padding: 0 10rpx;
      line-height: 28rpx;
      border-radius: 10rpx;
      background: #e8e8e8;
      font-size: 20rpx;
      color: #666666;
      margin-right: 10rpx;
      margin-top: 10rpx;
    }
  }
  .tags2 {
    display: flex;
    flex-wrap: wrap;
    .it {
      font-size: 20rpx;
      height: 30rpx;
      line-height: 30rpx;
      padding: 0 6rpx;
      margin-right: 10rpx;
      border: 1px solid #fe781f;
      color: #fe781f;
      box-sizing: border-box;
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      flex-direction: row;
      border-radius: 10rpx;
    }
  }
  .stock {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    .left {
      display: flex;
      align-items: center;
      text {
        font-size: 24rpx;
        color: #666666;
      }
      .progress-box {
        width: 140rpx;
        border-radius: 6px;
        overflow: hidden;
        margin-left: 10rpx;
      }
    }
    .right {
      font-size: 28rpx;
      color: #999999;
      display: flex;
      align-items: center;
      image {
        width: 20rpx;
        height: 20rpx;
        display: block;
        margin-left: 10rpx;
      }
    }
  }
  .price-con {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10rpx;
    padding-bottom: 20rpx;
    .left {
      display: flex;
      align-items: center;
      .price {
        display: flex;
        flex-direction: column;
        .price-1 {
          color: $minor-color;
          font-weight: 500;
          font-size: 32rpx;
          text {
            font-size: 24rpx;
          }
        }
        .price-2 {
          font-size: 26rpx;
          color: #666666;
          line-height: 30rpx;
          text-decoration: line-through;
        }
      }
      .box {
        background: $minor-color;
        border-radius: 8rpx;
        padding: 8rpx 12rpx;
        color: #ffffff;
        font-size: 26rpx;
        margin-left: 20rpx;
      }
    }
    .right {
      font-size: 28rpx;
      color: #999999;
      display: flex;
      align-items: center;
      image {
        width: 20rpx;
        height: 20rpx;
        display: block;
        margin-left: 10rpx;
      }
    }
  }
  .bottom {
    border-top: 1px solid #eaeaea;
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 76rpx;
      font-size: 28rpx;
      color: #666666;
    }
  }
}
.line-container {
  background: #ffffff;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  font-size: 28rpx;
  color: #333333;
  padding: 0 20rpx;
  text {
    color: #fe781f;
  }
}

.tradein-container {
  background: #ffffff;
  margin-top: 20rpx;
  padding: 30rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    .top {
      display: flex;
      align-items: center;
      .iconfont {
        color: $theme-color;
        font-size: 36rpx;
      }
      .text {
        color: $theme-color;
        margin-left: 8rpx;
        font-weight: 500;
      }
      ::v-deep .u-tag {
        margin-left: 16rpx;
        border-color: $assist-color;
        .u-tag__text {
          color: $assist-color;
        }
      }
    }
    .bottom {
      font-size: 24rpx;
      margin-top: 20rpx;
    }
  }
  .right {
    display: flex;
    align-items: center;
    color: $assist-color;
    font-size: 28rpx;
    .iconfont {
      margin-left: 8rpx;
      color: $sec-font;
    }
  }
}

.allBottom-container {
  position: fixed;
  bottom: 0;
  left: 0;
}

.tradeinBottom-container {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  background: #e6f0ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    .tag {
      display: flex;
      align-items: center;
      background: $theme-color;
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      .iconfont {
        color: #ffffff;
        font-size: 32rpx;
      }
      .name {
        font-size: 24rpx;
        color: #ffffff;
        margin-left: 8rpx;
      }
    }
    .text {
      font-size: 24rpx;
      margin-left: 12rpx;
    }
  }
  .right {
    display: flex;
    align-items: center;
    color: $assist-color;
    font-size: 28rpx;
    .iconfont {
      margin-left: 8rpx;
      color: $sec-font;
    }
  }
}

.detail-container {
  background: #ffffff;
  margin-top: 20rpx;
  padding-bottom: 100rpx;
  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 88rpx;
    text-align: center;
    font-weight: 600;
  }
  .content {
    image,
    img {
      width: 100%;
      display: block;
    }
  }
}
.evaluate-container {
  background: #ffffff;
  margin-top: 20rpx;
  padding: 0 20rpx;
  .title {
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      font-size: 32rpx;
      text-align: center;
      font-weight: 600;
    }
    .right {
      display: flex;
      align-items: center;
      color: $sec-font;
      text {
        margin-left: 8rpx;
        font-size: 24rpx;
      }
    }
  }
  .list {
    .item {
      padding-bottom: 30rpx;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user {
          display: flex;
          align-items: center;
          image {
            width: 80rpx;
            height: 80rpx;
            display: block;
            border-radius: 50%;
            margin-right: 20rpx;
          }
          .right {
            .name {
              max-width: 300rpx;
              font-size: 28rpx;
              color: #333333;
              font-weight: 500;
            }
            .date {
              font-size: 24rpx;
              color: #999999;
              margin-top: 12rpx;
            }
          }
        }
      }
      .tags {
        display: flex;
        flex-wrap: wrap;
        .it {
          line-height: 44rpx;
          padding: 0 15rpx;
          border: 1px solid #eaeaea;
          border-radius: 44rpx;
          font-size: 24rpx;
          margin-right: 14rpx;
          margin-top: 14rpx;
          color: #666666;
        }
      }
      .content {
        font-size: 28rpx;
        color: #333333;
        margin-top: 14rpx;
      }
      .images {
        display: flex;
        flex-wrap: wrap;
        margin-top: 14rpx;
        image {
          width: 140rpx;
          height: 140rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }
}

.bottom-container {
  width: 710rpx;
  padding: 0 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  border-top: 1px solid #eaeaea;
  .left {
    display: flex;
    width: 280rpx;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 40rpx;
      position: relative;
      width: 66rpx;
      &:last-child {
        margin-right: 0;
      }
      .iconfont {
        font-size: 48rpx;
        &.active {
          color: $minor-color;
        }
      }
      text {
        font-size: 20rpx;
        color: #333333;
        margin-top: 4rpx;
        white-space: nowrap;
      }
      .dot {
        position: absolute;
        right: -4rpx;
        top: -8rpx;
        background: $minor-color;
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        text-align: center;
        border-radius: 32rpx;
        font-size: 20rpx;
        color: #ffffff;
      }
    }
  }
  .right {
    display: flex;
    .button {
      width: 190rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 80rpx;
      font-size: 28rpx;
      &.cart {
        color: $theme-color;
        background: #e6f0ff;
      }
      &.buy {
        color: #ffffff;
        background: $theme-color;
        margin-left: 10rpx;
      }
      &.sec {
        color: #ffffff;
        background: $minor-color;
        margin-left: 10rpx;
      }
    }
  }
}
.cart-container {
  padding: 60rpx 20rpx 30rpx;
  .main {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1px solid #eaeaea;
    image {
      width: 200rpx;
      height: 200rpx;
      display: block;
      flex-shrink: 0;
    }
    .right {
      margin-left: 26rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 28rpx;
        font-weight: 500;
        line-height: 36rpx;
      }
      .price {
        display: flex;
        align-items: center;
        .price-con {
          display: flex;
          flex-direction: column;
          .price-1 {
            color: $minor-color;
            font-weight: 500;
            font-size: 32rpx;
            text {
              font-size: 24rpx;
            }
          }
          .price-2 {
            font-size: 26rpx;
            color: #666666;
            line-height: 30rpx;
            text-decoration: line-through;
          }
        }
        .box {
          background: $minor-color;
          border-radius: 8rpx;
          padding: 8rpx 12rpx;
          color: #ffffff;
          font-size: 26rpx;
          margin-left: 20rpx;
        }
      }

      .stock {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
  .attr {
    padding: 20rpx 0;
    border-bottom: 1px solid #eaeaea;
    .title {
      font-size: 28rpx;
      color: #333333;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      .item {
        margin-top: 16rpx;
        padding: 10rpx 16rpx;
        font-size: 24rpx;
        color: #666666;
        background: #f5f5f5;
        border-radius: 5rpx;
        margin-right: 16rpx;
        &.current {
          color: $theme-color;
          background: #e6f0ff;
        }
      }
    }
  }
  .num {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 28rpx;
      color: #333333;
    }
    ::v-deep .u-number-box {
      .u-number-box__minus,
      .u-number-box__plus {
        width: 26px;
      }
    }
  }
  .tradein {
    border-top: 1px solid #eaeaea;
    padding: 30rpx 0 0;
    .top {
      display: flex;
      .name {
        font-size: 28rpx;
        flex-shrink: 0;
      }
      .text {
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }
    .tag {
      display: inline-block;
      margin-top: 16rpx;
      padding: 12rpx 24rpx;
      font-size: 24rpx;
      color: #666666;
      background: #f5f5f5;
      border-radius: 50rpx;
      margin-right: 16rpx;
      &.active {
        color: $assist-color;
        background: rgba($color: $assist-color, $alpha: 0.2);
      }
    }
    .agreement {
      height: 80rpx;
      padding-top: 20rpx;
      display: flex;
      align-items: flex-end;
      .content {
        display: flex;
        align-items: center;
        .iconfont {
          font-size: 36rpx;
          &.icon-danxuan {
            color: $sec-font;
          }
          &.icon-danxuan2 {
            color: $theme-color;
          }
        }
        .text {
          margin-left: 8rpx;
          font-size: 24rpx;
          text {
            color: $theme-color;
          }
        }
      }
    }
  }
  .button {
    text-align: center;
    line-height: 74rpx;
    border-radius: 74rpx;
    font-size: 28rpx;
    margin-top: 20rpx;
    &.cart {
      color: #ffffff;
      background: $theme-color;
    }
    &.buy {
      color: #ffffff;
      background: $theme-color;
    }
    &.sec {
      color: #ffffff;
      background: $minor-color;
    }
  }
}

.sharelist-container {
  padding: 30rpx 0;
  display: flex;
  button {
    background: none;
    border-radius: 0;
    &::after {
      border: none;
    }
  }
  .item {
    display: flex;
    width: 50%;
    flex-direction: column;
    align-items: center;
    image {
      width: 100rpx;
      height: 100rpx;
      display: block;
      margin-bottom: 20rpx;
    }
    text {
      font-size: 28rpx;
      line-height: 32rpx;
      color: #333333;
    }
  }
}
.canvas-container {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999;
  margin-left: -150px;
  margin-top: -280px;
  .button {
    display: flex;
    justify-content: center;
    text {
      display: block;
      width: 280rpx;
      height: 70rpx;
      border-radius: 70rpx;
      background: $theme-color;
      font-size: 28rpx;
      color: #ffffff;
      text-align: center;
      line-height: 70rpx;
      margin-top: 20rpx;
    }
  }
}

.shareGuideDialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba($color: #000000, $alpha: 0.4);
  display: flex;
  justify-content: flex-end;
  .content {
    .icon {
      text-align: right;
      margin-right: 50rpx;
      margin-top: 20rpx;
      text {
        font-size: 52rpx;
        color: #ffffff;
      }
    }
    .text {
      view {
        font-size: 28rpx;
        color: #ffffff;
        margin-top: 12rpx;
        text-align: center;
      }
    }
  }
}
</style>
