wip:pc端中标企业画像新增首次合作

src/components/contact-info/ContactInfo.vue

@@ -13,7 +13,7 @@
         </tr>
         </thead>
         <tbody>
-        <tr v-for="(item,index) in currentShowList" :key="item.id" @click="toDetail(item.id)">
+        <tr v-for="(item,index) in currentShowList" :key="index" @click="toDetail(item.id)">
           <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
           <td><span v-if="item.persion">{{ item.persion }}</span></td>
           <td><span v-if="item.contacts">{{ item.contacts }}</span></td>

src/views/portrayal/components/UnitList.vue

@@ -1,17 +1,34 @@
 <template>
   <div class="dynamic" v-show="domShow">
-    <div class="d-title">招标动态</div>
+    <div class="ribbon">
+      <el-checkbox v-model="selectAll" class="d-title" @change="selectThisPage">
+        招标动态
+      </el-checkbox>
+      <div class="btns">
+        <el-button type="text" class="switch" icon="el-icon-jy-tab-list">列表</el-button>
+        <el-button type="text" class="switch active" icon="el-icon-jy-tab-table">表格</el-button>
+        <el-button type="text" class="line" disabled></el-button>
+        <el-button type="text" class="single" icon="el-icon-jy-export">数据导出</el-button>
+        <el-button type="text" class="line" disabled></el-button>
+        <el-button type="text" class="single" icon="el-icon-jy-collect">标讯收藏</el-button>
+      </div>
+    </div>
     <div class="d-content" v-if="showDt">
-      <div class="d-list" v-for="item in dt.list" :key="item.id" @click="goDetail(item.id)">
-        <div class="d-title">{{item.title}}</div>
-        <div class="d-info">
-          <p class="i-main">
-            <span v-if="item.area" class="i-area">{{item.area}}</span>
-            <span v-if="item.bidstatus" class="i-type">{{item.bidstatus}}</span>
-            <span v-if="item.bidamount" class="i-type">{{item.bidamount}}</span>
-          </p>
-          <p class="i-time">{{item.firsttime}}</p>
-        </div>
+      <div class="d-list" v-for="item in dt.list" :key="item.id">
+        <el-checkbox class="choice" @change="selectThisPage">
+          <div class="d-top">
+            <span class="d-title" @click="goDetail(item.id)"> {{ item.title }}</span>
+            <i class="el-icon-jy-collect"></i>
+          </div>
+          <div class="d-info">
+            <p class="i-main">
+              <span v-if="item.area" class="i-area">{{ item.area }}</span>
+              <span v-if="item.bidstatus" class="i-type">{{ item.bidstatus }}</span>
+              <span v-if="item.bidamount" class="i-type">{{ item.bidamount }}</span>
+            </p>
+            <p class="i-time">{{ item.firsttime }}</p>
+          </div>
+        </el-checkbox>
       </div>
       <div class="pages" :key="isUpdatePageNum">
         <el-pagination
@@ -29,9 +46,9 @@
       :title="getDialogInfo.title"
       :visible.sync="isDialogShow"
     >
-        <div class="unit-dialog-content">{{getDialogInfo.content}}</div>
-        <span slot="footer" class="unit-dialog-footer">
-          <el-button type="primary" @click="openBigPage">{{getButtonTip}}</el-button>
+      <div class="unit-dialog-content">{{ getDialogInfo.content }}</div>
+      <span slot="footer" class="unit-dialog-footer">
+          <el-button type="primary" @click="openBigPage">{{ getButtonTip }}</el-button>
           <el-button @click="isDialogShow = false">取消</el-button>
         </span>
     </el-dialog>
@@ -45,10 +62,10 @@
       <div>
         每购买1个省,每月可查看<i>5个</i>采购单位画像，<i>上限为80个</i>，您当前订阅了
         <span v-if="usage.provin == -1">全国，查看机会已经消耗完毕，如需要更多服务，请前往联系客服。</span>
