wxThird/pages/shop/goodsDetail.vue

<template>
<view class="box">
	<view class="spwBox">
		<swiper class="swiper" circular  :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
			<swiper-item v-for="(item,index) in info.ImgList">
				<view class="swiper-item">
					<img mode="aspectFit" :src="item.url" alt="" class="swiper-itemImg">
				</view>
			</swiper-item>
			
		</swiper>
	</view>
	<view class="shopCont">
		<view class="shopCtop">
			<view class="goodsPrice">
				<view class="goodsPrice1">{{info.saleLabel}}</view>
				<view class="goodsPrice2">￥</view>
				<view class="goodsPrice3">{{info.salePrice?info.salePrice:info.scribingPrice}}</view>
				<view class="goodsPrice4" v-if="info.scribingPrice">￥{{info.scribingPrice}}</view>
			</view>
			<view class="Sold">已售 {{info.saleQty}}</view>
		</view>
		<view class="goodsName">{{info.name}}</view>
		<view class="goodsMd" v-if="info.sellingPoint">{{info.sellingPoint}}</view>
	</view>
	
	<view class="modeBox">
		<view class="modeline">
			<view class="modelineLeft">配送方式</view>
			<view class="modeLineRight">{{info.distributionType==1?'到店取货':'到店使用'}}</view>
		</view>
		<view class="modeline">
			<view class="modelineLeft">限购数量</view>
			<view class="modeLineRight" v-if="info.oneQty">{{info.oneQty}}</view>
		</view>
		<view class="modeline">
			<view class="modelineLeft">售后服务</view>
			<view class="modeLineRight">{{info.afterService}}</view>
		</view>
	</view>
	<!-- 服务流程 -->
	<view class="fuwuliucBox">
		<view class="fwlcTitle">服务流程</view>
		<view class="fwlcxian">
			<view class="fwlcyuan"></view>
			<view class="fwHx"></view>
			<view class="fwlcyuan"></view>
			<view class="fwHx"></view>
			<view class="fwlcyuan"></view>
			<view class="fwHx"></view>
			<view class="fwlcyuan"></view>
		</view>
		<view class="fwTxt">
			<view class="fwTxtline">选择商品</view>
			<view class="fwTxtline">选择门店</view>
			<view class="fwTxtline">在线支付</view>
			<view class="fwTxtline">到店服务</view>
		</view>
	</view>
	<!-- 套餐内容 -->
	<view class="mealBox" v-if="info.bizType==3">
		<view class="fwlcTitle">套餐内容</view>
		<view class="mealLine" v-for="(item,index) in 2">
			<view class="mealTop">
				<view class="mealName">项目名称</view>
				<view class="mealTopRight">
					<view>数量</view>
					<view style="padding-left: 44rpx;">有效期</view>
				</view>
			</view>
			<view class="itemlinebOX">
				<view class="itemline">
					<view class="itemname">这是项目名称长长长长长项目名称项目名称长长sss长长换行换</view>
					<view>20</view>
					<view>10个月</view>
				</view>
				<view class="itemline">
					<view class="itemname">这是项目名称</view>
					<view>200</view>
					<view>10个月</view>
				</view>
			</view>
			
		</view>
	</view>
	<!-- 商品详情 -->
	<view class="goodsDetail" v-if="info.details">
		<view class="goodsDetailTitle">商品详情</view>
		<!-- <view v-html="info.details" style="background: #fff;"></view> -->
		 <rich-text :nodes="info.details" style="font-size: 0px;background: #fff;"></rich-text>
	</view>
	<view style="height: 120rpx;"></view>
	
	<view class="bottomBox">
		<view class="bottomImgBox" @click="goINdex">
			<image src="../../static/timg/home.png" mode="" class="bottomImg"></image>
			<view class="bottomTxt">首页</view>
		</view>
		<view class="bottomImgBox" style="margin-left: 20rpx;">
			<image src="../../static/timg/share.png" mode="" class="bottomImg"></image>
			<view class="bottomTxt">分享</view>
		</view>
		<view class="bottomBtn" @click="buyShow=true">立即购买</view>
		
	</view>
	
	<!-- 立即购买 -->
	<view class="buyBox" v-if="buyShow" @click="buyShow=false">
		<view class="buyCont" @click.stop="">
			<image src="../../static/timg/chahao.png" mode="" class="buyContCh" @click="buyShow=false"></image>
			<view class="goodsBox">
				<view class="hotGoodsLine" >
					<view>
						<image :src="info.ImgList[0].url" mode="" v-if="info.ImgList.length>1" class="hotGoodsLineImg"></image>
					    <image src="../../static/timg/noimg.png"  class="hotGoodsLineImg" v-else></image>
					</view>
					<view class="hotGoodsLineRIght">
						<view class="goodsName2">{{info.name}}</view>
					    <view class="Sold">已售 {{info.saleQty}}</view>
						<view class="goodsPrice">
							<view class="goodsPrice11">{{info.saleLabel}}</view>
							<view class="goodsPrice22">￥</view>
							<view class="goodsPrice33">{{info.salePrice?info.salePrice:info.scribingPrice}}</view>
							<view class="goodsPrice44" v-if="info.scribingPrice">￥{{info.scribingPrice}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="buyNumBox">
				<view class="bugNUm">
					<view class="bugNUmLeft">
						<view class="buySl">数量</view>
						<view class="buyXg" v-if="info.oneQty">限购{{info.oneQty}}件</view>
					</view>
					<view class="numJsbox">
						<view class="numJj" @click="calculation(1)">-</view>
						<view class="goodsnum">{{goodsnum}}</view>
						<view class="numJj" @click="calculation(2)">+</view>
					</view>
				</view>
				<view class="buySHop" @click="ckShop">
					<view>服务门店</view>
					<view class="buyShopRight" >
						<view v-if="shopInfo.shopId">{{shopInfo.shopName}}</view>
						<view v-else>请选择</view>
						<image src="../../static/timg/icon_arrow_right.png" mode="" class="buyShopRightJt"></image>
					</view>
				</view>
			</view>
			<view class="buybtnBox">
				<view class="buyBtn" @click="goBuy">立即购买</view>
			</view>
			
		</view>
	</view>
	
	
<!-- 	<view :style="{color:colorX}">asdfas</view> -->
</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				userInfo:'',
				goodsnum:1,
				buyShow:false,
				id:'',
				info:'',
				shopInfo:{
					shopName:'',
					shopId:''
				},
			}
		},
		onLoad(opt) {
			this.id=opt.id;
			this.userInfo = uni.getStorageSync("userInfo");
			this.openGoodsDetailById();
		},
		onShow() {
			this.shopInfo=this.$store.state.ckshopInfo;
			console.log(this.shopInfo)
		},
		methods: {
			ckShop(){
				uni.navigateTo({
					url:'ckshopList?goodsId='+this.id
				})
			},
			openGoodsDetailById(){
				this.$http('openMall/openGoodsDetailById', {
				  id:this.id,
				  GoodsID:this.id,
				 },'GET').then(res => {
						this.info=res.data;
						if(this.info.details){
							this.info.details = this.info.details.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
						}
						var item={
							shopId:this.info.shopId,
							shopName:this.info.shopName
						}
						this.shopInfo=item
					    this.$store.commit('mutationsckshopInfo', item)
				 })
			},
			goINdex(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			goBuy(){
				var that=this;
				uni.setStorage({
					key: 'goodsDetail',
					data: that.info,
					 success: function () {
					   uni.navigateTo({
					   	url:'confirm?itemQty='+that.goodsnum+'&shopID='+that.shopInfo.shopId+'&shopName='+that.shopInfo.shopName
					   })
					 }
				}); 
				
			},
			calculation(type){
				if(type==1){
					if(this.goodsnum>1){
						this.goodsnum--
					}
				}else{
					if(this.info.oneQty>this.goodsnum){
						this.goodsnum++
					}
				}
			}
			
		}
	}
