shop-uniapp-240426/pages/orderDetail/orderDetail.vue

<template>
	<view class="order-detail">
		<u-navbar :title="$t('page.orderDetail.order-detail')" placeholder @leftClick="leftClick()"></u-navbar>
		<!-- <view class="user-info white">
			<img src="../../static/orderDetail/position@3x.png" alt="" />
			<view class="user-base-info">
				<text class="name">{{ $t('page.orderDetail.receiving-information-name') }}</text>
				<text class="phone">159****2932</text>
				<text class="deliver-to">{{ $t('page.orderDetail.receiving-information-deliver') }}</text>
				<text class="address">{{ $t('page.orderDetail.receiving-information-address') }}</text>
			</view>
			<u-icon name="arrow-down"></u-icon>
		</view> -->
		<view class="order-info white">
			<view class="order-info-top white inside-margin">
				<view class="merchant">
					<!-- xxxxxx商家 -->
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<text class="order-status">{{ classifyList[productList.state] }}</text>
			</view>
			<view class="product-list">
				<orderProductList :product="productList"></orderProductList>
			</view>
			<view class="unknown inside-margin">
				<!-- TôngcÃng:￥<text class="unknown-price">5280.0</text>(baogòmcàvànchuyên¥0.0) -->
				{{ $t('page.orderDetail.total') }}<text
					class="unknown-price">{{ productList.sumPrice }}</text>
			</view>
			<view class="account-payable">
				<view class="account-payable-title">
					<text>{{ $t('page.orderDetail.account-payable') }}</text>
					<!-- <u-icon name="arrow-down"></u-icon> -->
				</view>
				<view class="account-payable-price">
					<view class="money-symbol">
						<!-- {{ $t('$') }} -->
					</view>
					<view class="num">{{ productList.sumPrice }}</text>
					</view>
				</view>
			</view>
			<view class="order-number">
				<text class="order-number-title">{{ $t('page.orderDetail.order-number') }}</text>
				<view class="number">
					<text class="code">{{ productList.id }}</text>
					<text class="copy" @click="copy(productList.id)">{{ $t('page.orderDetail.copy') }}</text>
				</view>
			</view>
			<view v-if="productList.name && productList.state != '0'" class="receiving-information">
				<text class="receiving-information-title">{{ $t('page.orderDetail.receiving-information') }}</text>
				<!-- <text class="address">{{ productList.name + ", " + productList.phone + ", " +productList.detailAddress }}</text> -->
				<text
					class="address">{{ productList.name + ', ' + productList.phone + ', ' + productList.detailAddress }}</text>
			</view>
			<!-- <view class="transaction-number">
				<text class="transaction-number-title">{{ $t('page.orderDetail.transaction-number') }}</text>
				<text class="transaction-number-code">4750376583629697865656</text>
			</view> -->
			<view class="create-time">
				<text class="create-time-title">{{ $t('page.orderDetail.create-time') }}</text>
				<text class="create-time-detail">2024-04-27 12:23:22</text>
			</view>
			<!-- <view class="closing-time">
				<text class="closing-time-title">{{ $t('page.orderDetail.closing-time') }}</text>
				<text class="closing-time-detail">2024-04-27 12:23:56</text>
			</view> -->
			<!-- <view class="pack-more-information">
				<text>{{ $t('page.orderDetail.more') }}</text>
				<u-icon name="arrow-up"></u-icon>
			</view> -->
		</view>
		<view class="contact-seller white">
			<view @click="toServer()" class="box">
				<img src="../../static/orderDetail/server@3x.png" alt="" />
				<text>{{ $t('page.orderDetail.contact-seller') }}</text>
			</view>
		</view>
		<view class=" product-list">
			<productList :list="list"></productList>
		</view>
		<view v-if="productList.state != '0' && productList.state != '4'" class="order-detail-bottom">
			<view v-if="productList.state == '3'" @click="deleteOrder(productList)" class="btn">
				{{ $t('page.orderDetail.delete-order') }}
			</view>
			<view v-if="showRepurchase(productList.state)" @click="toRepurchase()" class="btn repurchaseBtn">
				{{ $t('page.orderDetail.repurchase') }}
			</view>
		</view>
		<orderPanel :open.sync="orderPanenOpen" @definiteExecution="definiteExecution" @closePanel="closePanel"
			:title="panelTitle" :desc="panelDesc" :num="panelNum" :url="imageUrl"></orderPanel>
	</view>
</template>

