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=true">请选择</view>
				<view class="cityBtn selectColor" v-else @click="showCity=true">{{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_change.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>

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

		<chose-city @selectCity="selectCity" v-if="showCity" @closeModal="closeModal"></chose-city>

	</view>
</template>

<script>
	import choseCity from "@/components/chose-city/chose-city"
	export default {
		components: {
			choseCity
		},

		data() {
			return {
				imgData: [],
				uid: '',
				cityname: '',
				showCity: false,
				memberCar: '',
				location: {
					lng:'',
					lat:'',
					cityname:'',
					cityCode:'',
				},
				cityCode: '',
				time: '',
				mileage: '',
                autoplay:true,
			}
		},
		onLoad() {

		},
		onShow() {

			var that = this;
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			this.uid = uni.getStorageSync("logodata").uid;

			var location = uni.getStorageSync("location");


			if (location) {
				this.lng = location.lng;
				this.lat = location.lat;
				this.cityname = location.cityname;
				this.cityCode = location.cityCode;
                this.location=location
				that.queryHomeDetail();
			} else {
				/* uni.showToast({
					title: '请选择城市'
				}) */
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
				       console.log(res)
						that.lng=res.longitude
						that.lat=res.latitude
						that.getAdress();
						
				    },
					 fail(err) {
						
					 }
				}); 
			}

		},

		methods: {

			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
					this.mileage = res.data.memberCar.milage

					var cardata = uni.getStorageSync("maintainCarData")
					
					if (cardata) {
						this.memberCar = cardata
					}
					
				})
			},
			gomodule() {
				uni.navigateTo({
					url: '../module/maintain'
				})
			},

			goCarList() {
				if (this.uid) {
					uni.navigateTo({
						url: 'cailist?type=1'
					})
				}
			},
			addCar() {
				uni.navigateTo({
					url: 'addCar'

				})
			},
			selectCity(item) {
				console.log('-您选择的城市-', item)
				console.log(this.location)
				this.location.cityname = item.name;
				this.location.cityCode = item.citycode;
				this.cityname = item.name;
				console.log(this.location)
				uni.setStorage({
					key: 'location',
					data: this.location,
					success: function() {}
				});
				this.showCity = false;

			},
			closeModal() {
				this.showCity = false

			},


			bindChange(e) {
				console.log(e);
				this.time = e.target.value
			},
            getAdress(){
            	var location=this.lng+','+this.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);
            	        this.cityname=res.data.pois[0].cityname;
            			var cityCode=res.data.pois[0].adcode
            			cityCode=cityCode.slice(0, -2)
            			cityCode=cityCode+'00'
						this.cityCode=cityCode
            			var obj={
            				cityname:this.cityname,
            				lng:this.lng,
            				lat:this.lat,
            				cityCode:cityCode
            			}
            			uni.setStorage({
            				key: 'location',
            				data: obj,
            				success: function () {}
            			}); 
            			this.queryHomeDetail();
            	    }
            	});
            },


		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F4F5F7;
	}

	.bBannerList {
		width: 100%;
		height: 300rpx;
		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>