cyzh-SoundOfMusic-H5/pages/activityList/mine/agent/pay.vue

<template>
	<view>
		<view class="text-center" style="margin-top: 120upx;">
			<view class="text-gray text-sm padding">待支付</view>
			<view class="theme-color">
				<text style="font-size: 48upx;">￥</text>
				<text style="font-size: 72upx;">8000</text>
			</view>
			<view class="text-black text-lg margin-top">一线城市渠道合伙人-保证金</view>
		</view>
		<view class="container">
			<view style="padding: 40upx 0 30upx 30upx;font-size: 30upx;font-weight: bold;">支付方式</view>
			<block v-for="(item, index) in ways" :key="index">
				<view class="flex align-center justify-between padding" @click="change(index)">
					<view class="flex align-center">
						<image class="margin-right" :src="item.icon" style="width: 50upx;height: 50upx;"></image>
						<view>{{item.name}}</view>
					</view>
					<view :class="current == index ? 'theme-color cuIcon-roundcheckfill' : 'cuIcon-round'" style="font-size: 40upx;"></view>
				</view>
			</block>
		</view>
		<view class="footer-fixed padding-lg">
			<u-button class="custom-style" shape="circle" @click="pay">确认支付</u-button>
		</view>
		<u-popup v-model="successShow" mode="center" :mask-close-able="false" width="550" height="500" border-radius="30">		
			<view class="text-center padding">
				<image src="/static/agent/pic_agent.png" style="width: 109upx;height: 122upx;"></image>
				<view style="font-size: 34upx;color: #563ae5;font-weight: bold;padding: 30upx 0 10upx 0;">恭喜您成为代理</view>
				<view style="font-size: 28upx;color: #999999;padding-bottom: 60upx;">专享代理专属权益</view>
				<u-button class="custom-style" shape="circle" @click="confirm">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				successShow: false,
				ways: [
					{name: '微信支付', icon: '/static/agent/icon_weixin.png'},
					{name: '支付宝支付', icon: '/static/agent/icon_zfb.png'},
					{name: '银行卡支付', icon: '/static/agent/icon_yhk.png'},
				],
				current: 0,
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			pay() {
				console.log("支付")
				this.successShow = true;
			},
			confirm() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #ffffff;
		margin: 30upx;
		border-radius: 20upx;
	}
	.custom-style {
		background-color: #5b3ee7;
		width: 350upx;
		color: #ffffff;
	}
</style>