Skip to content

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

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

上级 1c2cceb1
正在显示 包含 128 行增加 和 78 行删除
src/views/components/ApplyRecords/errorHandle.vue
......@@ -3,38 +3,31 @@
<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>
<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 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)
}
})
}
......@@ -303,6 +307,7 @@ export default {
background: #fff;
margin-left: 2px;
position: relative;
.detailsTitle {
width: 100%;
padding: 0 10px;
......@@ -313,22 +318,26 @@ export default {
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
color: #333333;
}
}
.detailsErrorHandleContent {
width: 100%;
height:100%;
height: 100%;
padding: 20px 10px;
overflow: auto;
overflow-x: hidden;
.tabSelect{
.tabSelect {
width: 100%;
height: 60px;
border-bottom: 1px solid #EBEEF5;
cursor: pointer;
.tabSelectItem{
.tabSelectItem {
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
......@@ -337,18 +346,22 @@ export default {
line-height: 47px;
cursor: pointer;
}
.tabSelectItemActive{
.tabSelectItemActive {
color: #409EFF;
border-bottom: 2px solid #409EFF;
}
}
.list{
.list {
width: 100%;
height: auto;
}
.contentItem{
.contentItem {
position: relative;
.title{
.title {
position: absolute;
left: 10px;
top: 14px;
......@@ -356,6 +369,7 @@ export default {
color: #999999;
}
}
.item {
width: 100%;
height: auto;
......@@ -367,50 +381,59 @@ export default {
position: relative;
padding-left: 10px;
cursor: pointer;
div{
div {
width: 100%;
}
.remark{
::v-deep .el-textarea__inner{
.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{
.dianFail {
display: inline-block;
width: 8px;
height: 8px;
background: #F45454;
border-radius: 5px;
}
.dian{
.dian {
display: inline-block;
width: 8px;
height: 8px;
background: #409EFF;
border-radius: 5px;
}
.dian2{
.dian2 {
display: inline-block;
width: 8px;
height: 8px;
......@@ -419,60 +442,72 @@ export default {
}
}
.orderMoney{
.orderMoney {
width: calc(100% + 40px);
height: 80px;
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem{
.orderMoneyItem {
width: 50%;
text-align: center;
margin-top:5px;
span{
margin-top: 5px;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
p{
p {
font-size: 22px;
color: #409EFF;
}
}
}
.filterList{
.filterList {
margin-bottom: 10px;
.filterListInput{
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom:10px;
margin-bottom: 10px;
}
.filterListDate{
width:150px;
margin-bottom:10px;
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
::v-deep .search-item .item-label{
::v-deep .search-item .item-label {
margin-right: 20px;
}
}
.orderDetailsScroll{
.orderDetailsScroll {
width: 100%;
.orderDetailsScrollContent{
.orderDetailsScrollContent {
margin-bottom: 50px;
}
}
.orderDetails{
.orderDetails {
width: 100%;
height: auto;
margin-bottom: 10px;
position: relative;
.bridgeMain{
.bridgeMain {
position: absolute;
top: 0px;
right:0px;
width:50px;
height:50px;
.text{
right: 0px;
width: 50px;
height: 50px;
.text {
font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
......@@ -480,12 +515,13 @@ export default {
transform: rotate(48deg);
z-index: 100;
position: absolute;
right:-6px;
right: -6px;
top: 10px;
width: 50px;
text-align: center;
}
.bridge{
.bridge {
font-size: 50px;
position: absolute;
top: 0;
......@@ -493,17 +529,20 @@ export default {
}
}
.orderDetailsTitle{
.orderDetailsTitle {
width: 100%;
background: #F9FAFF;
.money{
.money {
width: 100%;
height: auto;
padding-left: 10px;
.btns{
.btns {
padding-right: 40px;
}
.btn{
.btn {
background: #fff;
border-radius: 4px;
padding: 2px 5px;
......@@ -513,21 +552,24 @@ export default {
color: #333333;
cursor: pointer;
}
.btnnot{
.btnnot {
background: #FFDDDD;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F56C6C;
border: none;
}
.btnsuccess{
.btnsuccess {
background: #E1FFF0;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #409EFF;
border: none;
}
.sended{
.sended {
padding: 0 8px;
height: 20px;
line-height: 20px;
......@@ -538,7 +580,8 @@ export default {
font-weight: 400;
color: #409EFF;
}
.noSend{
.noSend {
padding: 0 8px;
height: 20px;
line-height: 20px;
......@@ -550,26 +593,31 @@ export default {
color: #FFA81D;
}
}
.text{
.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; /* 超出部分显示省略号 */
white-space: nowrap;
/* 防止文字换行 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
}
.orderDetailsList{
.orderDetailsList {
width: 100%;
height: auto;
background: #FFFFFF;
border: 1px solid #EBEEF5;
position: relative;
.titleFix{
.titleFix {
position: absolute;
left:10px;
left: 10px;
top: 20px;
color: #999999;
}
......@@ -577,7 +625,8 @@ export default {
}
}
::v-deep .el-tabs__item{
::v-deep .el-tabs__item {
line-height: 26px;
font-size: 16px;
font-weight: 500;
......@@ -585,11 +634,11 @@ export default {
/* 已移除局部 el-collapse 样式，使用全局样式 */
.noContent{
.noContent {
width: 100%;
height: 100%;
font-size: 300px;
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论