367 lines
9.0 KiB
Vue
367 lines
9.0 KiB
Vue
<template>
|
|
<div class="outer-layer user-detail-page">
|
|
<div class="root">
|
|
<ZPaging ref="zPaging" :show-scrollbar="false">
|
|
<template #top>
|
|
<customNavbar :title="$t('complaint.title')"></customNavbar>
|
|
</template>
|
|
<!-- 投诉主体内容 -->
|
|
<view class="complaint-container">
|
|
<!-- 投诉类型选择 -->
|
|
<view class="form-item">
|
|
<text class="form-label">{{ $t('complaint.selectType') }}</text>
|
|
<picker mode="selector" :range="complaintTypes" range-key="label" @change="handleTypeChange">
|
|
<view class="picker">
|
|
{{ selectedType.label || $t('complaint.selectPlaceholder') }}
|
|
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 图片证据上传 -->
|
|
<view class="form-item">
|
|
<text class="form-label">{{ $t('complaint.imageEvidence') }}</text>
|
|
<view class="upload-area">
|
|
<view v-for="(img, index) in imageList" :key="index" class="image-wrapper">
|
|
<image :src="img" mode="aspectFill" class="uploaded-image" @click="previewImage(index)" />
|
|
<uni-icons type="close" size="18" color="#fff" class="delete-icon"
|
|
@click="removeImage(index)"></uni-icons>
|
|
</view>
|
|
<view v-if="imageList.length < 9" class="upload-btn" @click="chooseImage">
|
|
<uni-icons type="plusempty" size="28" color="#999"></uni-icons>
|
|
<text class="upload-text">{{ $t('complaint.addImage') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 投诉内容 -->
|
|
<view class="form-item">
|
|
<text class="form-label">{{ $t('complaint.complaintContent') }}</text>
|
|
<textarea v-model="complaintContent" :placeholder="$t('complaint.contentPlaceholder')"
|
|
class="content-textarea"></textarea>
|
|
</view>
|
|
|
|
<!-- 投诉须知 -->
|
|
<view class="notice-box">
|
|
<view class="notice-header" @click="toggleNotice">
|
|
<text class="notice-title">{{ $t('complaint.noticeTitle') }}</text>
|
|
<text class="toggle-btn">
|
|
{{ isNoticeExpanded ? $t('complaint.collapse') : $t('complaint.expand') }}
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 折叠状态只显示前两项 -->
|
|
<view class="notice-content" v-if="!isNoticeExpanded">
|
|
<view class="notice-item">
|
|
<text>{{ $t('complaint.noticeone') }}</text>
|
|
</view>
|
|
<view class="notice-item">
|
|
<text>{{ $t('complaint.noticetwo') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 展开状态显示全部 -->
|
|
<view class="notice-content" v-else>
|
|
<view class="notice-item">
|
|
<text>{{ $t('complaint.noticeone') }}</text>
|
|
</view>
|
|
<view class="notice-item">
|
|
<text>{{ $t('complaint.noticetwo') }}</text>
|
|
</view>
|
|
<view class="notice-item">
|
|
<text>{{ $t('complaint.noticethree') }}</text>
|
|
</view>
|
|
<view class="notice-item">
|
|
<text>{{ $t('complaint.noticefour') }}</text>
|
|
</view>
|
|
<view class="notice-item">
|
|
<text>{{ $t('complaint.noticefive') }}</text>
|
|
</view>
|
|
<view class="notice-item">
|
|
<text>{{ $t('complaint.noticenoticeContent') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button class="submit-btn" :disabled="!selectedType.value" @click="handleSubmit">
|
|
{{ $t('complaint.submit') }}
|
|
</button>
|
|
</view>
|
|
</ZPaging>
|
|
|
|
<!-- 固定在底部的提交按钮 -->
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app';
|
|
import {
|
|
useI18n
|
|
} from 'vue-i18n';
|
|
|
|
const {
|
|
t
|
|
} = useI18n();
|
|
|
|
|
|
// 投诉类型选项
|
|
const complaintTypes = computed(() => [{
|
|
label: t('complaint.typeOptions.porn'),
|
|
value: 'porn'
|
|
},
|
|
{
|
|
label: t('complaint.typeOptions.illegal'),
|
|
value: 'illegal'
|
|
},
|
|
{
|
|
label: t('complaint.typeOptions.gambling'),
|
|
value: 'gambling'
|
|
},
|
|
{
|
|
label: t('complaint.typeOptions.violence'),
|
|
value: 'violence'
|
|
},
|
|
{
|
|
label: t('complaint.typeOptions.selfHarm'),
|
|
value: 'selfHarm'
|
|
},
|
|
{
|
|
label: t('complaint.typeOptions.other'),
|
|
value: 'other'
|
|
}
|
|
]);
|
|
|
|
// 表单数据
|
|
const selectedType = ref({});
|
|
const imageList = ref([]);
|
|
const complaintContent = ref('');
|
|
const isNoticeExpanded = ref(false);
|
|
|
|
// 切换投诉须知展开状态
|
|
const toggleNotice = () => {
|
|
isNoticeExpanded.value = !isNoticeExpanded.value;
|
|
};
|
|
|
|
// 选择投诉类型
|
|
const handleTypeChange = (e) => {
|
|
selectedType.value = complaintTypes.value[e.detail.value];
|
|
};
|
|
|
|
// 选择图片
|
|
const chooseImage = () => {
|
|
uni.chooseImage({
|
|
count: 9 - imageList.value.length,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
imageList.value = [...imageList.value, ...res.tempFilePaths];
|
|
if (imageList.value.length > 9) {
|
|
uni.showToast({
|
|
title: `最多只能选择9张图片`,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
// 删除图片
|
|
const removeImage = (index) => {
|
|
imageList.value.splice(index, 1);
|
|
};
|
|
|
|
// 预览图片
|
|
const previewImage = (index) => {
|
|
uni.previewImage({
|
|
current: index,
|
|
urls: imageList.value
|
|
});
|
|
};
|
|
|
|
// 提交投诉
|
|
const handleSubmit = () => {
|
|
const formData = {
|
|
type: selectedType.value,
|
|
images: imageList.value,
|
|
content: complaintContent.value
|
|
};
|
|
uni.showLoading({
|
|
title: t('complaint.toast.submitting') // 使用国际化文本
|
|
});
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: t('complaint.toast.success'),
|
|
icon: 'success'
|
|
});
|
|
selectedType.value = {};
|
|
imageList.value = [];
|
|
complaintContent.value = '';
|
|
// 返回上一页
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
}, 2000);
|
|
};
|
|
|
|
onLoad(() => {
|
|
// 页面加载时初始化
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep .uni-picker-action-confirm {
|
|
color: #452aa1 !important;
|
|
}
|
|
|
|
.outer-layer {
|
|
flex: 1;
|
|
background-image: url('@/static/image/mine/1111.png');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.complaint-container {
|
|
padding: 20rpx 30rpx;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
margin: 20rpx;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.picker {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx;
|
|
background-color: #f7f7f7;
|
|
border-radius: 12rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.upload-area {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.upload-btn {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f7f7f7;
|
|
border-radius: 12rpx;
|
|
border: 1rpx dashed #ddd;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.image-wrapper {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
position: relative;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.uploaded-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.delete-icon {
|
|
position: absolute;
|
|
top: 8rpx;
|
|
right: 8rpx;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 50%;
|
|
padding: 4rpx;
|
|
}
|
|
|
|
.content-textarea {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
padding: 20rpx;
|
|
background-color: #f7f7f7;
|
|
border-radius: 12rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.notice-box {
|
|
padding: 20rpx;
|
|
background-color: #f0f7ff;
|
|
border-radius: 12rpx;
|
|
margin: 40rpx 0;
|
|
}
|
|
|
|
.notice-title {
|
|
font-size: 28rpx;
|
|
color: #452aa1;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.notice-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.toggle-btn {
|
|
color: #452aa1;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.notice-content {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.submit-btn {
|
|
margin-top: 40rpx;
|
|
background-color: #452aa1;
|
|
color: white;
|
|
border-radius: 8rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
font-size: 32rpx;
|
|
|
|
&[disabled] {
|
|
background-color: #f0f0f0;
|
|
}
|
|
}
|
|
</style>
|