拼团购后台管理功能 样式调整

src/views/modules/custom/groupbuy-detail.vue

@@ -35,15 +35,15 @@
         <el-link type="primary" @click="evaluationVisible = true">查看</el-link>
       </el-form-item>
       <el-form-item label="状态" prop="groupBuyStatus">
-        <div v-if="dataForm.groupBuyStatus === 0">团购中</div>
+        <div v-if="dataForm.groupBuyStatus === 0" style="color: #00A066">团购中</div>
-        <div v-if="dataForm.groupBuyStatus === 5">已结束</div>
+        <div v-if="dataForm.groupBuyStatus === 5" style="color: #E30000">已结束</div>
         <div v-if="dataForm.groupBuyStatus === 10">已取消</div>
       </el-form-item>
       <el-form-item v-if="dataForm.groupBuyStatus === 10" label="取消原因" prop="cancelReason">
         <div>{{ dataForm.cancelReason }}</div>
       </el-form-item>
       <el-form-item v-if="dataForm.topFlag === 1" label="置顶状态" prop="topFlag">
-        <div>已置顶</div>
+        <div style="color: #E30000">已置顶</div>
       </el-form-item>
       <el-form-item v-if="dataForm.topFlag === 1" label="置顶时间" prop="topTime">
         <div>{{ dataForm.topTime }}</div>

src/views/modules/custom/groupbuyinfo.vue

@@ -42,13 +42,13 @@
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" :cell-style="cellStyle" style="width: 100%;">
         <el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="groupBuyTitle" label="标题" header-align="center" align="center" width="260px"></el-table-column>
+        <el-table-column show-overflow-tooltip prop="groupBuyTitle" label="标题" header-align="center" align="center" width="250px"></el-table-column>
         <el-table-column show-overflow-tooltip prop="groupBuyContent" label="内容" header-align="center" align="center" width="300px"></el-table-column>
+        <el-table-column prop="groupBuyMobile" label="联系电话" header-align="center" align="center"  width="120px"></el-table-column>
         <el-table-column prop="groupBuyStatus" label="状态" header-align="center" align="center" width="100px" :formatter="statusFormat"></el-table-column>
         <el-table-column prop="createdTime" label="发布时间" header-align="center" align="center" width="160px"></el-table-column>
-        <el-table-column prop="topFlag" label="置顶状态" header-align="center" align="center"  width="100px" :formatter="topFlagFormat"></el-table-column>
         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center">
           <template slot-scope="scope">
             <el-button  type="text" size="mini" @click="groupBuyDetailHandle(scope.row.id)">查看</el-button>
@@ -168,14 +168,6 @@ export default {
         this.$refs.groupbuyDetail.init()
       })
     },
-    topFlagFormat: function (row, column) {
-      let topFlag = row.topFlag
-      if (topFlag === 0) {
-        return '未置顶'
-      } else if (topFlag === 1) {
-        return '已置顶'
-      }
-    },
     statusFormat: function (row, column) {
       let groupBuyStatus = row.groupBuyStatus
       if (groupBuyStatus === 0) {
@@ -210,6 +202,13 @@ export default {
           this.getDataList()
         }).catch(() => {})
       }).catch(() => {})
+    },
+    cellStyle (row, column, rowIndex, columnIndex) {
+      if (row.column.label === '状态' && row.row.groupBuyStatus === 0) {
+        return 'color:#00A066'
+      } else if (row.column.label === '状态' && row.row.groupBuyStatus === 5) {
+        return 'color:#E30000'
+      }
     }
   }
 }