fix: 1.修改弹窗，还有订单列表得支付状态的样式。

src/renderer/views/cashier/components/hangUpDialog.vue

@@ -184,6 +184,8 @@ export default {
 <style lang="scss" scoped>
 .order-list {
   margin-top: 6px;
+  height: 50vh;
+  overflow-y: auto;
   .order-item {
     width: 20%;
     float: left;

src/renderer/views/cashier/components/orderDetail.vue

@@ -1,96 +1,122 @@
 <template>
-  <el-dialog :title="$t('ding-dan-xiang-qing')" :visible.sync="showDialog" class="common-dialog" width="80%" @close="cancel" destroy-on-close append-to-body>
-    <div class="order-detail-container">
-      <div class="main-panel" v-if="orderInfo.id">
-        <div class="panel">
-          <div class="title">{{ $t('ji-chu-xin-xi') }}</div>
-          <div class="content">
-            <el-row class="row">
-              <el-col :span="8">
-                <span class="head">{{ $t('ding-dan-hao') }}：</span>
-                <span class="control-label">{{ orderInfo.orderSn }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('zong-jin-e') }}：</span>
-                <span class="control-label">￥{{ orderInfo.amount }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('ding-dan-zhuang-tai') }}：</span>
-                <span class="control-label normal-status">{{ orderInfo.statusText }}</span>
-              </el-col>
-            </el-row>
-            <el-row class="row">
-              <el-col :span="8">
-                <span class="head">{{ $t('ding-dan-lei-xing') }}：</span>
-                <span class="control-label">{{ orderInfo.typeName }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('ding-dan-shi-jian') }}：</span>
-                <span class="control-label">{{ orderInfo.createTime }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('xia-dan-zhuo-ma') }}：</span>
-                <span class="control-label">{{ orderInfo.tableInfo ? orderInfo.tableInfo.code : "-" }}</span>
-              </el-col>
-            </el-row>
-            <el-row class="row">
-              <el-col :span="8">
-                <span class="head">{{ $t('bei-zhu-xin-xi') }}：</span>
-                <span class="control-label">{{ orderInfo.remark ? orderInfo.remark : '-'}}</span>
-              </el-col>
-            </el-row>
-          </div>
+  <el-dialog
+    :title="$t('ding-dan-xiang-qing')"
+    :visible.sync="showDialog"
+    class="common-dialog"
+    width="80%"
+    @close="cancel"
+    destroy-on-close
+    append-to-body
+  >
+    <div class="main-panel" v-if="orderInfo.id">
+      <div class="panel">
+        <div class="title">{{ $t('ji-chu-xin-xi') }}</div>
+        <div class="content">
+          <el-row class="row">
+            <el-col :span="8">
+              <span class="head">{{ $t('ding-dan-hao') }}：</span>
+              <span class="control-label">{{ orderInfo.orderSn }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('zong-jin-e') }}：</span>
+              <span class="control-label">￥{{ orderInfo.amount }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('ding-dan-zhuang-tai') }}：</span>
+              <!-- <span :class="`control-label ${changeClassName(orderInfo.statusText)}`">
+                {{ orderInfo.statusText }}
+              </span> -->
+              <span class="control-label normal-status">{{ orderInfo.statusText }}</span>
+            </el-col>
+          </el-row>
+          <el-row class="row">
+            <el-col :span="8">
+              <span class="head">{{ $t('ding-dan-lei-xing') }}：</span>
+              <span class="control-label">{{ orderInfo.typeName }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('ding-dan-shi-jian') }}：</span>
+              <span class="control-label">{{ orderInfo.createTime }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('xia-dan-zhuo-ma') }}：</span>
+              <span class="control-label">
+                {{ orderInfo.tableInfo ? orderInfo.tableInfo.code : '-' }}
+              </span>
+            </el-col>
+          </el-row>
+          <el-row class="row">
+            <el-col :span="8">
+              <span class="head">{{ $t('bei-zhu-xin-xi') }}：</span>
+              <span class="control-label">{{ orderInfo.remark ? orderInfo.remark : '-' }}</span>
+            </el-col>
+          </el-row>
         </div>
