zc_saas_h5/pages2/order/confirm_pay.vue

<template>
	<view>
		<nav-bar title="订单支付"></nav-bar>
		<view>
			<view>
				<view class="box2">
					<view class="title2">支付信息</view>
					<!-- <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 v-for="(item,index) in shoppingCartList" :key="index" style="display: flex;justify-content: space-between; margin-bottom: 32rpx;">
						<image :src="$method.splitImgHost(item.coverUrl)" style="height: 120rpx;width: 204rpx;border-radius: 16rpx;"></image>
						<view class="right_con" style="margin-left: 20rpx;">
							<view style="color: #333333;font-size: 30rpx;font-weight: bold;">
								{{item.goodsName}}
							</view>
							<view class="priceTag">
								¥ {{item.standPrice}}
							</view>
						</view>
					</view>

					<view class="info_right" >
						<!-- <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>
					
					<view>
						<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>
					<u-line color="#D6D6DB" />
				</view>
			</view>
		</view>
		<view class="bottomBox safeArea">
			<view class="sums">
				<text class="all_sum">总金额：</text>
				<text class="priceTag">¥ {{totalPrice}}</text>
			</view>
			
			<view style="display: flex;color: #FFFFFF;align-items: center;">
				<!-- <view class="btn2" @click="pay()">确认支付</view> -->
				<button class="btn2" @click="pay()" :disabled="btnNo">确认支付</button>
			</view>
		</view>
		<!-- <button class="bottomBtn" @click="pay()" :disabled="btnNo">确认支付</button> -->
		
		<u-modal v-model="showModal" :confirm-text="confirmText" cancel-text="知道了" cancel-color="#666666" confirm-color="rgba(0, 122, 255, 1);" :show-confirm-button="showConfirmButton" :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:'',
			fromCart:'',
			hasPaying:false,
			showConfirmButton:false,
			totalPrice:0,
			confirmText:''
		};
	},
	onPullDownRefresh(){
	},
	onLoad(option) {
		let self = this
		this.fromCart = option.fromCart;
		 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 list = this.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}
			// #ifdef MP-WEIXIN
			this.$api.placeSmallOrder(data).then(res => {
				console.log(res,'res')
				this.orderResult(res)
			});
			// #endif

			// #ifdef H5
			data['url'] = location.href
			this.$api.placeGzhOrder(data).then(res => {
				console.log(res,'res')
				this.orderResult(res)
			});
			// #endif
		},
		orderResult(res) {
			if(res.data.code==200){
					
					uni.setStorageSync('updateCart',1) //提醒刷新购物车
					if(this.totalPrice == 0) { //免费商品
						uni.redirectTo({
						    url: `/pages2/order/confirm_success?sn=${res.data.data.orderSn}&isBk=${this.isBK}`
						});
					} else {
						let data = res.data.data
						uni.showLoading({
							title:'支付中',
							mask:true,
						})
						// #ifdef MP-WEIXIN
						uni.requestPayment({
						    provider: data.provider,
						    nonceStr: data.nonceStr,
						    package: data.package,
						    signType: data.signType,
						    paySign: data.sign,
							timeStamp: String(data.timeStamp),
						    success: (res) => {
								
								uni.hideLoading()
								this.btnNo = false
								uni.redirectTo({
								    url: `/pages2/order/confirm_success?sn=${data.orderSn}&isBk=${this.isBK}`
								});
						        console.log('success:' + JSON.stringify(res));
						    },
						    fail: (err) => {
								uni.hideLoading()
								this.btnNo = false
						        console.log('fail:' + JSON.stringify(err));
						    }
						});
						// #endif

						// #ifdef H5
						this.h5_wxpay(data)
						// #endif
					}
					
				}else if(res.data.code == 510){ //有未支付订单
					this.hasPaying = true;
					this.btnNo = false
					this.modalMsg = res.data.msg;
					this.showConfirmButton = true;
					this.confirmText = "跳转到【我的订单】\n查看未支付订单";
					this.showModal = true;
				} else if(res.data.code == 511) { //511 重复购买
					this.hasPaying = false;
					this.btnNo = false
					this.modalMsg = res.data.msg;
					this.showConfirmButton = true;
					this.showModal = true;
					
					if(this.fromCart) {
						console.log(this.fromCart)
						this.confirmText = "返回购物车";
					} else {
						let type = '';
						if(this.shoppingCartList.length == 1) {
							type = this.shoppingCartList[0].goodsType
						} else {
							type = this.shoppingCartList[0].goodsType;
							
							if(this.shoppingCartList.find(item => item.goodsType != type)) {
								type = 3;
							}
						}
						this.confirmText = (type == 1 || type == 6) ? "继续选课" : type == 2 ? "继续选题" : type == 3 ? "继续选购" :"";
					}
					
				} else {
					this.hasPaying = false;
					this.btnNo = false
					this.showConfirmButton = false;
					this.modalMsg = res.data.msg;
					this.showModal = true;
				}
		},
		h5_wxpay(data) {
			function onBridgeReady() {
				// 加载框
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						'appId': data.appId, // 公众号名称，由商户传入
						'timeStamp': data.timeStamp, // 时间戳，自1970年以来的秒数
						'nonceStr': data.nonceStr, // 随机串
						'package': data.package,
						'signType': data.signType, // 微信签名方式：
						'paySign': data.paySign // 微信签名
					},
					function(res) {
						// 判断支付状态
						console.log('支付状态',res)
						if (res.err_msg === 'get_brand_wcpay_request:ok') {
							this.$u.toast('支付成功')
							uni.hideLoading()
							this.btnNo = false
							uni.redirectTo({
								url: `/pages2/order/confirm_success?sn=${data.orderSn}&isBk=${this.isBK}`
							});
						} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
							this.$u.toast('取消支付')
						} else {
							uni.hideLoading()
							this.btnNo = false
							this.$u.toast('支付失败')
						}
					}
				)
			}
			if (typeof WeixinJSBridge === 'undefined') {
				if (document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
				} else if (document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
					document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
				}
			} else {
				onBridgeReady()
			}
		},
		modalCancel() {
			this.showModal = false;
		},
		modalConfirm() {
			if(this.hasPaying) {
				uni.navigateTo({
					url:'/pages2/order/index?current=0'
				})
			} else {
				if(this.fromCart) {
					
					uni.navigateTo({
						url:'/pages4/shopping/shoppingCart'
					})
				} else {
					
					uni.switchTab({
						url:'/pages/course/index'
					})
				}
			}
			
		},
		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
			// #ifdef MP-WEIXIN
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log(loginRes,69)
					self.getOpenid(loginRes.code)
					
				}
			}); 
			// #endif
			
			// #ifdef H5
			// 在首页已经请求过接口/gzh_login 提交code了
			this.postOrder()
			// #endif
		},
		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 lang="scss" 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%;
		height: 886rpx;
		background: #FFFFFF;
		// border-radius: 16rpx;
		margin-top: 16rpx;
		padding: 32rpx 32rpx 0rpx 32rpx;
	}
	.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: 32rpx;
		font-weight: bold;
		color: #FF2D55;
	}
	.txt_left{
		font-size: 28rpx;
		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: 110rpx;
		align-items: center;
	}
	.title2{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		// height: 80rpx;
		// line-height: 80rpx;
		// margin-left: 30rpx;
		margin-bottom: 32rpx;
	}
	.box2{
		width: 100%;
		background: #FFFFFF;
		// border-radius: 16rpx;
		padding: 32rpx 32rpx 0rpx 32rpx;
		.right_con {
			width: 450rpx;
		}
		.priceTag{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FC3F3F;
			margin-top: 6rpx;
			margin-bottom: 16rpx;
		}
		.info_right {
			height: 110rpx;
			line-height: 110rpx;
			border-top: 1rpx solid #F2F2F2;
		}
	}
	.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;
	}
	.bottomBox{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 132rpx ;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: unset;
		box-shadow: 0px -2px 6px 0px rgba(0,0,0,0.1000);
		>view{
			margin: 0 30rpx;
		}
		.sums {
			display: flex;
		}
		.all_sum {
			font-size: 28rpx;
			font-weight: 500;
			color: #303030;
		}
		.priceTag {
			font-size: 32rpx;
			font-weight: 800;
			color: #FC3F3F;
		}
		.btn2{
			width: 232rpx;
			height: 92rpx;
			background: #FC3F3F;
			border-radius: 120rpx;
			text-align: center;
			line-height: 92rpx;
			color: #fff;
		}
	}
</style>