wxThird/pages/index/index.vue

<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>
		</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>

<script>
	export default {
		data() {
			return {
				shopId: '',
				url:'',
				wxOpenData:'',
				code:'',
				carInfo:{
					plateNumber:11,
					milage:'3222',
					carModel:'奥迪',
				}
			}
		},
		onLoad() {
			var that=this;
			 this.$common.getExtStoreId()
			 var ext=this.$common.getExtStoreId();
			console.log(ext)
			this.shopId=ext.shopId;
			this.url=ext.url;
			uni.setStorage({
				key: 'extdata',
				data: {
					shopId:'E37BB296-5A08-4534-859D-B351BA611AF9',
				},
				 success: function () {
				     that.uniLogin()
				 
				 }
			}); 
			this.uniLogin()
		},
		methods: {
			information(){
				
			},
			changeCar(){
				
			},
			goRoter(url){
				uni.navigateTo({
					url:url
				})
			},
			decryptPhoneNumber: function(e) {
			  console.log(e);
			  this.code=e.detail.code
			  this.wxPhoneLogin()
			},
             wxgologin(){
             	var that=this;
             	uni.getUserProfile({
             		lang:'zh_CN',
             		desc:'登录',
             		success:(res)=>{
             			console.log(res);
             			that.wxdata=res;
             			 uni.setStorage({
             				key: 'wxdata',
             				data: res,
             				 success: function () {
             				     that.uniLogin()
             				 
             				 }
             			}); 
             		},
             		fail:(res)=>{
             			console.log(res)
             		}
             	});
             },
			 uniLogin(){
				 var that=this;
				 uni.login({
				   provider: 'weixin',
				   success: function (loginRes) {
				     console.log(loginRes);
					 that.getWxOpenID(loginRes)
				   }
				 });
			 },
			 getWxOpenID(e){
				 var that=this;
				// this.code=e.code;
				 this.$http('miniApp2/sys/getWxOpenID', {
				   code:e.code,
				   shopId:'E37BB296-5A08-4534-859D-B351BA611AF9'
				  },'GET').then(res => {
				 	this.wxOpenData=res.data;
					//that.wxPhoneLogin()
					uni.setStorage({
						key: 'wxOpenData',
						data: that.wxOpenData,
						 success: function () {
						    // that.uniLogin()
						 
						 }
					}); 
					if(this.wxOpenData.loginInfo){
						uni.setStorage({
							key: 'userInfo',
							data: that.wxOpenData.loginInfo.openUser,
							 success: function () {
							    // that.uniLogin()
							 
							 }
						}); 
					}
					
					
				  })
			 },
			 wxPhoneLogin(){
				 var that=this;
				 this.$http('miniApp2/sys/wxPhoneLogin', {
				   appId:'wx33053a645546ec31',
				   shopId:'E37BB296-5A08-4534-859D-B351BA611AF9',
				   code:this.code,
				   openId:this.wxOpenData.openid
				  },'POST').then(res => {
				 	var data = res.data;
					if(data.loginInfo){
						uni.setStorage({
							key: 'userInfo',
							data: data.loginInfo.openUser,
							 success: function () {
							    // that.uniLogin()
							 
							 }
						}); 
					}
				 		
				  })
			 }
			 
		}
	}
</script>

<style scoped>
	.content{
		min-height: 100vh;
		background: #F4F5F7;
	}
	.topBox{
		width: 750rpx;
		height: 200rpx;
		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>