c9c34feaf2
style: 调整CSS样式及修复链接样式问题 refactor: 重构item-head和item-bottom组件逻辑 fix: 修复section-index页面导航链接问题 perf: 优化滚动加载及URL参数处理 docs: 更新组件文档及注释 test: 添加组件测试用例 build: 更新依赖配置 chore: 清理无用代码及资源
79 lines
3.0 KiB
JavaScript
79 lines
3.0 KiB
JavaScript
// my-component.js
|
||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||
const { defineComponent, ref, inject } = Vue;
|
||
|
||
// 定义组件（直接使用模板）
|
||
export const report = defineComponent({
|
||
name: "report",
|
||
props: {
|
||
itemdata: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
},
|
||
|
||
setup(props) {
|
||
let item = ref({ ...props.itemdata });
|
||
|
||
const reasonList = ["广告", "辱骂", "重复发送", "不良信息", "其他"];
|
||
let reportAlertShow = inject("reportState");
|
||
|
||
let checkList = ref([]);
|
||
let alertShow = ref(false);
|
||
let alertText = ref("");
|
||
|
||
const selectRadio = (value) => {
|
||
const index = checkList.value.indexOf(value);
|
||
if (index === -1) checkList.value.push(value);
|
||
else checkList.value.splice(index, 1);
|
||
};
|
||
|
||
// 举报提交
|
||
const alertSubmit = () => {
|
||
if (checkList.value.length == 0) {
|
||
creationAlertBox("error", "请选择举报类型");
|
||
return;
|
||
}
|
||
checkList.value.push(alertText.value);
|
||
reportAlertShow.value = false;
|
||
ajax(`/v2/api/forum/postTopicReport`, {
|
||
message: checkList.value,
|
||
token: item.value.token,
|
||
}).then((res) => {
|
||
checkList.value = [];
|
||
reportAlertShow.value = false;
|
||
creationAlertBox("success", res.message || "举报成功");
|
||
});
|
||
};
|
||
|
||
// 取消
|
||
const cancel = () => (reportAlertShow.value = false);
|
||
return { alertText, checkList, reasonList, selectRadio, cancel, alertSubmit, alertShow };
|
||
},
|
||
|
||
template: `<div class="alert-form">
|
||
<div class="comments reports">
|
||
<div class="head">
|
||
<span style="display: flex; align-items: center;"> <img style="width: 25px; margin-right: 7px;" src="//app.gter.net/image/gter/offer/img/exclamationpoint.png" />举报投诉 </span>
|
||
<div class="close icon-close iconfont" @click="alertShow = false"></div>
|
||
</div>
|
||
<div class="form">
|
||
<div class="radio-area flexacenter">
|
||
<div class="radio-area-item flexacenter" :class="{ pitch: checkList.includes(s) }" v-for="(s, i) in reasonList" :key="i" @click="selectRadio(s)">
|
||
<div class="radio-area-frame"></div>
|
||
{{ s }}
|
||
</div>
|
||
</div>
|
||
<div class="text-box">
|
||
<textarea placeholder="请输入举报原因" v-model="alertText" maxlength="200"></textarea>
|
||
<div class="text-num">{{ 200 - alertText.length }}</div>
|
||
</div>
|
||
<div class="footer">
|
||
<button type="button" @click="cancel()">取消</button>
|
||
<button type="submit" @click="alertSubmit">提交</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
});
|