city-store-transfer/components/InputAndSwiper/InputAndSwiper.vue

<template>
	<view class="input-and-swiper-root">
		<view class="search-box" v-if="type!=='0'">
			<view class="search-box-input">
				<u-input v-model="keyword" placeholder="请输入标题进行搜索" placeholder-style="color: #969696" prefixIcon="search"
					prefixIconStyle="font-size: 24px;color: #909399;" border="true" @clear="handleClear" clearable
					@change="changeInput">
					<template slot="suffix">
						<view style="display: flex;align-items: center;">
							<u-icon name="map-fill" color="#329866" size="22"></u-icon>
							<text class="position">{{position}}</text>
						</view>
					</template>
				</u-input>
			</view>
		</view>
		<u-swiper :list="bannerURL" keyName="img" height="300rpx" @change="e => currentNum = e.current"
			@click="handleSwiperList(currentNum==''?0:currentNum,bannerURL)" />
	</view>
</template>

<script>
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
	export default {
		name: "inputAndSwiper",
		props: {
			bannerURL: {
				type: Array,
				default () {
					return [
						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"
					]
				}
			},
			type: {
				type: String,
				default: '1'
			},
			refresh: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				position: uni.getStorageSync('city') + uni.getStorageSync('district').slice(0, 2),
				currentNum: '',
				keyword: ''
			};
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		watch: {
			refresh(newVal, oldVal) {
				console.log('newVal', newVal);
				if (newVal) {
					this.keyword = ''
				}
			}
		},
		onShow() {
			if (this.type !== '0') {
				this.open()
			}
		},
		created() {

		},
		methods: {
			changeInput(e) {
				this.$emit('getQueryInfo', e)
			},
			handleClear(e) {

				console.log('handleClear', e);
			},
			open() {
				if (!uni.getStorageSync('city') && !uni.getStorageSync('district')) {
					uni.getSystemInfo({
						success: (res) => {
							if (!res.locationEnabled || !res.locationAuthorized) {
								uni.showModal({
									content: '检测到您没打开手机系统定位权限，请确保手机系统定位已开启',
									confirmText: "确认",
									showCancel: false,
									success: (res) => {
										if (res.confirm) {
											this.getUserLocation();
										} else {
											console.log('取消');
											return false;
										}
									}
								})
							} else {
								this.getUserLocation()
							}
						}
					})
				}
			},
			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);
						uni.setStorageSync('latitude', res.latitude);
						uni.setStorageSync('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);
						uni.getSystemInfo({
							success: (res) => {
								if (!res.locationEnabled || !res.locationAuthorized) {
									uni.showModal({
										content: '检测到您没打开手机系统定位权限，请确保手机系统定位已开启',
										confirmText: "确认",
										showCancel: false,
										success: (res) => {
											if (res.confirm) {
												// uni.openSetting({
												// 	success: (res) => {
												// 		console.log(res);
												that.getUserLocation();
												// }
												// })
											} else {
												console.log('取消');
												return false;
											}
										}
									})
								} else {
									that.getUserLocation()
								}
							}
						})
					},
				});
			},
			//点击轮播图
			handleSwiperList(currentNum, bannerURL) {
				const item = bannerURL[currentNum]
				uni.navigateTo({
					url: item.link + `?id=${item.param}&type=${item.type}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.input-and-swiper-root {
		position: relative;
		z-index: 2;
	}

	.search-box {
		position: absolute;
		z-index: 1;
		left: 50%;
		width: 84.6%;
		transform: translateX(-50%);

		.search-box-input {
			border-radius: 12rpx;
			margin-top: 20rpx;
			background-color: #fff;
			opacity: 0.85;

			.u-border {
				border: none;

				.u-input__content {
					height: 62rpx;
					border-radius: 12rpx;
					background-color: #fff;

					.u-input__content__field-wrapper__field {
						font-size: 26rpx !important;
					}
				}
			}
		}
	}

	.position {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #232323;
		line-height: 33rpx;
	}

	.u-swiper {
		border-radius: 0 !important;

		.u-swiper__wrapper__item__wrapper__image {
			border-radius: 0 !important;
		}
	}
</style>