hs_hzl_uniapp_ml/pages/orderFood/list.vue

<template>
	<view>
		<view class="view">
			<u-list @scrolltolower="scrolltolower">
				<view class="hand">
					<u-row>
						<u-col span="8">
							<view class="orgTop">
								<u--text text="所属机构" size="22" bold color="#619f8a"></u--text>
							</view>
							<view>
								<u--text :text="data.organizationName" size="20" bold color="#757575"></u--text>
							</view>
						</u-col>
						<!--<u-col span="4">
									<view>
										<u-button class="sxButton" size="normal" loadingMode="circle" color="#65c1aa">统计查看
										</u-button>
									</view>
								</u-col> -->
					</u-row>
					<view class="uni-list" style="margin-top: 5px;">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">
								就餐地：
							</view>
							<view class="uni-list-cell-db">
								<u--text :text="jcd" size="22" bold color="#757575"></u--text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="!shopDataNow">
					<image style="margin: 0 auto; width: 100%;" src="../../static/img/page/empty_view.png"></image>
				</view>
				<u-list-item v-for="(item, index) in shopDataNow" :key="index">
					<view v-if="item.amount !== 0 && item.amount" class="listItemStyle">
						<u-row>
							<u-col span="3">
								<u--image :showLoading="true" shape="circle" :src="baseURL+item.cuisinePicture"
									width="70px" height="70px" style="margin: 10px;"></u--image>
							</u-col>
							<u-col span="6" class="">
								<view>
									{{item.cuisineName}}
								</view>
								<view style="margin-top: 3px;">
									{{"￥ "+item.price}}
								</view>
							</u-col>
							<u-col span="3" class="numberStyler">
								<u-number-box v-model="item.amount" step="1" :min="0" :max="item.maximum"
									:showMinus="item.amount > 0">
									<view @click="addToCart(0,item)" slot="minus" class="minus">
										<u-icon name="minus" size="12"></u-icon>
									</view>
									<text slot="input" style="width: 50px;text-align: center;"
										class="input">{{item.amount}}</text>
									<view @click="addToCart(1,item)" slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</u-col>
						</u-row>
					</view>
				</u-list-item>
				<br>
				<br>
				<br>
				<br>
			</u-list>
		</view>
		<view class="bottim_view">
			<view>
				<u-row>
					<u-col span="6">
						<view class="sum_price_view">
							<span>合计：</span>
							<u-row>
								<u-col span="6">
									<u-icon name="rmb" color="#aa0000" size="20"></u-icon>
								</u-col>
								<u-col span="6">
									<u--text size="35" color="#aa0000" :text="priceSum"></u--text>
								</u-col>
							</u-row>
						</view>
					</u-col>
					<u-col span="6">
						<u-button class="btnDoPay" shape="circle" @click="toOKPage" :disabled="isDisabled"
							color="linear-gradient(to bottom right, #79a7a4, #88d8a1)" text="确认支付"></u-button>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseURL: this.$BASE_URL,
				priceSum: 0.0,
				dateShow: false,
				isDisabled: false,
				data: {
					organizationName: "",
				},
				jcd: uni.getStorageSync("jcd"),
				from: {
					userNumber: '',
					jgid: '',
					paytime: this.result(Number(new Date()), 'datetime'),
					periodId: 0,
					menuNumber: "",
					patternId: 0,
					orderTotal: 0,
					details: []
				},
				shopData: [],
				shopDataNow: []
			}
		},
		onShow() {
			this.shopDataNow = []
			this.data.organizationName = uni.getStorageSync("orgInfo").organizationName
			//清空价格总数
			this.priceSum = 0;
			//获取瀑布流中所有菜品数据
			const data = uni.getStorageSync('shopData')
			for (var i = 0; i < data.length; i++) {
				if (data[i].amount) {
					//计算单个菜品的总价格
					const total = data[i].amount * data[i].price
					data[i].total = total
					//传入 购物数据当前集合 
					this.shopDataNow.push(data[i])
					//计算页面显示的总价格
					this.priceSum = parseFloat(this.priceSum) + (data[i].amount * parseFloat(data[i].price))
				}
			}
			//获取菜品查询数据
			const cuisinesData = uni.getStorageSync("cuisinesData")
			//获取用户信息
			const user = uni.getStorageSync('userInfo');
			this.from = {
				periodId: cuisinesData.periodId,
				menuNumber: cuisinesData.menuNumber,
				patternId: cuisinesData.patternId,
				details: this.shopDataNow,
				userNumber: user.userName,
				jgid: user.organizationCode,
				paytime: Number(new Date()),
				orderTotal: this.priceSum,
				placeNumber: uni.getStorageSync("placeNumber"),
				placeName: uni.getStorageSync("jcd")
			}
			console.log(this.from)
		},
		methods: {
			addToCart(type, food) {
				if (food.maximum <= food.amount && type === 1) {
					this.showToast({
						duration: 1500,
						message: "已达最大下单限制"
					});
					return;
				} else {
					if (type === 0) {
						food.amount -= 1
						this.priceSum = parseFloat(this.priceSum) - parseFloat(food.price)
					} else if (type === 1) {
						uni.showToast({
							duration: 500,
							icon: 'checkmark',
							title: "[ " + food.cuisineName + " ]加入购物车"
						});
						this.priceSum = parseFloat(this.priceSum) + parseFloat(food.price)
					}
				}
				let copy = []
				for (var i = 0; i < this.shopDataNow.length; i++) {
					if (0 != this.shopDataNow[i].amount) {
						copy.push(this.shopDataNow[i])
					}
				}
				this.from.orderTotal = this.priceSum
				this.from.details = copy
			},
			toOKPage() {
				this.isDisabled = true
				let that = this
				uni.requestSubscribeMessage({
					tmplIds: ['88SU4FmQU0cwuJTwoddwyu6kr9Kq-PdfB6dT9-SlXaA'],
					success(res) {
						that.submitOrder()
					},
					fail() {
						that.submitOrder()
					}
				})
			},
			async submitOrder() {
				if (this.priceSum === 0) {
					uni.showToast({
						duration: 1500,
						icon: 'none',
						title: "没有选择菜品"
					});
					return
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/order',
					method: 'post',
					data: this.from
				});
				if (res.code === 200) {
					this.priceSum = 0.0;
					setTimeout(() => {
						uni.hideLoading()
						this.isDisabled = false
						uni.navigateTo({
							url: 'ok'
						})
					}, 1000)
				} else {
					this.isDisabled = false
					uni.hideLoading()
					uni.showToast({
						duration: 1500,
						title: res.msg,
						icon: 'none'
					});
				}
			},
			submitDate() {},
			scrolltolower() {
				//this.getRechargeHistoryList()
			},
			loadmore(data) {
				for (var i = 0; i < data.length; i++) {
					this.indexList.push(data[i])
				}
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			}
		}
	}
