txCar/pages/module/goodsDetail.vue

<template>
	<view class="box">
	 <view v-if="goodsData">
		 <view class="mainTop">
		 		 <view class="imgBox">
		 			 <swiper class="swiper" :circular="true"swiper-item
		 			 :indicator-dots="true"  indicator-active-color="#FF4F00"
		 			 >
		 			 	<swiper-item v-for="(item,index) in goodsData.listImg">
		 			 		<view class="swiper-item">
		 			 			<image :src="item.url" mode="aspectFit" class="goodsImg" v-if="item.url"></image>
		 						 <image src="../../static/img/noimg.png" mode="widthFix" class="goodsImg" v-else></image>
		 			 		</view>
		 			 	</swiper-item>
						<swiper-item v-if=" goodsData.listImg.length==0">
							 <image src="../../static/img/noimg.png" mode="widthFix" class="goodsImg" ></image>
						</swiper-item>
					   
		 			 </swiper>
		 		 </view>
		 		 <view class="priceBox">
		 			 <span class="price1">￥ <span v-if="goodsData.salePrice"> {{goodsData.salePrice}}</span>
					 <span v-else> - </span>
					 </span>
		 		 </view>
		 		 <view class="goodsName">
		 			{{goodsData.ShowName}}
		 		 </view>
		 </view>
		 

		 <!-- 已选车辆店铺-->
		 <!-- 购物流程-->
		 <view class="buyLc">
		 		 <view class="title">购物流程</view>
		 		 <view class="lcIMgBox">
		 			 <image src="../../static/img/icon_liuc.png" mode="" class="lcImg"></image>
		 		 </view>
		 		 <view class="lcLineBox">
					 <view class="lcline">
					 	选择商品/项目
					 </view>
		 			 <view class="lcline">
		 				 选择门店
		 			 </view>
		 			 <view class="lcline">
		 			 	在线支付
		 			 </view>
		 			 <view class="lcline">
		 			 	到店服务
		 			 </view>
		 		 </view>
		 </view>
		  <!-- 购物流程-->
		  <!-- 详情-->
		  <view class="goosDetal" v-if="MiniAppContent">
		 		  <view class="goodsDetalTitle">详情</view>
		 		  <rich-text :nodes="MiniAppContent" style="font-size: 0px;"></rich-text>
		  </view>
		   <!-- 详情-->
		   <view style="height: 150rpx;"></view>
		   <!-- 无店的情况-->
		 <!--  <view class="bottomNoshop" v-if="!shopData">
		 		   <view class="bottomNoshopBtn" @click="gockShop">请先前往首页选择门店</view>
		   </view> -->
		   <!-- 立即购买-->
		  <!-- <view class="buyBottom" v-if="maintain!=1&&maintain!=2">
		 		   <view class="buyBottomLeftLine buyBottomLeftLine2" @click="call">
		 			   <image src="../../static/img/heicall.png" mode="widthFix" class="callImg"></image>
		 			   <view class="buyBottomLeftLineTxt">电话</view>
		 		   </view>
		 		   <view class="buyBottomLeftLine buyBottomLeftLine2 buyBottomLeftLine3" @click="addGoodsCollection">
		 			   <image src="../../static/img/icon_xin_pre.png" mode="widthFix" class="callImg"v-if="goodsData.isCollection==1"></image>
					   <image src="../../static/img/icon_xin.png" mode="widthFix" class="callImg" v-else></image>
					   
		 			   <view class="buyBottomLeftLineTxt" v-if="goodsData.isCollection==1" style="color: #FF4F00;">已收藏</view>
					   <view class="buyBottomLeftLineTxt" v-else>收藏</view>
		 		   </view>
		 		   <view class="buyBtn" @click="buy" v-if="maintainCarData&&nobuy!=1">立即购买</view>
		   </view>
		   <view class="buyBottom" v-if="maintain==2">
		   		<view class="tihuanBtn" @click="tihuan">替换</view>
		   </view> -->
	 </view>
	
	   
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsId:'',
			ShowName:'',
			shopData:'',
			maintainCarData:'',
			goodsData:'',
			type:'',
			MiniAppContent:'',
			typeIndex:'',
			nobuy:2,
			maintain:'',
			goodsreplaceData:'',
		}
	},
	onLoad(opt) {
      this.ShowName=opt.ShowName;
	  this.goodsId=opt.goodsId;
	  
	   this.shopData=uni.getStorageSync("shopData");
	   this.maintainCarData=uni.getStorageSync("maintainCarData");
	   if(opt.type){
		   this.type=opt.type
	   }
	   if(opt.nobuy){
		   this.nobuy=opt.nobuy
	   }
	   if(opt.maintain){
		   this.maintain=opt.maintain
		   if(this.maintain==2){
			   this.goodsreplaceData=uni.getStorageSync("goodsreplaceData");
		   }
	   }
	   this.typeIndex=opt.typeIndex;
	  
		     this.getData();
	   
	    //this.addGoodsFootprint()
	},
	onShow() {
		this.$common.isUserId()
		   this.shopData=uni.getStorageSync("shopData");
	},
	methods: {
		tihuan(){
			var that=this;
			uni.setStorage({
				key: 'replaceData',
				data: that.goodsreplaceData,
				success: function () {
					uni.navigateBack({
						delta:2
					})
				}
			}); 
		},
		buy(){
			var arr=[];
			var obj={
			   'id':'',
			   'listGoodsAll':[],
			   'listItem':[],
			};
		   var url=''
			if(this.goodsData.list.length>0){
				if(this.goodsData.list[0].url){
					 url=this.goodsData.list[0].url
				}else{
				
				}
			}
			var ShowName=''
			if(this.goodsData.ShowName){
				ShowName=this.goodsData.ShowName
			}
			var goodsObj={
				goodsID:this.goodsData.ID,
				mItemID:'',
				mGoodsID:this.goodsData.miniId,
				salePrice:this.goodsData.MiniAppSalePrice,
				qty:1,
				goodsName:ShowName,
				picUrl:url
				
			}
			
			obj.listGoodsAll.push(goodsObj);
			arr.push(obj)
			console.log(arr)
			//return false
			 uni.removeStorageSync('couponData');
			uni.navigateTo({
				url:'../module/confirmOrder?orderData='+JSON.stringify(arr)+'&currentMileage='+this.maintainCarData.milage
			})
		},
		gockShop(){
				uni.navigateTo({
					url:'../Shop/ckShop'
				}) 	   	  
		},
		call(){
			console.log(this.shopData.mobilePhone)
			if(this.shopData.mobilePhone){
				
				uni.makePhoneCall({
				    phoneNumber: this.shopData.mobilePhone
				}); 
			}else{
				uni.showToast({
					 title: '未设置电话',
					 icon:'none',
					 duration: 3000,
				});
			}
			
		},
	  addGoodsCollection(){
		if(this.goodsData.isCollection==0){
				uni.showLoading({
					title: '加载中'
				})
				 this.$http('miniAppMyBMemberCar/addGoodsCollection', {
				   goodsId:this.goodsId,
				   
				  },'POST').then(res => {
					  uni.hideLoading();
					   if(res.code!=0){
							 uni.showToast({
								 title: res.msg,
								 icon:'none',
								 duration: 3000,
							 });
					   }else{
							 uni.showToast({
								 title: '收藏成功',
								 icon:'none',
								 duration: 3000,
							 });
							 this.goodsData.isCollection=1;
					   }
				 })
		}else{
				uni.showLoading({
					title: '加载中'
				})
				this.$http('miniAppMyBMemberCar/deleteBMemberGoods', {
				  goodId:this.goodsId,
				  
				 },'POST').then(res => {
					  uni.hideLoading();
					  if(res.code!=0){
							 uni.showToast({
								 title: res.msg,
								 icon:'none',
								 duration: 3000,
							 });
					  }else{
							 uni.showToast({
								 title: '取消成功',
								 icon:'none',
								 duration: 3000,
							 });
							  this.goodsData.isCollection=0;
					  }
				}) 
		}
		}, 
		getData(){
			if(this.type==2){
				var params={
					  goodsId:this.goodsId,
					 //shopId:this.shopData.shopId,
				}
			}else{
				var location = uni.getStorageSync("locationCity");
				var params={
					  id:this.goodsId,
					  guidePrice:this.maintainCarData.guidePrice,
					  cityCode:location.cityCode,
					 // shopId:this.shopData.shopId,
				}
			}
			uni.showLoading({ });
			if( this.typeIndex==1){
				var url='miniApp/tPackageMiniAppController/queryGoodsMiniAppList'
			}else{
				var url='miniApp/tPackageMiniAppController/queryGoodsInfoDetail'
			}
			this.$http(url, params,'GET').then(res => {
				  uni.hideLoading();
/* 				  var a=res.data.Items
				  this.phoneList=this.phoneList.concat(a);	 */
				if(res.data.MiniAppContent){
					 this.MiniAppContent=res.data.MiniAppContent.replace(/\<p/gi, '<p style="display: inline-block"');
				}
				 
				  this.goodsData=res.data;
				
				  uni.setNavigationBarTitle({
				       title: res.data.ShowName
				  })
				 
			})
			
		},
        addGoodsFootprint(){
		   this.$http('miniAppMyBMemberCar/addGoodsFootprint', {
		   			 
			  goodId:this.goodsId,
			 },'POST').then(res => {
 
		 })
	   }
	},
	filters:{
		formatRichText(html) {
		          
		         
		        },
	}
}
</script>

