mnsx/pages/menu/menu.vue

<template>
	<view class="container">
		<view class="header">
			<view class="h-title"><view class="b">全部商品</view></view>
		</view>
		<view class="address">
			<view class="address-left" v-if="isTakeaway">
				<view class="one " v-if="addressData == 0" @click="loadMore('/pages/set/address?source=1')">
					<view class="sl">请选择地址</view>
					<view class=""><image src="https://zccy.liuniu946.com/static/img/back.png"></image></view>
				</view>
				<view class="one " v-if="addressData != 0" @click="loadMore('/pages/set/address?source=1')">
					<view class="sl clamp" style="max-width: 70%;">{{ addressData.province + addressData.city + addressData.district }} {{ addressData.detail }}</view>
				</view>
				<view class="two">
					<view class="sl" style="max-width: 70%;">{{ checkedStore.name }}</view>
					<view class="t-b">送出外卖</view>
				</view>
			</view>
			<view class="address-left" @click.stop="selectStore" v-else>
				<view class="one">{{ checkedStore.name }}</view>
				<view class="two">
					<view class="t-b">距离你{{ checkedStore.distance | distance }}</view>
				</view>
			</view>
			<!-- <view class="address-right">
				<view :class="{ isChoose: !isTakeaway }" class="bottom" @click="change">自提</view>
				<view :class="{ isChoose: isTakeaway }" class="bottom" @click="change">外送</view>
			</view> -->
		</view>
		<view class="memu">
			<!-- 左侧 -->
			<scroll-view scroll-y="true" class="option">
				<view class="option-b" v-for="(s, index) in sList" :class="{ opIschoose: index == isChoose }" @click="optionChoose(index)">
					<text>{{ s.cate_name }}</text>
				</view>
			</scroll-view>
			<!-- 右侧商品 -->
			<scroll-view scroll-with-animation :scroll-top="scrolltop" scroll-y="true" class="goods" ref="scrolly" @scroll="scrolle">
				<view
					:style="{ minHeight: sList.length == index + 1 ? bottomHeight + 'px' : 'auto', paddingBottom: sList.length == index + 1 ? '100rpx' : '0' }"
					class="goods-list"
					v-for="(ls, index) in sList"
					ref="pdheight"
					:id="'main-' + ls.id"
				>
					<text class="span">{{ ls.cate_name }}</text>
					<view v-if="ls.list" class="goods-list-c" v-for="(d, ind) in ls.list" @click="ToDetail(d)">
						<view class="goods-list-left"><image :src="d.image" mode="scaleToFill"></image></view>
						<view class="goods-list-right">
							<view class="one ">{{ d.store_name }}</view>
							<view class="two">销量{{ d.sales }}件</view>
							<view class="three">
								<!-- <view class="ot_price">￥{{ d.ot_price }}</view> -->
								<view class="price">￥{{ d.price }}</view>
								<button class="button" @click.stop="openMask(index, ind)">选规格</button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<dialog-bar v-if="sendVal" @tcDel="tcDel" :showItem="actionItem" @setShop="setShop"></dialog-bar>
		<choose-list-bar v-if="iscl" @delChoose="delChoose" ref="cart" :buy="buy" @createOrder="createOrder($event)"></choose-list-bar>
	</view>
</template>

