zc_saas_h5/pages2/order/confirm_pay.vue

<template>
	<view>
		<nav-bar title="订单支付"></nav-bar>
		<view>
			<view style="padding: 8rpx;">
				<view class="box2">
					<view class="title2">支付信息</view>
					<u-line color="#D6D6DB" />
					<view style="padding:10rpx 30rpx;" v-for="(item,index) in shoppingCartList" :key="index">
						<view class="list_title">
							<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>
					</view>
					<view style="padding:10rpx 30rpx;" >
						<u-line color="#D6D6DB" />
						<view class="list_item">
							<view class="txt_left">应付总金额</view>
							<view class="txt_right_price">¥ {{totalPrice}}</view>
						</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" 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>
		
		<u-modal v-model="showModal" confirm-text="返回购物车" cancel-text="知道了" cancel-color="#666666" confirm-color="rgba(0, 122, 255, 1);" :show-confirm-button="true" :show-cancel-button="true" :content="modalMsg" @cancel="modalCancel()" @confirm="modalConfirm()" ref="uModal" ></u-modal>
	</view>
	
</template>

<script>

import { mapGetters } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			showModal:false,
			modalMsg:'',
			list:[
				{
					name: '网课'
				},
				{
					name: '题库通'
				}
			],
			array:['全部','建设工程施工管理','机电全科','机电工程管理与实','机电全科','全科'],
			current:0,
			menuIndex:0,
			value:'wepay',
			btnNo:false,
			isBK:'',
			totalPrice:0
		};
	},
	onPullDownRefresh(){
	},
	onLoad(option) {
		let self = this
		 console.log(self.shoppingCartList,6)
		 let list = self.shoppingCartList
		 this.isBK = option.isBK
		 for(let i=0;i<list.length;i++){
			 this.totalPrice+=Number(list[i].standPrice)
		 }
		 console.log(this.isBK == '1')
	},
	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 => {
				if(res.data.code==200){
					uni.setStorageSync('updateCart',1) //提醒刷新购物车
					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) {
							self.btnNo = false
							uni.redirectTo({
							    url: `/pages2/order/confirm_success?sn=${data.orderSn}&isBk=${self.isBK}`
							});
					        console.log('success:' + JSON.stringify(res));
					    },
					    fail: function (err) {
							self.btnNo = false
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				}else{
					self.btnNo = false
					this.modalMsg = res.data.msg;
					this.showModal = true;
				}
			});
		},
		modalCancel() {
			this.showModal = false;
		},
		modalConfirm() {
			uni.switchTab({
				url:'/pages/shopping/shoppingCart'
			})
		},
		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: 16rpx;
	}
	.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{
		text-align: right;
		color: #333333;
		font-weight: bold;
		width: 75%;
	}
	.list_title {
		display: flex;
		justify-content: space-between;
	}
	.list_item{
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;
	}
	.title2{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 30rpx;
	}
	.box2{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.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;
		border-radius: 0;
	}
</style>