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

<template>
	<view class="my-qa-page">
		<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">
			<view class="">
				<view class="artical-box-top">
					<view style="" class="artical-tit">
						<!-- <text class="qa-basic qa-solve" v-if="item.isResolve">[已解决]</text> -->
						<!-- <text class="qa-basic qa-unSolve" v-else >[待解决]</text> -->
						<text class="qa-basic qa-unSolve">【待解决】</text>
						<!-- {{item.title}} -->
						你能想到哪些柔性显示的应用场备份你能想到哪些柔性显示的应用场备份你能想到哪些柔性显示的应用场备份
					</view>
				</view>
				<view class="">
					<view class="">
						<!-- <author-info :avatar="item.avatar" :name="item.name" :info="item.orgInfo" :sex="item.sex"></author-info> -->
					</view>
					<view class="">
						2022/9/26 14:25
					</view>
				</view>
				<view class="qa-text">
					穿戴产品一般需要贴合人体不同部位，是需要柔性显示器件，如腕带显示，指显，臂显等，还可以贴合在曲···
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view style="display: flex;">
						<view class="rowbtn" @click="toEdit()">
							<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="del()">
							<image class="btn-img" src="../../static/images/icon/del.png" size="24"></image><text class="btn-text">删除</text>
						</view>
					</view>
					<view class="">
						<!-- <interact-bar :views="false" :data="item"></interact-bar> -->
					</view>
				</view>
			</view>
			
		</view>
	</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 {
				 active:1,
				 keyword:'',
				 uCoinRecord:[],
				 uinfo: {
				           uCurrency: 0 ,// 用户累计U币
						   timestamp:'',
				         },
				putList:{
					pageIndex:1,
					pageSize:10,
					list:[],
				}
			 }
		 },
		 mounted() {
		   this.findData(true)
		 },
		 methods:{
			 toEdit(item) {
				 
			 },
			 del(item) {
				 
			 },
			 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();
			 	});
			 },
			 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
		   }
	
		 }
		 
	 }
</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;
			.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-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; 
			}
		}
	}
</style>