<template>
	<view class="page">
		<u-navbar title="充值中心" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <view class="topcz">
        	<view class="topname">
        		[Deep] 会员充值
        	</view>
			<view class="topprice">
				充值金额
			</view>
			<view class="topinp">
				￥ <input type="text" v-model="rechargeAmount" placeholder="请填写充值金额"/>
			</view>
			<view class="topanniu" @click="btnczs">
				确认充值
			</view>
        </view>
        <view class="taocan">
        	套餐充值
        </view>
		<view class="taocanlist" v-for="(item,index) in tclist" :key="index" @click="btncz(item)">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uELr9f0UbIC3vqBqTpr5" mode=""></image>
			<view class="tcwz">
				<view class="czprice">
					充值{{item.rechargeAmount}}元赠送{{item.giftedAmount}}元
				</view>
				<view class="ljcz">
					立即充值
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#010000",
                },
				tclist:[],
				channelId:'',
				rechargeAmount:''
			}
		},
		onLoad() {
			this.getchannelId()
            this.gettclist()
		},
		methods: {
			// 获取充值套餐
			gettclist(){
				this.$u.get(`/app/rechargeActivity/list?storeId=${this.$store.state.storeId}`).then(res => {
				    if (res.code == 200) {
						this.tclist = res.data
				    }
				})
			},
			// 获取渠道id
			getchannelId(){
				this.$u.get(`/app/channel/list?appId=${this.$store.state.appid}&bstType=3&storeId=${this.$store.state.storeId}`).then(res => {
				    if (res.code == 200) {
						this.channelId = res.data[0].channelId
				    }
				})
			},
			// 点击确认充值
			btnczs(){
				uni.showLoading({
					title: '准备支付中...',
					mask: true
				})
				let data = {
					storeId:this.$store.state.storeId,
					appId:this.$store.state.appid,
					channelId:this.channelId,
					rechargeAmount:this.rechargeAmount,
				}
				this.$u.post(`/app/rechargeOrder`,data).then(resp => {
				    if (resp.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: resp.data.payParams.timeStamp,
							nonceStr: resp.data.payParams.nonceStr,
							package: resp.data.payParams.packageVal,
							signType: resp.data.payParams.signType,
							paySign: resp.data.payParams.paySign,
							success: (respc) => {
								this.$u.put(`/app/pay/refreshPayResult?no=${resp.data.pay.no}`).then((res) => { 
									uni.hideLoading()
									this.rechargeAmount = ''
									uni.showToast({
										title: '支付成功',
										icon: 'success',
										duration: 2000
									})
				                    setTimeout(() => {
				                    	uni.navigateBack()
				                    }, 1000)
								})
							},
							fail(err) {
								setTimeout(() => {
									uni.hideLoading()
								}, 1000)
							}
						})
				    }else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
											
								} else if (res.cancel) {
						
								}
							}
						})
					}
				})
			},
			// 点击立即充值
			btncz(item){
				uni.showLoading({
					title: '准备支付中...',
					mask: true
				})
				let data = {
					storeId:this.$store.state.storeId,
					appId:this.$store.state.appid,
					channelId:this.channelId,
					rechargeAmount:item.rechargeAmount,
					giftedAmount:item.giftedAmount,
					rechargeActivityId:item.id
				}
				this.$u.post(`/app/rechargeOrder`,data).then(resp => {
				    if (resp.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: resp.data.payParams.timeStamp,
							nonceStr: resp.data.payParams.nonceStr,
							package: resp.data.payParams.packageVal,
							signType: resp.data.payParams.signType,
							paySign: resp.data.payParams.paySign,
							success: (respc) => {
								this.$u.put(`/app/pay/refreshPayResult?no=${resp.data.pay.no}`).then((res) => { 
									uni.hideLoading()
									uni.showToast({
										title: '支付成功',
										icon: 'success',
										duration: 2000
									})
                                    setTimeout(() => {
                                    	uni.navigateBack()
                                    }, 1000)
								})
							},
							fail(err) {
								setTimeout(() => {
									uni.hideLoading()
								}, 1000)
							}
						})
				    }else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
											
								} else if (res.cancel) {
						
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #010000;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}
	.taocan{
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-top: 74rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.taocanlist{
		width: 690rpx;
		height: 216rpx;
		margin: auto;
		margin-top: 18rpx;
		position: relative;
		image{
			width: 690rpx;
			height: 216rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.tcwz{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 216rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			.czprice{
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
			}
			.ljcz{
				width: 208rpx;
				height: 62rpx;
				background: #FF8998;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 62rpx;
				border-radius: 50rpx;
			}
		}
	}
    .topcz{
		padding: 0 30rpx;
		box-sizing: border-box;
		.topname{
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-top: 42rpx;
		}
		.topprice{
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 24rpx;
		}
		.topsm{
			view{
				font-size: 30rpx;
				color: #FFFFFF;
				margin-top: 30rpx;
			}
		}
		.topinp{
			margin-top: 42rpx;
			border-bottom: 1rpx solid #D8D8D8;
			display: flex;
			font-size: 32rpx;
			color: #FFFFFF;
			padding-bottom: 8rpx;
			box-sizing: border-box;
			input{
				margin-left: 12rpx;
				width: 100%;
			}
		}
		.topanniu{
			width: 588rpx;
			height: 86rpx;
			background: #FF8998;
			border-radius: 43rpx 43rpx 43rpx 43rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #0E0C0C;
			margin: auto;
			margin-top: 44rpx;
			text-align: center;
			line-height: 86rpx;
			border-radius: 50rpx;
		}
	}
</style>