shuiguouser/pages/category/category.vue

<template>
	<view class="content">
		<view class="store-info flex">
			<image :src="storeInfo.logo" mode="" class="store-logo"></image>
			<view class="info">
				<view class="name">
					{{storeInfo.name}}
				</view>
				<view class="dis">
					{{storeInfo.range}}km
				</view>
			</view>
		</view>
		<scroll-view scroll-x="true" class="nav" style="background-color: #fff;">
			<view class="flex">
				<view class="nav-item" v-for="(item,index) in cateList" :key="index" @click="navClick(index)"
					:class="{'action': index == current}">
					<image :src="item.big_pic" mode="" class="cate-img"></image>
					<view class="">
						{{item.cate_name}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bom flex" :style="{height: height}">
			<scroll-view scroll-y class="left-aside">
				<view v-for="(item,indexs) in flist" :key="item.id" class="f-item b-b"
					:class="{ active: indexs === currents }" @click="tabtap(indexs)">{{ item.cate_name }}</view>
			</scroll-view>
			<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll"
				:scroll-top="tabScrollTop">
				<view class="good-wrap">
					<view class="good flex" v-for="(good,gindex) in cateList[current].children[currents].list">
						<image :src="good.image" class="good-img" mode=""></image>
						<view class="info">
							<view class="name clamp2">
								{{good.store_name}}
							</view>
							<view class="price">
								￥{{good.specs[0].price}}
							</view>
						</view>
						<image src="/static/index/cart.png" mode="" class="btn" @click="openTc(good)"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="tc" style="height: 114rpx;">

		</view>
		<view class="cart-wrap cart-wraps flex">
			<uni-badge :text="cart_num" absolute="rightTop">
				<image src="/static/index/cart-a.png" mode="" class="btn-cart" @click="openCart"></image>
			</uni-badge>
			<view class="price">
			￥{{totalPirce}}
			</view>
			<view class="btn" @click="createOrder()" :class="{'enaction': cart_num == 0}">
				去结算
			</view>
		</view>
		<view class="js">
			
		</view>
		<uni-popup type="center" ref="specs">
			<view class="specs-wrap">
				<view class="good-info flex">
					<image :src="checkGg.img" mode="" class="good-logo"></image>
					<view class="info">
						<view class="name">
							{{good.store_name}}
						</view>
						<view class="dis">
							{{checkGg.price}}
						</view>
					</view>
				</view>
				<view class="tit">
					选择规格分类
				</view>
				<view class="gg-wrap flex">
					<view class="gg" v-for="(gg,gndex) in good.specs" :class="{'actions': gg.id == checkGg.id}" @click="changeGg(gg)">
						{{gg.name}}
					</view>
				</view>
				<view class="buy-num">
					<view class="">
						购买数量
					</view>
					<uni-number-box v-model="buyNum" :max="maxNum"></uni-number-box>
				</view>
				<view class="buy-now" @click="addNow">
					加入购物车
				</view>
				<image src="/static/icon/close.png" class="close-btn" mode="" @click="closeTc"></image>
			</view>
		</uni-popup>
		<uni-popup type="bottom" ref="cartList">
			<view class="cart_wrap">
				<view class="cart-top flex">
					<image src="/static/icon/bin.png" mode="" @click="clearCart"></image>
					<view class="" @click="clearCart">
						清空购物车
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<view class="cart-list-wrap">
						<view class="good flex" v-for="(good,gindex) in cartList">
							<image :src="good.product.image" class="good-img" mode=""></image>
							<view class="info">
								<view class="name clamp">
									{{good.product.store_name}}
								</view>
								<view class="gg">
									{{good.specs.name}}
								</view>
								<view class="price">
									￥{{good.specs.price}}
								</view>
								
							</view>
							<view class="munbox flex">
								<image src="../../static/icon/reduce.png" mode="" @click="reduce(good,gindex)"></image>
								<input type="number" v-model="good.cart_num" disabled />
								<image src="../../static/icon/add.png" mode="" @click="add(good)"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="cart-wrap flex">
					<uni-badge :text="cart_num" absolute="rightTop">
						<image src="/static/index/cart-a.png" mode="" class="btn-cart" @click="closeCart"></image>
					</uni-badge>
					<view class="price">
					￥{{totalPirce}}
					</view>
					<view class="btn" @click="createOrder()" :class="{'enaction': cart_num == 0}">
						去结算
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getCategoryList,
		getCateList,
		getProducts,
		getCartlist,
		cartAdd,
		cartNum,
		delCart,
		cartCompute
	} from '@/api/product.js';
	// #ifdef H5
	import {
		shareLoad
	} from '@/utils/wxAuthorized';
	// #endif
	export default {
		data() {
			return {
				totalPirce: 0,
				cartList: [],
				cart_num: 0,
				buyNum: 1,
				maxNum: 1,
				checkGg: {},
				good: {},
				storeInfo: {},
				store_id: 0,
				goods: [],
				height: '',
				current: 0,
				currents: 0,
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 9,
				flist: [],
				cateList: [{
					children: [{
						list: []
					}]
				}],
				limit: 20
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onReady(res) {
			var that = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.js').boundingClientRect();
					query.exec(function(res) {
						that.height = resu.windowHeight - res[0].top + 'px';
						console.log(that.height)
					});
				},
				fail: res => {}
			});
		},
		onLoad(opt) {
			this.store_id = opt.id
			this.storeInfo = uni.getStorageSync('storeInfo') || {}
			this.getCateList()
			// #ifdef H5
			// shareLoad()
			// #endif
			this.getCartList()
		},
		// 监听导航栏输入框点击事件
		onNavigationBarSearchInputClicked(e) {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		methods: {
			cartCompute() {
				let cart_ids = this.cartList.map(item => {
					return item.id
				})
				cartCompute({
					store_id: this.storeInfo.id,
					uid: this.userInfo.uid,
					cart_ids: cart_ids
				}).then(res => {
					this.totalPirce = res.data.data.group_price.total_price
				})
			},
			//删除
			deleteCartItem(index) {
				let list = this.cartList;
				let row = list[index];
				let id = row.id;
				delCart({
					cart_ids: [id],
					store_id: this.storeInfo.id
				}).then(res => {
					this.cartList.splice(index, 1);
					uni.hideLoading();
					this.getCartList();
				})
				
			},
			//清空
			clearCart() {
				let that = this
				uni.showModal({
					content: '清空购物车？',
					success: e => {
						if (e.confirm) {
							let st = this.cartList.map(e => {
								return e.id;
							});
							delCart({
								cart_ids: st,
								store_id: that.storeInfo.id
							}).then(e => {
								console.log(e);
								this.getCartList();
							});
							this.cartList = [];
						}
					}
				});
			},
			reduce(item, index) {
				if (item.cart_num == 1) {
					uni.showModal({
						content: '删除该商品？',
						success: e => {
							if (e.confirm) {
								this.deleteCartItem(index);
							}
						}
					});
				} else {
					item.cart_num--;
					this.newNumberChange(item);
				}
			},
			add(item) {
				console.log(item);
				if (item.specs.num*1 > item.cart_num) {
					item.cart_num++;
					this.newNumberChange(item);
				} else {
					return;
				}
			},
			newNumberChange(item) {
				let that = this
				cartNum({
						id: item.id,
						cart_num: item.cart_num,
						store_id: that.storeInfo.id,
						is_gift: 0
					})
					.then(e => {
						console.log(e);
						this.getCartList()
					})
					.catch(function(e) {
						console.log(e);
					});
			},
			openCart() {
				this.$refs.cartList.open()
			},
			closeCart() {
				this.$refs.cartList.close()
			},
			//创建订单
			createOrder() {
				let goodsData = [];
				this.cartList.forEach(item => {
					goodsData.push(item.id);
				});
				if(goodsData.length == 0) return;
				uni.navigateTo({
					url: '/pages/order/createOrder?id=' + goodsData.join(',')
				});
			},
			getCartList() {
				getCartlist({
					store_id: this.storeInfo.id
				}).then(res => {
					let data = res.data
					if(data.cart_num) {
						this.cartList = data.group_price.valid.map(items => {
							items.cart_num = items.cart_num*1
							return items
						})
						this.cart_num = data.cart_num
						this.cartCompute()
					}else {
						this.cartList = []
						this.cart_num = 0
						this.totalPirce = 0
					}
					
					
				})
			},
			addNow() {
				let that = this
				console.log(this.buyNum,that.good)
				cartAdd({
					type: 0,
					product_type: 0,
					store_id: that.storeInfo.id,
					product_id: that.good.id,
					specs_id: that.checkGg.id,
					cart_num: that.buyNum,
					is_gift: 0,
					is_new: 0,//0加入购物车 1直接购买
				}).then(res => {
					uni.showToast({
						title:'添加成功',
						duration:1500
					});
					that.getCartList()
					that.closeTc()
				})
			},
			closeTc() {
				this.$refs.specs.close()
				this.checkGg = {}
				this.good = {}
				this.buyNum = 1
			},
			changeGg(item) {
				this.checkGg = item
				this.maxNum = item.num*1
				
			},
			openTc(item) {
				this.good = item
				this.checkGg = item.specs[0]
				this.buyNum = 1
				this.maxNum = item.specs[0].num*1
				this.$refs.specs.open()
			},
			getProducts(type) {
				let that = this
				let item = that.cateList[that.current].children[that.currents]
				if (type == 'tab' && item.loaded) return;
				console.log(item.loadType,'loadtype')
				if (item.loadType == 'loading' || item.loadType == 'noMore') return;
				item.loadType = 'loading'
				getProducts({
					cate_id: item.id,
					page: 1,
					limit: that.limit,
					store_id: that.store_id
				}).then(res => {
					let arr = res.data.data.map(item => {
						item.buyNum = 0
						return item
					})
					console.log(arr,'arr',item);
					// this.goods = res.data.data
					item.list = item.list.concat(arr)
					item.page++
					if (arr.length == that.limit) {
						item.loadType = 'more'
					} else {
						item.loadType = 'noMore'
					}
					item.loaded = true
				})
			},
			navClick(index) {
				this.current = index
				this.currents = 0
				this.flist = this.cateList[index].children
			},
			getCateList() {
				getCateList().then(res => {
					console.log();
					this.cateList = res.data.map(item => {
						item.children.forEach(items => {
							items.page = 1
							items.loaded = false
							items.loadType = 'more'
							items.list = []
						})
						return item
					})
					this.flist = this.cateList[0].children
					this.getProducts()
				})
			},
			// 载入数据
			async loadData() {
				let obj = this;


				getCategoryList({})
					.then(({
						data
					}) => {
						obj.flist = data.map(function(s) {
							return s;
						});
					})
					.catch(err => {
						console.log(err);
					});
			},
			//一级分类点击
			tabtap(index) {
				this.currents = index
				this.getProducts('tab')
			},
			//右侧栏滚动
			asideScroll(e) {
				// 判断有没有初始化页面高度对象数据
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let box = 0; //列表包裹框高度初始化
				let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
				// 查询当前页面对象
				let view = uni.createSelectorQuery().select('.content');
				view.fields({
						id: true,
						dataset: true,
						rect: true,
						size: true,
						scrollOffset: true
					},
					function(e) {
						// 保存包裹框高度
						box = e.height;
					}
				).exec();
				// 获取所有距离顶部大于滚轮距离页面高度的所有分类
				let tabs = this.flist.filter(item => (item.top - 10) <= scrollTop).reverse();
				if (tabs.length > 0) {
					// 判断是否已经到达滚轮底部
					if (box + scrollTop + bottom >= e.detail.scrollHeight) {
						this.currentId = this.flist[this.flist.length - 1].id;
					} else {
						this.currentId = tabs[0].id;
					}
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize() {
				let h = 0;
				this.flist.forEach(item => {
					let view = uni.createSelectorQuery().select('#main-' + item.id);
					view.fields({
							size: true
						},
						data => {
							item.top = h;
							h += data.height;
							item.bottom = h;
						}
					).exec();
				});
				this.sizeCalcState = true;
			},
			navToList(sid, tid) {
				// 点击导航跳转到详细页面
				uni.navigateTo({
					url: '/pages/product/list?fid=' + this.currentId + '&sid=' + sid + '&tid=' + tid
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		// display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200rpx;
		height: 100%;
		background: #f8f8f8;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		font-size: 32rpx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;

			background-color: #fff;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36rpx;
				width: 8rpx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: 0.8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 100%;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70rpx;
		padding-top: 8rpx;
		font-size: 32rpx;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		border-radius: 15rpx;
		width: 100%;
		background: #fff;
		padding-top: 12rpx;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 171rpx;
		font-size: 28rpx;
		color: #666;
		padding-bottom: 20rpx;

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

	.nav {
		height: 160rpx;
		flex-wrap: wrap;
		width: 100%;
		padding-top: 20rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.nav-item {
		height: 140rpx;
		width: 20%;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		font-weight: 500;
		font-size: 23rpx;
		color: #000000;
		
		.cate-img {
			// border: 1px solid red;
			margin-bottom: 10rpx;
			width: 95rpx;
			height: 95rpx;
			border-radius: 50%;
		}

	}

	.action {
		color: $base-color;

		.cate-img {
			border: 1rpx solid $base-color;
		}
	}
	
	.cart-wrap {
		width: 100%;
		height: 114rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 16rpx 0rpx rgba(11, 4, 7, 0.17);
	}
	.cart-wraps {
		position: fixed;
		bottom: 0;
	}
	.good {
		height: 154rpx;
		width: 100%;
		margin-bottom: 20rpx;
		position: relative;
		.good-img {
			width: 145rpx;
			height: 154rpx;
			border-radius: 15rpx;
			flex-shrink: 0;
		}
		.info {
			height: 100%;
			margin-right: auto;
			padding-left: 10rpx;
			position: relative;
			.name {
				font-weight: bold;
				font-size: 30rpx;
				color: #323232;
			}
			.price {
				position: absolute;
				bottom: 0;
				left: 10rpx;
				font-size: 34rpx;
				color: #FF4300;
			}
			.gg {
				color: #999999;
			}
			
			
		}
		.btn {
			flex-shrink: 0;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			align-self: flex-end;	
		}
	}
	.bom {
		padding-top: 20rpx;
		background-color: #fff;
	}
	.store-info {
		justify-content: flex-start;
		background-color: #e07756;
		padding: 30rpx 20rpx;
		color: #fff;
		.store-logo {
			width: 100rpx;
			height: 100rpx;
		}
		.info {
			margin-left: 20rpx;
			.name {
				font-size: 32rpx;
				font-weight: bold;
				padding-bottom: 10rpx;
			}
			.dis {
				font-size: 24rpx;
			}
		}
		
	}
	
	.cart-wrap {
		padding: 0 20rpx 0 35rpx;
		.btn-cart {
		width: 60rpx;
			height: 55rpx;
		}
		.price {
			margin-right: auto;
			font-weight: bold;
			font-size: 38rpx;
			color: #FF6B11;
			margin-left: 30rpx;
		}
		.btn {
			width: 218rpx;
			height: 80rpx;
			background: #FF6602;
			border-radius: 10rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.specs-wrap {
		width: 670rpx;
		min-height: 659rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 43rpx 24rpx;
		position: relative;
		.tit {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin: 47rpx 0 30rpx;
		}
	}
	.good-info {
		height: 140rpx;
		.good-logo {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
		}
		.info {
			margin-right: auto;
			padding-left:20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			.name {
				font-weight: bold;
				font-size: 36rpx;
				color: #1C2023;
			}
			.dis {
				font-weight: 500;
				font-size: 42rpx;
				color: #FF6602;
				&::before {
					content: '￥';
					font-size: 22rpx;
				}
			}
		}
	}
	.gg-wrap {
		justify-content: flex-start;
		flex-wrap: wrap;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom:30rpx;
		.gg {
			margin-right: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding:  0 50rpx;
			height: 64rpx;
			background: #F6F6F6;
			border-radius: 10rpx;
		}
	}
	.actions {
		background: #ffeff1;
		border: 1px solid #FF5263;
		color: #FF5263 ;
	}
	.buy-num {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}
	.buy-now {
		width: 279rpx;
		height: 84rpx;
		background: #FF6602;
		border-radius: 42rpx;
		
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:50rpx auto 0;
	}
	.close-btn {
		position: absolute;
		bottom: -125rpx;
		height: 83rpx;
		width: 83rpx;
		right: 0;
		left: 0;
		margin: auto;
	}
	.cart_wrap {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		
		.cart-top {
			font-weight: 500;
			font-size: 27rpx;
			color: #999999;
			justify-content: flex-end;
			height: 90rpx;
			border-bottom: 1px solid #EEEEEE;
			padding-right: 30rpx;
			image {
				width: 28rpx;
				height: 28rpx ;
				margin-right: 15rpx;
			}
		}
	}
	.cart-list-wrap {
		padding: 20rpx;
	}
	.munbox {
		width: 144rpx;
		height: 44rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	
		input {
			display: inline-block;
			text-align: center;
		}
	
		image {
			flex-shrink: 0;
			width: 44rpx;
			height: 44rpx;
		}
	}
	.enaction {
		background-color: #bcbcbc !important;
	}
</style>