-        <span v-else>{{usage.provin}}个省，如需查看更多，前往订阅更多省份。</span>
+        <span v-else>{{ usage.provin }}个省，如需查看更多，前往订阅更多省份。</span>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click.stop="goHandle(dialogBtnText)">{{dialogBtnText}}</el-button>
+        <el-button type="primary" @click.stop="goHandle(dialogBtnText)">{{ dialogBtnText }}</el-button>
         <el-button @click="tipDialog = false">取 消</el-button>
       </div>
     </el-dialog>
@@ -58,14 +75,16 @@
 import { getUnitDt, getVipUnitDt } from '@/api/modules/'
 import { moneyUnit } from '@/utils/'
 import Empty from '@/components/common/Empty'
-import { Pagination, Dialog, Button } from 'element-ui'
+import { Button, Checkbox, Dialog, Pagination } from 'element-ui'
 import { mapState } from 'vuex'
+
 export default {
   name: 'dynamic',
   components: {
     [Pagination.name]: Pagination,
     [Dialog.name]: Dialog,
     [Button.name]: Button,
+    [Checkbox.name]: Checkbox,
     Empty
   },
   props: {
@@ -99,7 +118,8 @@ export default {
       reqCount: 0,
       bidataparams: {},
       domShow: false,
-      tipDialog: false
+      tipDialog: false,
+      selectAll: false
     }
   },
   watch: {
@@ -178,7 +198,8 @@ export default {
   created () {
     this.getUnitDtFn(this.bidparams)
   },
-  mounted () {},
+  mounted () {
+  },
   methods: {
     openBigPage () {
       this.isDialogShow = false
@@ -263,33 +284,48 @@ export default {
       } else {
         this.$router.push('/free/svip/buy?type=upgrade')
       }
+    },
+    selectThisPage () {
+      // 全部选中
+
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.dynamic{
+@include diy-icon('tab-list', 16, 14);
+@include diy-icon('tab-table', 16, 14);
+@include diy-icon('export', 18, 18);
+@include diy-icon('collect', 20, 20);
+@include diy-icon('collected', 20, 20);
+
+.dynamic {
   padding: 32px 40px 0;
   background: #fff;
+
   .empty-container.mtb60 {
     margin: 0 auto;
   }
+
   .unit-dialog-group {
     ::v-deep {
       .el-dialog__header {
         display: none;
       }
+
       .el-dialog {
         width: 380px;
         height: auto;
         background: #ffffff;
         border-radius: 8px;
       }
+
       .el-dialog__header {
         text-align: center;
         padding: 32px;
         padding-bottom: 20px;
       }
+
       .el-dialog__body {
         padding: 32px;
         padding-top: 0;
@@ -300,6 +336,7 @@ export default {
         color: #686868;
         line-height: 22px;
       }
+
       .el-dialog__title {
         font-size: 18px;
         font-family: Microsoft YaHei, Microsoft YaHei-Regular;
@@ -307,10 +344,12 @@ export default {
         color: #1d1d1d;
         line-height: 28px;
       }
+
       .el-dialog__footer {
         padding: 0;
       }
     }
+
     .unit-dialog-footer {
       display: flex;
       flex-direction: row;
@@ -318,12 +357,14 @@ export default {
       justify-content: space-between;
       padding: 32px;
       padding-top: 0;
+
       ::v-deep {
         .el-button--default {
           border: 1px solid #e0e0e0;
           color: #686868;
           background: #fff;
         }
+
         .el-button {
           width: 132px;
           height: 36px;
@@ -338,6 +379,7 @@ export default {
           border-radius: 6px;
 
         }
+
         .el-button--primary {
           background: #2cb7ca;
           color: #ffffff;
@@ -346,11 +388,12 @@ export default {
       }
     }
   }
-  .tip-dialog{
-    ::v-deep{
+
+  .tip-dialog {
+    ::v-deep {
       .el-button--primary,
       .el-button--primary:hover,
-      .el-button--primary:focus{
+      .el-button--primary:focus {
         width: 132px;
         height: 36px;
         margin-right: 52px;
@@ -361,22 +404,26 @@ export default {
         color: #fff;
         border: 0;
       }
-      .el-dialog__header{
+
+      .el-dialog__header {
         padding: 0;
       }
-      .el-dialog__body{
+
+      .el-dialog__body {
         padding: 32px;
         color: #686868;
         font-size: 14px;
         line-height: 22px;
         text-align: justify;
       }
-      .el-dialog__body i{
+
+      .el-dialog__body i {
         color: #2CB7CA;
       }
+
       .el-button--default,
       .el-button--default:hover,
-      .el-button--default:focus{
+      .el-button--default:focus {
         width: 132px;
         height: 36px;
         text-align: center;
@@ -386,53 +433,138 @@ export default {
         color: #686868;
         border: 1px solid #DCDFE6;
       }
-      .el-dialog__footer{
+
+      .el-dialog__footer {
         padding-bottom: 32px;
       }
     }
   }
-  .d-title{
-    font-size: 18px;
-    color: #1d1d1d;
+
+  .ribbon {
+    display: flex;
+    flex-direction: row;
+    height: 28px;
     line-height: 28px;
+    justify-content: space-between;
+
+    ::v-deep .el-checkbox {
+      .el-checkbox__input {
+        margin-bottom: 3px;
+      }
+
+      .el-checkbox__label {
+        font-size: 18px;
+        color: #1d1d1d;
+        line-height: 28px;
+        height: 28px;
+        font-weight: 400;
+      }
+    }
+
+    .btns {
+      display: flex;
+      align-items: center;
+
+      .el-button {
+        margin-left: 16px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        height: 24px;
+        font-weight: 400;
+        font-size: 14px;
+      }
+
+      .el-button.single {
+        color: #1d1d1d;
+      }
+
+      .el-button.switch {
+        color: #1d1d1d;
+
+        ::v-deep i {
+          filter: grayscale(1);
+        }
+      }
+
+      .el-button.switch.active {
+        color: #2CB7CA;
+
+        ::v-deep i {
+          filter: grayscale(0);
+        }
+      }
+
+      .line.el-button {
+        border-left: 1px solid #e0e0e0;
+        height: 20px;
+      }
+    }
   }
-  .d-list{
+
+  .d-list {
     padding: 18px 0;
     border-bottom: 1px solid #ECECEC;
-    cursor: pointer;
-    .d-title{
-      font-size: 16px;
-      line-height: 24px;
-      color: #1D1D1D;
-    }
-    .d-info{
+
+    .el-checkbox {
+      width: 100%;
       display: flex;
       align-items: center;
+
+      ::v-deep .el-checkbox__label {
+        width: 100%;
+      }
+
+      .d-top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .d-title {
+        font-size: 16px;
+        line-height: 24px;
+        color: #1D1D1D;
+        cursor: pointer;
+      }
+
+      i {
+        cursor: pointer;
+      }
+    }
+
+    .d-info {
+      display: flex;
       justify-content: space-between;
+      align-items: end;
     }
-    .i-main{
+
+    .i-main {
       display: flex;
       align-items: center;
       margin-top: 8px;
     }
-    .i-area,.i-type{
+
+    .i-area, .i-type {
       display: inline-block;
       padding: 0 8px;
       margin-right: 8px;
       color: #2CB7CA;
       font-size: 12px;
       line-height: 20px;
-      background: rgba(44,183,202,0.08);
+      background: rgba(44, 183, 202, 0.08);
       border-radius: 4px;
-      box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05);
+      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05);
     }
-    .i-time{
+
+    .i-time {
       color: #999999;
       font-size: 12px;
       line-height: 20px;
     }
   }
-  .pages{
+
+  .pages {
     margin-top: 16px;
     text-align: center;
   }