qzw_xcx/pages/index/shop.vue

<template>
 	<view class="container">
		<scroll-view  style="height: 100vh;" class="floor-list"
		 :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		 refresher-enabled="true">
 		<view class="carousel">
 			<swiper indicator-dots circular=true duration="400">
 				<swiper-item class="swiper-item" v-for="(item,index) in datalist.images" :key="index">
 					<view class="image-wrapper">
 						<image
						    :src="pictureUrl+'/uploads/home/store/goods/'+item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url"
 							class="loaded" 
 							mode="aspectFill"
 						></image>
 					</view>
 				</swiper-item>
 			</swiper>
 		</view>
 		
 		<view class="introduce-section">
			<view class="titleLayout" >
				<view class="title">{{datalist.goods_name}}</view>
				<view @tap="shopDetail" style="display: flex;flex-direction: row;">
					<view class="titleRight">
						<view style="font-size: 36upx;color: #D9332E;text-align: right;">{{datalist.praise}}%</view>
						<view style="color: #606266;font-size: 28upx;">好评率</view>
					</view>
					<view style="display: flex;align-items: center;">
						 <uni-icon  size="18" type="arrowright"></uni-icon>
					</view>
				</view>
			</view>
			<view style="color: #909399;padding: 10upx 0 15upx 0;" v-if="datalist.points>0">购买得{{datalist.points}}圈币</view>
 			<view  class="titleLayout price-box">
				<view>
					<text class="price-tip">¥</text>
					<text class="price">{{datalist.goods_price}}</text>
					<text class="m-price">¥{{datalist.goods_marketprice}}</text>
					<text class="price-tip" v-if="datalist.goods_storage == 0">已下架</text>
				</view>
				<view>
					<text style="color: #909399">月销售{{datalist.sale_number}}</text>
				</view>
 				
 			</view>
 			
 		</view>
 		
 		<view class="c-list">
 			<view  style="display: flex;justify-content: space-between;" class="c-row b-b" @click="toggleSpec">
 				<view style="font-size: 32upx;color: #909399;">规则数量选择</view>
				<view>
				 <uni-icon  size="20" type="arrowright"></uni-icon>
				 </view>
 			</view>
 		</view>
 		
 		<!-- 评价 -->
 		<view @tap="shopDetail" style="border-bottom: 20rpx solid #F5F5F5;" class="eva-section">
 			<view  style="display: flex;justify-content: space-between;" class="c-row b-b">
 				<view style="font-size: 32upx;color: #909399;">评价</view>
 				<view>
 				 <uni-icon  size="20" type="arrowright"></uni-icon>
 				 </view>
 			</view>
			<assess />
 		</view>
		<!-- :class="iScrolltop == 2?'activeColor' : ''" -->
 		<view class="detail-desc" >
			<van-tabs  v-model="active" @click="onChange">
			  <van-tab :name="0" title="详情">
				   <view style="padding: 0 32upx;">
					   <rich-text :nodes="datalist.goods_body"></rich-text>
				   </view>
			  </van-tab>
			  <van-tab :name="1" title="常见问题">
				 <view style="padding: 0 32upx;">
				 	<rich-text :nodes="datalist.issue"></rich-text>
				 </view>
			  </van-tab>
			</van-tabs>
 		</view>
		</scroll-view>
 		<!-- 底部操作菜单 -->
 	<!-- 	<view class="page-bottom">
 			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
 				<text class="yticon icon-xiatubiao--copy"></text>
 				<text>首页</text>
 			</navigator>
 			<navigator url="/pages/index/cart" open-type="navigate"   class="p-b-btn">
 				<text class="yticon icon-gouwuche"></text>
 				<text>购物车</text>
 			</navigator>
 			<view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
 				<text class="yticon icon-shoucang"></text>
 				<text>收藏</text>
 			</view>
 			<view class="action-btn-group">
				<button type="primary" @click="openCar"  class=" action-btn no-border add-cart-btn">加入购物车</button>
 				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
 			</view>
 		</view> -->
		
		
 		<!-- 规格-模态层弹窗 -->
 		<view 
 			class="popup spec" 
 			:class="specClass"
 			@touchmove.stop.prevent="stopPrevent"
 			@click="toggleSpec"
 		>
 			<!-- 遮罩层 -->
 			<view class="mask"></view>
 			<view class="layer attr-content" @click.stop="stopPrevent">
 				<view class="a-t">
 					<image :src="nuberImg==''?firstImg:nuberImg"></image>
 					<view class="right">
 						<text class="price" style="font-size: 36upx;color: #303133">{{datalist.goods_price}}</text>
						<view v-if="datalist.spec_list.length > 0 ">
							<view class="selected" v-if="specSelected.length > 0 ">
								<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
									{{sItem.value_name}}X {{shopnumber}}
								</text>
							</view>
							<view class="selected" v-else>
								<text class="selected-text">
									请选择规格数量
								</text>
							</view>
						</view>
 						<view v-else>
							X {{shopnumber}}
						</view>
 					</view>
					<view @click="closeCar" style="position: absolute;right: 10%;"> 
						<uni-icon size="20" type="close"></uni-icon>
					</view>
 				</view>
 				<view v-for="(item,index) in datalist.spec_list" :key="index" class="attr-list">
 					<text>{{item.spec_name}}</text>
 					<view class="item-list">
						<!-- 	v-if="childItem.pid === item.id" -->
 						<text 
 							v-for="(childItem, childIndex) in item.value_list" 
 							:key="childIndex" class="tit"
 							:class="{selected: childItem.selected, disabled: childItem.goods_storage==0}"
 							@click="selectSpec(index, childItem.value_id, childItem.value_name, childItem.goods_storage)"
 						>
 							{{childItem.value_name}}
 						</text>
 					</view>
 				</view>
				
				<view class="numberchange">
					  <span>数量</span>
					  <uninumberbox :max="goods_storage" :min="1" @change="changestorage"/>
				</view>
 			</view>
 		</view>
 		<!-- 分享 -->
 		<!-- <share 
 			ref="share" 
 			:contentHeight="580"
 			:shareList="shareList"
 		></share> -->
		
		<View class="page-bottom">
			<van-goods-action>
			  <van-goods-action-icon @click="goIndex" icon="bag-o" />
			  <van-goods-action-icon icon="cart-o" @click="openCar" :info="cartnumber" />
			  <van-goods-action-icon icon="star-o" v-if="has_collected == 0"  @click="toFavorite"/>
			   <van-goods-action-icon icon="star" v-if="has_collected == 1"   icon-class="colored"   @click="toFavorite"/>
			  <van-goods-action-button  @click="addCar"   text="加入购物车" type="warning" />
			  <van-goods-action-button text="立即购买"  @click="buynow"   />
			</van-goods-action>
		</View>
		 <logionDialog @confirmDiaolog="confirmDiaolog"  @cancelDiaolog="cancelDiaolog" :showdialog="showdialog"/>
 	</view>
 </template>
 
 <script>
	 import {
	 	mapMutations,mapState
	 } from 'vuex'
	import logionDialog from '@/component/loginDialog.vue'
	import uninumberbox  from '@/component/uinNumber.vue' 
	import assess from '@/component/assess.vue'  // 评价列表
 	import uniIcon from '@/component/uni-icon/uni-icon.vue'
 	export default{
 		components: {
 			uniIcon,
			assess,
			uninumberbox,
			logionDialog
 		},
 		data() {
 			return {
				arrayId:[],
				scopemapId: 0,
				showdialog:　false,
				has_collected: false, // 是否收藏
				cartnumber: 0, // 购物车数量
				changnumber: 100,
				ismax: false, // 输入狂禁止数量
				goods_storage: '', // 规格商品参数
				nuberImg:'',
				firstImg:'',
				shopnumber: 1,
				pictureUrl: this.pictureUrl,
				datalist: {},
				store_id: 0, // 酒店id
				goodId: 0, // 商品公共id
				goods_id: 0, // 商品规格id
				windowHeight: 0, // 窗口高度
				iScrolltop: 1,
				active: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
 				specClass: 'none',
 				specSelected:[],
 				
 				favorite: true,
 				shareList: [],
 				imgList: [
 				],
 				desc: `
 					
 				`,
 				specList: [
 				]
 			};
 		},
		onLaunch: function(){
			this.active = 1;
		},
		computed:{
			...mapState([
			  'hasLogin',
			  'userInfo',
			  'successlogion'
			]),
		},
		onShow: function() {
			let _this = this;
			uni.getSystemInfo({
				success: function (res) {
					_this.windowHeight = res.screenHeight;
					// console.log("屏幕宽度："+res.screenWidth);
					// console.log("屏幕高度："+res.screenHeight);
					// console.log("可使用窗口宽度："+res.windowWidth);
					// console.log("可使用窗口高度："+res.windowHeight);
				}
			});
		},
 		async onLoad(options){
 			this.goodId = options.id;  // 商品Id
			this.store_id =  options.store_id;
			this.getshopdetail(); // 获取商品详情
 			//规格 默认选中第一条
 			// this.datalist.spec_list[0].value_list.forEach(item=>{
 			// 	for(let cItem of this.specChildList){
 			// 		if(cItem.pid === item.id){
 			// 			this.$set(cItem, 'selected', true);
 			// 			this.specSelected.push(cItem);
 			// 			break; //forEach不能使用break
 			// 		}
 			// 	}
 			// })
 			//this.shareList = await this.$api.json('shareList');
 		},
				
 		methods:{
			// 跳转到首页
			goIndex() {
				uni.switchTab({
					url:'./index'
				})
			},
			// 更改商品数量
			changestorage(e) {
				this.shopnumber = e;
			},
			// 获取商品详情
			getshopdetail() {
				let params = {};
				params.goods_commonid =this.goodId;
				params.store_id = this.store_id;
				this.request({
					url:'/v2/goods/detail',
					method:'POST',
					data: params,
					success: (res)=> {
						let { data } = res.data;
						this.cartnumber = data.cart;
						this.has_collected = data.has_collected;
						let array = data;
						array.images.forEach(item => {
							this.firstImg = this.pictureUrl+'/uploads/home/store/goods/'+item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url
						})
						
						if(array.spec_list.length == 0) {
							this.datalist = data;
							this.goods_id = data.goods_list[0].goods_id;
							this.goods_storage = data.goods_storage;
							//this.specSelected = data.goods_list;
						}else {
							array.spec_list[0].value_list.forEach( (item,idx) => {
								item.goods_storage = data.goods_list[idx].goods_storage;
							})
							this.datalist = array;
						}
					    
					}
				})
			},
			shopDetail() {
				//  url: `/pages/index/shop?id=${id}&store_id=${store_id}`
				let goodId = this.goodId;  // 商品Id
				let store_id = this.store_id;
				uni.navigateTo({
				                   url: `/pages/index/commemt?goodId=${goodId}&store_id=${store_id}`
				               }); 
			},
			onChange(event) {
				this.active = event.detail.name;
				console.log(this.active)
			},
 			//规格弹窗开关
 			toggleSpec() {
				this.specClass = 'show';
				//this.specSelected = []; 
 				// if(this.specClass === 'show'){
 				// 	this.specClass = 'hide';
 				// 	setTimeout(() => {
 				// 		this.specClass = 'none';
 				// 	}, 250);
 				// }else if(this.specClass === 'none'){
 				// 	this.specClass = 'show';
 				// }
 			},
			 
			 // 关闭弹窗
			 cancelDiaolog() {
			 	this.showdialog = false;
			 },
			 // 确定
			 confirmDiaolog() {
			 	this.showdialog = false;
			 	uni.navigateTo({
			 	   url: '../myCenter/information'  // 我的收藏
			 	})
			 },
			
			openCar() {
				if(this.hasLogin && this.successlogion) { 
					let store_id = this.store_id;
					uni.navigateTo({
						url:`/pages/index/cart?store_id=${store_id}`
					})
				}else {
					//this.showdialog = true;
					uni.navigateTo({
						url:'/pages/myCenter/logion'
					})
				}
			},
			// 立即购买
			buynow() {
				if(this.hasLogin  && this.successlogion) {
					if(this.datalist.store_id == 1 || this.datalist.goods_state != 1 ||　this.datalist.goods_storage < 1) {
						this.$msg("商品已下架");
						return;
					}
					if(this.specSelected.length == 0&&this.datalist.spec_list.length != 0) {
						this.$msg("请选择规格数量");
						this.specClass = 'show';
						return;
					}
					if(this.specSelected.length == 0&&this.datalist.spec_list.length == 0) {
						this.specClass = 'show';
						this.specSelected = this.datalist.goods_list;
						return;
					}
					console.log( this.datalist);
					 let goods = [];
					     goods.push({});
						 goods[0].goods_id = this.goods_id;
						 goods[0].buy_num = this.shopnumber;
					 let prices = this.datalist.goods_price*this.shopnumber;
					 this.request({
						 url:'/v1/order/save_og',
						 method: 'post',
						 data: {
							 store_id: this.store_id,
							 goods: JSON.stringify(goods)
						 },
						 success:(res) => {
							 console.log(res);
							 let store = this.store_id;
							 let order_id = res.data.data.order_id;
							 uni.navigateTo({
							   url: `/pages/index/sureBuy?store=${store}&prices=${prices}&order_id=${order_id}`
							 });
							 
						 }
					 })
				}else {
					uni.navigateTo({
						url:'/pages/myCenter/logion'
					})
				}
			},
			// 加入购物车
			addCar() {
				if(this.hasLogin && this.successlogion) {
					if(this.datalist.store_id == 1 || this.datalist.goods_state != 1 ||　this.datalist.goods_storage < 1) {
						this.$msg("商品已下架");
						return;
					}
					if(this.specSelected.length == 0&&this.datalist.spec_list.length == 0) {
						this.specClass = 'show';
						this.specSelected = this.datalist.goods_list;
						return;
					}
						if(this.specSelected.length == 0&&this.datalist.spec_list.length != 0) {
							this.specClass = 'show';
							this.$msg("请选择规格数量");
							return;
						}else {
							this.request({
								url:'/v2/order/add_cart',
								method:'POST',
								data: {
									goods_id: this.goods_id,
									goods_num: this.shopnumber
								},
								success: () => {
									this.$msg("商品添加成功");
									this.specClass = 'none';
									this.getshopdetail();
								}
							})
						}
				}else {
					uni.navigateTo({
						url:'/pages/myCenter/logion'
					})
				}
			},
			
			closeCar() {
				this.specClass = 'none';
			},
 			//选择规格
 			selectSpec(index, pid,value_name,goods_storage){
				this.specSelected = []; 
				if(goods_storage == 0) {
					return;
				}
				
 				let list = this.datalist.spec_list[index].value_list;
 				this.datalist.spec_list[index].value_list.forEach(item=>{
 					if(item.value_id === pid){
 						this.$set(item, 'selected', true);
 					}else {
						this.$set(item, 'selected', false);
					}
 				})
				let array = [];	
			    for(let i = 0; i < this.datalist.spec_list.length; i++) {
					for(let j = 0; j<this.datalist.spec_list[i].value_list.length;j++) {
						if(this.datalist.spec_list[i].value_list[j].selected) {
							array.push(this.datalist.spec_list[i].value_list[j].value_id);
						}
					}
				}
				this.arrayId = array;
				if(this.arrayId.length == this.datalist.spec_list.length) {
					this.scopemapId = array.join("_");
					let goodId = this.datalist.spec_map[this.scopemapId]; //
					let items = this.datalist.goods_list[goodId]
					items.value_name = value_name;
					this.nuberImg = items.spec_img;
					this.specSelected.push(items)
					this.goods_storage = items.goods_storage;
					this.goods_id = items.goods_id;
				}
				
				// if(this.arrayId.length == this.datalist.spec_list.length) {
					
				// }
			
				// let obj = {};
				// obj.firstId = index;
				// obj.pid = pid;
				// this.arrayId.push(obj);
				// console.log(this.arrayId)
				// let arr = this.arrayId;
				// 		   for(var i=0; i<arr.length; i++){
				// 		             for(var j=i+1; j<arr.length; j++){
				// 		                 if(arr[i].firstId==arr[j].firstId){
				// 								 arr.splice(j,1);
				// 								 j--;
				// 		                 }
				// 		             }
				// 		         }
				// let newarray = []
				// arr.forEach(item => {
				// 	newarray.push(item.pid);
				// })
				// this.arrayId = arr;
				// if(this.arrayId.length == 0) {
				// 	this.scopemapId = newarray.toString(); ;
				// }else {
				// 	this.scopemapId = newarray.join("_");
				// }
				// console.log(this.scopemapId);
				//this.datalist.spec_list[index].value_list = list;
				
 				
 			}, 					 					
 			// 滚动到顶部
 			upper(e) {
 				console.log(e)
 				console.log("顶部")
 			},
 			
 			// 滚到底部
 			lower(e) {
 				console.log("底部")
 			},
 			// 滚动时触发
 			scroll(e) {
 				this.old.scrollTop = e.detail.scrollTop
 				if(e.detail.scrollTop > this.windowHeight) {
 					this.iScrolltop = 2;
 				}else {
 					this.iScrolltop = 1;
 				}
 			},
 			
 			//收藏
 			toFavorite(){
				if(this.hasLogin && this.successlogion) {
					this.request({
						url: '/v1/favorites/collect',
						method: 'post',
						data: {
							type:'goods',
							fav_id: this.goodId
						},
						success: () => {
							this.getshopdetail()
						}
					})
				}else {
					uni.navigateTo({
						url:'/pages/myCenter/logion'
					})
				}
 				//this.favorite = !this.favorite;
 			},
 			buy(){
 				uni.navigateTo({
 					url: './sureBuy'
 				})
 			},
 			stopPrevent(){}
 		},
 
 	}
 </script>
 
 <style lang='scss'>
 	page{
 		/* background: $page-color-base; */
 		/* padding-bottom: 160upx; */
		position: relative;
 	}
	
 	.icon-you{
 		font-size: 28upx + 2upx;
 		color: #888;
 	}
 	.carousel {
 		height: 722upx;
 		position:relative;
 		swiper{
 			height: 100%;
 		}
 		.image-wrapper{
 			width: 100%;
 			height: 100%;
 		}
 		.swiper-item {
 			display: flex;
 			justify-content: center;
 			align-content: center;
 			height: 750upx;
 			overflow: hidden;
 			image {
 				width: 100%;
 				height: 100%;
 			}
 		}
 		
 	}
 	
	.titleLayout {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20upx;
	}
 	/* 标题简介 */
 	.introduce-section{
 		background: #fff;
 		padding: 20upx 30upx;
 		
 		.title{
 			font-size: 36upx;
 			color:  #303133;
 			height: 50upx;
 			line-height: 50upx;
			width: 70%;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			
 		}
			
		.titleRight {
			border-left: 1px solid #F5F5F5;
			padding-left: 32upx;
		}
 		.price-box{
 			display:flex;
 			align-items:baseline;
 			height: 64upx;
 			padding: 10upx 0;
 			font-size: 26upx;
 			color:#fa436a;
 		}
 		.price{
 			font-size: $font-lg + 2upx;
 		}
 		.m-price{
 			margin:0 12upx;
 			color: #909399;
 			text-decoration: line-through;
 		}
 		.coupon-tip{
 			align-items: center;
 			padding: 4upx 10upx;
 			background: #fa436a;
 			font-size: 24upx;
 			color: #fff;
 			border-radius: 6upx;
 			line-height: 1;
 			transform: translateY(-4upx); 
 		}
 		.bot-row{
 			display:flex;
 			align-items:center;
 			height: 50upx;
 			font-size: 24upx;
 			color: #909399;
 			text{
 				flex: 1;
 			}
 		}
 	}
 	/* 分享 */
 	.share-section{
 		display:flex;
 		align-items:center;
 		color:  #606266;
 		background: linear-gradient(left, #fdf5f6, #fbebf6);
 		padding: 12upx 30upx;
 		.share-icon{
 			display:flex;
 			align-items:center;
 			width: 70upx;
 			height: 30upx;
 			line-height: 1;
 			border: 1px solid #fa436a;
 			border-radius: 4upx;
 			position:relative;
 			overflow: hidden;
 			font-size: 22upx;
 			color: #fa436a;
 			&:after{
 				content: '';
 				width: 50upx;
 				height: 50upx;
 				border-radius: 50%;
 				left: -20upx;
 				top: -12upx;
 				position:absolute;
 				background: #fa436a;
 			}
 		}
 		.icon-xingxing{
 			position:relative;
 			z-index: 1;
 			font-size: 24upx;
 			margin-left: 2upx;
 			margin-right: 10upx;
 			color: #fff;
 			line-height: 1;
 		}
 		.tit{
 			font-size: 28upx;
 			margin-left:10upx;
 		}
 		.icon-bangzhu1{
 			padding: 10upx;
 			font-size: 30upx;
 			line-height: 1;
 		}
 		.share-btn{
 			flex: 1;
 			text-align:right;
 			font-size: 24upx;
 			color: #fa436a;
 		}
 		.icon-you{
 			font-size: 24upx;
 			margin-left: 4upx;
 			color: #fa436a;
 		}
 	}
 	
 	.c-list{
 		font-size: 24upx + 2upx;
 		color:  #606266;
 		background: #fff;
		border-top: 20upx solid #F5F5F5;
		border-bottom: 20upx solid #F5F5F5;
 		.c-row{
 			display:flex;
 			align-items:center;
 			padding: 20upx 30upx;
 			position:relative;
 		}
 		.tit{
 			width: 140upx;
 		}
 		.con{
 			flex: 1;
 			color:  #303133;
 			.selected-text{
 				margin-right: 10upx;
 			}
 		}
 		.bz-list{
 			height: 40upx;
 			font-size: 24upx+2upx;
 			color:  #303133;
 			text{
 				display: inline-block;
 				margin-right: 30upx;
 			}
 		}
 		.con-list{
 			flex: 1;
 			display:flex;
 			flex-direction: column;
 			color:  #303133;
 			line-height: 40upx;
 		}
 		.red{
 			color: #fa436a;
 		}
 	}
 	
 	/* 评价 */
 	.eva-section{
 		display: flex;
 		flex-direction: column;
 		padding: 20upx 30upx;
 		background: #fff;
 		margin-top: 16upx;
 		.e-header{
 			display: flex;
 			align-items: center;
 			height: 70upx;
 			font-size: 24upx + 2upx;
 			color: #909399;
 			.tit{
 				font-size: 28upx + 2upx;
 				color:  #303133;
 				margin-right: 4upx;
 			}
 			.tip{
 				flex: 1;
 				text-align: right;
 			}
 			.icon-you{
 				margin-left: 10upx;
 			}
 		}
 	}
 	.eva-box{
 		display: flex;
 		padding: 20upx 0;
 		.portrait{
 			flex-shrink: 0;
 			width: 80upx;
 			height: 80upx;
 			border-radius: 100px;
 		}
 		.right{
 			flex: 1;
 			display: flex;
 			flex-direction: column;
 			font-size: 28upx;
 			color:  #606266;
 			padding-left: 26upx;
 			.con{
 				font-size: 28upx;
 				color:  #303133;
 				padding: 20upx 0;
 			}
 			.bot{
 				display: flex;
 				justify-content: space-between;
 				font-size: 24upx;
 				color:#909399;
 			}
 		}
 	}
 	/*  详情 */
 	.detail-desc{
 		background: #fff;
 		margin-top: 16upx;
		margin-bottom: 20rpx;
		width: 100%;
 		.d-header{
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			height: 80upx;
 			font-size: 28upx + 2upx;
 			color:  #303133;
 			position: relative;
 				
 			text{
 				padding: 0 20upx;
 				background: #fff;
 				position: relative;
 				z-index: 1;
 			}
 			&:after{
 				position: absolute;
 				left: 50%;
 				top: 50%;
 				transform: translateX(-50%);
 				width: 300upx;
 				height: 0;
 				content: '';
 				border-bottom: 1px solid #ccc; 
 			}
 		}
 	}
 	
 	/* 规格选择弹窗 */
 	.attr-content{
 		padding: 10upx 30upx;
 		.a-t{
 			display: flex;
 			image{
 				width: 170upx;
 				height: 170upx;
 				flex-shrink: 0;
 				margin-top: -40upx;
 				border-radius: 8upx;;
 			}
 			.right{
 				display: flex;
 				flex-direction: column;
 				padding-left: 24upx;
 				font-size: 24upx + 2upx;
 				color:  #606266;
 				line-height: 42upx;
				justify-content: space-around;
 				.price{
 					font-size: $font-lg;
 					color: #fa436a;
 					margin-bottom: 10upx;
 				}
 				.selected-text{
 					margin-right: 10upx;
 				}
 			}
 		}
 		.attr-list{
 			display: flex;
 			flex-direction: column;
 			font-size: 28upx + 2upx;
 			color:  #606266;
 			padding-top: 30upx;
 			padding-left: 10upx;
 		}
 		.item-list{
 			padding: 20upx 0 0;
 			display: flex;
 			flex-wrap: wrap;
 			text{
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				background: #eee;
 				margin-right: 20upx;
 				margin-bottom: 20upx;
 				border-radius: 100upx;
 				min-width: 60upx;
 				height: 60upx;
 				padding: 0 20upx;
 				font-size: 28upx;
 				color:  #303133;
 			}
 			.selected{
 				background: #fbebee;
 				color: #fa436a;
 			}
				
			.disabled {
				color:#fbebee;
				background: rgba(245,245,245, 0.5);
				
			}
 		}
 	}
 	
 	/*  弹出层 */
 	.popup {
 		position: fixed;
 		left: 0;
 		top: 0;
 		right: 0;
 		bottom: 100upx;
 		z-index: 99;
 		
 		&.show {
 			display: block;
 			.mask{
 				animation: showPopup 0.2s linear both;
 			}
 			.layer {
 				animation: showLayer 0.2s linear both;
 			}
 		}
 		&.hide {
 			.mask{
 				animation: hidePopup 0.2s linear both;
 			}
 			.layer {
 				animation: hideLayer 0.2s linear both;
 			}
 		}
 		&.none {
 			display: none;
 		}
 		.mask{
 			position: fixed;
 			top: 0;
 			width: 100%;
 			height: 90%;
 			z-index: 1;
 			background-color: rgba(0, 0, 0, 0.4);
 		}
 		.layer {
 			position: fixed;
 			z-index: 99;
 			bottom: 100upx;
 			width: 100%;
 			min-height: 40vh;
 			border-radius: 10upx 10upx 0 0;
 			background-color: #fff;
 			.btn{
 				height: 66upx;
 				line-height: 66upx;
 				border-radius: 100upx;
 				background: #fa436a;
 				font-size: 28upx + 2upx;
 				color: #fff;
 				margin: 30upx auto 20upx;
 			}
 		}
 		@keyframes showPopup {
 			0% {
 				opacity: 0;
 			}
 			100% {
 				opacity: 1;
 			}
 		}
 		@keyframes hidePopup {
 			0% {
 				opacity: 1;
 			}
 			90% {
 				opacity: 0;
 			}
 		}
 		@keyframes showLayer {
 			0% {
 				transform: translateY(120%);
 			}
 			100% {
 				transform: translateY(0%);
 			}
 		}
 		@keyframes hideLayer {
 			0% {
 				transform: translateY(0);
 			}
 			100% {
 				transform: translateY(120%);
 			}
 		}
 	}
	.colored {
		color: red;
	}
 	.van-sticky {
		/* z-index: 0!important; */
	}
	/* 详情固定 */
	.activeColor {
		/* background: #fff!important; */
		position: fixed;
		background-color: #fff;
		top: 0upx;
		z-index: 99;
		margin-top: 0;
	}
	.numberchange {
		padding-top: 48px;
		overflow: hidden;
		clear: both;
		padding-right: 59rpx;
	}
	.uni-numbox {
		float: right;
	}
	
 	/* 底部操作菜单 */
 	.page-bottom{
 		position: fixed;
 		left: 0;
 		bottom: 0;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		width:  100vw;
 		height: 100upx;
		z-index: 99;
 		background: rgba(255,255,255,.9);
 		.p-b-btn{
 			display:flex;
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;
 			font-size: 24upx;
 			color:  #606266;
 			width: 96upx;
 			height: 80upx;
 			.yticon{
 				font-size: 40upx;
 				line-height: 48upx;
 				color: #909399;
 			}
 			&.active, &.active .yticon{
 				color: #fa436a;
 			}
 			.icon-fenxiang2{
 				font-size: 42upx;
 				transform: translateY(-2upx);
 			}
 			.icon-shoucang{
 				font-size: 46upx;
 			}
 		}
 		.action-btn-group{
 			display: flex;
 			height: 76upx;
 			border-radius: 100px;
 			overflow: hidden;
 			box-shadow: 0 20upx 40upx -16upx #fa436a;
 			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
 			background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
 			margin-left: 20upx;
 			position:relative;
 			&:after{
 				content: '';
 				position:absolute;
 				top: 50%;
 				right: 50%;
 				transform: translateY(-50%);
 				height: 28upx;
 				width: 0;
 				border-right: 1px solid rgba(255,255,255,.5);
 			}
 			.action-btn{
 				display:flex;
 				align-items: center;
 				justify-content: center;
 				width: 180upx;
 				height: 100%;
 				font-size: 28upx ;
 				padding: 0;
 				border-radius: 0;
 				background: transparent;
 			}
 		}
 	}
 	
 </style>