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

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