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" ></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)">
			<view class="list-top">
				<view class="">
				订单号  {{item.code}}
				</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.price}}
					</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" @click.stop="goAfterSale(item)">
					<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 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
			}
		},
		onLoad() {
			this.init()
		},
		// 下拉到底部后加载新数据
		    onReachBottom() {
		      //判断下一页是否存在数据，不存在将显示暂无数据等提示语
		      if (this.orderList.length >= this.page * 5) {
		        this.page++;//页数加一
				
				this.init();//回调接口
		      }else{
				  this.nomore=true
			  }
		      
		    },
		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("加载中")
				
				let obj={
					status:this.state,
					page:this.page,
					per_page:5
				}
				uni.$u.http.post('/api/order/list',obj,{
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					console.log(res)
					if(res.data){
						res.data.forEach(item=>{
							this.orderList.push(item)
						})
					}else{
						this.nomore=true
					}
				}).catch((err) => {
					console.log( err)
				})
			},
			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.init()
				}
			},
			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="+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;
		.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>