smartmeter-app/pages/opinion/index.vue

<template>
	<view class="pages">
		<u-navbar title="意见反馈" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='48'
			height='34'></u-navbar>
		<view class="leix">
			<view class="title">
				反馈类型 <text style="font-size: 36rpx; color: red; vertical-align: top;margin-left: 32rpx;">✲</text>
			</view>
			<view class="lxxz">
				<view class="">
					功能异常
				</view>
				<view class="active">
					意见与建议
					<text>✔</text>
				</view>
				<view class="">
					其他
				</view>
			</view>
		</view>

		<view class="problem">
			<view class="title">
				问题描述 <text style="font-size: 36rpx; color: red; vertical-align: top;margin-left: 32rpx;">✲</text>
			</view>
			<view class="input-container">
				<view class="placeholder" v-if="!textValue">请详细描述您的问题或建议</view>
				<textarea class="custom-textarea" v-model="textValue" @focus="hidePlaceholder" style="border: none;" @input="updateWordCount"
					@blur="showPlaceholder"></textarea>
				<text class="word-count">{{ currentCount }}/500</text>
			</view>
		</view>

          <view class="scpic">
          	<view class="title">
          		上传图片
          	</view>
			<view class="icon">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uY8CPw9YE6JxPzcHUaqf" mode=""></image>
			</view>
			<text>上传问题图片可以让问题快速解决哦!</text>
          </view>
		  
		  <view class="lxfs">
		  	  <view class="title">
		  	  	联系方式
		  	  </view>
			  <input type="text" placeholder="请留下手机号/邮箱/微信号，以便我们回复您" />
		  </view>
		  
		  <button>提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				textValue: '',
				currentCount: 0,
			}
		},
		computed: {

		},
		onLoad() {

		},
		methods: {
			hidePlaceholder() {
				this.placeholderVisible = false;
			},
			showPlaceholder() {
				if (!this.textValue) {
					this.placeholderVisible = true;
				}
			},
			updateWordCount() {
				this.currentCount = this.textValue.trim().replace(/\s+/g, '').length;
				// if (this.currentCount > 500) {
				// 	this.textValue = this.textValue.slice(0, this.textValue.lastIndexOf(' ', 500)).trim();
				// 	uni.showToast({
				// 		title: '字数已超过500字限制',
				// 		icon: 'none'
				// 	});
				// }
				
			},
		}
	}
</script>

<style lang="scss">
	button{
		width: 590rpx;
		height: 84rpx;
		background: #8883F0;
		filter: blur(0px);
		color: #fff;
		font-size: 36rpx;
		line-height: 84rpx;
		text-align: center;
		margin-top: 164rpx;
		border-radius: 50rpx;
	}
	page {
		background-color: #F7FAFE !important;
	}

	.pages {
		padding: 0 66rpx;
		box-sizing: border-box;
	}

	.leix {
		margin-top: 34rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}

		.lxxz {
			display: flex;

			view {
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 2rpx solid #C4C4C4;
				padding: 14rpx 34rpx 14rpx 34rpx;
				box-sizing: border-box;
				margin-right: 28rpx;
				margin-top: 40rpx;
				position: relative;
				overflow: hidden;

				text {
					position: absolute;
					bottom: 0;
					right: 0;
					display: inline-block;
					width: 31rpx;
					height: 19rpx;
					background: #8883F0;
					color: #fff;
					border-radius: 5rpx;
					font-size: 18rpx;
					text-align: center;
					line-height: 19rpx;
				}
			}
		}
	}

	.active {
		border: 2rpx solid #8883F0 !important;
	}

	.problem {
		margin-top: 40rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
	}
	
	.lxfs {
		margin-top: 40rpx;
		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
		input{
		   margin-top: 32rpx;
           width: 612rpx;
           height: 80rpx;
           background: #FFFFFF;
           box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
		   border-radius: 20rpx;
		   padding-left: 20rpx;
		}
	}
	
	.scpic {
		margin-top: 40rpx;
	
		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
		text{
			display: block;
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #95989D;
			line-height: 38rpx;
		}
		.icon{
			margin-top: 40rpx;
			image{
				width: 142rpx;
				height: 142rpx;
			}
		}
	}


	.input-container {
		position: relative;
		width: 612rpx;
		height: 248rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		border-radius: 20rpx;
		margin-top: 40rpx;
		overflow: hidden;
		padding-right: 38rpx;
		box-sizing: border-box;
	}

	.placeholder {
		position: absolute;
		top: 18rpx;
		left: 38rpx;
		color: #999;
		/* placeholder颜色 */
		pointer-events: none;
		/* 确保点击事件可以穿透到textarea上 */
	}

	.custom-textarea {
		width: 100%;
		height: 100%;
		/* 设置一个合适高度 */
		padding-top: 18rpx;
		/* 为placeholder留出空间 */
		padding-left: 38rpx;
		box-sizing: border-box;
		border: 1px solid #ccc;
	}
	.word-count {  
	    position: absolute;  
	    right: 10px;  
	    bottom: 10px;  
	    font-size: 12px;  
	    color: #999;  
	}  
</style>