jiaoyi-uni/pages/order/order.vue

<template>
	<view class="content">
		<view class="tab-menu">
			<view :class="orderState==0?'tab-item active':'tab-item'" @click="orderStatus(0)">全部</view>
			<view :class="orderState==1?'tab-item active':'tab-item'" @click="orderStatus(1)">待支付</view>
			<view :class="orderState==2?'tab-item active':'tab-item'" @click="orderStatus(2)">待使用</view>
			<view :class="orderState==3?'tab-item active':'tab-item'" @click="orderStatus(3)">已完成</view>
			<view :class="orderState==6?'tab-item active':'tab-item'" @click="orderStatus(6)">已关闭</view>
		</view>
		<view class="order-body">
			<view class="empty-body" v-if="loginState">
				<view class="img">
					<image src="/static/image/empty.png" mode="widthFix"></image>
					<view class="tip">请先登录</view>
				</view>
				<view class="re-btn" @click="reback">去登陆</view>
			</view>
			<block class="" v-else>
				<z-paging ref="paging" show-refresher-update-time v-model="dataList" @query="queryList" :fixed="false">
					<view class="order-item" v-for="(item,indx) in dataList" :key="indx">
						<view class="item-header" @click="toDetail(item.out_order_no)">
							<view class="order-status" v-if="item.status == 0">待支付</view>
							<view class="order-status" v-if="item.status == 1">待使用</view>
							<view class="order-status success" v-if="item.status == 2">已完成</view>
							<view class="order-status" v-if="item.status == 3">已退款</view>
							<view class="order-status" v-if="item.status == 4">退款中</view>
							<view class="order-status" v-if="item.status == 5">已关闭</view>
							<view class="order-time">订单号 ：{{ item.out_order_no }}</view>
						</view>
						<view class="order-goods" @click="toDetail(item.out_order_no)">
							<view class="goods-img"><image :src="item.img"></image></view>
							<view class="goods-info">
								<view class="name">{{ item.product.product_name }}</view>
								<view class="desc">
									<view class="time" v-if="item.end_at">有效期至：{{ item.end_at }} </view>
									<view class="num">x {{ item.number }}</view>
								</view>
								<view class="total">合计：{{ $dialog.formatMoney(item.price,true) }}</view>
							</view>
						</view>
						<view class="order-footer">
							<view class="footer-l">{{item.create_at}}</view>
							<view class="footer-r">
								<view class="btn danger" v-if="item.status == 0" @click="toDetail(item.out_order_no)">继续支付</view>
								<view class="btn" v-if="item.status == 4" @click="delOrder(item.out_order_no)">删除</view>
								<view class="btn danger" v-if="item.status == 4||item.status == 3" @click="toGoods(item)">再次购买</view>
								
								<view class="btn blue" v-if="item.status == 1" @click="toDetail(item.out_order_no)">立即预约</view>
								<view class="btn danger" v-if="item.status == 1" @click="toDetail(item.out_order_no)">申请退款</view>
								
								<view class="btn danger" v-if="item.status == 2" @click="toGoods(item)">再来一单</view>
							</view>
						</view>
					</view>
				</z-paging>
			</block>
		</view>
		
		<view class="float-kefu" @click="showService(1)">
			<image src="/static/image/kf.png"></image>
		</view>
		
		<uni-popup ref="maskpopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="kefu-popup">
				<view class="top">
					<view class="item">
						客服时间：{{storeData.start_at}}-{{storeData.end_at}}
					</view>
					<view class="item">
						<button class="btn" @click="$dialog.jumpUri('/pages/service/chat/chat?poi='+storeData.poi_id+'&source=goods&goods='+goodsId,1);showService(2)">在线咨询商家</button>
					</view>
					<view class="item" v-if="storeData.service_mobile" @click="callMobile(storeData.service_mobile)">商家客服电话</view>
				</view>
				<view class="foot" @click="showService(2)">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/order.js";
