hs_hzl_uniapp_ml/pages/orderFood/index.vue

<template>
	<view>
		<u-loading-page :loading="loading"></u-loading-page>
		<u-toast ref="uToast"></u-toast>
		<u-sticky style="background-color: #f3f3f3;margin-top: 10px;" offset-top="5" customNavHeight="0">
			<view class="doFoodConfigView">
				<u-row>
					<u-col span="6">
						<view style="padding-left: 15px;" @click="isShowMenuName">
							<u-picker id="button_div" keyName="value" :show="show" :columns="menuName" :immediateChange="true"
								@confirm="confirm" @cancel="cancel" confirmColor="rgb(55,186,189)">
							</u-picker>
							<u-text size="15" :bold="true" suffixIcon="arrow-down-fill" iconStyle="font-size: 18px"
								:text="cuisineName"></u-text>
						</view>
					</u-col>
					<u-col span="6">
						<view style="margin-left: 30rpx;">
							<u-row>
								<u-col span="3">
									<view style="position: relative;">
										<view class="gwcNum">
											<u-badge v-if="gwcNum !== 0" :showZero="true" shape="horn" bgColor="#FF0000"
												:max="9" :value="gwcNum">
											</u-badge>
										</view>
										<view>
											<u-icon name="shopping-cart" size="50" class="gwc">
											</u-icon>
										</view>
									</view>
								</u-col>
								<u-col span="9">
									<view>
										<u-button style="width:85px;" color="rgb(55,186,189)" @click="toShopListPage">
											确认下单
										</u-button>
										<u-picker keyName="placeName" :show="show1" :columns="menuName1"
											@confirm="confirm1" @cancel="cancel" confirmColor="#53a591">
										</u-picker>
									</view>
								</u-col>
							</u-row>
						</view>
					</u-col>
				</u-row>
			</view>
		</u-sticky>
		<view>
			<view style="margin-top: 20rpx;">
				<view v-if="goodsList.length === 0" style="margin-top: 170px;padding: 0 50px;">
					<img style="margin: 0 auto; width: 100%;" src="../../static/img/page/empty_view.png">
					</img>
				</view>
				<view class="goodsContent">
					<view class="goodsLeftList">
						<view class="goodsItem" v-for="item in goodsLeftList">
							<img v-if="item.cuisinePicture" class="cuisineImg" width="100%" height="100%"
								:src="baseURL+item.cuisinePicture" mode="widthFix" radius="5"></img>
							<img v-else class="cuisineImg" width="100%" height="100%"
								src="http://114.115.142.166:8087/down/O1FKVNmmA1up"></img>
							<view class="goodsName">{{item.cuisineName}}</view>
							<view class="goodsPrice">
								<u-icon name="rmb" :label="item.price"></u-icon>
							</view>
							<view class="gwxx">
								<u-row>
									<u-col span="4">
										<view>
											<u-button icon="minus" size="mini" color="#e93c45"
												@click="addToCart(0,item)">
											</u-button>
										</view>
									</u-col>
									<u-col span="4">
										<!-- 	<u-input v-model="item.amount" type="number"
											:disabled="item.maximum === item.amount">
										</u-input> -->
										<!-- <view style="text-align: center;" v-else>0</view> -->
										<view style="text-align: center;">
											{{item.amount}}
										</view>
									</u-col>
									<u-col span="4">
										<view>
											<u-button icon="plus" size="mini" color="rgb(10, 185, 156)"
												@click="addToCart(1,item)">
											</u-button>
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
					<view class="goodsRightList">
						<view class="goodsItem" v-for="item in goodsRightList">
							<img v-if="item.cuisinePicture" class="cuisineImg" width="100%" height="100%"
								:src=" baseURL+item.cuisinePicture" mode="widthFix" radius="5"></img>
							<img v-else class="cuisineImg" width="100%" height="100%"
								src="http://114.115.142.166:8087/down/O1FKVNmmA1up"></img>
							<view class="goodsName">{{item.cuisineName}}</view>
							<view class="goodsPrice">
								<u-icon name="rmb" :label="item.price"></u-icon>
							</view>
							<view class="gwxx">
								<u-row>
									<u-col span="4">
										<view>
											<u-button icon="minus" size="mini" color="#e93c45"
												@click="addToCart(0,item)">
											</u-button>
										</view>
									</u-col>
									<u-col span="4">
										<view style="text-align: center;">
											{{item.amount}}
										</view>
									</u-col>
									<u-col span="4">
										<view>
											<u-button icon="plus" size="mini" color="rgb(10, 185, 156)"
												@click="addToCart(1,item)">
											</u-button>
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view
				style="padding: 5rpx 7rpx;text-align: center;font-size: 19rpx;color: #868686;position: absolute;bottom: 0;">
				预定声明：预定食品及物品的配送&品质&结算由梅陇社区全权负责 </view>
		</view>
		<!-- <wp-tabbar pagePath="/pages/orderFood/index" :type="type"></wp-tabbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: undefined,
				isImg: 0,
				baseURL: this.$BASE_URL,
				loading: false,
				cuisineName: '当前时间无内容',
				oName: '',
				gwcNum: 0,
				maxNum: 0,
				timeStop: 0,
				goodsList: [],
				menuData: {},
				goodsListCount: 0, //加载第i张图片
				// 左侧商品列表
				goodsLeftList: [],
				goodsLeftListHeight: 0,
				// 右侧商品列表
				goodsRightList: [],
				goodsRightListHeight: 0,
				show: false,
				from: {
					consumerType: uni.getStorageSync("userInfo").userType,
					jgid: uni.getStorageSync("orgInfo").organizationCode,
					organizationCode: uni.getStorageSync("orgInfo").organizationCode,
				},
				patternId: '',
				menuName: [
					[]
				],
				menuName1: [
					[]
				],
				show: false, //true,
				show1: false
			}
		},
		mounted() {
			if (this.$getUrlType() === 3) {
				this.getCuisinesList();
				this.getJcd();
			}
			uni.setNavigationBarTitle({
				title: uni.getStorageSync("orgInfo").organizationName
			})
			this.type = uni.getStorageSync("tabType")
			if (this.$getUrlType() === 3) {
				this.getJcd();
				if (uni.getStorageSync("isRefresh") === 1) {
					this.getCuisinesList();
					uni.setStorageSync("isRefresh", 0)
				}
				uni.setNavigationBarTitle({
					title: uni.getStorageSync("orgInfo").organizationName
				})
			} else {
				this.menuData = []
				this.goodsList = []
				this.goodsLeftList = []
				this.goodsRightList = []
				this.maxNum = 0
				this.gwcNum = 0
				this.cuisineName = '当前时间无内容'
			}
		},
		onShow() {
			uni.reLaunch({
				url: '/pages/tabbar/wpTabbar'
			})
			uni.setNavigationBarTitle({
				title: uni.getStorageSync("orgInfo").organizationName
			})
			this.type = uni.getStorageSync("tabType")
			if (this.$getUrlType() === 3) {
				this.getJcd();
				if (uni.getStorageSync("isRefresh") === 1) {
					this.getCuisinesList();
					uni.setStorageSync("isRefresh", 0)
				}
				uni.setNavigationBarTitle({
					title: uni.getStorageSync("orgInfo").organizationName
				})
			} else {
				this.menuData = []
				this.goodsList = []
				this.goodsLeftList = []
				this.goodsRightList = []
				this.maxNum = 0
				this.gwcNum = 0
				this.cuisineName = '当前时间无内容'
			}
		},
		// onPullDownRefresh() {
		// 	this.getCuisinesList();
		// 	this.gwcNum = 0
		// },
		methods: {
			isImgReturn() {
				this.isImg = 1;
			},
			async getJcd() {
				this.menuName1[0] = []
				this.from = {
					consumerType: uni.getStorageSync("userInfo").userType,
					jgid: uni.getStorageSync("orgInfo").organizationCode,
					organizationCode: uni.getStorageSync("orgInfo").organizationCode,
				}
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getPlace',
					method: 'post',
					data: this.from,
					isNotErrorMsg: true
				});
				if (res.code === 200) {
					var data = res.data;
					this.menuName1 = [
						[]
					]
					for (var i = 0; i < data.length; i++) {
						this.menuName1[0].push(data[i])
					}
				}
			},
			async getCuisinesList() {
				this.menuData = []
				this.oName = uni.getStorageSync("orgInfo").organizationName
				this.goodsLeftList.length = 0
				this.goodsRightList.length = 0
				this.from.consumerType = uni.getStorageSync("userInfo").userType
				this.from.jgid = uni.getStorageSync("orgInfo").organizationCode
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getCuisines',
					method: 'post',
					data: this.from,
					isNotErrorMsg: true
				});
				if (res.code === 200) {
					this.menuData = res.data
					uni.setStorageSync("cuisinesData", this.menuData[0])
					this.cuisineName = this.menuData[0].menuName
					this.maxNum = this.menuData[0].maxCount
					this.goodsList = this.menuData[0].registers;
					this.goodsList.forEach(item => {
						item.amount = 0
					})
					//给左右列表分配数据
					this.toLeftAndRight()
					//清空
					this.menuName = [
						[]
					]
					for (var i = 0; i < this.menuData.length; i++) {
						this.menuName[0].push({
							id: i,
							value: this.menuData[i].menuName
						})
					}
				} else {
					this.cuisineName = res.msg
				}
				uni.stopPullDownRefresh()
			},
			setGwcNum() {
				this.gwcNum = 0
				const goodsListInfo = this.goodsList;
				for (var i = 0; i < goodsListInfo.length; i++) {
					if (this.goodsList[i].amount) {
						this.gwcNum += goodsListInfo[i].amount
					}
				}
			},
			toShopListPage() {
				if (0 === this.gwcNum) {
					this.showToast({
						duration: 1500,
						message: "还未点菜"
					});
					return;
				}
				let that = this
				uni.requestSubscribeMessage({
					tmplIds: ['76FWJYEGNoYT0XzGycTh-s6dJ7ETsK3-_r1xcvPWvaI'],
					success(res) {
						that.show1 = true;
					}
				})
			},
			addToCart(type, item) {
				if (!item.amount) {
					item.amount = 0
				}
				for (var i = 0; i < this.goodsList.length; i++) {
					if (item.cuisineNumber === this.goodsList[i].cuisineNumber) {
						if (type === 1) {
							if (this.gwcNum < this.maxNum) {
								if (this.goodsList[i].amount < this.goodsList[i].maximum) {
									this.goodsList[i].amount += 1
									this.showToast({
										duration: 500,
										message: "[ " + item.cuisineName + " * " + item.amount + " ]加入购物车"
									});
									this.gwcNum = this.gwcNum + 1
									return
								} else {
									this.showToast({
										duration: 500,
										message: "该菜品数量已封顶，无法添加"
									});
								}
							} else {
								this.showToast({
									duration: 500,
									message: "本次订单已封顶，无法添加"
								});
							}
						} else {
							if (this.goodsList[i].amount !== 0) {
								this.goodsList[i].amount -= 1
								this.gwcNum = this.gwcNum - 1
								return
							}
						}
					}
				}
				this.toLeftAndRight()
			},
			confirm(e) {
				//console.log('confirm', e)
				const index = e.value[0].id;
				uni.setStorageSync("cuisinesData", this.menuData[index])
				this.maxNum = this.menuData[0].maxCount
				this.cuisineName = this.menuData[index].menuName;
				this.goodsList = this.menuData[index].registers;
				//给左右列表分配数据
				this.toLeftAndRight()
				this.show = false;
			},
			confirm1(e) {
				//console.log('confirm', e)			
				const index = e.value[0].placeNumber;
				uni.setStorageSync("jcd", e.value[0].placeName)
				uni.setStorageSync("placeNumber", index)
				uni.setStorageSync('shopData', this.goodsList);
				this.show1 = false;
				this.$goto('../../pages/orderFood/list')
			},
			cancel() {
				this.show = false
				this.show1 = false
			},
			isShowMenuName() {
				if (!this.menuData.length) {
					return;
				}
				this.show = true
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {}
				})
			},
			toLeftAndRight() {
				//保留其他属性清空数组
				this.goodsLeftList.length = 0
				this.goodsRightList.length = 0
				const goodsList = this.goodsList
				for (var i = 0; i < goodsList.length; i++) {
					if (i % 2 === 0) {
						this.goodsLeftList.push(goodsList[i])
					} else {
						this.goodsRightList.push(goodsList[i])
					}
				}
			},
			// 向商品列表添加第一张图片
			async waterfallImage() {},
			// 图片绑定事件，通过比较左右列表高度，实现瀑布流展示
			onImageLoad: function(e) {
				let divWidth = 295; //显示的单栏宽度，我设为295rpx
				let oImgW = e.detail.width; //图片原始宽度
				let oImgH = e.detail.height; //图片原始高度
				let rImgH = divWidth * oImgH / oImgW; //根据宽高比计算当前载入的图片的高度
				if (rImgH > 600) {
					rImgH = 600; //限制图片最高600rpx，可在css中添加 max-height:600rpx;
				}
				if (this.goodsListCount == 0) {
					this.goodsLeftListHeight += rImgH; //第一张图片高度加到goodsLeftListHeight 
					this.goodsListCount++; //图片索引加1
					//添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
				} else {
					this.goodsListCount++; //图片索引加1
					if (this.goodsLeftListHeight > this.goodsRightListHeight) { //把图片的高度加到目前高度更低的栏中
						this.goodsRightListHeight += rImgH; //第二张图片高度加到goodsRightListHeight 
					} else {
						this.goodsLeftListHeight += rImgH;
					}
					if (this.goodsListCount < this.goodsList.length) { //根据目前的栏高，把下一张图片，push到低的那栏
						if (this.goodsLeftListHeight > this.goodsRightListHeight) {
							this.goodsRightList.push(this.goodsList[this.goodsListCount]);
						} else {
							this.goodsLeftList.push(this.goodsList[this.goodsListCount]);
						}
					}
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	#button_div {
		position: fixed;
		bottom: var(--window-bottom);
	}

	.mybackColor {
		background-color: #8c8c8c;
	}

	.shopHand {
		font-weight: bold;
		font-size: 20px;
		height: 20%;
		padding: 10% 0 10px 10px;
		margin-bottom: 5px;
		//background: linear-gradient(to bottom right, #85c1bf, #f1fef9);
		//background: rgb(55,186,189);
		background: #9ED6CF;
	}

	.cuisineImg {
		border-radius: 10px;
		max-height: 300rpx;
		width: 295rpx;
		padding: 15rpx 15rpx 5rpx;
	}

	.doFoodConfigView {
		width: 93%;
		margin: 0 auto;
		padding: 2% 5px;
		background-color: #ffffff;
		border-radius: 10px;
		border: 1px solid #d3d3d3;
	}

	.gwxx {
		padding-top: 20rpx;
	}

	.gwcNum {
		width: 20px;
		left: 40rpx;
		top: -5rpx;
		position: absolute;
	}

	/* 商品列表 */
	.goodsContent {
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.goodsLeftList {
		margin: 0 15rpx 0 30rpx;
		width: 325rpx;
	}

	.goodsRightList {
		margin: 0 47rpx 0 15rpx;
		width: 325rpx;
	}

	.goodsItem {
		background: #FFFFFF;
		border: 1rpx solid #eeeeee;
		width: 325rpx;
		border-radius: 10px;
		padding: 5px 4px;
		margin-bottom: 15rpx;
	}

	.goodsName {
		font-size: 28rpx;
		color: #2e2e2e;
		padding: 10rpx 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goodsPrice {
		color: #ffac29;
		font-size: 24rpx;
		padding: 0 15rpx;
	}


	.addFood {
		margin-left: 150rpx;
	}

	.minus {
		width: 26px;
		height: 26px;
		background-color: #efefef;
		border-width: 1px;
		border-color: #c6c6c6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

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