web-app/pages/order-detail1/order-detail1.vue

<template>
	<view class="order-detail1">
		<view url="../address-manage/address-manage?choose=1" class="address">
			<view class="address-info">
				<view class="top">
					<text class="name">收货人：{{ address.con_name }}</text>
					<text class="phone">{{ address.con_mobile }}</text>
				</view>
				<view class="detail ellipsis">{{ address | getAddressString }}</view>
			</view>
			<text class="cuIcon-right"></text>
		</view>
		<view class="border">
			<text style="margin-left: 0;"></text>
			<text v-for="item in 21" :key="item" :class="{ red: item % 2 === 1 }"></text>
		</view>
		<view class="order_num app-item">
			<text>订单编号：{{ order_num }}</text>
			<text class="basecolor">{{ status }}</text>
		</view>
		<view class="list" @click="toList">
			<view class="list-item" v-for="(item, index) in goodList" :key="index">
				<image :src="item.main_img" ></image>
				<view class="info">
					<text>尺码：{{ item.size.length }}</text>
					<text>数量：{{ item.num.reduce((t, e) => t + e, 0) }}</text>
					<text>共计金额：<text class="basecolor">￥{{ item.money * item.num.reduce((t, e) => t + e, 0) }}</text></text>
				</view>
			</view>
		</view>
		<view v-if="nopay">
			<view class="top app-item">
				<text>付款信息</text>
			</view>
			<view class="app-item">
				<text>订单金额</text>
				<text>￥{{ money }}</text>
			</view>
			<view class="app-item">
				<text>应付金额</text>
				<text>￥{{ money }}</text>
			</view>
			<view class="app-item pay">
				<text>已付：<text class="basecolor">￥0.00</text></text>
				<text class="paynow" @click="payNow">立即付款</text>
			</view>
		</view>
		<view class="app-item t">
			<text>下单时间</text>
			<text>{{ created_at }}</text>
		</view>
		<view class="app-item t">
			<text>物流公司</text>
			<text>{{ track_company }}</text>
		</view>
		<view class="app-item">
			<text>物流单号</text>
			<text>{{ track_number }}</text>
		</view>
		<view class="app-item">
			<text>发货时间</text>
			<text>{{ track_time }}</text>
		</view>
		<view class="app-item">
			<text style="width: 160px">物流备注</text>
			<text style="padding: 8px 0;">{{ track_remark }}</text>
		</view>
		<view class="app-item t" @click="showRemark">
			<text>订单备注</text>
			<text class="cuIcon-right"></text>
		</view>
		<navigator :url="'../order-detail1-log/order-detail1-log?order_num=' + order_num" class="app-item">
			<text>操作日志</text>
			<text class="cuIcon-right"></text>
		</navigator>
		<view class="submit" @click="buyAgain">
			<view class="right">再次购买</view>
		</view>
	</view>
</template>

