web-app/pages/confirm-order1/confirm-order1.vue

<template>
	<view class="confirm-order1">
		<navigator url="../address-manage/address-manage?choose=1" class="address">
			<view v-if="address" 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>
			<view v-else class="choose">
				<text class="add">+</text>
				<text class="text">添加收货人</text>
			</view>
			<text class="cuIcon-right"></text>
		</navigator>
		<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="list">
			<view class="list-item" v-for="(item, index) in list" :key="index" v-if="item.cart.reduce((t, e, i) => t + (item.sizeChoosed[i] ? e : 0), 0)">
				<view class="info">
					<view class="name">{{ item.name }}</view>
					<view class="num">
						<text>尺码：{{ item.sizeChoosed.reduce((t, e, i) => t + (item.cart[i] ? 1 : 0), 0) }}</text>
						<text>数量：{{ item.cart.reduce((t, e, i) => t + (item.sizeChoosed[i] ? e : 0), 0) }}</text>
					</view>
				</view>
				<view class="size-item" v-for="(sizeItem, sizeIndex) in item.size" :key="sizeIndex" v-if="item.sizeChoosed[sizeIndex] && item.cart[sizeIndex]">
					<image :src="item.main_img"></image>
					<view class="info">
						<text class="size">尺码：{{ sizeItem }}</text>
						<text class="basecolor">￥{{ item.money }}.00/{{ item.unit }}</text>
					</view>
					<view class="num">数量：{{ item.cart[sizeIndex] }}</view>
				</view>
			</view>
		</view>
		<view class="total app-item">
			<text>订单金额</text>
			<text class="basecolor">共计：￥{{ choosedPrice }}.00</text>
		</view>
		<view class="remark app-item">
			<text>备注信息</text>
			<input type="text" v-model="remark" placeholder="请输入备注信息" />
		</view>
		<view class="submit">
			<view class="left">合计：<text class="basecolor">￥{{ choosedPrice }}.00</text></view>
			<view class="right" @tap="sumbit">提交订单</view>
		</view>
	</view>
</template>

<script>
	import { deepClone } from '@/common/util/index.js'
	import { _API_PlaceOrder } from '@/apis/order.js'
	export default {
		data() {
			return {
				remark: ''
			}
		},
		computed: {
			address() { return this.$store.state.address.list[this.$store.getters['address/usingAddressIndex']] }, // 用户选择的地址
			list() { return this.$store.state.cart.list }, // 用户选择的地址
			choosedNum() { return this.$store.getters['cart/choosedNum'] },
			choosedPrice() { return this.$store.getters['cart/choosedPrice'] }
		},
		beforeDestroy() {
			this.$store.commit('address/CLEARCHOOSED') // 清除已选地址
		},
		methods: {
			sumbit() {
				if (this.address) {
					if (!this.requesting) {
						this.requesting = true
						uni.showLoading({ mask: true })
						let type = 0
						let total = 0
						let num = []
						let size_id = []
						deepClone(this.list).forEach((goodItem, goodIndex) => {
							goodItem.cart.forEach((n, i) => {
								if (n && goodItem.sizeChoosed[i]) {
									type ++
									total += n
									num.push(n)
									size_id.push(goodItem.size_id[i])
								}
							})
						})
						_API_PlaceOrder({ // 发送网络请求
							remark: this.remark, // 备注
							total,
							type,
							num,
							size_id,
							money: this.choosedPrice, // 订单总金额
							address_id: this.address.id // 地址
						}).then(res => {
							if (res.code === 200) {
								this.requesting = false
								this.$store.commit('address/CLEARCHOOSED') // 清除已选地址
								const money = this.choosedPrice
								deepClone(this.list).forEach((goodItem, goodIndex) => { // 清除购物车已选中项
									goodItem.cart.forEach((num, i) => {
										if (num && goodItem.sizeChoosed[i]) {
											this.$store.commit('cart/COUNTCHANGE', { value: 0, index: goodIndex, sizeIndex: i })
										}
									})
								})
								this.$store.commit('cart/CLEAREMPTYITEM')
								uni.redirectTo({ url: `../comfirm-order-success/comfirm-order-success?order_num=${res.data.order_num}&money=${money}` })
							} else {
								this.requesting = false
								uni.toast('下单失败，请稍后重试')
							}
						}).catch(() => his.requesting = false)
					}
				} else {
					uni.showToast({ title: '请选择地址', icon: 'none' })
				}
			}
		}
	}
</script>

<style lang="scss">
	.confirm-order1 {
		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;
				}
			}
		}
		.list {
			margin-top: 30rpx;
			.list-item {
				margin-bottom: 20rpx;
				> .info {
					height: 90rpx;
					@include flex();
					padding: 30rpx;
					background: #FFFFFF;
					margin-bottom: 1rpx;
					box-sizing: border-box;
					justify-content: space-between;
					.name {
						font-size: 32rpx;
						font-weight: bold;
					}
					.num {
						font-size: 28rpx;
						text {
							margin-left: 24rpx;
						}
					}
				}
				.size-item {
					@include flex();
					height: 200rpx;
					background: #FFFFFF;
					border-bottom: 2rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					align-items: flex-end;
					justify-content: space-between;
					padding: 30rpx 81rpx 30rpx 30rpx;
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 6rpx;
						margin-right: 30rpx;
					}
					> .info {
						@include flex(column);
						justify-content: space-between;
						align-items: flex-start;
						height: 100%;
						flex: 1;
						line-height: 2;
						.size {
							font-size: 32rpx;
							font-weight: bold;
						}
						.basecolor {
							font-weight: bold;
						}
					}
					.num {
						line-height: 2;
						font-size: 28rpx;
					}
				}
			}
		}
		.total {
			font-size: 32rpx;
			.basecolor {
				font-weight: bold;
			}
		}
		.remark {
			font-size: 32rpx;
			margin-bottom: 10rpx;
			input {
				text-align: right;
			}
		}
		.submit {
			@include flex();
			position: fixed;
			height: 100rpx;
			bottom: 0;
			width: 100vw;
			background: #FFFFFF;
			border-top: 1rpx solid #999999;
			.right {
				width: 280rpx;
				height: 100%;
				background: $app-base-color;
				color: #FFFFFF;
				@include flex();
				font-size: 36rpx;
			}
			.left {
				height: 100%;
				flex: 1;
				font-size: 28rpx;
				box-sizing: border-box;
				padding: 0 31rpx;
				line-height: 100rpx;
			}
		}
	}
</style>