yicangzongtai_app_240321/pages/index/list2.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666666"></navbar>
		<view class="topsearch u-p30 u-flex-center-sb" @click="gosearch()">
			<view class="u-flex1 u-flex-center leftbox">
				<text class="iconfont u-font30 u-666 u-ml30">&#xe7a6;</text>
				<text class="u-font22 u-CCC u-ml20">请输入搜索关键字</text>
			</view>
			<text class="u-font28 u-1A1A1A u-ml30">搜索</text>
		</view>
		<view class="goodsbox" @touchmove.stop.prevent="moveHandle">
			<scroll-view scroll-y="true" class="leftList">
				<view class="row u-font28 u-666 u-text1" v-for="(item, index) in categoryList" :key="item.id"
					:class="[index === showCategoryIndex ? 'on' : '']" @click="showCategory(index,item.id)">
					{{item.name}}
				</view>
			</scroll-view>
			<view class="rightlist">
				<view class="secoundList u-flex-center u-border-one-one" v-if="categoryTwo.length>0">
					<scroll-view scroll-x="true" class="list-cell ">
						<view class="sList u-mr45" v-for="(item, index) in categoryTwo" :key="item.id"
							@click="twoChildren(index,item.id)" :class="[index == twoIndex ? 'on' : '']">{{item.name}}
						</view>
					</scroll-view>
					<!-- <view class="rightIcons" @click="openCaseList">
						<text class="iconfont u-font30 u-181818 tes ">&#xe6c7;</text>
					</view> -->
				</view>
				<!-- <view class="showHidden" v-if="showHidden">
					<view class="contCase">
						<view class="u-flex-warp u-flex-center">
							<view class="caseitem u-font24 u-999 active">面霜</view>
							<view class="caseitem u-font24 u-999">面霜</view>
							<view class="caseitem u-font24 u-999">面霜</view>
							<view class="caseitem u-font24 u-999">面霜</view>
							<view class="caseitem u-font24 u-999">面霜</view>
						</view>
					</view>
				</view> -->
				<scroll-view scroll-y="true" class="Listbox" :class="{'Listbox-one':categoryTwo.length==0}" refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="tolower">
					<view class="u-plr30">
						<view class="itemList u-flex-center-sb u-border-one-one" v-for="(item) in goodsList"
							:key="item.id">
							<image class="u-goods160" :src="item.cover" mode="" @click="goProductDetails(item.id)">
							</image>
							<view class="u-flex-column-start u-ml30 u-flex1" @click="goProductDetails(item.id)">
								<view class="u-text2">{{item.title}}</view>
								<view class="u-font32 u-bold u-flex-center-sb viewWidth u-FF0000  u-mt10">
									<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
								</view>
							</view>
							<view @click="addCart(item.id,item.shop_id)" class="addShopCard bgc iconfont">&#xe73d;
							</view>
						</view>
						<nodata v-if="noData" :config="{top:15,content:'暂无商品~'}"></nodata>
						<loadMore v-if="goodsList.length>0" :status="status"></loadMore>
					</view>
				</scroll-view>
			</view>
		</view>
		<!--规格-->
		<uniPopup type="bottom" ref="specOpen">
			<view class="u-bg-fff spec">
				<view class="u-plr30 flex-sb u-border-one-one pb30">
					<view class="u-flex-center">
						<image class="u-goods200" :src="choseConfig.cover?choseConfig.cover:cover"></image>
						<view class="u-ml20">
							<view class="u-999 u-font24 u-flex-center">
								<view class="u-FF0000 u-font36">
									<rich-text
										:nodes="$mUtil.priceBigSmall(choseConfig.sale_price?choseConfig.sale_price:moPrice)">
									</rich-text>
								</view>
								<text
									class="u-del u-ml15">￥{{choseConfig.market_price?choseConfig.market_price:moDelPrice}}
								</text>
								<!-- <text class="u-ml10">7.5折</text> -->
							</view>
							<view class="u-font22 u-999 u-mt5">库存 {{stock}} 件</view>
							<view class="u-1A1A1A u-mt25">{{choseConfig.sku_set_name?choseConfig.sku_set_name:'请选择'}}
							</view>
						</view>
					</view>
					<view class="iconfont u-999 closeIcon" @click="specOpenClose">&#xe603;</view>
				</view>

				<view>
					<view class="overHeight">
						<view class="u-mt30" v-for="(item,index) in skuTab" :key="item.head.id">
							<view class="u-plr30">{{item.head.name}}</view>
							<view class="u-mt20 u-border-one-one pb30">
								<view class="u-plr30 u-flex u-flex-warp">
									<view class="spec-item " :class="childrenItem.flag?'activeColor':''"
										@click="chonseSku(index,childrenItem.id)" v-for="childrenItem in item.values"
										:key="childrenItem.id">{{childrenItem.name}}</view>
								</view>
							</view>
						</view>
					</view>


					<view class="u-plr30 u-mt30">
						<view class="u-flex-center-sb">
							<view>购买数量</view>
							<view class="u-flex-center">
								<view class="iconfont minus" @click="resNum">&#xe60b;</view>
								<view class="num">{{add_num}}</view>
								<view class="iconfont plus-sign " @click="addNum">&#xe81a;</view>
							</view>
						</view>
						<view class="specOpen-btn">
							<view>
								<button class="u-btn-two" @click="btnBuy()">加入购物车</button>
							</view>
						</view>
					</view>

				</view>
			</view>
		</uniPopup>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				showHidden: false,
				twoIndex: null,
				price: 100,
				categoryTwo: [],
				goodsList: [],
				showCategoryIndex: 0,
				categoryList: [

				],
				config: {
					back: false, //false是tolbar页面 是则不写
					title: '商品分类',
					color: '#1a1a1a',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#ffffff'
				},
				loading: true,
				checkId: null,
				status: 'more', //more|loading|noMore
				triggered: false,
				skuTab: [], //sku二位数组
				goodsSkuList: [], //sku组合值
				choseConfig: {},
				moPrice: '',
				moDelPrice: '',
				noData: false,
				cover: '',
				add_num: 1,
				hasId: '',
				stock: 0,
				goods_id: null,
				limit_buy_num: 0,
				shopid: '',
				params: {
					category_id: null,
					limit: 10,
					page: 1
				}
			}
		},
		onShow() {
			this.showCategoryIndex = 0
			this.rest()
			this.getAllNav()
		},
		onPullDownRefresh() {
			this.rest()
			this.getShopList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.status = 'loading'
			this.params.page++
			this.getShopList()
		},
		methods: {
			goProductDetails(id) {
				uni.navigateTo({
					url: "../product/goods/goods?id=" + id
				})
			},
			// 减数量
			resNum() {
				if (this.add_num > 1) {
					this.add_num--
				}
			},
			//加数量
			addNum() {
				this.add_num++
			},
			chonseSku(index, id) {
				this.skuTab[index].values.forEach(res => {
					res.flag = false
					if (res.id == id) {
						res.flag = true
					}
				})
				let choseId = []
				this.skuTab.forEach(res => {
					res.values.forEach(Key => {
						if (Key.flag) {
							choseId.push(Key.id)
						}
					})
				})
				let totalId = choseId.join('|')
				this.hasId = totalId
				this.goodsSkuList.forEach(res => {
					if (res.sku_hash_code == totalId) {
						this.choseConfig = res
						this.stock = res.able_stock
						this.able_stock = res.able_stock
					}
				})

			},
			//加入购物车
			btnBuy() {
				let data = {
					goods_id: this.goods_id,
					sku_hash_code: this.hasId,
					add_num: this.add_num,
					source_shop_id: this.shopid
				}

				// 判断是否选中sku
				if (this.skuTab.length > 0 && this.hasId == "") {
					this.$mUtil.toast('请选中sku')
					return false
				}

				// 判断限购
				if (this.add_num > this.limit_buy_num && this.limit_buy_num != 0) {
					this.$mUtil.toast('商品限购' + this.limit_buy_num + '件')
					return false
				}
				//判断库存
				if (this.goodsSkuList.length > 0 && this.able_stock < this.add_num) {
					this.$mUtil.toast('商品库存只有' + this.able_stock + '件')
					return false
				}
				this.$http.post(`/cart/add`, data)
					.then(res => {

						if (res && res.code == 200) {
							this.$mUtil.toast('添加成功')
							this.$refs.specOpen.close()
							this.choseConfig = {}
							this.add_num = 1
						}
					})
			},
			addCart(id, shopid) {
				this.shopid = shopid
				if (id) {
					this.checkSku(id, shopid)
				}
				// if(flag){
				// 	this.$mUtil.toast('代理商品不能加入购物车')
				// }else{
				// 	//加入购物车
				// 	if(id){
				// 		this.checkSku(id)
				// 	}
				// }
			},
			//关闭规格弹窗
			specOpenClose() {
				this.choseConfig = {}
				this.add_num = 1
				this.$refs.specOpen.close()
			},
			rest() {
				this.noData = false
				this.params.page = 1
				this.goodsList = []
			},
			onRefresh(e) {
				this.triggered = true
				this.rest()
				this.getShopList()

			},
			//滚动
			tolower(e) {
				this.status = 'loading'
				this.params.page++
				this.getShopList()
			},
			//查询sku
			checkSku(id, shopid) {
				this.$http.get(`/goods/skus/${shopid}/${id}`)
					.then(res => {
						if (res && res.code == 200) {
							res.data.goods.sku_table.forEach(keys => {
								keys.values.forEach(val => {
									val.flag = false
								})
							})
							this.limit_buy_num = res.data.goods.limit_buy_num
							this.goods_id = res.data.goods.id
							this.skuTab = res.data.goods.sku_table
							this.goodsSkuList = res.data.goods_sku_list
							this.moPrice = res.data.goods.min_sale_price
							this.moDelPrice = res.data.goods.max_sale_price
							this.cover = res.data.goods.cover
							this.stock = res.data.total_stock
							if (res.data.goods.sku_table.length > 0) {
								if (res.data.goods_auth) {
									if (res.data.goods_auth.added) {
										this.$refs.specOpen.open()
									} else {
										this.$mUtil.toast('该商品已经下架')
									}
								} else {
									this.$mUtil.toast('没有经营权限')
								}

							} else {
								this.hasId = ''
								this.btnBuy()
							}
						}
					})
			},
			getShopList() {

				this.$http.get(`/goods/all/pages`, this.params)
					.then(res => {

						this.loading = false;
						this.triggered = false
						if (res && res.code == 200) {
							this.goodsList = this.goodsList.concat(res.page.list)
							if (this.goodsList.length == 0) {
								this.noData = true
							} else {
								this.noData = false
							}

							if (res.page.totalPage <= res.page.currPage) {
								this.status = 'noMore'
							} else {
								this.status = 'more'
							}
						}
					})
			},
			getAllNav() {
				let shop = uni.getStorageSync('shop')
				let shopid = shop.id ? shop.id : ''
				this.loading = false;
				this.$http.get(`/category/all`)
					.then(res => {

						if (res && res.code == 200) {
							this.categoryList = res.list
							this.params.category_id = res.list[0].id
							if (res.list.length > 0) {
								this.checkId = res.list[0].id
							}
							this.categoryTwo = res.list[0].children
							this.getShopList()
						}
					})
			},
			moveHandle() {},
			//搜索页
			gosearch() {
				uni.navigateTo({
					url: "../product/search/search?category_id=" + this.params.category_id
				})
			},
			// 二级分类切换显示
			twoChildren(index, id) {
				console.log(index)
				this.twoIndex = index
				this.params.category_id = id
				this.rest()
				this.getShopList()
			},
			// 分类切换显示
			showCategory(index, id) {
				this.showCategoryIndex = index
				this.twoIndex = null
				this.params.category_id = id
				this.categoryTwo = this.categoryList[index].children
				this.rest()
				this.getShopList()
			},
		}
	}
