<template>
	<view>
		<view :style="'height:' + systemH + 'px'"></view>
		<view class="bargain">
			<view class="back" @tap="goBack"><image src="../../../static/img/img45.png"></image></view>
			<view class="header" :class="bargainUid != userInfo.uid ? 'on' : ''">
				<view class="people">
					<!-- :style="'top:'+navH/2+'rpx'" -->
					{{ bargainCount.lookCount }}人查看 丨 {{ bargainCount.shareCount }}人分享 丨 {{ bargainCount.userCount }}人参与
				</view>
				<!-- <view class='time font-color' v-if="bargainUid == userInfo.uid">
					倒计时
					<text>{{countDownDay}}</text>
					天
					<text>{{countDownHour}}</text>
					时
					<text>{{countDownMinute}}</text>
					分
					<text>{{countDownSecond}}</text>
					秒
				</view> -->
				<countDown
					:tipText="'倒计时'"
					:dayText="'天'"
					:hourText="'时'"
					:minuteText="'分'"
					:secondText="'秒'"
					:datatime="datatime"
					:isDay="true"
					v-if="bargainUid == userInfo.uid"
				></countDown>
				<view v-if="bargainUid != userInfo.uid" class="pictxt acea-row row-center-wrapper">
					<view class="pictrue"><image :src="bargainUserInfo.avatar"></image></view>
					<view class="text">
						{{ bargainUserInfo.nickname }}
						<text>邀请您帮忙砍价</text>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="pictxt acea-row row-between-wrapper" @tap="goProduct">
					<view class="pictrue">
						<image :src="bargainInfo.image"></image>
						<view class="bargain_view">
							查看商品
							<image src="../../../static/img/img45.png" style="width: 20rpx;height: 20rpx;"></image>
						</view>
					</view>
					<view class="text acea-row row-column-around">
						<view class="line2">{{ bargainInfo.title }}</view>
						<view class="money font-color">
							当前: ￥
							<text class="num">{{ bargainInfo.price }}</text>
						</view>
						<view class="successNum">最低:￥{{ bargainInfo.min_price }}</view>
						<!-- <view class='successNum'>已有{{bargainSumCount}}人砍价成功</view> -->
					</view>
				</view>
				<!-- 进度条 -->
				<block v-if="bargainUserHelpInfo.price > 0">
					<view class="cu-progress acea-row row-middle round margin-top">
						<view class="acea-row row-middle bg-red" :style="'width:' + bargainUserHelpInfo.pricePercent + '%;'"></view>
					</view>
					<view class="money acea-row row-between-wrapper">
						<view>已砍{{ bargainUserHelpInfo.alreadyPrice }}元</view>
						<view>还剩{{ bargainUserHelpInfo.price }}元</view>
					</view>
				</block>
				<!-- 自己砍价 -->
				<view v-if="bargainUid == userInfo.uid && !userBargainStatus && bargainUserHelpInfo.price > 0">
					<view class="bargainBnt" @tap="userBargain" v-if="productStock > 0 && quota > 0">立即参与砍价</view>
					<view class="bargainBnt grey" v-if="productStock <= 0 || quota <= 0">立即参与砍价</view>
				</view>
				<!-- 帮助砍价、帮砍成功： -->
				<view v-if="bargainUid == userInfo.uid && bargainUserHelpInfo.price > 0 && userBargainStatus">
					<!-- #ifdef H5 -->
					<view class="bargainBnt" v-if="$wechat.isWeixin()" @click="H5ShareBox = true">邀请好友帮砍价</view>
					<view class="bargainBnt" v-else @tap="getBargainUserBargainPricePoster">邀请好友帮砍价</view>
					<!-- #endif -->
					
					<!-- #ifdef APP-PLUS -->
					<view class="bargainBnt" @tap="copy">复制链接,发送给好友</view>
					<!-- #endif -->
					
					<!-- #ifdef MP -->
					<button open-type="share" class="bargainBnt">邀请好友帮砍价</button>
					<!-- #endif -->
					<view class="tip">
						已有
						<text class="font-color">{{ bargainUserHelpInfo.count }}</text>
						位好友成功砍价
					</view>
				</view>

				<view v-if="bargainUid != userInfo.uid && userBargainStatusHelp && bargainUserHelpInfo.price > 0">
					<view class="bargainBnt" @tap="setBargainHelp">帮好友砍一刀</view>
				</view>
				<view v-if="bargainUid != userInfo.uid && userBargainStatusHelp && bargainUserHelpInfo.price == 0">
					<view class="bargainSuccess">
						<text class="iconfont icon-xiaolian"></text>
						好友已砍价成功
					</view>
					<view class="bargainBnt" @tap="currentBargainUser">我也要参与</view>
				</view>

				<view v-if="bargainUid != userInfo.uid && !userBargainStatusHelp">
					<view class="bargainSuccess">
						<text class="iconfont icon-xiaolian"></text>
						已成功帮助好友砍价
					</view>
					<view class="bargainBnt" @tap="currentBargainUser">我也要参与</view>
				</view>
				<view v-if="bargainUserHelpInfo.price == 0 && bargainUid == userInfo.uid && statusPay != 3">
					<view class="bargainSuccess">
						<!-- <text class='iconfont icon-xiaolian'></text> -->
						恭喜您砍价成功，快去支付
					</view>
					<view class="bargainBnt" @click="goPay">立即支付</view>
					<view class="bargainBnt on" @tap="goBargainList">抢更多商品</view>
				</view>

				<view class="lock"></view>
			</view>
			<view class="bargainGang">
				<view class="title font-color acea-row row-center-wrapper">
					<view class="pictrue"><image src="../../../static/img/left.png"></image></view>
					<view class="titleCon">砍价帮</view>
					<view class="pictrue on"><image src="../../../static/img/left.png"></image></view>
				</view>
				<view class="list">
					<block v-for="(item, index) in bargainUserHelpList" :key="index">
						<view class="item acea-row row-between-wrapper">
							<view class="pictxt acea-row row-between-wrapper">
								<view class="pictrue"><image :src="item.avatar"></image></view>
								<view class="text">
									<view class="name line1">{{ item.nickname }}</view>
									<view class="line1">{{ item.add_time }}</view>
								</view>
							</view>
							<view class="money font-color">
								<text class="iconfont icon-kanjia"></text>
								砍掉{{ item.price }}元
							</view>
						</view>
					</block>
				</view>
				<view class="load font-color" v-if="!limitStatus" @tap="getBargainUser">点击加载更多</view>
				<view class="lock"></view>
			</view>
			<view class="goodsDetails">
				<view class="title font-color acea-row row-center-wrapper">
					<view class="pictrue"><image src="../../../static/img/left.png"></image></view>
					<view class="titleCon">商品详情</view>
					<view class="pictrue on"><image src="../../../static/img/left.png"></image></view>
				</view>
				<view class="conter">
					<!-- <template is="wxParse" data="{{wxParseData:description.nodes}}" /> -->
					<jyf-parser :html="bargainInfo.description" ref="article" :tag-style="tagStyle"></jyf-parser>
					<!-- <rich-text :nodes="bargainInfo.description" class="conter"></rich-text> -->
				</view>
				<view class="lock"></view>
			</view>
			<view class="goodsDetails">
				<view class="title font-color acea-row row-center-wrapper">
					<view class="pictrue"><image src="../../../static/img/left.png"></image></view>
					<view class="titleCon">砍价规则</view>
					<view class="pictrue on"><image src="../../../static/img/left.png"></image></view>
				</view>
				<view class="conter">
					<!-- <template is="wxParse" :data="wxParseData:rule.nodes" /> -->
					<jyf-parser :html="bargainInfo.rule" ref="article"></jyf-parser>
				</view>
			</view>
			<view class="bargainTip" :class="active == true ? 'on' : ''">
				<view class="pictrue"><image src="../../../static/img/bargainBg.jpg"></image></view>
				<view v-if="bargainUid == userInfo.uid">
					<view class="cutOff">
						您已砍掉
						<text class="font-color">{{ bargainUserBargainPrice.price }}</text>
						元，听说分享次数越多砍价成功的机会越大哦！
					</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="help font-color">成功帮砍{{ bargainUserBargainPrice.price }}元</view>
					<view class="cutOff on">您也可以砍价低价拿哦，快去挑选心仪的商品吧~</view>
					<view @tap="currentBargainUser" class="tipBnt">我也要参与</view>
				</view>
			</view>
			<view class="mask" catchtouchmove="true" v-show="active == true" @tap="close"></view>
		</view>
		<!-- 发送给朋友图片 -->
		<view class="share-box" v-if="H5ShareBox"><image src="/static/images/share-info.png" @click="H5ShareBox = false"></image></view>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<!-- <home></home> -->
	</view>
