learning-system-mobile/pages/my/myQa.vue

<template>
	<view class="my-qa-page">
		<u-toast ref="articleToast"></u-toast>
		<page-title :showBack="true">我的问答</page-title>
		<view class="top-content">
			<view>
				<u-search 
				:clearabled="true"
				@search="findData(true)"
				@clear="findData(true)"
				placeholder="搜索" 
				:height="36"
				v-model="keyword" 
				:showAction="false">
				</u-search>
			</view>
		</view>
		<view class="my-qa-tabs">
			<view class="tabs-text" @click="tabsClick(1)" :class="{'active':active ==1}"><text style="z-index: 999;">提问</text><text v-show="active ==1" class="active-line"></text></view>
			<view class="tabs-text" @click="tabsClick(2)" :class="{'active':active ==2}">回答<text v-show="active ==2" class="active-line"></text></view>
		</view>
		<view class="my-qa-list" v-show="active ==1">
			<view class="my-qa-index" v-for="put in putList.list" :key="put.id" @click="toDetail(put)">
				<view class="artical-box-top">
					<view style="" class="artical-tit">
						<text class="qa-basic qa-solve" v-if="put.isResolve">[已解决]</text>
						<text class="qa-basic" v-else >[待解决]</text>
						<!-- <text class="qa-basic qa-unSolve">【待解决】</text> -->
						{{put.title}}
					</view>
				</view>
				<view class="qa-author-time">
					<view class="author-info">
						<author-info :avatar="put.avatar" :name="put.name" :sex="put.sex"></author-info>
					</view>
					<view class="qa-time">
						{{put.sysCreateTime}}
					</view>
				</view>
				<view class="qa-text">
					<view v-html="highlightedFilter(put.content)"></view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 20upx;">
					<view style="display: flex;">
						<view class="rowbtn" @click.stop="toEdit(put)">
							<image class="btn-img" src="../../static/images/icon/edit.png" size="24"></image><text class="btn-text">编辑</text>
						</view>
						<view class="rowbtn" style="margin-left: 12upx;" @click.stop="del(put)">
							<image class="btn-img" src="../../static/images/icon/del.png" size="24"></image><text class="btn-text">删除</text>
						</view>
					</view>
					<view class="">
						<interact-bar :comments="false" :answers="true"  :views="false" :data="put"></interact-bar>
					</view>
				</view>
			</view>
			
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	 import apiStat from '@/api/phase2/stat.js';
	 import apiQa from '@/api/modules/qa.js';
	 import apiUser from '@/api/system/user.js';
	 export default {
		 computed: {
		 	...mapGetters(['userInfo']),
	
		 },
		 data() {
			 return {
				 loadStatus:'more',
				 active:1,
				 keyword:'',
				 uCoinRecord:[],
				 uinfo: {
				           uCurrency: 0 ,// 用户累计U币
						   timestamp:'',
				         },
				putList:{
					pageIndex:1,
					pageSize:10,
					list:[],
					count:0,
				}
			 }
		 },
		 onPullDownRefresh() {
		 	this.onReachBottom();
		 },
		 async onReachBottom() {
		 	if (this.putList.list.length < this.putList.count) {
		 		this.loadStatus = 'loading'; //more,loading,noMore
		 		this.putList.pageIndex++;
		 		await this.findData(false);
		 		this.loadStatus = 'more';
		 	} else {
		 		this.loadStatus = 'noMore';
		 	}
		 },
		 mounted() {
		   this.findData(true)
		 },
		 methods:{
			 toDetail(item) {
			 	uni.navigateTo({
			 		url: '/pages/resource/qaDetail?id=' + item.id
			 	});
			 },
			 toEdit(item){
			 	uni.navigateTo({
			 		url:'/pages/plus/editQuestion?value='+JSON.stringify(item)
			 	})
			 },
			 del(item){
			 	const $this=this
			 	uni.showModal({
			 		title: '提示',
			 		content: '确认删除这条提问吗？',
			 		success: function (res) {
			 			if (res.confirm) {
			 				apiQa.del(item.id).then(res=>{
			 					if(res.status=200){
			 						$this.$refs.articleToast.show({message:'删除成功',type:'success'});
			 						setTimeout(()=>{
			 							$this.findData(true)
			 						},1000)
			 					}else{
			 						$this.$refs.articleToast.show({message:'删除失败，请稍后再试',type:'error'});
			 					}
			 				})
			 			} else if (res.cancel) {
			 			}
			 		}
			 	});
			 },
			 findData(flag) {
			 	//是否重置列表
			 	if (flag) {
			 		this.putList.list = [];
			 	}
			 	uni.showLoading({ title: '加载中...' });
			 	//查询条件
			 	let params = {
			 		pageIndex: this.putList.pageIndex,
			 		pageSize: this.putList.pageSize,
			 		isResolve: this.putList.isResolve
			 	};
			 	if (this.keyWord) {
			 		params.keyWord = this.keyWord;
			 	}
			 	apiQa.queryQuestion(params).then(async rs => {
			 		if (rs.status == 200) {
			 			if (rs.result.list.length != 0) {
			 				this.putList.count = rs.result.count;
			 				let userIds = [];
			 				rs.result.list.forEach(item => {
			 					this.putList.list.push(item);
			 					userIds.push(item.sysCreateAid);
			 				});
			 				await this.loadUserInfos(rs.result.list, userIds);
			 			}
			 		}
			 		uni.hideLoading();
			 	}).catch((err)=>{
					uni.hideLoading();
				});
			 },
			 loadUserInfos(list, userIds) {
			 	const noReapetIds = [...new Set(userIds)];
			 	apiUser.getByIds(noReapetIds).then(res => {
			 		if (res.status == 200) {
			 			list.forEach(item => {
			 				res.result.some(author => {
			 					if (author.aid == item.sysCreateAid) {
			 						let { aid, avatar, name, orgInfo, code,sex } = author;
			 						// if (!avatar) {
			 						// 	avatar = this.$config.fileUrl + avatar;
			 						// }
			 						item.name = name;
			 						item.aid = aid;
			 						item.orgInfo = orgInfo;
			 						item.code = code;
			 						item.avatar = avatar;
									item.sex = sex;
									
			 						return true;
			 					}
			 					return false;
			 				});
			 			});
			 		} else {
			 			uni.showToast({
			 				title: '获取数据失败',
			 				icon: 'none'
			 			});
			 		}
			 		//原本想用async await等数据请求完成后使用hideLoading,但是页面渲染需要时间，关闭太早了，有考虑用nexeTick()
			 		setTimeout(function() {
			 			uni.hideLoading();
			 		}, 1000);
			 	});
			 },
           findList(){
			   
		   },
		   tabsClick(tab) {
			   this.active=tab
		   },
		   highlightedFilter(value) {
		   	if (value.indexOf(this.copyKeyWord) !== -1 && this.copyKeyWord !== '') {
		   		return value.replace(this.copyKeyWord,`<span class='highlighted'>${this.copyKeyWord}</span>`);
		   	}else{
		   		return value
		   	}
		   },
	
		 }
		 
	 }
