wxThird/pages/index/onlineBooking.vue

<template>
	<view class="box">
		<view class="top">
			<view class="shopTop">
				<swiper class="swiper" circular  :autoplay="false" :interval="interval"
								:duration="duration">
					<swiper-item>
						<view class="swiper-item">
							<img mode="aspectFit" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" alt="">
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<img mode="aspectFit" src="http://dmsphoto.66km.com.cn/thFiles/A9157023-4939-48B7-BB49-D9D8113EF953.jpg" alt="">
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<img mode="aspectFit" src="http://dmsphoto.66km.com.cn/thFiles/1057BA84-E59D-47B7-9F66-73E3491A443E.jpg" alt="">
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 门店详情 -->
			<view class="newshopNames">
			  <view class="newshopDstop">
			    <view class="newshopDname">连锁一号</view>
			    <view class="newshopDtime">
			      营业时间： <span>08:00 - 17:00</span>
			    </view>
			    <view class="newshopDbqbox" >
			      <view class="newshopDbqline" v-for="(item,index) in 5">大众</view>
			    </view>
			  </view>
			  <view class="newshopDadressBpx">
			    <view class="newshopDaleft">
			      <view class="newshopDaleftTop">
			        <img src="../../static/timg/icon_coordinate@2x.png" alt="" class="shopaddressIcon">
			        <span class="shopDdistance" v-if="Number(distance)>1">距离{{distance}}km</span>
			        <span class="shopDdistance" v-else-if="Number(distance)">距离{{distance*1000}}m</span>
			        <span class="shopDdistance" v-else>距离--km</span>
			      </view>
			      <view class="newshopDadressName">金智源</view>
			    </view>
			    <view class="newshopDaright">
			      <view class="newshopDrline" @click="goLocation()">
			        <img src="../../static/timg/icon_map@2x.png" alt="" class="newshopDrlineimg">
			        <view class="newshopDrlineTxt">地图</view>
			      </view>
			      <view class="newshopDRsx"></view>
			      <view class="newshopDrline" @click="phones()">
			        <img src="../../static/timg/icon_phone@2x.png" alt="" class="newshopDrlineimg">
			        <view class="newshopDrlineTxt">电话</view>
			      </view>
			    </view>
			  </view>
			
			</view>
		</view>
	  <!-- 预约详情-->
	  <view class="yuyue-container">
	  	<view class="yuyueLeft">
	  		<view class="yuyueleftLine" v-for="(item,index) in 6" @click="listItemWxInfo(item,index)" :class="{leftActive:leftIndex==index}">汽车</view>
	  	</view>
		<view class="yuyueRight">
			<view class="yuyueRightTitle">维修</view>
			<view class="yrTop">
				 <view class="ItemName">轮毂去污护理（4支）</view>
				 <image src="../../static/timg/ickno.png" mode="" class="yrTopImg"></image>
				 <image src="../../static/timg/icon_checked@2x.png" mode="" v-if="false" class="yrTopImg"></image>
			</view>
			<view class="itemSm">
				这是项目说明，这是项目说明，这是项目说明这是项目说明，这是项目说明，这是项目说明这是项目说明，这是项目说明，这是项目说明
			</view>
			<view class="Price">
				 <view class="yuyue-price"> <span class="qianhaospan">￥</span> {{item.Price||'--'}} </view>
			</view>
			
		</view>
	  </view>
	  
	  <view class="bottom-container newbottom-container">
	    <view class="newyyBox" @click="yuyueDetail">
	      <view class="yyBleft">
	        <img src="../../static/timg/icon_qingdan@2x.png" alt="" class="yyBleftimg">
	      </view>
	      <view>
	        <view class="totalPriceBox"><span>预估总额:</span > <span class="totalPrice"><span class="qianhaospan">￥</span>22</span>  </view>
	        <span class="hejishul">合计数量: 11</span>
	      </view>
	  
	    </view>
	  
	    <view href="javascript:;" class=" newbottom-container-button" @click="yuyue">立即预约</view>
	  </view>
	  
	  <view class="yydetailBox" v-show="yydetailShow" @click="yydetailShow=false">
	    <view class="yyDetailTop" @click.stop="">
	      <view class="yyDetailTopleft">清单</view>
	      <view class="yyDetailTopRight">
	        <view class="yydetalqk" @click="yyqingk">清空</view>
	        <view class="yydetailx" @click="yydetailShow=false">X</view>
	      </view>
	    </view>
	    <view class="yydetailCont" @click.stop="">
	       <view class="yydetailContLine" v-for="(item,index) in  5">
	           <view class="yydlineName">item.ItemName</view>
	           <view class="yydlineCommnt" v-if="true">item.Comment</view>
	           <view class="yydPrice">￥item.Price</view>
	       </view>
	    </view>
	  
	  </view>
	  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				interval:2000,
				distance:0.05,
				leftIndex:0,
				yydetailShow:false,
			}
		},
		methods: {
			goLocation(){
				
			},
			phones(){
				
			},
			listItemWxInfo(item,index){
				this.leftIndex=index
			},
			yuyueDetail(){
				this.yydetailShow=true;
			},
			yyqingk(){
				
			}
		}
	}