</template>

<script>
import {
	getBargainDetail,
	postBargainStartUser,
	postBargainStart,
	postBargainHelpPrice,
	postBargainHelpCount,
	postBargainHelp,
	postBargainHelpList,
	postBargainShare
} from '../../../api/activity.js';
import { userSpread,cartAdd } from '@/api/product.js';
import { getUserInfo } from '@/api/user.js';
// import wxh from '../../../utils/wxh.js';
// import wxParse from '../../../wxParse/wxParse.js';
import util from '../../../utils/util.js';
import { toLogin } from '@/libs/login.js';
import { mapState } from 'vuex';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
// #ifdef MP
// import authorize from '@/components/Authorize';
// #endif
import countDown from '@/components/countDown';
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
// import home from '@/components/home';
import parser from '@/components/jyf-parser/jyf-parser';
import { silenceBindingSpread } from '@/utils';
const app = getApp();

export default {
	components: {
		countDown,
		// #ifdef MP
		// authorize,
		// #endif
		// home,
		'jyf-parser': parser
	},
	/**
	 * 页面的初始数据
	 */
	data() {
		return {
			countDownDay: '00',
			countDownHour: '00',
			countDownMinute: '00',
			countDownSecond: '00',
			active: false,
			id: 0, //砍价产品编号
			userInfo: {}, //当前用户信息
			userInfos: {}, //接口返回的用户信息
			bargainUid: 0, //开启砍价用户
			bargainUserInfo: {}, //开启砍价用户信息
			bargainUserId: 0, //开启砍价编号
			bargainInfo: [], //砍价产品
			offset: 0,
			limit: 20,
			limitStatus: false,
			bargainUserHelpList: [],
			bargainUserHelpInfo: [],
			bargainUserBargainPrice: 0,
			status: '', // 0 开启砍价   1  朋友帮忙砍价  2 朋友帮忙砍价成功 3 完成砍价  4 砍价失败 5已创建订单
			bargainCount: [], //分享人数  浏览人数 参与人数
			retunTop: true,
			bargainPartake: 0,
			isHelp: false,
			interval: null,
			userBargainStatus: 0, //判断自己是否砍价
			productStock: 0, //判断是否售罄；
			quota: 0, //判断是否已限量；
			userBargainStatusHelp: true,
			navH: '',
			statusPay: '',
			bargainSumCount: 0,
			bargainPrice: 0,
			datatime: 0,
			offest: '',
			tagStyle: {
				img: 'width:100%;'
			},
			H5ShareBox: false, //公众号分享图片
			systemH: 0,
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			num: 0
		};
	},
	computed: {
		...mapState(['hasLogin'])
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		let that = this;
		console.log(this,'this')

		// #ifdef MP
		uni.getSystemInfo({
			success: function(res) {
				that.systemH = res.statusBarHeight;
				that.navH = that.systemH + 10;
			}
		});
		// #endif

		//扫码携带参数处理
		if (options) {
			if (options.id) {
				that.id = options.id;
				that.bargainUid = options.bargain || 0;
			}
			if (options.bargain) {
				uni.setStorageSync('spread', options.bargain);
			}
		}
		console.log(that.hasLogin,'that.hasLogin')
		if (that.hasLogin) {
			if (that.bargainUid == 'undefined') {
				that.bargainUid = that.$store.state.app.uid;
			}
			that.getBargainDetails();
			that.addShareBargain();
			// app.globalData.openPages = '/pages/activity/goods_bargain_details/index?id=' + this.id + '&bargain=' + this.bargainUid +
			// 	'&spid=' + e.detail.uid;
			// this.$set(that, 'bargainPartake', e.detail.uid);
		} else {
			// #ifdef H5 || APP-PLUS
			toLogin();
			// #endif
			// #ifdef MP
			that.isAuto = true;
			that.$set(that, 'isShowAuth', true);
			// #endif
		}
		that.userinfos();
		that.hasLogin && silenceBindingSpread();
		uni.setNavigationBarTitle({
			title: '砍价详情'
		});
	},
	methods: {
		// 授权关闭
		userinfos() {
			let a;
			let that = this;
			getUserInfo({}).then(({ data }) => {
				console.log(data, 666);
				that.userInfos = data;
				if (that.userInfos.spread_uid == 0) {
					if (that.userInfos.uid != uni.getStorageSync('spread')) {
						userSpread({
							puid: uni.getStorageSync('spread')
						}).then(res => {
							uni.showToast({
								title: '邀请人添加成功'
							});
						});
					}
				}
			});
		},
		copy() {
			console.log('copy')
			let that = this;
			let url = 'https://mmz.liuniu946.com@pages/activity/goods_bargain_details/index?id=' + that.id +'@0' + '@' + that.userInfos.uid
			uniCopy({
				content: url,
				success: res => {
					console.log(res,'res')
					// uni.showToast({
					// 	title: res,
					// 	icon: 'none'
					// });
				},
				error: e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 3000
					});
				}
			});
		},
		authColse: function(e) {
			this.isShowAuth = e;
		},
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
		},
		// 去商品页
		goProduct() {
			uni.navigateTo({
				url: `/pages/product/product?id=${this.bargainInfo.product_id}`
			});
		},
		// 自己砍价；
		userBargain: function() {
			let that = this;
			if (that.userInfo.uid == that.bargainUid) {
				that.setBargain();
			}
		},
		goBack: function() {
			uni.navigateTo({
				url: '/pages/activity/goods_bargain/index'
			});
		},
		gobargainUserInfo: function() {
			//获取开启砍价用户信息
			let that = this;
			let data = {
				userId: that.bargainUid
			};
			postBargainStartUser({
				bargainId: that.id,
				bargainUserUid: that.bargainUid
			}).then(res => {
				that.$set(that, 'bargainUserInfo', res.data);
			});
		},
		goPay: function() {
			//立即支付
			let that = this;
			let data = {
				productId: that.bargainInfo.product_id,
				bargainId: that.id,
				cartNum: that.bargainInfo.num,
				uniqueId: '',
				combinationId: 0,
				secKillId: 0,
				new: 1
			};
			// url: '/pages/users/order_confirm/index?cartId=' + res.data.cartId
			//url: '/pages/order/createOrder?id=' + res.data.cartId
			cartAdd(data)
				.then(res => {
					uni.navigateTo({
						url: '/pages/users/order_confirm/index?cartId=' + res.data.cartId
					});
				})
				.catch(err => {
					return app.Tips({
						title: err
					});
				});
		},
		getBargainDetails: function() {
			//获取砍价产品详情
			let that = this;
			let id = that.id;
			console.log('getBargainDetails111');

			that.num++;
			getBargainDetail({}, id)
				.then(function(res) {
					that.bargainInfo = res.data.bargain;
					that.bargainPrice = res.data.bargain.price;
					that.userInfo = res.data.userInfo;
					that.bargainSumCount = res.data.bargainSumCount;
					that.userBargainStatus = res.data.userBargainStatus;
					that.productStock = res.data.bargain.attr.product_stock;
					that.quota = res.data.bargain.attr.quota;
					that.datatime = res.data.bargain.stop_time;
					app.globalData.openPages = '/pages/activity/goods_bargain_details/index?id=' + that.id + '&bargain=' + that.bargainUid + '&scene=' + that.userInfo.uid;
					// that.bargainUid = that.userInfo.uid;
					// WxParse.wxParse('description', 'html', that.data.bargainInfo.description || '', that, 0);
					// WxParse.wxParse('rule', 'html', that.data.bargainInfo.rule || '', that, 0);
					// wxh.time2(that.bargainInfo.stop_time, that);
					uni.setNavigationBarTitle({
						title: res.data.bargain.title.substring(0, 13) + '...'
					});
					that.getBargainHelpCount();
					that.bargainUserHelpList = [];
					that.getBargainUser();
					that.gobargainUserInfo();
					//#ifdef H5
					that.setOpenShare();
					//#endif
				})
				.catch(err => {
					uni.showToast({
						title: err,
						duration: 2000
					});
				});
		},
		getBargainHelpCount: function() {
			//获取砍价帮总人数、剩余金额、进度条、已经砍掉的价格
			let that = this;
			postBargainHelpCount({
				bargainId: that.id,
				bargainUserUid: that.bargainUid
			}).then(res => {
				let price = util.$h.Sub(that.bargainPrice, res.data.alreadyPrice);
				that.bargainUserHelpInfo = res.data;
				that.bargainInfo.price = parseFloat(price) <= 0 ? 0 : price;
				that.userBargainStatusHelp = res.data.userBargainStatus;
				that.statusPay = res.data.status;
			});
		},
		currentBargainUser: function() {
			//当前用户砍价
			this.$set(this, 'bargainUid', this.userInfo.uid);
			this.setBargain();
		},
		setBargain: function() {
			//参与砍价
			let that = this;
			postBargainStart({
				bargainId: that.id
			})
				.then(res => {
					that.$set(that, 'bargainUserId', res.data);
					that.getBargainUserBargainPrice('1');
					that.setBargainHelp();
					that.getBargainHelpCount();
					that.userBargainStatus = 1;
				})
				.catch(err => {
					uni.showToast({
						title: err,
						duration: 2000
					});
				});
		},
		setBargainHelp: function() {
			//帮好友砍价
			let that = this;
			let data = {
				bargainId: that.id,
				bargainUserUid: that.bargainUid
			};
			postBargainHelp(data)
				.then(res => {
					that.$set(that, 'bargainUserHelpList', []);
					that.$set(that, 'isHelp', true);
					that.getBargainUser();
					that.getBargainUserBargainPrice('2');
					that.getBargainHelpCount();
				})
				.catch(err => {
					that.$set(that, 'bargainUserHelpList', []);
					that.getBargainUser();
				});
		},
		getBargainUser: function() {
			//获取砍价帮
			let that = this;
			let data = {
				bargainId: that.id,
				bargainUserUid: that.bargainUid,
				offset: that.offset,
				limit: that.limit
			};
			console.log(data, 'getBargainUser获取砍价帮');
			postBargainHelpList(data).then(res => {
				let bargainUserHelpListNew = [];
				let bargainUserHelpList = that.bargainUserHelpList;
				let len = res.data.length;
				bargainUserHelpListNew = bargainUserHelpList.concat(res.data);
				that.$set(that, 'bargainUserHelpList', res.data);
				that.$set(that, 'limitStatus', data.limit > len);
				that.$set(that, 'offest', Number(data.offset) + Number(data.limit));
			});
		},
		getBargainUserBargainPricePoster: function() {
			let that = this;
			this.active = false;
			this.H5ShareBox = true;
			// uni.navigateTo({
			// 	url: '/pages/activity/poster-poster/index?type=1&id=' + that.id,
			// });
		},
		getBargainUserBargainPrice(type) {
			//获取帮忙砍价砍掉多少金额
			let that = this;
			let data = {
				bargainId: that.id,
				bargainUserUid: that.bargainUid
			};
			postBargainHelpPrice(data)
				.then(res => {
					that.$set(that, 'bargainUserBargainPrice', res.data);
					that.$set(that, 'active', true);
				})
				.catch(err => {
					that.$set(that, 'active', false);
				});
		},
		goBargainList: function() {
			uni.navigateTo({
				url: '/pages/activity/goods_bargain/index'
			});
		},
		close: function() {
			this.$set(this, 'active', false);
		},
		onLoadFun: function(e) {
			this.getBargainDetails();
			this.addShareBargain();
			app.globalData.openPages = '/pages/activity/goods_bargain_details/index?id=' + this.id + '&bargain=' + this.bargainUid + '&spid=' + e.uid;
			this.$set(this, 'bargainPartake', e.uid);
		},
		addShareBargain: function() {
			//添加分享次数 获取人数
			let that = this;
			postBargainShare({
				bargainId: this.id
			}).then(res => {
				that.$set(that, 'bargainCount', res.data);
			});
		},
		//#ifdef H5
		setOpenShare() {
			let that = this;
			let configTimeline = {
				title: '您的好友' + that.userInfo.nickname + '邀请您砍价' + that.bargainInfo.title,
				desc: that.bargainInfo.info,
				link: window.location.protocol + '//' + window.location.host + '/pages/activity/goods_bargain_details/index?id=' + that.id + '&bargain=' + that.userInfo.uid,
				imgUrl: that.bargainInfo.image
			};
			if (this.$wechat.isWeixin()) {
				this.$wechat
					.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'], configTimeline)
					.then(res => {
						console.log(res);
					})
					.catch(res => {
						if (res.is_ready) {
							res.wx.updateAppMessageShareData(configTimeline);
							res.wx.updateTimelineShareData(configTimeline);
							res.wx.onMenuShareAppMessage(configTimeline);
							res.wx.onMenuShareTimeline(configTimeline);
						}
					});
			}
		}
		//#endif
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function() {},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {
		if (this.interval !== null) clearInterval(this.interval);
	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {
		if (this.interval !== null) clearInterval(this.interval);
	},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},

	//#ifdef MP
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {
		let that = this;
		that.close();
		that.addShareBargain();
		return {
			title: '您的好友' + that.userInfo.nickname + '邀请您帮他砍' + that.bargainInfo.title + ' 快去帮忙吧！',
			path: app.globalData.openPages,
			imageUrl: that.bargainInfo.image
		};
	}
	//#endif
};
</script>

