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 96rpx;">
			<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-price">¥ {{ items.goodsRealPrice }}</view>
									</view>
								</view>
								<view style="display: flex;flex-direction: row-reverse;padding: 10rpx 0;">
									<view class="btn2" v-if="items.refundStatus === 0&&item.orderFrom === 2&&(item.orderStatus === 1 || item.orderStatus === 2 || item.orderStatus === 3)&&(items.goodsType == '1' || items.goodsType == '2')" @click.stop="refund(item.orderSn,items.goodsId)">退款</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>
								<text style="color: #333;font-size: 30rpx;font-weight: bold;">合计</text>
								<text style="color:#ff2d55;font-size: 30rpx;font-weight: bold;">￥{{ item.payPrice }}</text>
							</view>
							<view style="display: flex;align-items: center;">
								<view class="btn2" v-if="item.orderStatus === 0&&item.orderFrom === 2" @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" @click="delOrder(item)">删除订单</view>
								<view class="btn1" @click="closeOrder(item)" v-if="item.orderStatus === 0">取消订单</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			

			<template v-if="current == 1 && order.length">
				<view class="apply-invoice" @click="goInvoice">发票申请</view>
			</template>
			
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			list: [
				{
					name: '待支付',
					count: 0
				},
				{
					name: '已支付',
					count: 0
				},
				{
					name: '已取消',
					count: 0
				},
				{
					name: '已退款',
					count: 0
				}
			],
			current: 0,
			order: [],
			formData: {
				status: '0,1',
				pageNum: 1,
				pageSize: 5
			},
			pageNum1: 0,
			pageNum2: 0,
			pageNum3: 0,
			pageNum4: 0
		};
	},
	// onPullDownRefresh() {},
	onLoad(option) {
		this.current = +option.current || 0;
		this.getOrderList();
		this.getOrderNum();
		console.log(this.current)
	},
	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: {
		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'
			}).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,4'
			}).then(res => {
				if (res.data.code === 200) {
					this.list[2].count = res.data.total;
					
				}
			});
		},
		/**
		 * 跳转发票申请页面
		 */
		goInvoice() {
			uni.navigateTo({
				url:`/pages2/invoice/index`
			})
		},
		refund(orderSn,goodsId){
			uni.showModal({
				title:'提示',
				content:'确定要退款吗',
				success:(res) => {
					if(res.confirm) {
						let self = this
						this.$api.refundSmallOrder({orderSn:orderSn,goodsId:goodsId}).then(res => {
							if(res.data.code==200){
								if (res.data.code === 200) {
									self.$method.showToast('退款成功');
									self.getOrderList();
								}
							} else {
								uni.showToast({
									icon:'none',
									title:'不可以退款哦'
								})
							}
						});
					}
				}
			})
			
		},
		/**
		 * 跳转课程
		 */
		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
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log(loginRes,69)
					self.getOpenid(loginRes.code,item)
					
				}
			}); 
		},
		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}
			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
					})
				}
			});
		},
		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';
				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';
			}
			if (this.current === 2) {
				this.formData.orderStatus = '-1,-2,4';
			}
			
			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;
				}
			});
		},
		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;
			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: 134rpx;
				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-invoice {
	z-index: 100;
	position:fixed;
	left:0;
	right:0;
	bottom:40rpx;
	margin:0 auto;
	width: 526rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	color:#fff;
	background: #007AFF;
	box-shadow: 0rpx 8rpx 7rpx 1rpx rgba(0, 122, 255, 0.1);
	border-radius: 40rpx;
}


.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;
}
</style>