Skip to content

C
company_app
提交 e5a50223 作者: 毛细亚
操作

优化误操作处理界面样式与交互

上级 1c2cceb1
正在显示 包含 329 行增加 和 279 行删除
src/views/components/ApplyRecords/errorHandle.vue
......@@ -2,39 +2,32 @@
<div class="detailsErrorHandle columnFlex">
<div class="detailsErrorHandleContent" v-scroll="requestOrderList">
<div class="addApply rowFlex spaceBetween">
<span></span>
<el-button
type="primary"
size="small"
icon="el-icon-plus"
@click="showAddErrorHandle = true,info = null"
>新增误操作</el-button>
<span></span>
<el-button type="primary" size="small" icon="el-icon-plus"
@click="showAddErrorHandle = true, info = null">新增误操作</el-button>
</div>
<el-form class="filterList" label-position="top" size="small">
<el-form-item label="角色名称" style="margin-bottom:15px;">
<searchSelect :account-change="accountChange" style="width:100%;" placeholder="请输入角色名称" @result="selectResult" />
<searchSelect :account-change="accountChange" style="width:100%;" placeholder="请输入角色名称"
@result="selectResult" />
</el-form-item>
<el-form-item label="状态" style="margin-bottom:15px;">
<el-select v-model="pay_type" clearable placeholder="状态" style="width:100%;" @change="payTypeResult">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="创建时间" style="margin-bottom:15px;">
<el-date-picker v-model="searchDate" type="daterange" clearable style="width:100%;" value-format="yyyy-MM-dd" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateResult"> </el-date-picker>
<el-date-picker v-model="searchDate" type="daterange" clearable style="width:100%;" value-format="yyyy-MM-dd"
range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateResult"> </el-date-picker>
</el-form-item>
</el-form>
<div class="list">
<!-- 过滤条件 -->
<!-- 订单列表 -->
<div class="orderDetailsScroll">
<div v-if="orderList.length>0" class="orderDetailsScrollContent">
<div v-for="(item,index) in orderList" :key="index" class="orderDetails">
<div class="orderDetailsScroll">
<div v-if="orderList.length > 0" class="orderDetailsScrollContent">
<div v-for="(item, index) in orderList" :key="index" class="orderDetails">
<div class="orderDetailsList">
<el-collapse v-model="collapseValue" @change="handleChange">
<el-collapse-item :name="item.order_id">
......@@ -61,18 +54,26 @@
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex">
<span class="label">状态</span>
<p v-if="item.approval_status==1" class="unhandle" style="margin-left:10px;">{{ item.approval_status_text }}</p>
<p v-else-if="item.approval_status==2" style="margin-left:10px;" class="noSend">{{ item.approval_status_text }}</p>
<p v-else-if="item.approval_status==3" style="margin-left:10px;" class="sended">{{ item.approval_status_text }}</p>
<p v-else-if="item.approval_status==4" style="margin-left:10px;" class="sendFail">{{ item.approval_status_text }}</p>
<p v-else-if="item.approval_status==5" style="margin-left:10px;" class="handled">{{ item.approval_status_text }}</p>
<p v-if="item.approval_status == 1" class="unhandle" style="margin-left:10px;">{{
item.approval_status_text }}</p>
<p v-else-if="item.approval_status == 2" style="margin-left:10px;" class="noSend">{{
item.approval_status_text }}</p>
<p v-else-if="item.approval_status == 3" style="margin-left:10px;" class="sended">{{
item.approval_status_text }}</p>
<p v-else-if="item.approval_status == 4" style="margin-left:10px;" class="sendFail">{{
item.approval_status_text }}
</p>
<p v-else-if="item.approval_status == 5" style="margin-left:10px;" class="handled">{{
item.approval_status_text }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex">
<span class="label">补发道具</span>
<div v-if="item.reissue_prop.length" style="width:75%;">
<p v-for="(items,indexs) in item.reissue_prop" :key="indexs" class="text">{{ items.name }}{{ `(${items.num})` }}</p>
<p v-for="(items, indexs) in item.reissue_prop" :key="indexs" class="text">{{ items.name }}{{
`(${items.num})` }}
</p>
</div>
</div>
</div>
......@@ -80,7 +81,9 @@
<div class="rowFlex">
<span class="label">返回道具</span>
<div v-if="item.return_prop.length" style="width:75%;">
<p v-for="(items,indexs) in item.return_prop" :key="indexs" class="text">{{ items.name }}{{ `(${items.num})` }}</p>
<p v-for="(items, indexs) in item.return_prop" :key="indexs" class="text">{{ items.name }}{{
`(${items.num})` }}
</p>
</div>
</div>
</div>
......@@ -97,7 +100,8 @@
</div>
<!-- 编辑误操作 -->
<addErrorHandle v-if="showAddErrorHandle" :show.sync="showAddErrorHandle" :info="info" title="玩家误操作" width="320px" @updateList="updateList" />
<addErrorHandle v-if="showAddErrorHandle" :show.sync="showAddErrorHandle" :info="info" title="玩家误操作" width="320px"
@updateList="updateList" />
</div>
</template>
......@@ -288,8 +292,8 @@ export default {
this.orderList.map(item => {
!item.remarks || item.remarks.length === 0 ? item.remarks = [{ remark: '' }] : ''
})
if (res.status_code == 1 && msg) {
this.$message.success(res.msg)
if (res.status_code == 1 && !msg) {
// this.$message.success(res.msg)
}
})
}
......@@ -298,298 +302,343 @@ export default {
</script>
<style lang="scss" scoped>
.detailsErrorHandle {
width: 100%;
height: 100%;
background: #fff;
margin-left: 2px;
position: relative;
.detailsTitle {
width: 100%;
padding: 0 10px;
height: 60px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
color: #333333;
}
}
.detailsErrorHandleContent {
width: 100%;
height: 100%;
background: #fff;
margin-left: 2px;
position: relative;
.detailsTitle {
padding: 20px 10px;
overflow: auto;
overflow-x: hidden;
.tabSelect {
width: 100%;
padding: 0 10px;
height: 60px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
border-bottom: 1px solid #EBEEF5;
cursor: pointer;
.tabSelectItem {
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
padding-top: 10px;
line-height: 47px;
cursor: pointer;
}
.tabSelectItemActive {
color: #409EFF;
border-bottom: 2px solid #409EFF;
}
}
.list {
width: 100%;
height: auto;
}
.contentItem {
position: relative;
.title {
position: absolute;
left: 10px;
top: 14px;
font-size: 14px;
color: #999999;
}
}
.detailsErrorHandleContent {
.item {
width: 100%;
height:100%;
padding: 20px 10px;
overflow: auto;
overflow-x: hidden;
.tabSelect{
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 6px 0;
transition: all 0.5s;
position: relative;
padding-left: 10px;
cursor: pointer;
div {
width: 100%;
height: 60px;
border-bottom: 1px solid #EBEEF5;
cursor: pointer;
.tabSelectItem{
font-size: 18px;
}
.remark {
::v-deep .el-textarea__inner {
height: 80px;
}
}
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: 10px;
}
.label {
color: #999999;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.dianFail {
display: inline-block;
width: 8px;
height: 8px;
background: #F45454;
border-radius: 5px;
}
.dian {
display: inline-block;
width: 8px;
height: 8px;
background: #409EFF;
border-radius: 5px;
}
.dian2 {
display: inline-block;
width: 8px;
height: 8px;
background: #FF9D02;
border-radius: 5px;
}
}
.orderMoney {
width: calc(100% + 40px);
height: 80px;
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem {
width: 50%;
text-align: center;
margin-top: 5px;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
padding-top: 10px;
line-height: 47px;
cursor: pointer;
}
.tabSelectItemActive{
p {
font-size: 22px;
color: #409EFF;
border-bottom: 2px solid #409EFF;
}
}
.list{
width: 100%;
height: auto;
}
.filterList {
margin-bottom: 10px;
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom: 10px;
}
.contentItem{
position: relative;
.title{
position: absolute;
left: 10px;
top: 14px;
font-size: 14px;
color: #999999;
}
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
.item {
width: 100%;
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 6px 0;
transition: all 0.5s;
position: relative;
padding-left: 10px;
cursor: pointer;
div{
width: 100%;
}
.remark{
::v-deep .el-textarea__inner{
height: 80px;
}
}
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: 10px;
}
.label {
color: #999999;
}
::v-deep .search-item .item-label {
margin-right: 20px;
}
}
.orderDetailsScroll {
width: 100%;
.orderDetailsScrollContent {
margin-bottom: 50px;
}
}
.orderDetails {
width: 100%;
height: auto;
margin-bottom: 10px;
position: relative;
.bridgeMain {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF9D02;
transform: rotate(48deg);
z-index: 100;
position: absolute;
right: 0;
top: 12px;
}
.dianFail{
display: inline-block;
width: 8px;
height: 8px;
background: #F45454;
border-radius: 5px;
}
.dian{
display: inline-block;
width: 8px;
height: 8px;
background: #409EFF;
border-radius: 5px;
}
.dian2{
display: inline-block;
width: 8px;
height: 8px;
background: #FF9D02;
border-radius: 5px;
}
}
.orderMoney{
width: calc(100% + 40px);
height: 80px;
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem{
width: 50%;
right: -6px;
top: 10px;
width: 50px;
text-align: center;
margin-top:5px;
span{
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
p{
font-size: 22px;
color: #409EFF;
}
}
}
.filterList{
margin-bottom: 10px;
.filterListInput{
width: 60%;
margin-left: 15px;
margin-bottom:10px;
}
.filterListDate{
width:150px;
margin-bottom:10px;
}
::v-deep .search-item .item-label{
margin-right: 20px;
}
}
.orderDetailsScroll{
width: 100%;
.orderDetailsScrollContent{
margin-bottom: 50px;
.bridge {
font-size: 50px;
position: absolute;
top: 0;
right: 0;
}
}
.orderDetails{
.orderDetailsTitle {
width: 100%;
height: auto;
margin-bottom: 10px;
position: relative;
.bridgeMain{
position: absolute;
top: 0px;
right:0px;
width:50px;
height:50px;
.text{
font-size: 8px;
background: #F9FAFF;
.money {
width: 100%;
height: auto;
padding-left: 10px;
.btns {
padding-right: 40px;
}
.btn {
background: #fff;
border-radius: 4px;
padding: 2px 5px;
margin-left: 10px;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.15);
color: #333333;
cursor: pointer;
}
.btnnot {
background: #FFDDDD;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF9D02;
transform: rotate(48deg);
z-index: 100;
position: absolute;
right:-6px;
top: 10px;
width: 50px;
text-align: center;
color: #F56C6C;
border: none;
}
.bridge{
font-size: 50px;
position: absolute;
top: 0;
right: 0;
.btnsuccess {
background: #E1FFF0;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #409EFF;
border: none;
}
}
.orderDetailsTitle{
width: 100%;
background: #F9FAFF;
.money{
width: 100%;
height: auto;
padding-left: 10px;
.btns{
padding-right: 40px;
}
.btn{
background: #fff;
border-radius: 4px;
padding: 2px 5px;
margin-left: 10px;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.15);
color: #333333;
cursor: pointer;
}
.btnnot{
background: #FFDDDD;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F56C6C;
border: none;
}
.btnsuccess{
background: #E1FFF0;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #409EFF;
border: none;
}
.sended{
padding: 0 8px;
height: 20px;
line-height: 20px;
background: #E1FFF0;
border-radius: 4px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #409EFF;
}
.noSend{
padding: 0 8px;
height: 20px;
line-height: 20px;
background: #FFFAE0;
border-radius: 4px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFA81D;
}
.sended {
padding: 0 8px;
height: 20px;
line-height: 20px;
background: #E1FFF0;
border-radius: 4px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #409EFF;
}
.text{
font-size: 14px;
.noSend {
padding: 0 8px;
height: 20px;
line-height: 20px;
background: #FFFAE0;
border-radius: 4px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
max-width: 200px;
overflow: hidden;
white-space: nowrap; /* 防止文字换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
color: #FFA81D;
}
}
.orderDetailsList{
width: 100%;
height: auto;
background: #FFFFFF;
border: 1px solid #EBEEF5;
position: relative;
.titleFix{
position: absolute;
left:10px;
top: 20px;
color: #999999;
}
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
/* 防止文字换行 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
}
}
::v-deep .el-tabs__item{
line-height: 26px;
font-size: 16px;
font-weight: 500;
.orderDetailsList {
width: 100%;
height: auto;
background: #FFFFFF;
border: 1px solid #EBEEF5;
position: relative;
.titleFix {
position: absolute;
left: 10px;
top: 20px;
color: #999999;
}
}
}
/* 已移除局部 el-collapse 样式，使用全局样式 */
}
.noContent{
width: 100%;
height: 100%;
font-size: 300px;
}
::v-deep .el-tabs__item {
line-height: 26px;
font-size: 16px;
font-weight: 500;
}
/* 已移除局部 el-collapse 样式，使用全局样式 */
.noContent {
width: 100%;
height: 100%;
font-size: 300px;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论