ryx/pages/order/order.vue

<template>
	<view class="">
		<u-sticky bgColor="#fff">
			<view class="tab">
				<u-tabs :list="list1" :activeStyle="{color: '#1E9F6A'}" lineColor="#1E9F6A" lineWidth="50"
					:scrollable="false" @click="clickTab" :current="current"></u-tabs>
			</view>
		</u-sticky>
		<!-- <view class="list" @click="goOrderDetail">
			<view class="list-top">
				<view class="">
					订单号xxxxx
				</view>
				<view class="">
					待付款
				</view>
			</view>
			<view class="" style="margin: 20rpx 0;">
				套餐名称xxxx
			</view>
			<view class="">
				出行日期：2022.5.1
			</view>
			<view class="amount">
				<view class="">
					数量 ： 1
				</view>
				<view class="">
					<view class="">
						￥xx
					</view>
				</view>
			</view>
			<view class="list-bottom">
				<view class="">
					出行人
				</view>
				<view class="">
					去支付
				</view>
				<view class="" @click="goaggMes">
					集合信息
				</view>
			</view>
		</view> -->

		<view class="list" v-for="(item,index) in orderList" :key="index" @click="goOrderDetail(item.id)"
			v-if="state!=5">
			<view class="list-top">
				<view class="flexall">

					订单号 {{item.code}}
					<view style="padding-left: 5rpx;" @click.stop="copyCode(item.code)">
						<u-icon name="file-text"></u-icon>
					</view>
				</view>
				<view class="">
					<!-- 待付款 -->{{item.status_text}}
				</view>
			</view>
			<view class="listcenter">
				<view class="l">
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						{{item.good_name}}
					</view>
					<view class="" style="margin: 28rpx 0 20rpx;">
						日期：{{item.start_at.slice(0,10)}} ~ {{item.end_at.slice(0,10)}}
					</view>
					<view class="">
						数量 ： {{item.number}}
					</view>
				</view>
				<view class="r">
					<view class="">
						<image :src="item.cover_picture"></image>
					</view>
					<view class="">
						订单金额
					</view>
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						￥{{item.amount}}
					</view>
				</view>
			</view>

			<view class="list-bottom">
				<view class="list-bottom-item" v-if="item.status==4||item.status==5||item.status==3"
					@click.stop="buyAgin(item.good_id)">
					<image src="../../static/orderListicon/notepad@2x.png" mode="aspectFill"></image>
					<text class="">
						再次预订
					</text>
				</view>
				<view class="list-bottom-item" v-if="item.status==1" @click.stop="goPay(item.id)">
					<image src="../../static/orderListicon/notepad@2x.png" mode="aspectFill"></image>
					<text class="">
						去支付
					</text>
				</view>
				<view class="list-bottom-item" v-if="item.status==2&&item.refund_status==0"
					@click.stop="goAfterSale(item)">
					<image src="../../static/orderListicon/notepad@2x.png" mode="aspectFill"></image>
					<text class="">
						申请退款
					</text>
				</view>
				<view class="list-bottom-item" v-if="item.status==2&&item.refund_status!==0">
					<image src="../../static/orderListicon/notepad@2x.png" mode="aspectFill"></image>
					<text class="">
						已申请退款
					</text>
				</view>
				<view class="line" v-if="item.status==1||item.status==2">
				</view>
				<view class="list-bottom-item" @click.stop="goguide(item)" v-if="item.status==1||item.status==2">
					<image src="../../static/orderListicon/bookmark@2x(1).png" mode="heightFix"></image>
					<text class="">
						专属森林向导
					</text>
				</view>
			</view>
		</view>

		<view class="list" v-for="(item,index) in orderList" :key="index" @click.stop="orderSaleDetail(item.id)"
			v-if="state==5">
			<view class="list-top">
				<view class="flexall">

					订单号 {{item.order.code}}
					<view style="padding-left: 5rpx;" @click.stop="copyCode(item.code)">
						<u-icon name="file-text"></u-icon>
					</view>
				</view>
				<view class="">
					<!-- 待付款 -->{{item.status_text}}
				</view>
			</view>
			<view class="listcenter">
				<view class="l">
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						{{item.order.good_name}}
					</view>
					<view class="" style="margin: 28rpx 0 20rpx;">
						日期：{{item.order.start_at.slice(0,10)}} ~ {{item.order.end_at.slice(0,10)}}
					</view>
					<view class="">
						数量 ： {{item.order.number}}
					</view>
				</view>
				<view class="r">
					<view class="">
						<image :src="item.order.cover_picture"></image>
					</view>
					<view class="">
						订单金额
					</view>
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						￥{{item.order.amount}}
					</view>
				</view>
			</view>

			<view class="list-bottom">
				<view class="list-bottom-item" @click.stop="orderSaleDetail(item.id)">
					<image src="../../static/orderListicon/notepad@2x.png" mode="aspectFill"></image>
					<text class="">
						售后详情
					</text>
				</view>
			</view>
		</view>
		<view style="margin-top:140rpx;" v-if="orderList.length==0">
			<u-loadmore v-if="orderList.length==0" :status="nomore" fontSize="30" :line="true" nomoreText="暂无订单" />
		</view>

		<!-- 	<view class="list" v-if="state==2 || state==0?true:false" @click="goOrderDetail1">
			<view class="list-top">
				<view class="">
				订单号  RYX202213582
				</view>
				<view class="">
					待出行
				</view>
			</view>
			<view class="listcenter">
				<view class="l">
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						夕阳红康养团7日游
					</view>
					<view class="" style="margin: 28rpx 0 20rpx;">
						日期：2022-04-25 ~ 2022-05-01
					</view>
					<view class="">
						数量 ： 1
					</view>
				</view>
				<view class="r">
					<view class="">
						<image src="https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png" mode="widthFix"></image>
					</view>
					<view class="">
						订单金额
					</view>
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						￥1690
					</view>
				</view>
			</view>
			
			<view class="list-bottom">
				<view class="list-bottom-item" @click="goafter">
					<image src="../../static/orderListicon/login@2x.png" mode="heightFix"></image>
					<text class="">
						申请退款
					</text>
				</view>
				<view class="line">
				</view>
				<view class="list-bottom-item" @click="goguide">
					<image src="../../static/orderListicon/bookmark@2x(1).png" mode="heightFix"></image>
					<text class="">
						专属森林向导
					</text>
				</view>
			</view>
		</view>
		
		<view class="list" v-if="state==3 || state==0?true:false" >
			<view class="list-top">
				<view class="">
				订单号  RYX202213582
				</view>
				<view class="">
					已完成
				</view>
			</view>
			<view class="listcenter">
				<view class="l">
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						夕阳红康养团7日游
					</view>
					<view class="" style="margin: 28rpx 0 20rpx;">
						日期：2022-04-25 ~ 2022-05-01
					</view>
					<view class="">
						数量 ： 1
					</view>
				</view>
				<view class="r">
					<view class="">
						<image src="https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png" mode="widthFix"></image>
					</view>
					<view class="">
						订单金额
					</view>
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						￥1690
					</view>
				</view>
			</view>
			
			<view class="list-bottoms">
				<image src="../../static/orderListicon/notes-edit-add@2x.png" mode="heightFix"></image>
				<text class="">
					再次预定
				</text>
			</view>
		</view>
		
		<view class="list" v-if="state==4 || state==0?true:false" @click="goOrderAfterSale">
			<view class="list-top">
				<view class="">
				订单号  RYX202213582
				</view>
				<view class="">
					待退款
				</view>
			</view>
			<view class="listcenter">
				<view class="l">
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						夕阳红康养团7日游
					</view>
					<view class="" style="margin: 28rpx 0 20rpx;">
						日期：2022-04-25 ~ 2022-05-01
					</view>
					<view class="">
						数量 ： 1
					</view>
				</view>
				<view class="r">
					<view class="">
						<image src="https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png" mode="widthFix"></image>
					</view>
					<view class="">
						订单金额
					</view>
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						￥1690
					</view>
				</view>
			</view>
			
			<view class="list-bottoms">
				<image src="../../static/orderListicon/notes-edit-add@2x.png" mode="heightFix"></image>
				<text class="">
					售后详情
				</text>
			</view>
		</view>
		<view class="list" v-if="state==4 || state==0?true:false" @click="goOrderAfterSale1">
			<view class="list-top">
				<view class="">
				订单号  RYX202213582
				</view>
				<view class="">
					已退款
				</view>
			</view>
			<view class="listcenter">
				<view class="l">
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						夕阳红康养团7日游
					</view>
					<view class="" style="margin: 28rpx 0 20rpx;">
						日期：2022-04-25 ~ 2022-05-01
					</view>
					<view class="">
						数量 ： 1
					</view>
				</view>
				<view class="r">
					<view class="">
						<image src="https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png" mode="widthFix"></image>
					</view>
					<view class="">
						订单金额
					</view>
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
						￥1690
					</view>
				</view>
			</view>
			
			<view class="list-bottoms">
				<image src="../../static/orderListicon/notes-edit-add@2x.png" mode="heightFix"></image>
				<text class="">
					售后详情
				</text>
			</view>
		</view> -->
		<!-- <view v-show="nomore&&orderList.length>0" class="more"><text>暂无更多</text></view> -->
		<view class="" style="padding-top: 100rpx;width: 100%;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [

					{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '待出行'
					},
					{
						name: '已完成'
					},
					{
						name: '售后'
					},
				],
				// 订单状态（0全部 1待付款 2待出行 3已完成 4售后）
				state: 0,
				// 订单列表
				orderList: [],
				page: 1,
				nomore: false,
				current: 0
			}
		},
		onLoad(o) {
			if (o.state) {
				this.state = o.state
				if (this.state == 0) {
					this.current = 0
				} else if (this.state == 1) {
					this.current = 1
				} else if (this.state == 2) {
					this.current = 2
				} else if (this.state == 3) {
					this.current = 3
				}
			}
			this.init()
		},
		// 下拉到底部后加载新数据
		onReachBottom() {
			//判断下一页是否存在数据，不存在将显示暂无数据等提示语
			if (this.orderList.length >= this.page * 10) {
				this.page++; //页数加一

				this.init(); //回调接口
			} else {
				this.nomore = true
			}

		},
		onShow() {
			let token = uni.getStorageSync("token")
			if (!token) {
				//未登录
				uni.showToast({
					title: "请先登录",
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/login"
					})
				}, 1500)

				return false
			}
			this.initvist()
		},

		methods: {
			initvist() {
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route; //获取当前页面的路由
				let code = uni.getStorageSync("code")
				let obj = {
					page: route,
					code: code
				}
				if (code) {
					uni.$u.http.post('/api/visit/add', obj, {
						custom: {
							auth: true
						}
					}).then((res) => {}).catch((err) => {})
				}
			},
			init() {
				this.$showLoadding("加载中")

				let obj = {
					status: this.state,
					page: this.page,
					per_page: 10
				}
				uni.$u.http.post('/api/order/list', obj, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.data) {
						res.data.forEach(item => {
							this.orderList.push(item)
						})
					} else {
						this.nomore = true
					}
				}).catch((err) => {
					this.$toast(err.message)
				})
			},
			initAferSale() {
				this.$showLoadding("加载中")
				let obj = {
					status: 0,
					page: this.page,
					per_page: 10
				}
				uni.$u.http.post('/api/refund/list', obj, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()

					if (res.data) {
						res.data.forEach(item => {
							this.orderList.push(item)
						})
					} else {
						this.nomore = true
					}
				}).catch((err) => {
					this.$toast(err.message)
				})
			},
			copyCode(code) {
				uni.setClipboardData({
					data: code,
					success: function() {
						// this.$toast("复制成功")
					}
				});
			},
			orderSaleDetail(id) {
				uni.navigateTo({
					url: "/pages/order/orderAfterSale?id=" + id
				})
			},
			clickTab(item) {
				console.log('item', item);
				if (item.index == 0) {
					this.state = 0
					this.orderList = []
					this.page = 1
					this.nomore = false
					this.init()
				} else if (item.index == 1) {
					this.state = 1
					this.orderList = []
					this.page = 1
					this.nomore = false
					this.init()
				} else if (item.index == 2) {

					this.state = 2
					this.orderList = []
					this.page = 1
					this.nomore = false
					this.init()
				} else if (item.index == 3) {

					this.state = 3
					this.orderList = []
					this.page = 1
					this.nomore = false
					this.init()
				} else if (item.index == 4) {

					this.state = 5
					this.orderList = []
					this.page = 1
					this.nomore = false
					this.initAferSale()
				}
			},
			getAfterSale() {
				this.$showLoadding("加载中")
				uni.$u.http.post('/api/refund/list', {
					status: 0,
					page: 1,
					per_page: 5
				}, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					console.log(res)
					this.orderList = res.data
				}).catch((err) => {
					console.log(err)
				})
			},
			goAfterSale(item) {
				uni.navigateTo({
					url: "/pages/order/applyAfterSale?obj=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			goPay(id) {
				uni.$u.http.post('/api/order/config', {
					order_id: id,
				}).then(res => {
					// console.log(res)
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						timeStamp: res.timeStamp, // 时间戳（单位：秒）
						nonceStr: res.nonceStr, // 随机字符串
						package: res.package, // 固定值
						signType: res.signType, //固定值
						paySign: res.paySign, //签名
						success: function(res) {
							// console.log('success:' + JSON.stringify(res));
							console.log("支付成功");
							uni.navigateTo({
								url: "/pages/order/successpay?id=" + id
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					});

				}).catch(err => {
					console.log(err)
					uni.showToast({
						icon: "error",
						title: err.message,
					})
				})
			},
			buyAgin(id) {
				uni.navigateTo({
					url: "/pages/travel/travelDetails?id=" + id
				})
			},
			// 跳转订单售后详情------待退框
			goOrderAfterSale() {
				uni.navigateTo({
					url: "/pages/order/orderAfterSale?id=0"
				})
			},
			// 跳转订单售后详情------已退框
			goOrderAfterSale1() {
				uni.navigateTo({
					url: "/pages/order/orderAfterSale?id=1"
				})
			},
			// 跳转集合页面
			goguide(item) {
				console.log(item)
				if (item.status == 1) {
					uni.showModal({
						title: "提示",
						content: "订单支付后可进入专属森林向导"
					})
					return
				} else {
					uni.navigateTo({
						url: "/pages/order/guide?muster=" + encodeURIComponent(JSON.stringify(item.plan))
					})
				}

			},
			// 跳转支付订单详情
			goOrderDetail(id) {
				uni.navigateTo({
					url: `/pages/order/orderDetails?id=${id}`
				})
			},
			// 跳转待出行订单详情
			goOrderDetail1() {
				uni.navigateTo({
					url: "/pages/order/orderDetails?id=2"
				})
			},
			// 跳转退款售后
			goafter() {
				uni.navigateTo({
					url: "/pages/order/applyAfterSale"
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F4F4F4;
		font-size: 26rpx;
	}

	.tab {
		background-color: #FFFFFF;
	}

	.list {
		box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.02);
		border-radius: 16rpx 16rpx 16rpx 56rpx;
		background-color: #FFFFFF;
		// padding: 30rpx;
		margin: 20rpx 30rpx;

		.flexall {
			display: flex;
			align-items: center;
		}

		.list-top {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #E3E3E3;
			padding: 30rpx;
		}

		.listcenter {
			display: flex;
			justify-content: space-between;
			// margin: 24rpx 0 40rpx;
			padding: 30rpx;

			.r {
				text-align: right;

				.image {
					// width: 140rpx;
				}

				image {
					width: 140rpx;
					height: 84rpx;
					border-radius: 6rpx;
				}
			}

		}

		.list-bottom {
			// background: #FBFBFB;
			border-radius: 0px 0px 16rpx 56rpx;
			background-color: #FBFBFB;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;

			.line {
				width: 1px;
				height: 24rpx;
				background-color: #1E9F6A;
			}

			.list-bottom-item {
				color: #1E9F6A;
				text-align: center;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				flex: 1;
			}
		}

		.list-bottoms {
			border-radius: 0px 0px 16rpx 56rpx;
			background-color: #FBFBFB;
			padding: 30rpx 0;
			color: #1E9F6A;

			image {
				height: 24rpx;
				margin-right: 10rpx;
			}

			text-align: center;
		}
	}
</style>