-        <div class="panel">
-          <div class="title">{{ $t('zhi-fu-xin-xi') }}</div>
-          <div class="content">
-            <el-row class="row">
-              <el-col :span="8">
-                <span class="head">{{ $t('zhi-fu-jin-e') }}：</span>
-                <span class="control-label">￥{{ orderInfo.payAmount.toFixed(2) }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('zhi-fu-zhuang-tai') }}：</span>
-                <span class="control-label payed-status" v-if="orderInfo.payStatus == 'B'">{{ getName(payStatusList, orderInfo.payStatus) }}</span>
-                <span class="control-label normal-status" v-else>{{ getName(payStatusList, orderInfo.payStatus) }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('jian-mian-jin-e') }}：</span>
-                <span class="control-label">￥{{ orderInfo.discount.toFixed(2) }}</span>
-              </el-col>
-            </el-row>
-            <el-row class="row">
-              <el-col :span="8">
-                <span class="head">{{ $t('zhi-fu-fang-shi') }}：</span>
-                <span class="control-label">{{ getName(payTypeList, orderInfo.payType) }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('zhi-fu-shi-jian') }}：</span>
-                <span class="control-label">{{ orderInfo.payTime ? orderInfo.payTime : '-' }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('shi-yong-qia-quan') }}：</span>
-                <span class="control-label">{{ orderInfo.couponInfo ? '￥' + orderInfo.couponInfo.amount + '（' + orderInfo.couponInfo.name + '）' : '-' }}</span>
-              </el-col>
-            </el-row>
-            <el-row class="row">
-              <el-col :span="8">
-                <span class="head">{{ $t('shi-yong-ji-fen') }}：</span>
-                <span class="control-label">{{ orderInfo.usePoint ? orderInfo.usePoint : 0 }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('ji-fen-jin-e') }}：</span>
-                <span class="control-label">￥{{ orderInfo.pointAmount.toFixed(2) }}</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('pei-song-fei-yong') }}：</span>
-                <span class="control-label">￥{{ orderInfo.deliveryFee.toFixed(2) }}</span>
-              </el-col>
-            </el-row>
-          </div>
+      </div>
+      <div class="panel">
+        <div class="title">{{ $t('zhi-fu-xin-xi') }}</div>
+        <div class="content">
+          <el-row class="row">
+            <el-col :span="8">
+              <span class="head">{{ $t('zhi-fu-jin-e') }}：</span>
+              <span class="control-label">￥{{ orderInfo.payAmount.toFixed(2) }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('zhi-fu-zhuang-tai') }}：</span>
+              <!-- <span class="control-label payed-status" v-if="orderInfo.payStatus == 'B'">
+                {{ getName(payStatusList, orderInfo.payStatus) }}
+              </span>
+              <span class="control-label normal-status" v-else>
+                {{ getName(payStatusList, orderInfo.payStatus) }}
+              </span> -->
+
+              <span :class="`control-label ${changeClassName(orderInfo.payStatus)}`">
+                {{ getName(payStatusList, orderInfo.payStatus) }}
+              </span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('jian-mian-jin-e') }}：</span>
+              <span class="control-label">￥{{ orderInfo.discount.toFixed(2) }}</span>
+            </el-col>
+          </el-row>
+          <el-row class="row">
+            <el-col :span="8">
+              <span class="head">{{ $t('zhi-fu-fang-shi') }}：</span>
+              <span class="control-label">{{ getName(payTypeList, orderInfo.payType) }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('zhi-fu-shi-jian') }}：</span>
+              <span class="control-label">{{ orderInfo.payTime ? orderInfo.payTime : '-' }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('shi-yong-qia-quan') }}：</span>
+              <span class="control-label">
+                {{
+                  orderInfo.couponInfo
+                    ? '￥' + orderInfo.couponInfo.amount + '（' + orderInfo.couponInfo.name + '）'
+                    : '-'
+                }}
+              </span>
+            </el-col>
+          </el-row>
+          <el-row class="row">
+            <el-col :span="8">
+              <span class="head">{{ $t('shi-yong-ji-fen') }}：</span>
+              <span class="control-label">{{ orderInfo.usePoint ? orderInfo.usePoint : 0 }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('ji-fen-jin-e') }}：</span>
+              <span class="control-label">￥{{ orderInfo.pointAmount.toFixed(2) }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('pei-song-fei-yong') }}：</span>
+              <span class="control-label">￥{{ orderInfo.deliveryFee.toFixed(2) }}</span>
+            </el-col>
+          </el-row>
         </div>
