mabao/pages/common_tools/help_feedback/opinion1.vue

<template style=" background-color: #FFFFFF">
	<view style="height: 100%;width: 100%;background-color: #FFFFFF">
		<view style="width: 100vw;height: 100vh;">
			<view style="height: 20rpx;w^idth: 100%;background-color: #F6F6F6;"></view>
			<!-- 标题 -->
			<view class="title">请描述您遇到的问题</view>
			<!-- 问题列表 -->
			<view class="textArea">
				<view class="body">
					<textarea placeholder="请描述您遇到的问题" maxlength="200" @input="input" style="font-size: 28rpx;color: #666666;height: 250rpx;width: 100%;" />
					<view style="height: 68rpx;width: 100%;color:#999999;padding: 20rpx 30rpx;font-size: 28rpx;text-align: right;">
					<text>{{problem_lenght}}</text>/200
				</view>
			</view>
		</view>
		<view style="width: 100%;padding:40rpx 30rpx 0 30rpx;font-size: 26rpx;color: #999999;">请详细描述您的问题或建议，我们将及时跟你并解决。</view>
		<view class="footer">
			<view style="width: 100%;text-align: center;padding-bottom: 35rpx;">
				<text style="color: #999999;font-size: 24rpx;">如有疑问，请联系客服\n08:30-22:00</text>
			</view>
			<view class="cu-bar bg-white tabbar border shop" style="width: 100%;">
				<view class="submit" @click="next" style="background-color: #0B73B9; color: #FFFFFF; font-size: 32rpx;" >提交反馈</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				problem:'',
				problem_lenght:'0'
			}
		},
		methods:{
			//输入问题
			input(e){
				this.problem = e.detail.value
				this.problem_lenght = this.problem.length
				console.log(this.problem);
				console.log(this.problem_lenght);
			},
			next:async function(){
				if(this.problem_lenght>200){
					uni.showToast({
						title:"最多只能输入200个字符",
						icon:"none"
					})
					return false
				}
				let res = await this.$request.post("/api/v1/feedback/sumitFeedback",{
					content:this.problem
				})
				console.log(res)
				if(res.status == 0){
					uni.showToast({
						title:"提交成功",
						icon:"none",
						duration:1500
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				}else{
					uni.showToast({
						title:res.message,
						icon:"none",
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.title {
		background-color: #FFFFFF;
		height: auto;
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.textArea {
		height: auto;
		width: 100%;
		padding: 0 30rpx;
background-color: #FFFFFF;
		.body {
			width: 100%;
			height: auto;
			padding: 35rpx 20rpx;
			word-break: break-all;
			word-wrap: break-word;
			background: #F6F6F6;
			border-radius: 10rpx;
		}
	}

	.footer {
		width: 100%;
		height: auto;
		display: block;
		position: fixed;
		bottom: 0;
	}
</style>