uniapp/pagesHome/order/index.vue

<template>
	<view class="content">
		<view class="info">
			<view class="one">
				<view class="one_1">
					<view class="left">桌号：{{shopInfo.table}}</view>
					<view class="right">
						<view class="right_1">
							<text @click="toChang" :class="[is_show==true?'type':'']">店内就餐</text>
							<text @click="toChang" :class="[is_show==false?'type':'']">打包带走</text>
						</view>
					</view>
				</view>
				<view class="one_2">
					<view class="left">人数</view>
					<view class="right">
						<picker @change="bindChange" :value="shopInfo.person" :range="personList">
							<view>
								{{shopInfo.person||'请选择用餐人数'}}
								<text v-if="shopInfo.person">人</text>
							</view>
						</picker>
						<uni-icons color="#C0C0C0" type="forward" size="14"></uni-icons>
					</view>
				</view>
				<view class="one_3">
					<view class="left">备注</view>
					<view class="right">
						<input v-model="shopInfo.remark" placeholder="填写备注" />
						<uni-icons color="#C0C0C0" type="forward" size="14"></uni-icons>
					</view>
				</view>
			</view>
			<view class="two">
				<view class="two_1">消费明细</view>
				<view class="two_2">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="list-scroll-view">
							<view class="list" v-for="(item,index) in list" :key="index">
								<view class="img">
									<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''"
										mode="">
									</image>
								</view>
								<view class="info">
									<view class="name textOver">
										<text>{{item.name}}</text>
									</view>
									<view class="spec" v-if="item.spec">
										<text>{{item.spec}}</text>
									</view>
								</view>
								<view class="money">
									<text>¥{{item.price}}</text>
									<text>×{{item.num}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="two_3">
					<view class="two_3_1" v-if="shopInfo.person">
						<view class="left">
							餐位费
							<text>×{{shopInfo.person}}</text>
						</view>
						<view class="right">￥{{shopInfo.perMoney}}</view>
					</view>
					<view class="two_3_2">
						共{{list.length}}件商品，合计：<text>￥</text><text>{{shopInfo.goods_total}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="foot_1">
				需支付<text>￥</text><text>{{shopInfo.detail_total||0}}</text>
			</view>
			<view class="foot_2">
				<button class="button" @tap.stop="toBuy">下单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				id: "",
				shopInfo: {},
				is_show: true,
				personList: [
					'1人', '2人', '3人', '4人', '5人', '6人', '7人', '8人', '9人', '10人', '11人', '12人', '13人', '14人',
					'15人', '16人', '17人',
					'18人', '19人', '20人', '21人', '22人'
				],
				list: [],
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e.id);
			that.search();
		},
		onShow() {
			const that = this;

		},
		methods: {
			async search(e) {
				const that = this;
				let res;
				if (that.id) {
					res = await that.$api(`shop`, 'GET', {});
					if (res.errcode == '0') {
						let data = res.data[0]
						data.table = '1'
						that.$set(that, `shopInfo`, data);
					}
					res = await that.$api(`cart/${that.id}`, 'GET', {});
					if (res.errcode == '0') {
						that.$set(that, `list`, res.data.list)
						that.$set(that.shopInfo, `goods_total`, res.data.total)
						let table = await that.$api(`table/${res.data.table}`, `GET`)
						that.$set(that.shopInfo, `table`, table.data.name)
						that.$set(that.shopInfo, `table_id`, res.data.table)
					}
				}
			},
			// 选择堂食还是打包
			toChang() {
				const that = this;
				that.is_show = !that.is_show
			},
			// 选择用餐人数
			bindChange(e) {
				const that = this;
				that.$set(that.shopInfo, `person`, parseInt(e.detail.value) + 1)
				let money = that.$multiply(that.shopInfo.money, that.shopInfo.person);
				that.$set(that.shopInfo, `perMoney`, money)
				let total = that.$plus(money, that.shopInfo.goods_total)
				that.$set(that.shopInfo, `detail_total`, total)
			},
			// 下单
			async toBuy() {
				const that = this;
				let type = '0';
				if (that.is_show == true) type = '0'
				else type = '1'
				let obj = {
					time: moment().format('YYYY-MM-DD HH:mm:ss'),
					remark: that.shopInfo.remark,
					table: that.shopInfo.table_id,
					money: that.shopInfo.detail_total,
					money_num: that.shopInfo.perMoney,
					num: that.shopInfo.person,
					type: type,
					list: that.list
				}
				let res = await that.$api(`order`, 'POST', obj);
				if (res.errcode == '0') {
					uni.navigateTo({
						url: `/pagesHome/order/info?id=${res.data._id}`
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f1f1f1;
		font-family: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;

		.info {
			display: flex;
			flex-direction: column;
			position: relative;
			flex-grow: 1;
			padding: 2vw;

			.one {
				padding: 2vw;
				background-color: #ffffff;
				border-radius: 4vw;

				.one_1 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 2vw 0;
					border-bottom: 1px solid #f1f1f1;

					.left {
						font-size: 16px;
						font-weight: 600;
					}

					.right {
						font-size: 14px;

						.right_1 {
							background-color: #f1f1f1;
							padding: 3vw 1vw;
							border-radius: 5vw;

							text {
								background-color: #f1f1f1;
								color: #858585;
								padding: 2vw;
							}

							.type {
								padding: 2vw 3vw;
								border-radius: 5vw;
								color: #ffffff;
								background-color: #FF7800;
							}
						}
					}
				}

				.one_2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 3vw 0;
					border-bottom: 1px solid #f1f1f1;
					font-size: 14px;

					.right {
						display: flex;
						align-items: center;
						color: #858585;
					}
				}

				.one_3 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 3vw 0;
					font-size: 14px;

					.right {
						display: flex;
						align-items: flex-end;
						color: #858585;

						/deep/input {
							text-align: right;
						}
					}
				}
			}

			.two {
				margin: 2vw 0;
				padding: 2vw;
				background-color: #ffffff;
				border-radius: 4vw;

				.two_1 {
					padding: 2vw 0;
					font-size: 16px;
					font-weight: 600;
				}

				.two_2 {
					position: relative;
					display: flex;
					flex-direction: column;
					height: 32vh;

					.list {
						display: flex;
						width: 88vw;
						margin: 0 0 2vw 0;
						padding: 2vw;
						box-shadow: 0 0 5px #f1f1f1;
						border-radius: 5px;

						.img {
							width: 30vw;

							.image {
								width: 30vw;
								height: 20vw;
								border-radius: 5px;
							}
						}

						.info {
							width: 40vw;
							padding: 0 0 0 2vw;

							.name {
								font-size: 16px;
							}

							.spec {
								font-size: 12px;
								color: #858585;
							}
						}

						.money {
							display: flex;
							flex-direction: column;
							align-items: flex-end;
							width: 20vw;

							text:first-child {
								font-size: 14px;
								color: #FF8C00;
							}
						}
					}
				}

				.two_3 {

					.two_3_1 {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 14px;
						padding: 2vw 3vw;

						.left {
							text {
								color: #858585;
								font-size: 12px;
								margin: 0 2vw;
							}
						}

						.right {
							color: #FF7800;
						}
					}

					.two_3_2 {
						padding: 3vw;
						text-align: right;
						font-size: 14px;
						color: #858585;
						border-top: 1px solid #f1f1f1;

						text:first-child {
							color: #FF7800;
						}

						text:last-child {
							color: #FF7800;
							font-size: 18px;
						}
					}
				}
			}
		}

		.foot {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 2vw 3vw;
			background-color: #ffffff;
			border-top: 1px solid #f1f1f1;

			.foot_1 {
				font-size: 14px;
				color: #858585;

				text:first-child {
					color: #FF7800;
				}

				text:last-child {
					color: #FF7800;
					font-size: 18px;
				}
			}

			.foot_2 {
				.button {
					background-color: #FF8C00;
					color: #ffffff;
					border-radius: 5vw;
					font-size: 16px;
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>