anmo-master/package/pages/zysc/my/myList.vue

<template>
	<view class="myTask">
		<view class="tui-tabs">
			<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true"
				:show-scrollbar="false" style="border-bottom: 2upx solid #F8F8F8;">
				<view style="display: flex;">
					<view v-for="(tab, index) in tabBars" :id="tab.id" :data-current="index" @tap='tabSlect(tab)'>
						<view class="tui-tab-item-title"
							style="margin-left: 50upx;margin-right: 15upx;background: #FFFFFF;"
							:class="{ 'tui-tab-item-title-active': tabIndex == tab.id }">
							{{ tab.name }}{{tab.count != 0 ? '('+tab.count+')' : ''}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- #ifdef H5 -->
		<view style="margin-top: 100upx;" v-if="newsList.length > 0">
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view style="margin-top: 20upx;padding-top: 60rpx;" v-if="newsList.length > 0">
				<!-- #endif -->
				<view
					style="border-radius: 20upx;background: #FFFFFF;width: 710upx;height: max-content;margin: 20upx 20upx 20upx 20upx;"
					v-for="(item,index) in newsList" :key='index'>
					<view style="display: flex;">
						<view
							style="padding: 20upx 0 0upx 30upx;width: 75%;text-align: left;color: #000;font-size: 28upx;">
							{{item.createAt}}</view>
						<view
							style="padding: 20upx 0 0upx 0upx;width: 20%;text-align: right;color: #05C25C;font-size: 28upx;">
							{{item.status}}</view>
					</view>
					<view style="display: flex;padding: 20upx 10upx;" @tap='goOrderDetail(item.id)'>
						<image :src="item.img" style="width: 30%;height: 190upx;margin-left: 20upx;"></image>
						<view style="margin-left: 20upx;width: 68%;">
							<view
								style="font-size: 30upx;color: #333333;width: 90%;height: 80upx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
								{{item.title}}</view>
							<view style="display: flex;height: 50upx;margin-top: 70upx;">
								<view style="display: flex;width: 45%;">
									<view
										style="font-size: 26upx;color: #333333;padding-bottom:10rpx;text-align: left;">
										实付款: ¥{{item.payMoney}}</view>
								</view>
								<!-- <view v-if="item.relationList && item.relationList.length > 0"
									style="font-size: 26upx;color: #909399;padding-bottom:10rpx;width: 50%;text-align: right;">
									佣金:
									¥{{item.relationList[0].commissionPrice}}</view> -->
							</view>
						</view>
					</view>
					<!-- <view v-if="item.relationList && item.relationList.length > 1"
						style="margin-left: 35%;font-size: 26upx;color: #909399;">
						直属【{{item.relationList[1].userName}}】佣金:
						￥{{item.relationList[1].commissionPrice}}</view>
					<view v-if="item.relationList && item.relationList.length > 2"
						style="margin-left: 35%;font-size: 26upx;color: #909399;margin-top: 10rpx;margin-bottom: 20rpx;">
						非直属【{{item.relationList[2].userName}}】佣金:
						￥{{item.relationList[2].commissionPrice}}</view> -->
					<view style="height: 1upx;margin-left: 20upx;margin-right: 20upx;background: #E6E6E6;"></view>
					<view style="overflow: hidden;">
						<view style="display: flex;text-align: center;width: max-content;float: right;">
							<view v-if="item.status == '已发货'" class='view_button'
								style="color: #05C25C;border: 3upx solid #05C25C;" @tap='goconfirm(item)'>确认收货</view>
							<view v-if="item.status == '已退款' || item.status == '已收货' || item.status == '已取消'"
								class='view_button' @tap='deleteOder(item.id)'>删除订单</view>
							<view v-if="item.status == '待发货'" class='view_button' @tap='goRemind(item)'>提醒发货</view>
							<view v-if="item.status == '待付款'" class='view_button' @tap='gocancle(item)'>取消订单</view>
							<view v-if="item.status == '待付款'" class='view_button'
								style="color: #05C25C;border: 3upx solid #05C25C;" @tap='goPay(item)'>去支付</view>
						</view>
					</view>
				</view>
				<!-- 悬浮上拉 -->
				<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '', '']"
					style="bottom: 56px;"><text class="iconfont icon-shangla"></text></view>

				<!-- 加载更多提示 -->
				<view class="s-col is-col-24" v-if="newsList.length > 0">
					<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
				</view>
			</view>
			<!-- 加载更多提示 -->
			<!-- #ifdef H5 -->
			<empty v-if="newsList.length === 0" des="暂无数据" show="false"></empty>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<empty style="margin-top:78upx;" v-if="newsList.length === 0" des="暂无数据" show="false"></empty>
			<!-- #endif -->
		</view>
