book-hi/pages-home/pages/book-order.vue

<template>
	<view class="book-order">
		<!-- 取货地址部分 -->
		<view class="section-card">
			<view class="flex-a flex-j-b mb-20" @click="handleAddress" v-if="defaultAddr.id">
				<image src="../static/adderss.png" style="width:40rpx;height: 40rpx;"></image>
				<view class="flex-d flex-1 ml-24" style="margin-right: 90rpx;">
					<view class="flex-a flex-j-b  mb-10">
						<view :style="titleStyle">发货人：{{defaultAddr.name}}</view>
						<view :style="titleStyle">{{defaultAddr.mobile}}</view>
					</view>
					<view :style="titleStyle">地址：{{defaultAddr.detailAddress}}</view>
				</view>
				<u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
			</view>

			<view class="flex-a flex-j-b" @click="handleAddress" v-else>
				<view class="flex-a">
					<u-icon name="plus-circle-fill" :size="48" color="#38C148" top="2"></u-icon>
					<view :style="titleStyle" class="ml-10 font-30">取货地址</view>
					<text class="u-required">*</text>
				</view>

				<view class="flex-a">
					<view :style="titleStyle" class="ml-10">请添加</view>
					<u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
				</view>
			</view>

			<view class="free-pickup mb-20 mt-20">
				<view class="pickup-title">免费上门取货</view>
				<view class="pickup-desc">书嗨将预约指定快递上门取件，邮费由书嗨承担</view>
			</view>
			<view class="flex-a flex-j-b time-card" style="padding:0 10rpx" @click="showTimePicker = true">
				<view class="flex-a">
					<view :style="titleStyle" class="ml-10 font-28">取件时间</view>
					<text class="u-required">*</text>
				</view>

				<view class="flex-a">

					<view v-if="selectedTime.day" :style="titleStyle" class="ml-10">{{selectedTime.day}}
						{{selectedTime.time}}
					</view>
					<view v-else :style="titleStyle" class="ml-10">请选择快递上门取件时间</view>
					<u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
				</view>
			</view>
		</view>

		<!-- 快递备注部分 -->
		<view class="section-card">
			<view class="flex-a flex-j-b mb-20" @click="showExpressPicker">
				<view class="flex-a">
					<view :style="titleStyle" class="font-28">快递备注</view>
				</view>

				<view class="flex-a">
					<view :style="titleStyle" class="ml-10">{{ submitData.expressDelivery || '请选择' }}</view>
					<u-icon name="arrow-right" :size="28" color="#666" top="3"></u-icon>
				</view>
			</view>
			<view class="express-desc">请从【顺丰】或【京东】中选择可正常收寄的快递，如您不选择，则由系统根据区域情况自动分配</view>
		</view>

		<!-- 书籍列表 -->
		<view class="book-list">
			<book-item v-for="book in books" :key="book.id" :book="book"></book-item>
		</view>

		<!-- 底部栏 -->
		<view class="bottom-bar">
			<view class="agreement">
				<u-checkbox v-model="agreed" shape="circle">
					<text class="agreement-text">我已阅读并同意</text>
					<text class="agreement-link">《书嗨用户协议》</text>
				</u-checkbox>
			</view>
			<view class="order-summary">
				<view class="total">
					共<text class="price">{{ totalBooks }}</text>件 预估回收价
					<text class="price">¥{{ totalPrice }}</text>
				</view>
				<u-button type="primary" @click="submitOrder" :custom-style="{ margin: 0 }">提交订单</u-button>
			</view>
		</view>

		<!-- 添加快递选择器 -->
		<u-picker v-model="showPicker" mode="selector" :range="expressList" @confirm="onExpressConfirm"
			@cancel="showPicker = false" range-key="name"></u-picker>

		<pickup-time-picker :show.sync="showTimePicker" @confirm="onTimeConfirm"></pickup-time-picker>
	</view>
</template>