+      </div>
 
-        <div class="panel">
+      <!-- <div class="panel">
           <div class="title">{{ $t('hui-yuan-xin-xi') }}</div>
           <div class="content">
             <el-row class="row">
@@ -115,89 +141,106 @@
               </el-col>
             </el-row>
           </div>
-        </div>
+        </div> -->
 
-        <div class="panel">
-          <div class="title">{{ $t('shang-pin-xin-xi') }}</div>
-          <div class="content">
-            <el-table ref="tables" v-loading="loading" :data="orderInfo.goods">
-              <el-table-column :label="$t('shang-pin-ID')" prop="id" width="66"/>
-              <el-table-column :label="$t('tu-pian')" align="center" prop="name">
-                <template slot-scope="scope">
-                  <img class="goods-logo" :src="scope.row.image"/>
-                </template>
-              </el-table-column>
-              <el-table-column :label="$t('ming-cheng')" align="left" prop="name">
-                <template slot-scope="scope">
-                  <span class="goods-name">{{ scope.row.name }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column :label="$t('gui-ge')" align="center">
-                <template slot-scope="scope">
-                  <span v-if="scope.row.specList">
-                    <span class="spec-item" v-for="spec in scope.row.specList">{{ spec.specValue }}</span>
+      <div class="panel">
+        <div class="title">{{ $t('shang-pin-xin-xi') }}</div>
+        <div class="content">
+          <el-table ref="tables" v-loading="loading" :data="orderInfo.goods">
+            <el-table-column :label="$t('shang-pin-ID')" prop="id" width="66" />
+            <el-table-column :label="$t('tu-pian')" align="center" prop="name">
+              <template slot-scope="scope">
+                <img class="goods-logo" :src="scope.row.image" />
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('ming-cheng')" align="left" prop="name">
+              <template slot-scope="scope">
+                <span class="goods-name">{{ scope.row.name }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('gui-ge')" align="center">
+              <template slot-scope="scope">
+                <span v-if="scope.row.specList">
+                  <span class="spec-item" v-for="spec in scope.row.specList">
+                    {{ spec.specValue }}
                   </span>
-                  <span v-else>--</span>
-                </template>
-              </el-table-column>
-              <el-table-column :label="$t('jia-ge')" align="center" prop="price" />
-              <el-table-column :label="$t('you-hui-jin-e')" align="center" prop="discount" />
-              <el-table-column :label="$t('shu-liang')" align="center" prop="num" />
-            </el-table>
-          </div>
+                </span>
+                <span v-else>--</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('jia-ge')" align="center" prop="price" />
+            <el-table-column :label="$t('you-hui-jin-e')" align="center" prop="discount" />
+            <el-table-column :label="$t('shu-liang')" align="center" prop="num" />
+          </el-table>
         </div>
+      </div>
 
-        <div class="panel" v-if="orderInfo.type=='goods'">
-          <div class="title">{{ $t('pei-song-xin-xi') }}</div>
-          <div class="content">
-            <el-row class="row">
-              <el-col :span="8">
-                <span class="head">{{ $t('pei-song-fang-shi') }}：</span>
-                <span class="control-label" v-if="orderInfo.orderMode == 'oneself'">{{ $t('men-dian-zi-ti') }}</span>
-                <span class="control-label" v-else>{{ $t('wu-liu-pei-song') }}</span>
-              </el-col>
-              <el-col :span="16" v-if="orderInfo.orderMode == 'oneself'">
-                <span class="head">{{ $t('zi-ti-di-zhi') }}：</span>
-                <span class="control-label">{{orderInfo.storeInfo.name}} {{orderInfo.storeInfo.phone}} {{orderInfo.storeInfo.address}}</span>
-              </el-col>
-              <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
-                <span class="head">{{ $t('shou-huo-ren') }}：</span>
-                <span class="control-label">{{ orderInfo.address.name ? orderInfo.address.name : '--' }}</span>
-              </el-col>
-              <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
-                <span class="head">{{ $t('lian-xi-dian-hua') }}：</span>
-                <span class="control-label">{{ orderInfo.address.mobile ? orderInfo.address.mobile : '-' }}</span>
-              </el-col>
-            </el-row>
-            <el-row class="row">
-              <el-col :span="24" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
-                <span class="head">{{ $t('xiang-xi-di-zhi') }}：</span>
-                <span class="control-label">{{orderInfo.address.provinceName}}{{orderInfo.address.cityName}}{{orderInfo.address.regionName}}{{orderInfo.address.detail}}</span>
-              </el-col>
-            </el-row>
-          </div>
+      <div class="panel" v-if="orderInfo.type == 'goods'">
+        <div class="title">{{ $t('pei-song-xin-xi') }}</div>
+        <div class="content">
+          <el-row class="row">
+            <el-col :span="8">
+              <span class="head">{{ $t('pei-song-fang-shi') }}：</span>
+              <span class="control-label" v-if="orderInfo.orderMode == 'oneself'">
+                {{ $t('men-dian-zi-ti') }}
+              </span>
+              <span class="control-label" v-else>{{ $t('wu-liu-pei-song') }}</span>
+            </el-col>
+            <el-col :span="16" v-if="orderInfo.orderMode == 'oneself'">
+              <span class="head">{{ $t('zi-ti-di-zhi') }}：</span>
+              <span class="control-label">
+                {{ orderInfo.storeInfo.name }} {{ orderInfo.storeInfo.phone }}
+                {{ orderInfo.storeInfo.address }}
+              </span>
+            </el-col>
+            <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
+              <span class="head">{{ $t('shou-huo-ren') }}：</span>
+              <span class="control-label">
+                {{ orderInfo.address.name ? orderInfo.address.name : '--' }}
+              </span>
+            </el-col>
+            <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
+              <span class="head">{{ $t('lian-xi-dian-hua') }}：</span>
+              <span class="control-label">
+                {{ orderInfo.address.mobile ? orderInfo.address.mobile : '-' }}
+              </span>
+            </el-col>
+          </el-row>
+          <el-row class="row">
+            <el-col :span="24" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
+              <span class="head">{{ $t('xiang-xi-di-zhi') }}：</span>
+              <span class="control-label">
+                {{ orderInfo.address.provinceName }}{{ orderInfo.address.cityName
+                }}{{ orderInfo.address.regionName }}{{ orderInfo.address.detail }}
+              </span>
+            </el-col>
+          </el-row>
         </div>
+      </div>
 
-        <div class="panel" v-if="orderInfo.expressInfo">
-          <div class="title">{{ $t('wu-liu-xin-xi') }}</div>
-          <div class="content">
-            <el-row class="row">
-              <el-col :span="8">
-                <span class="head">{{ $t('wu-liu-gong-si') }}：</span>
-                <span class="control-label" v-if="orderInfo.expressInfo.expressCompany">{{ orderInfo.expressInfo.expressCompany }}</span>
-                <span class="control-label" v-else>--</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('wu-liu-dan-hao') }}：</span>
-                <span class="control-label" v-if="orderInfo.expressInfo.expressNo">{{ orderInfo.expressInfo.expressNo }}</span>
-                <span class="control-label" v-else>--</span>
-              </el-col>
-              <el-col :span="8">
-                <span class="head">{{ $t('fa-huo-shi-jian') }}：</span>
-                <span class="control-label">{{orderInfo.expressInfo.expressTime}}</span>
-              </el-col>
-            </el-row>
-          </div>
+      <div class="panel" v-if="orderInfo.expressInfo">
+        <div class="title">{{ $t('wu-liu-xin-xi') }}</div>
+        <div class="content">
+          <el-row class="row">
+            <el-col :span="8">
+              <span class="head">{{ $t('wu-liu-gong-si') }}：</span>
+              <span class="control-label" v-if="orderInfo.expressInfo.expressCompany">
+                {{ orderInfo.expressInfo.expressCompany }}
+              </span>
+              <span class="control-label" v-else>--</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('wu-liu-dan-hao') }}：</span>
+              <span class="control-label" v-if="orderInfo.expressInfo.expressNo">
+                {{ orderInfo.expressInfo.expressNo }}
+              </span>
+              <span class="control-label" v-else>--</span>
+            </el-col>
+            <el-col :span="8">
+              <span class="head">{{ $t('fa-huo-shi-jian') }}：</span>
+              <span class="control-label">{{ orderInfo.expressInfo.expressTime }}</span>
+            </el-col>
+          </el-row>
         </div>
       </div>
     </div>
