<template>
	<view>
		<view class="top-tabbar">
			<view :class="state_active == 1 ? 'tab-item active' : 'tab-item'" @click="stateFunc(1)">{{ $t('w_0144') }}
			</view>
			<!-- <view :class="state_active == 2 ? 'tab-item active' : 'tab-item'" @click="stateFunc(2)">{{ $t('ENU_APPROVE_B_725') }}</view> -->
		</view>
		<template v-if="state_active == 1">
			<view class="pickup-list">
				<view class="pickup-item" v-for="(item, index) in listData" :key="index"
					@click.stop="gotoPage('/pages/market/activity-zone/detail?pkId=' + item.pkId)">
					<view class="pickup-pic pr">
						<image :src="item.actCover" mode="aspectFill"></image>
						<view class="pickup-state" :class="{ bgGray: item.actStatus == 2 }">{{ item.actStatusVal }}
						</view>
					</view>

					<view class="flex-1">
						<view class="f30 domation text-ellipsis mb6">{{ item.actName }}</view>
						<view class="f24 gray9 mb6">{{ $t('N_I_129') }}:</view>
						<view class="f22 gray9 mb6">{{ item.actStartDate + '-' + item.actEndDate }}</view>
						<!-- <view class="f26 gray3 text-ellipsis">{{ item.actExplain }}</view> -->
						<!-- 我的进度 -->
						<button v-if="item.actType == 61 || item.actType == 62" class="pickup-btn"
							@click.stop="openDetail(item)">{{$t('fn_115') }}</button>
						<button class="pickup-btn" v-if="item.existDrawNum == 0" @click.stop="openLottery(item)">{{
							$t('w_0206') }}</button>
						<button class="pickup-btn" @click.stop="openGift(item.pkId)"
							v-if="item.existNewPeopleGift == 0">{{
							$t('w_0205') }}</button>
						<button class="pickup-btn" v-if="item.actType == 19" @click.stop="openTree">{{ $t('w_0283')
						}}</button>
					</view>
				</view>
			</view>
			<template v-if="showPop">
				<view class="pop-bg" @click.stop="showPop = false"></view>
				<view class="pop-content d-c d-c-c">
					<aylottery :availableSurplusNum="availableSurplusNum" :type="2" :list="aylotteryList"
						themeColor="#811400" bgColor="#cf262b" bg_sd_Color="#ffffff00" @result="resultFun"
						@toDetailPage="toDetailPage" :stay_index="stay_index_m" @Recharge="RechargeFunc"></aylottery>
				</view>
			</template>
			<template v-if="showLottery">
				<view class="pop-bg" @click.stop="closeFunc" style="z-index: 103;"></view>
				<view class="pop-content-2">
					<image class="lottry-bg" src="/static/bg/lottry-bg.png" mode=""></image>
					<!-- <view class="f32 white mb20">恭喜!获得{{lotteryData.acGiftConfigList[0].productName}}</view> -->
					<!-- <image style="width: 425rpx" :src="lotteryData.giftCover" mode="widthFix"></image> -->
					<view class="f40 domation mb20 pop-lot-title text-ellipsis-2 tc" style="z-index: 2;">{{ $t('w_0195')
					}}{{ lotteryData.giftName }}</view>
					<image style="width:198rpx;height: 198rpx;;margin: 0 auto;" :src="lotteryData.giftCover"
						mode="aspectFill"></image>
					<view class="d-c d-c-c lottry-product">
						<view class="text-ellipsis-2 white f24 tc" style="line-height: 1.5;">{{ $t('ENU_N_B_T_3') }}:{{
							lotteryData.acGiftConfigList[0].productName }}</view>
						<view class="text-ellipsis domation f24 tc">{{ $t('w_0196') }}:{{
							lotteryData.acGiftConfigList[0].retailPrice }}</view>
					</view>
				</view>
			</template>
			<template v-if="isRecharge">
				<view class="pop-bg" @click.stop="closeRechargeFunc" style="z-index: 104;"></view>
				<view class="pop-input d-c d-c-c">
					<view class="pop-top d-c d-c-c">
						<view class="pop-title ww100">{{ $t('w_0199') }}：{{ totalSurplusNum }}</view>
						<view class="pop-title ww100">{{ $t('w_0194') }}：{{ availableSurplusNum }}</view>
						<view class="input-box d-c-c mb30"><input type="number" class="input-pop" v-model="rechargeNum"
								:placeholder="$t('w_0200')" /></view>
					</view>
					<view class="border-t ww100 d-b-c" style="height: 89rpx;">
						<view class="border-r-e d-c-c flex-1 f28 gray3 hh100" @click="closeRechargeFunc(null)">{{
							$t('MY_ORD_24') }}</view>
						<view class=" d-c-c flex-1 f28 domation hh100" @click="closeRechargeFunc(true)">
							{{ $t('MN_F_32') }}
						</view>
					</view>
				</view>
			</template>
			<template v-if="isGift">
				<view class="pop-bg" @click="isGift = false"></view>
				<view class="pop-giftpack d-c-c">
					<view class="giftpack-content">
						<image class="packgift-bg" src="/static/bg/packgift-bg.png" mode="aspectFill"></image>
						<view style="z-index: 1;" class="pr">
							<view class="d-e-c mb10" @click="isGift = false"><u-icon name="close" color="#fff"
									size="36rpx"></u-icon></view>
							<view class="fb white f32 d-c-c tc mb30">{{ planlist[current].plan }}</view>
							<view class="plan-product mb20">
								<swiper class="swiper" :current="current" interval="2000" duration="500">
									<swiper-item v-for="(item, index) in planlist" :key="index">
										<view class="gift-proitem d-b-s" v-for="(pitem, pindex) in item.pgpList"
											:key="pindex">
											<image class="gift-proitem-img" :src="pitem.cover" mode="aspectFill">
											</image>
											<view class="flex-1 d-c d-b-s">
												<view class="f22 gray3 text-ellipsis">{{ pitem.productName }}</view>
												<view class="f28 domation ">
													<text class="f22">{{ currencyIcon() }}</text>
													<text class="fb">{{ formatNum(pitem.price) }}</text>
												</view>
											</view>
											<view class="f22 gray3">X{{ pitem.quantity }}</view>
										</view>
									</swiper-item>
								</swiper>
							</view>
							<view class="swiper-dots">
								<view class="swiper-dot" :class="{ active: current == index }" @click="current = index"
									v-for="(item, index) in planlist" :key="index"></view>
							</view>
							<button class="pop-lqbtn" @click.stop="SubGiftFunc">{{ $t('w_0211') }}</button>
						</view>
					</view>
				</view>
			</template>
			<treeActive v-if="isTree" :isPop="isTree" :num="treeNum" :treeModel="treeModel" @close="closeTree">
			</treeActive>
		</template>
		<!-- <template v-else-if="state_active == 2">
			<view class="d-b-c search-data border-b f26 mb20">
				<view class="flex-1 gray9">{{$t('w_0352')}}</view>
				<picker mode="date" :value="form.startPayDate" :start="startPayDate" :end="endPayDate" @change="bindDateChange1">
					<view class="picker-item-data">{{ form.startPayDate || $t('CK_KS_3') }}</view>
				</picker>
				<view style="margin: 0 60rpx;">{{$t('w_0139')}}</view>
				<picker mode="date" :value="form.endPayDate" :start="startPayDate" :end="endPayDate" @change="bindDateChange2">
					<view class="picker-item-data">{{ form.endPayDate || $t('CK_KS_9') }}</view>
				</picker>
				<view class="search-radio" @click="searchSubmit"><text class="icon iconfont icon-sousuo"></text></view>
			</view>
			<view class="memberList">
				<view class="bonus-item" v-for="(item,index) in listData" :key="index">
					<view class="bonus-item-item">
						<view class="bonus-item-name f26 gray9">{{ $t('MN_T_1') }}</view> 
						<view class="bonus-item-content f26 gray3">{{ item.memberCode }}</view>
					</view>
					<view class="bonus-item-item">
						<view class="bonus-item-name f26 gray9">{{ $t('CK_KS_14') }}</view>
						<view class="bonus-item-content f26 gray3">{{ item.memberName }}</view>
					</view>
					<view class="bonus-item-item">
						<view class="bonus-item-name f26 gray9">{{ $t('w_0052') }}</view>
						<view class="bonus-item-content f26 gray3">{{ item.phone }}</view>
					</view>
					<view class="bonus-item-item">
						<view class="bonus-item-name f26 gray9">{{ $t('w_0148') }}</view>
						<view class="bonus-item-content f26 gray3">{{ item.settleGradeStr }}</view>
					</view>
					<view class="bonus-item-item">
						<view class="bonus-item-name f26 gray9">{{ $t('ENU_NOTICE_GRADE_2') }}</view>
						<view class="bonus-item-content f26 gray3">{{ item.awardsStr }}</view>
					</view>
					<view class="bonus-item-item">
						<view class="bonus-item-name f26 gray9">{{ $t('CK_KS_17') }}</view>
						<view class="bonus-item-content f26 gray3">{{ item.quantity }}</view>
					</view>
					<view class="bonus-item-item">
						<view class="bonus-item-name f26 gray9">{{ $t('w_0149') }}{{ currencyIcon() }}</view>
						<view class="bonus-item-content f26 gray3">{{ item.price }}</view>
					</view>
					<view class="bonus-item-item">
						<view class="bonus-item-name f26 gray9">{{ $t('ENU_TOTAL_V_2') }}{{ currencyIcon() }}</view>
						<view class="bonus-item-content f26 gray3">{{ item.orderAmount }}</view>
					</view>
					<view class="bonus-item-item">
						<view class="bonus-item-name f26 gray9">{{ $t('w_0147') }}</view>
						<view class="bonus-item-content f26 gray3">{{ item.payTime }}</view>
					</view>
				</view>
			</view>
			<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">{{$t('w_0405')}}</text>
			</view>
			<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
		</template> -->
	</view>
