qc-luckyDraw-yanguang/pages/extractBookCurr/extractBookCurr.vue

<template>
	<view class="extractBook">
		<u-navbar :customBack="goBack" back-text="返回" title="提取书币"></u-navbar>
		
		<view class="bookCurrs">
			<view class="topContent">
				<text class="title">书币提取</text>
				<text style="color: #FE604F;" @click="ruleShow = true">提取规则</text>
			</view>
			<view class="bottomContent">
				<view class="balance">余额：{{balance}}</view>
				
				<view class="bookCurrList">
					<view v-for="item in bookCurrList" :key="item.id" :class="item.id === bookCurrId ? 'select' : ''" @click="selectHandle(item)">
						<image src="../../static/gold.png" class="goldCoins" style="width: 68rpx;" mode="heightFix"></image>
						<text class="reward">{{item.value}}书币</text>
					</view>
				</view>
				
				<view class="bookCurrNum">{{bookCurrNum}}书币</view>
				
				<view class="extractButton" @click="extractHandle">
					立即提取
				</view>
				<navigator :url="`../extractRecord/extractRecord?mpAppId=${mpData.mpAppId}&mpOpenId=${mpData.mpOpenId}`" class="extractRecord" v-if="mpData.mpAppId" hover-class="none">提取记录</navigator>
			</view>
			
		</view>
	
		<!-- 规则弹窗 -->
		<u-popup v-model="ruleShow" mode="center" :closeable="true" border-radius="18" close-icon-color="#FFF" @close="ruleShow=false" custom-style="{backgroundColor: #DC8182}">
			<view class="popupCenter">
				<view class="popupTitle">提取书币规则</view>
				<view class="bottom">
					<view>
						1.用户每日可解锁书币余额“提取”功能。
					</view>
					<view>
						2.解锁提取功能后，我们为您提供多个固定提取额度，具体提取额度以当日提取页面提供的具体提取额度为准。
					</view>
					<view>
						3.每次提取时，您可以选择所需的其中一档提取额度进行提取，剩余书币可在下次满足前述提取额度时申请提取。
					</view>
					<view>
						4.点击“书币余额提取”后，请前往公众号点击链接领取书币（链接有效期为3天）。
					</view>
					<view>
						5.书币领取链接通常会在24小时内到达公众号，若点击提取书币后2小时无反应，请前往公众号发送关键字“领取书币”。
					</view>
					<view>
						6.请您理解并同意如遇到双休日，节假日或提取高峰期，书币提取链接发送时间可能会延长，请您耐心等待。
					</view>
					<view>
						7.本活动解释权由开发者所有，有任何疑问请联系公众号内客服。
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 次数用完弹窗 -->
		<u-popup v-model="countShow" mode="center" :closeable="true" border-radius="18" close-icon-color="#000" @close="countShow=false">
			<view class="popupCount">
				<image src="../../static/noCountGold.png" mode="heightFix"></image>
				<text class="title">今日次数已用完，明日再来~</text>
				<text class="subTitle">提醒：每日只能提取一次</text>
				<button type="default" class="bt" @click="countShow=false">我知道了</button>
			</view>
		</u-popup>
		
		<!-- 提取成功弹窗 -->
		<view class="popup" v-if="succShow">
			<view class="popupContent">
				<view class="content">
					<image src="../../static/popupBack.png"></image>
					<view class="textCon">
						<text class="ts">书币已提取，请前往公众号点击链接领取书币</text> </br>
						<view class="bt" @click="succShow=false">我知道了</view>
					</view>
				</view>
				<image src="../../static/close.png" class="close" mode="widthFix" @click="succShow=false"></image>
			</view>
		</view>
		
	</view>
</template>

/**
 * 体现页面 
 *
 ***/
