feature: auth float box.

package.json

@@ -137,7 +137,7 @@
     "url-loader": "^4.1.1",
     "uuid": "^8.3.2",
     "v-easy-components": "2.0.0-beta.14",
-    "vant": "^3.0.0-beta.7",
+    "vant": "^3.0.6",
     "vue-cli-plugin-electron-builder": "^2.0.0-rc.5",
     "vuex-persistedstate": "^4.0.0-beta.1",
     "webpack-bundle-analyzer": "4.3.0"

src/hooks/auth.ts

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any,@typescript-eslint/camelcase */
+import { onMounted, onUnmounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { Toast } from 'vant'
 import http from '@/utils/http'
+import { doSignin, getUserDetail } from '@/pages/auth/api'
 
 export const useAuth = () => {
   const $store = useStore()
@@ -47,7 +48,49 @@ export const useLogout = () => {
   }
 }
 
+export const useLoadProfile = () => {
+  const $store = useStore()
+
+  return async () => {
+    if (!$store.getters['Auth/isLogin']) {
+      return
+    }
+    try {
+      const res: any = await getUserDetail(
+        $store.state.Auth.user.profile.userId
+      )
+
+      $store.commit('Auth/UPDATE_USER', {
+        key: 'profile',
+        value: { ...res.profile, level: res.level, pcSign: res.pcSign }
+      })
+    } catch (e) {
+      Toast(e.message)
+    }
+  }
+}
+
 export const useAuthView = () => {
   const $store = useStore()
   return (flag: boolean) => $store.commit(`Auth/${flag ? 'SHOW' : 'HIDE'}_VIEW`)
 }
+
+export const useSignin = () => {
+  const $store = useStore()
+  return async () => {
+    try {
+      await doSignin()
+      $store.commit('Auth/UPDATE_USER', {
+        key: 'profile',
+        value: { pcSign: true }
+      })
+    } catch (e) {
+      if (e?.response.data.code === -2) {
+        $store.commit('Auth/UPDATE_USER', {
+          key: 'profile',
+          value: { pcSign: true }
+        })
+      }
+    }
+  }
+}

src/iconfont/index.ts

@@ -1,7 +1,7 @@
 import $script from 'scriptjs'
 import { noop } from '@/utils/index'
 
-const ICONFONT_URL = 'font_2132275_ujwgdxwpgxm'
+const ICONFONT_URL = 'font_2132275_ypy5tdama8'
 
 // repair electron packaging '//' protocol problem
 $script(`https://at.alicdn.com/t/${ICONFONT_URL}.js`, noop)

src/pages/auth/api.ts

@@ -10,19 +10,36 @@ export interface LoginRes {
   profile: Record<string, any>
   bindings: Array<Record<string, any>>
   cookie: string
+  level: number
+  pcSign: boolean
 }
 
-export const doPhoneLogin = (
+export const getUserDetail = (uid: string) =>
+  http.get('/api/user/detail', {
+    params: {
+      uid
+    }
+  })
+
+export const doPhoneLogin = async (
   phone: string,
   password: string
-): Promise<LoginRes> =>
-  http.get('/api/login/cellphone', {
+): Promise<LoginRes> => {
+  const res: LoginRes = await http.get('/api/login/cellphone', {
     params: {
       phone: phone,
       md5_password: Md5(password)
     }
   })
 
+  const info: any = await getUserDetail(res.profile.userId)
+  res.profile = { ...res.profile, ...info.profile }
+  res.profile.level = info.level
+  res.profile.pcSign = info.pcSign
+
+  return res
+}
+
 export const doEmailLogin = (
   email: string,
   password: string
@@ -60,3 +77,18 @@ export const checkPhone = (phone: string) =>
       phone
     }
   })
+
+// TODO 要获取一个签到状态来控制签到按钮状态
+/* 
+  0 安卓端
+  1 web/PC 端
+*/
+export const doSignin = () =>
+  http.get('/api/daily_signin', {
+    params: {
+      type: 1
+    }
+  })
+
+// TODO 退出登录
+export const doLogout = () => http.get('/api/logout')

src/pages/auth/component/sidebar-auth/cell.tsx

@@ -0,0 +1,63 @@
+import { defineComponent } from 'vue'
+import Icon from '@/components-global/icon/main'
+import './style.less'
+
+export default defineComponent({
+  name: 'XCell',
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    onClick: {
+      type: Function,
+      default: () => {
+        /*  */
+      }
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    externalLink: {
+      type: String,
+      default: ''
+    },
+    needArrow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup($props) {
+    console.log('X-Cell => Go~')
+
+    const onClick = (e: any) => {
+      if ($props.externalLink) {
+        window.open($props.externalLink)
+      } else {
+        $props.onClick(e)
+      }
+    }
+
+    return function(this: any) {
+      return (
+        <div class="x-cell" onClick={onClick}>
+          <div class="x-cell__left">
+            {!!this.icon && (
+              <Icon icon={this.icon} color="#4c4c4c" size={22}></Icon>
+            )}
+            {this.title}
+          </div>
+          <div class="x-cell__right">
+            {this.$slots.default?.()}
+            {this.needArrow && (
+              <div class="x-cell__rightarrow">
+                <Icon icon="toRight" color="#afafaf" size={16}></Icon>
+              </div>
+            )}
+          </div>
+        </div>
+      )
+    }
+  }
+})

src/pages/auth/component/sidebar-auth/index.tsx

@@ -1,29 +1,183 @@
-import { useAuth } from '@/hooks/auth'
-import { defineComponent } from 'vue'
+import { defineComponent, onMounted, onUnmounted, reactive } from 'vue'
 import { useRouter } from 'vue-router'
-import { Image } from 'vant'
+import { Image, Row } from 'vant'
+import { useAuth, useLoadProfile, useLogout, useSignin } from '@/hooks/auth'
+import { showLogin } from '@/helpers'
+import Icon from '@/components-global/icon/main'
+import XCell from './cell'
+import './style.less'
 
 const DEFAULT_AVATAR =
   'https://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg'
 
+// TODO 由于没有提供对应的绑定接口，绑定社交账号该功能无法完成[Disabled]
 export const SidebarAuth = defineComponent({
   name: 'SidebarAuth',
   setup() {
+    const state = reactive({
+      show: false
+    })
     const { isLogin, profile } = useAuth()
     const $router = useRouter()
 
-    const onClick = () => {
-      $router.push('/profile')
+    const unLoginClick = () => {
+      if (!isLogin.value) {
+        showLogin()
+      }
     }
 
+    const goProfile = (e: any) => {
+      if (isLogin.value) $router.push('/profile')
+    }
+
+    const popupProfile = (e: any) => {
+      if (isLogin.value) {
+        e.stopPropagation()
+        state.show = !state.show
+      }
+    }
+
+    const doLogout = useLogout()
+
+    const loadProfile = useLoadProfile()
+
+    const doSingin = useSignin()
+
+    const clickListener = (e: any) => {
+      if (state.show) {
+        state.show = false
+      }
+    }
+
+    onMounted(() => {
+      loadProfile()
+      document.addEventListener('click', clickListener)
+    })
+    onUnmounted(() => {
+      document.removeEventListener('click', clickListener)
+    })
+
     return () => {
       const text = isLogin.value ? profile.value.nickname : '未登录'
       const head = isLogin.value ? profile.value.avatarUrl : DEFAULT_AVATAR
       return (
-        <a class="sidebar-nav-login" onClick={onClick}>
-          <Image width="40" height="40" src={head} round fit="cover"></Image>
-          <span>{text}</span>
-        </a>
+        <div class="sidebar-nav-login" onClick={unLoginClick}>
+          <div class="sidebar-nav-loginbox">
+            <Image
+              width="40"
+              height="40"
+              src={head}
+              round
+              fit="cover"
+              onClick={goProfile}
+              class="cursor-pointer"
+            ></Image>
+            <span onClick={popupProfile}>{text}</span>
+            {isLogin.value && state.show && (
+              <div
+                class="sidebar-profile"
+                onClick={() => {
+                  state.show = false
+                }}
+              >
+                <div>
+                  <div class="sidebar-x__info">
+                    {[
+                      {
+                        name: '动态',
+                        value: profile.value.eventCount,
+                        onClick: () => {
+                          $router.push('/eventView')
+                        }
+                      },
+                      {
+                        name: '关注',
+                        value: profile.value.follows,
+                        onClick: () => {
+                          $router.push('/followList')
+                        }
+                      },
+                      {
+                        name: '粉丝',
+                        value: profile.value.followeds,
+                        onClick: () => {
+                          $router.push('/fansView')
+                        }
+                      }
+                    ].map((item, index) => {
+                      return (
+                        <div
+                          class="sidebar-x__item"
+                          key={index}
+                          onClick={item.onClick}
+                        >
+                          <div>{item.value}</div>
+                          <div>{item.name}</div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                  <Row type="flex" justify="center">
+                    {profile.value.pcSign ? (
+                      <div class="sidebar-x__signin">已签到</div>
+                    ) : (
+                      <div
+                        class="sidebar-x__unsignin"
+                        onClick={e => {
+                          e.stopPropagation()
+                          doSingin()
+                        }}
+                      >
+                        <Icon icon="jinbi" color="#8c8c8c" size={16}></Icon>
+                        &nbsp;签到
+                      </div>
+                    )}
+                  </Row>
+                </div>
+                <div class="sidebar-hr"></div>
+                <XCell
+                  icon="daV"
+                  title="会员中心"
+                  externalLink="https://music.163.com/#/member"
+                >
+                  {profile.value.vipType == 0 ? '未订购' : '待确认'}
+                </XCell>
+                <XCell
+                  icon="dengji"
+                  title="等级"
+                  externalLink="https://music.163.com/#/user/level"
+                >
+                  Lv. {profile.value.level}
+                </XCell>
+                <XCell
+                  icon="gouwuche"
+                  title="商城"
+                  externalLink="https://music.163.com/store/product"
+                ></XCell>
+                <div class="sidebar-hr"></div>
+                {/* localPage */}
+                <XCell
+                  icon="chilun"
+                  title="个人信息设置"
+                  onClick={() => {
+                    $router.push('/userSetting')
+                  }}
+                ></XCell>
+                {/* localPage */}
+                <XCell icon="shouji" title="绑定社交账号">
+                  <Icon icon="weibo" color="#afafaf" size={18}></Icon>
+                </XCell>
+                <div class="sidebar-hr"></div>
+                <XCell
+                  icon="guanji"
+                  onClick={doLogout}
+                  title="退出登录"
+                  needArrow={false}
+                ></XCell>
+              </div>
+            )}
+          </div>
+        </div>
       )
     }
   }