@@ -205,18 +248,18 @@
 </template>
 
 <script>
-import { getOrderInfo } from "@/api/order";
+import { getOrderInfo } from '@/api/order'
 export default {
-  name: "orderDetail",
+  name: 'orderDetail',
   props: {
-    showDialog:{
-      type:[Boolean],
-      default:()=>false
+    showDialog: {
+      type: [Boolean],
+      default: () => false,
+    },
+    orderId: {
+      type: [String],
+      default: () => '',
     },
-    orderId:{
-      type:[String],
-      default:()=> ''
-    }
   },
   data() {
     return {
@@ -224,108 +267,129 @@ export default {
       loading: false,
       payTypeList: [],
       payStatusList: [],
-      orderInfo: { payAmount: 0, discount: 0, pointAmount: 0, userInfo: {} }
-    };
+      orderInfo: { payAmount: 0, discount: 0, pointAmount: 0, userInfo: {} },
+    }
   },
   watch: {
     showDialog(value) {
       if (value) {
-          this.getOrderInfo(this.orderId);
+        this.getOrderInfo(this.orderId)
       }
-    }
+    },
   },
   methods: {
     // 查询配置
     getOrderInfo(orderId) {
-      this.loading = true;
-      getOrderInfo(orderId).then(response => {
-          this.loading = false;
-          this.orderInfo = response.data.orderInfo;
-          this.payTypeList = response.data.payTypeList;
-          this.payStatusList = response.data.payStatusList;
-        }
-      ).catch(() => {
-         // empty
-      });
+      this.loading = true
+      getOrderInfo(orderId)
+        .then((response) => {
+          this.loading = false
+          this.orderInfo = response.data.orderInfo
+          this.payTypeList = response.data.payTypeList
+          this.payStatusList = response.data.payStatusList
+        })
+        .catch(() => {
+          // empty
+        })
     },
     // 取消按钮
     cancel() {
-      this.$emit('closeDialog');
-    }
-  }
-};
+      this.$emit('closeDialog')
+    },
+    // 支付状态得class
+    changeClassName(status) {
+      if (status == 'B' || status == '已支付') {
+        return 'payed-status'
+      } else if (status == 'A' || status == '待支付') {
+        return ' unpaid'
+      } else {
+        return 'normal-status'
+      }
+    },
+  },
+}
 </script>
 <style rel="stylesheet/scss" lang="scss">
