318 lines
5.7 KiB
Vue
318 lines
5.7 KiB
Vue
<!-- 违规举报 -->
|
|
<template>
|
|
|
|
<view style="
|
|
position: fixed;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
bottom: 0rpx;
|
|
right: 0rpx;
|
|
background-color: #ffffff;
|
|
z-index: -1;
|
|
"></view>
|
|
|
|
<navbar_neadVue title="违规举报"></navbar_neadVue>
|
|
|
|
<view v-show="IsNext">
|
|
<view class="boxtop">
|
|
<text>请选择您要举报得问题，帮助我们准确处理</text>
|
|
</view>
|
|
<view class="boxcontent">
|
|
<view v-for="(item,index) in arr" :key="index">
|
|
<view class="boxc" @click="HaveIsClick(item.id)">
|
|
<text class="box-text">{{item.title}}</text>
|
|
<image v-if="item.id == IsClick" class="box-image" src="../../static/images/sign/isH.png"></image>
|
|
<image v-else class="box-image" src="../../static/images/sign/IsHave.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="but" @click="goNext()">
|
|
<text>下一步</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view v-show="!IsNext">
|
|
<view class="next-viewtitle">
|
|
<text>举报原因：{{IsClickTitle}}</text>
|
|
</view>
|
|
<view class="next-viewtitle">
|
|
<text>举报描述（必填）</text>
|
|
</view>
|
|
<view class="next-input">
|
|
<textarea @input="SumVlaue()" maxlength="200" placeholder-class="inputcolor"
|
|
placeholder="请您详细描述举报原因，您的描述越详细越有利于我们的判断，可以更好的帮助我们准确处理。" id="many" v-model="textareavalue"></textarea>
|
|
|
|
<text>{{textsum}}/200</text>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="next-viewtitle">
|
|
<text>上传照片（必填）</text>
|
|
</view>
|
|
|
|
<view class="next-image">
|
|
<image src="../../static/images/sign/add.png"></image>
|
|
<view>
|
|
<text class="next-bot-text">(0/3)</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="but" @click="NextButton()">
|
|
<text>提交</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
ref
|
|
} from 'vue';
|
|
import navbar_neadVue from '../common/navbar/navbar_nead.vue';
|
|
import Logger from 'qiniu-js/esm/logger';
|
|
const IsNext = ref(true);
|
|
const arr = reactive([{
|
|
id: 1,
|
|
title: "色情低俗"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "违法犯罪"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "辱骂、引战、拉仇恨"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "涉政言行不当"
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "虚假信息"
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "涉嫌诈骗"
|
|
},
|
|
{
|
|
id: 7,
|
|
title: "侵犯著作、商标、名誉、隐私、专利权"
|
|
},
|
|
{
|
|
id: 8,
|
|
title: "其他"
|
|
},
|
|
|
|
])
|
|
|
|
|
|
// 表示选中的
|
|
// const IsClick = reactive([])
|
|
const IsClick = ref(0);
|
|
const IsClickTitle = ref("");
|
|
// 选中的函数
|
|
function HaveIsClick(id) {
|
|
console.log(id)
|
|
IsClick.value = id;
|
|
}
|
|
|
|
//下一步
|
|
function goNext() {
|
|
if (IsClick.value == 0) {
|
|
uni.showToast({
|
|
title: '必须选中一个',
|
|
//将值设置为 success 或者直接不用写icon这个参数
|
|
//显示持续时间为 2秒
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
IsClickTitle.value = arr.find(item => item.id == IsClick.value).title;
|
|
IsNext.value = !IsNext.value;
|
|
}
|
|
}
|
|
|
|
//
|
|
const textareavalue = ref("");
|
|
const textsum = ref(0);
|
|
|
|
//计算字数
|
|
function SumVlaue() {
|
|
textsum.value = textareavalue.value.length;
|
|
}
|
|
|
|
// 提交
|
|
function NextButton() {
|
|
// TODO 提交前的校验
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
//将值设置为 success 或者直接不用写icon这个参数
|
|
//显示持续时间为 2秒
|
|
duration: 2000
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import '../../pages/common/navbar/navbar.css';
|
|
|
|
.boxtop {
|
|
width: 750rpx;
|
|
height: 72rpx;
|
|
background: #f4f5f6;
|
|
}
|
|
|
|
.boxtop>text {
|
|
font-weight: Regular;
|
|
width: 456rpx;
|
|
height: 24rpx;
|
|
font-size: 24rpx;
|
|
text-align: left;
|
|
color: #999999;
|
|
display: block;
|
|
line-height: 72rpx;
|
|
margin-left: 32rpx;
|
|
}
|
|
|
|
.boxcontent {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
|
|
.boxc {
|
|
width: 750rpx;
|
|
height: 76rpx;
|
|
}
|
|
|
|
.box-text {
|
|
font-weight: Regular;
|
|
/* width: 112rpx; */
|
|
height: 28rpx;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #000000;
|
|
margin-left: 32rpx;
|
|
line-height: 76rpx;
|
|
}
|
|
|
|
.box-image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
float: right;
|
|
margin-right: 32rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.but {
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
border-radius: 44rpx 44rpx 44rpx 44rpx;
|
|
background: #c0f0ec;
|
|
position: absolute;
|
|
bottom: 92rpx;
|
|
left: 32rpx;
|
|
}
|
|
|
|
.but>text {
|
|
font-weight: Regular;
|
|
width: 92rpx;
|
|
height: 31rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
color: #00CCBE;
|
|
display: block;
|
|
margin: auto;
|
|
line-height: 88rpx;
|
|
}
|
|
|
|
.next-viewtitle {
|
|
margin-top: 48rpx;
|
|
margin-left: 32rpx;
|
|
}
|
|
|
|
.next-viewtitle>text {
|
|
font-weight: Regular;
|
|
width: 221rpx;
|
|
height: 31rpx;
|
|
font-size: 30rpx;
|
|
text-align: left;
|
|
color: #000000;
|
|
}
|
|
|
|
.next-input {
|
|
width: 686rpx;
|
|
height: 280rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
background: #f4f5f6;
|
|
margin-top: 23rpx;
|
|
margin-left: 32rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.next-input>textarea {
|
|
width: 638rpx;
|
|
height: 200rpx;
|
|
padding-left: 24rpx;
|
|
padding-top: 23rpx;
|
|
font-size: 24rpx;
|
|
text-align: left;
|
|
color: #999999;
|
|
}
|
|
|
|
.next-input>text {
|
|
font-weight: Regular;
|
|
width: 55rpx;
|
|
height: 19rpx;
|
|
font-size: 20rpx;
|
|
text-align: left;
|
|
color: #999999;
|
|
display: block;
|
|
margin-top: 12rpx;
|
|
float: right;
|
|
margin-right: 32rpx;
|
|
}
|
|
|
|
:deep(.inputcolor) {
|
|
font-weight: Regular;
|
|
width: 638rpx;
|
|
height: 200rpx;
|
|
font-size: 24rpx;
|
|
text-align: left;
|
|
color: #999999;
|
|
}
|
|
|
|
.next-image {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
background: #f4f5f6;
|
|
margin-left: 32rpx;
|
|
margin-top: 23rpx;
|
|
}
|
|
|
|
.next-image>image {
|
|
width: 78rpx;
|
|
height: 66rpx;
|
|
display: block;
|
|
float: left;
|
|
margin-left: 71rpx;
|
|
margin-top: 57rpx;
|
|
}
|
|
.next-bot-text{
|
|
font-weight: Regular;
|
|
width: 65rpx;
|
|
height: 29rpx;
|
|
font-size: 30rpx;
|
|
text-align: left;
|
|
color: #999999;
|
|
|
|
display: block;
|
|
float: left;
|
|
margin-left: 71rpx;
|
|
/* margin-top: 11rpx; */
|
|
}
|
|
</style> |