mabao/pages/order/payment.vue

<template>
	<view>
		<!-- 弹窗  v-model双向绑定值 mode弹出位置 border-radius弹出层圆角-->
		<u-popup
		v-model="popupShow"
		mode="center" 
		border-radius="14"
		width="80%" 
		height="40%" 
		close-icon-pos="top-left" 
		:closeable="true"
		close-icon-color="#333333" >
			<view style="padding: 0 10%;height: 100%;width: 100%;">
				<!-- 标题占20% -->
				<view style="height: 20%;width: auto;">
					<text style="font-size: 30rpx;font-weight: bold;display: flex;justify-content: center;align-items: flex-end;height: 100%;">超级妈力</text>
				</view>
				<!-- 金额占30% -->
				<view style="height: 30%;width: auto;border-bottom: 1rpx solid #EFEFEF;">
					<text style="font-size: 78rpx;font-weight: 700;display: flex;justify-content: center;align-items: center;height: 100%;">¥{{norderAmount}}</text>
				</view>
				<!-- 支付方式占20% -->
				<view style="height: 20%;width: auto;">
					<view style="font-size: 30rpx;display: flex;align-items: center;height: 100%;">
						<text v-if="value=='钱包余额支付'">余额支付 (余额¥50.00元)</text>
						<text v-else>微信支付</text>
					</view>
				</view>
				<!-- 按钮占25% -->
				<view style="height: 25%;width: auto;">
					<view style="display: flex;justify-content: center;align-items: center;height: 100%;">
						<u-button type="primary" style="width: 100%;" @click="payment">确认支付</u-button>
					</view>
				</view>
				
			</view>
		</u-popup>

		<uni-list :border="false">
			<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/caixian.png" style="width: 100%; height: 5rpx; background-color: #FFFFFF;"></image>
			<uni-list-item :border="false">
				<view slot="header" style="color:#666666 ; font-size: 28rpx;">
					<text v-if="product_type == '1' ">{{doctorName}} 电话咨询</text>
					<text v-if="product_type == '2' ">疫苗图文咨询</text>
					<text v-if="product_type == '3' ">门诊预约</text>
					<text v-if="product_type == '4' ">疫苗接种预约</text>
					<text v-if="product_type == '5' ">儿保预约</text>
					<text v-if="product_type == '6' ">服务包</text>
					<text v-if="product_type == '7' ">充值</text>
				</view>
				<view slot="footer" style="color:#FF4F61 ;font-weight: 500;">
					{{orderAmount}}
				</view>
			</uni-list-item>
			<!-- 线条 -->
			<u-line color="#EFEFEF" />
			<uni-list-item :border="false" :link="true">
				<view slot="header" style="color:#666666 ; font-size: 28rpx;">
					优惠券
				</view>
				<view slot="footer" style="font-size: 30rpx;">
					{{coupon}}
				</view>
			</uni-list-item>
		</uni-list>
		<u-gap height="20" bg-color="#F6F6F6"></u-gap>
		<uni-list :border="false">
			<uni-list-item :border="false">
				<view slot="header" style="font-size: 28rpx; font-weight: 500;color: #666666;">支付方式</view>
			</uni-list-item>
			<!-- 加一个单选 -->
			<u-radio-group v-model="value" v-for="(item, index) in paymenMethod">
				<uni-list-item :border="false" @click="value=item.name" :clickable="true">
					<view slot="header">
						<text style="font-size: 28rpx;font-weight: 400;color: #333333;">{{item.name}}</text>
						<text v-if="item.name=='钱包余额支付' " style="font-size: 28rpx;font-weight: 500;">{{money}}</text>
					</view>
					<view slot="footer">
						<u-radio @change="radioChange" :key="index" :name="item.name" :disabled="item.disabled">
						</u-radio>
					</view>
				</uni-list-item>
				<u-line color="#EFEFEF" />
			</u-radio-group>
		</uni-list>
		<!-- 按钮 -->
		<view class="cu-bar bg-white tabbar border shop" style="position: fixed; bottom: 0; z-index: 99;width: 100%;">
			<view class="" style="width:75%;">
				<text style="padding-left: 30rpx;font-size: 32rpx;">合计：</text>
				<text style="padding-left: 20rpx;font-size: 36;font-weight: 500;color: #FF4F61;">{{orderAmount}}</text>
			</view>
			<view class="submit text-white" @click="popupShow=true" style="background-color: rgb(11,115,186); font-size: 32rpx;">确认支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//医生名称
				doctorName: '',
				ndoctorName: '渣渣宝',
				//订单金额
				orderAmount: '',
				norderAmount: 19.9,
				//优惠券
				coupon: '不使用优惠券',
				//钱包余额
				money: '',
				nmoney: 0.00,
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '微信支付',
				paymenMethod: [{
					name: '微信支付',
					disabled: false
				}, {
					name: '钱包余额支付',
					disabled: false
				}],
				//弹出层控制
				popupShow:false,
				//订单类型
				product_type:'1'
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			//充值
			recharge(e) {

			},
			click(e) {
				console.log(e)
			},
			//点击确认支付
			payment(e){
				uni.navigateTo({
					url: '/pages/order/order'
				});
			}
		},
		onShow() {
			
			this.orderAmount = this.norderAmount + "元"
			this.money = "  ¥" + this.nmoney + "元"
		},
		onHide() {
			this.popupShow = false
		}
	}
</script>

<style>
	/* 支付文字 */
	.paymentText {
		height: 60rpx;
		width: auto;
		background-color: #FFFFFF;
		padding: 30rpx 0 0 30rpx;
		font-size: 24rpx;
	}
</style>