min-shenze-applet-master/otherPages/mine/orderRecord/index.vue

<template>
	<!-- z-paging插件：具体使用文档请看https://z-paging.zxlee.cn/ -->
	<z-paging
		auto-show-back-to-top
		back-to-top-bottom="300rpx"
		:paging-style="{ paddingBottom: 'constant(safe-area-inset-bottom)', paddingBottom: 'env(safe-area-inset-bottom)' }"
		ref="paging"
		v-model="dataList"
		@query="queryList"
	>
		<template #top>
			<view class="c-bg-f"><u-tabs :activeStyle="{ color: '#3c9cff' }" :list="statusList" @click="statusClick"></u-tabs></view>
		</template>
		<view class="o-plr-24 o-ptb-24">
			<view v-for="(item, index) in dataList" :key="item.id" class="l-boxShadow o-mb-20 c-bg-f o-plr-24 o-ptb-12 c-radius-10">
				<view class="l-flex-between o-ptb-20">
					<view class="c-color-8 l-flex-RC">
						<text>取餐号：</text>
						<u-tooltip color="#888888" overlay :text="mealCode(item.id)" direction="bottom"></u-tooltip>
					</view>
				</view>
				<view class="l-flex-between o-ptb-20">
					<view class="c-color-8 l-flex-RC">
						<text>订单号：</text>
						<u-tooltip color="#888888" overlay :text="item.sn" direction="bottom"></u-tooltip>
					</view>
					<text class="c-color-8">{{ statusName(item.status) }}</text>
				</view>
				
				<u-line></u-line>
				<view @click="toDetail(item)" v-for="item1 in item.goodsNumsPrice">
					<view class="l-flex-RC o-mb-20">
						<view class="l-flex-1">
							<!-- 后台约定好A00，但是这个商品编号有可能会获取不到，获取不到会是A00 -->
							<u--image
								v-if="item1.imgId !== 'A00'"
								:width="GETT_miniProduct.includes(item1.imgId) ? '250rpx' : '200rpx'"
								:height="GETT_miniProduct.includes(item1.imgId) ? '250rpx' : '200rpx'"
								mode="aspectFit"
								:lazy-load="true"
								:fade="true"
								duration="450"
								:src="item1.imgUrl"
							>
								<view slot="error" style="font-size: 24rpx;">加载失败</view>
							</u--image>
						</view>
						<view class="l-flex-3">
							<view class="c-color-8 u-line-2">{{ item1.goodsName }}</view>
							<view class="l-flex-RC o-mt-30">
								<text class="c-color-8">X{{ item1.nums }}</text>
								<text class="c-color-MR o-ml-30">￥{{ item1.price }}</text>
							</view>
						</view>
					</view>
				</view>
				<u-line></u-line>
				<view class="l-flex-between o-ptb-20">
					<text class="c-text-12 c-color-8">{{ new Date(item.payDate).getTime() | date('yyyy-mm-dd hh:MM:ss') }}</text>
					<view class="l-flex-RC">
						<text class="c-text-12 c-color-8">共{{ item.goodsNums }}件商品</text>
						<view class="l-flex-RC o-ml-30">
							<text class="c-text-12 c-color-8">实付</text>
							<text class="c-text-16 c-color-MR">￥{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
// 导入接口
import { API_getOrderlist } from '@/common/api.js';
// 引入辅助函数
import { mapGetters } from 'vuex';
// 引入商品数据
import goodsList from '@/static/images/home/goods.js';
export default {
	data() {
		return {
			// z-paging插件的主数据，用作列表渲染
			dataList: [],
			// 标签数组，元素为对象，如[{name: '推荐'}]
			statusList: [
				{
					name: '已完成'
				},
				{
					name: '已退款'
				}
			],
			// 当前选中标签的索引
			current: 0
		};
	},
	computed: {
		// 使用辅助函数
		...mapGetters(['GETT_loginInfos', 'GETT_miniProduct']),
		// 状态名称
		statusName: () => {
			return status => {
				switch (status) {
					case 1:
						return '已完成';
						break;
					case 3:
						return '已退款';
						break;
					default:
						return '暂无';
						break;
				}
			};
		},
		mealCode: () => {
			return id => {
				return id.substring(id.length-6,id.length);
			};
		}
	},
	methods: {
		// 点击去详情页
		toDetail(row) {
			this.$M_Go(`/otherPages/mine/orderRecord/detail?row=${encodeURIComponent(JSON.stringify(row))}`);
		},
		// z-paging插件分页的方法
		queryList(pageNo, pageSize) {
			let param = {
				wxId: this.GETT_loginInfos.id,
				status: this.current === 0 ? 1 : 3,
				size: pageSize,
				current: pageNo
			};
			// 发起获取商品类表请求
			API_getOrderlist(param).then(res => {
				const { records } = res || [];
				if (records.length > 0) {
					records.forEach(item => {
						// 将不同品种的商品分隔出来
						let noteList = item.note.split(',');
						// 商品名称、数量、价格组成
						item.goodsNumsPrice = [];
						// 商品总数量
						item.goodsNums = 0;
						if (noteList.length > 0) {
							noteList.forEach((item1, index) => {
								// 处理数组中有null，undefined，''的情况
								if (item1) {
									item.goodsNumsPrice[index] = {};
									// 将商品名称和商品数量、商品价格分隔出俩
									let goodsNumsPrice = item1.split('-');
									// 组合商品编码
									item.goodsNumsPrice[index]['imgId'] = goodsNumsPrice[0];
									// 组合商品名称
									item.goodsNumsPrice[index]['goodsName'] = goodsNumsPrice[1];
									let numsPrice = goodsNumsPrice[2].split(':');
									// 组合价格
									item.goodsNumsPrice[index]['nums'] = numsPrice[0];
									// 组合数量
									item.goodsNumsPrice[index]['price'] = numsPrice[1];
									// 商品总数量
									item.goodsNums = this.$M_Big(item.goodsNums).add(numsPrice[0]);
								}
							});
						}
					});
					// 从商品列表中找到对应的商品路径（因为商品图片是存到前台的，要根据后台的标识找到路径）
					goodsList.forEach(item => {
						records.forEach(item1 => {
							// 给前台数据赋值接口数组
							if (item1.goodsNumsPrice.length > 0) {
								item1.goodsNumsPrice.forEach(item2 => {
									if (item2.imgId === item.imgId) {
										// 商品图片
										item2.imgUrl = item.imgUrl;
									}
								});
							}
						});
					});
				}
				this.$refs.paging.complete(records);
			});
		},
		// 点击订单状态标签
		statusClick(e) {
			this.current = e.index;
			this.$refs.paging.reload();
		}
	}
};
</script>

<style lang="scss"></style>