export default {
	data() {
		return {
			listState:false,
			orderState:0,
			dataList:[],
			loginState:true,
			storeData:null
		}
	},
	onShow() {
		var token = uni.getStorageSync("user_token")
		if (token) {
			this.loginState = false;
		}
		this.queryList(1,10)
	},
	onLoad() {
		app = this;
		app.storeData = uni.getStorageSync("contact");
	},
	methods: {
		callMobile(mobile){
			uni.makePhoneCall({
				phoneNumber:mobile,
				success(res) {
					console.log(res)
				},fail(res) {
					console.log(res)
				}
			})
		},
		showService(type){
			if (type == 1) {
				uni.hideTabBar()
				app.$refs.maskpopup.open()
			} else {
				this.$nextTick(() => {
					uni.showTabBar()
				})
				app.$refs.maskpopup.close()
			}
		},
		delOrder(order){
			app.$dialog.showError("删除后数据不可恢复，确定要删除吗",function(res){
				if (res.confirm) {
					Api.del({"order":order}).then((resp)=>{
						if (res.code !== 1) {
							return app.$dialog.showSuccess(resp.msg)
						}
						app.$dialog.showSuccess(resp.msg,function(){
							app.queryList(1,10)
						})
					})
				}
			})
		},
		toPay(order){
			uni.navigateTo({
				url:"/pages/order/confirm?order="+order
			})
		},
		toGoods(item){
			uni.navigateTo({
				url:"/pages/goods/detail?goods="+item.product_id+"&spm="+item.goods_id
			})
		},
		toDetail(order){
			uni.navigateTo({
				url:"/pages/order/detail?order="+order
			})
		},
		reback(){
			uni.navigateTo({
				url:"/pages/auth/login",
				animationType:"'slide-in-bottom'"
			})
		},
		orderStatus(state) {
			app.orderState = state;
			app.dataList = [];
			app.queryList(1,10)
		},
		queryList(pageNo, pageSize){
			var formData = {};
			var token = uni.getStorageSync("user_token")
			if (!token) {
				return false;
			}
			formData.page = pageNo;
			formData.size = pageSize;
			formData.status = app.orderState;
			app.listState = true;
			Api.list(formData).then((res)=>{
				app.listState = false;
				uni.hideLoading();
				if (res.code !== 1) {
					this.$refs.paging.complete(false);
					return app.$dialog.showSuccess(res.msg);
				}
				app.$refs.paging.complete(res.data.rows);
			})
		}
	}
}
</script>

<style>

.float-kefu{position: fixed;right: 20upx;bottom: 15%;width: 100upx;height: 100upx;background-color: #fff;border-radius: 100%;display: flex;align-items: center;justify-content: center;}
.float-kefu image{width: 60upx;height: 60upx;}

.kefu-popup .item{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-bottom: 2upx solid #f8f8f8;}
.kefu-popup .item .btn{background-color: #fff;border: 0;height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;}
.kefu-popup .item .btn::after{border: 0;}
.kefu-popup .foot{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-top: 20upx solid #f8f8f8;}
.order-footer{display: flex;text-align: right;padding: 20upx 0;border-top: 2upx solid #f8f8f8;align-items: center;}
.order-footer .footer-l{font-size: 28upx;color: #666;}
.order-footer .footer-r{display: flex;margin-left: auto;margin-right: 0;flex: 1;justify-content: end;gap: 20upx;}
.order-footer .btn{width: 160upx;height: 60upx;line-height: 60upx;text-align: center;border: 2upx solid #ccc;color: #333;font-size: 28upx;border-radius: 10upx;}
.order-footer .btn.danger{border:2upx solid #f00;color: #f00;}
.order-footer .btn.blue{border:2upx solid #007aff;color: #007aff;}

.order-item{background-color: #fff;padding: 0 20upx;border-radius: 10upx;margin-top: 20upx;}
.order-item .item-header{display: flex;align-items: center;height: 60upx;line-height: 60upx;}
.order-item .item-header .order-status{font-size: 28upx;color: #f00;}
.order-item .item-header .order-status.success{color: #007aff;}
.order-item .item-header .order-time{font-size: 24upx;color: #999;margin-left: auto;margin-right: 0;}
.order-item .order-goods{display: flex;align-items: center;}
.order-item .order-goods image{width: 140upx;height: 140upx;}
.order-item .goods-info{margin-left: 20upx;font-size: 28upx;flex: 1;padding: 20upx 0;}
.order-item .goods-info .name{font-size: 30upx;color: #333;}
.order-item .goods-info .desc{font-size: 24upx;color: #999;display: flex;align-items: center;justify-content: space-between;margin: 20upx 0;}
.order-item .goods-info .total{font-size: 30upx;color: #333;text-align: right;font-weight: bold;}

.content{height: 100vh;background-color: #f8f8f8;}
.content .tab-menu{height: 80upx;line-height: 80upx;background-color: #fff;display: flex;align-items: center;font-size: 28upx;color: #666;justify-content: space-around;}
.content .tab-menu .tab-item{position: relative;}
.content .tab-menu .tab-item.active{color: #007aff;}
.content .tab-menu .tab-item.active::after{position: absolute;content: "";width: 30%;left: 35%;height: 4upx;bottom: 0;background-color: #007aff;}
.content .order-body{height: calc(100vh - 100upx); }
.empty-body{display: flex;align-items: center;justify-content: center;flex-direction: column;height: calc(100vh - 100upx);}
.empty-body .img{text-align: center;font-size: 28upx;color: #666;}
.empty-body .img image{height: 160upx;width: 160upx;}
.empty-body .img .tip{margin-top: 20upx;}
.empty-body .re-btn{width: 180upx;height: 80upx;line-height: 80upx;text-align: center;font-size: 28upx;color: #fff;background-color: #007aff;border-radius: 10upx;margin-top: 60upx;}
</style>