mcwl-pc/app/components/Report.vue

111 lines
3.1 KiB
Vue

<template>
<n-modal
v-model:show="isVisibleReport"
:preset="null"
:mask-closable="false"
transform-origin="center"
class="custom-modal"
>
<div class="bg-white rounded-xl p-4">
<div class="flex items-center justify-between">
<div class="text-xl">举报</div>
<div>
<n-icon size="20" class="mr-2 cursor-pointer" @click="closeReport">
<Close />
</n-icon>
</div>
</div>
<div class="flex flex-col">
<n-radio
class="m-4 text-[#fff000]"
size="large"
v-for="(item, index) in reportList"
:key="index"
:checked="reportParams.reportId === item.dictValue"
value="Definitely Maybe"
name="basic-demo"
@change="handleChange(item)"
>
{{ item.dictLabel }}
</n-radio>
<n-input
v-if="reportParams.reportId !== undefined && reportParams.reportId === '5'"
v-model:value="reportParams.text"
placeholder="点击输入"
type="textarea"
:autosize="{
minRows: 5,
maxRows: 10,
}"
/>
<div
@click="onReport"
class="mt-4 w-[100%] h-10 flex rounded-lg text-white items-center justify-center cursor-pointer"
:class="[
reportParams.reportId !== undefined
? 'bg-[#4c79ee]'
: 'bg-[#cccccc]',
]"
>
确认
</div>
</div>
</div>
</n-modal>
</template>
<script setup lang="ts">
import { commonApi } from "@/api/common";
import { Close } from "@vicons/ionicons5";
//
const isVisibleReport = ref(true);
const reportParams = ref({
reportId: undefined,
text: "",
type:1
});
const reportList = ref([]);
async function getDictType() {
try {
const res = await commonApi.dictType({ type: "report_type" });
if (res.code === 200) {
reportList.value = res.data;
}
} catch (error) {
console.log(error);
}
}
getDictType();
function handleChange(item: any) {
reportParams.value.reportId = item.dictValue;
if (item.dictValue !== "5") {
reportParams.value.text = "";
}
console.log("object", reportParams.value);
}
function closeReport() {
isVisibleReport.value = false;
}
async function onReport(){
if( reportParams.value.reportId !== undefined){
reportParams.value.productId = detailsInfo.value.id
const res = await request.post('/report/addReport', reportParams.value)
}
}
</script>
<style scoped>
.container{
/* position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0.4;
background: #000; */
}
</style>