zc_saas_h5/pages2/order/confirm_pay.vue

<template>
	<view>
		<view>
			<view style="padding: 30rpx;">
				<view class="box2">
					<view class="title2">支付信息</view>
					<u-line color="#D6D6DB" />
					<view style="padding:10rpx 30rpx;" v-for="(item,index) in shoppingCartList">
						<view class="list_item">
							<view class="txt_left">商品名称</view>
							<view class="txt_right">{{item.goodsName}}</view>
						</view>
						<view class="list_item">
							<view class="txt_left">应付金额</view>
							<view class="txt_right_price">¥ {{item.standPrice}}</view>
						</view>
						<u-line color="#D6D6DB"/>
					</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','shoppingCartList']) }
};
</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>