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/adv/'+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>
 		<!-- 底部操作菜单 -->
 		<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"></image>
 					<view class="right">
 						<text class="price" style="font-size: 36upx;color: #303133">{{datalist.goods_price}}</text>
 						<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 @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> -->
		</scroll-view>
 	</view>
 </template>
 
 <script>
	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
 		},
 		data() {
 			return {
				changnumber: 100,
				ismax: false, // 输入狂禁止数量
				goods_storage: 0, // 规格商品参数
				nuberImg:'',
				shopnumber: 1,
				pictureUrl: this.pictureUrl,
				datalist: {},
				store_id: 0, // 酒店id
				goodId: 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;
		},
		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:{
			// 更改商品数量
			changestorage(e) {
				this.shopnumber = e;
			},
			// 获取商品详情
			getshopdetail() {
				let _this = this;
				let params = {};
				params.goods_commonid =_this.goodId;
				params.store_id = _this.store_id;
				this.request({
					url:'/v2/goods/detail',
					method:'POST',
					data: params,
					success: function(res) {
						let { data } = res.data;
						let array = data;
					    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';
 				// if(this.specClass === 'show'){
 				// 	this.specClass = 'hide';
 				// 	setTimeout(() => {
 				// 		this.specClass = 'none';
 				// 	}, 250);
 				// }else if(this.specClass === 'none'){
 				// 	this.specClass = 'show';
 				// }
 			},
			 
			//
			openCar() {
				this.specClass = 'show';
					
				if(this.specSelected.length == 0) {
					this.$msg("请选择规格数量");
				}
			},
			closeCar() {
				this.specClass = 'none';
			},
 			//选择规格
 			selectSpec(index, pid,value_name,goods_storage){
				console.log(goods_storage)
				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);
					}
 				})
				this.datalist.spec_list[index].value_list = list;
				let scopemapId = pid;
				let goodId = this.datalist.spec_map[scopemapId];
				let items = this.datalist.goods_list[goodId]
				items.value_name = value_name;
				this.nuberImg = items.spec_img;
 				this.specSelected = []; 
 				this.specSelected.push(items)
 				this.goods_storage = items.goods_storage;
 				
 			}, 					 					
 			// 滚动到顶部
 			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(){
 				this.favorite = !this.favorite;
 			},
 			buy(){
 				uni.navigateTo({
 					url: './sureBuy'
 				})
 			},
 			stopPrevent(){}
 		},
 
 	}
 </script>
 
 <style lang='scss'>
 	page{
 		/* background: $page-color-base; */
 		padding-bottom: 160upx;
 	}
 	.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;
		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%);
 			}
 		}
 	}
 	.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:  100%;
 		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>