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?carInfo.milage:0}}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" v-if="homeCardList.openMUsers" @click="goRoter">
			<view class="adviserLeft">
				<img src="../../static/timg/pic_def_ava@2x.png" alt="" class="advisertx">
				<view class="adviserNema">{{homeCardList.openMUsers.operatorName}}</view>
				<view class="adviserms">服务顾问</view>
			</view>
			<img src="../../static/timg/icon_arrow_right.png" alt="" class="adviserJt">
		</view>
		<!-- 中间轮播模块 -->
		<view class="modular" v-if="homeCardList.application.length>0">
			<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"  @click="goRoter('onlineBooking')"  v-for="(item,index) in homeCardList.application"> 
							<view><img :src="item.icon" alt="" class="itemImg"></view>
							<view class="Menusline">{{item.name}}</view>
						</view>
						
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="swiper-item">
						
					</view>
				</swiper-item> -->
				
			</swiper>
		</view>
		
		<view class="advertisement" v-if="homeCardList.ad1.length>0">
			<swiper class="swiper2" circular  :autoplay="false" :interval="interval"
							:duration="duration" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
				<swiper-item v-for="(item,index) in homeCardList.ad1">
					<view class="swiper-item2">
						<image class="swiper-item2Img" :src="item.icon" 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 class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
			<view class="authorizCont" @click.stop="">
				<view class="sqLogoBox">
					logo
				</view>
				<view class="authorizName">这是小程序名称</view>
				<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
				<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
			</view>
			<view style="text-align: center;padding-top: 56rpx;">
				<image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
			</view>
		</view>
		
		
		<!-- <view @getphonenumber="decryptPhoneNumber" >shopId:{{shopId}}</view>
		
		 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopId: '',
				url:'',
				wxOpenData:'',
				code:'',
				carInfo:'',
				homeCardList:'',
				authorizShow:false,
			}
		},
		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.userInfo = uni.getStorageSync("userInfo");
			if(this.userInfo){
				//this.wxOpenData = uni.getStorageSync("wxOpenData");
				this.getCarList();
				this.queryHomeCardList()
			}else{
				this.uniLogin()
			}
			
		},
		methods: {
			addCar(){
				if(!this.userInfo){
					this.authorizShow=true;
				}else{
					
				}
			},
			information(){
				
			},
			changeCar(){
				
			},
			goRoter(url){
				if(!this.userInfo){
					this.authorizShow=true;
				}else{
					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,
				   unionId:'EEADACCD-8A19-499D-8AD7-6975D2C93243'
				  },'GET').then(res => {
				 	this.wxOpenData=res.data;
					
					that.queryHomeCardList()
					//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.getCarList()
							 }
						}); 
					}else{
						this.authorizShow=true;
					}
					
					
				  })
			 },
			 wxPhoneLogin(){
				 var that=this;
				 this.$http('miniApp2/sys/wxPhoneLogin', {
				   appId:'wx33053a645546ec31',
				   unionId:'EEADACCD-8A19-499D-8AD7-6975D2C93243',
				   code:this.code,
				   openId:this.wxOpenData.openid
				  },'POST').then(res => {
				 	var data = res.data;
					if(data.loginInfo){
						this.userInfo=data.loginInfo.openUser
						uni.setStorage({
							key: 'userInfo',
							data: data.loginInfo.openUser,
							 success: function () {
							     that.getCarList()
							     that.queryHomeCardList()
							 }
						}); 
					}
				 		
				  })
			 },
			 getCarList(){
				 this.$http('opencarOwnerHome/queryCarInfoList', {
				   
				  },'GET').then(res => {
				 	this.carInfo=res.data[0]
				 	 this.$store.commit('mutationscarInfo', this.carInfo)				
				  })
			 },
			 queryHomeCardList(){
				 //console.log(this.wxOpenData)
				 this.$http('openHome/queryHomeCardList', {
				   unionId:'EEADACCD-8A19-499D-8AD7-6975D2C93243'
				  },'GET').then(res => {
				 		this.homeCardList=res.data
				  })
			 }
			 
		}
	}
</script>

<style scoped>
	.authorizBox{
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
	}
	.authorizCont{
		margin-top: 30vh;
		width: 564rpx;
		height: 484rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-left: 93rpx;
		position: relative;
	}
	.authorizCloseImg{
		width: 62rpx;
		height: 62rpx;
	}
	.sqLogoBox{
		width: 180rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 90rpx;
		text-align: center;
		position: absolute;
		top: -50rpx;
		left: 192rpx;
	}
	.authorizName{
		color: #333333;
		line-height: 42rpx;
		font-size: 30rpx;
		text-align: center;
		padding-top: 140rpx;
	}
	.authorizMs{
		color: #999999;
		line-height: 36rpx;
		font-size: 26rpx;
		width: 452rpx;
		padding-top: 24rpx;
		text-align: center;
		margin-left: 56rpx;
	}
	.authorizContbutton{
		width: 422rpx;
		height: 88rpx;
		background: #D53533;
		border-radius: 44rpx;
		line-height: 88rpx;
		text-align: center;
		font-size:30rpx;
		color: #FFFFFF;
		margin-top: 62rpx;
		margin-left:71rpx;
	}
	.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;
		
	}
	.carinfoBox2{
		
	}
	.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;
	}
	.shoptopbox2{
		margin-top: -160rpx;
	}
	.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;
		padding: 6rpx 0;
	}
	.hotSx{
		width: 8rpx;
		height: 30rpx;
		background: #FF0000;
		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:#FF0000 ; 	
		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: #FF0000;
	}
	.goodsPrice2{
		font-size: 22rpx;
		font-weight: 400;
		color: #FF0000;
	}
	.goodsPrice3{
		font-size: 32rpx;
		font-weight: 400;
		color: #FF0000;
	}
	.goodsPrice3{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
	.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 8rpx;
	}
</style>