feat: 工作台桌面部分

src/api/modules/user.js

@@ -27,3 +27,24 @@ export function getAdList (data) {
     data
   })
 }
+
+// 获取大会员用户套餐信息
+export function getUseEquity (data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/use/equity',
+    method: 'post',
+    data
+  })
+}
+
+// 获取用户手机号、大会员套餐等其他信息
+export function getUserOtherInfo (data) {
+  data = qs.stringify(data)
+  return request({
+    baseURL: '/jypay',
+    url: '/user/getAccountInfo',
+    method: 'post',
+    data
+  })
+}

src/components/work-desktop/CommonUse.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="work-common">
+    <div class="common-title">
+      <span>常用功能</span>
+      <span class="set"><i class="icon-set"></i> 设置</span>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { Popover } from 'element-ui'
+export default {
+  name: 'work-common',
+  computed: {},
+  components: {
+    // [Popover.name]: Popover
+  },
+  data () {
+    return {
+
+    }
+  },
+  created () {},
+  mounted () {},
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.work-common{
+  margin-top: 20px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.02);
+  .common-title{
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 20px;
+    font-size: 18px;
+    color: #1d1d1d;
+    line-height: 28px;
+    &::after{
+      position: absolute;
+      content: '';
+      width: 3px;
+      height: 24px;
+      background: #2cb7ca;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .set{
+      display: flex;
+      align-items: center;
+      color: #2cb7ca;
+      font-size: 14px;
+      cursor: pointer;
+    }
+    .icon-set{
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      margin-right: 6px;
+      background: url('~@/assets/images/icon/icon-set.png') no-repeat center center;
+      background-size: contain;
+    }
+  }
+}
+</style>

