zhonglxcx/zhonglmini/pages/category/category.vue

<template>
	<view>
		<!-- 状态栏 -->
		<view class="header">
			<view class="input-box" @tap="toSearch()">
				<input placeholder="输入商品名称" placeholder-style="color:#c0c0c0;" disabled="disabled" />
				<view class="icon search"></view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place"></view>
		<view class="toplist" style="position: relative;z-index: 1;">
			<mstabs :list="dfllist" v-model="dflindex" :lineAnimated="false" itemColor="#4D9864" lineColor="#4D9864"></mstabs>
		</view>
		<view class="category-list">
			<scroll-view scroll-y="true" class="left" :scroll-into-view="leftIntoView">
				<view class="row" v-for="(category,index) in xfllist" :key="category.id" :class="{ 'on':index==leftIndex }" @tap="leftTap(index)"
				 :data-index="index" :id="'left-'+index">
					<view class="text">
						<view class="block"></view>
						{{category.fenlmc}}
					</view>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollTop" scroll-y="isscoll" class="right" @scrolltolower="onscrolltolower" @scrolltoupper="onscrolltoupper" @scroll="mainScroll" :scroll-into-view="scrollInto"
			 scroll-with-animation="true">
			 <view class="right-goods" :style="{height:tiancheight+'px'}">
				<view class="category" v-for="(v,i) in prodata" :key="i" :id="'item-'+i">
					<view class="twoListName" v-if="v!=''">{{xfllist[i].fenlmc}}</view>
					<view class="good_list" v-for="(product,index) in v" :key="index" @click="toGoods(product)">
						<view class="goodleft">
							<image :src="product.img"></image>
						</view>
						<view class="goodright">
							<view class="cpmc">{{ product.mc }}&nbsp;{{product.gg}}</view>
							<view :class="product.miaosstyle" @tap.stop="changemiaosstyle(index)">
								{{product.miaos}}
							</view>
							<view>
								<text>￥{{ product.price }}{{product.dw}}</text>
								<text style="margin-left: 10upx;">库存&nbsp;{{ product.kcnum }}</text>
							</view>
							<!-- <view>
								<text class="sdtext">{{ product.sdtext }}</text>
							</view> -->
							<view style="padding:0upx 8upx; color: grey; display: flex;align-items: center;" @tap.stop v-if="product.inputnum">
								<input style="font-size: 28upx;color: #41A863;height: 40upx; line-height: 40upx; min-height: 40upx;" type="text" :value="product.bz" @input="inputchangeBz($event,product.bz,product.id,product.kcnum,2)" placeholder="输入备注">
								<input style="font-size: 28upx;color: #41A863;height: 40upx; line-height: 40upx; min-height: 40upx;" type="text" :value="product.fudw" @input="inputchangeFudw($event,product.fudw,product.id,product.kcnum,2)" placeholder="输入副单位">
							</view>
							<view class="rfoot">
								<view class="stopbuy" v-if="product.isokorder==0">
									{{product.opentime}}
								</view>
								<view class="p-b-btn" :class="{active: product.iscollect}" @click.stop="toFavorite(product.id,index,0,i)">
									<text class="yticon icon-shoucang"></text>
								</view>
								<view class="nosell" v-if="product.kcnum<=0"><text>已售空</text></view>
								<view class="number" v-if="product.kcnum">
									<view class="sub" @tap.stop="sub(product.id,i)">
										<view class="jian">-</view>
									</view>
									<view class="input" @tap.stop="discard" >
										<input type="digit" v-model="product.inputnum==0?'':product.inputnum" @input="inputchange($event,product.inputnum,product.id,product.kcnum,i)" />
									</view>
									<view class="add" @tap.stop="add(product.id,i,product.kcnum)">
										<view class="jia">
											<image src="../../static/img/addicon.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="loadtext">{{loadingText}}</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>
