orderDetail.vue 6.58 KB
<template>
	<view class="container">
		<Navbar title="订单详情" :canBack="true"></Navbar>
		<view class="topTitleCss flex flex-direction">
			<view class="text-xxl text-bold">
				{{ ddDdzt.get(orderDetail.fDdzt)}}
			</view>
			<view class="text-gray text-lg margin-top">
				订单完成时间:{{ orderDetail.fSjwcsj?orderDetail.fSjwcsj:orderDetail.fDdzt==='202'? "等待配送中":orderDetail==='207'?'已取消':ddDdzt.get(orderDetail.fDdzt)}}
			</view>
		</view>
		<view class="orderCard">
			<view class="flex align-center">
				<view class="flex align-center w80">
					<u-icon name="/static/images/home/shopTitle.png" size="20"></u-icon>
					<view class="margin-left-xs overflow-one-lines text-gray">
						{{orderDetail.fCzmc || ''}}
					</view>
				</view>
				<!-- <view class="themeColor">
					待配送
				</view> -->
			</view>
			<u-divider></u-divider>
			<view class="" v-for="(item,index) in orderDetail.ddxqList" :key="index">
				<view class="flex justify-between margin-top">
					<view class="">
						<u-image :src="item.image" width="80px" height="80px"></u-image>
					</view>
					<view class="w60 flex flex-direction  justify-between margin-left-xs">
						<view class="overflow-one-lines">
							{{item.fSpmc || ""}}
						</view>
						<view class="text-sm text-gray overflow-one-lines">
							{{item.fMs || ""}}
						</view>
						<view class="text-lg text-bold overflow-one-lines">
							¥{{item.fDj || 0}}
						</view>
					</view>
					<view class="flex align-end">
						X {{item.fSl || ""}}
					</view>
				</view>
				<!-- <u-divider></u-divider> -->
			</view>
			<view class="flex margin-top-lg w90">
				<view class="text-gray overflow-one-lines">
					订单编号:{{orderDetail.fDddh || ""}}
				</view>
			</view>
			<view class="flex  margin-top-sm w90">
				<view class="text-gray overflow-one-lines">
					备注信息:{{orderDetail.fMjly || ""}}
				</view>
			</view>
			<view class="flex margin-top-lg margin-bottom-lg justify-end" v-if="orderDetail.fMjly !== '无单配送'">
				<view class="text-gray">
					<!-- 共3件商品 -->
					合计:
				</view>
				<view class="themeColor">
					¥{{orderDetail.fDdje || "0"}}
				</view>
			</view>
		</view>

		<!-- 收货信息 -->
		<view class="contactsCardCss" v-if="orderDetail.fShlxr">
			<view class="margin-top text-lg">
				收货信息
			</view>
			<view class="flex flex-direction margin-top-xs">
				<view class="flex justify-between align-center margin-top">
					<view class="text-gray w30">
						联系人
					</view>
					<view class="flex justify-end w70">
						{{orderDetail.fShlxr || ""}}
					</view>
				</view>
				<view class="flex justify-between align-center margin-top">
					<view class="text-gray">
						联系方式
					</view>
					<view class="flex justify-end w70">
						{{orderDetail.fShlxrdh || ""}}
					</view>
				</view>
				<view class="flex justify-between align-center margin-top">
					<view class="text-gray">
						联系地址
					</view>
					<view class="flex justify-end w70">
						{{orderDetail.fShsf}} {{orderDetail.fShs}} {{orderDetail.fShq}} {{orderDetail.fShjd}}
						{{orderDetail.fShxxdz}}
					</view>
				</view>
			</view>
		</view>


		<view class="productCardCss">
			<view class="flex margin-top justify-between align-center" v-if="orderDetail.fMjly !== '无单配送'">
				<view class=" text-lg">
					商品总价
				</view>
				<view class="themeColor text-xl">
					¥{{orderDetail.fDdje || "0"}}
				</view>
			</view>
			<view class="flex flex-direction margin-top-xs">
				<view class="flex justify-between align-center margin-top">
					<view class="text-gray w30">
						订单编号
					</view>
					<view class="flex justify-end w70">
						{{orderDetail.fDddh || ""}}
					</view>
				</view>
				<view class="flex justify-between align-center margin-top">
					<view class="text-gray">
						下单时间
					</view>
					<view class="flex justify-end w70">
						{{orderDetail.fCjsj || ""}}
					</view>
				</view>
				<!-- 	<view class="flex justify-between align-center margin-top">
					<view class="text-gray">
						支付方式
					</view>
					<view class="flex justify-end w70">
						微信支付
					</view>
				</view> -->
				<view class="flex justify-between align-center margin-top">
					<view class="text-gray">
						提取方式
					</view>
					<view class="flex justify-end w70">
						{{ ddPsfs.get(orderDetail.fPsfs)}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {dd_zflx, dd_fkfs, dd_psfs, dd_zffs, dd_ddly, sys_sf, dd_ddzt} from "@/utils/enums";

	export default {
		components: {},
		props: {

		},
		data() {
			return {
        ddDdzt: new Map(Object.values(dd_ddzt).map(item => [item.code, item.info])),
        ddPsfs: new Map(Object.values(dd_psfs).map(item => [item.code, item.info])),
				orderDetail: {},
			}
		},
		computed: {

		},
		onLoad(data) {
			if (data.detail) {
				this.orderDetail = JSON.parse(data.detail);
				console.log('打印this.orderDetail', this.orderDetail);
				console.log('订单详情', JSON.parse(JSON.stringify(this.orderDetail)));
				this.loadImages();
			}
		},
		methods: {
			async loadImages() {
				let that = this;
				if (this.orderDetail.ddxqList && this.orderDetail.ddxqList.length > 0) {
					for (let i = 0; i < this.orderDetail.ddxqList.length; i++) {
						let JsonParse = JSON.parse(this.orderDetail.ddxqList[i].fTp);
						let photoUrl = await this.$getPhotoUrl(JsonParse[0].response.fileId);
						this.$set(this.orderDetail.ddxqList[i], 'image', photoUrl);
					}
					// await Promise.all(this.orderObj.ddxqList.map(async (item) => {
					// 	let JsonParse = JSON.parse(item.fTp);
					// 	let photoUrl = await that.$getPhotoUrl(JsonParse[0].response.fileId);
					// 	this.$set(item, 'image', photoUrl);
					// }));
				}
			},
			async getDetailInfo(id) {
				let result = await this.$api.orderApi.getOrderDetail(id);
				console.log('打印getDetailInfo===result', result);
				let {
					code,
					value
				} = result;
				if (code == 200) {
					this.orderDetail = value;
					this.orderDetail.ddxqList.map(async item => {
						let JsonParse = JSON.parse(item.fTp);
						item.fTp = await this.$getPhotoUrl(JsonParse[0].response.fileId);
					});
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 10px;
	}

	.topTitleCss {
		margin: 20px 10px;
	}

	.orderCard {
		margin: 10px;
		padding: 10px;
		background: #fff;
		border-radius: 15px;
	}

	.contactsCardCss {
		margin: 10px;
		padding: 10px;
		background: #fff;
		border-radius: 15px;
	}

	.productCardCss {
		margin: 10px;
		padding: 10px;
		background: #fff;
		border-radius: 15px;
	}
</style>