zhibo/pages_shop/order.vue

<template>
	<view>
		<view class=""></view>
		<view class="content">
			<!-- <up-modal :show="show" title="555" ></up-modal>
			 -->

			<u-tabs class="tabs" itemStyle="width:33%;height:100rpx;" :list="tabList" @click="tabsClick"
				lineColor="#FF5C03"></u-tabs>
			<view class="order-list">
				<view class="order-item" v-for="(item,index) in orderList" :key="index">
					<view class="order-num">
						<text>订单号：{{item.orderCode}}</text>
						<text v-if="item.status==-1">申请退款</text>
						<text v-else-if="item.status==-2">退货成功</text>
						<text v-else-if="item.status==1">待支付</text>
						<text v-else-if="item.status==2">待发货</text>
						<text v-else-if="item.status==3">待收货</text>
						<text v-else-if="item.status==4">待评价</text>
						<text v-else-if="item.status==5">已完成</text>
						<text v-else-if="item.status==-3">已取消</text>
					</view>
					<view class="order-main" v-for="(itm,idx) in item.orderItemList" :key="idx">
						<view class="img-box">
							<image :src="itm.imgUrl"></image>
						</view>
						<view class="order-text">
							<view class="title">{{itm.productName}}</view>
							<view class="txt">适用于乏力、头晕等人群，通过问诊可明确诊断给予专业性指导意见。</view>
							<view class="num">
								<text>{{itm.sales}} 人已购</text>
								<text class="grey">x{{itm.num}}</text>
							</view>
						</view>
					</view>
					<view class="order-bottom">
						<view class="order-money">
							<text class="title">订单金额：</text>
							<text class="num">￥<text class="bold">{{item.totalPrice}}</text>.00</text>
						</view>
						<view class="button-group">
							<view v-if="item.status == 1" @click="cancel(item)" class="button cancel ">取消订单</view>
							<view v-if="item.status !== 1" @click="refund(item)" class="button cancel">申请售后</view>
							<view v-if="item.status == 1" @click="pay(item)" class="button pay">去支付</view>
							<view v-if="item.status == 2" @click="urgeShipment(item)" class="button cancel">催发货</view>
							<view v-if="item.status == 3" @click="confirmReceipt(item)" class="button pay">确认收货</view>
							<view v-if="item.status == 4" @click="evaluate(item)" class="button pay">评价</view>
							<!-- <view v-if="item.status == 1" class="button">申请售后</view> -->
							<!-- <view class="button">查看物流</view> -->
							<!-- <view v-if="item.status == 1" class="button pay">去支付</view>
							<view v-if="item.status == 1" class="button pay">去支付</view> -->
						</view>
						<!-- <view class="button">申请售后</view>
						<view class="button">查看物流</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cancelOrder, //取消订单
		liveOrderList ,// 订单列表
		finishOrder//确认收货
	} from '@/api/order.js'
	export default {
		data() {
			return {
				status:'',
				orderList: [],
				tabList: [{
						name: "全部",
						status: ""
					},
					{
						name: "待支付",
						status: "1"
					},
					{
						name: "待发货",
						status: "2"
					},
					{
						name: "待收货",
						status: "3"
					}, {
						name: "待评价",
						status: "4"
					},
					{
						name: "已完成",
						status: "5"
					}
				]
			}
		},
		mounted() {
			this.getliveOrderList(this.status)
		},
		methods: {
			// 确认收货
			confirmReceipt(item) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认收到货了吗',
					success: function(res) {
						if (res.confirm) {
							var data = {
								orderId: item.orderId,
							};
							finishOrder(data).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'success',
										title: "操作成功",
									});
									that.getliveOrderList(that.status)
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg,
									});
								}
							});
						} else if (res.cancel) {

						}
					}
				});
			},
			// 取消订单
			cancel(item) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗',
					success: function(res) {
						if (res.confirm) {
							var data = {
								orderId: item.orderId,
							};
							cancelOrder(data).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'success',
										title: "操作成功",
									});
									that.getliveOrderList(that.status)
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg,
									});
								}
							});
						} else if (res.cancel) {
			
						}
					}
				});
			},

			// 申请售后
			refund(item) {
				uni.navigateTo({
					url: './refundOrderProduct?orderId=' + item.orderId
				})
			},
			// tab切换
			tabsClick(item) {
				this.getliveOrderList(item.status) // 切换时重新获取数据
				this.status=item.status
			},

			// 订单列表
			getliveOrderList(status) {
				let data = {
					pageSize: 10,
					page: 1,
					status: status // 添加状态参数
				}
				liveOrderList(data).then(res => {
						if (res.code == 200) {
							console.log("订单列表数据>>>>", res)
							this.orderList = res.rows
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {
						console.log("rej:" + JSON.stringify(rej));
					}
				);
			},
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.u-tabs) {
		background-color: #FFFFFF;
	}

	:deep(.u-tabs__wrapper__nav) {
		width: 100%;
	}

	.content {

		.order-list {
			background: #F5F7FA;
			padding: 0 24rpx;

			.order-item {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 30rpx 24rpx;
				margin-top: 24rpx;

				.order-num {
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					color: #999999;
				}

				.order-main {
					display: flex;
					margin: 26rpx 0 30rpx;

					.img-box {
						width: 180rpx;
						height: 180rpx;
						border-radius: 16rpx;
						flex-shrink: 0;
						overflow: hidden;
						margin-right: 26rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.order-text {
						.title {
							font-weight: 500;
							font-size: 28rpx;
							color: #222222;
						}

						.txt {
							font-size: 24rpx;
							color: #999999;
							margin: 8rpx 0 18rpx 0;
						}

						.num {

							display: flex;
							justify-content: space-between;
							font-size: 22rpx;
							color: #E69A22;

							.grey {
								margin-top: 12rpx;
								font-size: 24rpx;
								color: #999999;

							}
						}
					}

				}

				.order-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.order-money {
						.title {
							font-size: 24rpx;
							color: #757575;
						}

						.num {
							font-weight: 600;
							font-size: 20rpx;
							color: #FF5C03;

							.bold {
								font-weight: bold;
								font-size: 36rpx;
							}
						}
					}

					.button-group {
						display: flex;
						align-items: center;

						.button {
							margin-left: 20rpx;
							padding: 10rpx 24rpx;
							border-radius: 8rpx;
							font-weight: 500;
							font-size: 26rpx;
						}


						.cancel {
							background-color: #ececec;
							color: #2c2c2c;
						}

						.pay {
							color: #FFFFFF;
							background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
						}
					}

				}
			}
		}
	}
</style>