feat: 常用功能

src/api/modules/user.js

@@ -38,12 +38,45 @@ export function getUseEquity (data) {
   })
 }
 
-// 获取用户手机号、大会员套餐等其他信息
-export function getUserOtherInfo (data) {
+// 获取所有用户可用功能接口
+export function getAllFunctions (data) {
   data = qs.stringify(data)
   return request({
-    baseURL: '/jypay',
-    url: '/user/getAccountInfo',
+    baseURL: '/publicapply',
+    url: '/userbase/allFunctions',
+    method: 'post',
+    data
+  })
+}
+
+// 获取用户当前常用功能
+export function getCanUseFunctions (data) {
+  data = qs.stringify(data)
+  return request({
+    baseURL: '/publicapply',
+    url: '/userbase/functions',
+    method: 'post',
+    data
+  })
+}
+
+// 保存用户常用功能
+export function saveCommonFunctions (data) {
+  data = qs.stringify(data)
+  return request({
+    baseURL: '/publicapply',
+    url: '/userbase/saveFunctions',
+    method: 'post',
+    data
+  })
+}
+
+// PC端大会员侧边栏菜单
+export function getLeftMenu (data) {
+  data = qs.stringify(data)
+  return request({
+    baseURL: '/publicapply',
+    url: '/userbase/bigmemberMenu',
     method: 'post',
     data
   })

src/assets/style/iconfont.css

@@ -0,0 +1,267 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 624651 */
+  src: url('../fonts/iconfont.woff2?t=1634261673232') format('woff2'),
+      url('../fonts/iconfont.woff?t=1634261673232') format('woff'),
+      url('../fonts/iconfont.ttf?t=1634261673232') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-hui7:before {
+  content: "\e654";
+}
+
+.icon-hui6:before {
+  content: "\e653";
+}
+
+.icon-hui5:before {
+  content: "\e652";
+}
+
+.icon-hui4:before {
+  content: "\e651";
+}
+
+.icon-hui3:before {
+  content: "\e650";
+}
+
+.icon-hui2:before {
+  content: "\e64f";
+}
+
+.icon-hui1:before {
+  content: "\e64e";
+}
+
+.icon-hui:before {
+  content: "\e64d";
+}
+
+.icon-cuowutishi:before {
+  content: "\e63e";
+}
+
+.icon-zhengquetishi:before {
+  content: "\e63d";
+}
+
+.icon-zhifubao:before {
+  content: "\e63c";
+}
+
+.icon-xiazai:before {
+  content: "\e63b";
+}
+
+.icon-logo:before {
+  content: "\e639";
+}
+
+.icon-warning:before {
+  content: "\e63a";
+}
+
+.icon-youxiang:before {
+  content: "\e6fb";
+}
+
+.icon-shouji:before {
+  content: "\e638";
+}
+
+.icon-zhifuwancheng:before {
+  content: "\e637";
+}
+
+.icon-shaixuan-moren:before {
+  content: "\e636";
+}
+
+.icon-76:before {
+  content: "\e686";
+}
+
+.icon-windows2:before {
+  content: "\e600";
+}
+
+.icon-weixinzhifu:before {
+  content: "\e635";
+}
+
+.icon-shaixuan-xuanzhong:before {
+  content: "\e634";
+}
+
+.icon-rili:before {
+  content: "\e603";
+}
+
+.icon-huangguan:before {
+  content: "\e604";
+}
+
+.icon-tianjia:before {
+  content: "\e631";
+}
+
+.icon-shujudaochu:before {
+  content: "\e630";
+}
+
+.icon-yixuan:before {
+  content: "\e62d";
+}
+
+.icon-yulan:before {
+  content: "\e62e";
+}
+
+.icon-shanchu:before {
+  content: "\e62f";
+}
+
+.icon-zishangxianyilai:before {
+  content: "\e62a";
+}
+
+.icon-jintian:before {
+  content: "\e62b";
+}
+
+.icon-zuijinsanshitian:before {
+  content: "\e62c";
+}
+
+.icon-guanjianci:before {
+  content: "\e612";
+}
+
+.icon-hangye:before {
+  content: "\e613";
+}
+
+.icon-zhaobiaodingyue:before {
+  content: "\e614";
+}
+
+.icon-xiangmuguanzhu:before {
+  content: "\e615";
+}
+
+.icon-nijianxiangmu:before {
+  content: "\e616";
+}
+
+.icon-zhaobiaoshequ:before {
+  content: "\e617";
+}
+
+.icon-guanbi:before {
+  content: "\e618";
+}
+
+.icon-zhaobiaosousuo:before {
+  content: "\e619";
+}
+
+.icon-shujuguizeziyoudingyi:before {
+  content: "\e61a";
+}
+
+.icon-shujukaifang:before {
+  content: "\e61b";
+}
+
+.icon-mianfei:before {
+  content: "\e61c";
+}
+
+.icon-APIjiekou:before {
+  content: "\e61d";
+}
+
+.icon-chakanyuanwen:before {
+  content: "\e61e";
+}
+
+.icon-xiayiye:before {
+  content: "\e61f";
+}
+
+.icon-shangyiye:before {
+  content: "\e620";
+}
+
+.icon-biaoge:before {
+  content: "\e621";
+}
+
+.icon-shijian:before {
+  content: "\e622";
+}
+
+.icon-shouqi:before {
+  content: "\e623";
+}
+
+.icon-liebiao:before {
+  content: "\e624";
+}
+
+.icon-gengduo:before {
+  content: "\e625";
+}
+
+.icon-shiyanshi:before {
+  content: "\e626";
+}
+
+.icon-bangzhu:before {
+  content: "\e627";
+}
+
+.icon-shengfenchengshi:before {
+  content: "\e628";
+}
+
+.icon-qiyemingcheng:before {
+  content: "\e629";
+}
+
+.icon-zhidingarrow:before {
+  content: "\e60b";
+}
+
+.icon-iOS:before {
+  content: "\e60c";
+}
+
+.icon-erweima:before {
+  content: "\e60d";
+}
+
+.icon-anzhuo:before {
+  content: "\e60e";
+}
+
+.icon-QQ:before {
+  content: "\e60f";
+}
+
+.icon-sousuo:before {
+  content: "\e610";
+}
+
+.icon-weixin:before {
+  content: "\e611";
+}
+

src/components/work-desktop/CommonUse.vue

@@ -2,27 +2,112 @@
   <div class="work-common">
     <div class="common-title">
       <span>常用功能</span>
-      <span class="set"><i class="icon-set"></i> 设置</span>
+      <span class="set" @click="setFunctions"><i class="icon-set"></i> 设置</span>
     </div>
+    <div class="common-lists">
+      <div class="list-item" v-for="(item, index) in commonList" :key="index" @click="openRouter(item.url)">
+        <img class="item-img" :src="item.img" alt="">
+        <span class="item-name">{{item.name}}</span>
+      </div>
+      <div v-if="commonList && commonList.length < 8" class="list-add" @click="setFunctions">
+        <span class="icon-add"></span>
+        <span class="add-text">添加常用功能</span>
+      </div>
+    </div>
+    <!-- 设置常用功能dialog -->
+    <el-dialog
+      custom-class="fn-dialog"
+      :visible.sync="dialogFn"
+      :close-on-click-modal="false"
+      :show-close="false"
+      center
+      width="696px"
+      v-if="dialogFn"
+    >
+      <Card @onCancel="dialogFn = false" @onConfirm="confirmSaveFn">
+        <div slot="header">常用功能设置</div>
+        <div class="transfer-content">
+          <Transfer :left="allFuncitons" :right="commonList" @onSave="saveFunData"></Transfer>
+        </div>
+        <p class="more-tips">最多可选择 <em style="color:#2CB7CA;">8</em> 个常用功能</p>
+      </Card>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-// import { Popover } from 'element-ui'
+import { Dialog } from 'element-ui'
+import Card from '@/components/selector/SelectorCard'
+import Transfer from './Transfer'
+import { getAllFunctions, getCanUseFunctions, saveCommonFunctions } from '@/api/modules'
 export default {
   name: 'work-common',
   computed: {},
   components: {
-    // [Popover.name]: Popover
+    [Dialog.name]: Dialog,
+    Card,
+    Transfer
   },
   data () {
     return {
-
+      dialogFn: false,
+      commonList: [], // 常用功能
+      allFuncitons: [], // 所有功能
+      saveData: [] // 要提交的数据
     }
   },
-  created () {},
+  created () {
+    this.getCanUseFunctions()
+    this.getAllFunctions()
+  },
   mounted () {},
   methods: {
+    // 获取所有功能
+    getAllFunctions () {
+      // 平台参数 platform 平台：默认PC，微信：WX，app:APP， 可不传
+      getAllFunctions().then(res => {
+        if (res.error_code === 0 && res.data) {
+          this.allFuncitons = res.data
+        } else {
+          this.allFuncitons = []
+        }
+      })
+    },
+    // 获取常用功能
+    getCanUseFunctions () {
+      getCanUseFunctions().then(res => {
+        if (res.error_code === 0 && res.data) {
+          this.commonList = res.data
+        } else {
+          this.commonList = []
+        }
+      })
+    },
+    setFunctions () {
+      this.dialogFn = true
+    },
+    // 穿梭框子组件传来的组件
+    saveFunData (data) {
+      this.saveData = data
+    },
+    // dialog 卡片组件保存按钮提交事件
+    confirmSaveFn () {
+      console.log('保存', this.saveData)
+      saveCommonFunctions({
+        platform: 'PC',
+        names: this.saveData.toString()
+      }).then(res => {
+        if (res.error_code === 0 && res.data) {
+          this.dialogFn = false
+          this.getCanUseFunctions()
+        } else {
+          this.$toast(res.error_msg)
+        }
+      })
+    },
+    openRouter (url) {
+      window.open(url)
+    }
   }
 }
 </script>
@@ -33,6 +118,35 @@ export default {
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.02);
+  ::v-deep{
+    .fn-dialog{
+      .el-dialog__header,.el-dialog__body{
+        padding: 0;
+      }
+    }
+    .transfer-content{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .selector-card-header{
+      margin: 0 0 28px!important;
+    }
+    .selector-card.s-card{
+      width: 100%;
+    }
+    .selector-card-content{
+      display: block!important;
+      padding: 0 30px;
+    }
+    .more-tips{
+      margin-top: 20px;
+      font-size: 14px;
+      line-height: 22px;
+      text-align: center;
+      color: #686868;
+    }
+  }
   .common-title{
     position: relative;
     display: flex;
@@ -68,5 +182,40 @@ export default {
       background-size: contain;
     }
   }
+  .common-lists{
+    padding: 0 20px;
+    display: flex;
+    .list-item,
+    .list-add{
+      width: 120px;
+      height: 120px;
+      padding: 18px 0 24px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      cursor: pointer;
+    }
+    .item-name,.add-text{
+      margin-top: 10px;
+      font-size: 14px;
+      line-height: 20px;
+      color: #1D1D1D;
+    }
+    .item-img{
+      width: 44px;
+      height: 44px;
+    }
+    .icon-add{
+      display: inline-block;
+      width: 44px;
+      height: 44px;
+      background: url('~@/assets/images/icon/icon-add.png') no-repeat center center;
+      background-size: contain;
+    }
+    .add-text{
+      color: #686868;
+    }
+  }
 }
 </style>

src/components/work-desktop/Slidebar.vue

@@ -6,13 +6,24 @@
       class="el-menu-vertical-demo"
       @open="handleOpen"
       @close="handleClose">
-      <el-menu-item index="1">
-        <i class="el-icon-menu"></i>
+      <el-menu-item index="0">
+        <i class="iconfont icon-hui7"></i>
         <span slot="title">我的主页</span>
       </el-menu-item>
-      <el-submenu index="2">
+      <el-submenu :index="index + '1'" v-for="(item, index) in menus" :key="'0'+index">
         <template slot="title">
-          <i class="el-icon-location"></i>
+          <i class="iconfont" :class="item.icon"></i>
+          <span>{{item.firstlevel}}</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item :index="(index+1) +'-'+j" v-for="(v, j) in item.secondarylevel" :key="'00' + j">
+            <span style="padding-left:30px;" :style="{display:v.name.indexOf('/') > -1 ? 'inline-block' : 'inline'}">{{v.name}}</span>
+          </el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+      <!-- <el-submenu index="2">
+        <template slot="title">
+          <i class="iconfont icon-hui2"></i>
           <span>导航一</span>
         </template>
         <el-menu-item-group>
@@ -28,19 +39,21 @@
         </el-menu-item-group>
       </el-submenu>
       <el-menu-item index="3">
-        <i class="el-icon-document"></i>
+        <i class="iconfont icon-hui"></i>
         <span slot="title">导航三</span>
       </el-menu-item>
       <el-menu-item index="4">
-        <i class="el-icon-setting"></i>
+        <i class="iconfont icon-hui4"></i>
         <span slot="title">导航四</span>
-      </el-menu-item>
+      </el-menu-item> -->
     </el-menu>
   </div>
 </template>
 
 <script>
+import '@/assets/style/iconfont.css'
 import { Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui'
+import { getLeftMenu } from '@/api/modules'
 export default {
   name: 'work-slidebar',
   computed: {},
@@ -55,12 +68,39 @@ export default {
       menus: []
     }
   },
+  created () {
+    this.getHomeLeftMenu()
+  },
   methods: {
     handleOpen (key, keyPath) {
       console.log(key, keyPath)
     },
     handleClose (key, keyPath) {
       console.log(key, keyPath)
+    },
+    getHomeLeftMenu () {
+      getLeftMenu().then(res => {
+        if (res.error_code === 0 && res.data) {
+          res.data.forEach(v => {
+            if (v.firstlevel === '我的订阅') {
+              v.icon = 'icon-hui2'
+            } else if (v.firstlevel === '我的关注') {
+              v.icon = 'icon-hui'
+            } else if (v.firstlevel === '我的收藏') {
+              v.icon = 'icon-hui3'
+            } else if (v.firstlevel === '会员服务') {
+              v.icon = 'icon-hui4'
+            } else if (v.firstlevel === '我的资产') {
+              v.icon = 'icon-hui5'
+            } else if (v.firstlevel === '交易管理') {
+              v.icon = 'icon-hui6'
+            }
+          })
+          this.menus = res.data
+        } else {
+          this.menus = []
+        }
+      })
     }
   }
 }
@@ -68,6 +108,10 @@ export default {
 
 <style lang="scss" scoped>
 .work-slidebar{
+  .iconfont{
+    margin-right: 10px;
+    font-size: 18px;
+  }
   ::v-deep{
     .el-menu{
       border-right: 0;

src/components/work-desktop/Transfer.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="work-transfer">
+    <el-transfer
+    :titles="['全部功能列表', '常用功能列表']"
+    v-model="checked"
+    @left-check-change="leftChange"
+    @change="onChange"
+    :data="transferData">
+  </el-transfer>
+  </div>
+</template>
+
+<script>
+import { Transfer } from 'element-ui'
+export default {
+  name: 'work-transfer',
+  computed: {},
+  props: {
+    left: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    right: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  components: {
+    [Transfer.name]: Transfer
+  },
+  data () {
+    return {
+      transferData: [], // 渲染穿梭框的数据
+      checked: [], // 右侧选中的数据索引
+      needData: [] // 提交数据需要的值
+    }
+  },
+  watch: {
+    left (newVal) {
+      console.log(newVal)
+      this.allData()
+    }
+  },
+  mounted () {
+    this.allData()
+    this.rightData()
+  },
+  methods: {
+    allData () {
+      console.log(this.right)
+      const allData = this.left
+      const rightData = this.right.map(s => {
+        return s.name
+      })
+      console.log(rightData)
+      const data = []
+      allData.forEach((v, i) => {
+        if (rightData.length >= 8) {
+          data.push({
+            key: i,
+            label: v.name,
+            disabled: rightData.indexOf(allData[i].name) === -1
+          })
+        } else {
+          data.push({
+            key: i,
+            label: v.name
+          })
+        }
+      })
+      this.transferData = data
+    },
+    rightData () {
+      const data = []
+      this.right.forEach(v => {
+        this.transferData.forEach(s => {
+          if (v.name === s.label) {
+            data.push(s.key)
+          }
+        })
+      })
+      // console.log(data)
+      this.checked = data
+    },
+    leftChange (val) {
+      const rightdLen = this.checked.length
+      const leftLen = val.length
+      const totalArr = this.checked.concat(val)
+      const totalLen = rightdLen + leftLen
+      // console.log(totalLen, totalArr)
+      if (totalLen >= 8) {
+        this.transferData.forEach((v, i) => {
+          // console.log(totalArr.indexOf(i) === -1)
+          if (totalArr.indexOf(i) === -1) {
+            v.disabled = true
+          } else {
+            v.disabled = false
+          }
+        })
+      } else {
+        this.transferData.forEach((v, i) => {
+          v.disabled = false
+        })
+      }
+    },
+    onChange (val) {
+      // console.log(val, this.checked)
+      if (val.length < 8) {
+        this.transferData.forEach((v, i) => {
+          v.disabled = false
+        })
+      }
+      const arr = []
+      for (let i = 0; i < val.length; i++) {
+        arr.push(this.transferData[val[i]].label)
+      }
+      this.needData = arr
+      console.log(this.needData, '要提交的数据')
+      this.$emit('onSave', this.needData)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.work-transfer{
+  ::v-deep{
+    .el-transfer-panel{
+      width: 268px;
+    }
+    .el-transfer-panel__body,
+    .el-transfer-panel__list{
+      height: 320px;
+      max-height: 320px;
+    }
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+      background-color: #2cb7ca;
+      border-color: #2cb7ca;
+    }
+    .el-checkbox__input.is-checked+.el-checkbox__label{
+      color: #2cb7ca;
+    }
+    .el-transfer-panel__item:hover {
+      color: #2cb7ca;
+    }
+    .el-transfer-panel__header{
+      padding-left: 5px;
+      .el-checkbox__input{
+        display: none!important;
+      }
+      .el-checkbox__label{
+        color: #1D1D1D!important;
+      }
+      .el-checkbox{
+        pointer-events: none!important;
+      }
+    }
+    .el-transfer__buttons{
+      padding: 0 20px;
+    }
+    .el-transfer__button{
+      padding: 10px 16px;
+      border: 1px solid #2CB7CA;
+      box-sizing: border-box;
+      border-radius: 4px;
+      background: #EAF8FA;
+      color: #2CB7CA;
+    }
+    .el-transfer__button.is-disabled,
+    .el-transfer__button.is-disabled:hover{
+      background: #F5F6F7;
+      border: 1px solid #E0E0E0;
+      box-sizing: border-box;
+      border-radius: 4px;
+      color: #AAAAAA;
+    }
+    .el-icon-arrow-right,
+    .el-icon-arrow-left{
+      font-size: 18px;
+    }
+    .el-icon-arrow-right:before{
+      content: "\e6e9";
+    }
+    .el-icon-arrow-left:before{
+      content: "\e6ea";
+    }
+  }
+}
+</style>

src/components/work-desktop/UserInfo.vue

@@ -5,14 +5,13 @@
         <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>
+        <h3 class="item-title i-name">{{info.name}}，你好</h3>
         <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="">
+        <img v-if="info.member_status" :src="require(`../../assets/images/big-${info.member_status}.png`)" alt="">
       </div>
       <div>
         <h3 class="item-title c-name">大会员{{info.combo}}</h3>
@@ -45,7 +44,7 @@
 
 <script>
 import { Popover } from 'element-ui'
-import { getUseEquity, getUserOtherInfo } from '@/api/modules'
+import { getUseEquity } from '@/api/modules'
 import { dateFormatter } from '@/utils'
 export default {
   name: 'work-userinfo',
@@ -55,16 +54,11 @@ export default {
   },
   data () {
     return {
-      info: {},
-      otherInfo: {}
+      info: {}
     }
   },
   created () {
     this.getUseEquity()
-    this.getOtherInfo()
-  },
-  mounted () {
-    console.log(this.info)
   },
   methods: {
     getUseEquity () {
@@ -78,15 +72,6 @@ export default {
           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)
-        }
-      })
     }
   }
 }