</script>

<style scoped lang="less">

.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.buySHop{
	display: flex;
	justify-content: space-between;
	font-size:28rpx ;
	color: #666666;
	padding-top: 30rpx;
}
.buybtnBox{
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
}
.buyBox{
	width: 750rpx;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.5);
	
}
.buyBtn{
	width: 690rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	text-align: center;
	line-height: 74rpx;
	color: #FFFFFF;
	font-size: 30rpx;
	margin-top: 23rpx;
	margin-left: 30rpx;
}
.buyShopRightJt{
	width: 12rpx;
	height: 20rpx;
	margin-top: 8rpx;
	margin-left: 10rpx;
}
.buyShopRight{
	display: flex;
}
.bugNUm{
	border-top: 1px solid #EEEEEE;
	border-Bottom: 1px solid #EEEEEE;
	padding: 28rpx 0;
	display: flex;
	justify-content: space-between;
}
.buyXg{
	width: 110rpx;
	height: 36rpx;
	border-radius: 4rpx;
	border: 1px solid #F19D01;
	text-align: center;
	line-height: 36rpx;
	color: #F19D01;
	font-size: 24rpx;
}
.numJj{
width: 44rpx;
height: 44rpx;
background: #F4F5F7;
border-radius: 0px 6rpx 6rpx 0px;	
text-align: center;
line-height: 44rpx;
font-size: 30rpx;
color: #F4F5F7;
}
.bugNUmLeft{
	display: flex;
}
.buySl{
	color: #666666;font-size: 28rpx;padding-right: 30rpx;
}
.goodsnum{
	width: 88rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
	margin: 0 4rpx;
}
.numJsbox{
	display: flex;
}
.buyCont{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 750rpx;
	height: 648rpx;
	background: #FFFFFF;
	border-radius: 26rpx 26rpx 0px 0px;
}
.buyNumBox{
	padding: 30rpx;
    padding-top: 10rpx;
}
.buyContCh{
	position: absolute;
	top: 53rpx;
	right: 36rpx;
	width: 36rpx;
	height: 36rpx;
}

