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" v-if="false">
							<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>
		<button class="bottomBtn" @click="pay()" :disabled="btnNo">确认支付</button>
	</view>
	
</template>

<script>

import { mapGetters } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			list:[
				{
					name: '网课'
				},
				{
					name: '题库通'
				}
			],
			array:['全部','建设工程施工管理','机电全科','机电工程管理与实','机电全科','全科'],
			current:0,
			menuIndex:0,
			value:'wepay',
			btnNo:false
		};
	},
	onPullDownRefresh(){
	},
	onLoad(option) {
		let self = this
		 console.log(self.shoppingCartList,6)
		 let list = self.shoppingCartList
		 

	},
	onShow() {
		
	},
	methods: {
		postOrder(){
			let self = this
			let list = self.shoppingCartList
			for(let i=0;i<list.length;i++){
				let item = list[i];
					if(item.goodsType==1){
						if(item.templateType=='class'){
							delete item.gradObj.goodsList 
							let goodsInputData = {
								type:'class',
								gradeId:item.gradObj.gradeId,
								gradeJson:JSON.stringify(item.gradObj)
							}
							item.goodsInputData = goodsInputData
						}
						if(item.templateType=='apply'){
							let goodsInputData = {
								type:'apply',
								applyAreasJson:JSON.stringify(item.applyAreas),
								examDateJson:JSON.stringify(item.examDate)
							}
							item.goodsInputData = goodsInputData
						}
					}
			}
			let data = {goodsList:list}
			
			this.$api.placeSmallOrder(data).then(res => {
				self.btnNo = false
				if(res.data.code==200){
					let data = res.data.data
					uni.requestPayment({
					    provider: data.provider,
					    nonceStr: data.nonceStr,
					    package: data.package,
					    signType: data.signType,
					    paySign: data.sign,
						timeStamp: String(data.timeStamp),
					    success: function (res) {
							uni.redirectTo({
							    url: '/pages2/order/confirm_success?sn='+data.orderSn
							});
					        console.log('success:' + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				}else{
					uni.showModal({
						title: "提示",
						content: res.data.msg,
						showCancel: false
					})
				}
			});
		},
		getOpenid(code){
			let self = this
			this.$api.wxOpenid({code:code}).then(res => {
				if(res.data.code==200){
					self.postOrder()
				}
			});
		},
		pay(){
			let self = this
			this.btnNo = true
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log(loginRes,69)
					self.getOpenid(loginRes.code)
					
				}
			}); 

			//
		},
		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>