RiyueGorge/pages/order/order.vue

<template>
	<view class="">
		<u-sticky bgColor="#fff">
		<view class="tab">
		  <u-tabs :list="list1" :activeStyle="{color: '#1E9F6A'}" lineColor="#1E9F6A" :scrollable=false @click="click" ></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-if="state==1 || state==0?true:false" v-for="(item,index) in orderList" :key="index" @click="goOrderDetail(item.id)">
			<view class="list-top">
				<view class="">
				订单号  {{item.code?item.code:''}}
				</view>
				<view class="">
					<!-- 待付款 -->{{item.status_text?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?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?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.price?item.price:''}}
					</view>
				</view>
			</view>

			<view class="list-bottom">
				<view class="list-bottom-item">
					<image src="../../static/orderListicon/notepad@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==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>
</template>

<script>
	export default {
		data(){
			return{
				  list1: [
					  
					  {name: '全部'},
					  {name: '待付款'}, 
					  {name: '待出行'}, 
					  {name: '已完成'},
					  {name: '售后'},
				  ],
				  // 订单状态（0全部 1待付款 2待出行 3已完成 4售后）
				  state:0,
				  // 订单列表
				  orderList:[]
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			let token=uni.getStorageSync("token")
			if (!token) {
				//未登录
				uni.showToast({
					title: "请先登录",
					icon: 'none'
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
				
				return false
			}
		},
		methods:{
			init(){
				this.$showLoadding("加载中")
				uni.$u.http.post('/api/order/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)
				})
			},
			click(item) {
			    console.log('item', item);
				if(item.index==0){
					this.state=0
				}else if(item.index==1){
					this.state=1
				}else if(item.index==2){
					this.state=2
				}else if(item.index==3){
					this.state=3
				}else if(item.index==4){
					this.state=4
				}
			},
			// 跳转订单售后详情------待退框
			goOrderAfterSale(){
				uni.navigateTo({
					url:"/pages/order/orderAfterSale?id=0"
				})
			},
			// 跳转订单售后详情------已退框
			goOrderAfterSale1(){
				uni.navigateTo({
					url:"/pages/order/orderAfterSale?id=1"
				})
			},
			// 跳转集合页面
			goguide(){
				uni.navigateTo({
					url:"/pages/order/guide"
				})
			},
			// 跳转支付订单详情
			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;
		.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{
					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>