</template>

<script>
	import aylottery from '@/components/ay-lottery/ay-lottery.vue';
	import utils from '@/common/utils.js';
	import treeActive from '@/components/treeActive/treeActive.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			aylottery,
			treeActive,
			uniLoadMore,
		},
		data() {
			return {
				loading: false,
				no_more: false,
				state_active: 1,
				form: {
					pageNum: 1,
					pageSize: 10,
					startPayDate: '',
					endPayDate: '',
				},
				total: 0,
				isTree: false,
				treeNum: 0,
				treeModel: {},
				listData: [],
				values: '',
				baseQuantity: 0,
				pkId: 0,
				module: {
					pkId: 0,
					usableQuantity: 0,
					baseQuantity: 0
				},
				//跑马灯
				showPop: false,
				aylotteryList: [],
				availableSurplusNum: '',
				totalSurplusNum: '',
				stay_index_m: 1,
				showLottery: false,
				lotteryData: {
					acGiftConfigList: [{
						productName: ''
					}],
					giftCover: ''
				},
				isRecharge: false,
				isCashier: false,
				isGift: false,
				pkBaseId: 0,
				rechargeNum: '',
				current: 0,
				pkGiftId: 0,
				planlist: []
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.listData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			},
			startPayDate() {
				return this.getDate('start');
			},
			endPayDate() {
				return this.getDate('end');
			}
		},
		onShow() {
			this.stateFunc(this.state_active);
		},
		onReachBottom() {
			let self = this;
			if (self.form.pageNum * self.form.pageSize < self.total - 1) {
				self.form.pageNum++;
				self.getMemberInfo();
			}
			self.no_more = true;
		},
		methods: {
			openDetail(e) {
				this.gotoPage('/pages/market/activity-zone/other-detail?pkId=' + e.pkId + '&actTypeVal=' + e.actTypeVal +'&actType=' + e.actType)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange1: function(e) {
				this.form.startPayDate = e.detail.value;
			},
			bindDateChange2: function(e) {
				this.form.endPayDate = e.detail.value;
			},
			searchSubmit: function() {
				this.listData = [];
				this.form.pageNum = 1;
				this.getMemberInfo();
			},
			stateFunc(v) {
				this.loading = true;
				uni.showLoading({
					title: '加载中'
				});
				this.state_active = v;
				if (v == 1) {
					this.getData();
				} else if (v == 2) {
					this.getMemberInfo();
				}
			},
			getMemberInfo() {
				let self = this;
				self._get('activity/api/tree-rule-pick/member-info-list', self.form, res => {
					const {
						rows,
						total
					} = res;
					self.listData = rows;
					self.total = total;
					self.loading = false;
				});
			},
			RechargeFunc() {
				this.isRecharge = true;
			},
			msg_modal(content, title = '') {
				//统一提示方便全局修改
				if (Boolean(content) === false) {
					return;
				}
				uni.showModal({
					title: title,
					content: content,
					confirmText: this.$t('w_0035'),
					showCancel: false,
					confirmColor: '#33CCCC',
					success(res) {
						if (res.confirm) {}
					}
				});
			},
			SubGiftFunc() {
				let data = this.planlist[this.current];
				data = JSON.stringify(data);
				this.gotoPage('/pages/market/activity-zone/order-gift?data=' + encodeURIComponent(data));
			},
			openGift(e) {
				let self = this;
				this.pkGiftId = e;
				uni.showLoading({
					title: 'loading...'
				});
				self._post(
					'activity/api/people-service/getGiftPack', {
						pkBaseId: self.pkGiftId
					},
					res => {
						uni.hideLoading();
						self.planlist = res.data;
						self.isGift = true;
					}
				);
			},
			openTree() {
				let self = this;
				uni.showLoading({
					title: 'loading...'
				});
				self._get(
					'activity/api/sa-tree-order/queryTreeActivity', {},
					res => {
						if (res.data && res.code == 200) {
							self.treeModel = res.data;
							self.treeNum = self.treeModel.quantity;
							self.isTree = true;
							console.log('isTree');
						}
					},
					() => {},
					com => {
						uni.hideLoading();
					}
				);
			},
			closeTree() {
				this.isTree = false;
			},
			resultFun(e) {
				let self = this;
				let item = e.item;
				let list = e.list;
				console.log(self.availableSurplusNum);
				if (self.availableSurplusNum <= 0) {
					this.msg_modal(self.$t('w_0427'), self.$t('w_0034'));
					return;
				}
				self._post(
					'activity/api/draw/lottery-draw', {
						pkBaseId: self.pkId
					},
					res => {
						let id = res.data.pkId;
						self.aylotteryList.forEach((item, index) => {
							if (item.pkId == id) {
								self.stay_index_m = index;
							}
						});
						self.lotteryData = res.data;
						self.showLottery = true;
					}
				);

				// this.msg_modal("抽中了" + item.name, '恭喜您')
				//定义下一次转的位置
				// that.stay_index_m = Math.round(Math.random() * (list.length - 1)); //随机数
			},
			toDetailPage(e) {
				let list = e.list;
				let idx = e.curIndex;
				let list_img = [];
				let item = e.item;

				list.forEach(item => {
					list_img.push(item.img);
				});
				if (list_img && list_img.length > 0) {
					uni.previewImage({
						current: list_img[idx], //  传 Number H5端出现不兼容
						urls: list_img,
						indicator: 'number',
						loop: true
					});
				}
			},
			openLottery(e) {
				let self = this;
				self.pkId = e.pkId;
				self._post(
					'/activity/api/draw/prize-list', {
						pkBaseId: e.pkId
					},
					res => {
						self.aylotteryList = [];
						res.rows.forEach((item, index) => {
							self.aylotteryList.push({
								name: item.giftName,
								img: item.giftCover,
								is_img_bg: item.giftCover,
								pkId: item.pkId
							});
						});
						self.getLotteryNum(e);
					}
				);
			},
			getLotteryNum(e) {
				let self = this;
				if (!e.pkId) {
					return;
				}
				self._post(
					'activity/api/draw/lottery-num', {
						pkBaseId: e.pkId
					},
					res => {
						self.availableSurplusNum = res.data.availableSurplusNum;
						self.totalSurplusNum = res.data.totalSurplusNum;
						self.showPop = true;
					}
				);
			},
			openInput(e) {
				this.module = e;
				this.baseQuantity = e.baseQuantity;
				this.values = e.baseQuantity;
				this.showPop = true;
			},
			Addnumber() {
				if (this.values >= this.module.usableQuantity) {
					return;
				}
				this.values += this.baseQuantity;
			},
			Reducenumber() {
				if (this.values > this.baseQuantity) {
					this.values -= this.baseQuantity;
				}
			},
			goBack() {
				uni.navigateBack();
			},
			getData() {
				let self = this;
				self._get('activity/api/base/activity-list', {}, res => {
					self.listData = res.rows;
					self.loading = false;
				});
			},
			closeFunc(e) {
				this.showLottery = false;
				this.openLottery({
					pkId: this.pkId
				});
			},
			closeCashierFunc(e) {
				this.isCashier = false;
			},
			closeRechargeFunc(e) {
				let self = this;
				if (e) {
					if (self.rechargeNum <= 0) {
						uni.showToast({
							title: self.$t('w_0201'),
							icon: 'none'
						});
						return;
					}
					self.gotoPage('/pages/market/activity-zone/recharge?payNum=' + self.rechargeNum + '&pkBaseId=' + self
						.pkId);
					this.showLottery = false;
					this.showPop = false;
				} else {
					self.rechargeNum = '';
				}
				self.isRecharge = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.nav-right-btn {
		background: none;
		color: #999;
		font-size: 26rpx;
	}

	.pickup-list,
	.memberList {
		padding: 29rpx 24rpx 0 21rpx;
	}

	.pickup-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 363rpx;
		background: #ffffff;
		box-shadow: 0px 5rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 25rpx;
		padding: 25rpx 22rpx 24rpx 18rpx;
		box-sizing: border-box;
		margin-bottom: 23rpx;
	}

	.pickup-pic {
		width: 311rpx;
		height: 209rpx;
		border-radius: 20rpx;
		margin-right: 25rpx;
		display: block;
		flex-shrink: 0;
		position: relative;
		z-index: 1;

		image {
			width: 311rpx;
			height: 209rpx;
			border-radius: 20rpx;
		}

		.pickup-state {
			position: absolute;
			z-index: 1;
			top: 26rpx;
			left: 0;
			padding: 0 15rpx;
			box-sizing: border-box;
			min-width: 106rpx;
			line-height: 46rpx;
			font-size: 20rpx;
			color: #fff;
			background-color: #ffa50e;
			border-radius: 0 8rpx 8rpx 0;
		}

		.pickup-state.bgGray {
			background-color: #cccccc;
		}
	}

	.pickup-btn {
		min-width: 182rpx;
		min-height: 52rpx;
		line-height: 1.5;
		align-items: 52rpx;
		background: #fb3024;
		border-radius: 26rpx;
		font-size: 24rpx;
		color: #ffffff;
		text-align: center;
		margin-top: 26rpx;
		word-break: break-all;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pop-bg {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 98;
		background-color: rgba(0, 0, 0, 0.65);
	}

	.pop-content {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 100;
		width: 636rpx;
		height: 624rpx;
	}

	.lottry-bg {
		position: absolute;
		left: 0;
		top: 0;
		margin: auto;
		z-index: 0;
		width: 668rpx;
		height: 820rpx;
	}

	.pop-content-2 {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 105;
		width: 668rpx;
		height: 820rpx;
	}

	.icon.icon-guanbi {
		font-size: 32rpx;
		color: #999;
		position: absolute;
		right: 25rpx;
		top: 22rpx;
		z-index: 101;
	}

	.pop-input {
		width: 665rpx;
		height: 350rpx;
		background: #ffffff;
		border-radius: 25rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 105;
	}

	.pop-top {
		padding: 40rpx 60rpx 0 60rpx;
		box-sizing: border-box;
	}

	.pop-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 22rpx;
	}

	.input-box {
		// width: 80%;
		height: 64rpx;
		background: #ffffff;
		border: 1rpx solid #dddddd;
		border-radius: 32rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input-pop {
		box-sizing: border-box;
		border-radius: 32rpx;
		line-height: 1.5;
		font-size: 28rpx;
		color: #333;
		padding: 0 25rpx;
		border: none;
		flex: 1;
		outline-offset: 0;
	}

	.pop-lot-title {
		// position: absolute;
		// top: 96rpx;
		// left: 140rpx;
		position: relative;
		margin: 0 auto;
		margin-top: 96rpx;
		width: 389rpx;
		height: 125rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		line-height: 1.5;
		margin-bottom: 122rpx;
	}

	.lottry-product {
		width: 494rpx;
		height: 126rpx;
		background: #fdd840;
		border-radius: 12rpx;
		position: relative;
		z-index: 2;
		padding: 0 20rpx 0 20rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 98rpx;
	}

	.plan-product {
		width: 503rpx;
		height: 381rpx;
		border: 1rpx dashed #ffffff;
		box-sizing: border-box;
		border-radius: 20rpx;

		.swiper {
			width: 501rpx;
			height: 379rpx;
			padding: 22rpx 24rpx;

			.gift-proitem {
				width: 455rpx;
				// height: 92rpx;
				box-sizing: border-box;
				padding: 11rpx 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 26rpx;

				.gift-proitem-img {
					width: 54rpx;
					height: 54rpx;
					margin-right: 15rpx;
				}
			}

			.gift-proitem:last-child {
				margin-bottom: 0;
			}
		}
	}

	.pop-giftpack {
		position: fixed;
		z-index: 101;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		.giftpack-content {
			width: 549rpx;
			height: 676rpx;
			border-radius: 20rpx;
			position: relative;
			box-sizing: border-box;
			padding: 20rpx;

			.packgift-bg {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
				width: 549rpx;
				height: 676rpx;
				border-radius: 20rpx;
			}
		}
	}

	.swiper-dots {
		display: flex;
		justify-content: center;
		align-items: center;

		.swiper-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #fff;
			margin-right: 20rpx;
		}

		.swiper-dot:last-of-type {
			margin: 0;
		}

		.swiper-dot.active {
			background: #000000;
		}
	}

	.pop-lqbtn {
		width: 472rpx;
		height: 68rpx;
		background: #ffb95c;
		border-radius: 31rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #fff;
		font-weight: bold;
		text-align: center;
		margin: 0 auto;
		margin-top: 20rpx;
	}



	.bonus-item {
		padding: 20rpx 25rpx 20rpx 23rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.bonus-bottom {
			height: 104rpx;

			.order-btn {
				box-sizing: border-box;
				padding: 0 26rpx;
				min-width: 146rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				border-radius: 26rpx;
				font-size: 24rpx;
				color: #fff;
				border: 1rpx solid #eee;
				margin-left: 18rpx;
				background: #fb3024;
				border: 1rpx solid #fb3024;
				flex-shrink: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.bonus-item-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
</style>