front/pages/order/list.vue

<template>
	<view class="container padding-lr-sm">
		<use-tabbar :tabbar="false"></use-tabbar>
		<u-tabs :current="data.status" :list="tab" @click="click" lineColor="#f56c6c"
        :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }"></u-tabs>

		<!-- 订单轮播区 -->
		<view class="order-area w-full">
			<!-- 空白页 -->
			<!--
			<use-empty v-if="fetch && fetch.list && fetch.list.length <= 0" e-style="round" e-type="cart" btn-tip=""
				tip="订单数据为空" height="88vh"></use-empty>
				-->
				
			<u-empty v-if="fetch && fetch.list && fetch.list.length <= 0" marginTop="200" mode="order"></u-empty>
			<!-- 订单列表区 -->
			<view v-if="fetch && fetch.list && fetch.list.length > 0" class="margin-bottom-sm" :class="index === 0 ? 'padding-top-sm' : ''"
				v-for="(item, index) in fetch.list" :key="index">
				<!-- 订单项 -->
				<view class="order-item padding bg-main border-radius">
					<view @click="toInfo(item)">
						<!-- 订单商品明细 -->
						<view class="goods-area" :class="{ 'margin-top': k > 0 }"
							v-for="(v, k) in item.detail" :key="k">
							<image :src="v.pic" mode="aspectFill"></image>
							<view class="right flex1">
								<text class="clamp-2">{{ v.name }}</text>
								<view class="ft-dark fs-xs padding-top-xs">
									<text class="margin-right">× {{v.num}}</text>
									{{ v.sku_name || '&nbsp;&nbsp;' }}
								</view>
								<view class="margin-top-sm">
									<text class="price ft-main fs-sm">{{ v.cash_text }}</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 订单操作区 -->
					<view class="dflex-b margin-top-sm">
						<view>
							<!-- 当前状态 -->
							<u-tag :text="item.status_name" plain plainFill size="mini" :type="item.status_type" ></u-tag>
						</view>
						<view class="dflex-e">
							<text class="fs-xs margin-right-xs">总金额</text>
							<text class="price ft-main">{{ item.cash_text }}</text>
						</view>
						<!--
						<view class="dflex">
							<button class="action-btn border-radius-big bg-main main-btn"
								@click="toevaluate(item)">我要评价</button>
						</view>
						-->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				tab: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}, {
					name: '已完成'
				}],
				fetch: {},
				data: {
					status:0,
				},
			};
		},
		onLoad(options) {
			if (options.status) {
				this.data.status = options.status
			}
		},
		onShow() {
			this.loadData(1);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData(1);
		},
		//加载更多
		onReachBottom() {
			this.loadData(2);
		},
		methods: {
			loadData(page) {
				this.DeverApi.page([page, 'list'], this, 'order.list', this.data);
			},

			//顶部tab点击
			click(e) {
				this.data.status = e.index
				this.loadData(1);
			},

			// 点击跳转详情页面
			toInfo(order) {
				this.Dever.location('order/info?id=' + order.id);
			},
			// 立即支付
			payment(order) {
				if (order.order_pay_state == '待核实') {
					this.$api.msg('订单已支付待核实状态');
					return;
				}

				this.$api.topay({
					order_id: order.order_id,
					money: order.order_actural_paid
				});
			},
			// 删除订单
			delOrder(item) {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '删除订单',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							_this.$func.usemall.call('order/deleted', {
								order_id: item.order.order_id,
							}).then(res => {
								if (res.code === 200) {
									_this.loadData('tab_change', 1);
								}
							})
						} else if (res.cancel) {
							console.log('点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 取消订单
			cancelOrder(item) {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '取消订单',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							_this.$func.usemall.call('order/cancel', {
								order_id: item.order.order_id,
								state: '已取消'
							}).then(res => {
								if (res.code === 200) {
									_this.loadData('tab_change', 1);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 查看物流
			toexpress(item) {
				// this.$api.msg('查看物流开发中');
				uni.navigateTo({
					url: `/pages/user/order/order-express?order_id=${item.order.order_id}`
				});
			},
			// 已发货
			toreceipt(item) {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '确认收货',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							_this.$func.usemall.call('order/received', {
								order_id: item.order.order_id,
								state: '待评价'
							}).then(res => {
								_this.loadData('tab_change', 1);
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 申请退款
			torefund(data) {
				uni.navigateTo({
					url: `/pages/user/order/order-refund?order_id=${data.order.order_id}`
				});
			},
			// 评价
			toevaluate(item) {
				uni.navigateTo({
					url: `/pages/user/order/order-evaluate?id=${item.order.order_id}`
				});
			}
		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 100%;
		background: $page-color-base;
	}

	/* 订单状态区 */
	.navbar-area {
		white-space: nowrap;
	}

	.state-area {
		height: 7vh;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		z-index: 10;
		top: 0;
	}

	.nav-item {
		flex: 1;

		&.active {
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: 0;
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}

	/* 订单轮播区 */
	.swiper-area {
		height: 93vh;
	}

	/* 订单区 */
	.order-area {}


	/* 订单项 */
	.order-item {

		/* 订单商品明细区 */
		.goods-area {
			display: flex;

			image {
				width: 180rpx;
				height: 180rpx;
			}

			.right {
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}
			}
		}

		/* 操作按钮 */
		.action-btn {
			width: 156rpx;
			height: inherit;
			line-height: inherit;
			margin: 0;
			margin-left: 20rpx;
			padding: 12rpx 0;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			/* #ifdef MP-QQ || MP-ALIPAY */
			border: 1px solid;
			/* #endif */

			&:after {
				border-radius: 100px;
			}

			&.main-btn {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
</style>