quna/pages/index/index.vue

<template>
	<view class="index_content">
		<view class="top">


			<view class="current_local" @click="changePosi">
				<image src="../../static/image/localw.png" mode=""></image>
				<text>{{local?local:'获取位置失败'}} ></text>
			</view>



			<view class="search">
				<view class="search_wrap">
					<image src="../../static/image/search.png" mode=""></image>
					<input type="text" @confirm="searchActive" v-model="searchValue" value="" placeholder="请输入关键字"
						placeholder-style="color:#B8B5B5;" />
					<text @click="searchActive" class="btn_search">查询</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="list_wrap">
				<view class="empty" v-if="list.length<1">
					<image src="../../static/image/empty2.png" mode="widthFix"></image>
					<view class="empty-text">
						暂无内容！
					</view>
				</view>
				<view class="item" v-for="(item,index) in list" @click="detail(item)">

					<image class="left" :src="item.cover ? item.cover :'../../static/image/image.jpg'"
						mode="aspectFill"></image>

					<view class="detail">
						<view class="name"> <text class="title">{{item.name}}</text><text class="distance">
								{{item.distance<1000?item.distance:(item.distance/1000).toFixed(1)}}{{item.distance<1000?'m':'km'}}
							</text>
						</view>
						<view class="time">
							<image src="../../static/image/clock.png" mode="widthFix"></image>
							<text>{{item.time}}</text>
						</view>
						<view class="local">
							<image src="../../static/image/local_item.png" mode=""></image>
							<text>{{item.address}}</text>
							<view class="go_wrap" @click.stop="go(item)">
								<image class="go" src="../../static/image/nav.png" mode=""></image>
								<view class="teps">
									去这里
								</view>
							</view>
						</view>
						<view class="other">

							<view class="other_item" @click.stop="good(item.id)">
								<image src="../../static/image/good_item.png" mode=""></image> {{item.good_nums}}
							</view>
							<view class="other_item" @click.stop="bad(item)">
								<image src="../../static/image/bad_item.png" mode=""></image> {{item.bad_nums}}
							</view>
							<view class="other_item">
								<image src="../../static/image/eye.png" mode=""></image> {{item.view_nums}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="share">
			<button hover-class='none' class="shareBtn" type="default" data-name="shareBtn" open-type="share" />
		</view>
		<view class="tips" @click="show = true">
			<image src="../../static/image/tip.png" mode=""></image>
			<view class="tips_text">
				说明
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="20" width="580rpx">
			<view class="pop_wrap">
				<view class="title">
					说明
				</view>
				<view class="pop_content">
					<view class="" style="text-align: justify;">
						“去那”小程序只提供信息展示，数据均来自政府公开数据和用户主动上传。如果发现信息有误，请及时进入详情页修改信息或者联系我们。<text
							style="color:#10C08C ;">信息的准确性和时效性需要大家共同维护，转发分享，发表意见，帮助他人，快乐自己。</text>
					</view>
					<view class="" style="color: #FF9C1A;">
						温馨提示：前往核酸检测点，配合工作人员，佩戴口罩，注意个人防护。。
					</view>

					<view class="">
						如有其他问题请联系 xmbin@hopaheal.com
					</view>
					<view class="">
						“去那”小程序服务理念：为用户提供即时、准确的地点标签
					</view>


				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last: false,
				searchValue: '', //搜索
				lat: '',
				lng: '',
				name: '',
				address: '',
				curSysPosition: {},
				local: '',
				show: false
			}
		},


		async onLoad() {
			this.page = 1
			this.list = []
			this.last = false
			this.getInit()
		},

		async onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.last = false
			await this.getList()
			await uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			this.getList()
		},
		methods: {
			//初始化数据
			getInit() {
				let that = this
				let time = Math.round(new Date().getTime() / 1000).toString();
				let exp = this.vuex_exp
				uni.getLocation({
					type: 'wgs84',
					// geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log(res, '====')
						that.lat = res.latitude
						that.lng = res.longitude
						if (!that.vuex_token || (Number(time) == exp)) {
							uni.login({
								provider: 'weixin',
								success: (res) => {
									console.log(res, 'ppp')
									if (res.code) {
										let data = {
											appid: 'wxbf3a12d4b07dfcbf',
											code: res.code
										}
										that.$u.post('/base/auth/weapp/login', data).then(
											res => {
												that.$u.vuex('vuex_token', res.data.token);
												that.$u.vuex('vuex_session_key', res.data
													.session_key);
												that.$u.vuex('vuex_is_auth', res.data
													.is_auth);
												that.$u.vuex('vuex_user', res.data.user);
												that.$u.vuex('vuex_exp', res.data.exp)
												that.getList()
												that.getLocal()
											})
									}
								}

							})
						} else {
							that.getLocal()
							that.getList()
						}
					},
					fail: function() {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				});

			},
			//选择位置

			changePosi() {
				let that = this
				uni.getSetting({
					success: (res) => {
						console.log(res)
						if (!res.authSetting['scope.userLocation']) {
							uni.showModal({
								title:'提示',
								content:'您需要先授权位置信息才可进该项操作！',
								confirmText:'去授权',
								success: (res) => {
									if(res.confirm){
										uni.openSetting({
											success() {
												that.getInit()
											}
										})
									}
								}
							})
							
						}else{
							uni.chooseLocation({
								latitude: that.lat,
								longitude: that.lng,
								success: (res) => {
									console.log(res, 'popopopp--------')
									that.lat = res.latitude
									that.lng = res.longitude
									that.getLocal()
									// that.local=res.address
									that.list = []
									that.page = 1
									that.last = false
									that.getList()
								},
								fail: (res) => {
								}
							})
						}
					}
				})
			},
			//列表
			getList() {
				// console.log('=========list')
				let params = {
					lat: this.lat,
					lng: this.lng,
					page: this.page,
					per_page: 15,
					keyword: this.searchValue
				}
				if (!this.searchValue) {
					delete params.keyword
				}
				this.$u.get('/qunali',
					params
				).then(res => {
					console.log(res, 'ppp')
					let data = res.data.list
					console.log(res, 'course1')
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.list = this.list.concat(data)
						this.list = this.list.map(item => {
							item.time = item.time.replace(new RegExp('\n', 'g'), ' ') //去除字符串中的回车
							return item
						})
					}
				})
			},
			detail(item) {
				console.log('详情')
				uni.navigateTo({
					url: 'detail?slug=' + item.slug + '&id=' + item.id + '&distance=' + item.distance
				})
			},
			getLocal() {
				this.$u.get('/qunali/geocoder', {
					lat: this.lat,
					lng: this.lng
				}).then(res => {
					console.log(res, '-----------')
					let address = res.data.address ? res.data.address : ''
					this.local = res.data.area + res.data.street + address
				})
			},
			//点击搜索
			searchActive() {
				this.list = []
				this.page = 1
				this.last = false
				// console.log(this.searchValue, '用户点击了搜索')
				this.getList()
			},
			//清空搜索框
			clearActive() {
				this.list = []
				this.page = 1
				this.last = false
				this.getList()
				// console.log(this.searchValue, '用户点击了搜索---')
			},
			// 信息有用
			good(id) {
				this.$u.get('/qunali/good', {
					id: id,
				}).then(res => {
					uni.showToast({
						title: '点赞成功',
						duration: 2000
					})
					setTimeout(item => {
						this.list = []
						this.page = 1
						this.last = false
						this.getList()
					}, 1000)

				})
			},
			// 信息无用
			bad(item) {
				this.$u.get('/qunali/bad', {
					id: item.id
				}).then(res => {
					uni.showModal({
						title: '提示',
						content: '诚邀您对这条信息进行修改',
						cancelText: '拒绝',
						confirmText: '去修改',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '../help/index?slug=' + item.slug
								})
							} else {
								this.list = []
								this.page = 1
								this.last = false
								this.getList()
							}
						}
					})

				})
			},
			//导航
			go(item) {
				let address = item.area_name + item.street_name + item.address
				console.log(item, 'gogogogo')
				let longitude = item.lng
				let latitude = item.lat
				// let name = this.name //
				// let address = this.address //地址
				wx.openLocation({
					latitude,
					longitude,
					name: address,
					// address,
					scale: 18 //缩放比例
				})

			},
			onShareAppMessage(res) {
				return {
					title: '去那',
					path: '/pages/index/index'
				}
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #F8F8F8;
		position: relative;
	}


	.index_content {
		padding-bottom: 60px;

		.top {
			position: fixed;
			width: 100%;
			z-index: 2;

			.current_local {
				background-color: #10C08C;
				padding: 90px 10px 24px;
				font-size: 16px;
				font-weight: bold;
				color: #ffffff;
				display: flex;
				line-height: 24px;

				image {
					flex-shrink: 0;
					width: 24px;
					height: 24px;
					display: inline-block;
					margin-right: 3px;
				}

			}

			.search {
				margin-top: -12px;
				background-color: #ffffff;
				padding: 12px;
				border-top-right-radius: 12px;
				border-top-left-radius: 12px;
				z-index: 2;

				.search_wrap {
					background-color: #F8F5F5;
					border-radius: 20px;
					display: flex;
					align-items: center;
					padding: 6px 8px;
					height: 40px;

					image {
						flex-shrink: 0;
						width: 16px;
						height: 16px;
						margin: 0 10px;
					}

					input {
						width: 100%;
					}

					.btn_search {
						flex-shrink: 0;
						display: inline-block;
						background-color: #10c08c;
						color: #ffffff;
						height: 32px;
						line-height: 32px;
						padding: 0 19px;
						font-size: 14px;
						border-radius: 16px;
					}
				}
			}
		}

		.content {
			padding-top: 190px;

			.list_wrap {
				padding: 12px 12px 20px;

				.empty {
					padding-top: 60px;
					text-align: center;

					image {
						margin: 0 auto;
						width: 50%;
					}

					.empty-text {
						text-align: center;
						margin-top: 8px;
						color: #B5B5B5;
					}
				}

				.item {
					display: flex;
					// align-items: center;
					border-radius: 5px;
					position: relative;
					box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
					background-color: #ffffff;
					margin-bottom: 17px;


					.left {
						width: 81px;
						height: 104px;
						border-top-left-radius: 5px;
						border-bottom-left-radius: 5px;
						// margin-right: 11px;
						flex-shrink: 0;
					}

					.detail {
						width: calc(100% - 81px);
						height: 100%;
						padding: 7px 11px;
						// z-index: 2;

						.name {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 16px;
							font-weight: 400;
							color: #000000;
							z-index: 2;
							padding-bottom: 7px;

							image {
								width: 14px;
								height: 14px;
								margin-left: 8px;
							}

							.title {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								max-width: calc(100% - 40px);
							}

							.distance {
								color: #9F9F9F;
								font-size: 10px;
							}
						}

						.time {
							width: 100%;
							// height: 16px;
							display: flex;
							align-items: flex-start;

							image {
								width: 12px;
								height: 12px;
								margin-right: 6px;
								margin-top: 2px;
							}

							text {
								width: calc(100% - 20px);
								height: 16px;
								display: inline-block;
								color: #FF9100;
								font-size: 12px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.local {
							padding-top: 5px;
							font-size: 12px;
							font-weight: 400;
							color: #9F9F9F;
							display: flex;
							align-items: center;
							position: relative;

							image {
								width: 14px;
								height: 13px;
								margin: 0;
							}



							text {
								width: calc(100% - 50px);
								display: inline-block;
								margin-left: 5px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.go_wrap {
								text-align: center;
								position: absolute;
								right: 5px;
								top: 5px;

								.go {
									width: 20px;
									height: 20px;
									// margin-left: 5px;
								}

								.teps {
									font-size: 10px;
									font-weight: 400;
									color: #10C08C;
								}
							}
						}

						.other {
							font-size: 10px;
							font-weight: 400;
							color: #707070;
							padding-top: 9px;
							margin: 0 -8px;
							display: flex;

							.other_item {
								padding: 0 10px;
								display: flex;
								align-items: center;

								image {
									width: 12px;
									height: 12px;
									margin: 0 3px 0 0;
								}
							}
						}
					}

				}
			}

		}

		.share {
			position: fixed;
			z-index: 2;
			right: 7px;
			bottom: 80px;

			button {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				background-image: url(../../static/image/share.png);
				background-position: center;
				background-size: 100%;
				box-shadow: 0px 0px 6px rgba(16, 192, 140, 0.6);
				padding: 0 !important;
				margin: 0 !important;
				border: none !important;
				box-sizing: border-box;
			}

		}

		.tips {
			position: fixed;
			z-index: 2;
			right: 17px;
			bottom: 24px;
			width: 39px;
			height: 39px;
			background: #FFFFFF;
			box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 17px;
				height: 17px;
			}

			.tips_text {
				font-size: 9px;
				font-weight: bold;
				color: #858482;
				padding-top: 2px;
			}
		}

		.pop_wrap {
			.title {
				background-color: #10c08c;
				color: #fff;
				font-size: 18px;
				text-align: center;
				height: 40px;
				line-height: 40px;
			}

			.pop_content {
				padding: 15px 12px;

				view {
					margin-bottom: 10px;
				}
			}
		}
	}
</style>