<script>
	import mstabs from "@/components/ms-tabs/ms-tabs.vue";
	export default {
		components: {
			mstabs
		},
		data() {
			return {
				//分类列表
				dfllist: [],
				xfllist: [],
				dflindex: 0, //初始第一分类id
				xflid: 0,
				goodlist: [],
				cartlist: [], //购物车商品列表
				miaosstyle: 'miaos',
				scrollHeight: 0,
				prodata: [], //当前一级分类下所有属于二级分类的商品数据
				leftIndex: 0, //左边规定位置下标
				scrollInto: '', //滚动位置
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				aid: 0, //在页面保存其它页面传来的列表id ，做滚动列表位置
				twolevalid: [], //二级分类全部id
				isscoll: false, //scollview默认不可滑动，等待数据渲染完成之后可滑动
				level2: [],
				tiancheight:0,
				loadingText: '上滑加载更多...',
				flag:true,
				isPost:true,
				userinfo:[],
				tmp_data:[],
				pagenum:1,
				dflidkey:0,
			}
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		watch: {
			dflindex() {
				if(this.dflidkey==0){
					var that=this;
					this.xfllist = this.level2[this.dflindex];
					this.leftIndex=0;
					this.pagenum=1;
					this.tmp_data=[];
					that.getgoods(that.xfllist[0].id,0,1);	
				}else{
					this.dflidkey=0;
				}
			}
		},
		async onShow(e) {
			// let xflid = getApp().globalData.xflid;
			// let userid = uni.getStorageSync('userinfo');
			// //带了产品分类id或变换了账号，需刷新页面产品
			// if (xflid!='' || userid.uid!=this.userinfo.uid){
			// 	this.init();
			// }
			let dflid = getApp().globalData.dflid;
			let userid = uni.getStorageSync('userinfo');
			//带了产品分类id或变换了账号，需刷新页面产品
			if (dflid!='' || userid.uid!=this.userinfo.uid){
				this.init();
			}
			this.checkshownum();
		},
		async onLoad() {
			this.init();
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex}`;
			}
		},
		//加载更多
		methods: {
			async init(){
				let t = this;
				this.userinfo = uni.getStorageSync('userinfo');
				//通过其他页面进来的定位
				let dflid = getApp().globalData.dflid;
				let xflid = getApp().globalData.xflid;
				getApp().globalData.dflid='';//获取了值就立马清空这个全局变量
				getApp().globalData.xflid='';//获取了值就立马清空这个全局变量
				console.log(dflid);
				let getdata = await this.$api.getcategory({
					action: 'categorys',
					pid: 0,
					uid: this.userinfo.uid,
					aid: this.userinfo.aid
				});
				
				this.dfllist = getdata.data[0]; //一级分类
				this.level2 = getdata.data[1]; //全部的二级分类
				
				for (let i = 0; i < this.dfllist.length; i++) {
					if (this.dfllist[i].id == dflid) {
						//通过id来定位下标
						this.dflindex = i;
						console.log(i);
					}
				}
				this.xfllist = this.level2[this.dflindex]; //当前选中的一级分类下的二级分类
				// // DOM 挂载后 再调用 getElementTop 获取高度的方法。
				this.$nextTick(function() {
					this.isscoll = true;
					uni.hideLoading()
				})
				let xflindex=0;
				if(xflid==''){
					xflid=this.xfllist[0].id;
				}
				// else{
				// 	this.dflidkey=1;
				// 	for (let i = 0; i < this.xfllist.length; i++) {
				// 		if (this.xfllist[i].id == xflid) {
				// 			//通过id来定位下标
				// 			xflindex = i;
				// 		}
				// 	}	
				// }
				this.$nextTick(function() {
					this.pagenum=1;
					this.tmp_data=[];
					this.getgoods(xflid,xflindex,1)//获取分类下的产品
					this.leftIndex=xflindex;
					this.isfirst = 1;
				})
			},
			getsysteminfo(){
				let that=this;
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync();
				let scrollHeight = windowHeight - 95;
				that.tiancheight=scrollHeight+15;	
			},
			//跳详情页
			toGoods(good) {
				uni.navigateTo({
					url: '../product/detail?gid=' + good.id + "&price=" + good.price
				})
			},
			//搜索跳转
			toSearch() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.navigateTo({
					url: `/pages/search/search`
				})
				uni.hideLoading()
				//uni.showToast({title: "建议跳转到新页面做搜索功能"});
			},
			/* 左侧导航点击 */
			leftTap(key) {
				this.leftIndex = key;
				this.$nextTick(function() {
					this.pagenum=1;
					this.tmp_data=[];
					this.scrollTop = 0
					this.getgoods(this.xfllist[key].id,key,1);
				});	
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			onscrolltoupper(e){
				// let index=this.leftIndex-1;
				// let newlist=this.prodata;
				// this.prodata=[];
				// this.prodata=newlist;
				// if(index>=0 && index<this.xfllist.length){
				// 	let xflid=this.xfllist[index].id;
				// 	this.leftIndex=index;
				// 	this.getgoods(xflid,index,0);
				// }
			},
			onscrolltolower(e){
				let index=this.leftIndex+1;
				if(index>=0 && index<this.xfllist.length && this.tmp_data==''){
					this.pagenum=1;
					let xflid=this.xfllist[index].id;
					this.leftIndex=index;
					this.getgoods(xflid,index,0);
				}else if(this.tmp_data!=''){
					this.pagenum++;
					let xflid=this.xfllist[this.leftIndex].id;
					this.getgoods(xflid,this.leftIndex,0);
				}else{
					this.loadingText="无更多数据了！";
				}
			},
			//获取分类下的产品
			async getgoods(xflid,xflindex,lx) {
				// this.isPost=false;
				let that = this;
				that.scrollTop = 0; //定位右侧商品内容位置
				uni.showLoading({
					title: '正在加载...'
				})
				//通过二级分类查产品
				let getdata = await this.$api.getgoodlist({
					action: 'goodlist2',
					uid: this.userinfo.uid,
					fid: xflid,
					keywords: this.keyword,
					pagenum: this.pagenum,
					aid: this.userinfo.aid
				});

				if(lx==1){
					this.prodata=[];
					for(let i=0;i<=this.xfllist.length;i++){
						this.prodata[i]='';
					}
				}
				
				if (getdata.data.length == 0) {
					this.loadmore = 0;
					this.loadingText = "无更多数据";
				} else {
					this.tmp_data= this.tmp_data.concat(getdata.data);
					this.prodata[xflindex] = this.tmp_data;
				}
	
				// this.prodata[xflindex] = getdata.data;
				
				// that.$forceUpdate();
				this.$nextTick(function() {
					uni.hideLoading();
					that.getsysteminfo();
				})
				if(lx==1){
					that.scrollTop = that.old.scrollTop;
					that.$nextTick(function() { //初始化scollview的顶部位置，每次切换tab时top值必须为空0
						that.scrollTop = 0;
					})
					that.$forceUpdate();
				}
				this.checkshownum();
			},
			async addcollection(id, index, a, levalkey) {
				let type = !this.prodata[levalkey][index].iscollect;
				if (this.userinfo) {
					let redata = await this.$api.addcollection({
						action: 'addcollection',
						type: type,
						uid: this.userinfo.uid,
						id: id,
						aid: this.userinfo.uid,
					});
					uni.showToast({
						title: redata.msg,
						icon: 'none'
					})
					if (redata.code == 1) {
						this.prodata[levalkey][index].iscollect = !this.prodata[levalkey][index].iscollect;
					}
					this.$forceUpdate();
				} else {
					uni.navigateTo({
						url: '/pages/user/login'
					})
				}
			},
			//收藏
			toFavorite(id, index, type, key) {
				this.addcollection(id, index, type, key);
			},
			//减操作
			sub(id) {
				let getcartlist = uni.getStorageSync('cartlist');
				let isexit = this.findidfromstor(id);
				let delid = 0;
				for (let i = 0; i < getcartlist.length; i++) {
					if (isexit.id == getcartlist[i].id) { //找到商品一样的商品
						getcartlist[i].num--; //数量减
						if (getcartlist[i].num <= 0) {
							//删除当前商品缓存
							getcartlist.splice(i, 1);
							uni.setStorageSync('cartlist', getcartlist)
							break; //跳出循环
						} else {
							getcartlist[i].total = getcartlist[i].num * getcartlist[i].price
							uni.setStorageSync('cartlist', getcartlist)
							break; //跳出循环
						}
					}
				}
				this.checkshownum();
			},
			// 增加数量,type 0-推荐商品，1-猜你喜欢商品
			add(id, key,cknum) {
				let getcartlist = uni.getStorageSync('cartlist');
				//首次加购物车
				if (getcartlist == '') {
					this.cartlist = [];
					this.cartlist.push(this.findarrbyid(id, key));
					//计算每个商品的总价格
					this.cartlist.map((item, index) => {
						item.total = item.price * item.num
					});
					uni.setStorageSync('cartlist', this.cartlist);
				} else {
					//已有商品在购物车
					let isexit = this.findidfromstor(id, key);
					if (!isexit) {
						//购物车中还没当前商品
						//不存在
						getcartlist.push(this.findarrbyid(id, key));
						for (let i = 0; i < getcartlist.length; i++) {
							if (id == getcartlist[i].id) {
								getcartlist[i].total = getcartlist[i].num * getcartlist[i].price
							}
						}
						uni.setStorageSync('cartlist', getcartlist);
					} else {
						//存在
						for (let i = 0; i < getcartlist.length; i++) {
							if (isexit.id == getcartlist[i].id) { //找到商品一样的商品
								if(cknum<=getcartlist[i].num){
									uni.showToast({
										title:'库存不足！',
										icon:'none'
									});
									break; //跳出循环
								}
								getcartlist[i].num++; //数量自增
								getcartlist[i].total = getcartlist[i].num * getcartlist[i].price
								uni.setStorageSync('cartlist', getcartlist)
								break; //跳出循环
							}
						}
					}
				}
				this.checkshownum();
			},
			// input框直接加入购物车
			inputadd(id,key,inputnum) {
				let getcartlist = uni.getStorageSync('cartlist');
				//首次加购物车
				if (getcartlist == '') {
					this.cartlist = [];
					this.cartlist.push(this.findarrbyid(id, key));
					//计算每个商品的总价格
					this.cartlist.map((item, index) => {
						item.total = parseFloat((item.price * inputnum) * 100) / 100;
						item.num = parseFloat(inputnum);
					});
					uni.setStorageSync('cartlist', this.cartlist);
				} else {
					//已有商品在购物车
					let isexit = this.findidfromstor(id, key);
					if (!isexit) {
						//购物车中还没当前商品
						//不存在
						getcartlist.push(this.findarrbyid(id, key));
						for (let i = 0; i < getcartlist.length; i++) {
							if (id == getcartlist[i].id) {
							getcartlist[i].total = parseFloat((inputnum * getcartlist[i].price) * 100) / 100;
								getcartlist[i].num = parseFloat(inputnum);
							}
						}
						uni.setStorageSync('cartlist', getcartlist);
					} else {
						//存在
						for (let i = 0; i < getcartlist.length; i++) {
							if (isexit.id == getcartlist[i].id) { //找到商品一样的商品
								getcartlist[i].num=inputnum; //数量自增
								if(getcartlist[i].kcnum<=getcartlist[i].num){
									uni.showToast({
										title:'库存不足！',
										icon:'none'
									});
									break; //跳出循环
								}
								getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
								uni.setStorageSync('cartlist', getcartlist)
								break; //跳出循环
							}
						}
					}
				}
				this.checkshownum();
			},
			inputchange(inputsl,inputnum, id, kcnum,key) {
				inputnum=parseFloat(inputsl.detail.value);
				let getcartlist = uni.getStorageSync('cartlist');
				if (inputnum > 0) {
					if (inputnum > kcnum) {
						uni.showToast({
							title: '库存不足',
							icon: 'none'
						})
						return;
					}
					this.inputadd(id,key,inputnum);//input框直接添加购物车
				} else {
					for (let i = 0; i < getcartlist.length; i++) {
						if (id == getcartlist[i].id) { //找到商品一样的商品
							getcartlist[i].num = 0;
							uni.setStorageSync('cartlist', getcartlist)
							break; //跳出循环
						}
					}
					this.checkshownum();
				}
			},
			inputchangeBz(inputsl,inputnum, id, kcnum,type) {
				inputnum=inputsl.detail.value;
				let getcartlist = uni.getStorageSync('cartlist');
				let isbz=0;
				for (let i = 0; i < getcartlist.length; i++) {
					if (id == getcartlist[i].id) { //找到商品一样的商品
						getcartlist[i].bz = inputnum;
						uni.setStorageSync('cartlist', getcartlist)
						isbz=1;
						break; //跳出循环
					}
				}
				if(isbz==0){
					uni.showToast({title:'请您输入数量后再填备注',icon:'none'});
					return;
				}
				this.checkshownum();
			},
			inputchangeFudw(inputsl,inputnum, id, kcnum,type) {
				inputnum=inputsl.detail.value;
				let getcartlist = uni.getStorageSync('cartlist');
				let is=0;
				for (let i = 0; i < getcartlist.length; i++) {
					if (id == getcartlist[i].id) { //找到商品一样的商品
						getcartlist[i].fudw = inputnum;
						uni.setStorageSync('cartlist', getcartlist)
						is=1;
						break; //跳出循环
					}
				}
				if(is==0){
					uni.showToast({title:'请您输入数量后再填副单位',icon:'none'});
					return;
				}
				this.checkshownum();
			},
			//初始化购物车数据
			checkshownum() {
				let getcartlist = uni.getStorageSync('cartlist');
				let carid = [];let carbz = [];let carfudw = [];
				let prodata = this.prodata;
				for (let i = 0; i < getcartlist.length; i++) {
					if(getcartlist[i]!=''){
						let num = carid[getcartlist[i]['id']] || 0
						carid[getcartlist[i]['id']] = parseFloat(num) + parseFloat(getcartlist[i]['num']);
						carbz[getcartlist[i]['id']] = getcartlist[i]['bz'];
						carfudw[getcartlist[i]['id']] = getcartlist[i]['fudw'];
					}
				}
				for (let i = 0; i < prodata.length; i++) {
					if(prodata[i]!=''){
						for (let y = 0; y < prodata[i].length; y++) {
							if (carid[prodata[i][y]['id']]) {
								this.$set(this.prodata[i][y], 'inputnum', carid[prodata[i][y]['id']])
								this.$set(this.prodata[i][y], 'bz', carbz[prodata[i][y]['id']])
								this.$set(this.prodata[i][y], 'fudw', carfudw[prodata[i][y]['id']])
							} else {
								this.$set(this.prodata[i][y], 'inputnum', 0)
								this.$set(this.prodata[i][y], 'bz', '')
								this.$set(this.prodata[i][y], 'fudw', '')
							}
						}
					}
				}
				this.$forceUpdate();
			},
			//查找商品
			findarrbyid(id, key) {
				let arr = this.prodata[key];
				for (let i = 0; i < arr.length; i++) {
					if (arr[i]['id'] == id) {
						//console.log(arr[i],'要保存的东西')
						return arr[i];
						break; //跳出循环
					}
				}
			},
			//从本地存储中根据id获取数组
			findidfromstor(id) {
				let arr = uni.getStorageSync('cartlist');
				for (let i = 0; i < arr.length; i++) {
					if (arr[i]['id'] == id) {
						return arr[i];
						break; //跳出循环
					}
				}
			},
			//点击改变描述显示
			changemiaosstyle(index) {
				let item = this.goodlist[index]
				item.checked = !item.checked
				if (item.miaosstyle == 'miaos') {
					item.miaosstyle = 'miaosshow';
				} else {
					item.miaosstyle = 'miaos';
				}
				this.$set(this.goodlist, index, item)
			},
			discard() {
				//丢弃,防止事件冒泡而设
			}
		}
	}
</script>
<style lang="scss">
	@font-face {
		font-family: "HMfont-home";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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
	}

	.icon {
		font-family: "HMfont-home" !important;
		font-size: 60upx;
		font-style: normal;
		color: #000000;

		&.search {
			&:before {
				content: "\e628";
			}
		}

		&.xia {
			&:before {
				content: "\e689";
			}
		}
	}
.loadtext {
		display: flex;
		justify-content: center;
		font-size: 25upx;
		color: #D6D6D6;
		margin-bottom: 20upx;
		margin-top: 20upx;
	}
	.twoListName {
		display: block;
		text-align: center;
		color: #348143;
		padding: 30upx 0;
		font-size: 30upx;
		font-weight: bold;
	}

	.stopbuy {
		margin-top: 15upx;
		font-size: 28upx;
		color: #F2F5F2;
		padding: 15upx;
		border-radius: 5upx;
		background-color: #B7B7B7;
		text-align: center;
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */

	}

	.header {
		width: 100%;
		padding: 0 5%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.input-box {
			width: 100%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;

			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}

			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}

	}

	.place {

		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

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

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

		.left {
			width: 24%;
			left: 0upx;
			background-color: #f2f2f2;

			.row {
				width: 100%;
				height: 90upx;
				display: flex;
				align-items: center;

				.text {
					width: 100%;
					position: relative;
					font-size: 28upx;
					display: flex;
					justify-content: center;
					color: #3c3c3c;

					.block {
						position: absolute;
						width: 0upx;
						left: 0;
					}
				}

				&.on {
					height: 100upx;
					background-color: #fff;

					.text {
						font-size: 30upx;
						font-weight: 600;
						color: #2d2d2d;

						.block {
							width: 10upx;
							height: 80%;
							top: 10%;
							background-color: #4D9864;
						}
					}
				}
			}
		}

		.right {
			width: 76%;
			left: 24%;

			.good_list {
				display: flex;
				justify-content: space-around;
				padding: 15upx 0;
				border-bottom: 1upx #F0F0F0 solid;
				height: auto;

				.goodleft {
					width: 50%;
					padding: 10upx 0 10upx 15upx;

					image {
						width: 160upx;
						height: 160upx;
						border-radius: 15upx;
					}
				}

				.goodright {
					width: 100%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					text-align: justify;
					overflow: hidden;
					font-size: 28upx;
					color: #747474;
				
					.cpmc{
						overflow:hidden;
						text-overflow:ellipsis;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:1;
					}
					.sdtext {
						padding: 2upx 8upx;
						border: 1upx #DBDBDB solid;
						border-radius: 5upx;
						color: #B9B9B9;
						font-size: 25upx;
						margin-top: 3upx;

					}

					.sellnum {
						font-size: 25upx;
						padding-left: 15upx;
						color: #B9B9B9;
					}

					.miaos {
						width: 100%;
						margin: 10upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						text-align: justify;
						overflow: hidden;
						font-size: 28upx;
						color: #747474;
					}

					.miaosshow {
						margin: 10upx;
						font-size: 28upx;
						color: #747474;
					}

					.rfoot {
						display: flex;
						justify-content: space-between;
						justify-items: center;
						padding-top: 8upx;
					}

					//收藏样式
					.p-b-btn {

						.yticon {
							font-size: 40upx;
							line-height: 48upx;
							color: $font-color-light;
						}

						&.active,
						&.active .yticon {
							color: $uni-color-primary;
						}

						.icon-fenxiang2 {
							font-size: 42upx;
							transform: translateY(-2upx);
						}

						.icon-shoucang {
							font-size: 50upx;
						}
					}
				}
			}

			.nosell {
				display: flex;
				justify-content: flex-end;

				text {
					position: relative;
					right: 5upx;
					padding: 5upx;
					background-color: #EAEAEA;
					color: white;
					font-size: 28upx !important;
				}
			}

			.number {
				display: flex;
				justify-content: flex-end;
				margin-right: 30upx;
				margin-bottom: 10upx;

				.input {
					width: 70upx;
					height: 45upx;
					margin: 0 10upx;
					// background-color: #f3f3f3;
					border-bottom: 1upx #ADADAD solid;

					input {
						width: 60upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						font-size: 26upx;
					}
				}

				.sub,
				.add {
					width: 45upx;
					height: 45upx;
					border-radius: 5upx;
				}

				.jia {
					display: flex;
					width: 45upx;
					height: 45upx;
					justify-content: center;
					justify-items: center;
					align-items: center;
					background-color: #41A863;
					color: #fff;
					border-radius: 50%;

					image {
						width: 40upx;
						height: 40upx;
						padding: 7upx;
					}
				}

				.jian {
					display: flex;
					width: 45upx;
					height: 45upx;
					justify-content: center;
					justify-items: center;
					align-items: center;
					background-color: #41A863;
					color: #fff;
					border-radius: 50%;
					padding-bottom: 10upx;
				}
			}
		}
	}
</style>