<style scoped>
	.box{
		min-height: 100vh;
		background:#F4F5F7 ;
	}
	.mainTop{
		background: #FFFFFF;
	}
	.swiper-item{
		width: 100vw;
		height: 700rpx;
		
	}
	.swiper{
		height: 700rpx;
	}
	.goodsImg{
		width: 750rpx;
		height: 700rpx;
	}
	.imgBox{
		text-align: center;
	}
	.priceBox{
		padding: 30rpx 17rpx;
	}
	.price1{
		font-size: 36rpx;
		font-weight: 600;
		color: #FF4F00;
	}
	.price2{
		font-size: 24rpx;
		color: #999999;
		padding-left: 20rpx;
		text-decoration:line-through;
	}
	.goodsName{
		padding: 0 25rpx 30rpx 25rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.carShopBox{
		background: #FFFFFF;
		padding: 30rpx 24rpx;
		margin-top: 20rpx;
	}
	.maintainCarTitle{
		font-size: 26rpx;
		color: #999999;
		
	}
	.maintainCarTxt{
		font-size: 26rpx;
		color: #3C3C3C;
		padding-left: 30rpx;
	}
	.title{
		font-size: 30rpx;
	    padding-bottom: 30rpx;
		color: #333333;
		font-weight: 600;
	}
	.shopBox{
			padding-top: 30rpx;
			display: flex;
		}
		.flex{
			display: flex;
			justify-content: space-between;
		}
		.shopCont{
			padding-left: 22rpx;
			width: 480rpx;
		}
		.shopName{
			color: #333333;
			font-size: 26rpx;
			font-weight: 600;
		}
		.span1{
			color: #FF4F00;font-size: 36rpx;
		}
		.span2{
			color: #FF4F00;font-size: 22rpx;
		}
		.span3{
				color: #333333;font-size: 22rpx;padding-left: 22rpx;
		}
		.shopBq{
			color: #FF4F00;font-size: 22rpx;border-radius: 4rpx;
	border: 1px solid #FF4F00;line-height: 30rpx;height: 30rpx;padding: 0rpx 5rpx;
	margin-top: 10rpx;
		}
	.shopTime{
		color: #666666;font-size: 22rpx;
	}	
	.addressBox{
		color: #666666;font-size: 22rpx;
	}
	.shopImg{
		width: 120rpx;
		height: 120rpx;
	}
	.buyLc{
		padding: 24rpx 30rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}
	.lcImg{
		width: 618rpx;
		height: 22rpx;
	}
	.lcIMgBox{
		text-align: center;
	}
	.lcline{
		font-size: 26rpx;
		color: #333333;
	}
	.lcLineBox{
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
	}
	.goosDetal{
		background: #FFFFFF;
		margin-top: 20rpx;
		
	}
	.goodsDetalTitle{
		padding: 24rpx 30rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}
	.bottomNoshop{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
	}
	.bottomNoshopBtn{
		width: 690rpx;
		height: 74rpx;
		background: #CCCCCC;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
		margin-top: 29rpx;
		margin-left: 30rpx;
	}
	.callImg{
		width: 36rpx;
	}
	.buyBottomLeftLineTxt{
		font-size: 22rpx;
		color: #333333;
	}
	.buyBottom{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
		display: flex;
	}
	.buyBtn{
		width: 400rpx;
		height: 74rpx;
		background: #FF4F00;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 23rpx;
		margin-left: 50rpx;
	}
	.buyBottomLeftLine1{
	    padding-top: 28rpx;
		padding-left: 56rpx;
	}
	.buyBottomLeftLine2{
		padding-top: 32rpx;
		padding-left: 56rpx;
		text-align: center;
	}
	.buyBottomLeftLine3{
		width: 120rpx;
		padding-left: 0;
		margin-left: 50rpx;
	}
	.goosDetal /deep/ img{
		width: 100vw;
		
	}
	.goosDetal image{
		width: 100vw;
		
	}
	.goosDetal /deep/ p{
		margin: 0;
		padding: 0;
		display: flex;
	}
	.tihuanBtn{
		width: 600rpx;
		height: 74rpx;
		background: #FF4F00;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 23rpx;
		margin-left: 75rpx;
	}
</style>