mh/pages/tabbar/cashPay/cashPay.vue

<template>
	<view class="cash-pay">
		<view class="deposit_main">
			<view class="deposit_main_name">选择支付方式</view>
			<view class="deposit_main_ul">
				<view class="deposit_main_li flex" v-for="(item, index) in payList" :key="index" @click="payIndex = item.type">
					<view class="deposit_main_img flexs">
						<image :src="item.image" mode=""></image>
						<text>{{ item.name }}</text>
					</view>
					<view class="deposit_main_li_select">
						<image :src="item.type == payIndex ? '/static/image/publice/xuanzhong1@2x.png' : '/static/image/publice/weixuanzhong@2x.png'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="deposit_main_txt"><u-parse :content="message"></u-parse></view>
		</view>
		<button class="recharge_btn" hover-class="hover-view" @click="submitPay">支付</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			payIndex: 1,
			message: '',
			payList: [
				{
					name: '微信支付',
					type: '0',
					key: 'wechat',
					image: '/static/image/me/weixin@2x.png'
				}
				// {
				// 	name:'支付宝支付',
				// 	type:'1',
				// 	key: 'alipay',
				// 	image:'/static/image/me/zhifubao@2x.png'
				// },
			],
			params: {}
		};
	},
	computed: {
		currPayType() {
			let currPayType = this.payList.find(item => item.type == this.payIndex);
			return currPayType;
		}
	},
	onLoad(params) {
		this.params = params;
	},
	methods: {
		submitPay() {
			let payUrl = `${this.params[this.currPayType.key]}?token=${uni.getStorageSync('token')}&payPage=${this.params.payPage}`;
			location.href = payUrl;
		}
	}
};
</script>

<style lang="scss">
.cash-pay {
	padding: 0 30rpx;
}
.deposit_main {
	padding-bottom: 30rpx;
	.deposit_main_name {
		font-size: 32rpx;
		font-weight: bold;
		padding: 40rpx 0 30rpx 20rpx;
	}
	.deposit_main_ul {
		background: #ffffff;
		.deposit_main_li {
			padding: 30rpx 20rpx;
			.deposit_main_img {
				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
				text {
					font-size: 28rpx;
				}
			}
			.deposit_main_li_select {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.deposit_main_txt {
		padding: 30rpx 0;
	}
}
.recharge_btn {
	/*position: absolute;
	left: 50%;
	transform: translateX(-50%);
	*/
	width: 690rpx;
	bottom: 34rpx;

	color: #fff;

	height: 88rpx;
	background: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
	box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(220, 220, 220, 0.2);
	border-radius: 8rpx;
}
</style>