gubersail-shop-app/pages/pay/index.vue

<template>
	<view class="">
		<view style="display: flex;justify-content: center;align-items: flex-end;margin-top: 100rpx;">
			<text>
				￥
			</text>
			<text style="font-size: 80rpx;line-height:80rpx;">
				0.01
			</text>
		</view>
		<view style="display: flex;justify-content: center;margin-top: 20rpx;">
			<text style="color: #8f939c;">
				待支付金额
			</text>
		</view>
		<view style="display: flex;justify-content:space-between;margin: 20rpx 30rpx;">
			<text>
				商品名称
			</text>
			<text>
				商品名称
			</text>
		</view>
		<view style="display: flex;justify-content:space-between;margin: 20rpx 30rpx;">
			<text>
				商品金额
			</text>
			<text>
				￥0.01
			</text>
		</view>
		<view style="margin: 0 30rpx">
			<text style="color: #8f939c;">
				请选择支付方式
			</text>
		</view>
		<uni-card style="margin: 10rpx 30rpx;border-radius: 20rpx;">
			<view style="display: flex;justify-content: space-between;margin:20rpx 0;">
				<view style="display: flex;align-items: center;">
					<image style="height: 50rpx;width: 50rpx;" src="/static/images/pay/wxpay.png" mode="scaleToFill">
					</image>
					<text style="color: #3a3a3a;margin-left: 20rpx;">
						微信支付
					</text>
				</view>
				<view style="display: flex;align-items: center;width: 40rpx;">
					<uni-data-checkbox v-model="payType" :localdata="[{'value':'wxpay'}]"></uni-data-checkbox>
				</view>
			</view>
			<view style="background-color:#e5e5e5;height:1rpx;"></view>
			<view style="display: flex;justify-content: space-between;margin:20rpx 0;">
				<view style="display: flex;align-items: center;">
					<image style="height: 50rpx;width: 50rpx;" src="/static/images/pay/alipay.png" mode="scaleToFill">
					</image>
					<text style="color: #3a3a3a;margin-left: 20rpx;">
						支付宝
					</text>
				</view>
				<view style="display: flex;align-items: center;width: 40rpx;">
					<uni-data-checkbox v-model="payType" :localdata="[{'value':'alipay'}]"></uni-data-checkbox>
				</view>
			</view>
		</uni-card>
		<view style="position: fixed;bottom: 30rpx;width: 100%;">
			<view style="margin:0 30rpx;">
				<debounce-button  bgColor='#03803B' @click="goPay">确认支付</debounce-button>
			</view>
			
		</view>

	</view>
</template>

<script>
	import {
		v4 as uuidv4
	} from 'uuid';
	import {
		getPhoneVerifyCode
	} from '@/api/user.js'
	export default {
		data() {
			return {
				payType: null,
			};
		},
		onLoad() {},
		methods: {
			goPay(){
				if(!this.payType){
					uni.showToast({
						title: "请选择支付方式",
						icon: "none",
						mask: true
					});
					return
				}
				
			}
		}
	};
</script>
<style lang="scss" scoped>
</style>