</script>

<style>
	.view {
		background-color: #ebebeb;
		padding-top: 10px;
	}

	.hand {
		padding: 5%;
		margin: 0 5px 5px 5px;
		border-radius: 15px;
		background: linear-gradient(to bottom right, #97dad8, #f1fef9);
	}

	.orgTop {
		margin-bottom: 5px;
	}

	.sxButton {
		width: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.listTermDate {
		padding: 10px 0;
	}

	.listItemStyle {
		margin: 5px 12px;
		padding: 5px;
		border-radius: 15px;
		background-color: #fafafa;
	}

	.minus {
		width: 22px;
		height: 22px;
		background-color: #efefef;
		border-width: 1px;
		border-color: #c6c6c6;
		border-radius: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.numberStyler {
		position: relative;
		left: -10px;
	}

	.bottim_view {
		padding: 5px 20px 30px;
		position: fixed;
		left: 0px;
		bottom: 0px;
		width: 100%;
		height: 80px;
		background-color: #ffffff;
		z-index: 9999;
	}

	.sum_price_num_style {
		font-size: 30px;
		color: #d83024;
	}

	.sum_price_view {
		margin-left: 10px;
		display: flex;
		justify-content: unset;
		align-items: baseline;
	}

	.btnDoPay {
		width: 100%;
	}
</style>