jsm-mall-h5-front/src/packageGoods/pages/detail.vue

<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)

        // 图片
        // const imgRes = await toBase64src(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_API + '/redirect?url=' + img)
        // const codeRes = await toBase64src(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_API + '/redirect?url=' + this.codeUrl)
        if(img.indexOf('https://zf-mall.oss-cn-shenzhen.aliyuncs.com') >= 0) {
          img = img.replace('https://zf-mall.oss-cn-shenzhen.aliyuncs.com', 'https://sxbh5.zfire.top/imgfile');
        }
        if(img.indexOf('https://train-2023.oss-cn-shenzhen.aliyuncs.com') >= 0) {
          img = img.replace('https://train-2023.oss-cn-shenzhen.aliyuncs.com', 'https://jiasm.zfire.top/sxbh5/imgfile');
        }

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

        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: .4);
			padding: 10rpx;
			image {
				width: 28rpx;
				height: 28rpx;
				display: block;
			}
		}
	}
	.seckill-container {
		height: 120rpx;
		background: linear-gradient(-90deg,rgba(255,37,118,1.00) 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: .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: .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>