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>
					<u-tag @click="setClipboardData(item.sn)" text="复制" size="mini"></u-tag>
					<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">
							<view :style="{'width': GETT_miniProduct.includes(item.imgId) ? '200rpx' : '250rpx', 'height': GETT_miniProduct.includes(item.imgId) ? '200rpx' : '250rpx'}">
								<!-- 后台约定好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>
						<view style="margin-left: 12rpx" 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();
			},
			// 复制文本到粘贴板
			setClipboardData(sn) {
				// #ifndef H5
				uni.setClipboardData({
					// 优先使用copyText字段，如果没有，则默认使用text字段当做复制的内容
					data: sn,
					success: () => {
						this.showToast && uni.$u.toast('复制成功')
					},
					fail: () => {
						this.showToast && uni.$u.toast('复制失败')
					},
					complete: () => {}
				})
				// #endif
			}
		}
	};
</script>

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