<template>
	<view>
		<view :style="'height:'+systemH+'px'"></view>
		<view class='bargain'>
			<!-- #ifdef H5 -->
			<view class='iconfont icon-xiangzuo' v-if='retunTop' @tap='goBack' :style="'top:'+navH+'px'"></view>
			<!-- #endif -->
			<view class="header" :class="bargainInfo.relation == 10 ? 'on' : ''">
				<view class='people'>
					{{bargainInfo.view_num || 0}}人查看 丨 {{bargainInfo.share_num || 0}}人分享 丨 {{bargainInfo.user_count_all || 0}}人参与
				</view>
				<countDown v-if="bargainInfo.relation == 10" :tipText="'倒计时'" :dayText="'天'" :hourText="'时'" :minuteText="'分'"
				 :secondText="'秒'" :datatime="datatime" :isDay="true"></countDown>
				<view v-if="bargainInfo.relation == 1" class='pictxt acea-row row-center-wrapper'>
					<view class='pictrue'>
						<image :src='userInfo.avatar'></image>
					</view>
					<view class='text'>
						{{userInfo.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.product && bargainInfo.product.image ? bargainInfo.product.image : ""'></image>
						<view class="bargain_view">
							查看商品
							<text class="iconfont icon-jiantou iconfonts"></text>
						</view>
					</view>
					<view class='text acea-row row-column-around'>
						<view class='line2'>{{bargainData.store_name}}</view>
						<view class='money font-color'>
							助力价: ￥
							<text class='num'>{{bargainPrice}}</text>
						</view>
						<view class='successNum'>{{bargainInfo.user_count_product}}人正在参与</view>
					</view>
				</view>
				<!-- 进度条 -->
				<block>
					<view class="cu-progress acea-row row-middle round margin-top">
						<view class='acea-row row-middle bg-red' :style="'width:'+ (bargainInfo.yet_assist_count/bargainInfo.assist_count*100).toFixed(2) +'%;'"></view>
					</view>
					<view class='money acea-row row-between-wrapper'>
						<view v-if="bargainInfo.yet_assist_count != bargainInfo.assist_count">还差{{bargainInfo.assist_count-bargainInfo.yet_assist_count}}人</view>
					</view>
				</block>
				<!-- 帮助助力、助力成功： -->
				<view v-if="bargainInfo.relation == 10">
					<view v-if="bargainInfo.yet_assist_count == bargainInfo.assist_count">

						<view class='bargainSuccess'>
							<text class='iconfont icon-xiaolian'></text>
							恭喜您助力成功，快去支付
						</view>
						<view v-if="bargainInfo.order.paid != 0 && bargainInfo.order.paid != 1" class='bargainBnt' @tap='goPay'>立即支付</view>
						<view v-else class='bargainBnt' @tap='goOrderDetail(bargainInfo.order)'>查看订单</view>
						<view class='bargainBnt on' @tap='goBargainList'>抢更多商品</view>
					</view>
					<view v-else>
						<!-- #ifdef H5 -->
						<button class='bargainBnt' v-if="$wechat.isWeixin()" @click="H5ShareBox = true">邀请好友助力</button>									<button v-else class='bargainBnt copy-data' :data-clipboard-text="protocol +
							'//' +
							host +
							'/pages/activity/assist_detail/index?id='+
							id+'&spid='+uid">邀请好友助力</button>																			
						<!-- #endif -->
						<!-- #ifdef MP -->
						<button open-type='share' class='bargainBnt'>邀请好友助力</button>
						<!-- #endif -->
						<view class='tip'>
							已有
							<text class='font-color'>{{bargainInfo.yet_assist_count}}</text>
							位好友成功助力
						</view>
					</view>

				</view>
				<view v-if="bargainInfo.relation == 1">
					<view class='bargainBnt' @tap='setBargainHelp'>为好友助力</view>
				</view>

				<view v-if="bargainInfo.relation == -1 || bargainInfo.relation == -2">
					<view>
						<view v-if="bargainInfo.relation == -1" class='bargainSuccess'>
							<text class='iconfont icon-xiaolian'></text>
							已成功助力好友
						</view>
						<view class='bargainBnt' @tap='currentBargainUser'>我也要发起助力</view>
					</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/images/left.png'></image>
					</view>
					<view class='titleCon'>助力好友</view>
					<view class='pictrue on'>
						<image src='../../../static/images/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_img' v-if="item.avatar_img"></image>
									<image src="/static/images/f.png" v-else></image>
								</view>
								<view class='text'>
									<view class='name line1'>{{item.nickname}}</view>
									<view class='line1'>{{item.create_time}}</view>
								</view>
							</view>
							<view class='money font-color'>
								已助力
							</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='/images/left.png'></image>
					</view>
					<view class='titleCon'>商品详情</view>
					<view class='pictrue on'>
						<image src='/images/left.png'></image>
					</view>
				</view>
				<view v-if="bargainInfo.product && bargainInfo.product.content" class='conter'>
					<jyf-parser :domain='domain' :html="bargainInfo.product.content.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>					
				</view>
				<view class='lock'></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 {
		getAssistDetail,
		postAssistHelp,
		assistHelpList,
		initiateAssistApi,
		getAssistUser
	} from '../../../api/activity.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		postCartAdd
	} from '../../../api/store.js';
	import {
		openBargainSubscribe
	} from '@/utils/SubscribeMessage.js';
	import util from '../../../utils/util.js';
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import countDown from '@/components/countDown';
	import home from '@/components/home';
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		silenceBindingSpread
	} from "@/utils";
	import { spread } from '@/api/user.js'
	import history from "@/mixins/history";
	import shareScence from "@/libs/spread";
	
	const app = getApp();

	export default {
		components: {
			countDown,
			// #ifdef MP
			authorize,
			// #endif
			home,
			"jyf-parser": parser
		},
		mixins: [history],
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				countDownDay: '00',
				countDownHour: '00',
				countDownMinute: '00',
				countDownSecond: '00',
				active: false,
				id: 0, //助力产品编号
				userInfo: {}, //当前用户信息
				bargainUid: 0, //开启助力用户
				bargainUserInfo: {}, //开启助力用户信息
				bargainUserId: 0, //开启助力编号
				bargainInfo: [], //助力产品
				bargainData: {
					assistSku: []
				},
				offset: 0,
				limit: 20,
				limitStatus: false,
				bargainUserHelpList: [],
				bargainUserHelpInfo: [],
				bargainUserBargainPrice: 0,
				status: '', // 0 开启助力   1  朋友帮忙助力  2 朋友帮忙助力成功 3 完成助力  4 助力失败 5已创建订单
				bargainCount: [], //分享人数  浏览人数 参与人数
				
				retunTop: true,
				bargainPartake: 0,
				interval: null,
				userBargainStatus: 0, //判断自己是否助力
				productStock: 0, //判断是否售罄；
				quota: 0, //判断是否已限量；
				userBargainStatusHelp: true,
				navH: '',
				statusPay: '',
				bargainSumCount: 0,
				bargainPrice: 0,
				datatime: 0,
				offest: '',
				tagStyle: {
					img: 'width:100%;display:block;',
					video: 'width:100%;'
				},
				domain: HTTP_REQUEST_URL,
				H5ShareBox: false, //公众号分享图片
				systemH: 0,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				pages: '',
				protocol: '',
				host: '',
				currSpid: ""
			}

		},
		computed: mapGetters(['isLogin','uid']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getBargainDetails();
					}
				},
				deep: true
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var that = this;
			if(options.spid){
				app.globalData.spid = options.spid;
				that.currSpid = options.spid
			}
			// #ifdef MP
			uni.getSystemInfo({
				success: function(res) {
					that.systemH = res.statusBarHeight
					that.navH = that.systemH + 10
				}
			})
			// #endif
			var pages = getCurrentPages();
			if (pages.length <= 1) {
				// that.retunTop = false
			}
			//扫码携带参数处理
			// #ifdef MP
			if (options.scene) {
				var value = util.getUrlParams(decodeURIComponent(options.scene));
				if (typeof value === 'object') {
					if (value.id) options.id = value.id;
					if (value.bargain) options.bargain = value.bargain;
					//记录推广人uid
					if (value.spid){
						app.globalData.spid = value.spid;
						that.currSpid = value.spid
					} 
				} else {
					app.globalData.spid = value;
				}
			}
			//记录推广人uid
			if (options.spid) app.globalData.spid = options.spid;
			// #endif
			if (options.hasOwnProperty('id')) {
				that.id = options.id;
				that.bargainUid = options.bargain || 0
			}
			if (that.isLogin) {
				console.log(that.bargainUid, 'that.bargainUid')
				if (that.bargainUid == 'undefined') {
					that.bargainUid = that.$store.state.app.uid
				}
				that.getBargainDetails();
				// #ifdef MP
				that.getHistory()
				// #endif
			} else {
				// #ifndef MP
				toLogin();
				// #endif
				// #ifdef MP
				that.$set(that, 'isAuto', true);
				that.$set(that, 'isShowAuth', true);
				// #endif
			}
			
			shareScence(that.currSpid,that.isLogin)
			// this.isLogin && silenceBindingSpread();
			uni.setNavigationBarTitle({
				title: '助力详情'
			})
		},
		onShow: function(){
			// #ifdef H5
			this.protocol = window.location.protocol
			this.host = window.location.host
			//#endif
		},
		onReady: function() {
			// #ifdef H5
			this.$nextTick(function() {
				const clipboard = new ClipboardJS(".copy-data");
				clipboard.on("success", () => {
					this.$util.Tips({
						title: '链接已复制成功，请粘贴分享'
					});
				});
			});
			// #endif		
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},

			goBack: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 去商品页
			goProduct() {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${this.bargainInfo.product.old_product_id}`
				})
			},

			goPay: function() { //立即支付
				var that = this;
				var data = {
					product_id: that.bargainInfo.product_assist_set_id,
					product_attr_unique: that.bargainInfo.product.unique,
					cart_num: 1,
					product_type: 3,
					is_new: 1
				};
				postCartAdd(data).then(res => {
					uni.navigateTo({
						url: '/pages/users/order_confirm/index?new=1&cartId=' + res.data.cart_id
					});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					})
				});
			},
			getBargainDetails: function() { //获取助力产品详情
				var that = this;
				var id = that.id;
				getAssistDetail(id).then(function(res) {
					that.bargainInfo = res.data;
					that.bargainData = res.data.assist;
					that.bargainPrice = that.bargainData.assistSku[0].assist_price;
					that.userInfo = res.data.user;
					that.bargainSumCount = res.data.yet_assist_count;
					that.datatime = res.data.stopTime;
					that.pages = '/pages/activity/assist_detail/index?id=' + that.id;
					console.log(that.pages);
					// uni.setNavigationBarTitle({
					// 	title:res.data.bargain.title.substring(0,13)+'...'
					// })
					that.bargainUserHelpList = []
					that.getBargainUser();
					//#ifdef H5
					that.setOpenShare();
					//#endif
				}).catch(function(err) {
					that.$util.Tips({
						title: err
					}, {
						tab: 3
					})
				})
			},
			currentBargainUser: function() { //当前用户助力
				let that = this;	
				let id = that.bargainInfo.product_assist_id;
				initiateAssistApi(id).then(res => {
					let assist_id = res.data.product_assist_set_id
					uni.hideLoading();
					// #ifndef MP
					uni.navigateTo({
						url: '/pages/activity/assist_detail/index?id=' + assist_id
					});
					// #endif
					// #ifdef MP
					openBargainSubscribe().then(res => {
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/activity/assist_detail/index?id=' + assist_id
						});
					}).catch((err) => {
						uni.hideLoading();
					});
					// #endif					
				}).catch((err) => {
					uni.hideLoading();
					that.$util.Tips({
						title: res.message
					})
				});
			},
			setBargainHelp: function() { //帮好友助力
				var that = this;
				postAssistHelp(that.bargainInfo.product_assist_set_id).then(res => {
					that.$set(that, 'bargainUserHelpList', []);
					that.getBargainUser();
					that.$util.Tips({
						title: res.message
					})
					that.getBargainDetails();
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
					that.$set(that, 'bargainUserHelpList', []);
					that.getBargainUser();
				})
			},
			getBargainUser: function() { //获取助力帮
				var that = this;
				var data = {
					offset: that.offset,
					limit: that.limit,
				};
				assistHelpList(that.id).then(res => {
					var bargainUserHelpListNew = [];
					var bargainUserHelpList = that.bargainUserHelpList;
					var len = res.data.list.length;

					bargainUserHelpListNew = bargainUserHelpList.concat(res.data.list);

					that.$set(that, 'bargainUserHelpList', res.data.list);
					that.$set(that, 'limitStatus', data.limit > len);
					that.$set(that, 'offest', (Number(data.offset) + Number(data.limit)));
				});
			},
			getBargainUserBargainPricePoster: function() {
				var that = this;
				this.active = false
				this.H5ShareBox = true
			},

			goBargainList: function() {
				uni.navigateTo({
					url: '/pages/activity/assist/index',
				})
			},
			goOrderDetail: function(order) {
				if (order.paid == 1) {
					uni.navigateTo({
						url: '/pages/order_details/index?order_id=' + order.order_id,
					})
				} else {
					uni.navigateTo({
						url: '/pages/order_details/stay?order_id=' + order.group_order_id,
					})
				}

			},
			close: function() {
				this.$set(this, 'active', false);
			},
			onLoadFun: function(e) {
				this.getBargainDetails();
				this.isShowAuth = false
			},
			addShareAssist: function() { //添加分享次数 获取人数
				var that = this;
				console.log(that.bargainInfo.product_assist_set_id);
				getAssistUser(that.bargainInfo.product_assist_set_id).then(res => {});
			},
			//#ifdef H5
			setOpenShare() {
				let that = this;
				let configTimeline = {
					title: "您的好友" +
						that.userInfo.nickname +
						"邀请您助力" +
						that.bargainInfo.product.store_name,
					desc: that.bargainInfo.product.store_name,
					link: window.location.protocol +
						"//" +
						window.location.host +
						"/pages/activity/assist_detail/index?id=" +
						that.id+'&spid='+that.uid,
					imgUrl: that.bargainInfo.product.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
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		
		/**
		 * 生命周期函数--监听页面显示
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		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,
				share = {
					title: '您的好友' + that.userInfo.nickname + '邀请您帮他助力' + that.bargainInfo.product.store_name + ' 快去帮忙吧！',
					path: '/pages/activity/assist_detail/index?id=' + this.id+'&spread='+that.uid,
					imageUrl: that.bargainInfo.product.image,
				};
			that.close();
			that.addShareAssist();
			return share;
		},
		//#endif
	}
</script>

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

	.bargain .icon-xiangzuo {
		font-size: 40rpx;
		color: #fff;
		position: fixed;
		top: 30rpx;
		left: 30rpx;
		z-index: 99;
		font-size: 36rpx;
	}

	.bargain .header {
		background-image: url('data:image/png;base64,[encoded data, 331564 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, 329936 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: 30rpx;
		/* #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;

		&.disabled {
			background: #BFBFBF;
		}
	}

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

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