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 homeData.bBannerList" @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 homeData.bBannerList" @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="!joinFirst">
					<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">{{plateNo}}</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="!carMod">{{carMod}}</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">查看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 {
				homeData: '',
				uid: '',
				cityname: '',
				showCity: false,
				location: '',
				cityCode: '',
				joinFirst: false,
				carMod: '',
				time: '',
				mileage: '',

			}
		},
		onLoad() {

			console.log('index-----onLoad')
			var that = this;
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			//#ifdef H5 
			var logodata = {
				uid: 'E4416E30-C82A-4136-81B7-6B424DDE4847',
				token: "39F6A2FB48D841FA9A3AA149532917CE",
				memberInfo: {
					nickName: '布克',
					name: '66',
					headUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/PHgdyF2l1fvicOPTicZlAdhuK65E6VFnNJIhA9QWFCUwftgc9hySDltLEEWic27eMLkiaoQG9emzqg0s87JaW28HFQ/132'
				}
			}
			var obj = {
				cityname: "济南市",
				lat: 36.68013,
				lng: 117.06533,
				cityCode: 370100
			}
			uni.setStorage({
				key: 'location',
				data: obj,
				success: function() {}
			});
			uni.setStorage({
				key: 'logodata',
				data: logodata,
				success: function() {}
			});
			var wxOpend = {
				openid: "oqeJ-5Lsmi-vM1Oirso6z9-MrD3g",
				session_key: "sxV2xbqNvOkk+p7i/KosiQ=="
			}
			uni.setStorage({
				key: 'wxOpendata',
				data: wxOpend,
				success: function() {}
			});
			that.queryHomeDetail();
			that.getqueryMemberCarShop()

			// #endif
			this.uid = uni.getStorageSync("logodata").uid;
			console.log(this.shopId)
			this.location = uni.getStorageSync("location");
			if (this.location) {
				this.lng = this.location.lng;
				this.lat = this.location.lat;
				this.cityname = this.location.cityname;
				this.cityCode = this.location.cityCode;
				//that.queryHomeDetail();
				if (that.uid) {
					that.getqueryMemberCarShop()
				} else {
					that.queryHomeDetail();
				}
			} else {
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log(res)
						that.lng = res.longitude
						that.lat = res.latitude

						that.getAdress();
						//登录状态下获取车辆信息
						if (that.uid) {
							that.getqueryMemberCarShop()
						} else {
							that.queryHomeDetail();
						}
					},
					fail(err) {
						console.log(err)
						that.queryHomeDetail();
						//登录状态下获取车辆信息
						if (that.uid) {
							that.getqueryMemberCarShop()
						}
					}
				});
			}




		},
		methods: {
			goCarList() {
				if (this.uid) {
					uni.navigateTo({
						url: 'cailist?type=1'
					})
				}
			},
			addCar() {
				uni.navigateTo({
					url: 'addCar'
				})
			},
			selectCity(item) {
				console.log('-您选择的城市-', item)
				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'
						var obj = {
							cityname: this.cityname,
							lng: this.lng,
							lat: this.lat,
							cityCode: cityCode
						}
						uni.setStorage({
							key: 'location',
							data: obj,
							success: function() {}
						});

					}
				});
			},

		}
	}
</script>

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

	.bBannerList {
		width: 100%;
		height: 300rpx;
		background-color: #3F536E;
	}

	.swpImg {
		width: 100%;
		height: 300rpx;
	}

	.carMessage {
		margin: 24rpx 24rpx 40rpx;

		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>