<template>
<view class="content">
<!-- 轮播图 -->
<view class="bBannerList">
<swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="true">
<swiper-item v-for="(item,index) in imgData" @click="carBswpClick(item)" v-if="!shopId">
<view class="swiper-item uni-bg-red">
<image :src="item.logo" mode="" class="swpImg"></image>
</view>
</swiper-item>
<swiper-item v-for="(item,index) in imgData" @click="carBswpClickshop(item)" v-if="shopId">
<view class="swiper-item uni-bg-red">
<image :src="item.logo" mode="" class="swpImg"></image>
</view>
</swiper-item>
</swiper>
</view>
<!-- 填写车辆信息 -->
<view class="carMessage">
<view class="mesView">
<view class="leftTitle">城市</view>
<view class="cityBtn noSelectColor" v-if="!cityName" @click="showCity">请选择</view>
<view class="cityBtn selectColor" v-else @click="showCity">{{cityName}}</view>
<image src="../../static/img/rightArrow.png" class="rightArrow"></image>
</view>
<view class="mesView">
<view class="leftTitle">车牌号</view>
<view class="rightView" v-if="!memberCar">
<view class="plateNumber noSelectColor">请添加您的爱车</view>
<view class="changeCarBg" @click="addCar()">
<image src="../../static/img/icon_tianjia.png"
style="width: 32rpx; height: 34rpx; margin-right: 5rpx;"></image>
<view style="color: #FF2400; font-size: 28rpx;">添加</view>
</view>
</view>
<view class="rightView" v-else>
<view class="plateNumber selectColor">{{memberCar.plateNumber}}</view>
<view class="changeCarBg" @click="goCarList()">
<image src="../../static/img/icon_change.png"
style="width: 32rpx; height: 34rpx; margin-right: 5rpx;"></image>
<view style="color: #FF2400; font-size: 28rpx;">换车</view>
</view>
</view>
</view>
<view class="mesView">
<view class="leftTitle">车型</view>
<view class="carModBtn selectColor" v-if="memberCar">{{memberCar.carModel}}</view>
<view class="carModBtn noSelectColor" v-else>车型</view>
</view>
<view class="mesView">
<view class="leftTitle">行驶里程</view>
<input class="mileageInput selectColor" type="number" v-model="mileage" placeholder="请输入"
placeholder-style="color:#999999" />
<view class="kmStr">km</view>
</view>
</view>
<view class="look4s" @click="gomodule">查看4S店保养价格</view>
</view>
</template>
<script>
export default {
data() {
return {
imgData: [],
uid: '',
cityName: '',
cityCode: '',
memberCar: '',
locationCity: {
cityName: '',
cityCode: '',
lng: '',
lat: '',
},
time: '',
mileage: '',
autoplay: true,
interval: 2000,
duration: 500,
brand:'',
}
},
onLoad() {
},
onShow() {
var that = this;
that.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
that.uid = uni.getStorageSync("logodata").uid;
var selectCity = uni.getStorageSync("selectCity");
if (selectCity) {
//有选择的城市
that.cityName = selectCity.city
that.cityCode = selectCity.code
} else{
//定位到的城市
var nowCity = uni.getStorageSync("locationCity");
if (nowCity) {
that.cityName = nowCity.cityName
that.cityCode = nowCity.cityCode
if (that.uid) {
that.queryHomeDetail();
}
} else {
// 重新去定位城市
that.getLocation()
}
}
if (that.uid) {
that.queryHomeDetail();
}
},
methods: {
getLocation() {
const that = this
uni.getLocation({
type: 'gcj02',
success: function(res) {
console.log('定位', res)
that.locationCity.lng = res.longitude
that.locationCity.lat = res.latitude
that.getAdress();
},
fail(err) {
console.log(err)
}
});
},
getAdress() {
// 根据经纬度 逆城市地理编码 获取城市信息
var location = this.locationCity.lng + ',' + this.locationCity.lat
uni.request({
url: 'https://restapi.amap.com/v3/place/around',
data: {
key: '064b6a4a8ade55656edcde2f528876de',
location: location,
types: "190000",
extensions: "all",
radius: 100
},
dataType: "json",
success: (res) => {
console.log('定位城市', res);
let cityname = res.data.pois[0].cityname;
var cityCode = res.data.pois[0].adcode
cityCode = cityCode.slice(0, -2)
cityCode = cityCode + '00'
this.locationCity.cityName = cityname
this.locationCity.cityCode = cityCode
uni.setStorage({
key: 'locationCity',
data: this.locationCity,
success: function() {
console.log('定位城市,保存成功');
}
})
this.cityName = this.locationCity.cityName
this.cityCode = this.locationCity.cityCode
}
});
},
showCity(){
uni.navigateTo({
url:'../chooseCity/chooseCity'
})
},
goLonIn(){
uni.navigateTo({
url:'../login/login'
})
},
queryHomeDetail() {
uni.showLoading({
title: '加载中'
})
this.$http('worldKeepCar/worldHome/queryHomeDetail', {
cityCode: this.cityCode
}, 'GET').then(res => {
uni.hideLoading();
this.imgData = res.data.banners
this.memberCar = res.data.memberCar
if (res.data.memberCar) {
this.mileage = res.data.memberCar.milage
}
else {
this.mileage =''
}
this.brand = res.data.memberCar.brand
var cardata = uni.getStorageSync("maintainCarData")
if (cardata) {
this.memberCar = cardata
if (cardata) {
this.mileage = this.memberCar.milage
}
else {
this.mileage =''
}
this.brand = this.memberCar.brand
}else{
uni.setStorage({
key: 'maintainCarData',
data: this.memberCar,
success: function () {
}
});
}
})
},
gomodule() {
if (!this.uid) {
this.goLonIn();
}
if (!this.cityCode) {
uni.showToast({
title:'请选择城市',
icon:'none',
duration: 3000,
})
return
}
if (!this.memberCar) {
uni.showToast({
title:'请选择车辆',
icon:'none',
duration: 3000,
})
return
}
uni.navigateTo({
url: '../module/maintain?brand='+this.brand
})
},
goCarList() {
if (this.uid) {
uni.navigateTo({
url: 'cailist?type=1'
})
}
},
addCar() {
if (!this.uid) {
this.goLonIn();
}
uni.navigateTo({
url: 'addCar'
})
},
bindChange(e) {
console.log(e);
this.time = e.target.value
},
}
}
</script>
<style>
.content {
min-height: 100vh;
background-color: #F4F5F7;
}
.bBannerList {
width: 100%;
height: 100%;
background-color: #F4F5F7;
}
.swpImg {
width: 100%;
height: 300rpx;
}
.carMessage {
margin: 24rpx 24rpx 40rpx;
padding-top: 10rpx;
height: 500rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
}
.look4s {
margin: 40rpx 24rpx;
height: 88rpx;
line-height: 88rpx;
text-align: center;
background-color: #FD5300;
border-radius: 10rpx;
color: #FFFFFF;
font-weight: bold;
font-size: 30rpx;
}
.mesView {
display: flex;
align-items: center;
width: 100%;
height: 120rpx;
background-color: #FFFFFF;
}
.leftTitle {
margin: 28rpx;
width: 120rpx;
font-size: 28rpx;
color: #666666;
}
.noSelectColor {
color: #999999;
}
.selectColor {
color: #333333;
}
.rightArrow {
margin-right: 28rpx;
width: 14rpx;
height: 23rpx;
}
.cityBtn {
width: 65%;
font-size: 28rpx;
}
.rightView {
display: flex;
justify-content: space-between;
width: 80%;
}
.plateNumber {
font-size: 28rpx;
}
.carModBtn {
width: 65%;
font-size: 28rpx;
}
.timeBtn {
width: 65%;
font-size: 28rpx;
}
.mileageInput {
width: 20%;
font-size: 28rpx;
}
.kmStr {
font-size: 28rpx;
color: #333333;
}
.changeCarBg {
display: flex;
/* justify-content: flex-start; */
align-items: center;
width: 120rpx;
margin-right: 28rpx;
}
</style>