</template>

<script>
	export default {
		data() {
			return {
				//0全部 1待支付 2已支付 3已完成 4已取消
				tabIndex: '0',
				tabBars: [{
						name: '全部',
						count: 0,
						id: '0'
					},
					{
						name: '待付款',
						count: 0,
						id: '1'
					},
					{
						name: '待发货',
						count: 0,
						id: '2'
					},
					{
						name: '待收货',
						count: 0,
						id: '3'
					},
					{
						name: '已收货',
						count: 0,
						id: '4'
					},
					{
						name: '已取消',
						count: 0,
						id: '5'
					},
					{
						name: '退款中',
						count: 0,
						id: '6'
					},
					{
						name: '已退款',
						count: 0,
						id: '7'
					}
				],
				page: 0,
				state: 0,
				isExpress: 0,
				size: 10,
				newsList: [],
				loadingType: 0,
				type: 1,
				scrollTop: false,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onShow() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getSelectOrderList('', this.tabIndex);
			}
		},
		methods: {
			getDingDanCount() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/orders/count?userId=' + userId).then(res => {
					if (res.status === 0) {
						this.tabBars[1].count = res.data.count1;
						this.tabBars[2].count = res.data.count2;
						this.tabBars[3].count = res.data.count3;
						this.tabBars[4].count = res.data.count4;
						this.tabBars[5].count = res.data.count5;
						this.tabBars[6].count = res.data.count6;
						this.tabBars[7].count = res.data.count7;
						// this.tabBars[8].count = res.data.count8;
					}
				});
			},
			goRemind(item) {
				this.$Request.getT('/app/orders/remind?ordersId=' + item.id).then(res => {
					if (res.status === 0) {
						this.$queue.showToast('已提醒商家及时发货，请注意查收');
					} else {
						this.$queue.showToast(res.msg);
					}
				});
			},
			gocancle(list) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要取消此订单吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.getT('/app/orders/cancel?id=' + list.id).then(res => {
								if (res.status === 0) {
									this.getSelectOrderList('', this.tabIndex);
								} else {
									this.$queue.showToast(res.msg);
								}
							});
						}
					}
				});
			},
			goconfirm(list) {
				uni.showModal({
					title: '温馨提示',
					content: '确定收到货物了吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.getT('/app/orders/confirm?id=' + list.id).then(res => {
								if (res.status === 0) {
									this.getSelectOrderList('', this.tabIndex);
								} else {
									this.$queue.showToast(res.msg);
								}
							});
						}
					}
				});
			},
			goPay(list) {
				this.$queue.setData('href', '/pages/my/myList')
				uni.redirectTo({
					url: '../my/payment?money=' + list.payMoney + '&title=' + list.title + '&img=' + list.img +
						'&id=' + list.id
				});
			},
			goOrderDetail(id) {
				uni.navigateTo({
					url: '../member/orderdetail?id=' + id
				});
			},
			deleteOder(id) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除此订单吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.getT('/app/orders/delete?id=' + id).then(res => {
								if (res.status === 0) {
									this.getSelectOrderList('', this.tabIndex);
								} else {
									this.$queue.showToast(res.msg);
								}
							});
						}
					}
				});
			},
			getSelectOrderList(type, status) {
				this.getDingDanCount();
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/orders/findMyList?page=' + this.page + '&size=' + this.size + '&userId=' +
					userId + '&status=' +
					status).then(res => {
					if (res.status === 0) {
						if (this.page === 0 || res.status) {
							this.newsList = [];
						}
						res.data.content.forEach(d => {
							if (d.status === 1) {
								d.status = '待付款'
							} else if (d.status === 2) {
								d.status = '待发货'
							} else if (d.status === 3) {
								d.status = '已发货'
							} else if (d.status === 4) {
								d.status = '已收货'
							} else if (d.status === 5) {
								d.status = '已取消'
							} else if (d.status === 6) {
								d.status = '退款中'
							} else if (d.status === 7) {
								d.status = '已退款'
							} else if (d.status === 8) {
								d.status = '拒绝退款'
							} else if (d.status === 10) {
								d.status = '已评价'
							}
							this.newsList.push(d);
						});

						if (res.data.content.length === this.size) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
					if (type === 'Refresh') {
						uni.stopPullDownRefresh(); // 停止刷新
					}
				});
			},
			tabSlect(item) {
				this.switchTab(item.id);
			},
			switchTab(index) {
				this.page = 0;
				this.tabIndex = index;
				this.newsList = [];
				this.getSelectOrderList('switch', this.tabIndex);
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		},
		//统一登录跳转
		goLoginInfo() {
			this.$queue.setData('href', '/pages/zysc/my/myList');
			//#ifdef H5
			uni.navigateTo({
				url: '/pages/public/login'
			});
			//#endif
			//#ifndef H5
			uni.navigateTo({
				url: '/pages/public/login'
			});
			//#endif
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			let token = this.$queue.getData('token');
			if (token) {
				uni.navigateTo({
					url
				});
			} else {
				this.goLoginInfo();
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getSelectOrderList('', this.tabIndex);
		},
		onPullDownRefresh: function() {
			this.page = 0;
			this.getSelectOrderList('Refresh', this.tabIndex);
		}
	}
