首页

pages/index/index.vue

@@ -1,14 +1,191 @@
 <template>
 	<view class="content">
+		<view class="topBox"></view>
+		<view class="yuanhu"></view>
+		<view class="shoptopbox2"  v-if="!carInfo">
+		  <view class="carinfoBox2">
+		    <view class="carinfoBoxNocar" @click="addCar">
+		        <img src="../../static/timg/addcar.png" alt="" class="carinfonocarIcon">
+		        <view class="carinfoBoxNocarRight">
+		          <view class="carinfoBoxNocarRightTitle">添加我的爱车</view>
+		          <view class="carinfoBoxNocarRightMS">按照车型推荐合适的商品</view>
+		        </view>
+		    </view>
 		
-		<view @getphonenumber="decryptPhoneNumber" >shopId:{{shopId}}</view>
-		<view>
-			url:{{url}}
+		  </view>
 		</view>
-		<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button>
-		<view class="Menus">
-			<view class="Menusline" @click="goRoter('onlineBooking')">在线预约</view>
+		<view class="shoptopbox"  v-if="carInfo">
+		
+		  <view class="carinfoBox" >
+		      <view class="carinfoBoxTop">
+		        <img :src="carInfo.brandLogo" alt="" class="carLogo" v-if="carInfo.brandLogo">
+		        <img src="../../static/timg/nocar.png" alt="" class="carLogo" v-else>
+		        <view class="carinfoBoxTopCont">
+		          <view class="carinfoBoxTopContTop">
+		            <view class="carInfoplateNumber">{{carInfo.plateNumber}}</view>
+		            <view class="carTnfomilage">{{carInfo.milage}}km</view>
+		          </view>
+		          <view class="carInfocarModel" v-if="carInfo.carModel">{{carInfo.carModel}}</view>
+		          <view class="carInfocarModel" v-else>暂无</view>
+		        </view>
+		        <view class="carinfoBoxTopRight" @click="changeCar">
+		          <img src="../../static/timg/icon_change@2x.png" alt="" class="carinfoBoxTopRightIcon">
+		          <view class="huancheBtn">换车</view>
+		        </view>
+		      </view>
+		      <view class="carInfoBottom">
+		        <view class="carInfoBottomLine">
+		          <view class="carInfoBottomLineTitle">下次保养里程</view>
+		          <view class="carInfoBottomLineTxt" v-if="carInfo.nextCareMilage">{{carInfo.nextCareMilage}}</view>
+		          <view class="carInfoBottomLineTxt" v-else>暂无</view>
+		        </view>
+		        <view class="carInfoBottomLine">
+		          <view class="carInfoBottomLineTitle">下次保养日期</view>
+		          <view class="carInfoBottomLineTxt" v-if="carInfo.nextCareDate">{{carInfo.nextCareDate.slice(0,10)}}</view>
+		          <view class="carInfoBottomLineTxt" v-else>暂无</view>
+		        </view>
+		        <view class="carInfoBottomLine">
+		          <view class="carInfoBottomLineTitle">保养手册</view>
+		          <view class="carInfoBottomLineTxt" @click="information">点击查看</view>
+		        </view>
+		      </view>
+		  </view>
+		</view>
+		
+		<!-- 服务顾问 -->
+		<view class="adviser">
+			<view class="adviserLeft">
+				<img src="../../static/timg/pic_def_ava@2x.png" alt="" class="advisertx">
+				<view class="adviserNema">张三</view>
+				<view class="adviserms">服务顾问</view>
+			</view>
+			<img src="../../static/timg/icon_arrow_right.png" alt="" class="adviserJt">
+		</view>
+		<!-- 中间轮播模块 -->
+		<view class="modular">
+			<swiper class="swiper" circular  :autoplay="false" :interval="interval"
+							:duration="duration" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
+				<swiper-item>
+					<view class="swiper-item">
+						<view class="itemLine">
+							<view><img src="../../static/img/icon_allorder.png" alt="" class="itemImg"></view>
+							<view class="Menusline" @click="goRoter('onlineBooking')">在线预约</view>
+						</view>
+						<view class="itemLine">
+							<view><img src="../../static/img/icon_allorder.png" alt="" class="itemImg"></view>
+							<view class="Menusline" @click="goRoter('onlineBooking')">在线预约</view>
+						</view>
+						<view class="itemLine">
+							<view><img src="../../static/img/icon_allorder.png" alt="" class="itemImg"></view>
+							<view class="Menusline" @click="goRoter('onlineBooking')">在线预约</view>
+						</view>
+						<view class="itemLine">
+							<view><img src="../../static/img/icon_allorder.png" alt="" class="itemImg"></view>
+							<view class="Menusline" @click="goRoter('onlineBooking')">在线预约</view>
+						</view>
+						<view class="itemLine">
+							<view><img src="../../static/img/icon_allorder.png" alt="" class="itemImg"></view>
+							<view class="Menusline" @click="goRoter('onlineBooking')">在线预约</view>
+						</view>
+						
+					</view>
+				</swiper-item>
+				<swiper-item>
+					<view class="swiper-item">
+						
+					</view>
+				</swiper-item>
+				
+			</swiper>
+		</view>
+		
+		<view class="advertisement">
+			<swiper class="swiper2" circular  :autoplay="false" :interval="interval"
+							:duration="duration" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
+				<swiper-item>
+					<view class="swiper-item2">
+						<image class="swiper-item2Img" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" mode=""></image>
+					</view>	
+				</swiper-item>
+				<swiper-item>
+					<view class="swiper-item2">
+						<image class="swiper-item2Img" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" mode=""></image>
+					</view>
+				</swiper-item>
+				
+			</swiper>
 		</view>