<script>
import dialogBar from './Child/dialogBar.vue';
import chooseListBar from './Child/chooseListBar.vue';
import { getCategoryList, getProducts, cartAdd, cartCount } from '@/api/product.js';
import { getStoreList } from '@/api/index.js';
import { mapState, mapMutations } from 'vuex';
import { getAddressDefault } from '@/api/user.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
export default {
	computed: {
		// ...mapState(['loginInterceptor']),
		...mapState('user', ['userInfo', 'checkedStore', 'des', 'latlng', 'distribution']),
		totalPrice() {
			let tp = 0;
			for (let i = 0; i < this.buy.length; i++) {
				tp += this.buy[i].price * this.buy[i].num;
			}
			return tp;
		}
	},
	components: {
		'dialog-bar': dialogBar,
		'choose-list-bar': chooseListBar
	},
	filters: {
		parseIntTo(percent) {
			percent = +percent;
			if (percent % 1 === 0) {
				return percent;
			} else {
				percent = percent.toFixed(1);
				return percent;
			}
		},
		distance(val) {
			let str = '';
			if (val) {
				if (val * 1 > 1000) {
					return (str = ((val * 1) / 1000).toFixed(1) + 'km');
				} else {
					return (str = (val * 1).toFixed(0) + 'm');
				}
			}
			return str;
		}
	},
	data() {
		return {
			count: 0, //购物车数量
			addressData: 0,
			isTakeaway: true,
			shipping_type: 1, // 1为快递  2为自提
			isChoose: 0, //保存当前选中的左侧item
			buy: [],
			TopY: [], //保存右侧每个item栏目距离当前窗口的高度
			sList: [],
			sendVal: false,
			chooseList: {},
			iscl: false,
			youY: 0,
			actionClassInd: 0,
			bottomHeight: 0, //最后一个栏目高度
			scrolltop: 0, //保存右侧滚轮高度
			actionItem: {} //保存当前选中的规格对象
		};
	},
	onReady() {
		this.yheight();
		uni.createSelectorQuery()
			.select('.goods')
			.fields(
				{
					size: true
				},
				e => {
					this.bottomHeight = e.height;
				}
			)
			.exec();
	},
	onLoad() {
		// if(this.sList.length == 0) {
		// 		this.loadData()
		// }
	},
	onShow() {
		console.log('dddddddddddddddddddd');
		if (this.distribution == 2) {
			console.log('this.distribution == 2', 'dddddddddddddddddddd');
			this.isTakeaway = true;
		} else {
			this.isTakeaway = false;
		}
		// this.iscl = false;
		if (this.userInfo.uid) {
			cartCount().then(({ data }) => {
				getAddressDefault().then(({ data }) => {
					this.addressData = data;
				});
				this.count = data.count;
				console.log(data.count, 'data.count+++++++++++++++++');
				if (data.count != 0) {
					this.iscl = true;
					this.$refs.cart.loadData();
				} else {
					this.iscl = false;
				}
			});
		}

		let storeInfo = uni.getStorageSync('newStore') || '';
		if (!storeInfo || this.sList.length == 0) {
			this.loadData();
			uni.setStorageSync('newStore', this.checkedStore);
		} else if (this.checkedStore.id != storeInfo.id) {
			this.loadData();
			uni.setStorageSync('newStore', this.checkedStore);
		} else {
		}

		// this.$refs.cart.loadData()
	},
	methods: {
		...mapMutations('user', ['setUserInfo', 'setOrderInfo', 'setStoreInfo', 'setPointInfo', 'setDes', 'setDistribution']),
		startDataLoad() {},
		refrech() {
			// this.loadData();
		},
		// 商品详情页
		ToDetail(item) {
			if (item.stock < 1) {
				this.$api.msg('该商品已售罄');
			} else {
				uni.navigateTo({
					url: `/pages/product/product?id=${item.id}&type=0`
				});
			}
		},
		//切换门店
		selectStore() {
			uni.navigateTo({
				url: '/pages/order/choisestore?type=1'
			});
		},
		//计算右侧每个高度
		yheight() {
			this.TopY = [0];
			let yh = 0;
			try {
				console.log(this.sList, '数据');
				this.sList.forEach(item => {
					console.log(item.id, '当前id');
					let view = uni.createSelectorQuery().select('#main-' + item.id);
					view.fields(
						{
							size: true
						},
						data => {
							console.log(data, '获取高度');
							yh += data.height + 5;
							this.TopY.push(yh);
						}
					).exec();
				});
				console.log(this.sList, 'end+++++++++++++');
			} catch (e) {
				console.log(e, '错误');
				//TODO handle the exception
			}
		},
		//根据右侧滑动判断左侧选择
		scrolle(e) {
			let h = e.detail.scrollTop;
			for (let i = 0; i < this.TopY.length; i++) {
				if (h >= this.TopY[this.TopY.length - 2] - 10) {
					this.isChoose = this.TopY.length - 2;
					break;
				}
				if (h > this.TopY[i] && h < this.TopY[i + 1]) {
					console.log('选中', h, i, this.TopY[i], this.TopY[i + 1]);
					this.isChoose = i;
					break;
				}
			}
		},
		async loadData() {
			let obj = this;
			let data = (await getCategoryList({})).data;
			obj.sList = data.map(function(s) {
				s.list = []; //用于保存当前分类下商品对象的数据
				s.loadingType = 'more'; //判断当前商品分类数据是否已经加载完毕
				s.page = 1; //当前商品分类加载的商品页数
				s.limit = 20; //每次家在数据加载的数据条数
				return s;
			});
			for (var i = 0; i < obj.sList.length; i++) {
				if (obj.sList[i].cate_name == '兑换券') {
					obj.sList.splice(i, 1);
				}
			}
			console.log(obj.sList, 'obj.sL');
			for (var i = 0; i < obj.sList.length; i++) {
				console.log(obj.sList[i].id, 'obj.sList[i].id');
				await obj.getProductsList(obj.sList[i]);
				// 重新计算高度
				obj.$nextTick(function() {
					obj.yheight();
				});
			}
			console.log(obj.sList);
		},
		// 获取商品列表
		getProductsList(item, type = 'add') {
			console.log(item.id);
			const obj = this;
			const requestData = {
				page: item.page,
				limit: item.limit,
				cid: item.id
			};
			return new Promise((ok, erro) => {
				getProducts(requestData)
					.then(({ data }) => {
						data.forEach((sj, index) => {
							item.list.push(sj);
						});
						ok(data);
					})
					.catch(err => {
						erro(err);
						console.log(err);
					});
			});
		},
		//外卖或自提
		change() {
			this.isTakeaway = !this.isTakeaway;
			if (this.isTakeaway) {
				this.setDistribution(2);
			} else {
				this.setDistribution(1);
			}
		},
		getStoreList() {},
		//下拉到底部后加载商品列表数据
		// getListMore() {
		// 	this.getProductsList(this.flist[this.actionClassInd]);
		// },
		//左侧选项
		optionChoose(index) {
			console.log(index, this.scrolltop, this.TopY[index]);
			if (!this.TopY[index]) {
				this.scrolltop = 0;
			} else {
				this.scrolltop = this.TopY[index];
			}
			this.isChoose = index;
		},
		//选规格弹窗
		openMask(item, ind) {
			let data = this.sList[item].list[ind];
			console.log(item, ind, 'qing');
			this.actionItem = data;
			this.sendVal = true;
			this.iscl = false;
		},
		//关闭弹窗
		tcDel() {
			this.sendVal = false;
			if (this.count != 0) {
				this.iscl = true;
				this.$refs.cart.loadData();
			}
		},
		//跳转
		loadMore(url) {
			if (!this.userInfo.uid) {
				// 保存地址
				saveUrl();
				// 登录拦截
				interceptor();
			} else {
				uni.navigateTo({
					url: url
				});
			}
		},
		//加入购物车
		setShop(data) {
			this.sendVal = false;
			this.iscl = true;
			this.$refs.cart.loadData();
			this.count += 1;
		},
		//清空购物车
		delChoose() {
			this.iscl = false;
			this.count = 0;
		},
		// 结算
		createOrder(item) {
			if (this.isTakeaway) {
				this.shipping_type = 1;
			} else {
				this.shipping_type = 2;
			}
			uni.navigateTo({
				url: '/pages/order/createOrder?id=' + item.join(',') + '&isTakeaway=' + this.shipping_type + '&address=' + this.addressData.id
			});
		}
	},
	watch: {
		actionItem(newvalue, oldvalue) {
			console.log(newvalue, oldvalue, '修改');
		},
		checkedStore: {
			handler(newValue, oldValue) {
				console.log('门店变化');
			},
			immediate: true,
			deep: true
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100% !important;
	height: 0 !important;
}

.sl {
	max-width: 120%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.header {
	height: 281rpx;
	width: 100%;
	position: relative;

	.image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 281rpx;
		background: #f8f6f6;
	}

	.h-title {
		position: relative;
		z-index: 10;
		width: 100%;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 165rpx;
	}
}

.address {
	position: relative;
	z-index: 10;
	margin: 27rpx;
	margin-top: -110rpx;
	height: 128rpx;
	border-radius: 10rpx;
	background-color: #ffffff;
	padding: 15rpx 35rpx;
	height: 135rpx;
	line-height: 54rpx;
	color: #333333;
	font-family: PingFang-SC-Medium;
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	.one {
		font-size: 34rpx;
		display: flex;
	}

	.two {
		font-size: 26rpx;
		display: flex;

		.t-b {
			font-size: 26rpx;
			color: #999999;
		}
	}

	image {
		width: 14rpx;
		height: 25rpx;
		margin-left: 20rpx;
	}
}

.address-right {
	width: 168rpx;
	height: 56rpx;
	font-size: 23rpx;
	font-family: PingFang-SC-Medium;
	position: absolute;

	display: flex;
	background-color: #ee2f72;
	border-radius: 10rpx;
	color: #ffffff;
	align-items: center;
	right: 20rpx;
	top: 0;
	bottom: 0;
	margin: auto;

	.isChoose {
		background-color: #ffffff;
		color: #ee2f72;
		margin: 5rpx;
		border-radius: 10rpx;
		padding: 10rpx 0rpx;
	}

	.bottom {
		text-align: center;
		flex: 1;
		line-height: 1;
	}
}

.memu {
	margin: 20rpx;
	margin-bottom: 0;
	height: calc(100% - 335rpx);
	display: flex;

	.option {
		width: 200rpx;
		border-radius: 10rpx;
		overflow: hidden;
		height: calc(100% - 97rpx);

		.option-b {
			background-color: #ffffff;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			color: #999999;
			font-size: 24rpx;
			background-color: #f6f6f6;
			font-family: PingFang-SC-Bold;
		}

		.opIschoose {
			background-color: #ffffff;
			color: #ee2f72;
		}
	}

	.goods {
		width: 500rpx;
		height: 100%;
		margin-left: 10rpx;
		flex-grow: 1;

		.goods-list {
			padding: 20rpx;
			background-color: #ffffff;
			border-radius: 10rpx;

			.span {
				color: #333333;
				font-size: 26rpx;
			}

			.goods-list-c {
				margin-top: 50rpx;
				display: flex;
				position: relative;

				image {
					width: 140rpx;
					height: 140rpx;
				}

				.goods-list-right {
					margin-left: 20rpx;
					text-align: left;
					display: flex;
					align-items: flex-start;
					flex-direction: column;

					.one {
						color: #333333;
						font-size: 30rpx;
					}

					.two {
						color: #999999;
						font-size: 20rpx;
					}

					.three {
						.price {
							color: #ee2f72;
							font-size: 32rpx;
						}

						.ot_price {
							color: #999999;
							font-size: 28rpx;
							text-decoration: line-through;
						}

						.button {
							height: 40rpx;
							color: #ffffff;
							background-color: #dcb876;
							position: absolute;
							bottom: 0rpx;
							right: 20rpx;
							font-size: 20rpx;
							text-align: center;
							line-height: 40rpx;
							border-radius: 20rpx;
						}
					}
				}
			}
		}

		.tlist-box {
			.tlistname {
				font-size: 24rpx;
				padding: 25rpx 25rpx;
				// border-top: 2rpx solid rgba(238, 238, 238, 1);
				border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			}

			.tlist-list.flex_item {
				height: 0;
				min-height: 280rpx;
				align-items: stretch;
			}

			.tlist-list {
				padding: 25rpx 0rpx;
				position: relative;

				.tlist-img {
					width: 169rpx;
					position: relative;

					.img {
						width: 169rpx;
						height: 169rpx;

						image {
							width: 169rpx;
							height: 169rpx;
						}
					}

					.stock {
						margin-top: 13rpx;
						font-size: 26rpx;
						background: #fff1ee;
						width: 100%;
						color: #fb4912;
						padding: 6rpx 0;
						border-radius: 5rpx;
						justify-content: center;
						align-items: center;
						position: absolute;
						left: 0;
						bottom: 0;

						.img {
							width: 20rpx;
							height: 20rpx;
							flex-shrink: 0;
						}

						.stock-num {
							padding-left: 7rpx;
							font-size: 22rpx;
							border-radius: 5rpx;
							height: 32rpx;
							line-height: 32rpx;
						}
					}
				}

				.sell-out {
					position: absolute;
					width: 169rpx;
					height: 190rpx;
					background: rgba(255, 255, 255, 0.4);
					text-align: center;

					text {
						line-height: 190rpx;
						background: rgba(0, 0, 0, 0.5);
						color: #ffffff;
						padding: 10rpx 25rpx;
						border-radius: 25rpx;
						font-size: 20rpx;
					}
				}

				.tlist-info {
					font-size: 24rpx;
					width: 61%;
					padding-left: 25rpx;
					padding-right: 25rpx;
					height: 100%;
					position: relative;
					line-height: 1;

					.bottom_border {
						position: absolute;
						border-bottom: 1px solid #eeeeee;
						left: 25rpx;
						bottom: 0;
						height: 2rpx;
						width: 100%;
					}

					.name {
						height: 28rpx;
						color: #141821;
						font-weight: 500;
						font-size: 26rpx;
					}

					.info {
						margin: 10rpx 0rpx;
						height: 30rpx;
						color: #979797;
						font-size: 24rpx;
					}

					.tipBox {
						height: 50rpx;
					}

					.tip {
						padding: 10rpx 0rpx;

						text {
							border: 2rpx solid #ff1a27;
							color: #ff1a27;
							border-radius: 5rpx;
							font-size: 18rpx;
							padding: 5rpx 10rpx;
							margin-right: 15rpx;
						}
					}

					.tlist-price {
						position: absolute;
						left: 25rpx;
						bottom: 27rpx;
						width: 100%;

						.price-box {
							.price {
								padding-bottom: 15rpx;
								color: #ff1a27;

								.blod {
									font-size: 35rpx;
									font-weight: bold;
								}

								.fen {
									color: #838691;
								}
							}

							.vip_price {
								color: #2dbd59;
								font-size: 26rpx !important;

								text {
									background: linear-gradient(45deg, rgba(21, 197, 52, 1), rgba(21, 197, 52, 1));
									border-radius: 5rpx;
									color: #ffffff;
									padding: 0rpx 10rpx;
									margin-left: 10rpx;
									font-size: 20rpx !important;
								}
							}
						}

						.gocar {
							width: 50rpx;
							height: 50rpx;
							align-self: flex-end;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
	}
}

.footer {
	width: 100%;
	height: 97rpx;
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	line-height: 97rpx;

	.footer-left {
		font-size: 38rpx;
		background-color: #ecd49e;
		flex: 2;
		color: #ee2f72;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		padding-left: 30rpx;
	}

	.footer-right {
		background-color: #ee2f72;
		flex: 1;
		text-align: center;
		color: #ffffff;
		font-size: 36rpx;
	}
}
</style>