880 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			880 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <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> |