city-store-transfer/pages/index/index.vue

<template>
	<view class="home-base-bg">
		<InputAndSwiper type='0' :bannerURL="swiperList"></InputAndSwiper>
		<view class="home-content">
			<view class="service">
				<u-image src="/static/statistics/sy_icon_lxkf.png" width="108rpx" height="108rpx"/>
			</view>
			<HomeNavCard></HomeNavCard>
			<HomeNoticeBar :text="notice" />
			<Statistics :data="statisticsNum" />
			<view class="show-and-search">
				<view class="show-tab list-tab" :class="{ 'tab-activate': chooseIndex === 0 }" @click="this.chooseIndex=0">
					<text>店铺列表</text>
				</view>
				<view class="search-tab list-tab" :class="{ 'tab-activate': chooseIndex === 1 }" @click="this.chooseIndex=1">
					<text>找店列表</text>
				</view>
			</view>
			<SearchShopList v-if="chooseIndex" />
			<ShowShopList v-else />
		</view>
		<TabBar :current-page="0"></TabBar>
	</view>
</template>

<script>
	import HomeNoticeBar from "./HomeMainContent/HomeNoticeBar.vue"
	import HomeNavCard from "./HomeMainContent/HomeNavCard.vue"
	import Statistics from "./HomeMainContent/Statistics.vue"
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
	export default {
		components: {
			HomeNavCard,
			HomeNoticeBar,
			Statistics
		},
		data() {
			return {
				notice: [],
				chooseIndex: 0,
				statisticsNum: [231753, 1345],
				swiperList:[]
			}
		},
		onLoad() {
			this.getBanner()
			this.getNotice()
			this.getStat()
			this.open()
		},
		methods: {
			getBanner(){
				this.$api.getBanner().then(res=>{  
					console.log('lunbo',res.data.data);
					this.swiperList = res.data.data.map(item=>item.img)
				})
			},
			getNotice(){
				this.$api.getHotInfo().then(res=>{
					this.notice = res.data.data.map(item=>item.title)
				})
			},
			getStat(){
				this.$api.getStat().then(res=>{
					this.statisticsNum = res.data.data
				})
			},
			getRegionList() {
				var that = this
				uni.request({
					url: 'https://apis.map.qq.com/ws/district/v1/getchildren?id=' + uni.getStorageSync('city_code') + '&key=' +
						that.$api.key,
					success(res) {
						uni.setStorageSync('regionList', JSON.stringify(res.data.result[0].map(item => item.fullname)));
					},
					fail(err) {
						console.log('请求区域失败：', err);
					}
				})
			},
			getUserLocation() {
				var that = this
				let qqmapsdk = new QQMapWX({
					key: that.$api.key
				});
				uni.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						console.log('res.latitude', res.latitude);
						console.log('res.longitude', res.longitude);
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (re) => {
								console.log("解析地址成功", re);
								console.log(re.result.ad_info.city);
								console.log(re.result.ad_info.district);
								let city = re.result.ad_info.city
								let district = re.result.ad_info.district
								console.log('city-code',re.result.ad_info.city_code.substring(3));
								uni.setStorageSync('city_code', re.result.ad_info.city_code.substring(3));
								uni.setStorageSync('city', city.slice(0, 2));
								uni.setStorageSync('district', district);
								that.getRegionList()
								// that.position = city.slice(0, 2) + district.slice(0, 2)
							},
							fail: (re) => {
								console.log(re, '失败信息');
							}
						})
					},
					fail(err) {
						console.log("获取经纬度失败", err);
					},
				});
			},
			//提示用户开启定位服务
			open() {
				var that = this
				uni.getSetting({
				  success: function (res) {
				    if (res.authSetting['scope.userFuzzyLocation']) {
				      console.log('用户已经授权定位权限');
				    } else {
				      console.log('用户未授权定位权限');
							uni.authorize({
								scope: 'scope.userFuzzyLocation',
								success: function() {
									console.log('授权成功');
									that.getUserLocation()
								},
								fail: function() {
									console.log('授权失败');
									uni.showModal({
										content: '检测到您没打开获取信息功能权限，是否去设置打开？',
										confirmText: "确认",
										cancelText: '取消',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														console.log(res);
														that.getUserLocation();
													}
												})
											} else {
												console.log('取消');
												return false;
											}
										}
									})
									return false;
								}
							})
				    }
				  }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-base-bg {
		background-color: $uni-bg-color-grey;
		width: 100%;

		.home-content {
			margin: 0 10px;
			.service {
				position: fixed;
				right: 17rpx;
				top: 1109rpx;
				z-index: 1;
			}
		}

		.show-and-search {
			display: flex;

			.list-tab {
				z-index: 2;
				width: 259rpx;
				height: 70rpx;
				background: #B7EBD2;
				border-radius: 11px 100px 0px 0px;
				color: #fff;
				font-size: 15px;
				line-height: 21px;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.search-tab {
				z-index: 1;
				transform: translateX(-61rpx);
			}

			.tab-activate {
				background: linear-gradient(#E86262, #CC3333);
				z-index: 3;
			}
		}
	}
</style>