<script>
	import { _API_GoodList } from '@/apis/good.js'
	import { _API_OrderDetail1 } from '@/apis/order.js'
	export default {
		data() {
			return {
				address: {},
				goodList: [],
				nopay: false,
				status: '',
				order_id:'',
				order_num: '',
				remark: '',
				money: '',
				created_at: '',
				track_company: '',
				track_number: '',
				track_remark: '',
				track_time: ''
			}
		},
		onLoad({ created_at, status, order_id, order_num, nopay, money }) {
			this.status = status
			this.money = money
			this.order_id = order_id
			this.order_num = order_num
			this.created_at = created_at
			if (nopay) {
				this.nopay = true
			}
			uni.loading()
			_API_OrderDetail1({ order_num }).then(({ code, data: { remark, address, list, track_company, track_number, track_remark, track_time } }) => {
				this.remark = remark
				this.address = address
				this.goodList = list
				this.track_company = track_company
				this.track_number = track_number
				this.track_remark = track_remark
				this.track_time = track_time
			})
		},
		methods: {
			showRemark() { // 点击备注
				if (this.remark) {
					uni.showModal({ title: '备注', content: this.remark, showCancel: false })
				} else {
					uni.toast('该订单无备注')
				}
			},
			toList() { // 点击查看商品详情
				uni.setStorageSync('lll', JSON.stringify(this.goodList))
				uni.navigateTo({ url: '../order-detail1-list/order-detail1-list' })
			},
			payNow() {
				uni.navigateTo({ url: `../pay-order/pay-order?order_num=${this.order_num}&money=${this.money}&order_id=${this.order_id}` })
			},
			buyAgain() {
				uni.showModal({
					title: '提示',
					content: '确定要再次购买？',
					success: (res) => {
						if (res.confirm) {
							uni.loading()
							_API_GoodList().then(({ data: { list: list1 } }) => {
								uni.loading()
								list1.forEach(e => e.cart = Array(e.size.length).fill(0))
								_API_OrderDetail1({ order_num: this.order_num }).then(({ data: { list: list2 } }) => {
									this.$store.commit('cart/CLEAR')
									list1.forEach((item, index) => {
										const findRes = list2.find(e => e.attr_id == item.attr_id)
										if (findRes) {
											findRes.size.forEach((size, sizeIndex) => {
												const goodItemSizeIndex = list1[index].size.findIndex(e => e === size)
												list1[index].cart[goodItemSizeIndex] = findRes.num[sizeIndex]
											})
											item.choosed = true
											item.sizeChoosed = Array(item.size.length).fill(true)
											this.$store.commit('cart/ADD', item)
											uni.switchTab({ url: '../shop-car1/shop-car1' })
										}
									})
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-detail1 {
		height: 100vh;
		overflow: auto;
		background: $app-base-bg;
		border-bottom: 100rpx solid transparent;
		.address {
			height: 120rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			@include flex();
			justify-content: space-between;
			.address-info {
				flex: 1;
				color: #181818;
				font-size: 28rpx;
				@include flex(column);
				align-items: flex-start;
				.name {
					font-size: 32rpx;
					font-weight: bold;
				}
				.phone {
					margin-left: 30rpx;
				}
				.detail {
					width: 654rpx;
					color: #666666;
				}
			}
			.choose {
				@include flex();
				justify-content: flex-start;
				.add {
					@include flex();
					background: $app-base-color;
					font-size: 40rpx;
					color: #FFFFFF;
					width: 60rpx;
					height: 60rpx;
				}
				.text {
					margin-left: 17rpx;
					color: 32rpx;
				}
			}
			.cuIcon-right {
				font-size: 38rpx;
			}
		}
		.border {
			@include flex();
			height: 6rpx;
			background: #FFFFFF;
			text {
				flex: 1;
				height: 100%;
				background: #3283FA;
				margin-left: 8rpx;
				&.red {
					background: #F56C6C;
				}
			}
		}
		.order_num {
			height: 90rpx;
			font-size: 28rpx;
			margin-top: 14rpx;
			font-weight: bold;
			background: #FFFFFF;
		}
		.list {
			.list-item {
				height: 200rpx;
				margin-top: 1rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx;
				@include flex();
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 6rpx;
				}
				.info {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					font-weight: bold;
					margin-left: 30rpx;
					@include flex(column);
					align-items: flex-start;
					justify-content: space-between;
				}
			}
		}
		.app-item {
			font-size: 28rpx;
			font-weight: bold;
			&.top {
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}
			&.t {
				margin-top: 20rpx;
			}
			&.pay {
				justify-content: flex-end;
				.paynow {
					width: 156rpx;
					height: 54rpx;
					@include flex();
					color: #FFFFFF;
					margin-left: 28rpx;
					font-weight: normal;
					border-radius: 54rpx;
					background: $app-base-color;
				}
			}
		}
		.submit {
			@include flex();
			position: fixed;
			height: 100rpx;
			bottom: 0;
			font-size: 36rpx;
			width: 100vw;
			background: #FFFFFF;
			color: #FFFFFF;
			border-top: 1rpx solid #999999;
			.left {
				width: 190rpx;
				height: 100%;
				color: #666666;
				@include flex();
			}
			.center {
				flex: 1;
				@include flex();
				height: 100%;
				background: #F7BC54;
			}
			.right {
				height: 100%;
				flex: 1;
				@include flex();
				background: #F76454;
			}
		}
	}
</style>