learning-system-mobile/pages/plus/feedback.vue

<template>
	<!--提意见，反馈意见-->
	<view>
		<u-toast ref="messager"></u-toast>
		<!-- <page-title :showBack="true">提意见</page-title> -->
		<view class="feed-box" v-if="isShow">
			<!-- <page-title :showBack="true">提意见</page-title> -->
			<!-- <page-add-title :showBack="true">提意见</page-add-title> -->
			<view class="feed-title">
				<text class="title-left" @click="toBack()">取消</text>
			<!-- 	<text class="title-con">提意见</text> -->
				<text class="title-right" @click="goSubmit()">提交</text>
			</view>
			<view class="content">
						<view class="" style="display: flex;margin-bottom: 10upx;">
							<u-button class="content-text" text="内容相关" @click="isClick('课程问题')" :class="{'active':info.type=='课程问题'}" style="margin-right: 10upx;"></u-button>
							<u-button class="content-text" text="平台使用" @click="isClick('系统问题')" :class="{'active':info.type=='系统问题'}" style="margin-left: 10upx;"></u-button>
							<u-button class="content-text" text="其他" @click="isClick('系统问题')" :class="{'active':info.type=='系统问题'}" style="margin-left: 10upx;"></u-button>
						</view>
						<u--textarea :height="300" v-model="info.content" placeholder="请尽量详细描述您的问题，管理员将会及时对您的问题进行反馈，您可以在消息中查看管理员的反馈。"></u--textarea>
			</view>
		</view>
			<view class="sub-box"  v-else>
				<page-title :showBack="true">意见详情</page-title>
				<view class="sub-success"  style="margin-top: 20px;">
					<view class="sub-text">{{result.content}}</view>
					<view class="sub-bar">
						<view class="bar-time">{{result.sysCreateTime}}</view>
					<!-- 	<view class="bar-right" style="display: flex;">
							<u-avatar class="u-img" v-if="authorInfo.avatar==''" :size="20" shape="square" icon="account"></u-avatar>
							<u-avatar class="u-img" v-else :size="20" shape="square" :src="authorInfo.avatar"></u-avatar>
							<text style="font-size: 20rpx;color: #666666;">{{result.sysCreateBy}}</text>
						</view> -->
						<author-info :name="result.sysCreateBy" :avatar="authorInfo.avatar"></author-info>
					</view>
					<view class="bar-cor">
					</view>
					<view class="bar-bon">
						<u-icon name="checkmark-circle" color="#489f6e" size="18" class="bon-icon"></u-icon>
						<text class="bon-text">感谢您宝贵的意见</text> 
					</view>
				</view>
		</view>
	</view>
	
</template>

<script>
	import apiFeedback from '@/api/modules/feedback.js'
	import apiUser from '@/api/system/user.js'
	export default {
		data() {
			return {
				isShow:true,
				info: {
					type: '课程问题',
					content: ''
				},
				authorInfo:{aid:'',name:'',code:'',orgInfo:''},
				result:{},
				typesShow: false,
				index: 0
			}
		},

		methods: {
			isClick(type) {
				this.info.type = type;
			},
			toBack(){
				uni.navigateBack();
			},
			goSubmit() {
				if(this.info.type == '') {
					this.$refs.messager.show({message:'请选择意见类型!',type:'warning'});
					return;
				}
				if(this.info.content == '') {
					this.$refs.messager.show({message:'请输入问题描述!',type:'warning'});
					return;
				}
				uni.showLoading({title:'提交中...'})
				apiFeedback.save(this.info).then(rs=>{
					if(rs.status==200){
						this.result = rs.result;
						this.loadUserInfo(rs.result.sysCreateAid)
						uni.hideLoading()
						this.isShow = false;
						// uni.redirectTo({
						// 	url:'/pages/resource/qaDetail?id='+rs.result.id
						// })
					}else{
						this.$refs.messager.show({message:rs.message,type:'error'});
					}
				})
			},
			loadUserInfo(uid){
				apiUser.getByIds([uid]).then(res=>{
				  if(res.status==200){
					this.authorInfo=res.result[0];
				  }
				})
			},
			hideKeyboard() {

			},
			chooseType(e) {
				this.info.qtype = e.name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-textarea{
		margin: 50upx 10upx;
		height: 748upx;
		border-radius: 12upx;
		border: 1px solid rgba(151,151,151,0.18);
	}
	.u-img{
		vertical-align: middle;
		margin-right: 10upx;
	}
	
	.content-text{
		border: none;
		font-size: 36upx;
		color: #666;
		font-weight: 400;
	}
	.active{
		color: #333;
		font-weight: 500;
		font-size: 36upx;
	}
	.sub-box{
		// padding: 20rpx;
		background-color: #fff;
		.sub-success{
			.sub-title{
				font-size: 40rpx;
				font-weight: 500;
				line-height: 45rpx;
				margin-bottom: 10rpx;
				padding: 20rpx;
			}
			.sub-text{
				font-size: 34rpx;
				line-height: 50rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				font-weight: 500;
				font-family: Source Han Sans CN;
			}
			.sub-bar{
				display: flex;
				justify-content: space-between;
			    padding: 20rpx;
				// border-bottom: 2rpx solid #ccc;
				.bar-time{
					font-size: 26rpx;
					color: #ccc;
				}
			}
			.bar-reply{
				text-align: center;
				padding: 30rpx;
				.field-icon{
					display: block;
					width: 40rpx;
					margin: 0 auto;
				}
			}
			.bar-cor{
				height: 20rpx;
				background-color: #ebebeb;
			}
			.bar-bon{
				text-align: center;
				height: 600rpx;
				margin-top: 80rpx;
				.bon-icon{
					display: inline-block;
					
				}
				.bon-text{
					display: inline-block;
					margin-right: 10rpx;
					font-family: Source Han Sans CN;
				}
			}
		}
	}
	.feed-box{
		height: 100vh;
		background-color: #fff;
		.feed-title{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			// background-color: #fff;
			.title-left{
				color: #7F7F7F;
				font-size: 32upx;
				font-family: Source Han Sans CN;
				// font-weight: bold;
				color: #7F7F7F;
				line-height: 36rpx;
			}
			.title-con{
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: #0D0D0D;
			}
			.title-right{
				// position: absolute;
				// right: 18rpx;
				color: #588AFC;
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 36rpx;
			}
		}
	}
	.row {
		margin-bottom: 50upx;
	}

	.btn {
		padding: 0px;
	}
</style>