<style lang="scss">
page {
	background-color: #e93323 !important;
	font-size: 26rpx;
}

.bargain .back {
	width: 40rpx;
	/* #ifdef MP */
	height: 44px;
	line-height: 44px;
	/* #endif */
	height: 40rpx;
	image {
		width: 40rpx;
		height: 40rpx;
		transform: rotate(180deg);
	}
	position: fixed;
	left: 25rpx;
	top: 50rpx;
	z-index: 99;
}

.bargain .header {
	background-image: url('data:image/png;base64,[encoded data, 56016 characters]');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 698rpx;
	height: 572rpx;
	margin: 0 auto;
	padding-top: 0.1rpx;
}

.bargain .header.on {
	background-image: url('data:image/png;base64,[encoded data, 51068 characters]');
}

.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 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: 340rpx auto 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;
	/* #endif */
	/* #ifdef H5 */
	top: 58rpx;
	/* #endif */
}

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

.bargain .wrapper,
.bargain .bargainGang,
.bargain .goodsDetails {
	width: 660rpx;
	border: 6rpx solid #fc8b42;
	background-color: #fff;
	border-radius: 20rpx;
	margin: -162rpx auto 0 auto;
	box-sizing: border-box;
	padding: 0 24rpx 47rpx 24rpx;
	position: relative;
}

