mall-uniapp/pages/activity/goods_bargain_details/index.vue

<template>
	<view>
		<view class='bargain'>
			<view class="header" :class="startBargainUid !== userInfo.uid ? 'on' : ''">
				<navigator url="/pages/activity/goods_bargain/index" hover-class="none">
					<view class="back">
						<text class="iconfont icon-xiangzuo"></text> 返回砍价列表
					</view>
				</navigator>
			</view>
			<view class="pad30" style="padding-bottom: 30rpx;">
				<view class='wrapper'>
					<view class='pictxt acea-row row-between' @tap="goProduct">
						<view class='pictrue'>
							<image :src='bargainInfo.picUrl' />
						</view>
						<view class='text acea-row row-column-around'>
							<view class='line1'>{{ bargainInfo.name }}</view>
							<view class="surplus">最低价：￥{{ fen2yuan(bargainInfo.bargainMinPrice) }}</view>
              <view class="surplus">剩余：{{ bargainInfo.stock }} {{bargainInfo.unitName}}</view>
							<view class='money font-color-red'>
								当前: ￥ <text class='num'>{{ fen2yuan(buyPrice) }}</text>
							</view>
							<view class="acea-row" v-if="bargainInfo.endTime > new Date().getTime() && bargainInfo.stock > 0">
								<countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'"
									:minuteText="':'" :secondText="' '" :datatime="bargainInfo.endTime / 1000" :isDay="true" />
								<text style="font-size: 22rpx;margin-left: 4rpx;line-height: 36rpx;">后结束</text>
							</view>
							<view v-else-if="bargainInfo.endTime <= new Date().getTime()">
								<view style="font-size: 22rpx;" @tap='currentBargainUser'>已结束</view>
							</view>
							<view v-else-if="bargainInfo.stock <= 0">
								<view style="font-size: 22rpx;" @tap='currentBargainUser'>已售罄</view>
							</view>
						</view>
						<text class="iconfont icon-jiantou iconfonts"></text>
					</view>
				</view>
				<view class="content">
          <!-- 砍价中 -->
					<block v-if="action === 2">
						<view class='money acea-row row-center'
							:class="new Date().getTime() >= bargainUserInfo.endTime ? 'font_hui': ''">
							<view style="margin-right: 40rpx;">已砍<text class="font-color-red"
									:class="new Date().getTime() >= bargainUserInfo.endTime ? 'font_hui': ''">￥{{ fen2yuan(bargainUserInfo.bargainFirstPrice - bargainUserInfo.bargainPrice) }}</text>
							</view>
							<view>还剩<text class="font-color-red"
									:class="new Date().getTime() >= bargainUserInfo.endTime ? 'font_hui': ''">￥{{ fen2yuan(bargainUserInfo.remainPrice) }}</text>
							</view>
						</view>
						<view class="cu-progress acea-row row-middle round margin-top"
							:class="new Date().getTime() >= bargainUserInfo.endTime ? 'bg_qian': ''">
							<view class='acea-row row-middle bg-red'
								:class="new Date().getTime() >= bargainUserInfo.endTime ? 'bg-color-hui': ''"
								:style="'width:'+ bargainUserInfo.pricePercent +'%;'" />
						</view>
						<view class='tip'>
							一 已有{{ bargainInfo.successUserCount }}位好友砍价成功 一
						</view>
					</block>

					<!-- 自己砍价 -->
					<view
						v-if="startBargainUid === uid && action === 1">
						<view class='bargainBnt' @tap='userBargain' v-if="bargainInfo.stock > 0">立即参与砍价</view>
						<view class='bargainBnt grey' v-else>商品暂无库存</view>
					</view>
					<view v-if="startBargainUid === uid && bargainUserInfo.remainPrice > 0 && action === 2">
						<!-- #ifdef H5 -->
						<view class='bargainBnt' v-if="$wechat.isWeixin()" @click="H5ShareBox = true">邀请好友帮砍价</view>
						<view class='bargainBnt' v-else @tap='getBargainUserBargainPricePoster'>邀请好友帮砍价</view>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<button open-type='share' class='bargainBnt'>邀请好友帮砍价</button>
						<!-- #endif -->
					</view>

          <!-- 别人砍价 -->
					<view
						v-if="startBargainUid !== uid && action === 2 && helpAction === 1">
						<view class='bargainBnt' @tap='setBargainHelp'>帮好友砍一刀</view>
					</view>
					<view v-else-if="startBargainUid !== uid && [3, 4, 5].includes(action)" >
						<view class='bargainSuccess'>
							<image src="../static/cheng.png" /> 好友已砍成功
						</view>
						<view class='bargainBnt' @tap='currentBargainUser'>我也要参与</view>
					</view>
					<view v-else-if="startBargainUid !== uid && helpAction === 2">
						<view class='bargainSuccess'>
							<image src="../static/cheng.png" /> 您已帮其他好友砍过此商品
						</view>
						<view class='bargainBnt' @tap='currentBargainUser'>我也要参与</view>
					</view>
					<view v-else-if="startBargainUid !== uid && helpAction === 3">
						<view class='bargainSuccess'>
							<image src="../static/chengh.png" /> 已成功帮助好友砍价
						</view>
						<view class='bargainBnt' @tap='currentBargainUser'>我也要参与</view>
					</view>

          <!-- 自己砍价：下单流程 -->
          <view v-if="startBargainUid === uid && [3, 4].includes(action)">
						<view class='bargainSuccess'>
							<image src="../static/chengh.png" /> 恭喜您砍价成功，快去支付吧~
						</view>
						<view class="acea-row row-between buyBox pad30">
							<view class='buyMore on' @tap='goBargainList'>继续选购</view>
							<view v-if="action === 3" class='buyNow on' @tap='goPay'>立即支付</view>
							<view v-else-if="action === 4" class='buyNow on' @tap='goConfirm'>去支付</view>
						</view>
					</view>
          <!-- 自己砍价：下单成功 -->
          <view v-else-if="startBargainUid === uid && action === 5">
						<view class='bargainSuccess'>
							<image src="../static/chengh.png"></image>
							恭喜您砍价成功，去看看别的商品吧~
						</view>
						<view class="buyBox pad30">
							<view class='buyMore on' @tap='goBargainList' style="margin: 40rpx auto 0 auto;">继续选购</view>
						</view>
					</view>
					<navigator v-if="new Date().getTime() >= bargainInfo.endTime || bargainInfo.stock === 0"
                     url="/pages/activity/goods_bargain/index" hover-class="none">
						<view class="go">
              再去逛逛 <text class="iconfont icon-jiantou" />
            </view>
					</navigator>
				</view>

				<!-- 砍价记录 -->
				<view class='title font-color acea-row row-center-wrapper'>
					<view class='pictrue'>
						<image src='../static/zuo2.png'></image>
					</view>
					<view class="tits">
						<view class='titleCon'>砍价记录</view>
						<view class="line"></view>
					</view>
					<view class='pictrue on'>
						<image src='../static/you2.png'></image>
					</view>
				</view>
				<view class='bargainGang borRadius14'>
					<view class='list' v-if="bargainUserHelpList.length > 0">
						<block v-for="(item, index) in bargainUserHelpList" :key='index'
							v-if="index < 3 || !couponsHidden">
							<view class='item acea-row row-between-wrapper'>
								<view class='pictxt acea-row row-between-wrapper'>
									<view class='pictrue'>
										<image :src='item.avatar' />
									</view>
									<view class='text'>
										<view class='name line1'>{{item.nickname}}</view>
										<view class='line1'>{{ formatDate(item.createTime) }}</view>
									</view>
								</view>
								<view class='money'>
									已砍 <text class="font-color-red">{{ fen2yuan(item.reducePrice) }}</text>元
								</view>
							</view>

						</block>
						<view class="open acea-row row-center-wrapper" @click="openTap" v-if="bargainUserHelpList.length > 3">
              {{couponsHidden?'展开更多':'关闭展开'}}
              <text class="iconfont" :class='couponsHidden ? "icon-xiangxia":"icon-xiangshang"' />
            </view>
					</view>
					<view v-if="bargainUserHelpList.length === 0" class="contentNo">
						<text class="iconfont icon-xiaolian mr8"></text>
						暂无助力记录
					</view>
				</view>

				<!-- 商品详情 -->
				<view class='title font-color acea-row row-center-wrapper'>
					<view class='pictrue'>
						<image src='../static/zuo2.png'></image>
					</view>
					<view class="tits">
						<view class='titleCon'>商品详情</view>
						<view class="line"></view>
					</view>
					<view class='pictrue on'>
						<image src='../static/you2.png'></image>
					</view>
				</view>
				<view class='goodsDetails borRadius14'>
					<view class='conter borRadius14'>
            <jyf-parser v-if="bargainInfo.description" :html="bargainInfo.description" ref="article" :tag-style="tagStyle" />
						<view v-else class="contentNo">
							<text class="iconfont icon-xiaolian mr8" /> 暂无商品详情
						</view>
					</view>
				</view>

        <!-- 砍价助力后的提示弹窗 -->
				<view class='bargainTip' :class='active ? "on":""'>
					<view class='pictrue'>
						<image src="../../../static/images/bargainBg.png"></image>
					</view>
					<view v-if="startBargainUid === uid">
						<view class='cutOff'>
							您已砍掉<text class='font-color'>{{ fen2yuan(bargainUserBargainPrice) }}元</text>
						</view>
						<view class="bubbleBox">
							<view class="bubble"
								:style="'left:'+ (bargainUserInfo.pricePercent > 0 ? bargainUserInfo.pricePercent - 9 : 0) +'%;'">
								<text>{{ bargainUserInfo.pricePercent }}%</text>
							</view>
						</view>
						<view class="cu-progress acea-row row-middle round margin-top">
							<view class='acea-row row-middle bg-red'
								:style="'width:'+ bargainUserInfo.pricePercent +'%;'"></view>
						</view>
						<view class="t1">分享次数越多，成功的机会越大哦！</view>
						<!-- #ifdef MP -->
						<button open-type='share' class='tipBnt'>邀请好友帮砍价</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class='tipBnt' @tap='getBargainUserBargainPricePoster'>邀请好友帮砍价</view>
						<!-- #endif -->
					</view>
					<view v-else>
						<view class='cutOff'>
							帮好友砍掉<text class='font-color'>{{ fen2yuan(bargainUserBargainPrice) }}元</text>
						</view>
						<view class="bubbleBox">
							<view class="bubble"
								:style="'left:'+ (bargainUserInfo.pricePercent > 0 ? bargainUserInfo.pricePercent - 9 : 0) +'%;'">
								<text>{{ bargainUserInfo.pricePercent }}%</text>
							</view>
						</view>
						<view class="cu-progress acea-row row-middle round margin-top">
							<view class='acea-row row-middle bg-red'
								:style="'width:'+ bargainUserInfo.pricePercent +'%;'"></view>
						</view>
						<view class="t1">您也可以砍价低价拿哦，快去挑选吧~</view>
						<view @tap='currentBargainUser' class='tipBnt'>我也要参与</view>
					</view>
				</view>
			</view>
			<view class='mask' catchtouchmove="true" v-show='active || posters || canvasStatus' @tap='close' />
		</view>

		<!-- 发送给朋友图片 -->
		<view class="share-box" v-if="H5ShareBox">
			<image src="/static/images/share-info.png" @click="H5ShareBox = false"></image>
		</view>
		<!-- 海报展示 -->
		<view class='poster-pop' v-if="canvasStatus">
			<image :src='imagePath'></image>
			<!-- #ifndef H5  -->
			<view class='save-poster' @click="savePosterPath">保存到手机</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="keep">长按图片保存至相册</view>
			<view class='iconfont icon-cha2 close' @tap='close'></view>
			<!-- #endif -->
		</view>
		<view class="canvas">
			<canvas style="width:597px;height:850px;" canvas-id="activityCanvas"></canvas>
			<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}"
				style="opacity: 0;" />
		</view>
		<home></home>
	</view>
