<template>
	<view>
		<view style="background: rgb(41, 36, 56);">
			<view class="bargin" v-if="(show==false)">
				<view class="top-sty">
					<view class="user-info">
						<image class="user-img" lazy-load :src="(imgPath)"></image>
						<view class="username">{{user_nickname}}</view>
					</view>
				</view>
				<view class="goods-sty">
					<view class="goods-back-sty">
						<view class="part1_product">
							<view>
								<image class="pro_img" lazy-load :src="(Info.activity_rule.product_image)"></image>
							</view>
							<view class="pro_info">
								<view class="item_name_sty">{{Info.activity_rule.product_item_name}}</view>
								<view class="price_sty">
									<label style="color: #ff6803">{{__('底价：')}}</label>
									<label style="color: #ff6803;font-weight: bold;font-size: 50rpx;">{{sprintf('%.2f',Info.activity_rule.cut_down_min_limit_price)}}</label>
									<span style="text-decoration: line-through; margin-left: 10rpx; color: #999;">{{Info.activity_rule.item_unit_price}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="part-bottom-sty">
					<view class="time_sty">
						<view class="time_fon_sty">
							{{__('活动时间仅剩')}}
						</view>
						<view v-if="(end==1)">
							<view class="remaining_time">
								<view class="time">{{Time.hour}}</view><view class="point_sty">{{__(':')}}</view>
									<view class="time">{{Time.min}}</view><view class="point_sty">{{__(':')}}</view>
									<view class="time">{{Time.sec}}</view>
							</view>
						</view>
						<view v-if="(end==2)">
							<view class="remaining_time">
								<view class="time">{{Time.hour}}</view><view class="point_sty">{{__(':')}}</view>
								<view class="time">{{Time.min}}</view><view class="point_sty">{{__(':')}}</view>
								<view class="time">{{Time.sec}}</view>
							</view>
						</view>
					</view>
					<view class="u-progressBar">
						<view class="u-progressBar-cont" :style="'width:' + (width) + '%'"></view>
					</view>
					<view class="part3">
						<!-- 还未砍价，发起人=帮砍人，活动正在进行 开始砍价 -->
						<view class="button-start" @click="bargin" v-if="(Info.is_cut==false&&istrue&&end!=1&&end!=3&&Info.order_id=='')"></view>
						<!-- 还未砍价，发起人=帮砍人，活动还未开始 -->
						<view class="button-start" v-if="(Info.is_cut==false&&istrue&&end==1&&Info.order_id=='')"></view>
						<view class="cut_down_sty" v-if="Info.is_cut">
							<view style="margin-left: 150rpx;">
								{{__('原价')}}{{__('￥')}}{{sprintf('%.2f',Info.activity_rule.item_unit_price)}}
							</view>
							<view style="margin-right: 150rpx;">
								{{__('已砍')}}{{__('￥')}}{{sprintf('%.2f',Info.activity_rule.item_unit_price - Info.ac_sale_price)}}
							</view>
						</view>
						<!-- 已经砍价，发起人=帮砍人，活动还未结束，已砍价！=砍价空间 -->
						<view style="display:flex;" v-if="(Info.is_cut&&istrue&&isCut&&end!=1&&end!=3&&Info.order_id=='')">
							<view class="immediately_btn" @click="goshop"></view>
							<view class="help_cut_btn" v-if="(Info.activity_state == 1)" @click='shareBox'></view>
						</view>
						<view style="display:flex;justify-content: space-between">
						</view>
						
						<!-- 还未砍价，发起人！=帮砍人，活动还未结束 帮忙砍价 -->
						<view class="cut_pri_sty" @click="bargin" v-if="(Info.is_cut==false&&istrue==false&&isCut&&end!=1&&end!=3&&Info.order_id=='')"></view>
						
						<!-- 已经砍价，发起人=帮砍人，活动还未结束，已砍价=砍价空间 立即出手-->
						<!-- <view class="up_hands_sty" @click="goshop" v-if="(Info.is_cut&&istrue&&isCut==false&&end!=1&&end!=3&&Info.order_id=='')"></view> -->
						
						<!-- 已经砍价，发起人！=帮砍人，活动还未结束，已砍价！=砍价空间 -->
						<view v-if="(Info.is_cut&&istrue==false&&isCut&&end!=1&&end!=3&&Info.order_id=='')">
							<!-- 我也要 -->
							<navigator :url="'/activity/cutprice/detail?mid=' + (mid) + '&pid=' + (pid) + '&ac_id=' + (ac_id)" class="i_want_sty"></navigator>
							<!-- <button open-type="share" class="button1" style="margin:40rpx 0 0 0" @click='shareBox'>{{__('找人帮砍')}}</button>  -->
							<!-- 找人帮砍 -->
							<button class="help_cut_btn_1" v-if="(Info.activity_state == 1)" @click='shareBox'></button>
						</view>
						<!-- 已经砍价，发起人！=帮砍人，活动还未结束，已砍价=砍价空间 我也要 -->
						<navigator :url="'/activity/cutprice/detail?mid=' + (mid) + '&pid=' + (pid) + '&ac_id=' + (ac_id)" v-if="(istrue==false&&isCut==false&&end!=1&&end!=3&&Info.order_id=='')"
						 class="i_want_sty"></navigator>
						<!-- 活动已经结束 再逛逛-->
						<navigator class="again_stroll_sty" url="/activity/cutprice/list" v-if="(end==3)"></navigator>
						<!-- 您已购买，再逛逛 -->
						<navigator class="again_stroll_sty" url="/activity/cutprice/list" v-if="(Info.order_id&&end!=3)"></navigator>
						<!-- 恭喜你，砍价成功 -->
						<view class="congratulate-success" @click="goshop" v-if="(Info.is_cut&&istrue&&isCut==false&&end!=1&&end!=3&&Info.order_id=='')"></view>
					</view>
					<view class="part4" v-if="(Info.Description)">
						<view class="header">{{__('活动说明')}}</view>
						<rich-text :nodes="htmlString"></rich-text>
					</view>
					
					<view class="part6">
						<scroll-view class="m-nearbylist" scroll-y="true" @scrolltolower="scrollbottom">
						<view v-for="(items, index) in List" :key="index" style="display: flex;position: relative;border-bottom: 1rpx solid mediumpurple;">
							<view>
								<image class="avatar_sty" lazy-load :src="(items.user_avatar)"></image>
							</view>
							<view>
								<view class="user_nickname_sty">
									{{items.user_nickname}}<label style="margin-left: 10rpx;">{{items.user_mobile}}</label>
								</view>
								
							</view>
							<view class="cut_away_sty">
								{{__('砍掉')}}{{sprintf('%.2f',items.ach_price)}}{{__('元')}}
							</view>
						</view>
						</scroll-view>
					</view>
					
				</view>
				
			</view>
			<view :class="['msk']" @tap="back" v-if="showImg">
				<view class="msk_box">
					<image src="https://static.lancerdt.com/xcxfile/appicon/cutprice-1/cut-price-animation.png" style='width:100%' mode="widthFix"  @tap="back"></image>
				</view>
			</view>
			
		</view>
		<view class="u-tap-btn">
			<navigator url="/pages/index/index" open-type="switchTab" class="u-go-home">
				<view class="iconfont icon-shouyeshouye"></view>
			</navigator>
		</view>
		<share-box-mp :PageQRCodeInfo="PageQRCodeInfo" @cancelShare="cancelShare" @showCodeImg="showCodeImg" @shareQRCode="shareQRCode"
		 @saveImg="saveImg" :shareDataDefault="shareData" ref="shareBoxMp"></share-box-mp>
		<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
		
	</view>
</template>

<script>
	function getNowFormatDate() {
		var e = new Date,
			t = "-",
			n = e.getMonth() + 1,
			r = e.getDate();
		n >= 1 && n <= 9 && (n = "0" + n), r >= 0 && r <= 9 && (r = "0" + r);
		var i = e.getFullYear() + t + n + t + r;
		return i
	}

	import $ from "../../helpers/util";
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import shareBoxMp from '../../components/share-box-mp.vue'
	import shareBoxApp from '../../components/share-box-app.vue'

	export default {
		data() {
			return {

				Time: "",
				hours: "",
				show: false,
				showImg: false,
				showPrice: false,
				isCut: true,
				imgPath: "",
				user_nickname: "",
				mid: 0,
				uid: 0,
				pid: 0,
				page: 1,
				rows: 10,
				Info: {
					activity_rule: {
						product_image: ''
					}
				},
				end: 0,
				startTime: "",
				endTime: "",
				istrue: true,
				flag: true,
				ispage: true,
				width: 100,
				participantId: "",
				ac_id: 0,
				money: 0,
				List: [],
				hour: 0,
				min: 0,
				sec: 0,
				htmlString: '',
				PageQRCodeInfo: {
					Path: "",
					IsShare: false,
					IsShareBox: false,
					IsJT: false
				},
				shareData: {
					shareText: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
					shareTitle: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
					href: "https://www.suteshop.com",
					image: ''
				}
			};
		},
		components: {
			shareBoxMp,
			shareBoxApp
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('砍价详情')
			});
			var t = this;
			// 长参数解析
			if (options.scene) {
				let longUrl = decodeURIComponent(options.scene);
				let paramsArray = longUrl.replace("longUrl=", "").split("-");
				options.mid = paramsArray[0];
				options.pid = paramsArray[1];
				options.ac_id = paramsArray[2];
				options.uid = paramsArray[3];
			}

			options.sid ? t.setData({
				imgPath: this.userInfo.user_avatar,
				user_nickname: this.userInfo.user_nickname,
				mid: options.mid,
				uid: options.sid,
				participantId: this.userInfo.user_id,
				pid: options.pid,
			}) : t.setData({
				imgPath: this.userInfo.user_avatar,
				user_nickname: this.userInfo.user_nickname,
				mid: options.mid,
				uid: options.uid || this.userInfo.user_id,
				participantId: this.userInfo.user_id,
				pid: options.pid,
			});

			this.forceUserInfo(function(user) {
				t.GetOtherCutPriceActivityList();
			})
			//t.getTime()
		},
		onShow: function() {
			this.GetVendorCutPriceEventDetail()
		},
		onBackPress() {
			if (this.$refs.shareBoxApp.showBoxView) {
				this.$refs.shareBoxApp.cancel();
				return true;
			}
		},
		onUnload() {

			// 离开页面，注销事件
			var that = this

			if (this.$refs.shareBoxApp.showBoxView) {
				this.$refs.shareBoxApp.cancel()
			}
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

			GetVendorCutPriceEventDetail: function() {
				var that = this,
					params = {
						activity_id: this.mid,
						user_id: this.uid,
						participant_id: this.userInfo.user_id
					};
				params.user_id == params.participant_id ? this.setData({
					istrue: true
				}) : this.setData({
					istrue: false
				});
				$.request({
					url: this.Config.URL.user.getCutPriceActivity,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status) {
							data.CutPricePercent = (data.activity_rule.item_unit_price - data.ac_sale_price) / (data.activity_rule.item_unit_price -
								data.activity_rule.cut_down_min_limit_price)
							that.setData({
								Info: data,
								ac_id: data.ac_id,
								width: 100 * parseFloat(data.CutPricePercent).toFixed(2)
							});
							that.getTime();
							data.ac_sale_price - data.ac_mix_limit_price <= 0 ? that.setData({
								isCut: false
							}) : "";

							//WxParse.wxParse("PromotionRule", "html", data.activity_rule.activity_intro, that)

							if (data.activity_rule.activity_intro) {
								that.htmlString = data.activity_rule.activity_intro.replace(/\\/g, "").replace(/<img/g,
									"<img style=\"display:none;\"");	
							}
						} else {
							that.setData({
								flag: false,
								ispage: true
							})
						}
					}
				});
			},
			getTime: function() {
				var e = this,
					t = (new Date).getTime(),
					s = this.Info.activity_endtime,
					n = this.Info.activity_starttime;
				var i = (new Date(n.replace(/-/g, "/"))).getTime(),
					u = (new Date(s.replace(/-/g, "/"))).getTime();
				if (i >= t) {
					var a = setInterval(function() {
						e.setData({
							Time: $.Formattime1(e.Info.activity_starttime, a),
							end: 1
						}), e.Time == undefined && e.getTime()
					}, 1e3);
					return
				}
				if (u <= t) {
					var a = setInterval(function() {
						e.setData({
							Time: $.Formattime(e.Info.activity_endtime, a),
							end: 3
						}), e.Time == undefined && e.getTime()
					}, 1e3);
					return
				}
				if (i < t < u) {
					var a = setInterval(function() {
						e.setData({
							Time: $.Formattime(e.Info.activity_endtime, a),
							end: 2
						}), e.Time == undefined && e.getTime()
					}, 1e3);
					return
				}
			},
			GetOtherCutPriceActivityList: function() {
				var params = {
						activity_id: this.mid,
						user_id: this.uid,
						page: this.page
					},
					t = this;

				$.request({
					url: this.Config.URL.user.listsCutPriceHistory,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status && data.items.length > 0) {
							t.setData({
								flag: false
							});
							t.setData({
								ispage: true,
								List: data.items
							});
						} else {
							t.setData({
								flag: false,
								ispage: true
							})
						}
					}
				});
			},
			scrollbottom: function() {
				var e = this;
				e.setData({
					flag: false
				}), clearTimeout(t);
				var t = setTimeout(function() {
						e.setData({
							type: e.type,
							page: parseInt(e.page) + 1,
							rows: 10
						}), e.GetOtherCutPriceActivityList()
					},
					500)
			},
			CutPrice: function() {
				
				if (this.Info.activity_state > 1)
				{
					this.$.alert(this.__('活动已结束！'))
					return;
				}
				var params = {
						ac_id: this.ac_id,
						user_id: this.userInfo.user_id
					},
					that = this;
				$.request({
					url: this.Config.URL.user.doCutPrice,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status) {
							that.setData({
								money: data.ach_price,
								ac_id: data.ac_id,
								showImg: true
							})
							that.GetVendorCutPriceEventDetail();
							that.GetOtherCutPriceActivityList();
						} else {
							that.$.alert(msg)
						}
					}
				});
				
			},
			onShareAppMessage: function() {
				// #ifdef MP-WEIXIN
				wx.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
				// #endif

				return {
					title: this.Info.activity_rule.item_name,
					path: "/activity/cutprice/detail?mid=" + this.mid + "&uid=" + this.uid + "&pid=" + this.pid + "&ac_id=" + this.ac_id
				}
			},

			/**
			 * 用户点击右上角分享朋友圈
			 */
			onShareTimeline: function () {
				return {
					title: this.Info.activity_rule.item_name,
					query: {
						mid: this.mid,
						pid: this.pid,
						ac_id: this.ac_id,
						uid: this.userInfo.user_id
					}
				}
			},

			bargin: function() {
				this.CutPrice()
			},
			back: function() {
				this.setData({
					showImg: false
				}), this.GetVendorCutPriceEventDetail(), this.GetOtherCutPriceActivityList()
			},
			more: function(e) {
				if (this.flag) {
					var t = this;
					clearTimeout(n);
					var n = setTimeout(function() {
						t.setData({
							page: parseInt(t.page) + 1
						}), t.GetOtherCutPriceActivityList()
					}, 500)
				}
			},
			goshop: function() {
				var e = this,
					params = {
						amount: 1,
						item_id: this.Info.activity_rule.item_id,
						ac_id: this.Info.ac_id,
						order_id: this.Info.order_id,
						ac_id: this.ac_id
					};
				if (this.Info.order_id == "") {
					$.navigateTo({
						url: "/pages/checkout/checkout?single_activity=1&ifcart=0&cart_id=" + params.item_id + "|" + params.amount +
							"&activity_id=" + this.mid + "&ac_id=" + this.ac_id
					})
				} else {
					// $.navigateTo({url: "/pages/checkout/checkout?spid=" + JSON.stringify(params) + "&activity_id=" + this.mid + "&sponsorId=" + this.uid + "&sp=" + this.Info.ServicePlaceCode + "&pm=" + this.Info.PayMethodCode + "&et=" + this.Info.BusinessHoursEnd + "&st=" + this.Info.BusinessHoursStart + "&showdate=" + this.Info.ReservationTimeEnabled + "&showname=" + this.Info.ContactEnabled})
				}
			},
			shareQRCode: function(e) {
				var that = this,
					params = {
						path: this.Config.SiteUrl + "/h5/activity/cutprice/detail?mid=" + this.mid + "&uid=" + this.uid + "&pid=" + this.pid + "&ac_id=" + this.ac_id,
						Path: "/activity/cutprice/detail?mid=" + this.mid + "&uid=" + this.uid + "&pid=" + this.pid + "&ac_id=" + this.ac_id,
						MainImg: this.Info.activity_rule.product_image,
						MainTitle: this.Info.activity_rule.product_item_name,
						ProductId: this.pid,
						MarketingEventId: this.mid,
						ItemSalePrice: this.Info.activity_rule.item_unit_price,
						OriginalPrice: "",
						GroupPersonAmout: "",
						CutPrice: this.Info.activity_rule.item_unit_price - this.Info.ac_sale_price,
						UserInfoId: this.uid,
						MarketingEventTime: this.Info.activity_starttime
					};
				//生成二维码并返回地址。 - 需要修改调整为小程序地址
				$.request({
					url: this.Config.URL.wx.getMiniAppQRCodeUnlimitPoster,
					data: params,
					success: function(data, status, msg, code) {
						that.setData({
							PageQRCodeInfo: {
								Path: data.url,
								IsShare: true,
								IsShareBox: false,
								IsJT: true
							}
						})
					}
				});
			},
			shareBox: function() {
				let that = this;
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				var $href = $.sprintf('%s/h5/activity/cutprice/detail?mid=%d&pid=%d&ac_id=%d&uid=%d', that.Config.SiteUrl,
					this.mid, this.pid, this.ac_id, this.uid);
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				// #ifdef APP-PLUS
				$href = $.sprintf('%s/h5/activity/cutprice/detail?mid=%d&pid=%d&ac_id=%d&uid=%d', that.Config.SiteUrl,
					this.mid, this.pid, this.ac_id, this.uid);
				// #endif

				// #ifdef MP-WEIXIN
				$href = $.sprintf("%s/activity/cutprice/detail?mid=%d&pid=%d&ac_id=%d&uid=%d", that.Config.SiteUrl,
					this.mid, this.pid, this.ac_id, this.uid);
				// #endif

				this.setData({
					shareData: {
						shareTitle: this.Info.activity_rule.product_item_name,
						shareText: '',
						href: $href,
						image: this.Info.activity_rule.product_image,
						price: this.number_format(this.Info.activity_rule.item_unit_price, 2)
					}
				});

				// #ifdef APP-PLUS
				this.$refs.shareBoxApp.show();
				// #endif

				// #ifdef MP-WEIXIN
				this.$refs.shareBoxMp.show();
				// #endif


				// #ifdef H5
				if (that.$.ifUniApp()) {
					this.$refs.shareBoxH5.show();
				} else {
					this.$refs.shareBoxMp.show();
				}
				// #endif

				return;

				this.setData({
					PageQRCodeInfo: {
						Path: "",
						IsShare: true,
						IsShareBox: true,
						IsJT: false
					}
				})
			},
			cancelShare: function() {
				this.setData({
					PageQRCodeInfo: {
						Path: "",
						IsShare: false,
						IsShareBox: false,
						IsJT: false
					}
				})
			},
			saveImg: function() {
				var e = this;
				$.showLoading(), $.downloadFile({
					url: this.PageQRCodeInfo.Path,
					success: function(t) {
						$.hideLoading(), $.saveImageToPhotosAlbum({
							filePath: t.tempFilePath,
							success: function() {
								e.setData({
									PageQRCodeInfo: {
										Path: "",
										IsShare: false,
										IsShareBox: false,
										IsJT: false
									}
								}), $.alert("保存图片成功！")
							},
							fail: function(e) {
								$.hideLoading();
							}
						})
					},
					fail: function(e) {
						$.hideLoading()
					}
				})
			},
			showCodeImg: function() {
				$.previewImage({
					current: this.PageQRCodeInfo.Path,
					urls: [this.PageQRCodeInfo.Path]
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../styles/_variables";

	.u-tap-btn {
		position: fixed;
		right: 20rpx;
		bottom: 150rpx;
	}

	.u-go-home {
		border-radius: 100%;
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #eee;
		font-size: 20rpx;
		text-align: center;
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
		z-index: 2;
		opacity: 0.8;
		line-height: 80rpx;
		margin-bottom: 20rpx;
	}

	.u-go-home .iconfont {
		font-size: 40rpx;
	}

	.bargin {
		width: 750rpx;
		// background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/whole-background-start.png);
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		// -moz-background-size: 100% 100%;
	}
	
	.goods-back-sty {
		background-color: #fff;
		margin-left: 80rpx;
		margin-right: 80rpx;
		padding-bottom: 1rpx;
	}

	.part1_product {
		display : flex;
		background-color: #eceeff;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}
	
	.pro_img {
		margin-top: 20rpx;
		margin-left: 10rpx;
		width: 215rpx;
		height: 205rpx;
		border-radius: 15rpx;
		border: 6rpx solid mediumpurple; /* 添加紫色 1px 边框 */
	}
	
	.pro_info {
		margin-top: 50rpx;
		margin-left: 20rpx;
		position: relative;
		padding-right: 70rpx;
	}
	
	.item_name_sty {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
	}
	
	.price_sty {
		position: absolute;
		left: 1rpx;
		bottom: 10rpx;
		width: 300rpx;
	}
	
	.part-bottom-sty {
		margin-top: -2rpx;
		width: 750rpx;
		height: 1200rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/background-bottom-one.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.goods {
		padding-left: 60rpx;
		padding-top: 90rpx;
	}

	.wxParse-p {
		padding: 0 40rpx;
	}

	.remaining {
		padding-left: 340rpx;
		padding-top: 18rpx;
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
	}
	
	.time_sty {
		height: 125rpx; 
		margin-left: 90rpx;
		margin-right: 90rpx;
		padding-left: 150rpx;
	}
	
	.time_fon_sty {
		margin-left: 65rpx;
		font-weight: bold;
	}

	.remaining_time {
		font-size: 45rpx;
		color: white;
	}

	.time {
		margin-right: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		padding-top: 6rpx;
		padding-bottom: 4rpx;
		display: inline;
		background-size: 80% 80%;
		background-color: #5555ff;
		border-radius: 8rpx;
		text-align: center;
	}
	
	.point_sty {
		color: #5555ff;
		display:inline;
		margin-right: 10rpx;
	}

	.present {
		padding-left: 340rpx;
		padding-top: 10rpx;
	}

	.present_price {
		display: inline;
		font-size: 28rpx;
		color: #fff;
	}

	.price {
		display: inline;
		font-size: 32rpx;
		color: #fff;
	}
	
	.top-sty {
		width: 750rpx;
		height: 950rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/background-start-top.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.user-info {
		padding-top: 690rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.user-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		border: 8rpx solid mediumpurple;
	}
	
	.username {
		margin-top: 5px;
		font-size: 28rpx;
		font-weight: bold;
		color: mediumpurple;
	}
	
	.goods-sty {
		margin-top: -2rpx;
		width: 750rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/background-goods.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	// .part2 {
	// 	margin-top: 45rpx;
	// 	margin-left: 58rpx;
	// 	margin-right: 62rpx;
	// 	border: 1rpx solid rgb(201, 76, 98);
	// 	background: rgb(176, 14, 46);
	// 	border-radius: 30rpx;
	// 	height: 146rpx;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	padding: 0 10rpx;
	// }

	.text1 {
		font-size: 28rpx;
		color: #fff;
		margin-top: 6rpx;
	}

	.progress-bar {
		margin-top: 36rpx;
		margin-left: 64rpx;
		margin-right: 30rpx;
		width: 618rpx;
		height: 36rpx;
		border: 5rpx solid rgb(89, 10, 35);
		background: rgb(89, 10, 35);
		border-radius: 40rpx;
		position: relative;
	}

	.left {
		border-radius: 40rpx;
		background: rgb(255, 231, 0);
		height: 100%;
		float: left;
	}
	
	.m-nearbylist {
		height: 100%;
	}

	.original {
		color: #fff;
		float: left;
	}

	.og1 {
		padding-left: 80rpx;
		padding-top: 15rpx;
		font-size: 28rpx;
	}

	.og2 {
		padding-left: 75rpx;
		font-weight: bolder;
		padding-top: 6rpx;
		color: #ffc001;
		font-family: '微软雅黑';
		font-size: 32rpx;
	}
	
	.part3 {
		position: relative;
		height: 210rpx;
	}

	.cut-off {
		color: #fff;
		display: flex;
		flex-flow: column;
		justify-content: center;
		margin-right: 72rpx;
		text-align: right;
	}

	.button-start {
		margin-top: 20rpx;
		margin-left: 270rpx;
		margin-right: 270rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/begin-bargaining-button.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.cut_down_sty {
		margin-bottom: 10rpx;
		justify-content: space-between;
		display: flex;
		font-size: 28rpx;
		font-weight: bold;
		color: mediumpurple;
	}
	
	.immediately_btn {
		margin-left: 180rpx;
		height: 60rpx;
		width: 150rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/sell-immediately.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.help_cut_btn {
		margin-left: 100rpx;
		height: 60rpx;
		width: 150rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/help-cut.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.cut_pri_sty {
		position: absolute;
		right: 180rpx;
		height: 60rpx;
		width: 150rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/help-cut-price.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.up_hands_sty {
		position: absolute;
		left: 180rpx;
		height: 60rpx;
		width: 150rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/sell-immediately.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.i_want_sty {
		position: absolute;
		left: 180rpx;
		height: 60rpx;
		width: 150rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/i-want.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.help_cut_btn_1 {
		position: absolute;
		right: 180rpx;
		height: 60rpx;
		width: 150rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/help-cut.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.again_stroll_sty {
		position: absolute;
		left: 300rpx;
		height: 60rpx;
		width: 150rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/again-stroll.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.congratulate-success {
		position: absolute;
		left: 300rpx;
		height: 60rpx;
		width: 150rpx;
		background-image: url(https://static.lancerdt.com/xcxfile/appicon/cutprice-1/sell-immediately.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.button {
		margin-top: 40rpx;
		margin-left: 160rpx;
		margin-right: 160rpx;
		border: 1rpx solid rgb(255, 172, 51);
		background: rgb(255, 172, 51);
		border-radius: 12rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}

	.button1 {
		width: 240rpx;
		height: 70rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		border-radius: 12rpx;
		background: rgb(255, 172, 51);
	}

	.button2 {
		margin-top: 40rpx;
		margin-left: 160rpx;
		margin-right: 160rpx;
		background: rgb(136, 136, 136);
		border-radius: 12rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}

	.part4 {
		color: #fff;
		border-top: 2rpx solid rgb(140, 19, 55);
		margin-top: 63rpx;
		min-height: 360rpx;
	}

	.header {
		padding-top: 36rpx;
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.content {
		text-indent: 3em;
		padding-top: 22rpx;
		font-size: 28rpx;
	}

	.content1 {
		text-indent: 3em;
		padding-top: 20rpx;
		font-size: 28rpx;
	}

	.part5 {
		margin-top: 40rpx;
	}

	.header1 {
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		background: rgb(255, 172, 51);
		border-radius: 42rpx;
		height: 52rpx;
		line-height: 52rpx;
	}

	.header_shadow {
		margin-left: 222rpx;
		margin-right: 233rpx;
		border-radius: 42rpx;
		height: 52rpx;
		line-height: 52rpx;
		padding-bottom: 4rpx;
	}

	.part6 {
		margin-top: 110rpx;
		height: 630rpx;
		margin-left: 80rpx;
		margin-right: 80rpx;
		overflow: hidden;
	}
	
	.avatar_sty {
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 3rpx solid mediumpurple;
	}
	
	.user_nickname_sty {
		margin-top: 30rpx;
		margin-left: 15rpx;
		font-size: 32rpx;
		width: 280rpx;
	    height: 55rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.cut_away_sty {
		color: #0543d5;
		font-size: 32rpx;
		position: absolute;
		right: 5rpx;
		top: 50rpx;
		font-weight: bold;
		font-size: 28rpx;
	}

	.kanjia view {
		font-size: 28rpx;
		color: #fff;
	}

	.animation {
		width: 100%;
		height: 100%;
		// background: black;
		position: absolute;
		top: 0;
	}

	.dao {
		width: 380rpx;
		height: 340rpx;
		position: absolute;
		top: 4%;
		right: 0%;
	}

	.dao1 {
		width: 380rpx;
		height: 340rpx;
		position: absolute;
		top: 4%;
		right: 0%;
		animation: move 300ms linear;
		animation-delay: 500ms;
		transform-origin: right bottom;
		animation-fill-mode: forwards;
	}

	@keyframes move {
		0% {
			transform: rotateX(0);
		}

		50% {
			transform: rotateZ(-45deg);
		}

		100% {
			transform: rotateZ(-30deg);
		}
	}

	.bag {
		width: 336rpx;
		height: 344rpx;
		position: absolute;
		top: 32%;
		left: 25%;
	}

	.bagmoney {
		width: 525rpx;
		height: 516rpx;
		position: absolute;
		top: 24%;
		left: 21%;
	}

	.success {
		width: 60%;
		height: 66rpx;
		border-radius: 10rpx;
		background: rgb(250, 51, 1);
		line-height: 66rpx;
		text-align: center;
		position: absolute;
		bottom: 15%;
		left: 20%;
		color: #fff;
	}

	.Price {
		display: inline;
		font-size: 42rpx;
		position: absolute;
		top: 67%;
		width: 100%;
		// #ifdef MP-WEIXIN
		top: 62% !important;
		// #endif
		text-align: center;
		color: rgb(255, 227, 130);
	}

	.more {
		color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		background: rgb(41, 36, 56);
		padding-bottom: 40rpx;
	}

	/* .progressBarBox{position: absolute;right: 0;bottom: 38%;color: #888;font-size: 24rpx;margin-right: 20rpx;} */

	.u-progressBar {
		display: inline-block;
		width: 80%;
		height: 26rpx;
		background-color: #d5d5d5;
		border-radius: 20rpx;
		overflow: hidden;
		margin-left: 10%;
	}

	.u-progressBar-cont {
		height: 26rpx;
		background-color: mediumpurple;
	}

	.floor {
		color: #ffc001;
		font-size: 28rpx;
		padding-top: 10rpx;
	}
</style>