</script>

<style lang="less">
	@import '../../../../static/less/index.less';
	@import '../../../../static/css/index.css';

	page {
		background: #F2F2F2;
	}

	.view_button {
		margin: 15upx 20upx 10upx 30upx;
		line-height: 55upx;
		font-size: 24upx;
		color: #333333;
		width: 150upx;
		height: 55upx;
		border-radius: 100upx;
		border: 3upx solid #bababa;
	}

	.tui-tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #fafafa;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.tui-scroll-h {
		width: 750rpx;
		height: 80rpx;
		background-color: #ffffff;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* #ifdef APP-PLUS */
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		/* #endif */
		/* #ifdef H5 */
		position: fixed;
		top: 44px;
		left: 0;
		z-index: 999;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		/* #endif */
	}

	.tui-line-h {
		/* #ifdef APP-PLUS */
		height: 1rpx;
		background-color: #cccccc;
		/* #endif */
		position: relative;
	}

	/* #ifndef APP-PLUS*/
	.tui-line-h::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #cccccc;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	/* #endif */

	.tui-tab-item {
		/* #ifndef APP-PLUS */
		display: flex;
		/* #endif */
	}

	.tui-tab-item-title {
		color: #555;
		font-size: 30rpx;
		/* #ifdef APP-PLUS */
		height: 80rpx;
		/* #endif */
		/* #ifndef APP-PLUS */
		height: 82rpx;
		/* #endif */
		line-height: 80rpx;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.tui-tab-item-title-active {
		color: #05C25C;
		font-size: 32upx;
		font-weight: bold;
		border-bottom-width: 6upx;
		text-align: center;
	}
</style>