zc_saas_h5/pages2/order/index.vue

<template>
	<view>
		<nav-bar title="我的订单"></nav-bar>
		<view style="
        width: 100%;
        text-align: center;
        position: fixed;
        height: 96rpx;
        z-index: 999;
      ">
			<u-tabs :list="list" sticky :current="current" @change="change" active-color="#007AFF"
				:offset="[-1, 0]"></u-tabs>
		</view>
		<view style="padding: 96rpx 8rpx 130rpx">
			<view v-if="!order.length" class="noData">您暂无相关订单哦~</view>
			<template v-else>
				<view v-for="(item, index) in order" :key="index" class="lisChild">
					<view class="item">
						<view class="header" @click="openPopup(index)">
							<view>订单编号：{{ item.orderSn }}</view>
							<view>{{ $method.timestampToTime(item.createTime) }}</view>
						</view>
						<u-line color="#D6D6DB" />
						<view v-if="current == 3">
							<view class="body">
								<view class="body__content">
									<image class="goods-img" :src="$method.splitImgHost(item.coverUrl)"></image>
									<view class="goods-text">
										<view class="goods-name">{{ item.goodsName }}</view>
										<!-- <view class="goods-price">¥ {{ items.goodsRealPrice }}</view> -->
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="body" v-for="(items, indexs) in item.orderGoodsList" :key="indexs"
								@click="goCourse(items, item.orderStatus)">
								<view class="body__content">
									<image class="goods-img" :src="$method.splitImgHost(items.coverUrl)"></image>
									<view class="goods-text">
										<view class="goods-name">{{ items.goodsName }}</view>
										<view class="goods-name" v-if="items.sevenYear">{{
                      items.sevenYear
                    }}</view>
										<view v-if="item.orderFrom !== 6" class="goods-price">¥
											{{ items.goodsRealPrice }}
										</view>
									</view>
								</view>
								<view style="
                    display: flex;
                    flex-direction: row-reverse;
                    padding: 10rpx 0;
                  ">
									<view v-if="
                      items.refundStatus === 0 &&
                      (item.orderFrom === 2 || item.orderFrom === 3) &&
                      (item.orderStatus === 1 ||
                        item.orderStatus === 2 ||
                        item.orderStatus === 3) &&
                      (items.goodsType == '1' ||
                        items.goodsType == '2' ||
                        items.goodsType == '3' ||
                        items.goodsType == '6') &&
                      items.goodsPrice > 0
                    " class="btn2" @click.stop="handelRefund(item.orderSn, items)">申请退款</view>
									<!-- <view v-if="items.refundStatus == 2"> 已退款</view> -->
									<view v-if="items.periodStatus !== null">{{
                    [
                      "复审不通过",
                      "初审不通过",
                      "待审核",
                      "初审通过",
                      "复审通过待退款",
                      "已退款",
                    ][items.periodStatus + 2]
                  }}</view>
								</view>
							</view>
						</view>

						<u-line color="#D6D6DB" />
						<view class="footer" v-if="current == 3">
							<view>
								<text style="color: #999; font-size: 24rpx; margin-right: 8rpx">退款金额</text>
								<text
									style="color: #ff2d55; font-size: 30rpx; font-weight: bold">￥{{ item.refundFee }}</text>
							</view>
						</view>
						<view class="footer" v-else>
							<view>
								<text
									style="color: #999; font-size: 24rpx; margin-right: 8rpx">共{{ item.orderGoodsList.length }}项</text>
								<!-- 业务系统下单的需要隐藏价格 -->
								<!-- 订单来源：1业务员普通单，2祥粤云学堂小程序，3祥粤云学堂网站，4祥粤e管证小程序，5业务员录单，6业务系统下单 -->
								<text v-if="item.orderFrom !== 6">
									<text style="color: #333; font-size: 30rpx; font-weight: bold">合计</text>
									<text
										style="color: #ff2d55; font-size: 30rpx; font-weight: bold">￥{{ item.payPrice }}</text>
								</text>
							</view>
							<view style="display: flex; align-items: center">
								<view class="btn2" v-if="
                    item.orderStatus === 0 &&
                    (item.orderFrom === 2 || item.orderFrom === 3)
                  " @click="resumeOrder(item)">继续支付</view>
								<!-- <view class="btn2" v-if="item.orderStatus === -1 || item.orderStatus === -2" @click="againBuy(item)">重新购买</view> -->
								<view class="btn1" v-if="
                    (item.orderStatus === -1 || item.orderStatus === -2) &&
                    (item.orderFrom === 2 || item.orderFrom === 3)
                  " @click="delOrder(item)">删除订单</view>
								<view class="btn1" @click="closeOrder(item)" v-if="
                    item.orderStatus === 0 &&
                    (item.orderFrom === 2 || item.orderFrom === 3)
                  ">取消订单</view>
							</view>
						</view>
					</view>
				</view>
			</template>

			<template v-if="current == 1 && order.length">
				<view class="apply_btn">
					<view class="apply-invoice" @click="goInvoice">发票申请</view>
				</view>
			</template>
		</view>
		<!-- 退款弹窗 -->
		<u-popup v-model="show" :mask-close-able="false" closeable mode="center" width="80%" border-radius="24">
			<view class="rf-popup-main">
				<view class="title">确认要退款吗</view>
				<u-select v-model="showConfirm" mode="single-column" :list="refundList"
					:default-value="[refundForm.applyReasonIndex-1]" @confirm="confirm"></u-select>
				<view @click="showConfirm = true" class="btn_refund">
					{{refundForm.applyReasonIndex?refundList[refundForm.applyReasonIndex-1].label:'选择退款原因'}}
				</view>
				<u-input v-if="refundForm.applyReasonIndex == 5" v-model.trim="refundForm.applyReason"
					placeholder-style="color:#999999" placeholder="输入退款原因" class="applyInput" />
				<u-button type="primary" style="border-radius: 60rpx;" @click="refund">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {},
		data() {
			return {
				showConfirm: false,
				refundList: [{
						label: "已学过，重复报名",
						value: 1
					},
					{
						label: "报错专业/课程",
						value: 2
					},
					{
						label: "班级未开班",
						value: 3
					},
					{
						label: "培训/继教周期未到",
						value: 4
					},
					{
						label: "其他",
						value: 5
					}
				],
				list: [{
						name: "待支付",
						count: 0,
					},
					{
						name: "已支付",
						count: 0,
					},
					{
						name: "已取消",
						count: 0,
					},
					{
						name: "已退款",
						count: 0,
					},
				],
				current: 0,
				order: [],
				formData: {
					status: "0,1",
					pageNum: 1,
					pageSize: 10,
				},
				pageNum1: 0,
				pageNum2: 0,
				pageNum3: 0,
				pageNum4: 0,
				refundForm: {},
				show: false,
				value: "",
			};
		},
		// onPullDownRefresh() {},
		onLoad(option) {
			this.current = +option.current || 0;
			this.getOrderList();
			this.getOrderNum();
		},
		onShow() {
			/* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
		},
		//分享功能
		onShareAppMessage(res) {
			var self = this;
			return {
				title: "中正",
				path: `/pages/index/index?inviteCode=` + userInfo == null ?
					"" : userInfo.userAccount,
			};
		},
		onReachBottom() {
			this.formData.pageNum++;
			this.getFY();
		},
		methods: {
			confirm(e) {
				this.refundForm.applyReasonIndex = e[0].value
				this.refundForm.applyReason = ''
			},
			getOrderNum() {
				this.$api
					.getorderlists({
						status: "0,1",
						pageNum: 1,
						pageSize: 1,
						orderStatus: "0",
					})
					.then((res) => {
						if (res.data.code === 200) {
							this.list[0].count = res.data.total;
						}
					});

				this.$api
					.getorderlists({
						status: "0,1",
						pageNum: 1,
						pageSize: 1,
						orderStatus: "1,2,3,4",
					})
					.then((res) => {
						if (res.data.code === 200) {
							this.list[1].count = res.data.total;
						}
					});

				this.$api
					.getorderlists({
						status: "0,1",
						pageNum: 1,
						pageSize: 1,
						orderStatus: "-1,-2",
					})
					.then((res) => {
						if (res.data.code === 200) {
							this.list[2].count = res.data.total;
						}
					});
			},
			/**
			 * 跳转发票申请页面
			 */
			goInvoice() {
				uni.navigateTo({
					url: `/pages2/invoice/index`,
				});
			},
			handelRefund(orderSn, item) {
				this.refundForm = {
					orderSn: orderSn,
					goodsId: item.goodsId,
					orderGoodsId: item.orderGoodsId,
					applyReasonIndex: "",
					applyReason: "",
				};
				this.show = true;
			},
			refund() {
				if (!this.refundForm.applyReasonIndex) {
					uni.showToast({
						title: "请选择退款原因"
					})
					return
				} else if (this.refundForm.applyReasonIndex == 5 && !this.refundForm.applyReason) {
					uni.showToast({
						title: "请输入退款原因"
					})
					return
				}
				this.refundForm.applyReason = this.refundForm.applyReasonIndex == 5 ? this.refundForm.applyReason : this
					.refundList[this.refundForm.applyReasonIndex - 1].label
				delete this.refundForm.applyReasonIndex
				this.$api.refundSmallOrder(this.refundForm).then((res) => {
					this.show = false;
					if (res.data.code == 200) {
						this.$method.showToast(res.data.msg);
						this.getOrderList();
					} else {
						uni.showToast({
							icon: "none",
							title: res.data.msg,
						});
					}
				});
			},
			/**
			 * 跳转课程
			 */
			goCourse(item, orderStatus) {
				// if(orderStatus == 1 || orderStatus == 2) {
				// 	console.log(item)
				// 	if(item.goodsType == 1) { //网课
				// 		uni.navigateTo({
				// 			url:'/pages2/wd/course?gid='+item.gradeId+'&id='+item.goodsId
				// 		})
				// 	} else if(item.goodsType == 2) { //题库
				// 		uni.navigateTo({
				// 			url:'/pages2/bank/question_detail?id='+item.goodsId
				// 		})
				// 	}
				// }
			},
			resumeOrder(item) {
				let self = this;
				// #ifdef MP-WEIXIN
				uni.login({
					provider: "weixin",
					success: function(loginRes) {
						console.log(loginRes, 69);
						self.getOpenid(loginRes.code, item);
					},
				});
				// #endif

				// #ifdef H5
				// 在首页已经请求过接口/gzh_login 提交code了
				this.resumeOrderPay(item);
				// #endif
			},
			getOpenid(code, item) {
				let self = this;
				this.$api.wxOpenid({
					code: code
				}).then((res) => {
					if (res.data.code == 200) {
						self.resumeOrderPay(item);
					}
				});
			},
			resumeOrderPay(item) {
				let data = {
					orderSn: item.orderSn
				};
				// #ifdef MP-WEIXIN
				this.$api.resumeSmallOrder(data).then((res) => {
					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,
						});
					}
				});
				// #endif

				// #ifdef H5
				data["url"] = location.href;
				this.$api.resumePlaceGzhOrder(data).then((res) => {
					console.log(res, "继续支付res");
					if (res.data.code == 200) {
						this.h5_wxpay(res.data.data);
					} else {
						uni.showModal({
							title: "提示",
							content: res.data.msg,
							showCancel: false,
						});
					}
				});
				// #endif
			},
			h5_wxpay(data) {
				console.log("调起支付状态1", 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.redirectTo({
									url: "/pages2/order/confirm_success?sn=" + data.orderSn,
								});
							} else if (res.err_msg === "get_brand_wcpay_request:cancel") {
								self.$u.toast("取消支付");
							} else {
								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();
				}
			},
			openPopup() {},
			//删除订单
			delOrder(item) {
				var self = this;
				uni.showModal({
					content: "确定要删除该订单吗",
					success: function(res) {
						if (res.confirm) {
							self.$api
								.eddOrder({
									orderId: item.orderId,
									status: -1,
								})
								.then((res) => {
									if (res.data.code === 200) {
										self.$method.showToast("订单删除成功");
										self.getOrderList();
									}
								});
						}
					},
				});
			},
			//取消订单
			closeOrder(item) {
				var self = this;
				uni.showModal({
					content: "确定要取消该订单吗",
					success: function(res) {
						if (res.confirm) {
							self.$api
								.eddOrder({
									orderId: item.orderId,
									orderStatus: -1,
								})
								.then((res) => {
									if (res.data.code === 200) {
										self.$method.showToast("订单取消成功", "success");
										self.getOrderList();
									}
								});
						}
					},
				});
			},
			getFY() {
				if (this.current === 0) {
					this.formData.orderStatus = "0";
					if (this.order.length >= this.pageNum1) {
						return;
					}
				}
				if (this.current === 1) {
					this.formData.orderStatus = "1,2,3,4";
					if (this.order.length >= this.pageNum2) {
						return;
					}
				}
				if (this.current === 2) {
					this.formData.orderStatus = "-1,-2";
					if (this.order.length >= this.pageNum3) {
						return;
					}
				}

				if (this.current == 3) {
					if (this.order.length >= this.pageNum4) {
						return;
					}

					this.formData.orderStatus = "";
					this.$api.orderRefundList(this.formData).then((res) => {
						if (res.data.code == 200) {
							this.order = this.order.concat(res.data.rows);
						}
					});
					return;
				}
				this.$api.getorderlists(this.formData).then((res) => {
					if (res.data.code === 200) {
						if (res.data.rows.length) {
							this.order = this.order.concat(res.data.rows);
						}
					}
				});
			},
			//获取订单
			getOrderList() {
				this.formData.pageNum = 1;
				if (this.current === 0) {
					this.formData.orderStatus = "0";
				}
				if (this.current === 1) {
					this.formData.orderStatus = "1,2,3,4";
				}
				if (this.current === 2) {
					this.formData.orderStatus = "-1,-2";
				}

				this.order = [];
				this.$api.getorderlists(this.formData).then((res) => {
					if (res.data.code === 200) {
						if (this.current === 0) {
							this.list[0].count = res.data.total;
							this.pageNum1 = res.data.total;
						}
						if (this.current === 1) {
							this.list[1].count = res.data.total;
							this.pageNum2 = res.data.total;
						}
						if (this.current === 2) {
							this.list[2].count = res.data.total;
							this.pageNum3 = res.data.total;
						}
						this.order = res.data.rows;
						console.log("订单列表this.order", this.order);
					}
				});
			},
			orderRefundList() {
				this.order = [];
				this.formData.pageNum = 1;
				this.formData.orderStatus = "";
				this.$api.orderRefundList(this.formData).then((res) => {
					if (res.data.code == 200) {
						this.order = res.data.rows;
					}
				});
			},
			change(index) {
				if (this.current === index) {
					return;
				}
				this.current = index;
				console.log("this.current", this.current);
				if (this.current == 3) {
					//退款订单
					this.formData.status = "";
					this.orderRefundList();
				} else {
					//其他订单

					this.formData.status = "0,1";
					this.getOrderList();
				}

				uni.pageScrollTo({
					scrollTop: 0,
				});
			},
		},
		computed: {
			...mapGetters(["userInfo"])
		},
	};