-    .main-panel {
-         margin: 0px;
-         padding: 5px;
-        .panel {
-            border: solid 1px #cccccc;
-            min-height: 100px;
-            border-radius: 2px;
-            margin-top: 10px;
-            .title {
-               font-weight: bold;
-               margin-top: 10px;
-               margin-left: 5px;
-               padding-left: 5px;
-               color: #333333;
-               border-left: 5px solid rgb(254,106,0);
-            }
-           .content {
-              padding: 20px;
-              .goods-logo {
-                 width: 45px;
-                 height: 45px;
-                 border: solid 1px #cccccc;
-              }
-             .spec-item {
-                 color: #666666;
-                 background: #ffffff;
-                 border: #666666 solid 1px;
-                 border-radius: 20px;
-                 padding: 2px 8px 2px 8px;
-                 margin-right: 5px;
-             }
-              .row {
-                min-height: 40px;
-                verticle-align: middle;
-                display: flex;
-                line-height: 40px;
-                .payed-status {
-                    color: #52c41a;
-                    background: #f6ffed;
-                    border: #b7eb8f solid 1px;
-                    border-radius: 20px;
-                    padding: 5px 8px 2px 8px;
-                    font-size: 90%;
-                }
-                .normal-status {
-                    color: #666666;
-                    background: #ffffff;
-                    border: #666666 solid 1px;
-                    border-radius: 20px;
-                    padding: 5px 8px 2px 8px;
-                    font-size: 90%;
-                }
-              }
-              .head {
-                 color: rgb(164,164,164);
-                 min-width: 120px;
-                 text-align: right;
-                 display: block;
-                 float: left;
-              }
-             .control-text {
-               display: block;
-               background: #f5f5f5;
-               border-radius: 10px;
-               margin-left: 120px;
-               margin-top: 5px;
-               line-height: 22px;
-               padding: 5px 10px 5px 10px;
-             }
-           }
+.main-panel {
+  margin: 0px;
+  padding: 5px;
+  max-height: 65vh;
+  overflow-y: auto;
+  .panel {
+    border: solid 1px #cccccc;
+    min-height: 100px;
+    border-radius: 2px;
+    margin-top: 10px;
+    .title {
+      font-weight: bold;
+      margin-top: 10px;
+      margin-left: 5px;
+      padding-left: 5px;
+      color: #333333;
+      border-left: 5px solid rgb(254, 106, 0);
+    }
+    .content {
+      padding: 20px;
+      .goods-logo {
+        width: 45px;
+        height: 45px;
+        border: solid 1px #cccccc;
+      }
+      .spec-item {
+        color: #666666;
+        background: #ffffff;
+        border: #666666 solid 1px;
+        border-radius: 20px;
+        padding: 2px 8px 2px 8px;
+        margin-right: 5px;
+      }
+      .row {
+        min-height: 40px;
+        verticle-align: middle;
+        display: flex;
+        line-height: 40px;
+        .payed-status {
+          color: #52c41a;
+          background: #f6ffed;
+          border: #b7eb8f solid 1px;
+          border-radius: 20px;
+          padding: 2px 8px;
+          font-size: 90%;
+        }
+        .normal-status {
+          color: #666;
+          background: white;
+          border: #999 solid 1px;
+          border-radius: 20px;
+          padding: 2px 8px;
+          font-size: 90%;
+        }
+        .unpaid {
+          color: #f67f20;
+          background: rgba(#f67f20, 0.2);
+          border: #f67f20 solid 1px;
+          border-radius: 20px;
+          padding: 2px 8px;
+          font-size: 90%;
         }
+      }
+      .head {
+        color: rgb(164, 164, 164);
+        min-width: 120px;
+        text-align: right;
+        display: block;
+        float: left;
+      }
+      .control-text {
+        display: block;
+        background: #f5f5f5;
+        border-radius: 10px;
+        margin-left: 120px;
+        margin-top: 5px;
+        line-height: 22px;
+        padding: 5px 10px 5px 10px;
+      }
     }
+  }
+}
 </style>

src/renderer/views/cashier/components/orderList.vue

@@ -171,7 +171,9 @@
       </el-table-column> -->
       <el-table-column :label="$t('ding-dan-zhuang-tai')" align="center" width="80" prop="status">
         <template slot-scope="scope">
-          <span class="status-normal">{{ getName(statusList, scope.row.status) }}</span>
+          <span :class="changeClassName(scope?.row?.status)">
+            {{ getName(statusList, scope.row.status) }}
+          </span>
         </template>
       </el-table-column>
       <!-- <el-table-column :label="$t('pei-song-fang-shi')" align="center" prop="orderMode">
@@ -1160,6 +1162,16 @@ export default {
           break
       }
     },
+    // 支付状态得class
+    changeClassName(status) {
+      if (status == 'B') {
+        return 'payed-status'
+      } else if (status == 'A') {
+        return ' unpaid'
+      } else {
+        return 'normal-status'
+      }
+    },
   },
 }
 </script>
