订单状态变颜色

jsowell-ui/src/views/order/order/index.vue

@@ -154,8 +154,12 @@
           />
         </template>
       </el-table-column>-->
+      <el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe">
+        <template slot-scope="scope">
+          <el-tag :type="getTagType(scope.row)">{{scope.row.orderStatusDescribe}}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="交易流水号" align="center" prop="transactionCode" width="280px"/>
-      <el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe"/>
       <el-table-column label="会员昵称" align="center" prop="nickName" width="120px"/>
       <el-table-column label="电话号码" align="center" prop="mobileNumber" width="120px"/>
       <el-table-column label="站点" align="center" prop="stationName"/>
@@ -288,6 +292,15 @@ export default {
     this.dataLoading();
   },
   methods: {
+    getTagType(row) {
+      for (let i = 0; i < this.dict.type.order_status.length; i++) {
+        var orderStatus = this.dict.type.order_status[i];
+        if (orderStatus.value === row.orderStatus) {
+          return orderStatus.raw.listClass;
+        }
+      }
+      return "";
+    },
     async dataLoading() {
       console.log("加载订单列表页数据...")
       // 设置默认日期
@@ -495,6 +508,12 @@ export default {
         this.queryParams.endTime = newValue[1];
       }
     },
-  }
+  },
+  computed: {
+    tagType(row){
+      console.log("tagType row", row);
+      return "info";
+    }
+  },
 };
 </script>