yyky_new_app/pages/goods_cate/goods_cate.vue

<template>
	<view class='productSort'>
		<!-- #ifdef APP-PLUS -->
		<!-- 状态栏占位 -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<!-- 商品搜索 -->
		<view class='header acea-row row-center-wrapper' style="margin-top: var(--status-bar-height)">
			<view class='acea-row row-between-wrapper input'>
				<!-- #ifdef MP -->
				<text class='iconfont icon-sousuo'></text>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<u-icon name="search"></u-icon>
				<!-- #endif -->
				<input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search'
					name="search" placeholder-class='placeholder' />
			</view>
		</view>
		<!-- 商品分类（左） -->
		<view class='aside' :style="{bottom: tabbarH + 'px',height: height + 'rpx'}">
			<scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">
				<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'
					v-for="(item,index) in productList" :key="index" @click='tap(item.id,index,"b"+index)'>
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		
		<!-- 商品分类（右） -->
		<view class='conter'>
			<scroll-view scroll-y="true" :style='"height:"+height+"rpx;margin-top: 96rpx;"'
				scroll-with-animation='true'>
				<view class='listw'>
					<view class='list acea-row'>
						<view class='list acea-row row-between-wrapper' :class='is_switch?"":"on"'>
							<view class='item' :class='is_switch?"":"on"' hover-class='none'
								v-for="(item,index) in goodsRightList" :key="index" @click="godDetail(item)">
								<view class='pictrue' :class='is_switch?"":"on"'>
									<image :src='item.picUrl' :class='is_switch?"":"on"'></image>
								</view>
								<view class='text' :class='is_switch?"":"on"'>
									<view class='name line1'>{{item.name}}</view>
									<view class='money font-color' :class='is_switch?"":"on"'> <text
											class='num'>￥{{ fen2yuan(item.price) }}</text>

										<view class="carnum num-dis row-left" v-if="item.selected_goods_num>0">
											<view class="item reduce"
												:class="attr.productSelect.cart_num <= 1 ? 'on' : ''"
												@click.stop="CartNumDes(item.id)">
												-
											</view>
											<view class='item num'>
												<input type="number" v-model="item.selected_goods_num"
													data-name="productSelect.cart_num"
													@input="bindCode(attr.productSelect.cart_num)" />
											</view>
											<view v-if="iSplus" class="item plus"
												:class="attr.productSelect.cart_num >= attr.productSelect.stock ? 'on'  : ''"
												@click.stop="CartNumAdd(item.id)">
												+
											</view>
											<view v-else class='item plus' :class='(attr.productSelect.cart_num >= attr.productSelect.stock)
														|| (attr.productSelect.cart_num >= attr.productSelect.limitCount)
														? "on":""' @click.stop='CartNumAdd(item.id)'>+</view>
										</view>
										<view class="circle" v-else @click.stop="addGoods(item.skus[0].id,index)">+
										</view>
									</view>
									<view class='vip acea-row row-between-wrapper' :class='is_switch?"":"on"'>
										<view class='vip-money' v-if="item.vipPrice > 0">
											￥{{ fen2yuan(item.price - item.vipPrice) }}
											<image src='../../static/images/vip.png'></image>
										</view>
										<view>已售 {{ item.salesCount || 0}} 库存{{item.stock}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view :style='"height:"+(height-300)+"rpx;"' v-if="number < 15" />
			</scroll-view>
		</view>
		
		<!-- 购物车 -->
		<!-- <view class='footer acea-row row-between-wrapper' >
			<view class="zz" @click="hideShoppingCar"></view>
			<view class='money acea-row row-middle' @click="showShoppingCar">
				<view>费用:￥{{ fen2yuan(0) }}</view>
				<form @submit="subOrder" report-submit='true'>
					<button class='placeOrder bg-color' formType="submit">立即下单</button>
				</form>
			</view>
		</view> -->
		
		<!-- 购物车列表 -->
		<!--  :style="{display: showCar ? 'flex' : 'none'}" -->
		<view class="cart-box" v-if="goodsRightList.length>0">
			<orderAddcart ref='orderAddcart' @showMask='isShowMask' @cartList="handleCartList"></orderAddcart>
		</view>
		<view class="zz" @click="hideShoppingCar" v-if="showMask"></view>
	</view>
</template>
<script>
	import * as CategoryApi from '@/api/product/category.js';
	import * as ProductSpuApi from '@/api/product/spu.js';
	import * as Util from '@/utils/util.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import * as TradeCartApi from '@/api/trade/cart.js';
	import {
		mapGetters
	} from "vuex";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import orderAddcart from '@/components/order_addcart';
	export default {
		data() {
			return {
				navlist: [],
				productList: [], // 商品分类，树形结构
				navActive: 0,
				number: "",
				height: 0,
				hightArr: [],
				toView: "",
				tabbarH: 0,
				limit: 10,
				page: 1,
				goodsRightList: [],
				cartList:[],
				//显示购物车
				showCar: false,
				showMask:false,	
				is_switch:false,
			}
		},
		components: {
			orderAddcart
		},
		computed: mapGetters(['isLogin']),
		// onLoad(options) {
		// 	this.getAllCategory();
		// },
		onShow(){
			this.getAllCategory()
		},
		methods: {
			infoScroll: function() {
				let len = this.productList.length;
				let child = this.productList[len - 1] && this.productList[len - 1].child ? this.productList[len - 1]
					.child : [];
				this.number = child ? child.length : 0;

				// 设置商品列表高度
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
				let hightArr = [];
				// for (let i = 0; i < len; i++) {
				// 	// 获取元素所在位置
				// 	let query = uni.createSelectorQuery().in(this);
				// 	let idView = "#b" + i;
				// 	query.select(idView).boundingClientRect();
				// 	query.exec(function(res) {
				// 		let top = res[0].top;
				// 		hightArr.push(top);
				// 		that.hightArr = hightArr
				// 	});
				// }
			},
			handleCartList(data){
				console.log(data,'datadtaa',this.goodsRightList)
				this.cartList=data
				this.goodsRightList.forEach(goodsItem => {
				    data.forEach(item => {
				        if (goodsItem.id === item.spu.id) {
				            // 找到了匹配的数据，将 selected_goods_num 赋值为 data 中的 count
				            goodsItem.selected_goods_num = item.count;
				            
				            // 在这里可以对找到的数据进行其他操作
				            console.log('Matched item:', goodsItem);
				        }
				    });
				});
			},
			isShowMask(){
				this.showMask=true
			},
			tap: function(itemId, index, id) {
				console.log('点击了', itemId, id, index)
				this.toView = id;
				this.navActive = index;
				this.getGoodsList(itemId)
			},
			getGoodsList(id) {
				ProductSpuApi.getSpuPage({
					categoryId: id,
					pageNo: this.page,
					pageSize: this.limit
				}).then(res => {
					console.log(res, 77788999)
					this.goodsRightList = res.data.list.map(item => {
						return {
							...item,
							selected_goods_num: 0
						}
					})
				})
			},
			getAllCategory: function() {
				console.log('这里执行了')
				CategoryApi.getCategoryList().then(res => {
					this.productList = Util.handleTree(res.data);
					console.log(this.productList, 'this.productList')
					this.getGoodsList(this.productList[0].id)
					setTimeout(() => {
						this.infoScroll();
					}, 500)
				})
			},
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[
							0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
			},
			searchSubmitValue: function(e) {
				if (this.$util.trim(e.detail.value).length > 0) {
					uni.navigateTo({
						url: '/pages/goods_list/index?searchValue=' + e.detail.value
					})
				} else {
					return this.$util.Tips({
						title: '请填写要搜索的产品信息'
					});
				}
			},
			fen2yuan(price) {
				return Util.fen2yuan(price)
			},
			// 去详情页
			godDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}`
					})
				})
			},
			addGoods(id, index) {
				// 未登录，需要跳转
				if (!this.isLogin) {
					toLogin();
					return;
				}

				// // 库存不足
				// let sku = this.attr.productSelect;
				// if (sku.stock === 0) {
				//   return that.$util.Tips({
				//     title: "产品库存不足，请选择其它"
				//   });
				// }
				// 添加购物车
				TradeCartApi.addCart({
					count: 1,
					skuId: id,
				}).then(res => {
					console.log('我进拉了', index, this.goodsRightList, )
					console.log(this.goodsRightList[index].selected_goods_num, 888)
					// this.$set(this.goodsRightList[index],'selected_goods_num')
					this.goodsRightList[index].selected_goods_num++
					// // 关闭 attr 组件
					// this.attr.cartAttr = false;
					// 提示成功
					this.$util.Tips({
						title: "添加购物车成功",
						success: () => {
							this.$refs.orderAddcart.getCartList()
						}
					});
				}).catch(res => {
					this.$util.Tips({
						title: res
					});
				});
			},
			CartNumDes: function(id) {
				console.log('我减少了',id,this.cartList)
				const index = this.cartList.findIndex(item => item.spu.id === id);
				this.$refs.orderAddcart.subCart(index)
			},
			CartNumAdd: function(id) {
				console.log('我增加了',id,this.cartList)
				const index = this.cartList.findIndex(item => item.spu.id === id);
				this.$refs.orderAddcart.addCart(index)
			},
			//显示购物车
			showShoppingCar(){
				// if(this.goodsTotalNumber == 0){
				// 	return;
				// }
				// this.footHeight = '100%';
				this.showCar = true;
				// this.carGoodsScrollTop = 0;
			},
			//隐藏购物车
			hideShoppingCar(){
				// this.footHeight = '0';
				this.$refs.orderAddcart.showCartList  = false;
				this.showMask=false
			},
		}
	}
</script>
<style scoped lang="scss">
	
	.cart-box{
		display: flex;
		justify-content: flex-start;
		flex-flow: column;
		background: #ffffff;
		position: absolute;
		bottom: 0; 
		z-index: 8;
		max-height: 66%;
		
		padding-bottom: 48px;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		overflow: hidden;
		width: 100%;
		border: 1rpx solid red;
	}
	.zz{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.7);
		z-index: 1;
	}
	.productSort .header {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.productSort .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.productSort .header .input .iconfont {
		font-size: 26rpx;
		color: #555;
	}

	.productSort .header .input .placeholder {
		color: #999;
	}

	.productSort .header .input input {
		font-size: 26rpx;
		height: 100%;
		width: 597rpx;
	}

	.productSort .aside {
		position: fixed;
		width: 180rpx;
		left: 0;
		top: 0;
		background-color: #f7f7f7;
		overflow-y: scroll;
		overflow-x: hidden;

		height: auto;
		margin-top: 96rpx;
	}

	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}

	.productSort .aside .item.on {
		background-color: #fff;
		border-left: 4rpx solid #fc4141;
		width: 100%;
		text-align: center;
		color: #fc4141;
		font-weight: bold;
	}

	.productSort .conter {
		margin: 96rpx 0 0 180rpx;
		padding: 0 14rpx;
		background-color: #fff;
	}

	.productSort .conter .listw {
		// padding-top: 20rpx;
	}

	.productSort .conter .listw .title {
		height: 90rpx;
	}

	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.productSort .conter .list {
		flex-wrap: wrap;
	}

	.productSort .conter .list .item {
		// width: 177rpx;
		// margin-top: 26rpx;
	}

	.productSort .conter .list .item .picture {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.productSort .conter .list .item .picture image {
		width: 100%;
		height: 100%;
		border-radius: 50%;

		div {
			background-color: #f7f7f7;
		}
	}

	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}




	.productSort .conter .listw .list {
		padding: 0 30rpx;
	}

	.productSort .conter .listw .list.on {
		border-radius: 14rpx;
		margin-top: 0 !important;
		background-color: #fff;
		padding: 40rpx 0 0 0;
		// margin: 20rpx 0;
		// background-color: #fff;
	}

	.productSort .conter .listw .list .item {
		// width: 335rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin-bottom: 20rpx;
	}

	.productSort .conter .listw .list .item.on {
		width: 100%;
		display: flex;
		padding: 0 0 50rpx 24rpx;
		margin: 0;
		border-radius: 14rpx;
	}

	.productSort .conter .listw .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 335rpx;
	}

	.productSort .conter .listw .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}

	.productSort .conter .listw .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.productSort .conter .listw .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productSort .conter .listw .list .item .text {
		padding: 18rpx 20rpx;
		font-size: 30rpx;
		color: #222;
	}

	.productSort .conter .listw .list .item .text.on {
		// width: 456rpx;
		flex: 1;
		padding: 0 0 0 20rpx;
	}

	.productSort .conter .listw .list .item .text .money {
		width: 100%;
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	

	.productSort .conter .listw .list .item .text .money.on {
		margin-top: 50rpx;
	}

	.productSort .conter .listw .list .item .text .money .num {
		font-size: 28rpx;
	}

	.productSort .conter .listw .list .item .text .money .carnum {
		// height: 54rpx;
		margin-top: 24rpx;
		display: flex;
	}

	.productSort .conter .listw .list .item .text .money .carnum view {
		// border: 1px solid #a4a4a4;
		// width: 84rpx;
		text-align: center;
		height: 100%;
		line-height: 54rpx;
		color: #282828;
		font-size: 45rpx;
		margin-left: 10rpx;
	}

	.productSort .conter .listw .list .item .text .money .carnum .reduce {
		border-right: 0;
		border-radius: 6rpx 0 0 6rpx;
		line-height: 48rpx;
	}

	.productSort .conter .listw .list .item .text .money .carnum .reduce.on {
		// border-color: #e3e3e3;
		color: #DEDEDE;
		font-size: 44rpx;
	}

	.productSort .conter .listw .list .item .text .money .carnum .plus {
		border-left: 0;
		border-radius: 0 6rpx 6rpx 0;
		line-height: 46rpx;
	}

	.productSort .conter .listw .list .item .text .money .carnum .plus.on {
		border-color: #e3e3e3;
		color: #dedede;
	}

	.productSort .conter .listw .list .item .text .money .carnum .num {
		background: rgba(242, 242, 242, 1);
		color: #282828;
		font-size: 28rpx;
		border-radius: 12rpx;
		line-height: 29px;
		height: 54rpx;

		input {
			display: -webkit-inline-box;
		}
	}

	.productSort .conter .listw .list .item .text .money .circle {
		width: 40rpx;
		height: 40rpx;
		background-color: #E93323;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		// align-items: center;
		color: white;
		font-size: 14px;
	}

	.productSort .conter .listw .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productSort .conter .listw .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productSort .conter .listw .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}

	.productSort .conter .listw .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}

	.footer {
		z-index: 9;
		width: 100%;
		// height: 100rpx;
		// background-color: red;
		height: 100rpx;
		color: #fff;
		background-color: #313131;
		border-radius: 49rpx;
		position: fixed;
		padding: 0 24rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
		// border-bottom: 1px solid #EEEEEE;
		/* #ifdef H5 */
		bottom: 98rpx;
		/* #endif */
		/* #ifdef MP */
		bottom: 0;
		/* #endif */
		/* #ifndef MP */
		// bottom: 98rpx;
		// bottom: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		// bottom: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		/* #endif */
	}

	.footer .checkAll {
		font-size: 28rpx;
		color: #282828;
		margin-left: 14rpx;
	}

	.footer .money {
		font-size: 30rpx;
		color: #fff;
		width: 100%;
		display: flex;
		justify-content: space-between;

	}
	.footer .zz{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.7);
		z-index: 1;
	}

	.footer .placeOrder {
		color: #fff;
		font-size: 30rpx;
		width: 226rpx;
		height: 70rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 22rpx;
		background-color: #EC3534;
	}

	.footer .button .bnt {
		font-size: 28rpx;
		color: #999;
		border-radius: 50rpx;
		border: 1px solid #999;
		width: 160rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.footer .button form~form {
		margin-left: 17rpx;
	}
</style>