magicsound/pages/me/ReportingCenter.vue

<template>
	<view>
		<view class="content" :style="'paddingTop: '+systemBarHeight + 'px;'">
			<view class=""
				style="display: flex; height: 45rpx; width: 100%; align-items: center;justify-content: center;"
				:style="{ marginTop: systemBarHeight + 'px' }">
				<image src="/static/image/ic_back.png"
					style="width: 24.31rpx; height: 43.06rpx; margin-left: 36rpx; position: absolute; left: 0;"
					@click="toBack()" alt="" />
				<text style="font-size: 38rpx; color: white;">举报中心</text>
			</view>

			<view class="" style="margin-top: 50rpx; width: 100%; margin-left: 36rpx;">
				<text style="font-size: 29rpx; color: white;">举报类型</text>
			</view>

			<view class="" style="width: 90%; margin-top: 40rpx;">

				<view class="" style="display: flex; flex-direction: column; width: 100%;">

					<view class="" style="display: flex; flex-direction: row;">

						<view class="" @click="clickCheck(0)"
							style="display: flex; flex-direction: row; align-items: center;">

							<image :src="current==0?'/static/image/ic_check_s.png':'/static/image/ic_check.png'"
								style="width: 25rpx; height: 25rpx;">
							</image>
							<view class="" style="color: #A8A8A8; font-size: 22rpx; margin-left: 13rpx;">
								骚扰谩骂
							</view>
						</view>

						<view class="" @click="clickCheck(1)"
							style="display: flex; flex-direction: row; align-items: center; margin-left: 150rpx;">

							<image :src="current==1?'/static/image/ic_check_s.png':'/static/image/ic_check.png'"
								style="width: 25rpx; height: 25rpx;">
							</image>
							<view class="" style="color: #A8A8A8; font-size: 22rpx; margin-left: 13rpx;">
								垃圾广告
							</view>
						</view>

						<view class="" @click="clickCheck(2)"
							style="display: flex; flex-direction: row; align-items: center; margin-left: 150rpx;">

							<image :src="current==2?'/static/image/ic_check_s.png':'/static/image/ic_check.png'"
								style="width: 25rpx; height: 25rpx;">
							</image>
							<view class="" style="color: #A8A8A8; font-size: 22rpx; margin-left: 13rpx;">
								涉政涉恐
							</view>
						</view>

					</view>

					<view class="" style="display: flex; flex-direction: row; margin-top: 20rpx;">

						<view class="" @click="clickCheck(3)"
							style="display: flex; flex-direction: row; align-items: center;">

							<image :src="current==3?'/static/image/ic_check_s.png':'/static/image/ic_check.png'"
								style="width: 25rpx; height: 25rpx;">
							</image>
							<view class="" style="color: #A8A8A8; font-size: 22rpx; margin-left: 13rpx;">
								欺诈骗钱
							</view>
						</view>

						<view class="" @click="clickCheck(4)"
							style="display: flex; flex-direction: row; align-items: center; margin-left: 150rpx;">

							<image :src="current==4?'/static/image/ic_check_s.png':'/static/image/ic_check.png'"
								style="width: 25rpx; height: 25rpx;">
							</image>
							<view class="" style="color: #A8A8A8; font-size: 22rpx; margin-left: 13rpx;">
								淫秽色情
							</view>
						</view>

						<view class="" @click="clickCheck(5)"
							style="display: flex; flex-direction: row; align-items: center; margin-left: 150rpx;">

							<image :src="current==5?'/static/image/ic_check_s.png':'/static/image/ic_check.png'"
								style="width: 25rpx; height: 25rpx;">
							</image>
							<view class="" style="color: #A8A8A8; font-size: 22rpx; margin-left: 13rpx;">
								其他
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="" style="width: 100%; margin-top: 40rpx; margin-left: 36rpx;">
				<text style="color: #C5C5C5; font-size: 29rpx;">具体描述 <text style="font-size: 22rpx;">（选填）</text> </text>
			</view>


			<view class="" style="margin-top: 33rpx;">
				<view class=""
					style="width: 623.33rpx; height: 272.22rpx;  padding: 30rpx 30rpx 90rpx 30rpx; border-radius: 20rpx; background-color: #262626;">

					<textarea type="text" style="color: white; width: 100%;" v-model="musicPrompt"
						placeholder="请描述据举报的具体原因,以便更快处理" maxlength="200" @input="sumfontnum" />
					<view style="text-align: end; color: white; padding-bottom: 20rpx;"><text
							style="color: white;">{{fontNum}}</text>/200</view>
				</view>
			</view>
			
			
			<view class=""
				style="width: 683.33rpx; height: 83.33rpx; margin-left: 33rpx; margin-right: 33rpx; margin-top: 150rpx;
				 background-image: linear-gradient(to left, #a541ffFF, #3fbbfeFF); padding: 1rpx; border-radius:50rpx; display: flex; align-items: center; justify-content: center;">
			
				<text style="font-size: 40rpx; color: white;">提交</text>
			
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				current: 0,
				describePrompt: '',
				fontNum: 0,
			}
		},
		onLoad() {
			this.systemBarHeight = getApp().globalData.statusBarHeight;
		},
		methods: {
			toBack() {
				uni.navigateBack();
			},

			clickCheck(type) {
				this.current = type;
			},

			sumfontnum(e) {
				this.fontNum = e.detail.cursor
			},

		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #0E0A10FF;
	}
</style>