Skip to content

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

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

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