<script>
	import bookItem from '@/pages-home/components/BookItem.vue'
	import pickupTimePicker from '@/pages-home/components/PickupTimePicker.vue'

	export default {
		components: {
			bookItem,
			pickupTimePicker
		},
		data() {
			return {
				titleStyle: {
					'font-family': 'PingFang SC',
					'font-weight': 400,
					color: '#333333',
				},
				agreed: false,
				books: [],

				showPicker: false,
				expressList: [{
					name: '顺丰'
				}, {
					name: '京东'
				}],
				showTimePicker: false,
				selectedTime: {},
				defaultAddr: {},

				submitData: {
					expressDelivery: '',
					"orderId": "",
					"addressId": "",
					"schedulePickupStartTime": "",
					"schedulePickupEndTime": "",
					"expressDelivery": "",
					"remark": ""
				}
			}
		},
		computed: {
			totalBooks() {
				return this.books.reduce((sum, book) => sum + (book.num || 1), 0)
			},
			totalPrice() {
				return this.books.reduce((sum, book) => sum + book.recycleMoney * (book.num || 1), 0).toFixed(2)
			}
		},
		methods: {
			//时间选择
			onTimeConfirm(data) {
				this.selectedTime = data
				//格式化提交数据的时间
				let date = this.$u.timeFormat(data.date, 'yyyy-mm-dd')
				let times = data.time.split('-')

				this.submitData.schedulePickupStartTime = `${date} ${times[0]}`
				this.submitData.schedulePickupEndTime = `${date} ${times[1]}`
				console.log(date, this.submitData, 'data')
			},

			//打开快递选择器
			showExpressPicker() {
				this.showPicker = true
			},
			//确认选择快递  
			onExpressConfirm(e) {
				if (!e.length) return
				let item = this.expressList[e[0]]
				this.submitData.expressDelivery = item.name
				this.showPicker = false
			},
			//添加或者选择地址
			handleAddress() {
				uni.navigateTo({
					url: "/pages-mine/pages/address/list?id=" + this.defaultAddr.id
				})
			},

			calculateTotal() {
				this.totalBooks = this.books.reduce((sum, book) => sum + book.quantity, 0)
				this.totalPrice = this.books
					.reduce((sum, book) => sum + book.quantity * parseFloat(book.price), 0)
					.toFixed(2)
			},
			submitOrder() {
				if (!this.agreed) {
					this.$u.toast('请先同意用户协议')
					return
				}
				// 处理订单提交
				uni.$u.http.post('/token/order/submitOrder', this.submitData).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: "/pages-home/pages/order-success"
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//获取默认地址 /api/token/user/address/getDefault
			getDefaultAddress() {
				uni.$u.http.get('/token/user/address/getDefault').then(res => {
					if (res.code == 200) {
						this.defaultAddr = res.data
						this.submitData.addressId = this.defaultAddr.id
					}
				})
			},
			//获取当前用户未提交订单 /api/token/order/lastOrder
			getLastOrder() {
				uni.$u.http.get('/token/order/lastOrder').then(res => {
					if (res.code == 200) {
						this.books = res.data ? res.data.orderDetailList.map(v => {
								v.orderId = res.data.orderId
								return v
							}) : [],

							this.submitData.orderId = this.books[0].orderId
					}
				})
			},
		},
		mounted() {
			this.getDefaultAddress()
			this.getLastOrder()

			uni.$on('selectAddr', (item) => {
				if (item.id) {
					this.defaultAddr = item
					this.submitData.addressId = this.defaultAddr.id
				}
			})
		}
	}
</script>

<style lang="scss">
	.book-order {
		min-height: 100vh;
		background: #f5f5f5;
		padding: 20rpx 30rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 190rpx);
	}

	.section-card {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.u-required {
		color: #FF0000;
		margin-left: 8rpx;
	}

	.time-card {
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
	}

	.free-pickup {
		.pickup-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 10rpx;
		}

		.pickup-desc {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.express-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	.bottom-bar {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx 30rpx;

		.agreement {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;

			&-link {
				color: #07c160;
			}
		}

		.order-summary {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;

			.price {
				color: #ff0000;
				margin: 0 10rpx;
			}
		}
	}
</style>