.bargain .wrapper .pictxt {
	margin: 26rpx 0 37rpx 0;
}

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

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

.bargain .wrapper .pictxt .text {
	width: 395rpx;
	font-size: 28rpx;
	color: #282828;
	height: 180rpx;
}

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

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

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

.bargain .wrapper .cu-progress {
	overflow: hidden;
	height: 12rpx;
	background-color: #eee;
	width: 100%;
	border-radius: 20rpx;
}

.bargain .wrapper .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 .wrapper .money {
	font-size: 22rpx;
	color: #999;
	margin-top: 15rpx;
}

.bargain .wrapper .bargainSuccess {
	font-size: 26rpx;
	color: #282828;
	text-align: center;
}

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

.bargain .wrapper .bargainBnt {
	font-size: 30rpx;
	font-weight: bold;
	color: #fff;
	width: 600rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
	text-align: center;
	line-height: 80rpx;
	margin-top: 32rpx;
}

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

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

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

.bargain .wrapper .lock,
.bargain .bargainGang .lock,
.bargain .goodsDetails .lock {
	background-image: url('data:image/png;base64,[encoded data, 4512 characters]');
	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 .bargainGang {
	margin: 13rpx auto 0 auto;
}

.bargain .bargainGang .title,
.bargain .goodsDetails .title {
	font-size: 32rpx;
	font-weight: bold;
	height: 80rpx;
	margin-top: 30rpx;
}

.bargain .bargainGang .title .pictrue,
.bargain .goodsDetails .title .pictrue {
	width: 46rpx;
	height: 24rpx;
}

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

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

.bargain .bargainGang .title .titleCon,
.bargain .goodsDetails .title .titleCon {
	margin: 0 20rpx;
}

.bargain .bargainGang .list .item {
	border-bottom: 1rpx dashed #ddd;
	height: 112rpx;
}

.bargain .bargainGang .list .item .pictxt {
	width: 310rpx;
}

.bargain .bargainGang .list .item .pictxt .pictrue {
	width: 70rpx;
	height: 70rpx;
}

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

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

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

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

.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 {
	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: 560rpx;
	margin-left: -280rpx;
	z-index: 111;
	border-radius: 20rpx;
	background-color: #fff;
	transition: all 0.3s ease-in-out 0s;
	opacity: 0;
	transform: scale(0);
	padding-bottom: 60rpx;
	margin-top: -330rpx;
}

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

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

.bargain .bargainTip .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 20rpx 20rpx 0 0;
}

.bargain .bargainTip .cutOff {
	font-size: 30rpx;
	color: #666;
	padding: 0 29rpx;
	text-align: center;
	margin-top: 50rpx;
}

.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: 50rpx auto 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;
}

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