saas_miniprogram/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>
							<Class-time-tip v-if="item.gradObj && item.gradObj.gradeId"
								:classInfo="item.gradObj"></Class-time-tip>
						</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="box4" v-if="shoppingCartList.some(i => i.mailSign == 1)">
				<view style="font-weight: bold;font-size: 28rpx;">
					收件信息
				</view>
					<u-form :model="ruleForm" ref="ruleForm" label-position="top">
						<u-form-item required label="收件人" prop="consignee">
							<u-input v-model="ruleForm.consignee" />
						</u-form-item>
						<u-form-item required label="手机号码" prop="consigneePhone">
							<u-input v-model="ruleForm.consigneePhone" />
						</u-form-item>
						<u-form-item required label="收件地址" prop="consigneeSite">
							<u-input v-model="ruleForm.consigneeSite" />
						</u-form-item>
					</u-form>
				</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">
				<button class="btn2" @click="pay()" :disabled="btnNo">确认支付</button>
			</view>
		</view>

		<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 {
		tenantId
	} from "@/common/request.js";
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getQueryString
	} from "../../common/navTo";
	import ClassTimeTip from "../../components/common/ClassTimeTip.vue";
	export default {
		data() {
			const validateTel = (rule, value, callback) => {
				var reg = /^1[345789][0-9]{9}$/;
				if (!reg.test(value)) {
					return callback(new Error("请输入正确手机号码"));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					consignee: '',
					consigneePhone: '',
					consigneeSite: '',
				},
				rules: {
					consignee: [{
						required: true,
						message: '请输入收件人',
						trigger: 'blur'
					}],
					consigneePhone: [{
						required: true,
						validator: validateTel,
						trigger: 'blur'
					}],
					consigneeSite: [{
						required: true,
						message: '请输入收件地址',
						trigger: 'blur'
					}],
				},
				showModal: false,
				modalMsg: "",
				list: [{
						name: "网课",
					},
					{
						name: "题库通",
					},
				],
				array: [
					"全部",
					"建设工程施工管理",
					"机电全科",
					"机电工程管理与实",
					"机电全科",
					"全科",
				],
				current: 0,
				menuIndex: 0,
				value: "wepay",
				btnNo: false,
				isBK: "",
				fromCart: "",
				hasPaying: false,
				showConfirmButton: false,
				confirmText: "",
				options: {},
			};
		},
		onPullDownRefresh() {},
		onLoad(option) {
			this.fromCart = option.fromCart;
			this.isBK = option.isBK;
			this.options = option;
			this.ruleForm.consignee = this.$store.state.userInfo.realname || "";
			this.ruleForm.consigneePhone =
				this.$store.state.userInfo.telphone || "";
			this.ruleForm.consigneeSite = "";
		},
		onShow() {
			console.log(process.env, 'env')
			// #ifdef H5
			this.authorize();
			// #endif
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			if (this.shoppingCartList.some(i => i.mailSign == 1)) {
				this.$refs.ruleForm.setRules(this.rules);
			}
		},
		methods: {
			...mapActions(["getUserInfo"]),
			authorize() {
				console.log("process.env", process.env)
				if (location.search.includes("code")) {
					const code = getQueryString("code");
					this.$store.commit("setShoppingCartList", {
						shoppingCartList: uni.getStorageSync("shopList"),
					});
					uni.setStorageSync("h5_code", code);
					this.OfficialLogin(code);
				} else {
					// 没有code,就重定向到地址https://www.xyyxt.net?ask_type=https://api.xyyxt.net/pages2/order/confirm_pay 去获取code，授权后就会把code带上然后访问域名
					// ?fromCart=&code=061F5a1w3aolh03SLe1w3sMsCF4F5a16&state=STATE
					this.$api.checkBindGzh().then((res) => {
						// && process.env.NODE_ENV !== "development"
						if (!res.data.data) {
							uni.setStorageSync("shopList", this.shoppingCartList);
							const url = window.location.host + "/pages2/order/confirm_pay";
							// 跳自己授权
							if (this.config.gzhSelfLicense) {
								uni.request({
									url: `https://cloud.xyyxt.net/app/common/wx/config`,
									method: "get",
									data: {},
									header: {
										TenantId: tenantId,
									},
									success: (res) => {
										location.replace(
											`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
				        res.data.data.gzhAppId
				      }&redirect_uri=${encodeURIComponent(
				        "https://" + url
				      )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
										);
									},
									fail: (err) => {
										uni.showToast({
											title: "请求接口失败",
											icon: "none",
										});
									},
								});


								// this.$api.getWxConfig().then((res) => {
								//   location.replace(
								//     `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
								//       res.data.data.gzhAppId
								//     }&redirect_uri=${encodeURIComponent(
								//       "https://" + url
								//     )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
								//   );
								// });
							} else {
								location.replace("https://www.xyyxt.net/?ask_type=" + url);
							}
						}
					});
				}
			},
			OfficialLogin(code) {
				this.$api
					.OfficialLogin({
						code,
					})
					.then((res) => {
						if (res.data.code !== 200) {
							this.$u.toast(res.data.msg);
						}
					});
			},
			// 二建 && 七大员 需要先完善信息
			async checkNeedInfo() {
				let keys = [];
				this.shoppingCartList.forEach((item) => {
					if (item.erJianErZao) {
						keys.push("realname", "idCard");
					}
					if (item.jjShiGongYuan && item.sevenYear != '2021' && item.sevenYear != '2022') {
						keys.push("realname", "idCard", "sex", "companyName", "eduLevel");
					}
				});
				if (keys.length) {
					if (!this.userInfo) await this.getUserInfo();
					if (keys.some((key) => !this.userInfo[key])) {
						uni.showModal({
							title: "提示",
							content: "请先完善个人信息！",
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages2/verify/info_fill?keys=" +
											Array.from(new Set(keys)).toString(),
									});
								}
							},
						});
						return false;
					}
				}
				return true;
			},
			async 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;
						}
					}
					if (this.options.distributionCode) {
						item.distributionLinkCode = this.options.linkCode;
						item.distributionCode = this.options.distributionCode;
					}
				}
					  
				list = list.map(i => {
					if (i.mailSign == 1) {
						let ij = JSON.parse(JSON.stringify(i))
						return {...this.ruleForm,...ij}
					} else {
						return i;
					}
				});
				let data = {
					goodsList: list
				};
				// 邀请码
				if (this.sac) {
					data["shareActivityCode"] = this.sac;
				}

				// #ifdef MP-WEIXIN
				this.$api.placeSmallOrder(data).then((res) => {
					this.orderResult(res);
				});
				// #endif

				// #ifdef H5
				data["url"] = location.href;
				this.$api.placeGzhOrder(data).then((res) => {
					console.log(res, "h5支付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 || type == 8 ?
							"继续选购" :
							"";
					}
				} else {
					this.hasPaying = false;
					this.btnNo = false;
					this.showConfirmButton = false;
					this.modalMsg = res.data.msg;
					this.showModal = true;
				}
			},
			h5_wxpay(data) {
				console.log("====调起支付状态", data);
				let self = this;

				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, "this:", this, self);
							if (res.err_msg === "get_brand_wcpay_request:ok") {
								self.$u.toast("支付成功");
								uni.hideLoading();
								self.btnNo = false;
								uni.redirectTo({
									url: `/pages2/order/confirm_success?sn=${data.orderSn}&isBk=${self.isBK}`,
								});
							} else if (res.err_msg === "get_brand_wcpay_request:cancel") {
								self.$u.toast("取消支付");
							} else {
								uni.hideLoading();
								self.btnNo = false;
								self.$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 {
						if (this.shoppingCartList[0].goodsType == 8) {
							this.$store.state.current = 3
							uni.switchTab({
								url: '/pages/course/index'
							});
							// uni.reLaunch({
							//   url: "/pages/information/index",
							// });
							return;
						}
						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();
					}
				});
			},
			async pay() {
				if (this.shoppingCartList.some(i => i.mailSign == 1)) {
					var DontStatus = false;
					this.$refs.ruleForm.validate(valid => {
						if (valid) {
							DontStatus = false;
							console.log('验证通过');
						} else {
							DontStatus = true;
							console.log('验证失败');
							return
						}
					});
					if (DontStatus) return
				}
				if (!(await this.checkNeedInfo())) {
					return;
				}
				let self = this;
				this.btnNo = true;
				// #ifdef MP-WEIXIN
				uni.login({
					provider: "weixin",
					success: function(loginRes) {
						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", "sac", "config"]),
			totalPrice() {
				return this.shoppingCartList.reduce(
					(a, b) => a + Number(b.standPrice),
					0
				);
			},
		},
		components: {
			ClassTimeTip
		},
	};
</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;
	}

	.box4 {
		width: 100%;
		background: #ffffff;
		// border-radius: 16rpx;
		margin-top: 16rpx;
		padding: 32rpx 32rpx 0rpx 32rpx;
	}

	.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: 10rpx;
		}

		.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.1);

		>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>