.hotGoodsLine{
		margin-top: 30rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
	}
	.hotGoodsLineImg{
		width: 208rpx;
		height: 194rpx;
		border-radius: 16rpx;
		border: 1px solid #EEEEEE;
	}
	.goodsName2{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;				
		text-overflow: ellipsis;		
		display: -webkit-box;			
		-webkit-line-clamp: 2;		
		line-clamp: 2;					
		-webkit-box-orient: vertical;
		min-height: 80rpx;
		width: 370rpx;
	}
	.hotGoodsLineRIght{
		padding-left: 24rpx;
	}
	.goodsPrice{
		display: flex;
		padding-top: 10rpx;
	}
	.goodsPrice11{
		font-size: 24rpx;
		font-weight: 400;
		color: #FF0000;
		padding-top: 8rpx;
	}
	.goodsPrice22{
		font-size: 22rpx;
		font-weight: 400;
		color: #FF0000;
		padding-top: 8rpx;
		padding-left: 5rpx;
	}
	.goodsPrice33{
		font-size: 32rpx;
		font-weight: 500;
		color: #FF0000;
	}
	.goodsPrice44{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding-top: 8rpx;
		padding-left: 5rpx;
			text-decoration:line-through;
	}
	
	
.bottomBox{
	width: 750px;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
	position: fixed;left: 0;
	bottom: 0;
	display: flex;
}
.bottomTxt{
	color: #666666;font-size: 22rpx;
}
.bottomImg{
	width: 48rpx;height: 48rpx;
}
.bottomImgBox{
	text-align: center;
	padding-top: 20rpx;
	padding-left: 40rpx;
}
.bottomBtn{
	width: 450rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	line-height: 74rpx;
	text-align: center;
	color: #FFFFFF;
	font-size: 30rpx;
	margin-top: 23rpx;
	margin-left: 70rpx;
}
.goodsDetailTitle{
	color: #333333;
	line-height: 42px;
	font-size: 30rpx;
	font-weight: 500;
	background: #FFFFFF;
	padding: 20rpx 24rpx;
}
.goodsDetail{
	margin-top: 20rpx;
	padding-bottom: 30rpx;
}
.goodsDetail img{
	width: 750rpx;
}
.goodsDetail image{
	width: 750rpx;
}
.mealBox{
	background: #FFFFFF;
	padding: 20rpx 24rpx;
	margin-top: 20rpx;
}
.mealTopRight{
	display: flex;
	
}
.mealLine{
	margin-top: 20rpx;
	
}

