quna/pages/index/detail.vue

<template>
	<view class="detail">
		<view class="contant">


			<view class="title">
				<text>{{doEmpty(detail.name)}}</text>
				<!-- <text class="share" @click="history">历史信息</text> -->
			</view>
			<view class="update">
				更新时间<text style="margin: 0 5px;">{{doEmpty(detail.updated_at)}}</text>
				({{detail.user ? detail.user.name :'--'}}贡献上传)
			</view>
			<view class="distance">
				<text>距你当前位置{{distance<1000?distance:(distance/1000).toFixed(1)}}{{distance<1000?'m':'km'}}</text>
				<view class="daohang" @click="goThere">导航去那</view>
			</view>
			<view class="time">
				<u-icon name="clock-fill" color='#D1D1D1'></u-icon><text style="color: #FF9C1A; " class="time-text">
					{{detail.time ? detail.time.replace(/\n/g," ") : '--'}}</text>
			</view>
			<view class="time">
				<u-icon name="map-fill" color='#D1D1D1'></u-icon><text class="time-text">
					{{doEmpty(detail.area_name)}}{{doEmpty(detail.street_name)}}{{doEmpty(detail.address)}}</text>
			</view>
			<!-- -->

			<view class="_image" v-if="detail.cover">
				<image :src="detail.cover ? detail.cover :'../../static/image/image.jpg'" mode="widthFix"
					@click="bigImage"></image>
				<view class="image-tip">
					图片点击可放大
				</view>
			</view>
			<view class="empty" v-else style="padding-top:35px;">
				<image src="../../static/image/empty.png" mode="widthFix" @click="bigImage"></image>
				<view class="empty-text">
					暂无照片
				</view>
			</view>

		</view>
		<view class="contant_1">
			<view class="pinglun">
				<view class="pl-title">
					<u-icon name="chat" color="#000000" size="36"></u-icon><text
						style="color: #000000; font-size: font-size: 14px;margin-left: 5px;margin-right: 5px;">评论留言区</text><text
						style="color: #BFBFBF; font-size: font-size: 12px;;">您的留言评论对他人非常重要！</text>
				</view>
			</view>

			<view class="button-list">
				<view class="button" style="background-color: #2680EB;">
					信息真实有效 {{doEmpty(detail.good_nums)}}
				</view>
				<view class="button" style="background-color:#F3A948;">
					信息有误 {{doEmpty(detail.bad_nums)}}
				</view>
				<view class="button" style="background-color:#EF7E7E;">
					地点不存在 {{doEmpty(detail.report_nums)}}
				</view>
			</view>

			<scroll-view :class="[detail.cover?'scroll_yes':'scroll_no']"  scroll-y="true" @scrolltolower="loadMore" v-if="list.length>0">
				<view class="list">
					<view class="list-item" v-for="(item,index) in list" :key='index'>
						<view class="dian">

						</view>
						<view class="item-right">
							<view class="list-time">
								{{item.created_at}}
							</view>
							<view class="list-text" v-if="item.type==1">
								{{item.user.name}} <text style="margin-left: 10px;">鉴定为信息真实有效！</text>
							</view>
							<view class="list-text" v-if="item.type==2">
								{{item.user.name}} <text style="margin-left: 10px;">鉴定为信息有误！</text>
							</view>
							<view class="list-text" v-if="item.type==4">
								{{item.user.name}} <text style="margin-left: 10px;">鉴定为该地点不存在！</text>
							</view>
						</view>

					</view>
				</view>

			</scroll-view>
			<view class="empty" v-else>
				<image src="../../static/image/empty.png" mode="widthFix"></image>
				<view class="empty-text">
					暂无数据
				</view>
			</view>


		</view>
		<view class="do-commit">
			<view class="buttom" @click="doCommit">
				我要发表意见<u-icon name="edit-pen-fill"></u-icon>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" width="580rpx" height="300px">
			<view class="prop-title">谢谢您,您的意见能帮助到很多人！</view>
			<view class="select-button">
				<u-radio-group v-model="select" @change="radioGroupChange" :wrap='true' active-color="#2680EB">
					<u-radio v-for="(item, index) in selectList" :key="index" :name="item.value">
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<view class="prop-button" @click="sureCommit">
					提交<u-icon name="order"></u-icon>
				</view>

			</view>
			<view class="prop-tip">
				温馨提示：如果恶意上传无用信息，将永久封禁账号
			</view>



		</u-popup>
		<u-popup v-model="bigPicture" mode="center" border-radius="14" width="300px" closeable="true">
			<image :src="detail.cover" mode="widthFix"></image>
		</u-popup>
		<view class="share">
			<button hover-class='none' class="shareBtn" type="default" data-name="shareBtn" open-type="share" />
		</view>
		<view class="tips" @click="shuoming = true">
			<image src="../../static/image/tip.png" mode=""></image>
			<view class="tips_text">
				说明
			</view>
		</view>
		<u-popup v-model="shuoming" 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>
	export default {
		data() {
			return {
				shuoming: false,
				detail: '',
				good: false,
				bad: false,
				report: false,
				show: false,
				body: '',
				weihu: '',
				bigPicture: false,
				last: false,
				list: [],
				page: 1,
				select: 0,
				selectList: [{
						name: '信息真实有效',
						value: 0
					},
					{
						name: '信息有误',
						value: 1
					},
					{
						name: '地点不存在',
						value: 2
					}
				],
				distance: '',
				id: ''
			}
		},
		onLoad(options) {
			this.page = 1
			this.list = []
			this.last = false
			console.log(options)
			let slug = options.slug

			this.distance = options.distance
			this.id = options.id
			this.getDetail(slug)
			this.getComit()


		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.last = false
			this.getComit()
		},
		methods: {
			//获取用户信息

			getUserProfile(e) {
				// 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						let userInfo = res.userInfo
						this.tongBu(userInfo)
					}
				})
			},
			//同步
			tongBu(data) {
				this.$u.post('/base/auth/weapp/user-info-sync', data).then(res => {
					console.log(res, 'opopop')
					this.show = true
					this.$u.vuex('vuex_user', res.data);
				})
			},
			//加载更多
			loadMore() {
				console.log(this.last,'this.last')
				if (!this.last) {
					this.page++
					this.getComit()
				}else{
					uni.showToast({
						title: '暂无更多',
						icon: 'none'
					})
				}
				
			},
			//评论列表
			getComit(id) {
				this.$u.get('/qunali/record', {
					id: this.id,
					page:this.page
				}).then(res => {
					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)

					}
					uni.stopPullDownRefresh()
				})
			},
			//历史信息
			history() {
				uni.navigateTo({
					url: './history?slug=' + this.detail.slug
				})
			},
			//图片放大
			bigImage() {
				this.bigPicture = true
			},
			//判断数据为空
			doEmpty(value) {
				if (value || value == 0) {
					return value
				} else {
					return '--'
				}
			},
			getDetail(slug) {
				this.$u.get('/qunali/info', {
					slug: slug
				}).then(res => {
					console.log(res, '详情')
					this.detail = res.data.point
					this.weihu = res.data.preserve
				})
			},
			//有用
			doGood() {
				this.$u.get('/qunali/good', {
					id: this.detail.id
				}).then(res => {
					this.show = false
					this.detail.good_nums++
					this.getComit()

				})
			},
			//无用
			doBad() {
				let that=this
				this.$u.get('/qunali/bad', {
					id: this.detail.id
				}).then(res => {
					this.show = false
					this.detail.bad_nums++
					uni.showModal({
						title: '提示',
						content: '诚邀您对这条信息进行修改',
						cancelText: '拒绝',
						confirmText: '去修改',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '../help/index?slug=' + that.detail.slug
								})
							}
							if (res.cancel) {
								that.getComit()
							}
						}
					})
				})
			},
			// showProp() {
			// 	this.show = true
			// 	this.body = ''
			// },
			//举报
			doReport() {
				this.$u.post('/qunali/report', {
					id: this.detail.id,
					body: this.body
				}).then(res => {

					this.detail.report_nums++
					this.show = false
					this.getComit()
				})
			},
			//去那
			goThere() {
				let address = this.detail.area_name + this.detail.street_name + this.detail.address
				uni.openLocation({
					// 传入你要去的纬度
					latitude: this.detail.lat,
					// 传入你要去的经度
					longitude: this.detail.lng,
					// 传入你要去的地址信息 不填则为空
					address: address,
					// 缩放大小
					scale: 18,
					success: function() {
						console.log('成功的回调success');
					}
				})

			},
			//去修改
			goChange() {
				uni.reLaunch({
					url: '../help/index?slug=' + this.detail.slug
				})
			},

			//分享好友
			shareFriend() {

			},
			//doCommit
			doCommit() {
				let that = this
				let user = this.vuex_user.is_sync_info
				if (user == 1) {
					that.show = true
				} else {
					that.getUserProfile()
				}


			},
			//确定提交
			sureCommit() {
				if (this.select == 0) {
					this.doGood()
				}
				if (this.select == 1) {
					this.doBad()
				}
				if (this.select == 2) {
					this.doReport()()
				}
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.detail.name,
				path: `/pages/index/detail?slug=${this.detail.slug}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty {
		padding-top: 60px;
		text-align: center;

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

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

	.do-commit {
		padding: 8px 0;
		position: fixed;
		background-color: #F5F5F5;
		width: 100%;
		bottom: 0;
		z-index: 9999;

		.buttom {
			height: 40px;
			border-radius: 18px;
			line-height: 40px;
			background-color: #10C08C;
			text-align: center;
			margin: 0 auto;
			color: #FFFFFF;
			width: 90%;

		}



	}

	::v-deep {
		.u-radio {
			margin-bottom: 10px !important;
		}
	}

	.detail {
		background: #F8F8F8;
	}

	.go-there {
		height: 33px;
		width: 33px;
		border-radius: 50%;
		background-color: #16BA63;
		position: fixed;
		right: 20px;
		background-image: url(../../static/image/go.png);
		background-position: center;
		background-size: 100%;
		bottom: 15%;
	}

	.go-change {
		height: 33px;
		width: 33px;
		border-radius: 50%;
		background-color: #16BA63;
		position: fixed;
		right: 20px;
		background-position: center;
		background-size: 100%;
		text-align: center;
		line-height: 33px;
		bottom: 8%;
	}

	.contant,
	.contant_1 {

		padding: 12px;
		background-color: #FFFFFF;
		.scroll_yes{
			height: calc(100vh - 422px);
		}
		.scroll_no{
			height: calc(100vh - 400px);
		}
	}

	.contant_1 {
		padding-bottom: 70px;
		margin-top: 5px;
	}

	.title {
		font-size: 18px;
		color: #333333;
		font-weight: bold;

		.share {
			display: inline-block;
			margin-left: 12px;
			color: #16BA63;
			background: #C7EFDA;
			padding: 3px;
			font-size: 12px;
			border-radius: 3px;
		}

	}

	.update {
		font-size: 12px;
		font-weight: bold;
		color: #6D6D6D;
		line-height: 12px;
		margin-top: 6px;
	}

	.distance {
		font-size: 14px;
		color: #333333;
		margin-top: 8px;

		text {
			display: inline-block;
			margin-right: 10px;
			line-height: 20px;
			// height: 20px;
		}

		.daohang {
			display: inline-block;
			vertical-align: middle;
			width: 89px;
			padding-right: 15px;
			background-image: url(../../static/image/fly.png);
			background-repeat: no-repeat;
			background-size: 12px 10px;
			background-position: 85% center;
			height: 20px;
			background-color: #10C08C;
			font-size: 12px;
			font-weight: bold;
			border-radius: 100px 100px 100px 100px;
			color: #FFFFFF;
			line-height: 20px;
			text-align: center;
		}
	}

	.time {
		font-size: 13px;
		margin-top: 13px;
		font-weight: 400;
		color: #9F9F9F;
		margin-top: 8px;
		display: flex;



	}

	.time-text {
		display: inline-block;
		vertical-align: top;
		margin-left: 8px;
	}

	._image {
		position: relative;
		margin-top: 23px;
		overflow: hidden;
		height: 194px;
		width: 100%;
		border-radius: 12px;

		image {
			width: 100%;
		}

		.image-tip {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 30px;
			line-height: 30px;
			font-size: 20px;
			color: #FFFFFF;
		}
	}

	.posi {
		font-size: 18px;
		font-weight: 400;
		color: #000000;
		margin-top: 32px;
	}

	.button-list {
		margin-top: 19px;
		margin-bottom: 25px;


		.button {
			display: inline-block;
			vertical-align: middle;
			padding: 3px 10px;
			border-radius: 3px;

			color: #FFFFFF;
			font-size: 12px;
			margin-right: 10px;


		}


	}

	.footer {
		margin-bottom: 15px;

		.tip {
			margin-bottom: 7px;
			border-radius: 3px;
			border: 1px solid #707070;
			padding: 3px 8px;
			display: inline-block;
			color: #707070;
			font-size: 13px;
		}

		.text,
		.title {
			line-height: 22px;
			font-size: 13px;
			color: #707070;
		}
	}

	button {}

	.footer-share {
		margin: 0 auto;
		width: 145px;
		padding: 7px 0;
		background: #16BA63;
		line-height: 29px !important;
		border-radius: 10px;
		text-align: center;
		border: 1px solid #16BA63;
		font-size: 16px;
		color: #FFFFFF;
		margin-top: 24px;
		margin-bottom: 20px;
	}

	.prop-title {
		padding: 15px 20px;
		background-color: #10C08C;
		color: #fff;
		text-align: center;
	}

	.select-button {
		padding: 30px 30px 0;

	}

	.prop-tip {

		font-size: 10px;
		margin-top: 13px;
		text-align: center;
		color: #666666;
		line-height: 28px;

	}

	.prop-text {
		margin: 0px 20px;
	}

	.prop-button {


		margin-top: 10px;
		padding: 5px 0;
		background: #10C08C;
		line-height: 32px !important;
		border-radius: 30px;
		text-align: center;
		border: 1px solid #16BA63;
		font-size: 14px;
		color: #FFFFFF;
		margin-bottom: 10px;
	}

	.list {


		.list-item {
			padding-left: 5px;

			position: relative;

			.item-right {
				// margin-top: 5px;
				border-left: solid 2px #10C08C;
				padding-bottom: 20px;
				padding-left: 8px;
			}

			.list-time {
				font-size: 14px;
				color: #FF9C1A;

			}

			.list-text {
				font-size: 14px;
				color: #7F7F7F;
			}
		}

		.dian {
			position: absolute;
			height: 12px;
			width: 12px;
			top: 0px;
			left: 0px;
			background-color: #10C08C;
			border-radius: 50%;
			z-index: 80;
		}

	}

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

		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: 64px;
		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>