baiyuchengpin/pages_shopping/live/order.vue

<template>
	<view>
		<view class="content">
			<!-- 使用mescroll-body包裹订单列表 -->
			<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">



				<!-- <u-tabs class="tabs" itemStyle="width:14%;height:100rpx;" :list="tabList" @click="tabsClick"
				lineColor="#FF5C03"></u-tabs> -->

				<view class="top-fixed">
					<view class="pub-tab-box">
						<scroll-view class="scroll-tabs" scroll-x="true" show-scrollbar="false">
							<view class="tab-inner">
								<view v-for="(item,index) in tabList" :key="index"
									:class="status == item.status?'item active':'item'" @click="tabsClick(item)">
									<view class="text">
										{{ item.name }}
										<image v-show="status == item.status" class="tab-bg"
											src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/tab_bg.png"
											mode=""></image>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="search-cont">
						<view class="inner">
							<image class="icon-search"
								src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/search.png"
								mode=""></image>
							<input type="text" value="" placeholder="输入订单号" confirm-type="搜索" @confirm="goSearch"
								placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
						</view>
					</view>
				</view>



				<view class="order-list">
					<view class="order-item" v-for="(item,index) in orderList" :key="index" @click="goDetail(item)">
						<view class="order-num">
							<text class="lable">订单号：{{item.orderCode}}</text>
							<text v-if="item.status==-1&&item.refundStatus==0">未退款</text>
							<text v-if="item.status==-1&&item.refundStatus==1">申请中</text>
							<text v-if="item.status==-1&&item.refundStatus==2">已退款</text>

							<!-- <text v-if="item.status==-1">申请售后</text> -->
							<text v-else-if="item.status==-2">退款成功</text>
							<text v-else-if="item.status==0">待支付</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==-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></text>
							</view>
							<view class="button-group">
								<view v-if="item.status == 0" @click.stop="cancel(item)" class="button cancel ">取消订单
								</view>
								<view v-if="item.isAfterSales==1&&item.status!=-3&&item.status!=0&&item.status!=-2"
									@click.stop="refund(item)" class="button cancel">申请售后
								</view>
								<view v-if="item.status ==2 ||item.status ==3 ||item.deliverySn" class="button cancel"
									@click.stop="showDelivery(item)">查看物流</view>
								<view v-if="item.status == 0" @click.stop="pay(item)" class="button pay">去支付</view>
								<view v-if="item.status == 2" @click.stop="confirmReceipt(item)" class="button pay">确认收货
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import {
		cancelOrder, //取消订单
		liveOrderList, // 订单列表
		finishOrder, //确认收货
		getStoreAfterSalesList //获取售后列表
	} from '@/api/order.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				searchKey: '',
				status: '',
				orderList: [],
				tabList: [{
						name: "全部",
						status: ""
					},
					{
						name: "待支付",
						status: "0"
					},
					{
						name: "待发货",
						status: "1"
					},
					{
						name: "待收货",
						status: "2"
					},
					{
						name: "已完成",
						status: "3"
					},
					{
						name: "售后中",
						status: "-1"
					},
					{
						name: "退款成功",
						status: "-2"
					}
				],
				// mescroll配置
				downOption: {
					use: true,
					auto: false // 是否在初始化后自动执行下拉回调
				},
				upOption: {
					use: true,
					auto: true, // 是否在初始化时自动执行上拉回调
					page: {
						num: 0, // 当前页码
						size: 10 // 每页数据条数
					},
					noMoreSize: 5, // 如果列表已无数据，可设置列表的总数量要大于等于5条才显示无更多数据
					empty: {
						icon: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/no_data.png', // 可配置空状态图片
						tip: '暂无订单数据' // 空状态提示文字
					}
				},
				mescroll: null // mescroll实例
			}
		},
		methods: {
			goSearch(e) {
				this.searchKey = e.detail.value;
				this.mescroll.resetUpScroll()
			},
			goDetail(item) {
				console.log("跳转", item)
				if (item.status == -1) {
					uni.navigateTo({
						url: './refundOrderDetail?id=' + item.afterSaleId
					})

				} else {
					uni.navigateTo({
						url: './storeOrderDetail?orderId=' + item.orderId
					})
				}

			},
			// mescroll初始化
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新回调
			downCallback(mescroll) {
				// 重置列表数据
				this.orderList = [];
				mescroll.resetUpScroll();
			},
			// 上拉加载回调
			upCallback(mescroll) {
				const pageNum = mescroll.num;
				const pageSize = mescroll.size;

				let data = {
					keyword: this.searchKey,
					pageSize: pageSize,
					pageNum: pageNum,
					status: this.status
				}

				liveOrderList(data).then(res => {
					if (res.code == 200) {
						// 请求成功，处理数据
						let curPageData = res.data.list || [];
						// let curPageData = res.rows || [];
						let curPageLen = curPageData.length;
						let totalSize = res.data.total || 0;

						// 如果是第一页，直接赋值
						if (pageNum === 1) {
							this.orderList = [];
						}

						// 追加新数据
						this.orderList = this.orderList.concat(curPageData);

						// 方法一(推荐): 后台返回有总数据量
						mescroll.endBySize(curPageLen, totalSize);

					} else {
						// 请求失败
						mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					// 请求异常
					mescroll.endErr();
					console.log("请求异常:" + JSON.stringify(err));
				});
			},
			// 确认收货
			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.mescroll.resetUpScroll();
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg,
									});
								}
							});
						}
					}
				});
			},
			// 取消订单
			cancel(item) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗',
					success: function(res) {
						if (res.confirm) {
							const data = {
								orderId: item.orderId,
							};
							console.log(data)
							cancelOrder(data).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'success',
										title: "操作成功",
									});
									// 刷新列表
									that.mescroll.resetUpScroll();
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg,
									});
								}
							});
						}
					}
				});
			},
			// 申请售后
			refund(item) {
				uni.navigateTo({
					url: './refundOrderProduct?orderId=' + item.orderId
				})
			},
			// tab切换
			tabsClick(item) {
				console.log("item", item)
				this.status = item.status;
				// 切换tab时刷新列表
				this.mescroll.resetUpScroll();
			},
			// 查看物流
			showDelivery(item) {
				uni.navigateTo({
					url: `./storeOrderDelivery?orderId=${item.orderId}`
				})
			},
			// 支付
			pay(item) {
				console.log("去支付", item)
				uni.navigateTo({
					url: `./paymentOrder?orderList=${encodeURIComponent(JSON.stringify(item))}`
				})
			},

		}
	}
