wxThird/pages/subPack/tire.vue

<template>
<view class="box">
 <view class="top" >
	<view class="topTitle">
		<image class="topTitleImg" src="http://dmsphoto.66km.com.cn/thFiles/A04B4AFE-6C2C-4570-B579-2AF05487D71E.png" mode=""></image>
	</view>
	 <view class="msBox">
		 <view class="msLine">
			 <image class="msIcon" src="../../static/img2/yczg.png" mode=""></image>
			 <view class="msTxt">原厂直供</view>
		 </view>
		 <view class="msLine">
			 <image class="msIcon" src="../../static/img2/zszb.png" mode=""></image>
			 <view class="msTxt">终身质保</view>
		 </view>
		 <view class="msLine">
			 <image class="msIcon" src="../../static/img2/smfw.png" mode=""></image>
			 <view class="msTxt">上门服务</view>
		 </view>
		 
	 </view>
	 <view class="inputBox">
	 	<view class="iBline">
			<span>雪佛兰 科沃兹</span>
			<image class="xiaIcon" src="../../static/img2/xia.png" mode=""></image>
		</view>	
		<view class="iBsx"></view>
		<view class="iBline">
			<view style="display: flex;">
				<span>215/55 R16</span>
				<span class="shipei">适配</span>
			</view>
			
			<image class="xiaIcon" src="../../static/img2/xia.png" mode=""></image>
		</view>	
	 		
	 </view>
 </view>

<view class="contBox">
  <view class="contTabBox">
	  <view class="contTab contTabActive">综合</view>
	  <view class="tabprice">
		  <view>价格</view>
		  <view class="tabpriceImg">
			  <image  src="../../static/timg/icon_arrow_up_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
			  <image  src="../../static/timg/icon_arrow_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
		  </view>
	  </view>
	  <view class="contTab">销量</view>
  </view>
  <view class="contLineBox">
	  <view class="contLine" v-for="(item,index) in 3" @click="goDetail">
		<image class="lineImg" src="../../static/timg/noimg.png" mode=""></image>  
		<view class="goodsRight">
			<view class="bygoodsNameBox">
				<span class="isRecommend" >适配</span>
				<span class="bygoodsName"> 路博路博（ROADBOSS）轮胎 195/65R5 91H HP601</span>
			</view>
			<view class="tireMS">耐磨 静音</view>
			<view class="goodsbq">
				<view class="goodsbqLine">第二条半价</view>
				<view class="goodsbqLine">双11轮胎节</view>
			</view>
			<view class="goodspriceBox">
				<view class="goodsprice1">¥</view>
				<view class="goodsprice2">294.5</view>
				<view class="goodsprice3">¥414</view>
			</view>
			<view class="goodsk">
				<view class="goodsKline">
					<view class="goodsKlineLeft">送</view>
					<view class="goodsKlineRgiht">动平衡</view>
				</view>
				<view class="goodsKline">
					<view class="goodsKlineLeft">送</view>
					<view class="goodsKlineRgiht">动平衡</view>
				</view>
			</view>
		</view>
	  </view>
  </view>
</view> 


 
 

</view>
</template>

<script>
	export default {
		components: {},
		/*保养 1 */
		data() {
			return {
				themeColor:'',
				ext:'',
				
				carInfo:'',
				
			}
		},
		onLoad(opt) {
			this.ext = this.$common.getExtStoreId();
			this.themeColor = uni.getStorageSync("themeColor");
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: '#FD3142'// + this.themeColor
			})
			this.carInfo=this.$store.state.carInfo;
			
			this.maintainProjectID=opt.maintainProjectID
			if(this.carInfo){
				//this.getRecommend()
			}else{
				/* uni.showModal({
					title: '提示',
					content: '请先选择车辆',
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url:'../user/addCar/cailist?type=5'
							})
						} 
					}
				}); */
			}
			
			
		},
		onShow() {
			var car =uni.getStorageSync("byCar")
			
		},
		methods: {
			goDetail(){
			  uni.navigateTo({
			  	url:'tireDetail'
			  })	
			},
			clearAll(){
				var that=this
				uni.showModal({
					title: '提示',
					content: '确定清空吗？',
					success: function(resTK) {
						if (resTK.confirm) {
							that.list.forEach(item=>{
								item.packageItems.forEach(v=>{
									v.select=false
								})
							})
							 that.itemDefault=''
							 that.qdNum=0
							 that.totalPrice=0
						}
						
					}
				});
				
			},
			
			
			goCkcar(){
				uni.navigateTo({
					url:'../user/addCar/cailist?type=5'
				})
			},
			goItem(item){
			  uni.removeStorageSync('byCar');
			  uni.navigateTo({
			  	url:'maintainItem?maintainId='+item.id+'&isRecommend='+item.isRecommend
			  })	
			},
			goSubmit(){
				if(this.itemDefault){
					if(this.itemDefault.content){
						this.itemDefault.content=this.itemDefault.content.replace(/\<img/gi, '<img style="max-width:100% !important;height:auto" ');
					}
					this.itemDefault.goodsnum=this.goodsnum
					this.itemDefault.goodsname=this.lineItem.title
					this.itemDefault.itemId=this.lineItem.id
					this.itemDefault.mainImgUrl=this.lineItem.mainImgUrl
					uni.setStorage({
						key: 'itemDefault',
						data: this.itemDefault,
						 success: function () {
						    uni.navigateTo({
						    	url:'maintainSubmit'
						    })
						 }
					}); 
				}else{
					uni.showToast({
						 title: '请选择商品规格',
						 icon:'none',
						 duration: 3000
					});
				}
				
			},
			
			
			
			
			
		}
	}
