🎨 货币规则界面展示效果调整

pages/rules/currency.vue

@@ -4,34 +4,35 @@
       <h1>货币规则</h1>
     </el-col>
     <el-col>
-      <el-table
+      <el-table :data="currencyRules">
-        :data="currencyRules"
-        style="width: 100%">
         <el-table-column
-          label="名称"
+          label="规则名称"
           width="180"
           prop="ruleName">
         </el-table-column>
         <el-table-column
-          label="描述"
+          label="奖励/消耗(巴旦木)"
-          width="180"
-          prop="ruleDescription">
-        </el-table-column>
-        <el-table-column
-          label="奖励/消耗"
           width="180"
           prop="money">
+          <template slot-scope="scope">
+            <span v-if="scope.row.awardStatus === '0'" style="color: limegreen;font-weight: bold;">+{{ scope.row.money }}</span>
+            <span v-else style="color: red;font-weight: bold;">-{{ scope.row.money }}</span>
+          </template>
         </el-table-column>
         <el-table-column
-          label="上限"
+          label="上限(巴旦木)"
           width="180"
           prop="maximumMoney">
         </el-table-column>
         <el-table-column
-          label="重复"
+          label="重复(天/次)"
           width="180"
           prop="repeatDays">
         </el-table-column>
+        <el-table-column
+          label="规则说明"
+          prop="ruleDescription">
+        </el-table-column>
       </el-table>
     </el-col>
   </el-row>
@@ -53,6 +54,9 @@ export default {
     ...mapState({
       currencyRules: state => state.rule.currencyRules.data
     })
+  },
+  mounted() {
+    this.$store.commit('setActiveMenu', 'currencyRule');
   }
 }
 </script>