.itemname{
	width: 441rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				
	text-overflow: ellipsis;		
	display: -webkit-box;			
	-webkit-line-clamp: 2;		
	line-clamp: 2;					
	-webkit-box-orient: vertical;
}
.itemline{
	display: flex;
	padding: 10rpx 20rpx;
	justify-content: space-between;
	line-height: 37rpx;
	font-size: 26rpx;
	color: #333333;
}
.itemlinebOX{
	border-radius: 0px 0px 10px 10px;
	border: 2Rpx solid #EEEEEE;
	padding: 10rpx 0;
}
.mealTop{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	background: #F19D01 linear-gradient(90deg, #FFF7EB 0%, #FFEFD5 100%);
	border-radius: 10rpx 10rpx 0px 0px;
	line-height: 72rpx;
	color: #333333;
	font-size: 26rpx;
	padding: 0 20rpx;
}
.fwlcTitle{
	color: #333333;font-size: 30rpx;
}
.fuwuliucBox{
  background: #FFFFFF;
  padding: 20rpx 24rpx;
  margin-top: 20rpx;
}
.fwlcxian{
	padding:30rpx 42rpx 10rpx 42rpx ;
	display: flex;
}
.fwlcyuan{
	width: 16rpx;
	height: 16rpx;
	background: #FF0000;
	border-radius: 50%;
}
.fwHx{
	height: 4rpx;
	background: #FF0000;
	width: 186rpx;
	margin-top: 7rpx;
}
.fwTxt{
	display: flex;
	justify-content: space-between;
}
.fwTxtline{
	color: #333333;
	line-height: 37px;
	font-size: 26rpx;
}
.swiper{
	width: 750rpx;
	height: 700rpx;
	background: #FFFFFF;
	border-bottom: 1px solid #EEEEEE;
}
.swiper-item{
	width: 750rpx;
	height: 700rpx;
}
.swiper-itemImg{
	width: 750rpx;
	height: 700rpx;
}
.shopCtop{
	display: flex;
	padding: 20rpx 24rpx;
	justify-content: space-between;
	background: #FFFFFF;
}
.goodsPrice{
		display: flex;
}
.goodsPrice1{
	font-size: 24rpx;
	font-weight: 400;
	color: #FF0000;
	padding-top: 14rpx;
}
.goodsPrice2{
	font-size: 28rpx;
	font-weight: 400;
	color: #FF0000;
	padding-top: 10rpx;
	padding-left: 14rpx;
}
.goodsPrice3{
	font-size:28rpx;
	font-weight: 400;
	color: #FF0000;
	padding-right: 10rpx;
}
.goodsPrice3{
	font-size: 40rpx;
	font-weight: 400;
	color: #FF0000;
}
.goodsPrice4{
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	padding-top: 14rpx;
}
.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 16rpx;
}
.goodsName{
	font-size: 30rpx;
	line-height: 42rpx;
	font-weight: 500;
	color: #333333;
	padding: 20rpx 24rpx;
	padding-top: 0;
	padding-bottom: 16rpx;
}
.goodsMd{
	font-weight: 400;
	color: #999999;
	font-size: 26rpx;
	padding: 0 24rpx;
	padding-bottom: 20rpx;
}
.shopCont{
	background: #FFFFFF;
}
.modeBox{
	margin-top:20rpx ;
	padding: 5rpx 0;
	background: #FFFFFF;
}
.modeline{
	display: flex;
	padding: 15rpx 24rpx;
}
.modelineLeft{
	color: #999999;
	font-size: 26rpx;
	width: 200rpx;
}
.modeLineRight{
	color: #333333;
	font-size: 26rpx;
}
</style>