456 lines
8.6 KiB
Vue
456 lines
8.6 KiB
Vue
<!-- 违规举报 -->
|
|
<template>
|
|
|
|
|
|
<view>
|
|
<up-toast ref="uToastRef"></up-toast>
|
|
<up-cell-group title-bg-color="rgb(243, 244, 246)">
|
|
</up-cell-group>
|
|
</view>
|
|
|
|
<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>
|
|
<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" deletable
|
|
style="margin-left: 42rpx;" name="6" multiple :deletable="true" :maxCount="3">
|
|
<image src="../../static/images/sign/add.png" mode="widthFix" class="imageup"></image>
|
|
<view>
|
|
<text class="next-bot-text">({{fileList1.length}}/3)</text>
|
|
</view>
|
|
|
|
</up-upload>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="but" @click="NextButton()">
|
|
<text>提交</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
ref,
|
|
getCurrentInstance
|
|
} from 'vue';
|
|
import navbar_neadVue from '../common/navbar/navbar_nead.vue';
|
|
import Logger from 'qiniu-js/esm/logger';
|
|
import {
|
|
listFriendReport,
|
|
getFriendReport,
|
|
delFriendReport,
|
|
addFriendReport,
|
|
updateFriendReport
|
|
} from "@/api/signln/FriendReport/FriendReport";
|
|
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 list = ref([{
|
|
type: 'error',
|
|
icon: false,
|
|
title: '',
|
|
message: "",
|
|
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
|
|
}])
|
|
// 方法
|
|
const uToastRef = ref(null)
|
|
|
|
function showToast(params) {
|
|
uToastRef.value.show({
|
|
...params,
|
|
complete() {
|
|
params.url && uni.navigateTo({
|
|
url: params.url
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 表示选中的
|
|
// 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 提交前的校验
|
|
var ls = list.value[0];
|
|
if (IsClickTitle.value.length == 0) {
|
|
return;
|
|
}
|
|
if (textareavalue.value.length === 0) {
|
|
ls.message = "举报原因不能为空";
|
|
showToast(ls);
|
|
return;
|
|
}
|
|
if (fileList1.value.length === 0) {
|
|
ls.message = "图片上传";
|
|
showToast(ls);
|
|
return;
|
|
}
|
|
|
|
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
//将值设置为 success 或者直接不用写icon这个参数
|
|
//显示持续时间为 2秒
|
|
duration: 1000
|
|
})
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
|
|
console.log(fileList1.value)
|
|
console.log(uploadQiNiuDomain)
|
|
}
|
|
|
|
|
|
|
|
|
|
const fileList1 = ref([]);
|
|
import config1 from "@/config";
|
|
const uploadQiNiuDomain = config1.uploadQiNiuDomain;
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance();
|
|
|
|
// 删除图片
|
|
const deletePic = (event) => {
|
|
fileList1.value.splice(event.index, 1);
|
|
};
|
|
|
|
// 新增图片
|
|
const afterRead = async (event) => {
|
|
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file);
|
|
let fileListLen = fileList1.value.length;
|
|
lists.map((item) => {
|
|
fileList1.value.push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中',
|
|
});
|
|
});
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await uploadFilePromise(lists[i].url);
|
|
let item = fileList1.value[fileListLen];
|
|
fileList1.value.splice(fileListLen, 1, {
|
|
...item,
|
|
status: 'success',
|
|
message: '',
|
|
url: result,
|
|
});
|
|
fileListLen++;
|
|
}
|
|
};
|
|
|
|
const uploadFilePromise = (url) => {
|
|
return new Promise((resolve, reject) => {
|
|
let a = uni.uploadFile({
|
|
url: uploadQiNiuDomain, // 仅为示例，非真实的接口地址
|
|
filePath: url,
|
|
name: 'file',
|
|
formData: {
|
|
user: 'test',
|
|
},
|
|
success: (res) => {
|
|
setTimeout(() => {
|
|
resolve(res.data.data);
|
|
}, 1000);
|
|
},
|
|
});
|
|
});
|
|
};
|
|
</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;
|
|
display: inline;
|
|
}
|
|
|
|
.imageup {
|
|
width: 78rpx;
|
|
height: 66rpx;
|
|
display: block;
|
|
float: left;
|
|
margin-left: 71rpx;
|
|
margin-top: 57rpx;
|
|
}
|
|
|
|
.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: 75rpx;
|
|
/* margin-top: 11rpx; */
|
|
}
|
|
</style> |