</script>

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

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

	.top-fixed {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.pub-tab-box {
		width: 100%;
		background-color: #FFFFFF;
	}

	.scroll-tabs {
		width: 100%;
		white-space: nowrap;

		/* 隐藏滚动条 */
		::-webkit-scrollbar {
			display: none;
		}

		/* 添加鼠标滚轮支持 */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 针对电脑环境添加特殊样式 */
	@media (min-width: 768px) {
		.scroll-tabs {

			/* 在电脑上显示滚动条 */
			::-webkit-scrollbar {
				display: block;
				height: 4px;
			}

			::-webkit-scrollbar-thumb {
				background: #ddd;
				border-radius: 2px;
			}
		}
	}

	.tab-inner {
		display: flex;
		align-items: center;
		height: 88upx;
		padding: 0 30upx;
		/* 给左右留一些空间 */
	}

	.item {
		font-size: 28upx;
		white-space: nowrap;
		line-height: 1;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-right: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		position: relative;

		&:last-child {
			margin-right: 30upx;
			/* 最后一个也保持间距 */
		}

		&.active {
			font-weight: bold;
			color: #333333;
		}

		.text {
			position: relative;
			z-index: 1;
		}

		.tab-bg {
			width: 72upx;
			height: 28upx;
			position: absolute;
			top: 17upx;
			left: 50%;
			transform: translateX(-36upx);
			z-index: -1;
		}
	}


	.content {
		.search-cont {
			padding: 16upx 30upx;
			background-color: #FFFFFF;

			.inner {
				box-sizing: border-box;
				width: 100%;
				height: 72upx;
				background: #F7F7F7;
				border-radius: 36upx;
				display: flex;
				align-items: center;
				padding: 0 30upx;

				.icon-search {
					width: 28upx;
					height: 28upx;
					margin-right: 20upx;
				}

				input {
					height: 60upx;
					line-height: 60upx;
					flex: 1;
				}
			}
		}

		.order-list {
			margin-top: 220rpx;
			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: 28rpx;
					color: #2BC7B9;

					.lable {
						color: #5a5a5a;
						font-size: 26rpx;
					}
				}

				.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: 10rpx;
							// padding: 10rpx 14rpx;
							// border-radius: 8rpx;
							// font-weight: 500;
							// font-size: 24rpx;
							width: 150upx;
							height: 64upx;
							line-height: 64upx;
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							text-align: center;
							border-radius: 32upx;
							margin-left: 10upx;
						}

						.cancel {
							border: 1px solid #DDDDDD;
							color: #666666;
						}

						.pay {
							color: #FFFFFF;
							background-color: #2BC7B9;
						}
					}
				}
			}
		}
	}
</style>