mm-header.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <template>
  2. <!--头部-->
  3. <header class="mm-header">
  4. <h1 class="header">
  5. <a href="https://github.com/maomao1996/Vue-mmPlayer" target="_blank">
  6. mmPlayer 在线音乐播放器
  7. </a>
  8. </h1>
  9. <dl class="user">
  10. <template v-if="user.userId">
  11. <router-link class="user-info" to="/music/userlist" tag="dt">
  12. <img class="avatar" :src="`${user.avatarUrl}?param=50y50`" />
  13. <span>{{ user.nickname }}</span>
  14. </router-link>
  15. <dd class="user-btn" @click="openDialog(2)">退出</dd>
  16. </template>
  17. <dd v-else class="user-btn" @click="openDialog(0)">登录</dd>
  18. </dl>
  19. <!--登录-->
  20. <mm-dialog
  21. ref="loginDialog"
  22. head-text="登录"
  23. confirm-btn-text="登录"
  24. cancel-btn-text="关闭"
  25. @confirm="login"
  26. >
  27. <div class="mm-dialog-text">
  28. <input
  29. v-model.trim="uidValue"
  30. class="mm-dialog-input"
  31. type="number"
  32. autofocus
  33. placeholder="请输入您的网易云 UID"
  34. @keyup.enter="login"
  35. />
  36. </div>
  37. <div slot="btn" @click="openDialog(1)">帮助</div>
  38. </mm-dialog>
  39. <!--帮助-->
  40. <mm-dialog
  41. ref="helpDialog"
  42. head-text="登录帮助"
  43. confirm-btn-text="去登录"
  44. cancel-btn-text="关闭"
  45. @confirm="openDialog(0)"
  46. >
  47. <div class="mm-dialog-text">
  48. <p>
  49. 1、
  50. <a target="_blank" href="https://music.163.com">
  51. 点我(https://music.163.com)
  52. </a>
  53. 打开网易云音乐官网
  54. </p>
  55. <p>2、点击页面右上角的“登录”</p>
  56. <p>3、点击您的头像,进入我的主页</p>
  57. <p>4、复制浏览器地址栏 /user/home?id= 后面的数字(网易云 UID)</p>
  58. </div>
  59. </mm-dialog>
  60. <!--退出-->
  61. <mm-dialog
  62. ref="outDialog"
  63. body-text="确定退出当前用户吗?"
  64. @confirm="out"
  65. />
  66. </header>
  67. </template>
  68. <script>
  69. import { getUserPlaylist } from '@api/music.js'
  70. import { mapGetters, mapActions } from 'vuex'
  71. import MmDialog from '@base/mm-dialog/mm-dialog'
  72. import { toHttps } from '@/utils/util'
  73. export default {
  74. name: 'MmHeader',
  75. components: {
  76. MmDialog
  77. },
  78. data() {
  79. return {
  80. user: {}, // 用户数据
  81. uidValue: '' // 记录用户 UID
  82. }
  83. },
  84. computed: {
  85. ...mapGetters(['uid'])
  86. },
  87. created() {
  88. this.uid && this._getUserPlaylist(this.uid)
  89. },
  90. methods: {
  91. // 打开对话框
  92. openDialog(key) {
  93. switch (key) {
  94. case 0:
  95. this.$refs.loginDialog.show()
  96. break
  97. case 1:
  98. this.$refs.loginDialog.hide()
  99. this.$refs.helpDialog.show()
  100. break
  101. case 2:
  102. this.$refs.outDialog.show()
  103. break
  104. case 3:
  105. this.$refs.loginDialog.hide()
  106. break
  107. }
  108. },
  109. // 退出登录
  110. out() {
  111. this.user = {}
  112. this.setUid(null)
  113. this.$mmToast('退出成功!')
  114. },
  115. // 登录
  116. login() {
  117. if (this.uidValue === '') {
  118. this.$mmToast('UID 不能为空')
  119. this.openDialog(0)
  120. return
  121. }
  122. this.openDialog(3)
  123. this._getUserPlaylist(this.uidValue)
  124. },
  125. // 获取用户数据
  126. _getUserPlaylist(uid) {
  127. getUserPlaylist(uid).then(({ playlist = [] }) => {
  128. this.uidValue = ''
  129. if (playlist.length === 0 || !playlist[0].creator) {
  130. this.$mmToast(`未查询找 UID 为 ${uid} 的用户信息`)
  131. return
  132. }
  133. const creator = playlist[0].creator
  134. this.setUid(uid)
  135. creator.avatarUrl = toHttps(creator.avatarUrl)
  136. this.user = creator
  137. setTimeout(() => {
  138. this.$mmToast(`${this.user.nickname} 欢迎使用 mmPlayer`)
  139. }, 200)
  140. })
  141. },
  142. ...mapActions(['setUid'])
  143. }
  144. }
  145. </script>
  146. <style lang="less">
  147. .mm-header {
  148. position: absolute;
  149. top: 0;
  150. left: 0;
  151. width: 100%;
  152. height: 60px;
  153. @media (max-width: 768px) {
  154. background: @header_bg_color;
  155. }
  156. .header {
  157. text-align: center;
  158. line-height: 60px;
  159. color: @text_color_active;
  160. font-size: @font_size_large;
  161. @media (max-width: 768px) {
  162. padding-left: 15px;
  163. text-align: left;
  164. }
  165. }
  166. .user {
  167. position: absolute;
  168. top: 50%;
  169. right: 15px;
  170. line-height: 30px;
  171. text-align: right;
  172. transform: translateY(-50%);
  173. &-info {
  174. float: left;
  175. margin-right: 15px;
  176. cursor: pointer;
  177. .avatar {
  178. width: 30px;
  179. height: 30px;
  180. border-radius: 90px;
  181. vertical-align: middle;
  182. }
  183. span {
  184. margin-left: 10px;
  185. color: @text_color_active;
  186. }
  187. }
  188. &-btn {
  189. float: left;
  190. cursor: pointer;
  191. &:hover {
  192. color: @text_color_active;
  193. }
  194. }
  195. @media (max-width: 768px) {
  196. &-info {
  197. margin-right: 10px;
  198. span {
  199. display: none;
  200. }
  201. }
  202. }
  203. }
  204. }
  205. .mm-dialog-text {
  206. text-align: left;
  207. .mm-dialog-input {
  208. width: 100%;
  209. height: 40px;
  210. box-sizing: border-box;
  211. padding: 0 15px;
  212. border: 1px solid @btn_color;
  213. outline: 0;
  214. background: transparent;
  215. color: @text_color_active;
  216. font-size: @font_size_medium;
  217. box-shadow: 0 0 1px 0 #fff inset;
  218. &::placeholder {
  219. color: @text_color;
  220. }
  221. }
  222. a:hover {
  223. color: #d43c33;
  224. }
  225. }
  226. </style>