<script>
	import { config, getBalance, getQuotaList, setCoinRemove } from '@/api/api.js'
	export default {
		data() {
			return {
				ruleShow: false,  // 规则弹窗控制
				countShow: false, // 次数用完弹窗
				succShow: false,  // 提取成功弹窗
				bookCurrList: [],// 数据列表
				bookCurrId: undefined, // 选择充值项
				bookCurrNum: undefined, // 选择的书币数量
				balance: 0,  // 余额
				mpData: {}
			}
		},
		onLoad(opt) {
			console.log(opt)
			this.mpData = opt
			this.getList()
			this.getData()
		},
		onUnload() {
			console.log('销毁')
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2]; //上一个页面
			prevPage.$vm.getBookCurr();//重点$vm
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			selectHandle(item) {
				this.bookCurrNum = item.value
				this.bookCurrId = item.id
			},
			getData() {
				getBalance({...this.mpData, appId: config.appid}).then(res => {
					this.balance = res.data || 0
				})
			},
			getList() {
				getQuotaList({mpAppId: this.mpData.mpAppId}).then(res => {
					this.bookCurrList = res.data || []
					if(res.data.length > 0) {
						this.bookCurrId = res.data[0].id
						this.bookCurrNum = res.data[0].value
					}
				})
			},
			/** 提现*/
			extractHandle() {
				if (this.bookCurrNum > this.balance) {
					uni.showToast({
						title: '余额不足，请选择其它数量提取',
						icon: 'none'
					})
					return
				}
				setCoinRemove({...this.mpData, appId: config.appid, bookCoinId: this.bookCurrId}).then(res => {
					switch(res.data) {
						case 0:
							// uni.showToast({
							// 	title: '提取成功'
							// })
							this.succShow = true
							this.getData()
							break;
						case 1:
							uni.showToast({
								title: '提取失败, 请在公众号发送任意消息预约, 再来提取',
								icon: 'error'
							})
							break;
						case 2:
							this.countShow = true
							break;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #F2F2F2;
		background-color: #FC6E53;
	}
	.extractBook {
		
		.bookCurrs {
			background-color: #FFFFFF;
			margin: 30rpx 14rpx;
			border-radius: 22rpx;
			min-height: 200rpx;
			padding: 20rpx 0 30rpx;
			box-sizing: border-box;
		}
		
		.topContent {
			padding: 0 24rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.title {
				font-size: 38rpx;
				font-weight: 600;
			}
		}
		
		.bottomContent {
			padding: 40rpx 24rpx 0;
			
			.balance {
				font-size: 38rpx;
				font-weight: 600;
			}
			
			.bookCurrNum {
				color: #FE604F;
				font-size: 38rpx;
				font-weight: 600;
				margin-top: 26rpx;
			}
			
			.bookCurrList {
				margin-top: 20rpx;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-gap: 20rpx;
				
				&>view{
					width: 152rpx;
					height: 168rpx;
					background-color: #FFFFFF;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(182, 182, 182, 0.3);
					border: 2rpx solid #ececec;
					border-radius: 16rpx;
					padding: 12rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					position: relative;
					
					&.select {
						background: #FFF7EF;
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 173, 165, 0.26);
						border: 2rpx solid #FFB35C;
						.reward{
							color: #FE604F;
						}
					}
				}
				
				.goldCoins {
					height: 68rpx;
					margin: 5rpx 0;
				}
				.reward{
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					margin-top: 16rpx;
				}
			}
		
			.extractButton {
				// width: 456rpx;
				height: 80rpx;
				margin-top: 60rpx;
				font-size: 34rpx;
				color: #FFFFFF;
				font-weight: 500;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40rpx;
				// background-color: #000000;
				background: linear-gradient(180deg, #FDC606 0%, #FF8D12 100%);
				box-sizing: border-box;
			}
			.extractRecord {
				text-align: center;
				color: #5084f5;
				margin-top: 24rpx;
			}
		}
		
		.popupCenter {
			width: 650rpx;
			// height: 800rpx;
			padding: 26rpx;
			background-color: #DC8182;
			color: #FFFFFF;
			
			.popupTitle {
				font-size: 36rpx;
				font-weight: 600;
				color: #FFFFFF;
				text-align: center;
			}
			.bottom {
				margin-top: 30rpx;
				padding: 0 28rpx 30rpx;
				box-sizing: border-box;
				
				&> view {
					margin-bottom: 12rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 46rpx;
				}
			}
		}
	
		.popupCount {
			width: 540rpx;
			padding: 60rpx 0 0;
			// background-color: #DC8182;
			// color: #FFFFFF;
			min-height: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&>image {
				height: 200rpx;
			}
			
			&>.title {
				margin-top: 28rpx;
				font-size: 36rpx;
			}
			&>.subTitle {
				color: #909090;
				margin-top: 20rpx;
				font-size: 24rpx;
			}
			&>.bt {
				margin-top: 30rpx;
				width: 100%;
				border-radius: 0;
				background-color: #FFFFFF;
				
				&::after {
					border-top-left-radius: 0;
					border-top-right-radius: 0;
					border-left-width: 0;
					border-right-width: 0;
					border-bottom-width: 0;
				}
			}
		}
	}
	
	.popup {
		position: fixed;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.popupContent {
			width: 632rpx;
			
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			&>.content {
				position: relative;
				&>image {
					width: 100%;
					height: 652rpx;
				}
				&>.textCon {
					position: absolute;
					width: 100%;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					padding: 192rpx 106rpx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					flex-direction: column;
					
					.ts {
						font-size: 40rpx;
						font-weight: 500;
						color: #F5631D;
					}
					
					.reward {
						height: 60rpx;
						background: #FFD9A2;
						border-radius: 31rpx;
						font-size: 32rpx;
						font-weight: 400;
						display: inline-block;
						padding: 0 32rpx;
						color: #F5631E;
						line-height: 60rpx;
						margin-top: 20rpx;
					}
					
					.doubleBt {
						width: 456rpx;
						height: 104rpx;
						margin-top: 90rpx;
						transition: all linear .5s; 
					}
					
					.bt {
						width: 386rpx;
						height: 104rpx;
						text-align: center;
						line-height: 104rpx;
						margin-top: 184rpx;
						font-size: 36rpx;
						font-weight: 400;
						color: rgba(131, 25, 2, 1);
						box-shadow: 0rpx 3rpx 4rpx 0rpx rgba(211, 63, 22, 0.58);
						background-color: #fede77;
						border-radius: 52rpx;
					}
				}
			}
			&>.close {
				width: 54rpx;
				height: 54rpx;
				margin-top: 76rpx;
			}
		}
	}
</style>