</script>

<style scoped lang="scss">
	.my-qa-page{
		padding: 36upx;
		background-color: #fff;
		.rowbtn{
			padding: 5px 8px 0px 0; 
			height: 20px;
			border-radius: 10upx;
			.btn-img{
				width: 16px;
				height: 18px;
				vertical-align: middle;
			}
			.btn-text{
				margin-left: 12upx;
				font-size: 24upx;
				color: #999999;
			}
		}
		.my-qa-tabs{
			display: flex;
			margin-top: 40upx;
			.tabs-text{
				margin: 0 44upx 0 4upx;
				font-size: 32upx;
				color: #666666;
			}
			.active{
				font-size: 32upx;
				font-weight: 600;
				color: #333333;
				position: relative;
				.active-line{
					z-index: 1;
					position: absolute;
					display: inline-block;
					bottom: -4upx;
					left: -4upx;
					width: 70upx;
					height: 10upx;
					background: linear-gradient(270deg, #46ACFF 0%, #1E68F9 100%);
					border-radius: 6upx;
				}
			}
		}
		.my-qa-list{
			margin-top: 12upx;
			.my-qa-index{
				padding-bottom: 36upx;
				border-bottom: 20upx solid #F9F9F9;
			}
			.artical-box-top {
				padding: 36upx 0;
				font-weight: 600;
				line-height: 50upx;
				.artical-tit{
					word-break:break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;-webkit-line-clamp: 2; 
					font-size: 36upx;
					color: #333333;
				}
				
			}
			.qa-author-time{
				display: flex;
				justify-content: space-between;
				margin-bottom: 34upx;
				.qa-time{
					margin-top: 14upx;
				}
			}
			.qa-text{
				font-size: 28upx;
				color: #666666;
				word-break:break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical; 
				display: -webkit-box;-webkit-line-clamp: 2; 
			}
			.qa-time{
				font-size: 24upx;
				color: #999999;
			}
		}
	}
</style>