@@ -1177,34 +1189,59 @@ export default {
   overflow: overlay !important;
 }
 .order-container {
-    position: absolute;
-    top: 50px;
-    left: 165px;
-    right: 10px;
-    height: 68%;
-    .search-form {
-       border: solid 1px #cccccc;
-       margin-top: 0px;
-       padding: 15px 10px 0px 10px;
-       background: #f5f5f5;
-       margin-bottom: 5px;
-       border-radius: 3px;
-    }
-    .pagination {
-      position: fixed;
-      bottom: 10px;
-      right: 150px;
-      height: 50px;
-      min-width: 730px;
-      line-height: 50px;
-      margin-top: 10px;
-      display: block;
-      background: #fff;
-      border: 1px solid #eee;
-      // color: #000;
-      border-radius: 5px;
-      z-index: 99999;
-    }
+  position: absolute;
+  top: 50px;
+  left: 165px;
+  right: 10px;
+  height: 68%;
+  .search-form {
+    // border: solid 1px #cccccc;
+    margin-top: 0px;
+    padding: 15px 0px 0px 0px;
+    //  background: #f5f5f5;
+    margin-bottom: 5px;
+    border-radius: 3px;
+  }
+  .pagination {
+    position: fixed;
+    bottom: 10px;
+    right: 150px;
+    height: 50px;
+    min-width: 730px;
+    line-height: 50px;
+    margin-top: 10px;
+    display: block;
+    background: #fff;
+    border: 1px solid #eee;
+    // color: #000;
+    border-radius: 5px;
+    z-index: 99999;
+  }
+
+  .payed-status {
+    color: #52c41a;
+    background: #f6ffed;
+    border: #b7eb8f solid 1px;
+    border-radius: 20px;
+    padding: 2px 8px;
+    font-size: 90%;
+  }
+  .normal-status {
+    color: #666;
+    background: white;
+    border: #999 solid 1px;
+    border-radius: 20px;
+    padding: 2px 8px;
+    font-size: 90%;
+  }
+  .unpaid {
+    color: #f67f20;
+    background: rgba(#f67f20, 0.2);
+    border: #f67f20 solid 1px;
+    border-radius: 20px;
+    padding: 2px 8px;
+    font-size: 90%;
+  }
 }
 </style>
 <style scoped>

src/renderer/views/cashier/index.vue

@@ -1435,7 +1435,7 @@ export default {
     .title {
       position: fixed;
       height: 106px;
-      width: calc(100% - 465px);
+      width: calc(100% - 475px);
       min-width: 700px;
       background: #ffffff;
       padding: 5px;