<script>
	import productList from '@/components/product/productList.vue'
	import orderProductList from '@/components/order-product/orderProductList.vue'
	import orderPanel from '../../components/order-panel/orderPanel.vue';
	export default {
		components: {
			orderProductList,
			productList,
			orderPanel
		},
		data() {
			return {
				classifyList: [
					this.$t('page.order.pendingPayment'),
					this.$t('page.order.pendingShipment'),
					this.$t('page.order.pendingReceipt'),
					this.$t('page.order.completed')
				],
				//商品数据
				productList: {},
				orderPanenOpen: false,
				panelTitle: '',
				panelDesc: '',
				panelNum: '',
				list: [],
				imageUrl : '',
				queryParams: {

				}
			}
		},
		onShow() {
			this.getorderDetail();
			this.getProduct();
		},
		methods: {
			getorderDetail() { //获取订单详情
				this.request('getOrderOne', {}, {
					id: this.$route.query.id,
				}).then(res => {
					this.productList = res.result
				})
			},
			copy(e) {
				uni.setClipboardData({
					data: e + '',
					success: () => {
						uni.showToast({
							title: this.$t('success-operation'),
							icon: 'none'
						})
					}
				})
			},
			leftClick() {
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			toRepurchase() {
				uni.navigateTo({
					url: '/pages/repurchase/repurchase?id=' + this.$route.query.id
				})
			},
			closePanel() {
				this.orderPanenOpen = false;
			},
			definiteExecution() {
				this.$MyToast("操作成功!", {
					title: this.$t('myToactTitle'),
					icon: true //是否开启icon
				})
				this.orderPanenOpen = false;
				this.leftClick();
			},
			deleteOrder(item) { //删除订单
				this.panelTitle = this.$t('page.orderDetail.delete-order-title')
				this.panelDesc = this.$t('page.orderDetail.delete-order-desc')
				this.panelNum = this.$t('page.orderDetail.delete-product-num');
				this.imageUrl = item.image
				this.orderPanenOpen = true;
			},
			getProduct() { //获取商品列表
				this.request('getShopPage', {}, {
						"pageSize": 10,
						"currentPage": 1
					})
					.then(res => {
						this.list = parseList(res.result.records);
					})
			},
			showRepurchase(state) { //是否显示回购按钮
				return state != '4' && state == '1' || state == '2' || state == '3'
			},
			toServer(){		//找客服
				uni.navigateTo({
					url: `/pages/login/contactCustomerService?title=${this.$t('page.orderDetail.contact-seller')}&url=/pages/orderDetail/orderDetail&id=` + this.$route.query.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		padding-bottom: 100rpx;

		.inside-margin {
			padding: 10px;
		}

		.white {
			background: white;
		}

		.in-block {
			display: inline-block;
		}

		.user-info {
			display: flex;
			align-items: center;
			margin-top: 56px;
			padding: 25px 10px;

			img,
			.u-icon {
				width: 30rpx;
				height: 30rpx;
			}

			.user-base-info {
				width: calc(100% - 60rpx);
				padding-left: 10px;
				font-size: 24rpx;

				text {
					margin: 0px 3px;
				}
			}
		}

		.order-info {
			margin-top: 10px;

			.order-info-top {
				display: flex;
				justify-content: space-between;
				background: white;
				font-size: 28rpx;

				.merchant {
					display: flex;
				}

				.order-status {
					color: #ED762F;
				}
			}

			.product-list {
				padding: 0px 5px;
			}

			.unknown {
				display: flex;
				justify-content: flex-end;
				font-size: 24rpx;

				.unknown-price {
					font-size: 30rpx;
				}
			}

			.account-payable,
			.order-number,
			.receiving-information,
			.transaction-number,
			.create-time,
			.closing-time {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 12px 10px;

				>text,
				>view {
					width: 77%;
					font-size: 26rpx;

					&:nth-child(1) {
						width: 23%;
						font-weight: 600;
					}

					&:nth-child(2) {
						display: flex;
						justify-content: flex-end;
						text-align: right;
						color: #888;
					}
				}

				.account-payable-title {
					display: flex;
					align-items: center;
				}

				.number {
					display: flex;
					align-items: center;

					.copy {
						margin-left: 5px;
						border-left: 1px solid #ccc;
						padding-left: 5px;
					}
				}

				.account-payable-price {
					display: flex;

					.money-symbol {
						display: flex;
						align-items: center;
					}

					.num {
						display: flex;
						align-items: center;
						font-size: 35rpx;
						color: #E01717;

						text {
							font-size: 26rpx;
						}
					}
				}
			}

			.pack-more-information {
				display: flex;
				padding: 5px 10px;
				font-size: 25rpx;
			}
		}

		.contact-seller {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 15px 10px;
			margin-top: 15px;
			font-size: 26rpx;

			img {
				width: 35rpx;
				height: 35rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}
		}

		.order-detail-bottom {
			position: fixed;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			bottom: 0;
			left: 0;
			height: 100rpx;
			background: white;
			width: 100%;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 70rpx;
				border-radius: 35rpx;
				padding: 0px 50rpx;
				border: 1px solid #ccc;
				margin: 0px 5px;
				text-align: center;
				font-size: 26rpx;
			}

			.repurchaseBtn {
				border: 1px solid #ED762F;
				color: #ED762F;
			}
		}
	}
</style>