src/components/work-desktop/Slidebar.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="work-slidebar">
+    <el-menu
+      default-active="0"
+      active-text-color="#2CB7CA"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose">
+      <el-menu-item index="1">
+        <i class="el-icon-menu"></i>
+        <span slot="title">我的主页</span>
+      </el-menu-item>
+      <el-submenu index="2">
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>导航一</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="1-1">
+            <span style="padding-left:30px;">企业情报监控</span>
+          </el-menu-item>
+          <el-menu-item index="1-2">
+            <span style="padding-left:30px;">中标企业预测</span>
+          </el-menu-item>
+          <el-menu-item index="1-3">
+            <span style="padding-left:30px;display:inline-block;">潜在竞争对手/<br>合作伙伴挖掘</span>
+          </el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+      <el-menu-item index="3">
+        <i class="el-icon-document"></i>
+        <span slot="title">导航三</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span slot="title">导航四</span>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import { Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui'
+export default {
+  name: 'work-slidebar',
+  computed: {},
+  components: {
+    [Menu.name]: Menu,
+    [Submenu.name]: Submenu,
+    [MenuItem.name]: MenuItem,
+    [MenuItemGroup.name]: MenuItemGroup
+  },
+  data () {
+    return {
+      menus: []
+    }
+  },
+  methods: {
+    handleOpen (key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleClose (key, keyPath) {
+      console.log(key, keyPath)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.work-slidebar{
+  ::v-deep{
+    .el-menu{
+      border-right: 0;
+    }
+    .el-submenu{
+      width: 100%;
+    }
+    .el-menu-item{
+      min-width: 0;
+      padding: 0 10px!important;
+      width: 100%;
+      color: #1D1D1D;
+      &:hover{
+        color: #2CB7CA;
+        background: #eaf8fa;
+        i{
+          color: #2CB7CA;
+        }
+      }
+    }
+    .el-submenu__title{
+      padding: 0 10px!important;
+      color: #1D1D1D;
+      &:hover{
+        color: #2CB7CA;
+        background: #eaf8fa;
+        i{
+          color: #2CB7CA;
+        }
+      }
+    }
+    .el-menu-item-group{
+      width: 100%;
+      .el-menu-item{
+        height: auto;
+        line-height: 22px;
+        padding: 6px 0!important;
+        white-space: normal;
+        font-size: 14px;
+        color: #686868;
+      }
+    }
+    .el-menu-item.is-active {
+      color: #2CB7CA;
+      background: #eaf8fa;
+      padding-left: 0;
+    }
+    .el-menu-item-group__title{
+      padding: 0;
+    }
+  }
+}
+</style>

src/components/work-desktop/UserInfo.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="work-userinfo">
+    <div class="account">
+      <div class="item-headimg">
+        <img :src="info.headimage" alt="">
+      </div>
+      <div>
+        <h3 class="item-title i-name">{{info.name || '--'}}，你好</h3>
+        <p class="item-subtitle" v-if="otherInfo.phone">{{otherInfo.phone}}</p>
+        <p class="item-subtitle" v-if="info.entname">{{info.entname}}</p>
+      </div>
+    </div>
+    <div class="combo">
+      <div class="item-headimg">
+        <img v-if="otherInfo.bigmemberVip" :src="require(`../../assets/images/big-${otherInfo.bigmemberVip}.png`)" alt="">
+      </div>
+      <div>
+        <h3 class="item-title c-name">大会员{{info.combo}}</h3>
+        <p class="item-subtitle">到期时间：{{info.member_endtime || '--'}}</p>
+      </div>
+    </div>
+    <div class="customer">
+      <div class="item-headimg">
+        <img src="@/assets/images/customer.png" alt="kf">
+      </div>
+      <div>
+        <h3 class="item-title">专属客服：赵秀臻</h3>
+        <p class="item-subtitle c-weixin">企业微信：
+          <el-popover
+            placement="bottom"
+            width="156"
+            trigger="click">
+            <div class="customer-wx"
+              style="display: flex;flex-direction: column;align-items: center;font-size: 14px;text-align: center;color: #1d1d1d;">
+              <img style="width:132px;height:132px;margin-bottom:8px;" src="@/assets/images/customer-wx.png" alt="">
+              <p>微信扫一扫</p>
+            </div>
+            <span class="click-look" slot="reference">点击查看</span>
+          </el-popover>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Popover } from 'element-ui'
+import { getUseEquity, getUserOtherInfo } from '@/api/modules'
+import { dateFormatter } from '@/utils'
+export default {
+  name: 'work-userinfo',
+  computed: {},
+  components: {
+    [Popover.name]: Popover
+  },
+  data () {
+    return {
+      info: {},
+      otherInfo: {}
+    }
+  },
+  created () {
+    this.getUseEquity()
+    this.getOtherInfo()
+  },
+  mounted () {
+    console.log(this.info)
+  },
+  methods: {
+    getUseEquity () {
+      getUseEquity().then(res => {
+        if (res.error_code === 0 && res.data) {
+          if (res.data.member_endtime) {
+            res.data.member_endtime = dateFormatter(res.data.member_endtime * 1000, 'yyyy-MM-dd')
+          }
+          this.info = res.data
+        } else {
+          this.$toast(res.error_msg)
+        }
+      })
+    },
+    getOtherInfo () {
+      getUserOtherInfo().then(res => {
+        if (res.error_code === 0 && res.data) {
+          this.otherInfo = res.data
+        } else {
+          this.$toast(res.error_msg)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.work-userinfo{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 40px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.02);
+  .account,
+  .combo,
+  .customer{
+    display: flex;
+    align-items: center;
+    width: 33.33%;
+    justify-content: center;
+  }
+  .item-headimg{
+    width: 80px;
+    height: 80px;
+    overflow: hidden;
+    margin-right: 12px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .item-title{
+    color: #1d1d1d;
+    line-height: 24px;
+    font-size: 16px;
+  }
+  .item-subtitle{
+    margin-top: 4px;
+    color: #686868;
+    line-height: 24px;
+    font-size: 14px;
+  }
+  .account{
+    border-right: 1px solid #ececec;
+    .i-name{
+      font-size: 18px;
+    }
+  }
+  .combo{
+    border-right: 1px solid #ececec;
+  }
+  .customer{
+    .c-weixin{
+      font-size: 16px;
+    }
+    .click-look{
+      color: #2CB7CA;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/router/routers.js

@@ -126,5 +126,11 @@ export default [
     path: '/free/project_progress',
     name: 'project_progress',
     component: () => import('@/views/ProjectProgress.vue')
+  },
+  // 工作台桌面
+  {
+    path: '/free/desktop',
+    name: 'desktop',
+    component: () => import('@/views/work-desktop/WorkDesktop.vue')
   }
 ]

src/views/work-desktop/WorkDesktop.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="work-desktop">
+    <img class="desktop-bg" src="@/assets/images/bg_1.png">
+    <div class="desktop-container">
+      <div class="d-slidebar">
+        <Slidebar></Slidebar>
+      </div>
+      <div class="d-content">
+        <UserInfo></UserInfo>
+        <CommonUse></CommonUse>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Slidebar from '@/components/work-desktop/Slidebar.vue'
+import UserInfo from '@/components/work-desktop/UserInfo.vue'
+import CommonUse from '@/components/work-desktop/CommonUse.vue'
+export default {
+  name: 'work-desktop',
+  components: {
+    Slidebar,
+    UserInfo,
+    CommonUse
+  },
+  data () {
+    return {}
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.work-desktop {
+  padding-bottom: 78px;
+  .desktop-bg{
+    width: 100%;
+    height: 240px;
+  }
+  .desktop-container{
+    width: 1200px;
+    display: flex;
+    justify-content: space-between;
+    margin: -80px auto 0;
+    .d-slidebar{
+      width: 180px;
+      height: auto;
+      padding: 16px;
+      background: #fff;
+      border-radius: 4px;
+    }
+    .d-content{
+      margin-left: 20px;
+      flex: 1;
+    }
+  }
+}
+</style>