</template>
<script>
	import { imageBase64 } from "@/api/public";
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';
	import util from '../../../utils/util.js';
	import { toLogin } from '@/libs/login.js';
	import { mapGetters } from "vuex";
	import countDown from '@/components/countDown';
	import home from '@/components/home';
	import parser from "@/components/jyf-parser/jyf-parser";
	import { silenceBindingSpread } from "@/utils";
  import * as BargainApi from '@/api/promotion/bargain.js';
  import * as Util from '@/utils/util.js';
  import dayjs from "@/plugin/dayjs/dayjs.min.js";
  const app = getApp();
	export default {
		components: {
			countDown,
			home,
			"jyf-parser": parser
		},
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
        // ========== 拼团活动 ==========
        id: 0, // 砍价活动 id
        bargainInfo: {}, // 砍价活动
        buyPrice: '', // 最后砍价购买价格
        bgColor: {
          'bgColor': '#333333',
          'Color': '#fff',
          'width': '44rpx',
          'timeTxtwidth': '16rpx',
          'isDay': true
        },
        tagStyle: {
          img: 'width:100%;'
        },

        // ========== 砍价记录 ==========
        storeBargainId: 0, // 砍价记录 id
        startBargainUid: 0, // 开启砍价用户 uid TODO 芋艿：目前很多逻辑基于 startBargainUid 是不太合理的，应该通过后端返回的 userId 处理；等后续优化代码，在考虑
        bargainUserInfo: {}, // 开启砍价用户信息
        action: 0, // 拼团记录的参与动作
        helpAction: 0, // 帮砍动作
        active: false, // 砍价后的助力弹窗是否展示

        // ========== 帮砍（助力）记录 ==========
        bargainUserBargainPrice: 0, // 砍了多少钱
        bargainUserHelpList: [], // 助力列表
        couponsHidden: true,

        // ========== 分享 ==========
        qrcodeSize: 600, // 二维码的大小
        promotionCode: '', // 二维码图片
        imgTop: '', // 商品图片的 base64 码
        posters: false, // 分享弹窗的开关
        canvasStatus: false, // 是否显示海报
        H5ShareBox: false, // 公众号分享的弹出
        posterbackgd: '/static/images/canbj.png', // 海报的背景，用于海报的生成
        imagePath: '', // 海报图片

        // ========== 顶部 nav + scroll ==========
        navH: '' // 导航栏高度
      }
		},
		computed: mapGetters(['isLogin', 'userInfo', 'uid']),
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
      if (this.isLogin) {
        this.getBargainDetails();
      }
    },
    //#ifdef MP
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
      const share = {
        title: '您的好友' + this.userInfo.nickname + '邀请您帮他砍' + this.bargainInfo.name + ' 快去帮忙吧！',
          path: '/pages/activity/goods_bargain_details/index?id=' + this.id + '&startBargainUid='
            + this.startBargainUid + '&spid=' + this.uid + '&storeBargainId=' + this.storeBargainId,
          imageUrl: bargainInfo.picUrl,
      };
      this.close();
      return share;
    },
    //#endif
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
      uni.setNavigationBarTitle({
        title: '砍价详情'
      })

      // 通过 scene 解析到 id 和 startBargainUid
			// 扫码携带参数处理
			// #ifdef MP
			if (options.scene) {
				const value = util.getUrlParams(decodeURIComponent(options.scene));
				if (typeof value === 'object') {
					value.id ? options.id = value.id : options.id = ''
					if (value.startBargainUid) {
            options.startBargainUid = value.startBargainUid;
          }
					// 记录推广人uid
					if (value.pid) {
            app.globalData.spid = value.pid;
          }
				} else {
					app.globalData.spid = value;
				}
			}
			// 记录推广人uid
			if (options.spid) {
        app.globalData.spid = options.spid;
      }
			// #endif

      // 获得 id、startBargainUid 参数
      if (options.hasOwnProperty('id')) {
				options.id ? this.id = options.id : this.id = ''
			}
      if (options.startBargainUid === 'undefined') {
        this.startBargainUid = 0
      } else {
        this.startBargainUid = Number(options.startBargainUid);
      }
			if (this.isLogin) {
				if (this.startBargainUid === 0) {
					this.startBargainUid = Number(this.$store.state.app.uid)
				}
				this.storeBargainId = options.storeBargainId ? Number(options.storeBargainId) : 0;
			}

      // TODO 芋艿：分销逻辑
      if (this.isLogin) {
        silenceBindingSpread();
      }
		},
		methods: {
      // ========== 砍价活动 ==========
      /**
       * 获取砍价产品详情
       */
      getBargainDetails: function() {
        BargainApi.getBargainActivityDetail(this.id).then(res => {
          const bargainInfo = res.data;
          this.bargainInfo = bargainInfo;
          this.buyPrice = this.bargainInfo.bargainFirstPrice;
          this.pages = '/pages/activity/goods_bargain_details/index?id=' + this.id +
            '&startBargainUid=' + this.uid + '&scene=' + this.uid + '&storeBargainId=' + this.storeBargainId;
          uni.setNavigationBarTitle({
            title: bargainInfo.name.substring(0, 13) + '...'
          })

          // 获得拼团记录
          this.gobargainUserInfo();

          //#ifdef H5
          this.getImageBase64(bargainInfo.picUrl);
          //#endif
        }).catch(function (err) {
          this.$util.Tips({
            title: err
          }, {
            tab: 2,
            url: '/pages/activity/goods_bargain/index'
          });
        })
      },
      /**
       * 去商品页
       */
      goProduct() {
        uni.navigateTo({
          url: `/pages/goods_details/index?id=${this.bargainInfo.spuId}`
        })
      },
      /**
       * 前往砍价活动列表
       */
      goBargainList: function() {
        uni.navigateTo({
          url: '/pages/activity/goods_bargain/index',
        })
      },
      /**
       * 去支付
       */
      goConfirm() {
        uni.navigateTo({
          url: `/pages/activity/bargain/index`
        })

        // 下单界面
        const returnUrl = encodeURIComponent('/pages/order_pay_status/index?order_id=' + this.bargainUserInfo.orderId);
        uni.navigateTo({
          url: `/pages/goods/cashier/index?order_id=${this.bargainUserInfo.payOrderId}&returnUrl=${returnUrl}`
        });
      },

      // ========== 砍价记录 ==========

      /**
       * 获得拼团记录
       */
      gobargainUserInfo: function() {
        BargainApi.getBargainRecordDetail(this.storeBargainId, this.id).then(res => {
          const bargainUserInfo = res.data;
          this.bargainUserInfo = bargainUserInfo;
          this.action = this.calculateAction(bargainUserInfo);
          this.helpAction = bargainUserInfo.helpAction;
          this.storeBargainId = bargainUserInfo.id || this.storeBargainId;
          this.buyPrice = this.bargainUserInfo.bargainPrice || this.buyPrice;
          if (bargainUserInfo.bargainPrice >= 0 && this.bargainInfo.bargainMinPrice >= 0) {
            bargainUserInfo.remainPrice = bargainUserInfo.bargainPrice - this.bargainInfo.bargainMinPrice; // 剩余可砍的金额
            bargainUserInfo.pricePercent = 100 * (bargainUserInfo.bargainFirstPrice - bargainUserInfo.bargainPrice)
              / (bargainUserInfo.bargainFirstPrice - this.bargainInfo.bargainMinPrice)
          }

          // 获得助力列表
          if (bargainUserInfo.id) {
            BargainApi.getBargainHelpList(bargainUserInfo.id).then(res => {
              this.bargainUserHelpList = res.data || [];
            })
          }

          //#ifdef H5
          if (bargainUserInfo.id) {
            this.make();
          }
          this.setOpenShare();
          //#endif
        }).catch(err => {
          // 状态异常返回上级页面
          return this.$util.Tips({
            title: err.toString()
          }, {
            tab: 3,
            url: 1
          });
        });
      },
      /**
       * 计算 action 值
       */
      calculateAction: function (item) {
        if (!item || !item.status) {
          return 1; // 参与动作 - 未参与，可参与
        }
        if (item.status === 1) {
          return 2; // 参与动作 - 参与中，等待砍价
        }
        if (item.status === 3) {
          return 6; // 参与动作 - 砍价失败；TODO 芋艿：看看后续这个场景，应该做什么
        }
        if (!item.orderId) {
          return 3; // 参与动作 - 砍价成功，待下单
        }
        if (!item.payStatus) {
          return 4; // 参与动作 - 砍价成功，待下单
        }
        if (!item.payStatus) {
          return 5; // 参与动作 - 已下单，已付款
        }
        return 1; // 兜底逻辑
      },
      /**
       * 参与砍价
       */
      userBargain: function() {
        if (this.uid === this.startBargainUid) {
          this.setBargain();
        }
      },
      /**
       * 参与砍价
       */
      setBargain: function() { //参与砍价
        var that = this;
        BargainApi.createBargainRecord(this.id).then(res => {
          this.storeBargainId = res.data.storeBargainUserId;
          // 自己给自己助力 TODO 芋艿：目前自己不能给自己助力
          // this.setBargainHelp();
          // 获得拼团记录的最新信息
          this.gobargainUserInfo();
        }, error => {
          that.$util.Tips({
            title: error
          })
        })
      },
      /**
       * 跳转当前用户砍价
       */
      currentBargainUser: function() { //当前用户砍价
        uni.navigateTo({
          url: '/pages/activity/goods_bargain_details/index?id=' + this.id + '&startBargainUid=' + this.uid
        });
      },
      /**
       * 发起订单
       */
      goPay: function() {
        if (!this.isLogin) {
          toLogin();
          return
        }

        // 下单界面
        uni.navigateTo({
          url: '/pages/users/order_confirm/index?skuId=' + this.bargainUserInfo.skuId + '&count=1'
            + '&bargainRecordId=' + this.bargainUserInfo.id
        });
      },

      // ========== 砍价助力 ==========
      /**
       * 帮好友砍价
       */
      setBargainHelp: function() {
        BargainApi.createBargainHelp(this.storeBargainId).then(res => {
          this.$set(this, 'bargainUserHelpList', []);
          this.$set(this, 'bargainUserBargainPrice', res.data);
          this.$set(this, 'active', true);

          // 获得拼团记录的最新信息
          this.gobargainUserInfo();
        }).catch(err => {
          this.$util.Tips({
            title: err
          })
          this.$set(this, 'bargainUserHelpList', []);
        })
      },
      /**
       * 显示 / 隐藏砍价助力列表的完整列表
       */
      openTap() {
        this.$set(this, 'couponsHidden', !this.couponsHidden);
      },

      // ========== 分享 =========
      /**
       * 商品图片转base64
       *
       * @param images 商品图片
       */
      getImageBase64: function(images) {
        imageBase64({
          url: images
        }).then(res => {
          this.imgTop = res.data.code;
        })
      },
      /**
       * 设置微信分享
       */
      //#ifdef H5
      setOpenShare() {
        if (!this.$wechat.isWeixin()) {
          return
        }
        let configTimeline = {
          title: "您的好友" +
            this.userInfo.nickname +
            "邀请您砍价" +
            this.bargainInfo.title,
          desc: this.bargainInfo.info,
          link: window.location.protocol +
            "//" +
            window.location.host +
            '/pages/activity/goods_bargain_details/index?id=' + this.id + '&startBargainUid=' + this
              .uid + '&spid=' + this.uid + '&storeBargainId=' + this.storeBargainId,
          imgUrl: this.bargainInfo.picUrl
        };
        this.$wechat.wechatEvevt([
            "updateAppMessageShareData",
            "updateTimelineShareData",
            "onMenuShareAppMessage",
            "onMenuShareTimeline"
          ],
          configTimeline
        ).catch(res => {
          if (res.is_ready) {
            res.wx.updateAppMessageShareData(configTimeline);
            res.wx.updateTimelineShareData(configTimeline);
            res.wx.onMenuShareAppMessage(configTimeline);
            res.wx.onMenuShareTimeline(configTimeline);
          }
        });
      },
      //#endif
      /**
       * 生成海报
       */
      getBargainUserBargainPricePoster: function() {
        this.active = false
        // 提示正在生成中
        uni.showLoading({
          title: '海报生成中',
          mask: true
        });
        this.posters = false;
        // 如果没有二维码图片，则说明加载失败，进行错误提示
        if (!this.promotionCode) {
          uni.hideLoading();
          this.$util.Tips({
            title: this.errT
          });
          return
        }
        // 校验海报是否已经生成；如果失败，则进行错误提示
        setTimeout(() => {
          if (!this.imgTop) {
            uni.hideLoading();
            this.$util.Tips({
              title: '无法生成商品海报！'
            });
          }
        }, 1000);

        // 展示海报
        let arrImagesUrlTop = '';
        uni.downloadFile({
          url: this.imgTop,
          success: (res) => {
            arrImagesUrlTop = res.tempFilePath;
            let arrImages = [this.posterbackgd, arrImagesUrlTop, this.promotionCode];
            setTimeout(() => {
              this.$util.activityCanvas(arrImages, this.bargainInfo.name,
                this.fen2yuan(this.buyPrice),
                '已砍至',
                '还剩' + this.fen2yuan(this.bargainUserInfo.remainPrice) + '元砍价成功', 0,
                (tempFilePath) => {
                  this.imagePath = tempFilePath;
                  this.canvasStatus = true;
                  uni.hideLoading();
                });
            }, 500);
          }
        });
      },
      /**
       * 生成二维码
       */
      make() {
        let href = window.location.protocol +
          "//" +
          window.location.host +
          '/pages/activity/goods_bargain_details/index?id=' + this.id + '&startBargainUid=' + this
            .uid + '&spid=' + this.uid + '&storeBargainId=' + this.storeBargainId;
        uQRCode.make({
          canvasId: 'qrcode',
          text: href,
          size: this.qrcodeSize,
          margin: 10,
          success: res => {
            this.promotionCode = res;
          },
          fail: res => {
            this.$util.Tips({
              title: '海报二维码生成失败！'
            });
          }
        })
      },
      /**
       * 关闭海报
       */
      close: function() {
        this.$set(this, 'active', false);
        this.$set(this, 'posters', false);
        this.$set(this, 'canvasStatus', false);
      },

      fen2yuan(price) {
        return Util.fen2yuan(price)
      },
      formatDate: function(date) {
        return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
      }
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $theme-color !important;
	}
