zc_saas_h5/pages2/order/confirm_pay.vue

<template>
	<view>
		<view>
			<view style="padding: 30rpx;">
				<view class="box1">
					<view class="box1_t1">
						<u-icon name="checkmark-circle" color="#34C759" size="32"></u-icon><text style="margin-left: 8rpx;">订单提交成功，请您尽快付款！</text></view>
					<view class="box1_t2">请在24小时内付款，否则订单将自动取消</view>
				</view>
				<view class="box2">
					<view class="title2">支付信息</view>
					<u-line color="#D6D6DB" />
					<view style="padding:10rpx 30rpx;">
						<view class="list_item">
							<view class="txt_left">商品名称</view>
							<view class="txt_right">2020年二建建筑工程管理与实务（实务专题班）</view>
						</view>
						<view class="list_item">
							<view class="txt_left">应付金额</view>
							<view class="txt_right_price">¥ 999.00</view>
						</view>
						<view class="list_item">
							<view class="txt_left">订单编号</view>
							<view class="txt_right_sn">20211013105634GZ</view>
						</view>
						<view class="tip">*您可在“我的＞我的订单”中查询</view>
					</view>
				</view>
				<view class="box3">
					<view class="title2">支付信息</view>
					<u-line color="#D6D6DB" />
					<view style="padding:20rpx 30rpx;">
						<u-radio-group v-model="value" @change="radioGroupChange">
						<view class="list_item">
							<view class="txt_left_pay"><image src="/static/wepay.png" class="pay_icon"></image>微信支付</view>
							<view ><u-radio @change="radioChange" name="wepay"></u-radio></view>
						</view>
						<view class="list_item">
							<view class="txt_left_pay"><image src="/static/unipay.png" class="pay_icon"></image>云闪付</view>
							<view ><u-radio @change="radioChange" name="unipay"></u-radio></view>
						</view>
						</u-radio-group>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomBtn" @click="pay()">确认支付</view>
	</view>
	
</template>

<script>

import { mapGetters } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			list:[
				{
					name: '网课'
				},
				{
					name: '题库通'
				}
			],
			array:['全部','建设工程施工管理','机电全科','机电工程管理与实','机电全科','全科'],
			current:0,
			menuIndex:0
		};
	},
	onPullDownRefresh(){
	},
	onLoad(option) {
		
	},
	onShow() {
		/* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
	},
	methods: {
		pay(){
			this.$navTo.togo('/pages2/order/confirm_success');
		},
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		},
		cMenu(index){
			this.menuIndex = index;
		},
		change(index){
			this.current = index;
		}
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style >
	::-webkit-scrollbar{
	 width: 0;
	 height: 0;
	 color: transparent
	}
	page{
		background-color: #EAEEF1;
	}
</style>
<style scoped>
	
	.txt_left_pay{
		display: flex;
		align-items: center;
		height: 64rpx;
		font-size: 24rpx;
		color: #666666;
	}
	.pay_icon{
		width: 64rpx;
		height: 64rpx;
		margin-right: 10rpx;
	}
	.box3{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 30rpx;
	}
	.tip{
		font-size: 24rpx;
		color: #999999;
		height: 40rpx;
		line-height: 40rpx;
	}
	.txt_right_sn{
		font-size: 30rpx;
		font-weight: bold;
		color: #666666;
	}
	.txt_right_price{
		font-size: 30rpx;
		font-weight: bold;
		color: #FF2D55;
	}
	.txt_left{
		font-size: 24rpx;
		color: #666666;
	}
	.txt_right{
		color: #333333;
		font-weight: bold;
		width: 75%;
	}
	.list_item{
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		align-items: center;
	}
	.title2{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		height: 90rpx;
		line-height: 90rpx;
		margin-left: 30rpx;
	}
	.box2{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 30rpx;
	}
	.box1_t2{
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
	.box1_t1{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}
	.box1{
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		
	}
	.bottomBtn{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 98rpx;
		background: linear-gradient(0deg, #015EEA, #00C0FA);
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
		font-weight: bold;
		font-size: 30rpx;
	}
</style>