mini_rabot/pages/selfInfo/payList/payList.vue

<template>
	<view class="content" :style="{height:nowHeight}">
		
		<view class="pay-list-box">
			<view class="pay-title">
				<image src="../../../static/icon/moneyIcon.png" mode=""></image>
				<text>购买查询次数</text>
			</view>
			
			<view class="pay-content" :class="{'border-select':selectId === search.id}"
			 v-for="search in searchList" :key='search.id' @click="selectPackage(search)">
				 <view style="margin-left: 3%;">可查询次数 {{search.times}}</view>
				 <view style="margin-right: 5%;">¥ {{search.money}}</view>
			</view>						
		</view>
		
		<view class="pay-box">
			<view style="margin-left: 5%;">{{packageMoney}}</view>
			<button type="primary" class="submit-message" @click="payPackage()">购买</button>
		</view>
	
	</view>
</template>

<script>
	var md5 = require("../../../common/md5.js");
	export default {
		data() {
			return { 
				nowHeight:getApp().globalData.glbalHeight,
				selectId:'',
				packageMoney:'',
				searchList:[
					{
						times:'100',
						money:'10',
						id:'1',	
					},
					{
						times:'200',
						money:'20',
						id:'2',	
					},{
						times:'300',
						money:'30',
						id:'3',	
					},
				],
			}
		},
		onLoad() {
			this.getPayListRequest()
		},
		methods: {
			getPayListRequest(){
				let that = this;
				uni.request({
					url: getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'charge_rule_list',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						uid: getApp().globalData.user_id,
						sign: md5('charge_rule_list' + getApp().globalData.globalTimestamp),
					},
					success: res => {
						that.searchList = res.data.msg
					}
				});
			},
			selectPackage(param){
				this.selectId  = param.id;
				this.packageMoney = param.money + '元';
			},
			rechargeNext(obj){
				let that = this;
				uni.requestPayment({
				    // provider: 'wxpay',
				    timeStamp: obj.timeStamp,
				    nonceStr: obj.nonceStr,
				    package: obj.package,
				    signType:obj.signType,
				    paySign:obj.paySign,
				    success: function (res) {
						uni.showToast({
							title: '支付成功',
							icon:'none'
						});
						uni.navigateBack({})
				    },
				    fail: function (err) {
				        console.log('支付失败:' + JSON.stringify(err));
				    }
				});
			},
			payPackage(){
				let that = this;
				uni.request({
					url:getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header:{'content-type': 'application/x-www-form-urlencoded'},
					data: {
						method:'charge',
						timestamp:getApp().globalData.globalTimestamp,   //Date.now()
						sign:md5('charge'+getApp().globalData.globalTimestamp),
						rule_id:that.selectId,//充值对应的id
						uid:getApp().globalData.user_id
					},
					success: res => {
						if(res.data.code === 200){
							console.log(res.data)
							that.rechargeNext(res.data.msg)
						}
					},
					fail: err => {
						console.log(err)
					},
					complete: () => {}
				});
			}
		}
	}
	
</script>

<style>
     .content {
     	display: flex;
     	flex-direction: column;
     	align-items: center;
     	justify-content: flex-start;
     	background: #f4f5f7;
     }
	 
	 .pay-list-box {
		 width: 95%;
		/* min-height:400upx; */
		 background: #fff;
		 margin-top: 3%;
		 border-radius: 10rpx;
	 }
	 .pay-title {
		 width: 95%;
		 height: 80rpx;
		 font-size: 30rpx;
		 margin: 0 auto;
		 border-bottom: 1px solid #d9d9d9;
		 display: flex;
		 align-items: center;

	 }
	 .pay-title image {
		 width: 50upx;
		 height: 50upx;
		 margin-right: 2%;
	 }
	 .pay-content {
		 width: 95%;
		 height: 90rpx;
		 font-size: 30rpx;
		 margin: 3% auto;
		 border: 1px solid #d9d9d9;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 border-radius: 10rpx;
	 }
	 .pay-box {
	 	width: 100%;
	 	height: 100rpx;
	 	position: fixed;
	 	bottom: 0;
	 	background: #fff;
	 	display: flex;
	 	align-items: center;
	 }
	 
	 .pay-box button {
		 margin-right: 5%;
		 height: 55rpx;
		 line-height: 55rpx;
		 font-size: 28rpx;
         background: #27BCEF;
	 }
	 .border-select {
		 border:2px solid #27BCEF !important;
	 }
</style>