</script>

<style scoped lang="less">
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.swiper-item img{
	width: 750rpx;
	height: 500rpx;
}
.swiper-item{
	height: 500rpx;
}
.swiper{
	height: 500rpx;
}
.newshopNames{
	width: 702rpx;
	margin-left: 24rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: -60rpx;
	position: relative;
}
.newshopDname{
	color: #333333;font-size: 30rpx;
	padding-left: 20rpx;
	padding-top: 23rpx;
	font-weight: 500;
}
.newshopDtime{
	color: #999999;
	font-size: 24rpx;
	padding-left: 20rpx;
	padding-top: 10rpx;
	font-weight: 400;
}
.newshopDstop{
	padding-bottom: 21rpx;
	border-bottom: 1px solid #EEEEEE;
}
.newshopDetailtop{
	margin-bottom: 20rpx;
}
.newshopDbqbox{
	display: flex;
	flex-wrap: wrap;
	padding-left: 20rpx;
}
.newshopDbqline{
	line-height: 30rpx;
	height: 30rpx;
	border-radius: 4rpx;
	border: 1px solid #FF7D30;
	color: #FF7D30;
	font-size: 22rpx;
	padding: 0 8rpx;
	margin-right: 16rpx;
	margin-top: 10rpx;
}
.newshopDbqbox{
	padding-top: 5rpx;
}
.shopaddressIcon{
	width: 22rpx;
	height: 30rpx;
}
.shopDdistance{
	color: #3C3C3C;font-size: 24rpx;line-height: 30rpx;padding-left: 16rpx;
	font-weight: 500;
}
.newshopDaleftTop{
	display: flex;
}
.newshopDadressBpx{
  display: flex;
  padding: 30rpx 20rpx;
  background: url(http://dmsphoto.66km.com.cn/thFiles/010748B7-5678-46C3-941B-60B3CD4D10CB.png) no-repeat;
  background-size: 100% 100%;
}
.newshopDadressName{
	color: #999999;padding-top: 16rpx;
	font-size: 24rpx;line-height: 24rpx;
	width: 480rpx;font-weight: 400;
}
.newshopDrlineimg{
	width: 44rpx;
	height: 44rpx;
}
.newshopDrlineTxt{
	color: #999999;
	font-size: 22rpx;
	text-align: center;
	padding-top: 7rpx;
	font-weight: 400;
}
.newright-item .yuyue-item{
	padding-top: 20rpx;
}
.newshopDRsx{
	width: 2rpx;
	height: 71rpx;
	background: #EEEEEE;
}
.newshopDaright{
	display: flex;
	justify-content: space-between;
	width: 150rpx;
	padding-left: 20rpx;
}
.yrTopImg{
	width: 36rpx;
	height: 36rpx;
}
.yuyue-container{
	display: flex;
	margin-top: 20rpx;
	padding-bottom: 120rpx;
}
.yuyueLeft{
	background: #F5F5F5;
	width: 154rpx;
	
}
.yuyueRight{
	width: 548rpx;
	background: #FFFFFF;
	padding-left: 24rpx;
	padding-right: 24rpx;
}
.yuyueleftLine{
	font-size: 26rpx;
	padding:30rpx 24rpx;
	color: #3C3C3C;
	font-weight: 400;
}
.leftActive{
	background: #FFFFFF;
	font-weight: 500;
}
.yuyueRightTitle{
	color: #999999;font-size: 26rpx;
	padding: 30rpx 0;
}
.yrTop{
	display: flex;
	justify-content: space-between;
}
.ItemName{
	color: #3C3C3C;
	font-size: 28rpx;
	width: 480rpx;
}
.itemSm{
	color: #999999;
	line-height: 33rpx;
	font-size: 24rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				
	text-overflow: ellipsis;		
	display: -webkit-box;			
	-webkit-line-clamp: 2;		
	line-clamp: 2;					
	-webkit-box-orient: vertical;	
	
}
.qianhaospan{
	font-size: 22rpx;
}
.yuyue-price{
	color: #FF3B30;
	font-size: 32rpx;
	padding-top: 8rpx;
	border-bottom: 1px  solid #EEEEEE;
	padding-bottom: 19rpx;
}
.newbottom-container-button{
	width: 203rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	color: #FEFFFE;
	font-size: 30rpx;
	line-height: 74rpx;
	text-align: center;
}
.newbottom-container{
	display: flex;
	justify-content: space-between;
	padding-left: 32rpx !important;
	width: 696rpx !important;
    z-index: 66;
	padding: 23rpx 32rpx !important;
	height: 76rpx !important;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #FFFFFF;
	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.1000);
}
.yuyue-main .newright-item{
	padding-bottom: 19rpx;
}
.yyBleftimg{
	width: 45rpx;
	height: 35rpx;
	margin-top: 2rpx;
}
.yyBleft{
	display: flex;
	align-items: center;
	padding-right: 33rpx;
}
.newyyBox{
	display: flex;
}
.newyyBox .totalPriceBox{
	line-height: 45rpx;
	color: #666666;
	font-size: 24rpx;
	font-weight: 500;
}
.newyyBox .totalPrice{
	color: #F03B3B;
	font-size: 32rpx;
}
.hejishul{
	color: #999999;
	font-size: 24rpx;
	font-weight: 400;
}
.yydetailBox{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background: rgba(0, 0, 0, 0.4);
	z-index: 6;
}
.yydetailCont{
	width: 100vw;
	height: 50vh;
	overflow-y: scroll;
	background: #F0F0F0;
	position: absolute;
	left: 0;
	bottom: 120rpx;
}
.yyDetailTop{
	width: 750rpx;
	height: 90rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0px 0px;
	position: absolute;
	left: 0;
	bottom: calc( 50vh + 120rpx);
	display: flex;
	justify-content: space-between;
}
.yyDetailTopleft{
	color: #3C3C3C;
	font-size: 30rpx;
	line-height: 90rpx;
	padding-left: 24rpx;
}
.yyDetailTopRight{
	display: flex;
	padding-right: 24rpx;
}
.yydetailx{
	line-height: 90rpx;
	color: #999999;
	font-size: 30rpx;
}
.yydetalqk{
	width: 86rpx;
	height: 41rpx;
	background: #EEEEEE;
	border-radius: 21rpx;
	text-align: center;
	line-height: 41rpx;
	color: #666666;
	font-size: 24rpx;
	margin-top: 25rpx;
	margin-right: 38rpx;
}
.yydetailContLine{
	width: 702rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	border: 1px solid #DDDDDD;
	margin-top: 20rpx;
	margin-left: 24rpx;
	padding: 24rpx 0px;
}
.yydlineName{
	color: #3C3C3C;
	font-size: 26rpx;
	padding-left: 24rpx;
	
}
.yydlineCommnt{
	color: #999999;
	font-size: 26rpx;
	padding-left: 22rpx;
	line-height: 30rpx;
	padding-top: 10rpx;
}
.yydPrice{
	padding-left: 22rpx;
	padding-top: 10rpx;
	color: #FF3B30;
	font-size: 32rpx;
}
</style>