</script>

<style lang="scss">
	.leftbox {
		height: 60rpx;
		line-height: 60rpx;
		background-color: rgba($color: #E6E6E6, $alpha: .4);
		border-radius: 30rpx;
	}

	.addShopCard {
		position: absolute;
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;

		color: #fff;
		line-height: 54rpx;
		text-align: center;
		font-size: 32rpx;
		right: 0rpx;
		bottom: 30rpx;
	}

	.bgc {
		background-color: #0B844A;
	}

	.bga {
		background-color: #ccc;
	}

	.showHidden {
		position: absolute;
		bottom: 0;
		top: 92rpx;
		width: 570rpx;
		z-index: 2;
		background-color: rgba($color: #000000, $alpha: .5);

		.contCase {
			background-color: #fff;
			padding: 30rpx 0 30rpx 30rpx;

			.caseitem {
				background-color: #F5F5F5;
				border-radius: 46rpx;
				width: 145rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				box-sizing: border-box;
			}

			.caseitem.active {
				background: #abc5b5;
				border: 2rpx solid #284534;
				color: #0B844A;

			}
		}
	}

	.goodsbox {
		width: 100%;
		background-color: #fff;
		display: flex;

		.leftList {
			background-color: rgba($color: #E6E6E6, $alpha: .4);
			width: 180rpx;
			left: 0upx;

			.row {
				height: 132rpx;
				text-align: center;
				line-height: 132rpx;
				position: relative;
				padding: 0 20rpx;
			}

			.row.on {
				background-color: #fff;
				color: #1A1A1A;
				font-size: 30rpx;
				font-weight: bold;
			}

			.row.on:after {
				width: 6rpx;
				height: 40rpx;
				background-color: #0B844A;
				position: absolute;
				left: 0;
				top: 46rpx;
				content: '';
			}
		}

		.leftList,
		.rightlist {
			position: absolute;
			top: calc(200upx + var(--status-bar-height));
			/*  #ifdef  APP-PLUS  */
			top: calc(200upx + var(--status-bar-height));
			/*  #endif  */
			bottom: 0upx;
		}

		.rightlist {
			right: 0rpx;
			width: 570rpx;

			.Listbox {
				position: absolute;
				top: 90rpx;
				bottom: 0upx;
				right: 0;

				.listcont {
					padding: 30rpx;
				}
			}

			.Listbox-one {
				position: absolute;
				top: 0rpx;


			}

			.itemList {
				margin-top: 40rpx;
				padding-bottom: 40rpx;
				position: relative;
			}

			.secoundList {
				width: 510rpx;
				left: 30rpx;
				position: relative;
				height: 90rpx;
				line-height: 90rpx;

				.list-cell {
					white-space: nowrap;
				}

				.sList {
					display: inline-block;
				}

				.sList.on {
					color: #0B844A;
					font-weight: bold;
				}

				.rightIcons {
					width: 45rpx;
					height: 90rpx;
					line-height: 90rpx;
					background-color: #fff;
					position: absolute;
					right: 0;
					text-align: right;
					top: 0rpx;

					.tes {
						display: block;
						transform: rotate(90deg);
					}
				}
			}
		}
	}

	//弹窗
	.spec {
		.pb30 {
			padding-bottom: 30rpx;
		}

		.closeIcon {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		border-radius: 18rpx 18rpx 0rpx 0rpx;
		padding-top: 30rpx;
		max-height: 900rpx;
		overflow-y: auto;

		.spec-item {
			background-color: #F6F6F6;
			border: 1px solid #F6F6F6;
			padding: 12rpx 30rpx;
			font-size: 24rpx;
			color: #1A1A1A;
			border-radius: 4px;
		}

		.activeColor {
			background-color: #E1E6E3;
			border: 1px solid #01321D;
			color: #01321D;
			border-radius: 4px;
		}

		.spec-item:not(:last-child) {
			margin-right: 24rpx;
		}



		//减号
		.minus {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: #dedede;
			border-radius: 8rpx 0rpx 0rpx 8rpx;
		}

		.num {
			width: 74rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border: 1px solid #dedede;
		}

		//加号
		.plus-sign {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: #dedede;
			border-radius: 0rpx 8rpx 8rpx 0rpx;
		}

		.specOpen-btn {
			margin-top: 68rpx;
			padding-bottom: 34rpx;

			button {
				background-color: #0B844A;
				color: #FFFFFF;
			}
		}


	}
</style>