shop4.3.57/plugins/community/activity/activity.vue

<template>
	<app-layout>
		<scroll-view @scrolltolower="getMore" :scroll-top="scrollTop" scroll-y @scroll="scroll"
			:style="{'height':`${windowHeight}px`}">
			<app-head v-if="getTheme" :theme="getTheme"></app-head>
			<!-- 团长信息 -->
			<view @click="toList" class="middleman dir-top-nowrap main-center">
				<view class="location t-omit">{{middleman.location}}</view>
				<view v-if="middleman.id > 0" class="middleman-info dir-left-nowrap">
					<image class="avatar" :src="middleman.avatar"></image>
					<view class="user-info">
						<view class="t-omit">{{middleman.name}} {{setting.middleman}} {{middleman.mobile}}</view>
						<view>
							<image class="icon" src="./../image/address.png"></image>
							<text>提货地址:{{middleman.province}}<text
									v-if="middleman.province != middleman.city">{{middleman.city}}</text>{{middleman.district}}{{middleman.detail}}</text>
						</view>
					</view>
				</view>
				<view v-if="middleman.is_allow_change == 1" class="space">距离最近{{space}}</view>
				<image v-if="middleman.is_allow_change == 1" class="arrow-image"
					src="/static/image/icon/arrow-right-white.png"></image>
			</view>
			<!-- 团购活动状态 -->
			<view v-if="activity.time > 0" class="time dir-left-nowrap cross-center">
				<image class="icon" src="./../image/timeline.png"></image>
				<view>距离本次团购活动开始还有{{d}}天{{h}}时{{m}}分{{s}}秒</view>
			</view>
			<view v-if="activity.activity_status == 2" class="time">
				<text>团购已结束，下次记得早点来哦</text>
			</view>
			<view class="status-area" v-if="activity.activity_status == 1">
				<view class="status dir-top-nowrap main-center cross-center">
					<view v-if="activity.condition == 0" class="end-time">{{activity.end_at}}结束</view>
					<view v-else class="condition main-between">
						<view>
							<text v-if="activity.num - activity.condition_count > 0">还差<text
									class="end-time">{{activity.num - activity.condition_count}}</text>{{activity.condition == 1 ? '人':'件商品'}}</text>拼团成功
						</view>
						<view class="end-time">{{activity.end_at}}结束</view>
					</view>
					<!-- 进度条 -->
					<view class="progress" v-if="activity.condition > 0">
						<view :style="{'width': `${activity.rate}%`,'backgroundImage':`url(${bonusImg.progress})`}">
						</view>
					</view>
					<!-- 下单人数 -->
					<view class="main-center cross-center buy-user">
						<view class="user-list dir-right-nowrap">
							<image v-for="(item,index) in user_list" :key="index" class="avatar" :src="item.avatar">
							</image>
						</view>
						<view class="sales">
							<text>{{activity.user_num}}</text>
							人已抢<text>{{activity.all_sales > activity.condition_count ? activity.all_sales : activity.condition_count}}</text>件
						</view>
					</view>
					<!-- 最新下单状态 -->
					<view v-if="user_list.length > 0" class="main-center cross-center new-buy">
						<image class="avatar" :src="user_list[user_list.length - 1].avatar"></image>
						<view>{{end_time}}参与团购</view>
					</view>
				</view>
			</view>
			<!-- 商品 -->
			<view class="list">
				<view @click="toGoods(item)" class="goods dir-left-nowrap" v-for="item in list" :key="item.id">
					<view v-if="item.goods_stock === 0" class="out-dialog">
						<image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic">
						</image>
					</view>
					<image class="cover" mode='aspectFill' :src="item.cover_pic"></image>
					<view class="info">
						<view class="name t-omit-two">{{item.name}}</view>
						<view class="sale" :class="getTheme + '-m-text ' + getTheme +' '+getTheme+'-m-border'">
							<view style="position: relative">
								{{item.sales}}
								<view class="sale-bg" :class="getTheme + '-m-back ' + getTheme"></view>
							</view>
							<view class="stock">剩{{item.goods_stock}}{{item.goodsWarehouse.unit}}</view>
						</view>
						<view class="price" :class="getTheme + '-m-text ' + getTheme">￥{{item.min_price}}</view>
						<view class="cart" @click.stop="toBuy(item)"
							v-if="activity && activity.activity_status == 1 && item.goods_stock > 0">
							<app-cart-image src="/static/image/icon/cats.png" imageWidth="80rpx" imageHeight="80rpx"
								:theme="getTheme"></app-cart-image>
						</view>
					</view>
				</view>
			</view>
			<!-- 购物车 -->
			<view @click="openCart(item)" v-if="showCart && cart.length > 0" class="bg">
				<view class="dialog cart-dialog" @click.stop="" style="padding: 0;">
					<view v-if="activity.full_price.length > 0" class="cart-discount main-center">
						<view :class="getTheme + '-m-text ' + getTheme" v-for="(item,index) in activity.full_price"
							:key="index">
							<view class="discount-bg" :class="getTheme + '-m-back ' + getTheme"></view><text
								v-if="index > 0">,</text>满{{item.full_price}}减{{item.reduce_price}}
						</view>
					</view>
					<view class="title main-between">
						<view>已选商品</view>
						<view class="dir-right-nowrap cross-center" @click.stop="clearAll">
							<view style="color: #999999">清空购物车</view>
							<image src="/static/image/icon/delete.png"></image>
						</view>
					</view>
					<view class="goods-list">
						<view v-if="item.num > 0 || item.num == ''" class="goods dir-left-nowrap"
							v-for="(item,index) in cart" :key="item.id">
							<image class="cover" mode='aspectFill' :src="item.pic_url"></image>
							<view class="info">
								<view class="name t-omit-two"
									:style="{'color': item.is_exist == 1 ? '#353535': '#999999'}">{{item.name}}</view>
								<view class="attr">
									<text class="attr-group" v-for="(attr,idx) in item.attr_list" :key="idx">
										{{attr.attr_group_name}}：{{attr.attr_name}}
									</text>
								</view>
								<view style="height: 60rpx"></view>
								<view class="price" v-if="item.is_exist == 1" :class="getTheme + '-m-text ' + getTheme">
									￥{{item.price}}</view>
								<view class="price" v-else style="color: #353535">商品已失效</view>
								<view class="app-add-subtract dir-left-nowrap cross-center">
									<image class="app-icon" @click.stop="_calcValue(index,'minus')"
										:src="item.is_exist == 0 ? '/static/image/cart/unreducible.png' : '/static/image/icon/subtract.png'">
									</image>
									<view class="app-value">
										<input v-model="item.num" v-if="item.is_exist == 1" @blur.stop="_onBlur(index)"
											type="number">
										<view v-else>{{item.num}}</view>
									</view>
									<image class="app-icon" v-show="is_loading" @load="imgLoad"
										@click.stop="_calcValue(index,'plus')"
										:src="item.num >= 99 || item.is_exist == 0 ? '/static/image/cart/can-add.png' : '/static/image/icon/add-but.png'"
										:class="[ getTheme+ '-m-back', getTheme]"></image>
								</view>
							</view>
						</view>
					</view>

					<view v-if="is_exist" class="discount main-center"
						style="background-color: #f0f0f0;color: #999999;">
						<view>{{is_exist}}件商品已失效</view>
					</view>
					<view class="cart-placeholder cart-list-placeholder" :class="{'again-placeholder': is_exist}">
					</view>
				</view>
			</view>
			<!-- 买家信息 -->
			<view id="input" v-if="cart.length > 0 && activity.activity_status == 1" class="input-info">
				<view class="input-item">
					<view class="input-label">手机号</view>
					<view class="input">
						<input placeholder-style="color:#999999" type="number" placeholder="请输入手机号" v-model="mobile">
					</view>
				</view>
				<view class="input-item" @click="inputRemark = false">
					<view class="input-label">备注</view>
					<view class="input" v-if="inputRemark" :style="{'color': remark ? '#353535': '#999999'}">
						{{remark ? remark : '请输入备注'}}
					</view>
					<view class="input" v-else>
						<input placeholder-style="color:#999999" :focus="!inputRemark" @blur="inputRemark = true"
							maxlength="50" v-model="remark" placeholder="请输入备注">
					</view>
				</view>
			</view>
			<!-- 结算栏 -->
			<view v-if="cart.length > 0 && activity.activity_status == 1 && activity.full_price.length > 0"
				class="discount main-center">
				<view :class="getTheme + '-m-text ' + getTheme" v-for="(item,index) in activity.full_price"
					:key="index">
					<view class="discount-bg" :class="getTheme + '-m-back ' + getTheme"></view><text
						v-if="index > 0">,</text>满{{item.full_price}}减{{item.reduce_price}}
				</view>
			</view>
			<view v-if="cart.length > 0 && activity.activity_status == 1" class="cart-placeholder"
				:class="{'more-placeholder': is_middleman}"></view>
			<view v-if="cart.length > 0 && activity.activity_status == 1" class="cart-item main-between cross-center">
				<view @click="openCart(item)" class="cart-left dir-left-nowrap">
					<view class="cart-icon">
						<image src="/static/image/cart.png" class="cart"></image>
						<view :class="getTheme + '-m-back ' + getTheme">{{cartLength > 99 ? '99+':cartLength}}</view>
					</view>
					<view class="price-info main-center dir-top-nowrap">
						<view class="total-price t-omit">总计<text
								:class="getTheme + '-m-text ' + getTheme">￥{{total < 0 ? '0.00':total}}</text></view>
						<view class="minus-price t-omit">已减<text
								:class="getTheme + '-m-text ' + getTheme">￥{{minus}}</text></view>
					</view>
				</view>
				<view @click="toSubmit" class="cart-right" :class="getTheme + '-m-back ' + getTheme">确认下单</view>
			</view>
			<!-- 悬浮按钮 -->
			<view class="dialog-btn">
				<view v-if="is_middleman" @click="toIndex">
					<image src="./../image/user-index.png"></image>
				</view>
				<view @click="toOrder">
					<image src="./../image/user-order.png"></image>
				</view>
				<view @click="toUser">
					<image src="./../image/user-center.png"></image>
				</view>
				<view @click="showHiddenClick">
					<image src="./../image/user-share.png"></image>
				</view>
			</view>
			<u-attr v-model="attrShow" :theme-object="themeObject" :goods="goods" :checked="selectAttr" @check="attr"
				:is_show_left="false" :is_show_right="false">
				<template slot="right">
					<!-- 购物车信息 -->
					<view class="attr-bottom dir-left-nowrap">
						<view class="box-grow-1 dir-left-nowrap cross-center">
							<view class="total-price">总计<text
									:class="getTheme + '-m-text ' + getTheme">￥{{selectAttr ? attr_price : goods.price}}</text>
							</view>
						</view>
						<view class="box-grow-1 u-add-btn main-center cross-center"
							:class="getTheme + '-m-back ' + getTheme" @click="add">加入购物车
						</view>
					</view>
				</template>
			</u-attr>
			<!-- 推荐 -->
			<view v-if="recommendDialog" @click="recommendDialog=!recommendDialog" class="bg">
				<view class="dialog" @click.stop="" :animation="animationData">
					<view v-show="showOther" @click="recommendDialog=!recommendDialog"
						class="end-close main-center cross-center">
						<image src="/static/image/icon/icon-close.png"></image>
					</view>
					<view class="end-title">当前团购已结束</view>
					<view class="end-recommend main-center cross-center">
						<view class="end-line"></view>
						<view>为您推荐</view>
						<view class="end-line"></view>
					</view>
					<view class="end-sec-title">以下{{recommend.count}}个商品正在团购</view>
					<view class="main-center recommend-goods">
						<image v-if="index < 3" v-for="(item,index) in recommend.goods_list" :key="index"
							:src="item.cover_pic"></image>
					</view>
					<view v-show="showOther" class="to-activity" :class="getTheme + '-m-back ' + getTheme"
						@click="toActivity">去看看</view>
				</view>
			</view>
			<!-- 分享 -->
			<view>
				<app-share-qr-code
					:posterUrl="'/plugins/community/poster/poster?activity_id='+id + '&middleman_id='+middleman.user_id"
					hasPosterNav="true" v-model="showShare" :url="poster" title="生成活动海报"></app-share-qr-code>
			</view>
		</scroll-view>
		<app-close v-if="showClose" :toBack="true" @update="getMall"></app-close>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import appHead from '../components/app-head.vue';
	import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
	import uAttr from '../../../components/page-component/goods/u-attr.vue';
	import AppClose from '../../../components/basic-component/app-close/app-close.vue';

	export default {
		data() {
			return {
				id: null,
				showCart: false,
				is_loading: false,
				submitLock: false,
				recommendDialog: false,
				showShare: false,
				stopLoad: false,
				showOther: false,
				more: false,
				is_middleman: false,
				share: false,
				default: false,
				inputRemark: true,
				cartLength: 0,
				windowHeight: 0,
				is_exist: 0,
				page: 1,
				poster: '',
				mobile: '',
				remark: '',
				d: '',
				h: '',
				m: '',
				s: '',
				selectAttr: {},
				animationData: {},
				animation: {},
				attr_price: '0.00',
				number: 1,
				space: '0m',
				display: 'none',
				// attrShow: 0,
				attrShow: false,
				scrollTop: 0,
				scrollHeight: 0,
				goods: null,
				timeInterval: null,
				buyBool: true,
				longitude: '',
				latitude: '',
				activity: {
					rate: 0
				},
				middleman: {},
				setting: {},
				recommend: {},
				list: [],
				cart: [],
				user_list: [],
				template_message_list: [],
				end_time: '1小时前',
				title: '',
				total: '0.00',
				minus: '0.00',
				middleman_id: 0,
				first: true,
				showClose: false,
				is_open: false,
				isService_label: false
			}
		},
		components: {
			appShareQrCode,
			appHead,
			uAttr,
			AppClose
		},
		computed: {
			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			}),
			...mapState({
				community: state => state.mallConfig.__wxapp_img.community,
				bonusImg: state => state.mallConfig.__wxapp_img.bonus,
				appImg: state => state.mallConfig.__wxapp_img.mall,
				appSetting: state => state.mallConfig.mall.setting,
				userInfo: state => state.user.info
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			}
		},
		onLoad: function(options) {
			let that = this;
			if (options.activity_id) {
				this.id = options.activity_id;
			}
			if (options.id) {
				this.id = options.id;
			}
			this.title = options.title;
			uni.setNavigationBarTitle({
				title: options.title,
			});
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight;
				}
			});
			uni.getLocation({
				success: (e) => {
					uni.hideLoading();
					that.longitude = e.longitude;
					that.latitude = e.latitude;
					uni.getStorage({
						key: 'middleman_info',
						success: function(res) {
							if (res.data && res.data.id > 0) {
								if (options.middleman_id) {
									that.middleman_id = options.middleman_id;
									that.share = true;
								} else {
									that.middleman_id = res.data.user_id
								}
							}
						},
						fail() {
							if (options.middleman_id) {
								that.middleman_id = options.middleman_id;
								that.share = true;
							}
						}
					})
					that.$showLoading({
						type: 'global',
						text: '加载中...'
					});
					that.getSetting();
				},
				fail: () => {
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: '获取位置信息失败，需要授权获取您的位置信息',
						showCancel: false,
						confirmText: '打开授权',
						success(e) {
							if (e.confirm) {
								uni.openSetting({});
							}
						}
					});
				},
			});
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif
		},
		onUnload() {
			this.stopLoad = true;
			clearInterval(this.timeInterval);
		},
		onShow() {
			let that = this;
			if (this.stopLoad) {
				this.stopLoad = false;
				uni.getStorage({
					key: 'bind',
					success: function(res) {
						if (res.data > 0) {
							that.$showLoading({
								type: 'global',
								text: '加载中...'
							});
							that.middleman = {};
							that.middleman_id = 0;
							uni.getStorage({
								key: 'middleman_info',
								success: function(res) {
									if (res.data && res.data.id > 0) {
										that.middleman_id = res.data.user_id;
									}
									that.getList();
								},
								fail() {
									that.getList();
								}
							})
							uni.removeStorage({
								key: 'bind'
							});
						} else {
							that.getList();
						}
					},
					fail() {
						that.getList();
					}
				});
			}
		},
		onHide() {
			this.stopLoad = true;
			clearInterval(this.timeInterval);
		},
		methods: {
			toSubmit() {
				this.showClose = false;
				setTimeout(() => {
					this.showClose = true;
				})
			},
			getMall(e) {
				this.is_open = e.is_open == 1 ? true : false;
				if (this.is_open) {
					this.allBuy();
				}
			},
			scroll(e) {
				this.scrollHeight = e.detail.scrollTop;
			},
			getMore() {
				if (this.more) {
					this.page++;
					this.getOther();
					this.more = false;
				}
			},
			getOther() {
				let that = this;
				let para = {
					id: that.id,
					page: that.page,
					longitude: that.longitude,
					latitude: that.latitude
				}
				if (that.middleman_id > 0) {
					para.middleman_id = that.middleman_id;
				}
				that.$request({
					url: that.$api.community.user_activity,
					data: para
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						if (response.data.list.length === 20) {
							that.more = true;
						}
						that.list = that.list.concat(response.data.list);
					}
				})
			},
			openCart(item) {

				this.showCart = !this.showCart;
				this.stopLoad = true;
				if (this.showCart == false) {
					this.stopLoad = false;
					this.getList();
				}
			},
			toList() {
				if (this.middleman.is_allow_change === '0') {
					return false;
				}
				uni.navigateTo({
					url: '/plugins/community/captain/captain?longitude=' + this.longitude + '&latitude=' + this
						.latitude
				});
			},
			showHiddenClick() {
				this.showShare = !this.showShare;
			},
			toGoods(item) {
				this.stopLoad = true;
				uni.navigateTo({
					url: '/plugins/community/goods/goods?goods_id=' + item.id + '&middleman_id=' + this.middleman
						.user_id
				});
			},
			toIndex() {
				this.stopLoad = true;
				uni.navigateTo({
					url: '/plugins/community/index/index'
				});
			},
			toOrder() {
				this.stopLoad = true;
				uni.navigateTo({
					url: '/plugins/community/order/order?is_user=1'
				});
			},
			toUser() {
				this.stopLoad = true;
				uni.navigateTo({
					url: '/pages/user-center/user-center'
				});
			},
			toActivity() {
				this.stopLoad = true;
				uni.redirectTo({
					url: '/plugins/community/activity/activity?id=' + this.recommend.activity_id
				});
			},
			attr(e, num) {
				this.selectAttr = e;
				this.number = num;
				console.log(this.selectAttr)
				if (this.selectAttr.service_label) {
					this.attr_price = (this.selectAttr.price * this.number + (this.selectAttr.service_label.price - 0))
						.toFixed(2);
				} else {
					this.attr_price = (this.selectAttr.price * this.number).toFixed(2);
				}

			},
			imgLoad() {
				this.is_loading = true;
			},
			allBuy() {
				if (this.submitLock) {
					return false;
				}
				this.showCart = false;
				this.scrollTop = this.scrollHeight
				if (this.default) {
					this.$nextTick().then(() => {
						this.scrollTop = 9999999;
						this.default = false;
					})
					uni.showToast({
						title: '请确认手机号',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if (this.mobile.length == 11 && (/0?(1)[0-9]{10}/.test(this.mobile))) {
					this.$subscribe(this.template_message_list).then(res => {
						this.cart.forEach(item => {
							if (item.service_label == undefined) {
								this.isService_label = true
							}
						})
						if (this.isService_label) {
							uni.showModal({
								title: "温馨提示",
								content: "您购买碎屏险了吗 ？",
								showCancel: true,
								confirmText: '去购买',
								success: (res) => {
									if (res.confirm) {
										
									} else if (res.cancel) {
										console.log('用户点击取消');
										this.submit();
									}
								}
							})
						}else{
							this.submit();
						}
					}).catch(() => {
						this.cart.forEach(item => {
							if (item.service_label == undefined) {
								this.isService_label = true
							}
						})
						if (this.isService_label) {
							uni.showModal({
								title: "温馨提示",
								content: "您购买碎屏险了吗 ？",
								showCancel: true,
								confirmText: '去购买',
								success: (res) => {
									if (res.confirm) {
										
									} else if (res.cancel) {
										console.log('用户点击取消');
										this.submit();
									}
								}
							})
						}else{
							this.submit();
						}
					});
				} else {
					this.$nextTick().then(() => {
						this.scrollTop = 9999999;
					})
					this.stopLoad = false;
					this.getList();
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none',
						duration: 1000
					});
				}
			},
			submit() {
				uni.showLoading({
					title: '提交订单...'
				});
				this.stopLoad = true;
				this.submitLock = true;
				let goods_list = [];
				for (let i in this.cart) {
					if (this.cart[i].is_exist == 1) {
						let para = {};
						para.id = this.cart[i].goods_id;
						para.goods_attr_id = this.cart[i].goods_attr_id;
						para.num = this.cart[i].num;
						para.cart_id = this.cart[i].id;
						para.attr = this.cart[i].attr_list;
						para.cat_id = 0;
						para.form_data = [];
						para.service_label = this.cart[i].service_label
						goods_list.push(para);
					}
				}
				if (goods_list.length === 0) {
					uni.showToast({
						title: '请添加有效商品',
						icon: 'none',
						duration: 1000
					});
					return false
				}
				let mch_list = [{
					mch_id: 0,
					activity_id: this.id,
					middleman_id: this.middleman.user_id,
					goods_list: goods_list,
					distance: 0,
					remark: this.remark,
					order_form: [],
					use_integral: 0,
					user_coupon_id: 0
				}];
				let form = {};
				form.list = mch_list;
				form.address_id = 0;
				form.address = {
					name: this.userInfo.nickname,
					mobile: this.mobile
				};
				this.$request({
					url: this.$api.community.order_submit,
					data: {
						form_data: JSON.stringify(form)
					},
					method: 'post'
				}).then(response => {
					if (response.code === 0) {
						this.getPayOrderId(response.data.queue_id, response.data.token);
					} else {
						this.submitLock = false;
						this.stopLoad = false;
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(e => {
					this.submitLock = false;
					this.stopLoad = false;
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: e.errMsg,
						showCancel: false,
					});
				});
			},
			getPayOrderId(queue_id, token) {
				this.$request({
					url: this.$api.order.pay_data,
					method: 'post',
					data: {
						queue_id: queue_id,
						token: token,
					},
				}).then(response => {
					if (response.code === 0) {
						if (response.data.retry && response.data.retry === 1) {
							this.getPayDataTimer = setTimeout(() => {
								this.getPayOrderId(queue_id, token);
							}, 1000);
						} else {
							uni.hideLoading();
							this.cart = [];
							this.pay(response.data);
						}
					} else {
						this.submitLock = false;
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(e => {
					this.submitLock = false;
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: e.errMsg,
						showCancel: false,
					});
				});
			},
			pay(data) {
				uni.removeStorage({
					key: 'middleman_info'
				});
				this.$payment.pay(data.id).then(() => {
					this.submitLock = false;
					let url = '/plugins/community/order/order';
					uni.navigateTo({
						url: `/pages/order-submit/pay-result?payment_order_union_id=${data.id}&order_page_url=${url}`
					});
				}).catch(() => {
					this.submitLock = false;
					this.toOrder();
				});
			},
			_calcValue(index, type) {
				if (type === 'minus') {
					this.cart[index].num--;
				} else if (type === 'plus') {
					this.cart[index].num++;
				}
				this._onBlur(index);
			},
			_onBlur(index) {
				this.total = 0;
				this.cartLength = 0;
				for (let i in this.cart) {
					this.total = (+this.total + (+this.cart[i].price * this.cart[i].num));
					this.cartLength += +this.cart[i].num;
				}
				let minus = 0;
				for (let i in this.activity.full_price) {
					if (+this.activity.full_price[i].full_price < +this.total || +this.activity.full_price[i].full_price ==
						+this.total) {
						if (this.activity.full_price[i].reduce_price > minus) {
							minus = +this.activity.full_price[i].reduce_price;
						}
					}
				}
				this.total = (+this.total - minus).toFixed(2);
				this.minus = minus.toFixed(2);
				if (this.cart[index].num == 0) {
					this.delCart(index)
				} else {
					this.$request({
						url: this.$api.community.cart_edit,
						data: {
							list: JSON.stringify(this.cart)
						},
					});
				}
			},
			clearAll() {
				let cart = [];
				for (let i in this.cart) {
					cart.push(this.cart[i].id)
				}
				this.cart = [];
				this.showCart = false;
				this.$request({
					url: this.$api.community.cart_delete,
					data: {
						cart_id_list: JSON.stringify(cart),
					},
				}).then(() => {
					this.stopLoad = false;
					this.getList();
				})
			},
			delCart(index) {
				let list = [];
				list.push(this.cart[index].id)
				this.cart.splice(index, 1);
				this.total = 0;
				this.cartLength = 0;
				for (let i in this.cart) {
					this.total = (+this.total + (+this.cart[i].price * this.cart[i].num));
					this.cartLength += +this.cart[i].num
				}
				let minus = 0;
				for (let i in this.activity.full_price) {
					if (+this.activity.full_price[i].full_price < +this.total || +this.activity.full_price[i].full_price ==
						+this.total) {
						if (this.activity.full_price[i].reduce_price > minus) {
							minus = +this.activity.full_price[i].reduce_price
						}
					}
				}
				this.total = (+this.total - minus).toFixed(2);
				this.minus = minus.toFixed(2);
				if (this.cart.length === 0) {
					this.showCart = false
				}
				this.$request({
					url: this.$api.community.cart_delete,
					data: {
						cart_id_list: list,
					},
				}).then(() => {
					this.stopLoad = false;
					this.getList();
				}).catch(() => {
					this.attrShow = false;
					uni.hideLoading();
				});
			},
			add() {
				uni.showLoading({
					title: '加入购物车'
				});
				let service
				if (this.selectAttr.service_label) {
					service = this.selectAttr.service_label.id
				} else {
					service = ''
				}

				let para = {
					activity_id: this.id,
					goods_id: this.selectAttr.goods_id,
					goods_attr_id: this.selectAttr.id,
					service_id: service,
					num: this.number
				}
				this.$request({
					url: this.$api.community.cart_add,
					data: para,
					method: 'post'
				}).then(response => {
					if (response.code === 0) {
						this.addResult(response.data.queue_id, response.data.token);
					} else {
						uni.hideLoading();
						this.attrShow = false;
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					this.attrShow = false;
					uni.hideLoading();
				});
			},
			addResult(queue_id, token) {
				this.$request({
					url: this.$api.community.cart_result,
					method: 'post',
					data: {
						queue_id: queue_id,
						token: token,
					},
				}).then(response => {
					if (response.code === 0) {
						if (response.data && response.data.retry === 1) {
							this.getResult = setTimeout(() => {
								this.addResult(queue_id, token);
							}, 1000);
						} else {
							this.attrShow = false;
							let index = -1;
							for (let i in this.cart) {
								if (this.cart[i].goods_id == this.selectAttr.goods_id && this.cart[i]
									.goods_attr_id == this.selectAttr.id) {
									index = i;
								}
							}
							if (index > -1) {
								this.cart[index].num += +this.number;
							} else {
								let service
								if (this.selectAttr.service_label) {
									service = this.selectAttr.service_label
								} else {
									service = null
								}
								let para = {
									activity_id: this.id,
									community_goods_id: this.goods.id,
									goods_id: this.selectAttr.goods_id,
									goods_attr_id: this.selectAttr.id,
									num: this.number,
									name: this.goods.name,
									attr_list: this.selectAttr.attr_list,
									pic_url: this.selectAttr.pic_url,
									service_label: service,
									id: 0,
									price: this.selectAttr.price,
									is_exist: 1
								}
								this.cart.push(para);
							}
							this.total = 0;
							this.cartLength = 0;
							console.log(this.cart, "===================")
							for (let item of this.cart) {
								this.total = (this.total + (item.price * item.num + (item.service_label.price -
									0)));
								this.cartLength += +item.num;
							}
							let minus = 0;
							for (let i in this.activity.full_price) {
								if (+this.activity.full_price[i].full_price < +this.total || +this.activity
									.full_price[i].full_price == +this.total) {
									if (this.activity.full_price[i].reduce_price > minus) {
										minus = +this.activity.full_price[i].reduce_price;
									}
								}
							}
							this.total = (+this.total - minus).toFixed(2);
							this.minus = minus.toFixed(2);
							uni.hideLoading();
						}
					} else {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false
						});
					}
				}).catch(e => {
					this.attrShow = false;
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: e.errMsg,
						showCancel: false
					});
				});
			},
			toBuy(item) {
				if (this.$user.isLogin() && this.$store.state.user.info) {
					let member_level = this.$store.state.user.info.identity.member_level;
					if (member_level < item.member_level) {
						uni.showModal({
							title: "提示",
							content: "需达到" + item.member_name + "会员才可购买",
							showCancel: true,
							buttonText: '升级',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										// url:"/pages/member/index/index",
										url: '/pages/member/upgrade/upgrade?level=' + member_level +
											'&other=' + item.member_level
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}

							}
						})
						return;
					}

				}
				this.selectAttr = null;
				this.goods = item;
				this.attrShow = true;
			},
			getCart() {
				let that = this;
				if (that.stopLoad) {
					return false;
				}
				that.$request({
					url: that.$api.community.cart,
					data: {
						middleman_id: that.middleman.user_id,
						activity_id: that.activity.id,
					}
				}).then(response => {
					if (that.stopLoad) {
						return false;
					}
					if (response.code === 0) {
						that.total = 0;
						that.cartLength = 0;
						that.cart = response.data.list;
						that.is_exist = 0;
						for (let i in that.cart) {
							if (that.cart[i].is_exist == 0) {
								that.is_exist++;
							}
							that.total = (+that.total + (+that.cart[i].price * that.cart[i].num));
							that.cartLength += +that.cart[i].num;
						}
						let minus = 0;
						for (let i in that.activity.full_price) {
							if (+that.activity.full_price[i].full_price < +that.total || +that.activity.full_price[
									i].full_price == +that.total) {
								if (that.activity.full_price[i].reduce_price > minus) {
									minus = +that.activity.full_price[i].reduce_price;
								}
							}
						}
						that.total = (+that.total - minus).toFixed(2);
						that.minus = minus.toFixed(2);

					} else {
						that.stopLoad = true;
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
						if (response.msg === '所选活动已下架') {
							setTimeout(() => {
								uni.navigateBack({});
							}, 1000);
						}
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			getTime(time) {
				if (time > 86399) {
					this.d = Math.floor(time / 86400);
					time = time - (86400 * this.d);
				} else {
					this.d = 0;
				}
				if (time > 3599) {
					this.h = Math.floor(time / 3600);
					if (this.h < 10) {
						this.h = '0' + this.h;
					}
					time = time - (3600 * this.h);
				} else {
					this.h = '00'
				}
				if (time > 59) {
					this.m = Math.floor(time / 60);
					if (this.m < 10) {
						this.m = '0' + this.m;
					}
					time = time - (60 * this.m);
				} else {
					this.m = '00';
				}
				if (time < 60) {
					this.s = time;
					if (this.s < 10) {
						this.s = '0' + this.s;
					}
				}
			},
			getSetting() {
				let that = this;
				that.$request({
					url: that.$api.community.setting,
				}).then(response => {
					if (response.code === 0) {
						that.head = that.community.a;
						switch (that.getTheme) {
							case 'b':
								that.head = that.community.b;
								break;
							case 'c':
								that.head = that.community.c;
								break;
							case 'd':
								that.head = that.community.d;
								break;
							case 'e':
								that.head = that.community.e;
								break;
							case 'g':
								that.head = that.community.g;
								break;
							case 'h':
								that.head = that.community.h;
								break;
							case 'i':
								that.head = that.community.i;
								break;
						}
						that.setting = response.data;
						that.getList();
					} else {
						that.$hideLoading();
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			getList() {
				let that = this;
				let para = {
					id: that.id,
					longitude: that.longitude,
					latitude: that.latitude
				}
				if (that.middleman_id > 0) {
					para.middleman_id = that.middleman_id
				}
				that.$request({
					url: that.$api.community.user_activity,
					data: para
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						if (response.data.list.length === 0) {
							that.stopLoad = true;
							uni.showToast({
								title: '活动商品异常，正在返回活动主页',
								icon: 'none',
								duration: 1000
							});
							setTimeout(() => {
								uni.redirectTo({
									url: '/plugins/community/list/list'
								});
							}, 1000);
							return false;
						}
						if (response.data.list.length < 20) {
							that.list = response.data.list;
						} else {
							for (let i in response.data.list) {
								that.list[i] = response.data.list[i];
							}
						}
						if (that.first) {
							that.first = false;
							if (response.data.last_mobile) {
								that.mobile = response.data.last_mobile;
								that.default = true;
							}
							response.data.list.length < 20 ? that.more = false : that.more = true;
						}
						that.activity = response.data.activity;
						that.is_middleman = response.data.is_middleman;
						that.middleman = response.data.middleman_info;
						if (that.middleman_id == 0) {
							uni.getStorage({
								key: 'middleman_info',
								success: function(res) {
									if (res.data && res.data.id > 0) {
										that.middleman = res.data;
									}
								}
							})
						}
						that.space = ~~that.middleman.distance + 'm';
						if (that.middleman.distance > 1000) {
							that.space = (that.middleman.distance / 1000).toFixed(1) + 'km';
						}
						if (that.share) {
							uni.setStorage({
								key: 'middleman_info',
								data: that.middleman
							});
						}
						that.user_list = response.data.user_list;
						if (that.user_list.length > that.activity.user_num) {
							that.user_list = that.user_list.slice(0, that.activity.user_num);
						}
						that.template_message_list = response.data.template_message_list;
						if (that.activity.activity_status == 1) {
							if (!that.stopLoad) {
								setTimeout(function() {
									that.getList();
								}, 5000)
							}
							that.getCart();
							let end_time = Math.floor(that.user_list[that.user_list.length - 1].time / 60);
							if (end_time > 60) {
								that.end_time = '1小时前';
							} else if (end_time == 0) {
								that.end_time = '刚刚';
							} else {
								that.end_time = end_time + '分钟前';
							}
						}
						if (that.activity.activity_status == 2 && response.data.recommend_activity.activity_id >
							0) {
							setTimeout(function() {
								that.recommend = response.data.recommend_activity;
								that.recommendDialog = true;
								var animation = uni.createAnimation({
									duration: 1000,
									timingFunction: 'ease',
								})
								that.animation = animation;

								setTimeout(function() {
									animation.bottom(0).step();
									that.animationData = animation.export();
									setTimeout(function() {
										that.showOther = true;
									}, 1500);
								}, 200);
							}, 800);
						}
						if (that.activity.time > 0) {
							let time = that.activity.time;
							that.timeInterval = setInterval(() => {
								that.getTime(time);
								time--;
								if (time == 0) {
									clearInterval(that.timeInterval);
									that.getList();
								}
							}, 1000);
						}
					} else {
						that.stopLoad = true;
						if (response.msg === '周边没有活动可参加') {
							uni.showToast({
								title: '周边没有活动可参加，正在返回活动主页',
								icon: 'none',
								duration: 1000
							});
							setTimeout(() => {
								uni.redirectTo({
									url: '/plugins/community/list/list'
								});
							}, 1000);
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none',
								duration: 1000
							});
						}
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
		},
		onShareAppMessage: function() {
			return this.$shareAppMessage({
				title: this.setting.app_share_title ? this.setting.app_share_title : this.title,
				imageUrl: this.setting.app_share_pic ? this.setting.app_share_pic : this.list[0].cover_pic,
				path: "/plugins/community/activity/activity",
				params: {
					id: this.id,
					user_id: this.userInfo.options.user_id,
					middleman_id: this.middleman.user_id
				}
			});
		},
		// #ifdef MP-WEIXIN
		onShareTimeline: function() {
			return this.$shareTimeline({
				title: this.share_title ? this.share_title : this.title,
				query: {
					id: this.id,
					user_id: this.userInfo.options.user_id,
					middleman_id: this.middleman.user_id
				}
			});
		}
		// #endif
	}
</script>

<style scoped lang="scss">
	.middleman {
		margin-top: -360rpx;
		height: 190rpx;
		color: #ffffff;
		padding: 0 35rpx;
		position: relative;

		.space {
			color: #fff;
			font-size: 22rpx;
			position: absolute;
			top: 45rpx;
			right: 30rpx;
		}

		.arrow-image {
			margin-left: 36rpx;
			width: #{12rpx};
			height: #{24rpx};
			position: absolute;
			top: 50%;
			right: 30rpx;
			margin-top: -12rpx;
		}

		.location {
			font-size: 40rpx;
			width: 70%;
			margin-bottom: 15rpx;
			margin-top: -10rpx;
		}

		.middleman-info {
			font-size: 26rpx;

			.avatar {
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.user-info {
				.icon {
					height: 25rpx;
					width: 25rpx;
					margin-right: 6rpx;
					color: #ff4544;
				}
			}
		}
	}

	.time {
		padding: 0 36rpx;
		color: #ff4544;
		height: 90rpx;
		line-height: 90rpx;
		margin: 0 24rpx;
		width: 702rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		background-color: #F2F2F2;
		position: relative;
		z-index: 2;
		font-size: 24rpx;

		.icon {
			color: #ff4544;
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}
	}

	.status-area {
		width: 702rpx;
		margin: 0 24rpx;
		padding-bottom: 24rpx;
		border-radius: 16rpx;
		background-color: #f7f7f7;
		position: relative;
		z-index: 2;

		.status {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;

			.end-time {
				color: #ff4544;
				text-align: center;
				font-size: 24rpx;
			}

			.condition {
				color: #353535;
				font-size: 24rpx;
				width: 100%;

				.end-time {
					color: #ff4544;
				}
			}

			.progress {
				width: #{654rpx};
				background-color: #f0f0f0;
				border-radius: #{10rpx};
				height: #{20rpx};
				position: relative;
				margin: 15rpx 0;
				overflow: hidden;

				view {
					border-radius: #{10rpx};
					height: #{20rpx};
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}
			}

			.buy-user {
				height: 58rpx;

				.user-list {
					image {
						width: 58rpx;
						height: 58rpx;
						margin-left: -14rpx;
						border-radius: 50%;
						border: 2rpx solid #ffffff;
					}
				}

				.sales {
					font-size: 24rpx;
					line-height: 58rpx;
					height: 58rpx;
					margin-left: 14rpx;

					text {
						color: #ff4544;
					}
				}
			}

			.new-buy {
				margin-top: 20rpx;
				color: #999999;
				font-size: 24rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					display: block;
					margin-right: 20rpx;
				}
			}
		}
	}

	.list {
		margin: 0 24rpx;
		width: 702rpx;

		.goods {
			background-color: #fff;
			border-radius: 16rpx;
			width: 702rpx;
			height: 220rpx;
			margin-bottom: 20rpx;
			position: relative;
			z-index: 2;

			.out-dialog {
				width: #{220rpx};
				height: #{220rpx};
				border-radius: #{16rpx};
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
				background-color: rgba(0, 0, 0, .5);

				image {
					width: #{220rpx};
					height: #{220rpx};
					border-radius: #{16rpx};
				}
			}

			.cover {
				height: 220rpx;
				width: 220rpx;
				border-radius: 16rpx;
				margin-right: 15rpx;
			}

			.info {
				padding: 20rpx 0;
				position: relative;

				.name {
					width: 445rpx;
					// #ifndef MP-ALIPAY
					height: 72rpx;
					// #endif
					// #ifdef MP-ALIPAY
					height: 66rpx;
					// #endif
					font-size: 28rpx;
				}

				.sale {
					height: 30rpx;
					line-height: 28rpx;
					font-size: 22rpx;
					margin-top: 18rpx;
					display: inline-block;
					position: relative;

					>view {
						padding: 0 10rpx;
						border: 2rpx solid;
						display: inline-block;
					}

					.sale-bg {
						padding: 0;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0.1;
						border-top-left-radius: 15rpx;
						border-bottom-left-radius: 15rpx;
						border: 0;
						height: 100%;
						width: 100%;
					}

					view:first-of-type {
						border-right: 0;
						border-top-left-radius: 15rpx;
						border-bottom-left-radius: 15rpx;
					}

					.stock {
						border-top-right-radius: 15rpx;
						border-bottom-right-radius: 15rpx;
						border-left: 0;
						background-color: #fff;
					}
				}

				.price {
					font-size: 32rpx;
					position: absolute;
					bottom: 20rpx;
					left: 0;
				}

				.cart {
					position: absolute;
					bottom: 20rpx;
					right: 0;
					width: 80rpx;
					height: 80rpx;
					z-index: 2;
				}
			}
		}
	}

	.cart-placeholder {
		height: 450rpx;

		&.cart-list-placeholder {
			height: 150rpx;

			&.again-placeholder {
				height: 210rpx;
			}
		}

		&.more-placeholder {
			height: 540rpx;
		}
	}

	.total-price {
		width: 350rpx;

		text {
			font-size: 32rpx;
		}
	}

	.minus-price {
		width: 350rpx;
	}

	.discount {
		position: fixed;
		bottom: 145rpx;
		left: 0;
		height: 60rpx;
		line-height: 60rpx;
		width: 100%;
		font-size: 24rpx;
		z-index: 10;
		background-color: #fff;

		.discount-bg {
			position: fixed;
			bottom: 145rpx;
			left: 0;
			height: 60rpx;
			line-height: 60rpx;
			width: 100%;
			opacity: 0.1;
			z-index: 10;
		}

		text {
			margin-right: 10rpx;
		}
	}

	.cart-item {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 145rpx;
		width: 100%;
		padding: 0 16rpx 24rpx;
		background-color: #fff;
		z-index: 20;
		box-shadow: 0 0 #{10rpx} rgba(0, 0, 0, .3);

		.cart-left {
			font-size: 24rpx;
			color: #353535;
			height: 74rpx;
			line-height: 74rpx;

			.cart-icon {
				position: relative;
				margin-right: 45rpx;

				image {
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
				}

				view {
					position: absolute;
					top: -5rpx;
					left: 52rpx;
					height: #{34rpx};
					line-height: #{34rpx};
					border-radius: #{17rpx};
					color: #fff;
					padding: 0 #{10rpx};
				}
			}

			.price-info {
				height: 74rpx;

				>view {
					height: 37rpx;
					line-height: 37rpx;
				}
			}
		}

		.cart-right {
			font-size: 28rpx;
			color: #fff;
			height: 78rpx;
			line-height: 78rpx;
			border-radius: 39rpx;
			padding: 0 50rpx;
		}
	}

	.dialog-btn {
		position: fixed;
		bottom: 175rpx;
		left: 30rpx;
		z-index: 10;

		>view {
			margin-top: 10rpx;
			width: 80rpx;
			height: 80rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
		z-index: 18;

		.dialog {
			background-color: #fff;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			position: fixed;
			bottom: -600rpx;
			left: 0;
			width: 100%;
			z-index: 19;
			padding: 0 24rpx;

			&.cart-dialog {
				bottom: 0
			}

			.cart-discount {
				height: 60rpx;
				line-height: 60rpx;
				width: 100%;
				font-size: 24rpx;
				z-index: 10;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				position: relative;

				.discount-bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0.1;
				}

				text {
					margin-right: 10rpx;
				}
			}

			.title {
				height: 84rpx;
				line-height: 84rpx;
				font-size: 26rpx;
				padding: 0 24rpx;
				color: #353535;

				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
			}

			.goods-list {
				padding: 0 24rpx;
				max-height: 510rpx;
				overflow: auto;
			}

			.goods {
				background-color: #fff;
				border-radius: 8rpx;
				width: 702rpx;
				margin-bottom: 20rpx;
				padding-top: 20rpx;
				border-top: 2rpx solid #e2e2e2;
				position: relative;
				z-index: 22;

				&:first-of-type {
					border-top: 0;
					padding-top: 0;
				}

				.cover {
					height: 180rpx;
					width: 180rpx;
					border-radius: 8rpx;
					margin-right: 25rpx;
				}

				.info {
					position: relative;
					width: 492rpx;

					.name {
						width: 445rpx;
						max-height: 72rpx;
						font-size: 28rpx;
						margin-bottom: 20rpx;
					}

					.attr {
						font-size: 24rpx;
						color: #999999;

						.attr-group {
							margin-left: 10rpx;

							&:first-of-type {
								margin-left: 0;
							}
						}
					}

					.price {
						font-size: 30rpx;
						position: absolute;
						bottom: 0;
						left: 0;
					}

					.app-add-subtract {
						height: #{60rpx};
						position: absolute;
						bottom: 0;
						right: 0;

						.app-icon {
							height: #{44rpx};
							width: #{44rpx};
							background-size: 100% 100%;
							background-repeat: no-repeat;
						}

						.app-value {
							height: #{60rpx};
							width: #{88rpx};

							input,
							view {
								height: #{60rpx};
								width: #{88rpx};
								font-size: #{26rpx};
								color: #353535;
								background-color: #ffffff;
								text-align: center;
							}

							view {
								line-height: #{60rpx};
								color: #999999;
							}
						}
					}
				}
			}

			.end-close {
				position: fixed;
				bottom: 488rpx;
				right: 0;
				z-index: 20;
				width: 80rpx;
				height: 80rpx;
				padding: 25rpx;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.end-title {
				margin-top: 40rpx;
				font-size: 32rpx;
				color: #353535;
				text-align: center;
			}

			.end-recommend {
				font-size: 24rpx;
				color: #999999;
				height: 70rpx;

				.end-line {
					width: 40rpx;
					height: 2rpx;
					background-color: #999999;
					margin: 0 15rpx;
				}
			}

			.end-sec-title {
				font-size: 28rpx;
				color: #353535;
				text-align: center;
			}

			.recommend-goods {
				margin-top: 25rpx;
				margin-bottom: 135rpx;

				image {
					width: 220rpx;
					height: 220rpx;
					border-radius: 8rpx;
					display: block;
					margin: 0 33rpx;
				}
			}

			.to-activity {
				position: fixed;
				bottom: 0;
				left: 0;
				height: 100rpx;
				width: 100%;
				text-align: center;
				line-height: 100rpx;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}

	.attr-bottom {
		position: fixed;
		z-index: 1666;
		bottom: 0;
		left: 0;
		height: #{110rpx};
		width: 100%;
		font-size: $uni-font-size-general-one;

		.total-price {
			margin-left: 25rpx;
		}
	}

	.input-info {
		margin: 0 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		width: 702rpx;

		.input-item {
			font-size: 26rpx;
			padding: 30rpx;
			padding-bottom: 15rpx;
			border-top: 2rpx solid #e2e2e2;

			view.input {
				line-height: 52rpx;
				word-break: break-all;
			}

			&:first-of-type {
				border-top: 0;
			}

			.input-label {
				color: #666;
				margin-bottom: 10rpx;
			}
		}
	}

	.u-add-btn {
		color: #ffffff;
	}
</style>