XLJK-web/xinlijiankang-uniapp-main/pages/index/jiehuo.vue

<template>
	<view class="">
		<u-navbar :is-back="false" :border-bottom="false" :background="background">
			<view style="width: 100%;">
				<view class="fzctob" style="padding: 0 30rpx;">
					<image src="/static/index/inua.png"
						style="width: 24rpx;height: 24rpx;min-width: 24rpx;margin-right: 10rpx;" mode=""></image>
					<view class="jhuudd">
						<text>北京市</text>
					</view>
				</view>
			</view>
		</u-navbar>

		<view class="inbddwwer">
			<view class="fzctob inbddwddre">
				<image src="/static/index/ina1.png"
					style="width: 40rpx;height: 40rpx;min-width: 40rpx;margin-right: 12rpx;"></image>
				<input type="text" value="" placeholder-style="color: #CCCCCC;font-size: 28rpx;" placeholder="搜索你感兴趣的内容"
					v-model="search" @confirm="getlist" />
			</view>
		</view>
		<u-tabs :list="classifylist" :current="current" @change="change"></u-tabs>
		<view class="">
			<view class="fsxto jhkanuy" hover-class="none" v-for="(item,index) in list"
				:key="index" @click="gopl(item.id)">
				<view class="fzctob">
					<view class="jhuuimg">
						<image :src="item.avatarUrl"
							style="width: 88rpx;height: 88rpx;min-width: 88rpx;border-radius: 200rpx;" mode=""></image>
					</view>
					<view class="fsxto" style="width: 100%;margin-left: 12rpx;">
						<view class="flztoa">
							<text class="jhtxty">{{item.nickName}}</text>
							<text class="jhtxtya">{{$u.timeFormat(item.create_time, 'yyyy:mm:dd  hh:MM:ss')}}</text>
						</view>
						<view class="jhtxtyb">
							<text>{{item.note}}</text>
						</view>
					</view>
				</view>
				<view class="jhtxtyc">
					<text>{{item.content}}</text>
				</view>
				<view class="flztoa" style="margin-top: 30rpx;">
					<view class="fzctob">
						<image :src="item.is_like == 1?'/static/index/w1.png':'/static/index/w2.png'" style="width: 48rpx;height: 48rpx;min-width: 48rpx;" mode=""></image>
						<text class="shitxty">{{item.like_num}}</text>
						<view style="margin-left: 40rpx;">
							<image src="/static/index/w3.png" style="width: 48rpx;height: 48rpx;min-width: 48rpx;"
								mode=""></image>
						</view>
					</view>
					<!-- 					<view class="">
						<text class="shitxtya">2021.06.15</text>
					</view> -->
				</view>
			</view>

		</view>
		<view class="youjdje" @click="show = true">
			<image src="/static/index/inr2.png" style="width: 96rpx;height: 96rpx;min-width: 96rpx;" mode=""></image>
		</view>

		<view style="height: 120rpx;"></view>
		<view class="dibuboot">
			<navigator class="dibubootlb" url="../index/index" open-type="redirect" hover-class="none">
				<image src="/static/dibu/boa1.png" style="width: 48rpx;height: 48rpx;"></image>
				<text>首页</text>
			</navigator>
<!-- 			<navigator class="dibubootlb" url="../lecturer/wdzx" open-type="redirect" hover-class="none">
				<image src="/static/dibu/boa2.png" style="width: 48rpx;height: 48rpx;"></image>
				<text>咨询</text>
			</navigator>
			<navigator class="dibubootlb" url="../index/jiehuo" open-type="redirect" hover-class="none">
				<image src="/static/dibu/bob3.png" style="width: 48rpx;height: 48rpx;"></image>
				<text style="color: #374B6E">解惑</text>
			</navigator> -->
			<navigator class="dibubootlb" url="../lecturer/my" open-type="redirect" hover-class="none">
				<image src="/static/dibu/boa4.png" style="width: 48rpx;height: 48rpx;"></image>
				<text>我的</text>
			</navigator>
		</view>

		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="title">发表解惑</view>
			<view class="choicebox">
				<view :class="item.id == type_id?'item-a':'item'" v-for="(item,index) in classifylist" :key="index"
					@click="changeid(item.id)">{{item.name}}</view>
			</view>
			<textarea placeholder="请输入您的疑惑" v-model="content"></textarea>
			<view class="btn" @click="publish">发布疑惑</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#ffffff',
				},
				hhyanm: {
					color: '#FFFFFF',
				},
				search: '',
				show: false,
				classifylist: [],
				current: 0,
				list: [],
				content: '', //用户输入的内容
				user_id: '', //用户id
				type_id: '' //选择的分类
			}
		},
		onLoad() {
			this.user_id = uni.getStorageSync('id');
			this.getclassify();
		},
		methods: {
			change(index) {
				this.search = '';
				this.current = index;
				this.getlist();
			},
			changeid(id) {
				this.type_id = id
			},
			// 获取资讯列表
			getclassify() {
				this.$post({
					data: {
						do: 'getQuestionType'
					}
				}).then(res => {
					this.classifylist = res.data
					this.type_id = res.data[0].id
					this.getlist();
				})
			},
			//获取解惑列表
			getlist() {
				let that = this;
				this.$post({
					data: {
						do: 'SearchQuestionList',
						data: {
							search: that.search,
							type_id: that.classifylist[that.current].id,
							user_id: that.user_id
						}
					}
				}).then(res => {
					this.list = res.data
				})
			},
			//发表疑惑
			publish() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定发表吗？',
					success: function(res) {
						if (res.confirm) {
							that.$post({
								data: {
									do: 'AskQuestion',
									data: {
										content: that.content,
										user_id: that.user_id,
										type_id: that.type_id
									}
								}
							}).then(res => {
								uni.showToast({
									title: '发表成功'
								})
								that.content = '';
								that.show = false
								that.getlist();
							})
						}
					}
				});
			},
			gopl(id){
				uni.navigateTo({
					url:'./jiehuo-pl?id=' + id + '&user_id=' + this.user_id
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FAFAFA;
	}

	.title {
		width: 100%;
		text-align: center;
		font-size: 34upx;
		color: #000000;
		margin: 30upx auto;
	}

	.choicebox {
		width: 690upx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;

		.item {
			width: 160upx;
			height: 65upx;
			font-size: 28upx;
			background: #F4F4F4;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50upx;
			margin-right: 10upx;
			margin-bottom: 10upx;
		}

		.item-a {
			width: 160upx;
			height: 65upx;
			font-size: 28upx;
			background: #374B6E;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50upx;
			margin-right: 10upx;
			margin-bottom: 10upx;
		}
	}

	textarea {
		width: 690upx;
		height: 500upx;
		border-radius: 16upx 16upx 16upx 16upx;
		border: 2upx solid #CCCCCC;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 30upx;
		margin-top: 30upx;
	}

	.btn {
		width: 462upx;
		height: 96upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #374B6E;
		color: #ffffff;
		border-radius: 50upx;
		margin: 50upx auto;
	}
</style>