txCar/pages/index/index.vue

<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="line"></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="line"></view>
			
			<view class="mesView">
				<view class="leftTitle">车型</view>
				<view class="carModBtn selectColor carMod" v-if="memberCar">{{memberCar.carModel}}</view>
				<view class="carModBtn noSelectColor" v-else>车型</view>

			</view>
			
			<view class="line"></view>
			<view class="mesView">
				<view class="leftTitle">行驶里程</view>
				<input class="mileageInput selectColor" type="number" v-model="mileage" placeholder="请输入"
					placeholder-style="color:#999999" @input="upMileage" />
				<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:'',
				cityRole:'',
			}
		},
		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: {
			upMileage(){
				
					this.$http('worldKeepCar/worldHome/updateTMemberCarByHome', {
						id: this.memberCar.id,
						milage: this.mileage?this.mileage:0,
						
					}, 'POST').then(res => {
						uni.hideLoading();
						console.log(res);
						if (res.code == 0) {
							var cardata = uni.getStorageSync("maintainCarData")
							
							if (cardata) {
								
								 cardata.milage = this.mileage
								
								uni.setStorage({
									key: 'maintainCarData',
									data: cardata,
									success: function () {			
								     }
								}); 
								
							}
							
						}
						
					})
				
			},
			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.cityRole = res.data.cityRole
					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
				}
				if (this.cityRole == 0) {
					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
			},
           


		},
		onShareAppMessage:function() {
			
		},
	}
</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;

	}
	.carMod{
		text-overflow: -o-ellipsis-lastline;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  line-clamp: 2;
		  -webkit-box-orient: vertical;
	}
	.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;
	}
	.line{
		margin: 0 28rpx;
		
		height: 2rpx;
		background-color: #EEEEEE;
	}
</style>