Skip to content

C
company_app
提交 a00120de 作者: 施汉文
操作

新增抽屉组件并在举报弹窗中替换原有实现，优化了样式和结构

上级 1afeb6e9
正在显示 包含 373 行增加 和 114 行删除
src/components/common/Drawer.vue 0 → 100644
<template>
<el-drawer
:visible="visible"
:title="title"
:size="size"
:append-to-body="true"
@close="$emit('close')"
:show-close="false"
>
<template #title>
<div class="flex items-center">
<svg-icon
@click="$emit('close')"
svgName="icon-fanhui"
class="mr-[8px] w-[20px] text-[20px] cursor-pointer"
></svg-icon>
<span class="text-[13px] text-[#131920] leading-[13px]">{{
title
}}</span>
</div>
</template>
<slot></slot>
<span class="dialog-footer rowFlex">
<slot name="footer">
<el-button class="btn" size="small" @click="$emit('close')">
取 消
</el-button>
<el-button
class="btn"
type="primary"
size="small"
:disabled="okDisabled"
@click="$emit('ok')"
>
确 定
</el-button>
</slot>
</span>
</el-drawer>
</template>
<script>
export default {
name: "Ui-Drawer",
props: ["visible", "size", "title", "okDisabled"],
};
</script>
<style scoped>
::v-deep .el-drawer__header {
padding: 12px 0px;
margin: 0 12px;
}
.dialog-footer {
width: 100%;
position: absolute;
bottom: 0;
padding-top: 20px;
padding-bottom: 20px;
border-top: 0;
justify-content: flex-end;
background: #fff;
z-index: 10;
.btn {
width: 60px;
height: 32px;
border-radius: 6px;
}
}
</style>
src/views/popup/reportPopup/index.vue
<template>
<el-drawer
:lock-scroll="true"
<Drawer
class="report-popup-drawer"
title="举报申请"
:visible="show"
size="400px"
:append-to-body="true"
size="362px"
@close="close"
>
<div class="drawer-content-main">
......@@ -27,79 +26,84 @@
@result="mainGameResult"
/>
</el-form-item>
<el-form-item label="">
<el-radio-group v-model="reportForm.report_role_id_type">
<el-radio label="cp_role_id">CP角色ID</el-radio>
<el-radio label="role_id">掌游角色ID</el-radio>
</el-radio-group>
</el-form-item>
<!--被举报人 -->
<inputTags
:input-select-list.sync="reportForm.cp_role_id"
label-text="被举报人CP角色ID"
placeholder="请输入被举报人"
:disabled="reportForm.main_game_id === ''"
rule-prop="cp_role_id"
@inputChange="inputChange"
/>
<inputTags
:input-select-list.sync="reportForm.role_name"
label-text="被举报人角色名"
placeholder="输入CP角色ID后自动获取"
:disabled="true"
rule-prop="role_name"
/>
<inputTags
:input-select-list.sync="reportForm.server_name"
label-text="被举报人区服"
placeholder="输入CP角色ID后自动获取"
:disabled="true"
rule-prop="server_name"
/>
<!-- 仅 currUserList 有生态运营数据时展示 -->
<template v-if="hasEcoUserData">
<el-form-item label="被举报人生态运营" prop="eco_user">
<div class="role-card">
<el-form-item label="" class="role-type-item">
<el-radio-group v-model="reportForm.report_role_id_type">
<el-radio label="cp_role_id">CP角色ID</el-radio>
<el-radio label="role_id">掌游角色ID</el-radio>
</el-radio-group>
</el-form-item>
<!--被举报人 -->
<inputTags
:input-select-list.sync="reportForm.cp_role_id"
label-text="被举报人CP角色ID"
placeholder="请输入被举报人"
:disabled="reportForm.main_game_id === ''"
rule-prop="cp_role_id"
@inputChange="inputChange"
/>
<inputTags
:input-select-list.sync="reportForm.role_name"
label-text="被举报人角色名"
placeholder="输入CP角色ID后自动获取"
:disabled="true"
rule-prop="role_name"
/>
<inputTags
:input-select-list.sync="reportForm.server_name"
label-text="被举报人区服"
placeholder="输入CP角色ID后自动获取"
:disabled="true"
rule-prop="server_name"
/>
<!-- 仅 currUserList 有生态运营数据时展示 -->
<template v-if="hasEcoUserData">
<el-form-item label="被举报人生态运营" prop="eco_user">
<el-input
:value="ecoUserNamesDisplay"
style="width: 100%"
type="input"
disabled
/>
</el-form-item>
</template>
</div>
<div class="role-card">
<el-form-item label="" class="role-type-item">
<el-radio-group v-model="reportForm.role_id_type">
<el-radio label="cp_role_id">CP角色ID</el-radio>
<el-radio label="role_id">掌游角色ID</el-radio>
</el-radio-group>
</el-form-item>
<!-- 举报人 -->
<el-form-item label="举报人CP角色ID" prop="report_cp_role_id">
<el-input
:value="ecoUserNamesDisplay"
v-model="reportForm.report_cp_role_id"
style="width: 100%"
type="input"
placeholder="请输入举报人"
@change="change_report_role_id"
></el-input>
</el-form-item>
<el-form-item label="举报人角色名" prop="report_role_name">
<el-input
v-model="reportForm.report_role_name"
style="width: 100%"
placeholder="输入CP角色ID后自动获取"
disabled
/>
></el-input>
</el-form-item>
</template>
<el-form-item label="">
<el-radio-group v-model="reportForm.role_id_type">
<el-radio label="cp_role_id">CP角色ID</el-radio>
<el-radio label="role_id">掌游角色ID</el-radio>
</el-radio-group>
</el-form-item>
<!-- 举报人 -->
<el-form-item label="举报人CP角色ID" prop="report_cp_role_id">
<el-input
v-model="reportForm.report_cp_role_id"
style="width: 100%"
placeholder="请输入举报人"
@change="change_report_role_id"
></el-input>
</el-form-item>
<el-form-item label="举报人角色名" prop="report_role_name">
<el-input
v-model="reportForm.report_role_name"
style="width: 100%"
placeholder="输入CP角色ID后自动获取"
disabled
></el-input>
</el-form-item>
<el-form-item label="举报人区服" prop="report_server_name">
<el-input
v-model="reportForm.report_server_name"
placeholder="输入CP角色ID后自动获取"
style="width: 100%"
disabled
></el-input>
</el-form-item>
<el-form-item label="举报人区服" prop="report_server_name">
<el-input
v-model="reportForm.report_server_name"
placeholder="输入CP角色ID后自动获取"
style="width: 100%"
disabled
></el-input>
</el-form-item>
</div>
<template v-if="hasEcoUserData">
<el-form-item label="是否有生态运营" prop="is_negotiation">
<el-radio-group v-model="reportForm.is_negotiation">
......@@ -108,7 +112,7 @@
</el-radio-group>
</el-form-item>
</template>
<el-form-item label="违规操作" prop="violation_type">
<el-select
v-model="reportForm.violation_type"
......@@ -125,28 +129,28 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="详情" prop="remark">
<el-form-item label="详情" prop="remark" class="detail-form-item">
<textEditor
:remark.sync="reportForm.remark"
domid="report_content"
style="width: 100%; margin-bottom: 60px"
class="report-editor"
:contenteditable="true"
@resultReamrk="resultReamrk"
/>
</el-form-item>
</el-form>
</div>
<span class="dialog-footer rowFlex">
<el-button
class="btn"
type="primary"
:loading="loading"
@click="submit"
>确 定</el-button>
<el-button class="btn" @click="close">取 消</el-button>
</span>
</div>
</el-drawer>
<template #footer>
<el-button class="btn" @click="close">取消</el-button>
<el-button
class="btn"
type="primary"
:loading="loading"
@click="submit"
>确定</el-button>
</template>
</Drawer>
</template>
<script type="text/javascript">
import mainGameSelect from '@/components/mainGame.vue'
......@@ -154,11 +158,13 @@
import { searchcondition, reportAdd,currUserList } from '@/api/game'
import { mapState } from 'vuex'
import inputTags from '@/components/inputTags/index.vue'
import Drawer from '@/components/common/Drawer.vue'
export default {
components: {
mainGameSelect,
textEditor,
inputTags
inputTags,
Drawer
},
computed: {
...mapState('game', ['accountSelect']),
......@@ -679,20 +685,222 @@
</script>
<style lang="scss" scoped>
// ::v-deep .el-drawer {
// height: 100%;
// }
::v-deep .report-popup-drawer {
max-width: 100vw;
.el-drawer__header {
height: 46px;
padding: 12px 0;
margin: 0 12px;
border-bottom: 1px solid #ebedf0;
box-sizing: border-box;
.flex {
width: 100%;
}
span {
color: #131920;
font-family: PingFang SC, PingFangSC-Medium, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 22px;
}
}
.el-drawer__body {
position: relative;
height: calc(100% - 46px);
overflow: hidden;
background: #fff;
box-sizing: border-box;
}
.dialog-footer {
height: 56px;
padding: 12px;
border-top: 1px solid #ebedf0;
box-sizing: border-box;
gap: 12px;
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 60px;
padding: 0 16px;
border-radius: 6px;
font-size: 14px;
line-height: 22px;
span {
line-height: 22px;
}
}
}
}
.drawer-content-main {
width: 100%;
height: 100%;
overflow: auto;
height: calc(100% - 56px);
overflow-y: auto;
overflow-x: hidden;
}
.drawer-content {
width: 100%;
height: auto;
padding: 20px;
padding-top: 0;
padding: 12px 12px 24px;
box-sizing: border-box;
}
.reportForm {
display: flex;
flex-direction: column;
gap: 20px;
}
.role-card {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
padding: 12px;
border-radius: 4px;
background: #f6f8f9;
box-sizing: border-box;
}
.report-editor {
display: block;
width: 100%;
}
::v-deep .reportForm {
.el-form-item {
margin-bottom: 0;
}
.el-form-item__label {
display: flex;
align-items: center;
padding: 0 0 8px;
color: #6d7176;
font-family: PingFang SC, PingFangSC-Regular, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 22px;
}
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label::before {
color: #f53f3f;
margin-right: 4px;
}
.el-input__inner,
.el-select .el-input__inner {
height: 34px;
padding: 5px 12px;
border-color: #d6d9e0;
border-radius: 6px;
color: #323335;
font-size: 14px;
line-height: 22px;
}
.el-input.is-disabled .el-input__inner {
border-color: #d6d9e0;
background-color: #f7f8fa;
color: #c9cdd4;
cursor: not-allowed;
}
.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
color: #c9cdd4;
}
.role-type-item .el-form-item__content {
line-height: 22px;
}
.el-radio-group {
display: flex;
align-items: center;
gap: 40px;
line-height: 22px;
}
.el-radio {
margin-right: 0;
color: #323335;
font-size: 14px;
line-height: 22px;
}
.el-radio__label {
padding-left: 8px;
color: #323335;
font-size: 14px;
line-height: 22px;
}
.el-radio__input.is-checked .el-radio__inner {
border-color: #00bf8a;
background: #00bf8a;
}
.el-radio__input.is-checked + .el-radio__label {
color: #323335;
}
.el-select .el-input .el-select__caret {
color: #86909c;
font-size: 14px;
}
}
::v-deep .role-card {
.inputItem {
margin-bottom: 0;
}
.alias_list {
min-height: 34px;
padding: 0 6px;
border-color: #d6d9e0;
border-radius: 6px;
background: #fff;
box-sizing: border-box;
}
.alias_list_disabled {
background: #f7f8fa;
}
.alias_input {
height: 32px;
padding-left: 6px;
color: #323335;
font-size: 14px;
line-height: 22px;
}
.alias_input::placeholder {
color: #c9cdd4;
}
.alias_item {
margin: 3px 4px 3px 0;
}
}
::v-deep .detail-form-item {
.el-form-item__label {
padding-bottom: 8px;
}
}
.selectItem {
......@@ -724,23 +932,5 @@
margin-right: 10px;
}
.dialog-footer {
width: 100%;
height: auto;
position: absolute;
right: 0px;
bottom: 0px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
justify-content: flex-end;
background: #fff;
.btn {
width: 84px;
height: 32px;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论