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