</script>
<style>
	page {
		background: #eaeef1;
	}
</style>
<style scoped lang="scss">
	.lisChild {
		border-radius: 16rpx;
		margin-bottom: 16rpx;
		background: #fff;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			padding: 0 15rpx;
			color: #666666;
			font-size: 24rpx;
		}

		.body {
			padding: 16rpx;

			&__content {
				display: flex;
				justify-content: space-between;

				.goods-img {
					height: 156rpx;
					width: 278rpx;
					border-radius: 16rpx;
					flex-shrink: 0;
				}

				.goods-text {
					margin-left: 20rpx;
					flex: 1;
					display: flex;
					flex-direction: column;

					.goods-name {
						color: #333333;
						font-size: 30rpx;
						font-weight: bold;
						flex: 1;
					}

					.goods-price {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ff2d55;
						display: flex;
						flex-direction: row-reverse;
					}
				}
			}

			.btn2 {
				width: 144rpx;
				height: 46rpx;
				background: #ffffff;
				border: 2rpx solid #007aff;
				border-radius: 16rpx;
				text-align: center;
				line-height: 48rpx;
				color: #007aff;
				margin: 0 8rpx;
			}
		}

		.footer {
			padding: 0 24rpx;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn2 {
				width: 144rpx;
				height: 46rpx;
				background: #ffffff;
				border: 2rpx solid #007aff;
				border-radius: 16rpx;
				text-align: center;
				line-height: 48rpx;
				color: #007aff;
				margin: 0 8rpx;
			}

			.btn1 {
				width: 144rpx;
				height: 48rpx;
				background: #ffffff;
				border: 2rpx solid #999999;
				border-radius: 16rpx;
				text-align: center;
				line-height: 48rpx;
				color: #999999;
				margin: 0 8rpx;
			}
		}
	}

	.lisChild:last-child {
		margin-bottom: 34rpx;
	}

	.noData {
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin: 160rpx 0;
	}

	.apply_btn {
		width: 100%;
		height: 124rpx;
		background: #ffffff;
		box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0rpx;
	}

	.apply-invoice {
		margin: 0 auto;
		width: 686rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		background: #0080ff;
		margin-top: 20rpx;
		border-radius: 120rpx;
	}

	.bottomBox {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 98rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}

	.rf-popup-main {
		text-align: center;
		padding: 40rpx;

		.title {
			font-size: 40rpx;
			font-weight: 600;
		}

		.tip {
			margin: 30rpx 0 40rpx;
			font-size: 32rpx;
		}

		.u-input {
			border-radius: 20rpx;
			background: #eee;
			padding-left: 20rpx !important;
			margin-bottom: 40rpx;
		}

		.u-button {
			border-radius: 60rpx !important;
		}
	}

	.btn_refund {
		border: 1rpx solid #999;
		border-radius: 8rpx;
		padding: 20rpx;
		margin: 20rpx 0rpx;
	}

	.applyInput {
		display: flex;
		padding: 0rpx 10rpx;
		margin-bottom: 10rpx;
		border: 1rpx solid #999;
		border-radius: 8rpx;
	}
</style>