</style>
<style lang="scss" scoped>
	.userEvaluation {
		i {
			display: inline-block;
		}
	}

	.go {
		color: #E93323;
        text-align: center;
		font-size: 28rpx;
		margin-top: 26rpx;
		.iconfont {
			font-size: 11px
		}
	}

	.poster-pop {
		width: 594rpx;
		height: 850rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
		top: 50%;
		margin-top: -466rpx;

		image {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 10rpx;
		}

		.close {
			text-align: center;
			margin-top: 55rpx;
			color: #fff;
			font-size: 52rpx;
		}

		.save-poster {
			background-color: #df2d0a;
			font-size: ：22rpx;
			color: #fff;
			text-align: center;
			height: 76rpx;
			line-height: 76rpx;
			width: 100%;
		}

		.keep {
			color: #fff;
			text-align: center;
			font-size: 25rpx;
			margin-top: 25rpx;
		}
	}

	.canvas {
		position: fixed;
		opacity: 0;
	}

	.font_hui {
		color: #CCCCCC !important;
	}

	.bg_qian {
		background-color: #F5F5F5 !important;
	}

	.font-color-red {
		font-weight: 800;
	}

	.huiBtn {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		width: 630rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
		background-color: #CCCCCC;
		box-shadow: 0 7rpx 0 #AAAAAA;
		border-radius: 40rpx;
	}

	.huifont {
		color: #CCCCCC;
	}

	.buyBox {
		margin-top: 40rpx;

		.on {
			width: 300rpx;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
		}

		.buyNow {
			background: linear-gradient(180deg, #FF8831 0%, #F11B09 100%);
			box-shadow: 0 7rpx 0 #C11100;
		}

		.buyMore {
			background: linear-gradient(180deg, #FFCA52 0%, #FE960F 100%);
			box-shadow: 0 7rpx 0 #D87A00;
		}
	}


	.mr8 {
		margin-right: 8rpx;
	}

	.contentNo {
		width: 100%;
		padding: 50rpx 15rpx;
		text-align: center;
		font-size: 26rpx;
		color: #AAAAAA;
	}

	.generate-posters {
		width: 100%;
		height: 170rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 388;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		border-top: 1rpx solid #eee;
	}

	.generate-posters.on {
		transform: translate3d(0, 0, 0);
	}

	.generate-posters .item {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
	}

	.generate-posters .item .iconfont {
		font-size: 80rpx;
		color: #5eae72;
	}

	.generate-posters .item .iconfont.icon-haibao {
		color: #5391f1;
	}

	.bargain .bargainGang {
		background-color: #fff;

		.list {
			padding: 50rpx 30rpx 0 30rpx;
		}

		.open {
			font-size: 24rpx;
			color: #999;
			margin-top: 30rpx;
		}

		.helpNo {
			text-align: center;
			font-size: 26rpx;
			color: #AAAAAA;
		}
	}

	.bargain .bargainGang .open .iconfont {
		font-size: 25rpx;
		margin: 5rpx 0 0 10rpx;
	}

	.bargain .icon-xiangzuo {
		font-size: 24rpx;
		margin-right: 6px;
	}

	.bargain .header {
		background-image: url('data:image/png;base64,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
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 340rpx;
		margin: 0 auto;
		padding-top: 20rpx;

		.back {
			width: 235rpx;
			height: 54rpx;
			background: linear-gradient(233deg, #FFD169 0%, #FE960F 100%);
			opacity: 1;
			border-radius: 0px 27rpx 27rpx 0px;
			line-height: 54rpx;
			text-align: center;
			color: #6E3F00;
			font-size: 28rpx;
		}

	}

	.bargain .header .pictxt {
		margin: 330rpx auto 0 auto;
		font-size: 26rpx;
		color: #fff;
	}

	.bargain .header .pictxt .pictrue {
		width: 56rpx;
		height: 56rpx;
		margin-right: 30rpx;
	}

	.bargain .header .pictxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2rpx solid #fff;
	}

	.bargain .header .pictxt .text {
		margin-left: 20rpx;
	}

	.bargain .header .pictxt .text text {
		margin-left: 20rpx;
	}

	.bargain .header .time {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbgAAACmCAMAAACfv2reAAAAk1BMVEUAAAD/nSL/oCj/oCj/nSH/nSH/oCj/mhr/mhr/oCj/oCj/oCj/nSH/niT/mhr/mhr/oCj/mhr/oCj/oCj/mhr/niP/oCj/oCj/mhr/////oCj/mhr/nyT/w3f/rkf/rEL/pjT/tlr/xXv/uF3//vz/vmv/wXP/vWr/79r/1aD/05r/wXL/nB//5MH/+/X/t1r/5MP28hXaAAAAGXRSTlMABvndiVtUVPjkOC8Dk+DarKyQC+QH86amYv5b+wAAA6JJREFUeNrs3Nlu4kAQheEyGOywBkImcR8Sh7Avycz7P920G8l3MYtccko63wXc969GXuiS20XJ6ygF1SQdvyaRiL5kDKrZOBFtgxjID7tVRjVZ7Q45EA9EV4z5ntVqttqfEIuqBKevjGr3dUIiiqIZ9hkp2GMWiZ4Ocv5Oqljl6IieCQ4ZqThgInpG2GWkYoeR6EnBX0olK6SiB8hICSAlhjOE4YxiOKMYziiGM4rhjGI4o5TCIWA4PQhqzzcPGE4PMA9q3m0fAcPpKdfYk3o47z1gOD3Ae+A8qUfuLby/C4bTA5zXOPekHktvu11v12uG0wOc13jpybWi7ku75X6yOR43bwHD6QHegmK13U/+tF+6kZS6bVfls8RweoDPkqvS7pZ/lXTVNpvNkTtOW7nj/Gq7avFACrG7YOlt196W4fQA5zVeeu6CWLyu81rT3lP1VWWBV5WKgEVQeVX51Bu2nNcViR7890Of93EKVO7j+iFYJJ1iv/XlEj450QZ8BHJJv9hzHXn0n1M+q2ze9c8qpz7Zo7T9Z4+vdZoHyJV6Pllbin0XMVzzrg/37JO1xHl8kfoLAHIt5zHcb8FwRjGcUQxnFMMZdU84HrNq3jdSxXBjHmzUssPo9nA8Sty8Aya3h+Ph/caFw/s3h+O4jMbtMXtWDCcJTv8yqqQ/oKYMx5FQDSpHQumGGww5hK1e32EI23BwTziOPWzYOBFRDydRZ8JBo/VJR5NOJHeGI1MYziiGM4rhjGI4oxjOKIYziuGMYjijGM4ohjOK4YxiOKMYziiGM4rhjGI4oxjOKIYziuH+s0cHJAAAAACC/r9uR6AXnBI3JW5K3JS4KXFT4qbETYmbEjclbkrclLgpcVPipsRNiZsSNyVuStyUuClxU+KmxE2JmxI3JW5K3JS4KXFT4qbETYmbEjclbkrclLgpcVPipsRNiZsSNyVuStyUuClxU+KmxE2JmxI3JW5K3JS4KXFT4qbETYmbEjclbkrclLgpcVPipsRNiZsSNyVuStyUuClxtUdHJwzDUAxFZTs2xInBxLQf2n/QvrTQGSLQ+ZAGuKIcTpTDiXI4UQ4nyuFEOZwohxPlcKIcTpTDiXI4UQ4nyuFEOZwohxPlcKIcThQD3jEJJmSRzCixHSakkyyYsRdMyCA5UWPzAZNxZJIVaY/bXU7G8Q32AhpDvvqCPd7qIzM0hI0mZsPtHDQp48RPKzQZpeEv1Vky7fFymTXh9gGY1gZJcqJI8QAAAABJRU5ErkJggg==');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 440rpx;
		height: 166rpx;
		margin: 0 auto;

		font-size: 22rpx;
		text-align: center;
		padding-top: 11rpx;
		box-sizing: border-box;
	}

	.bargain .header .time .red {
		color: #fc4141;
	}

	.bargain .header .people {
		text-align: center;
		color: #fff;
		font-size: 20rpx;
		position: absolute;
		width: 85%;
		/* #ifdef MP */
		height: 44px;
		line-height: 44px;
		top: 40rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 58rpx;
		/* #endif */
	}

	.bargain .header .time text {
		color: #333;
	}

	.bargain {
		.wrapper {
			margin-top: -100rpx;

			.pictxt {
				width: 100%;
				height: 260rpx;
				background-color: #FFF5E6;
				padding: 20rpx;
				border-radius: 14rpx;
			}

			.surplus {
				color: #999999;
				font-size: 22rpx;
			}
		}

		.content {
			width: 100%;
			height: auto;
			background-image: url('../static/zhuangshi.png');
			background-size: 100% 100%;
			background-color: #fff;
			border-bottom-left-radius: 14rpx;
			border-bottom-right-radius: 14rpx;
			padding: 40rpx 0 70rpx 0;

			.money {
				color: #333333;
				font-size: 36rpx;

				.price {}
			}
		}
	}


	.bargain .wrapper,
		{
		// background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAAF8CAYAAAAzc1jZAAAco0lEQVR4Xu3dW4zc513H4feddWynQU1FY69zKvZuysENPqx7SFFRU4JEi+ACCVUUiQsuqYQ4VIWCchEuoAIFqRdI5QrlgkNLqQpSJA5VSWkKqKK7DkKuqIQ3RnUTe40CJRSSNDt/ZEeF1LGTmdnffuP1PLntzPf3n2fm4tMoTnrzFwECBAgQIECAAIEdKNB34DN7ZAIECBAgQIAAAQJNyPoRECBAgAABAgQI7EgBIbsjvzYPTYAAAQIECBAgIGT9BggQIECAAAECBHakgJDdkV+bhyZAgAABAgQIEBCyfgMECBAgQIAAAQI7TuD8iaX3C9kd97V5YAIECBAgQIDA/AoMrfWNlUO/2frog0J2fn8HPjkBAgQIECBAYEcJDHfdtWfj5vHvt9Z//OKDC9kd9fV5WAIECBAgQIDAfApsHN73bW3vax8eenvnNwWE7Hz+FnxqAgQIECBAgMCOETj73be/ftdr9vx57/0tL35oIbtjvkIPSoAAAQIECBCYP4GzR26/Y/euvX819PY9l396ITt/vwefmAABAgQIECCwIwS+evdtd+7ac+MjrbXlKz2wkN0RX6OHJECAAAECBAjMl8CTxw4eHC0sfKa1tnS1Ty5k5+s34dMSIECAAAECBK55gSdOLL1h1Prne2t3vtzDCtlr/qv0gAQIECBAgACB+RG4+Ae7dr9m76NX+mdiL1cQsvPzu/BJCRAgQIAAAQLXtMC5I4s39Rtu+uvW+lsneVAhO4mS1xAgQIAAAQIECGyrwNDaro2V5Ydbbz806SEhO6mU1xEgQIAAAQIECGybwMbK0u8Nvf/0NAeE7DRaXkuAAAECBAgQIFAusHFi6UND6x+edljITivm9QQIECBAgAABAmUCF1aWfmTc2p+13kfTjgrZacW8ngABAgQIECBAoERg49jSG4eF/sXW2mtnGRSys6h5DwECBAgQIECAwJYETh1uu/fduPz3Q2srsw4J2VnlvI8AAQIECBAgQGBmgfPHlx9so/aBmQdaa0J2K3reS4AAAQIECBAgMLXAuZWD9/Q++nxrfWHqN7/oDUJ2K3reS4AAAQIECBAgMJXA0FrfWFn+Yuuz/yMF3zwoZKei92ICBAgQIECAAIGtCFw4tvST44X+B1vZELIVejYIECBAgAABAgSmEji/svx3rbe3T/Wmq7zY35GtULRBgAABAgQIECAwscCFo0vfubkwvre30duH3t7cW7974je/6IVCdhY17yFAgAABAgQIECgTePL4gX297b2v99G9rbd7W+vfNcm4kJ1EyWsIECBAgAABAgRiAufvPrTYb2jfP4zakdZGR/owvHPo/XWXP4CQjX0lDhEgQIAAAQIECMwiMLQ2unD0O44Ou0b39WF039CHt7bWv13IzqLpPQQIECBAgAABAq+qwLkTB98mZF/Vr8BxAgQIECBAgACBWQX6V+6448Y7z579n1kHvI8AAQIECBAgQIDAqyHQz60sf3bh61/70X1f/renX40HcJMAAQIECBAgQIDALAL9/InloQ3DF/ozT//g/i9d+K9ZRryHAAECBAgQIECAQFrghZC9+NcwPNqfefqHxWz6K3CPAAECBAgQIEBgFoH/D9kXavbT+1fX39Nb25xlzHsIECBAgAABAgQIpAQuC9mLf2N2+MiBtfVfSD2AOwQIECBAgAABAgRmEXhJyF4cGY0337fv5JmPzTLoPQQIECBAgAABAgQSAlcM2TYMX1/4xvjNt/zTmX9OPIQbBAgQIECAAAECBKYVuHLIttb6MPzDqbX173tXa89PO+r1BAgQIECAAAECBLZb4Kohe/HwMLRfP7B2+v7tfgj7BAgQIECAAAECBKYVeNmQbW3Y3BwPP3Dbycc/N+2w1xMgQIAAAQIECBDYToFXCNlLf1/2y//5tfWjb/yX9ux2PohtAgQIECBAgAABAtMITBCyl/4ZgwcW19Z/bZphryVAgAABAgQIECCwnQKThWxr3xi15+/Zt/qva9v5MLYJECBAgAABAgQITCowache/INfq59bO/229/qvfk1q63UECBAgQIAAAQLbKDBxyF56hvHw/sWT6x/dxucxTYAAAQIECBAgQGAigelCdhj+/blnn7vrzlNnn5po3YsIECBAgAABAgQIbJPAdCH7wr9b9ncOrJ3+2W16HrMECBAgQIAAAQIEJhKYOmR7a8+P2ub33rLqP187kbAXESBAgAABAgQIbIvADCE7fGW82T504LH1P9yWJzJKgAABAgQIECBAYAKBiUK2D+2r42H8yfG4f+LWf1z/297aMMG2lxAgQIAAAQIECBDYNoGXCdnhfBvaJ/swfHzfyccfFa/b9h0YJkCAAAECBAgQmEHgW0N2aBeGNv5UH/on/ubk+iP+nbEziHoLAQIECBAgQIBARKCfX1l6amjtU70PH9+/+vhnuv/gQQTeEQIECBAgQIAAga0J9FOH2+43fak9t7UZ7yZAgAABAgQIECCQFejZc64RIECAAAECBAgQqBEQsjWOVggQIECAAAECBMICQjYM7hwBAgQIECBAgECNgJCtcbRCgAABAgQIECAQFhCyYXDnCBAgQIAAAQIEagSEbI2jFQIECBAgQIAAgbCAkA2DO0eAAAECBAgQIFAjIGRrHK0QIECAAAECBAiEBYRsGNw5AgQIECBAgACBGgEhW+NohQABAgQIECBAICwgZMPgzhEgQIAAAQIECNQICNkaRysECBAgQIAAAQJhASEbBneOAAECBAgQIECgRkDI1jhaIUCAAAECBAgQCAsI2TC4cwQIECBAgAABAjUCQrbG0QoBAgQIECBAgEBYQMiGwZ0jQIAAAQIECBCoERCyNY5WCBAgQIAAAQIEwgJCNgzuHAECBAgQIECAQI2AkK1xtEKAAAECBAgQIBAWELJhcOcIECBAgAABAgRqBIRsjaMVAgQIECBAgACBsICQDYM7R4AAAQIECBAgUCMgZGscrRAgQIAAAQIECIQFhGwY3DkCBAgQIECAAIEaASFb42iFAAECBAgQIEAgLCBkw+DOESBAgAABAgQI1AgI2RpHKwQIECBAgAABAmEBIRsGd44AAQIECBAgQKBGQMjWOFohQIAAAQIECBAICwjZMLhzBAgQIECAAAECNQJCtsbRCgECBAgQIECAQFhAyIbBnSNAgAABAgQIEKgRELI1jlYIECBAgAABAgTCAkI2DO4cAQIECBAgQIBAjYCQrXG0QoAAAQIECBAgEBYQsmFw5wgQIECAAAECBGoEhGyNoxUCBAgQIECAAIGwgJANgztHgAABAgQIECBQIyBkaxytECBAgAABAgQIhAWEbBjcOQIECBAgQIAAgRoBIVvjaIUAAQIECBAgQCAsIGTD4M4RIECAAAECBAjUCAjZGkcrBAgQIECAAAECYQEhGwZ3jgABAgQIECBAoEZAyNY4WiFAgAABAgQIEAgLCNkwuHMECBAgQIAAAQI1AkK2xtEKAQIECBAgQIBAWEDIhsGdI0CAAAECBAgQqBEQsjWOVggQIECAAAECBMICQjYM7hwBAgQIECBAgECNgJCtcbRCgAABAgQIECAQFhCyYXDnCBAgQIAAAQIEagSEbI2jFQIECBAgQIAAgbCAkA2DO0eAAAECBAgQIFAjIGRrHK0QIECAAAECBAiEBYRsGNw5AgQIECBAgACBGgEhW+NohQABAgQIECBAICwgZMPgzhEgQIAAAQIECNQICNkaRysECBAgQIAAAQJhASEbBneOAAECBAgQIECgRkDI1jhaIUCAAAECBAgQCAsI2TC4cwQIECBAgAABAjUCQrbG0QoBAgQIECBAgEBYQMiGwZ0jQIAAAQIECBCoERCyNY5WCBAgQIAAAQIEwgJCNgzuHAECBAgQIECAQI2AkK1xtEKAAAECBAgQIBAWELJhcOcIECBAgAABAgRqBIRsjaMVAgQIECBAgACBsICQDYM7R4AAAQIECBAgUCMgZGscrRAgQIAAAQIECIQFhGwY3
		// babackground-repeat: no-repeat;
		// background-size: 100% 100%;
		width: 100%;
		background-color: #fff;
		padding: 0 24rpx 10rpx 24rpx;
		box-sizing: border-box;
	}

	.bargain .pictxt .pictrue {
		width: 220rpx;
		height: 220rpx;
		position: relative;
	}

	.bargain .pictxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.bargain .pictxt .text {
		font-size: 30rpx;
		color: #333333;

		.line1 {
			width: 324rpx;
		}
	}

	.bargain .pictxt .text .money {
		font-weight: bold;
		font-size: 24rpx;
	}

	.bargain .pictxt .text .money .num {
		font-size: 36rpx;
	}

	.bargain .pictxt .text .successNum {
		font-size: 22rpx;
		color: #999;
	}

	.bargain .cu-progress {
		overflow: hidden;
		height: 12rpx;
		background-color: #FDEAE8;
		width: 560rpx;
		height: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx auto;
	}

	.bargain .cu-progress .bg-red {
		width: 0;
		height: 100%;
		transition: width 0.6s ease;
		border-radius: 20rpx;
		background-image: linear-gradient(to right, #ffa363 0%, #e93323 100%);
	}

	.bargain .money {
		// font-size: 22rpx;
		// color: #999;
		// margin-top: 40rpx;

	}

	.bargain .bargainSuccess {
		font-size: 26rpx;
		color: #333333;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
        margin-bottom: 40rpx;
		image {
			width: 48rpx;
			height: 62rpx;
			margin-right: 18rpx;
		}
	}

	.bargain .bargainSuccess .iconfont {
		font-size: 45rpx;
		color: #54c762;
		padding-right: 18rpx;
		vertical-align: -5rpx;
	}

	.bargain .bargainBnt {

		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		width: 630rpx;
		height: 80rpx;
		background-image: url('../static/btn.png');
		background-size: 100% 100%;
		// border-radius: 40rpx;
		// background: linear-gradient(180deg, #FF8831 0%, #F11B09 100%);
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
	}

	.bargain .bargainBnt.on {
		border: 2rpx solid $theme-color;
		color: $theme-color;
		background-image: linear-gradient(to right, #fff 0%, #fff 100%);
		width: 596rpx;
		height: 76rpx;
	}

	.bargain .bargainBnt.grey {
		color: #fff;
		background-image: linear-gradient(to right, #bbbbbb 0%, #bbbbbb 100%);
	}

	.bargain .tip {
		font-size: 22rpx;
		color: #999;
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 50rpx;
	}

	.bargain .lock,
	.bargain .bargainGang .lock,
	.bargain .goodsDetails .lock {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiQAAABCCAYAAABnwc0eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4YmQzMTQ1Ny01MGY2LWFmNDMtYmY4Yi1kNWRjZTMxZDg5MTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0RCMkU3QUEzQzBCMTFFOUI2N0VEOEJBMDUwMTU2ODMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0RCMkU3QTkzQzBCMTFFOUI2N0VEOEJBMDUwMTU2ODMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDRmMWQxNmItZTIxMC1lYzQwLWJmODYtYzE4OWRiYzNmOGYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhiZDMxNDU3LTUwZjYtYWY0My1iZjhiLWQ1ZGNlMzFkODkxNSIv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
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 548rpx;
		height: 66rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -43rpx;
		z-index: 5;
	}

	.bargain .title {
		font-size: 40rpx;
		font-weight: 600;
		// height: 80rpx;
		// margin-top: 30rpx;
	}

	.bargain .title .pictrue {
		width: 60rpx;
		height: 60rpx;
	}

	.bargain .title .pictrue.on,
	.bargain .title .pictrue.on {
		transform: rotate(180deg);
	}

	.bargain .title .pictrue image,
	.bargain .title .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.bargain .title .tits {
		margin: 50rpx 15rpx 40rpx 15rpx;
	}

	.bargain .title .titleCon {
		margin: 0 10rpx -14rpx 10rpx;
		color: #fff;
		border: 16rpx solid linear-gradient(0deg, #FFD136 0%, rgba(255, 213, 72, 0.12) 100%);
		;
	}

	.bargain .title .line {
		// width: 216rpx;
		height: 16rpx;
		background: linear-gradient(0deg, #FFD136 0%, rgba(255, 213, 72, 0.12) 100%);
		opacity: 0.6;
	}

	.bargain .bargainGang .list .item {
		padding-bottom: 50rpx;
	}

	.bargain .bargainGang .list .item .pictxt {

		// width: 310rpx;
		.num {
			width: 28rpx;
			height: 36rpx;

			// image{
			// 	width: 100%;
			// 	height: 100%;
			// }
		}

		.num1 {
			background-image: url(../static/n1.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.num2 {
			background-image: url(../static/n2.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.num3 {
			background-image: url(../static/n3.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}

	.bargain .bargainGang .list .item .pictxt .pictrue {
		width: 70rpx;
		height: 70rpx;
		margin-right: 14rpx;
	}

	.bargain .bargainGang .list .item .pictxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.bargain .bargainGang .list .item .pictxt .text {
		width: 225rpx;
		font-size: 20rpx;
		color: #999;
	}

	.bargain .bargainGang .list .item .pictxt .text .name {
		font-size: 25rpx;
		color: #333333;
		margin-bottom: 7rpx;
	}

	.bargain .bargainGang .list .item .money {
		font-size: 25rpx;
		color: #999999;
	}

	.bargain .bargainGang .list .item .money .iconfont {
		font-size: 35rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.bargain .bargainGang .load {
		font-size: 24rpx;
		text-align: center;
		line-height: 80rpx;
		height: 80rpx;
	}

	.bargain .goodsDetails {
		width: 100%;
		background-color: #fff;
		//margin: 13rpx auto 0 auto;
	}

	.bargain .goodsDetails~.goodsDetails {
		margin-bottom: 50rpx;
	}

	.bargain .goodsDetails .conter {
		// margin-top: 20rpx;
		overflow: hidden;
	}

	.bargain .goodsDetails .conter image {
		width: 100% !important;
		display: block !important;
	}

	.bargain .bargainTip {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 500rpx;
		height: 469rpx;
		margin-left: -246rpx;
		z-index: 111;
		border-radius: 14rpx;
		background-color: #fff;
		transition: all 0.3s ease-in-out 0s;
		opacity: 0;
		transform: scale(0);
		padding-bottom: 60rpx;
		margin-top: -330rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFEEEB 100%);

		.cu-progress {
			width: 410rpx;
			margin: 0 auto;
		}

		.t1 {
			text-align: center;
			color: #666666;
			font-size: 24rpx;
			margin: 20rpx 0 54rpx 0;
		}

		.bubbleBox {
			width: 410rpx;
			margin: 16rpx auto;

			.bubble {
				position: relative;
				display: inline-block;

				text {
					display: inline-block;
					font-size: 22rpx;
					padding: 2rpx 8rpx;
					border-radius: 30rpx;
					background-color: #E93323;
					color: #fff;
				}

				text::before {
					content: '';
					width: 0;
					height: 32rpx;
					border: 14rpx solid;
					position: absolute;
					bottom: -54rpx;
					left: 14rpx;
					border-color: #E93323 transparent transparent;
				}
			}

		}

	}

	.bargain .bargainTip.on {
		opacity: 1;
		transform: scale(1);
	}

	.bargain .bargainTip .pictrue {
		width: 500rpx;
		height: 200rpx;
		margin-top: -118rpx;
	}

	.bargain .bargainTip .pictrue image {
		width: 100%;
		height: 100%;
	}

	.bargain .bargainTip .cutOff {
		font-size: 32rpx;
		color: #333;
		text-align: center;
		margin: 12rpx 0 0rpx 0;
		font-weight: 600;

		text {
			font-weight: 600;
			font-size: 44rpx;
		}
	}

	.bargain .bargainTip .cutOff.on {
		margin-top: 26rpx;
	}

	.bargain .bargainTip .help {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
	}

	.bargain .bargainTip .tipBnt {
		font-size: 32rpx;
		color: #fff;
		width: 360rpx;
		height: 82rpx;
		border-radius: 41rpx;
		background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		text-align: center;
		line-height: 82rpx;
		margin: 0 auto;
	}

	.bargain_view {
		width: 180rpx;
		height: 48rpx;
		background: rgba(0, 0, 0, 0.5);
		opacity: 1;
		border-radius: 0 0 6rpx 6rpx;
		position: absolute;
		bottom: 0;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		line-height: 48rpx;
	}

	.iconfonts {
		font-size: 22rpx !important;
		line-height: 220rpx;
	}

	.wxParse-div {
		width: auto !important;
		height: auto !important;
	}

	.bargain .mask {
		z-index: 100;
	}

	.share-box {
		z-index: 1000;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>