chelvc-custom/src/PageMine/orderModules/index.vue

<template>
	<view class="container">
		<u-sticky style="margin-top: 15rpx; margin-left: 20rpx" bgColor="#fff">
			<u-tabs lineWidth="40" :list="list" :current="current" @change="handlerChangeItem"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
		</u-sticky>

		<!-- 订单 -->
		<view class="order">
			<view class="order-box">
				<view class="order-item" v-for="(item, index) of init_list" :key="index">
					<view class="" @click="handlerSkipDetail(item)">
						<view class="item-top">
							<view class="top-left gray-color">订单编号 : {{ item.orderSn }}</view>
							<view class="top-right">{{ type_name }}</view>
						</view>
						<view class="item-top">
							<view class="top-left gray-color">支付时间 : {{ item.createTimeText }}</view>
							<view class="top-right"></view>
						</view>
					</view>

					<u-line margin="20rpx 0"></u-line>

					<view class="item-center" :key="idx" v-for="(itm, idx) of item.goodsInfo">
						<view class="center-left">
							<image :src="itm.goodsPic" class="img"></image>
						</view>
						<view class="center-right">
							<view class="r-l">
								<view class="right-name"> {{ itm.goodsName }} </view>
								<view class="right-descript"> 测试商品描述111 </view>
								<view class="l-box">
									<view class="right-price"> ￥{{ itm.goodsPrice }} </view>
									<view class="right-numb"> ×{{ itm.goodsQuantity }} </view>
								</view>
							</view>
							<view class="r-r">
								<view class="r-item" @click.stop="handlerSkipComment(item, itm)"
									v-if="type == 4 && itm.assessStatus == 0">
									<u-icon name="chat" color="#000" size="28"></u-icon>
									<span>评价</span>
								</view>
							</view>
						</view>
					</view>

					<u-line margin="20rpx 0" dashed="true"></u-line>

					<view class="item-allnumb-box">
						<view class="allnumb-left"> {{ item.allNumb }}件商品 </view>
						<view class="allnumb-right">
							<span class="r-text">共计</span>￥{{ item.allPrice }}
						</view>
					</view>

					<view class="item-bottom">
						<button class="btn" v-if="current == 0" @click='handlerCancelOrder(item)'>取消订单</button>
						<!-- <button class="btn" v-if='current == 1' @click='handlerOrderBtn(1)'>申请退款</button> -->
						<!-- <button class="btn" v-if='current == 2' @click='handlerOrderBtn(2)'>售后</button> -->
					</view>
				</view>
			</view>
			<view v-if="init_list.length == 0" style="margin-top: 40rpx">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userOrdersApi,
		getUserOrderList,
		cancelOrder
	} from '@/api/client/order';
	export default {
		data() {
			return {
				current: 0,
				type: 0,
				type_name: '',
				size: 20,
				// 订单状态：0->待付款；1->已付款；2->已发货；3->已完成；4->已关闭；5->无效订单
				list: [{
						name: '待付款',
						type: 0,
					},
					{
						name: '已付款',
						type: 1,
					},
					// {
					// 	name: '待发货',
					// 	type: 2,
					// },
					// {
					// 	name: '已发货',
					// 	type: 3,
					// },
					{
						name: '已完成',
						type: 3,
					},
					{
						name: '已关闭',
						type: 4,
					}
					// ,
					//       {
					//         name: '无效订单',
					//         type: 5,
					//       },
				],
				init_list: [],
			};
		},
		mounted() {
			// this.userOrdersPage();
		},
		onShow() {
			let cur = this.$store.state.order.skip_order_type.type;
			switch (cur) {
				case 0:
					this.current = 0;
					this.userOrdersPage(cur);
					break;
				case 1:
					this.current = 2;
					this.userOrdersPage(cur);
					break;
				case 2:
					this.current = 3;
					this.userOrdersPage(cur);
					break;
			}
		},
		computed: {
			allNumber() {
				this.init_list.map(rs => {
					let sum = 0;
					let price = 0;
					rs.goodsInfo.map(rc => {
						sum += rc.goodsQuantity;
						price += rc.goodsPrice;
					});
					rs.allNumb = sum;
					rs.allPrice = price;
				});
				return;
			},
		},
		methods: {
			handlerChangeItem(data) {
				this.current = data.index;
				this.type = data.type;
				this.type_name = data.name;
				this.userOrdersPage(this.type);
			},

			async userOrdersPage(type) {
				let orderStatus = type == undefined ? 0 : `${type}`;
				let res = await getUserOrderList({
					status: orderStatus,
					paging: '1,20',
				});
				if ((res.code = 200 && res.data)) {
					this.init_list = res.data.records;
					this.init_list.map(rs => {
						rs.createTimeText = uni.$u.timeFormat(rs.createTime, 'yyyy-mm-dd hh:MM:ss');
					})
				}
			},

			// 跳转到订单详情
			handlerSkipDetail(e) {
				uni.navigateTo({
					url: `/PageMine/orderModules/orderDetail?orderList=${JSON.stringify(e)}`,
				});
			},
			// 取消订单
			handlerCancelOrder(e) {
				cancelOrder(e.id).then(res => {
					if (res.code == 'OK') {
						uni.showToast({
							title: '订单取消成功',
							icon: 'none',
						});
						this.userOrdersPage(this.type);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
						});
						return
					}
				});
			},
			// 点击跳转到商品评价
			handlerSkipComment(item, itm) {
				uni.navigateTo({
					url: `/PageMine/orderModules/orderComment?orderList=${JSON.stringify(item)}&goodsList=${JSON.stringify(itm)}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.order {
		margin-top: 10px;
		padding: 10rpx 20rpx 20rpx;
		box-sizing: border-box;

		.order-box {
			.order-item {
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);

				.item-top {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
				}

				.item-center {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.center-left {
						height: 160rpx;

						.img {
							width: 160rpx;
							height: 160rpx;
						}
					}

					.center-right {
						width: 100%;
						height: 160rpx;
						display: flex;
						justify-content: space-between;
						margin-left: 20rpx;

						.r-l {
							display: flex;
							flex-direction: column;
							justify-content: space-around;

							.right-name {
								color: #4d5671;
								font-size: 32rpx;
								font-weight: bold;
							}

							.right-descript {
								font-size: 28rpx;
								color: #858797;
							}

							.l-box {
								display: flex;
								font-size: 24rpx;
								align-items: center;
								font-style: italic;

								.right-price {
									margin-right: 20rpx;
									font-weight: bold;
									font-size: 28rpx;
									color: #f57f32;
								}

								.right-numb {
									font-size: 24rpx;
									color: #858797;
								}
							}
						}

						.r-r {
							.r-item {
								align-items: center;
							}
						}
					}
				}

				.item-allnumb-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: bold;

					.allnumb-left {
						font-size: 32rpx;
					}

					.allnumb-right {
						font-size: 26rpx;
						color: #f57f32;

						.r-text {
							color: #000;
						}
					}
				}
			}
		}
	}

	.item-bottom {
		width: 100%;
		margin-top: 20rpx;

		.btn {
			height: 70rpx;
			background-color: rgba(248, 213, 53, 0.8);
			color: #4e5059;
			font-size: 28rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 20rpx;
		}
	}

	.gray-color {
		color: #858797;
	}

	::deep .u-tabs__wrapper__nav__item__text {
		font-size: 30px;
	}
</style>