+		<!-- 热门活动 -->
+		<view class="Hot">
+			<view class="hotTop">
+				<view class="hotLeft">
+					<view class="hotSx"></view>
+					<view class="hottitle">热门活动</view>
+				</view>
+				<view class="hotRight">
+					<view class="hotMore">更多</view>
+					<img src="../../static/timg/icon_arrow_right.png" alt="" class="hotMoreJt">
+				</view>
+			</view>
+			<view class="hotLine">
+				<view class="hotLineTop">
+					<image class="hotLineTopImg" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" mode=""></image>
+				    <view class="hotlineTimebox">
+				    	<view class="hotlinestate1">进行中</view>
+						<view class="hotTime">2022.01.21-2022.02.14</view>
+				    </view>
+				</view>
+				<view class="hotName">博世  7月促【CX-200715003】</view>
+			</view>
+			<view class="hotLine">
+				<view class="hotLineTop">
+					<image class="hotLineTopImg" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" mode=""></image>
+				    <view class="hotlineTimebox">
+				    	<view class="hotlinestate2">未开始</view>
+						<view class="hotTime">2022.01.21-2022.02.14</view>
+				    </view>
+				</view>
+				<view class="hotName">博世  7月促【CX-200715003】</view>
+			</view>
+		</view>
+		<!-- 热门商品 -->
+		
+		<view class="Hot">
+			<view class="hotTop">
+				<view class="hotLeft">
+					<view class="hotSx"></view>
+					<view class="hottitle">热门商品</view>
+				</view>
+				<view class="hotRight">
+					<view class="hotMore">更多</view>
+					<img src="../../static/timg/icon_arrow_right.png" alt="" class="hotMoreJt">
+				</view>
+			</view>
+			
+			<view class="hotGoodsLine" v-for="(item,index) in 5">
+				<view>
+					<image src="../../static/timg/nocar.png" mode="" class="hotGoodsLineImg"></image>
+				</view>
+				<view class="hotGoodsLineRIght">
+					<view class="goodsName">德国马牌 Continental 全新升级6代 TechContct德国马牌 Continental 全新升级6代 TechContct</view>
+				    <view class="Sold">已售 999</view>
+					<view class="goodsPrice">
+						<view class="goodsPrice1">店庆价</view>
+						<view class="goodsPrice2">￥</view>
+						<view class="goodsPrice3">999</view>
+						<view class="goodsPrice3">￥893</view>
+					</view>
+				</view>
+			</view>
+			
+		</view>
+		
+		
+		<view style="height: 60rpx;"></view>
+		
+		<!-- <view @getphonenumber="decryptPhoneNumber" >shopId:{{shopId}}</view>
+		
+		<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> -->
 	</view>
 </template>
 
@@ -20,6 +197,11 @@
 				url:'',
 				wxOpenData:'',
 				code:'',