</script>

<style scoped lang="less">
.box {
	width: 100vw;
	min-height: 100vh;
	background: #F4F4F4;
}
.contBox{
	background: linear-gradient( 180deg, #FED3C1 0%, #F3F3F3 14%, #F2F2F2 100%);
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	min-height: 500rpx;
	margin-top: -20rpx;
}
.goodsk{
	display: flex;padding-top: 8rpx;
}
.goodsKline{
	display: flex;font-size: 15rpx;
color: #FF063A;
border-radius: 2rpx;
border: 1rpx solid #FF063A;
margin-right: 8rpx;
}
.goodsKlineLeft{
	padding: 2rpx 4rpx;
	border-right: 1rpx solid #FF063A;
}
.goodsKlineRgiht{
	padding: 2rpx 4rpx;
}
.bygoodsNameBox{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				
	text-overflow: ellipsis;		
	display: -webkit-box;			
	-webkit-line-clamp: 2;		
	line-clamp: 2;					
	-webkit-box-orient: vertical;
	width: 430rpx;
	
}
.goodsRight{
	padding-left: 24rpx;
}
.bygoodsName{
	font-weight: 600;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
	padding-left: 10rpx;
}
.goodspriceBox{
	display: flex;padding-top: 8rpx;
}
.goodsprice1{
	font-weight: 600;
	font-size: 20rpx;
	color: #EC0F0A;
	padding-top: 8rpx;
}
.goodsprice2{
	font-weight: 500;
	font-size: 30rpx;
	color: #EC0F0A;
}
.goodsprice3{
	font-weight: 400;
	font-size: 22rpx;
	color: #9A9A9A;
	padding-top: 8rpx;
	padding-left: 8rpx;
}
.isRecommend{
		    font-size: 20rpx;
		    background: #57C73D;
		    height: 30rpx;
		    padding: 0 6rpx;
		    border-radius: 6rpx;
		    color: #fff;
		    margin-top: 5rpx;
		/*    margin-right: 10rpx; */
	}
.contLineBox{
	padding: 0 20rpx;
}
.contLine{
	padding: 22rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 16rpx;
	display: flex;
}
.lineImg{
	width: 230rpx;border-radius: 13rpx;
	height: 230rpx;
}
.goodsbq{
	display: flex;padding-top: 10rpx;
}
.goodsbqLine{
	font-size: 20rpx;
	color: #FF063A;
	background: rgba(236, 15, 10, 0.1);
	border-radius: 2rpx;
	padding: 2rpx 10rpx;
	margin-right: 12rpx;
}
.tireMS{
	font-weight: 500;
	font-size: 22rpx;
	color: #434340;
}
.tabprice{
	display: flex;
}
.tabpriceImg{
	display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
}
.contTabBox{
	display: flex;justify-content: space-between;
	padding: 20rpx 60rpx;font-weight: 500;
font-size: 26rpx;
color: #222222;
}
.paixuLineTbtopIcon{
	width: 16rpx;
	height: 8rpx;
	padding-top: 6rpx;
	padding-bottom: 6rpx;
	padding-left: 10rpx;
}
.contTabActive{
	font-weight: 500;
	font-size: 26rpx;
	color: #EC0F0A;
}
.top{
	height: 260rpx;
	padding: 40rpx 24rpx;
	background: linear-gradient( 180deg, #FD3142 0%, #FE9045 100%);
}
.inputBox{
	background: rgba(255,255,255,0.4);
	border-radius: 40rpx;line-height: 42rpx;
	border: 1px solid #FFFFFF;
	padding: 18rpx 30rpx;font-size: 26rpx;color: #222222;
	display: flex;justify-content: space-between;
	margin-top: 32rpx;
	padding-bottom: 14rpx;
}
.iBsx{
	width: 2rpx;
	height: 46rpx;
	background: #EEEEEE;
	opacity: 0.5;
}
.shipei{
	width: 48rpx;text-align: center;
	height: 28rpx;margin-top: 8rpx;
	background: #57C73D;margin-left: 10rpx;
	border-radius: 5rpx;
	display: inline-block;
	font-weight: 500;
	font-size: 16rpx;
	color: #FFFFFF;
	line-height: 28rpx;
}
.xiaIcon{
	width: 12rpx;height: 9rpx;margin-top: 18rpx;margin-left: 10rpx;
}
.iBline{
	width: 300rpx;display: flex;justify-content: space-between;
}
.ibCarIcon{
	height: 42rpx;width: 42rpx;
}
.glIcon{
	width: 34rpx;height: 34rpx;margin-top: 6rpx;
}
.ibLeft{
	display: flex;
}
.ibRight{
	display: flex;
}
.ibCarBox{
	display: flex;padding-left: 10rpx;
}
.glInput{
	width: 120rpx;line-height: 42rpx;height: 42rpx;
	padding-left: 10rpx;
}
.msIcon{
	width: 26rpx;height: 26rpx;
}
.msTxt{
	font-weight: 500;margin-left: 12rpx;
	font-size: 22rpx;
	color: #FCD903;
	padding-top: 2rpx;
}
.msLine{
	display: flex;line-height: 28rpx;    width: 180rpx;
    justify-content: center;
}
.msBox{
	display: flex;justify-content: center;padding-top: 24rpx;
	padding-left: 30rpx;padding-right: 30rpx;
}
.spBox{
	background: linear-gradient( 180deg, #FFFFFF 0%, #F4F4F4 440rpx);
	border-radius: 23rpx;
	padding: 24rpx 20rpx 0 24rpx;
	margin-top: -50rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.spTop{
	display: flex;justify-content: space-between;line-height: 40rpx;
	padding-bottom: 16rpx;
}
.spTitle{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
}
.spMs{
	font-size: 24rpx;
	color: #666666;
}
.znBox{
	height: 200rpx;
	background: #FDC856;
	border-radius: 21rpx;
}
.znCont{
	background: url('http://dmsimg.66km.com/marketing/be56733ed0464993b9e71d351d82062e.jpg') no-repeat;
	background-size: 100% 100%;
	height: 160rpx;
	    border-radius: 26rpx;
}
.hxIcon{
	height: 4rpx;width: 360rpx;
	margin-left: 18rpx;margin-top: 20rpx;
    display: block;
}
.znMs{
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 33rpx;
	padding-left: 18rpx;padding-top: 16rpx;
}
.znCar{
	font-weight: 500;padding-left: 18rpx;
	font-size: 32rpx;padding-top: 24rpx;
	color: #8C5E24;
	line-height: 45rpx;
}

.goodsMs{
	font-weight: 400;padding-top: 10rpx;
	padding-bottom: 6rpx;
	font-size: 22rpx;
	color: #8B8B8B;
	line-height: 28rpx;
	white-space: nowrap;      /* 确保文本在一行内显示 */
	  overflow: hidden;         /* 超出容器部分隐藏 */
	  text-overflow: ellipsis;
	  width: 480rpx;
}


.nodataImg{
	width: 176rpx;height: 180rpx;
}
.nodataTxt{
	font-weight: 400;
	font-size: 26rpx;
	color: #999999;
	line-height: 37rpx;
	text-align: center;
	padding-top: 10rpx;
}
.nodataBox{
	padding-top: 186rpx;
	background: #fff;
    padding-bottom: 200rpx;
	border-radius: 20rpx;
}
.topTitle{
	font-family: PangMenZhengDao;
	font-size: 60rpx;
	color: #FFF99F;
	line-height: 80rpx;
	text-align: center;
}
.topTitleImg{
	width: 529rpx;
	height: 52rpx;
}
</style>