mnsx/pages/tool/phoneBill.vue

<template>
	<view class="content">
		<view class="cz-top">
			<!-- 背景半圆 -->
			<view class="top-bg"></view>
			<view class="top-tit">
				充值号码
			</view>
			<input type="number" class="top-phone" placeholder="请输入充值号码" v-model="phone">
		</view>
		<view class="tc-wrap">
			<view class="tc-tit">
				请选择充值套餐
			</view>
			<view class="tc-list flex">
				<view class="list-item flex" v-for="(item,index) in list" :class="{'item-action': index == actionIndex}" @click="choosTc(item,index)">
					<view class="item-val">
						{{item.get_money}}<text class="dw">元</text>
					</view>
					<view class="item-price">
						售价{{item.price}}元
					</view>
				</view>
			</view>
			<view class="tc-pay flex">
				<view class="pay-tit">
					应付金额
				</view>
				<view class="pay-price">
					￥{{action.price}}元
				</view>
			</view>
		</view>
		<view class="pay-type-list">
			<view class="type-item b-b" @click="changePayType(1)">
				<text class="icon iconfont iconweixin"></text>
				<view class="con">
					<text class="tit">微信支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#921a23" :checked="payType == 1"></radio>
				</label>
			</view>
			<!-- <view class="type-item" @click="changePayType(3)">
				<text class="icon iconfont iconyue"></text>
				<view class="con">
					<text class="tit">余额支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#921a23" :checked="payType == 3"></radio>
				</label>
			</view> -->
		</view>
		<view class="sub-btn" @click="gopay">
			立即充值
		</view>
	</view>
</template>

<script>
	import { getPhoneTc, phonePay } from '@/api/index.js'
	export default {
		data() {
			return {
				action: {},
				list: [],
				phone: '',
				payType: 1, //支付类型 1-》微信 3-》余额
				actionIndex: 0,
				payMoney: 0,
				loaded: false,//是否提交中
			}
		},
		onLoad() {
			this.getTc()
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			// 选择支付方式
			changePayType(index) {
				this.payType = index
			},
			// 选择套餐
			choosTc(item,index) {
				this.actionIndex = index
				this.action = item
			},
			gopay() {
				let obj = this
				if(obj.loaded) {
					return
				}
				if(obj.phone == '') {
					return obj.$api.msg('请输入充值号码')
				}
				if (!/(^1[2|3|4|5|6|7|8|9][0-9]{9}$)/.test(obj.phone)) {
					return obj.$api.msg('请输入正确的手机号码')
					
				}
				obj.loaded = true
				phonePay({
					rechar_id: obj.action.id,
					mobile: obj.phone
				}).then(res => {
					console.log(res)
					let da = res.data
					let data = {
						// #ifdef H5
						timestamp: da.timestamp,
						// #endif
						// #ifdef MP
						timeStamp: da.timestamp,
						// #endif
						nonceStr: da.nonceStr,
						package: da.package,
						signType: da.signType,
						paySign: da.paySign,
						success: function(res) {
							// obj.paySuccessTo();
							uni.showToast({
								title:'充值成功',
								duration:2000
							});
							obj.loaded = false
						},
						fail: () => {
							obj.loaded = false
						},
					};
					wx.requestPayment(data);
				})
				
			},
			// 获取套餐
			getTc() {
				getPhoneTc().then(res => {
					console.log(res)
					this.list = res.data.recharge_quota
					this.action = res.data.recharge_quota[0]
				})
			},
		}
	}
</script>

<style lang="scss">
	.cz-top {
		height: 450rpx;
		width: 750rpx;
		// overflow: hidden;
		position: relative;

		.top-bg {
			position: absolute;
			bottom: 0;
			left: -825rpx;
			margin: auto;
			width: 2400rpx;
			height: 2400rpx;
			border-radius: 50%;
			background-color: #901b21;
		}

		.top-tit {
			position: relative;
			padding: 50rpx 27rpx 30rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.top-phone {
			position: relative;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: block;
			border-bottom: 1px solid #ffff;
			width: 696rpx;
			height: 70rpx;
			line-height: 70rpx;
			margin: auto;
		}
	}

	.tc-wrap {
		width: 694rpx;
		min-height: 308rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
		border-radius: 21rpx;
		margin: -200rpx auto 0;
		position: relative;
		padding: 30rpx;

		.tc-tit {
			font-size: 28rpx;
			font-weight: bold;
			color: #010101;
		}

		.tc-list {
			flex-wrap: wrap;
			justify-content: flex-start;
			padding: 20rpx 0;

			.list-item {
				width: 200rpx;
				height: 129rpx;
				background: #fff4f5;
				border-radius: 7px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-right: 10rpx;
				margin-bottom: 10rpx;

				.item-val {
					font-size: 36rpx;
					font-weight: bold;
					color: #ff4c4c;
					padding-bottom: 15rpx;

					.dw {

						font-size: 26rpx;
					}
				}

				.item-price {
					font-size: 21rpx;
					font-weight: bold;
					color: #999999;
				}
			}

			.item-action {
				background: #901b21;
				.item-val {
					color: #fff;
				}
				.item-price {
					color: #fff;
				}
			}
		}

		.tc-pay {
			font-size: 28rpx;
			justify-content: space-between;
			font-weight: bold;
			color: #333333;

			.pay-price {
				color: #FF0000;
			}
		}
	}

	.pay-type-list {
		margin: auto;
		margin-top: 20rpx;
		background-color: #fff;
		padding-left: 60upx;
		width: 694rpx;
		border-radius: 20rpx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.iconyue {
			color: #fe8e2e;
		}

		.iconweixin {
			color: #36cb59;
		}

		.iconzhifubao {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	.sub-btn {
		width: 680rpx;
		height: 83rpx;
		background-color: #901b21;
		border-radius: 42rpx;
		margin: 74rpx auto 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
		line-height: 83rpx;
	}
</style>