+				carInfo:{
+					plateNumber:11,
+					milage:'3222',
+					carModel:'奥迪',
+				}
 			}
 		},
 		onLoad() {
@@ -42,6 +224,12 @@
 			this.uniLogin()
 		},
 		methods: {
+			information(){
+				
+			},
+			changeCar(){
+				
+			},
 			goRoter(url){
 				uni.navigateTo({
 					url:url
@@ -142,15 +330,362 @@
 	}
 </script>
 
-<style>
-	
-	.logo {
+<style scoped>
+	.content{
+		min-height: 100vh;
+		background: #F4F5F7;
+	}
+	.topBox{
+		width: 750rpx;
 		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+		background: #D53533;
+	}
+	.yuanhu{
+		width: 750rpx;
+		height: 50rpx;
+		background: #D53533;
+		border-radius: 0 0 100% 100%;
+	}
+	.carinfoBox{
+		width: 702rpx;
+		height: 250rpx;
+		background: #FFFFFF;
+		border-radius: 10rpx;
+		margin-left: 24rpx;
+		overflow: hidden;
+		
+	}
+	.carinfoBox2{
+		width: 702rpx;
+		height: 180rpx;
+		background: #FFFFFF;
+		border-radius: 10rpx;
+		margin-left: 24rpx;
+		overflow: hidden;
+		
+	}
+	.carinfoBox .carLogo{
+		width: 72rpx;height: 72rpx;
+	}
+	.carinfoBoxTop{
+		display: flex;
+		justify-content: space-between;
+		padding-top: 29rpx;
+		padding-left: 24rpx;
+		padding-right: 20rpx;
+		padding-bottom: 24rpx;
+		border: 1px solid #EEEEEE;
+	}
+	.carinfoBoxTopCont{
+		width: 454rpx;
+	}
+	.carinfoBoxTopContTop{
+		display: flex;
+	}
+	.carInfoplateNumber{
+		font-weight: 500;
+		color: #3C3C3C;
+		font-size: 30rpx;
+		line-height: 42rpx;
+		padding-right: 16rpx;
+	}
+	.carTnfomilage{
+		color: #F19D01;
+		font-size: 22rpx;
+		padding: 0rpx 10rpx;
+		border-radius: 4rpx;
+		border: 1px solid #F19D01;
+		height: 32rpx;
+		line-height: 34rpx;
+		margin-top: 2rpx;
+		margin-left: 2rpx;
+	}
+	.carInfocarModel{
+		width: 454rpx;
+		color: #666666;
+		font-size: 26rpx;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.carinfoBoxTopRight{
+		display: flex;padding-top: 25rpx;
+	}
+	.carinfoBoxTopRightIcon{
+		width: 29rpx;
+		height: 31rpx;
+	}
+	.huancheBtn{
+		color: #666666; font-size: 26rpx;line-height: 31rpx;
+		padding-left: 10rpx;
+	}
+	.carInfoBottom{
+		display: flex;
+		justify-content: space-around;
+	}
+	.carInfoBottomLineTitle{
+		color: #999999;font-size: 24rpx;
+		text-align: center;
+		padding-top: 24rpx;
+	}
+	.carInfoBottomLineTxt{
+		color: #3C3C3C;
+		font-size: 26rpx;
+		padding-top: 5rpx;
+		text-align: center;
+	}
+	.carinfonocarIcon{
+		width: 72rpx;
+		height: 72rpx;
+	}
+	.carinfoBoxNocar{
+		display: flex;
+		padding-top: 50rpx;
+		padding-left: 20rpx;
+	}
+	.carinfoBoxNocarRightTitle{
+		font-weight: 500;
+		color: #3C3C3C;
+		font-size: 30rpx;
+	}
+	.carinfoBoxNocarRightMS{
+		color: #666666;
+		font-size: 26rpx;
+	}
+	.carinfoBoxNocarRight{
+			padding-left: 24rpx;
+	}
+	.shoptopbox{
+		margin-top: -200rpx;
+	}
+	.adviser{
+		width: 662rpx;
+		margin-left: 24rpx;
+		background: #FFFFFF;
+		border-radius: 10px;
+		display: flex;
+		justify-content: space-between;
+		padding: 18rpx 20rpx;
+		margin-top: 20rpx;
+	}
+	.adviserLeft{
+		display: flex;
+	}
+	.advisertx{
+		width: 62rpx;height: 62rpx;
+	}
+	.adviserNema{
+		color: #333333;font-size: 30rpx;
+		line-height: 62rpx;padding-left: 24rpx;
+	}
+	.adviserms{
+		width: 118rpx;
+		height: 36rpx;
+		border-radius: 4rpx;
+		border: 1px solid #D53533;
+		line-height: 36rpx;
+		text-align: center;
+		margin-top: 12rpx;
+		margin-left: 20rpx;
+		color: #D53533;
+		font-size: 24rpx;
+	}
+	.adviserJt{
+		width: 12rpx;
+		height: 20rpx;
+		margin-top: 16rpx;
+	}
+	.modular{
+		width: 702rpx;
+		height: 313rpx;
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin-top: 20rpx;
+		margin-left: 24rpx;
+	}
+	.swiper-item{
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.itemImg{
+		width: 46rpx;
+		height: 46rpx;
+	}
+	.Menusline{
+		font-size: 24rpx;
+        color: #333333;
+	}
+	.itemLine{
+		width: 25%;
+		text-align: center;
+		padding-top: 40rpx;
+	}
+	.advertisement{
+		width: 702rpx;
+		height: 280rpx;
+		margin-top: 20rpx;
+		margin-left: 24rpx;
+		border-radius: 20rpx;
+	}
+	.swiper-item2{
+		width: 702rpx;
+		height: 280px;
+	}
+	.swiper-item2Img{
+		width: 702rpx;
+		height: 280rpx;
+	}
+	.hotMoreJt{
+		width: 12rpx;
+		height: 20rpx;
+		margin-top: 6rpx;
+	}
+	.Hot{
+		width: 702rpx;
+		margin-top: 20rpx;
+		margin-left: 24rpx;
+	}
+	.hotTop{
+		display: flex;
+		justify-content: space-between;
+	}
+	.hotSx{
+		width: 8rpx;
+		height: 30rpx;
+		background: #F03B3B;
+		border-radius: 5rpx;
+	}
+	.hotLeft{
+		display: flex;
+	}
+	.hottitle{
+		font-weight: 500;
+		color: #333333;
+		font-size: 30rpx;
+		line-height: 30rpx;
+		margin-left: 16rpx;
+	}
+	.hotRight{
+		display: flex;
+	}
+	.hotMore{
+		line-height: 30rpx;color: #666666;font-size: 24rpx;
+		margin-right: 16rpx;
+	}
+	.hotLineTopImg{
+		width: 702rpx;
+		height: 280rpx;
+		
+	}
+	.hotLineTop{
+		position: relative;
+		height: 280rpx;
+	}
+	.hotLine{
+		margin-top: 20rpx;
+		border-radius: 10rpx;
+		background: #FFFFFF;
+		overflow: hidden;
+		
+	}
+	.hotlinestate1{
+		width: 102rpx;
+		height: 44rpx;
+		background:#FBBF00 ; 	
+		line-height: 44rpx;
+		font-weight: 500;
+		color: #333333;
+		font-size: 24rpx;
+		text-align: center;
+	}
+	.hotlinestate2{
+		width: 102rpx;
+		height: 44rpx;
+		background:#F03B3B ; 	
+		line-height: 44rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		font-size: 24rpx;
+		text-align: center;
+	}
+	.hotlineTimebox{
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+	}
+	.hotTime{
+		font-weight: 400;
+		color: #FFFFFF;
+		font-size: 24rpx;
+		line-height: 44rpx;
+		padding: 0 20rpx;
+	}
+	.hotName{
+		padding: 24rpx 20rpx;
+		color: #333333;
+		line-height: 40rpx;
+		font-size: 28rpx;
+	}
+	.hotGoodsLine{
+		margin-top: 20rpx;
+		padding: 20rpx;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		display: flex;
+	}
+	.hotGoodsLineImg{
+		width: 208rpx;
+		height: 194rpx;
+		border-radius: 16rpx;
+		border: 1px solid #EEEEEE;
+	}
+	.goodsName{
+		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;
+	}
+	.hotGoodsLineRIght{
+		padding-left: 24rpx;
+	}
+	.goodsPrice{
+		display: flex;
+		padding-top: 10rpx;
+	}
+	.goodsPrice1{
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #F03B3B;
+	}
+	.goodsPrice2{
+		font-size: 22rpx;
+		font-weight: 400;
+		color: #F03B3B;
+	}
+	.goodsPrice3{
+		font-size: 32rpx;
+		font-weight: 400;
+		color: #F03B3B;
+	}
+	.goodsPrice3{
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #999999;
+	}
+	.Sold{
+		font-weight: 400;
+		color: #999999;
+		font-size: 24rpx;
+		padding-top: 8rpx;
 	}
-
 </style>