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 imgList" :key="index">
 					<view class="image-wrapper">
 						<image
 							:src="item.src" 
 							class="loaded" 
 							mode="aspectFill"
 						></image>
 					</view>
 				</swiper-item>
 			</swiper>
 		</view>
 		
 		<view class="introduce-section">
			<view class="titleLayout" >
				<view class="title">恒源祥2019春季长袖白色t恤 新款春装</view>
				<view @tap="shopDetail" style="display: flex;flex-direction: row;">
					<view class="titleRight">
						<view style="font-size: 36upx;color: #D9332E;text-align: right;">0%</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>
 			<!-- <text class="title">恒源祥2019春季长袖白色t恤 新款春装</text> -->
 			<view  class="titleLayout price-box">
				<view>
					<text class="price-tip">¥</text>
					<text class="price">341.6</text>
					<text class="m-price">¥488</text>
				</view>
				
				<view>
					<text style="color: #909399">月销售0</text>
				</view>
 				
 			</view>
 			
 		</view>
 		
 		<!--  分享 -->
 		<!-- <view class="share-section" @click="share">
 			<view class="share-icon">
 				<text class="yticon icon-xingxing"></text>
 				 返
 			</view>
 			<text class="tit">该商品分享可领49减10红包</text>
 			<text class="yticon icon-bangzhu1"></text>
 			<view class="share-btn">
 				立即分享
 				<text class="yticon icon-you"></text>
 			</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>
 		
 		<view class="detail-desc">
			<van-tabs :active="active" @click="onChange">
			  <van-tab name="1" title="详情">
				  <rich-text :nodes="desc"></rich-text>
			  </van-tab>
			  <van-tab   name="2" title="常见问题">
				  详情
			  </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="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"></image>
 					<view class="right">
 						<text class="price" style="font-size: 36upx;color: #303133">¥328.00</text>
 						<view class="selected">
 							已选：
 							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
 								{{sItem.name}}
 							</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 specList" :key="index" class="attr-list">
 					<text>{{item.name}}</text>
 					<view class="item-list">
 						<text 
 							v-for="(childItem, childIndex) in specChildList" 
 							v-if="childItem.pid === item.id"
 							:key="childIndex" class="tit"
 							:class="{selected: childItem.selected}"
 							@click="selectSpec(childIndex, childItem.pid)"
 						>
 							{{childItem.name}}
 						</text>
 					</view>
 				</view>
 			</view>
 		</view>
 		<!-- 分享 -->
 		<!-- <share 
 			ref="share" 
 			:contentHeight="580"
 			:shareList="shareList"
 		></share> -->
		</scroll-view>
 	</view>
 </template>
 
 <script>
	 
	import assess from '@/component/assess.vue'  // 评价列表
 	import uniIcon from '@/component/uni-icon/uni-icon.vue'
 	export default{
 		components: {
 			uniIcon,
			assess
 		},
 		data() {
 			return {
				active: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
 				specClass: 'none',
 				specSelected:[],
 				
 				favorite: true,
 				shareList: [],
 				imgList: [
 					{
 						src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
 					},
 					{
 						src: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
 					},
 					{
 						src: 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'
 					}
 				],
 				desc: `
 					<div style="width:100%">
 						<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i4/479184430/O1CN01nCpuLc1iaz4bcSN17_!!479184430.jpg_400x400.jpg" />
 						<img style="width:100%;display:block;" src="https://gd2.alicdn.com/imgextra/i2/479184430/O1CN01gwbN931iaz4TzqzmG_!!479184430.jpg_400x400.jpg" />
 						<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i3/479184430/O1CN018wVjQh1iaz4aupv1A_!!479184430.jpg_400x400.jpg" />
 						<img style="width:100%;display:block;" src="https://gd4.alicdn.com/imgextra/i4/479184430/O1CN01tWg4Us1iaz4auqelt_!!479184430.jpg_400x400.jpg" />
 						<img style="width:100%;display:block;" src="https://gd1.alicdn.com/imgextra/i1/479184430/O1CN01Tnm1rU1iaz4aVKcwP_!!479184430.jpg_400x400.jpg" />
 					</div>
 				`,
 				specList: [
 					{
 						id: 1,
 						name: '尺寸',
 					},
 					{	
 						id: 2,
 						name: '颜色',
 					},
 				],
 				specChildList: [
 					{
 						id: 1,
 						pid: 1,
 						name: 'XS',
 					},
 					{
 						id: 2,
 						pid: 1,
 						name: 'S',
 					},
 					{
 						id: 3,
 						pid: 1,
 						name: 'M',
 					},
 					{
 						id: 4,
 						pid: 1,
 						name: 'L',
 					},
 					{
 						id: 5,
 						pid: 1,
 						name: 'XL',
 					},
 					{
 						id: 6,
 						pid: 1,
 						name: 'XXL',
 					},
 					{
 						id: 7,
 						pid: 2,
 						name: '白色',
 					},
 					{
 						id: 8,
 						pid: 2,
 						name: '珊瑚粉',
 					},
 					{
 						id: 9,
 						pid: 2,
 						name: '草木绿',
 					},
 				]
 			};
 		},
		onLaunch: function(){
			this.active = 1;
			console.log(this.active);
			console.log("kdkkdkd");
		},
 		async onLoad(options){
 			
 			//接收传值,id里面放的是标题，因为测试数据并没写id 
 			let id = options.id;
 			if(id){
 				this.$api.msg(`点击了${id}`);
 			}
 			
 			
 			//规格 默认选中第一条
 			this.specList.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:{
			shopDetail() {
				uni.navigateTo({
				                   url: './commemt',
				               }); 
			},
			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';
			},
			closeCar() {
				this.specClass = 'none';
			},
 			//选择规格
 			selectSpec(index, pid){
 				let list = this.specChildList;
 				list.forEach(item=>{
 					if(item.pid === pid){
 						this.$set(item, 'selected', false);
 					}
 				})
 
 				this.$set(list[index], 'selected', true);
 				//存储已选择
 				/**
 				 * 修复选择规格存储错误
 				 * 将这几行代码替换即可
 				 * 选择的规格存放在specSelected中
 				 */
 				this.specSelected = []; 
 				list.forEach(item=>{ 
 					if(item.selected === true){ 
 						this.specSelected.push(item); 
 					} 
 				})
 				
 			},
 			// 滚动到顶部
 			upper(e) {
 				console.log(e)
 				console.log("顶部")
 			},
 			
 			// 滚到底部
 			lower(e) {
 				console.log("底部")
 			},
 			
 			// 滚动时触发
 			scroll(e) {
 				this.old.scrollTop = e.detail.scrollTop
 			},
 			//收藏
 			toFavorite(){
 				this.favorite = !this.favorite;
 			},
 			buy(){
 				
 			},
 			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;
 		.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;
 			}
 		}
 	}
 	
 	/*  弹出层 */
 	.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; */
	}
 	/* 底部操作菜单 */
 	.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>