├── .gitignore
├── .vscode
    └── extensions.json
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
    └── vite.svg
├── search
├── src
    ├── App.vue
    ├── assets
    │   ├── area.txt
    │   ├── img
    │   │   ├── defaultPic.png
    │   │   └── playDefaultPic.png
    │   └── vue.svg
    ├── axios
    │   └── http.js
    ├── components
    │   ├── avatar
    │   │   └── avatar.vue
    │   ├── calendar
    │   │   └── calendar.vue
    │   ├── cloudPan.vue
    │   ├── comment
    │   │   └── comment.vue
    │   ├── commune.vue
    │   ├── cropper
    │   │   └── cropper.vue
    │   ├── home.vue
    │   ├── login
    │   │   └── login.vue
    │   ├── lyric
    │   │   └── lyric.vue
    │   ├── my.vue
    │   ├── myInfo
    │   │   └── myInfo.vue
    │   ├── playmusic
    │   │   ├── playmusic.vue
    │   │   └── url.js
    │   ├── reviseMyInfo
    │   │   └── reviseMyInfo.vue
    │   ├── search
    │   │   └── search.vue
    │   ├── songListPage
    │   │   └── songListPage.vue
    │   ├── songPage
    │   │   └── songPage.vue
    │   ├── songlist
    │   │   └── songlist.vue
    │   ├── tababr
    │   │   └── tabbar.vue
    │   └── video
    │   │   └── video.vue
    ├── main.js
    ├── mixins
    │   └── mixin.js
    ├── router
    │   └── router.js
    ├── store
    │   ├── cloud.js
    │   ├── home.js
    │   ├── my-temp.js
    │   ├── my.js
    │   ├── play-temp.js
    │   ├── play.js
    │   ├── store.js
    │   ├── video-temp.js
    │   └── video.js
    └── style.css
└── vite.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 简单的仿网易云项目
 2 | 学完vue独立做的第一个项目，缺陷很多，希望得到大家的斧正^_^  
 3 | 前端：vue3 + elementPlus + vueX  
 4 | 后端：感谢[Binaryify大佬](https://github.com/Binaryify)提供的接口   
 5 | 
 6 | ##安装
 7 | 
 8 |     npm install
 9 | 
10 |     npm run dev
11 | 
12 | ## 在线演示
13 | 🛸🛸[仿网易云](http://121.4.123.199:8883/#/home)  
14 | 现在已经将后端接口和前端页面都部署在国内。  
15 | ps:请打开谷歌浏览器的移动端模式。  
16 | **如果首页无数据，请尝试下拉刷新**!!  
17 | **目前已经支持二维码登录，但云盘与刷新视频等功能暂时无法使用**!!  
18 | ## 功能
19 | 
20 | ### 🏚️home页面:
21 |   1.搜索功能：由于后端的数据较少，所以做的比较简单;  
22 | 
23 |   ![image](https://user-images.githubusercontent.com/100813306/199457815-a46117cc-ceaa-4317-8843-23ae82eee185.png)
24 | 
25 |   2.每日推荐歌单;
26 |   3.大家都在听;
27 |   4.下拉获取新数据;
28 |   
29 | ### 😃my页面:
30 |   1.初始进入时显示需要登录状态：
31 | 
32 |   ![image](https://user-images.githubusercontent.com/100813306/199456767-f630ae69-08b9-4941-b05e-0eb216146261.png)
33 |   ![image](https://user-images.githubusercontent.com/100813306/199457035-0b04d67b-6eff-4c63-9af4-92648fca4d52.png)
34 | 
35 |   2.登录后获取个人信息并本地化存储:
36 | 
37 |   ![image](https://user-images.githubusercontent.com/100813306/199457191-ce549c26-bcea-4669-9b71-bc930c7e0603.png)
38 | 
39 |   3.查看个人资料详情功能：
40 | 
41 |   ![image](https://user-images.githubusercontent.com/100813306/199457389-00d4b839-d90f-49c1-b2f6-4a98db424e99.png)
42 | 
43 |   4.修改个人资料：
44 |   包括头像、生日、nickname等： 
45 | 
46 |   ![image](https://user-images.githubusercontent.com/100813306/199457583-ac12cf71-217e-46a7-8c33-951811002f81.png)
47 |   ![image](https://user-images.githubusercontent.com/100813306/199457629-bc40085a-f348-418e-9a88-cdffb4ba15ea.png)
48 |   
49 | ### ☁️cloud云盘页面:
50 | 
51 |   1.获取云端存储的歌曲，并且可对其进行管理：
52 |   
53 |   ![image](https://user-images.githubusercontent.com/100813306/199458294-99edddef-ae8e-4a1a-b24e-964eac4b5ef7.png)
54 |   
55 | ### 🎧歌曲详情页面:
56 |   1.歌曲详情页面可进行封面/歌词切换，顶部可下载和查看评论，顶部进行歌曲切换：
57 | 
58 |   ![image](https://user-images.githubusercontent.com/100813306/199458768-e409f88f-8a8d-438b-8852-d0f4e287437b.png)
59 |   ![image](https://user-images.githubusercontent.com/100813306/199458801-27b3c616-7302-4bca-9ece-0c4a74067ff9.png)
60 |   ![image](https://user-images.githubusercontent.com/100813306/199458886-b8fc5347-4b3c-4f75-9080-99b046b4cd4e.png)
61 |   
62 | ### 🎬社区功能：
63 |   1.实现听音乐的同时，刷刷视频,感觉某些地方的逻辑怪怪的，后续找到问题会修复的
64 | 
65 |   ![image](https://user-images.githubusercontent.com/100813306/200152945-ee3c40f6-9399-4f0f-b758-fa14c058ac4d.png)
66 | 
67 |   
68 |   
69 | 
70 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="https://s1.music.126.net/style/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |     <title>仿网易云音乐</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "wy",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@element-plus/icons-vue": "^2.0.9",
13 |     "axios": "^0.27.2",
14 |     "element-plus": "^2.2.17",
15 |     "pinia": "^2.0.30",
16 |     "qrcodejs2": "^0.0.2",
17 |     "qs": "^6.11.0",
18 |     "vue": "^3.2.37",
19 |     "vue-qr": "^4.0.9",
20 |     "vue-router": "^4.1.5",
21 |     "vuejs-loadmore": "^1.0.7",
22 |     "vuex": "^4.0.2",
23 |     "vuex-persist": "^3.1.3",
24 |     "vuex-persistedstate": "^4.1.0"
25 |   },
26 |   "devDependencies": {
27 |     "@vitejs/plugin-vue": "^3.1.0",
28 |     "less": "^4.1.3",
29 |     "less-loader": "^11.0.0", 
30 |     "vite": "^3.1.0",
31 |     "vue-cropper": "^1.0.5"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/search:
--------------------------------------------------------------------------------
 1 |   comment
 2 |   download
 3 |   login
 4 |   main
 5 |   my
 6 |   myInfo
 7 |   potimization
 8 |   reviseMyInfo
 9 | * search
10 |   songListPage
11 |   songPage
12 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <script>
  3 | import home from './components/home.vue'
  4 | import playmusic from './components/playmusic/playmusic.vue'
  5 | import { mapMutations, mapState } from 'vuex'
  6 | import mixinItem from './mixins/mixin.js'
  7 | import { ElMessage } from 'element-plus'
  8 | export default {
  9 |   name: 'APP',
 10 |   computed: {
 11 |     ...mapState('m_play', ['showPlay']),
 12 |     ...mapState('t_play', ['downloadFlag'])
 13 |   },
 14 |   // 子组件点击歌曲触发播放器组件
 15 |   components: {
 16 |     playmusic,
 17 |     home,
 18 |   },
 19 |   created() {
 20 |     // this.DisplayMusic()
 21 |   },
 22 |   mixins: [mixinItem],
 23 |   watch: {
 24 |     $route(to, from) {
 25 |       if (to.path === '/songListPage' || to.path === '/myInfo' || to.path === '/reviseMyInfo' || to.path === '/search') {
 26 |         this.styleObject.bottom = '0'
 27 |       } else if (to.path === '/songPage') {
 28 |         this.styleObject.bottom = '116px'
 29 |       }
 30 |       else {
 31 |         this.styleObject.bottom = '56px'
 32 |       }
 33 |     },
 34 |     showPlay(newV, oldV) {
 35 |       this.$refs.playmusic.noneStyle()
 36 |     },
 37 |     downloadFlag(newV, oldV) {
 38 |       if (newV === 'start') {
 39 |         const form = this.$refs.playmusic.downLoadForm()
 40 |         this.downloadFile(form.url, form.name + '@#@' + form.id, this.updatedDownloadFlag('succ'));
 41 | 
 42 |       } else if (newV === 'succ') {
 43 |         ElMessage({
 44 |           showClose: false,
 45 |           message: '下载完成',
 46 |           center: true,
 47 |           type: 'success'
 48 |         })
 49 |         this.updatedDownloadFlag('wait')
 50 |       }
 51 |     }
 52 |   },
 53 |   data() {
 54 |     return {
 55 |       // showPlay: true,
 56 |       bottom: 56,
 57 |       styleObject: {
 58 |         zIndex: '999',
 59 |         position: 'fixed',
 60 |         bottom: '56px'
 61 |       },
 62 |       showFlag: true
 63 |     }
 64 |   },
 65 |   provide() {
 66 |     return {
 67 |       playMusictoApp: this.playMusicHandle,
 68 |       showPlaytoApp: this.showPlayHandle,
 69 |       changeMusicStoApp: this.changeMusicS,
 70 |       playContainertoApp: this.playContainer,
 71 |       DisplayMusictoApp: this.DisplayMusic
 72 |     }
 73 |   },
 74 |   methods: {
 75 |     ...mapMutations('t_play', ['updatedDownloadFlag']),
 76 |     playMusicHandle(url, pic, name, id) {
 77 |       this.$refs.playmusic.OneclickPlay(url, pic, name, id)
 78 |     },
 79 |     showPlayHandle() {
 80 |       this.$refs.playmusic.showStyle()
 81 |       this.styleObject.bottom = '56px'
 82 |     },
 83 |     changeMusicS() {
 84 |       return this.$refs.playmusic.changeTheMusic()
 85 |     },
 86 |     playContainer() {
 87 |       this.$refs.playmusic.pause()
 88 |     },
 89 |     // 控制隐藏或者显示播放器
 90 |     DisplayMusic() {
 91 |       this.showFlag = !this.showFlag;
 92 |     }
 93 |   }
 94 | }
 95 | </script>
 96 | <template>
 97 |   <playmusic class="playmusic" :style="styleObject" ref="playmusic" v-show="showFlag">
 98 |   </playmusic>
 99 |   <router-view></router-view>
100 | </template>
101 | 
102 | <style scoped>
103 | body {
104 |   font-family: ”Microsoft YaHei”;
105 | }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/assets/area.txt:
--------------------------------------------------------------------------------
  1 | 1100 北京 北京;1200 天津 天津;
  2 | 1301 河北 石家庄;
  3 | 1302 河北 唐山;
  4 | 1303 河北 秦皇岛;
  5 | 1304 河北 邯郸;
  6 | 1305 河北 邢台;
  7 | 1306 河北 保定;
  8 | 1307 河北 张家口;
  9 | 1308 河北 承德;
 10 | 1309 河北 沧州;
 11 | 1310 河北 廊坊;
 12 | 1311 河北 衡水;
 13 | 1401 山西 太原;
 14 | 1402 山西 大同;
 15 | 1403 山西 阳泉;
 16 | 1404 山西 长治;
 17 | 1405 山西 晋城;
 18 | 1406 山西 朔州;
 19 | 1407 山西 晋中;
 20 | 1408 山西 运城;
 21 | 1409 山西 忻州;
 22 | 1410 山西 临汾;
 23 | 1411 山西 吕梁;
 24 | 1424 山西 晋中;
 25 | 1501 内蒙古 呼和浩特;
 26 | 1502 内蒙古 包头;
 27 | 1503 内蒙古 乌海;
 28 | 1504 内蒙古 赤峰;
 29 | 1505 内蒙古 通辽;
 30 | 1506 内蒙古 鄂尔多斯
 31 | 1507 内蒙古 呼伦贝尔
 32 | 1508 内蒙古 巴彦淖尔
 33 | 1509 内蒙古 乌兰察布
 34 | 1522 内蒙古 兴安盟
 35 | 1525 内蒙古 锡林郭勒
 36 | 1529 内蒙古 阿拉善盟
 37 | 2101 辽宁 沈阳
 38 | 2102 辽宁 大连
 39 | 2103 辽宁 鞍山
 40 | 2104 辽宁 抚顺
 41 | 2105 辽宁 本溪
 42 | 2106 辽宁 丹东
 43 | 2107 辽宁 锦州
 44 | 2108 辽宁 营口
 45 | 2109 辽宁 阜新
 46 | 2110 辽宁 辽阳
 47 | 2111 辽宁 盘锦
 48 | 2112 辽宁 铁岭
 49 | 2113 辽宁 朝阳
 50 | 2114 辽宁 葫芦岛
 51 | 2200 吉林 吉林
 52 | 2201 吉林 长春
 53 | 2202 吉林 吉林
 54 | 2203 吉林 四平
 55 | 2204 吉林 辽源
 56 | 2205 吉林 通化
 57 | 2206 吉林 白山
 58 | 2207 吉林 松原
 59 | 2208 吉林 白城
 60 | 2224 吉林 延边州
 61 | 2301 黑龙江 哈尔滨
 62 | 2302 黑龙江 齐齐哈尔
 63 | 2303 黑龙江 鸡西
 64 | 2304 黑龙江 鹤岗
 65 | 2305 黑龙江 双鸭山
 66 | 2306 黑龙江 大庆
 67 | 2307 黑龙江 伊春
 68 | 2308 黑龙江 佳木斯
 69 | 2309 黑龙江 七台河
 70 | 2310 黑龙江 牡丹江
 71 | 2311 黑龙江 黑河
 72 | 2312 黑龙江 绥化
 73 | 2321 黑龙江 哈尔滨
 74 | 2327 黑龙江 大兴安岭
 75 | 3100 上海 上海
 76 | 3201 江苏 南京
 77 | 3202 江苏 无锡
 78 | 3203 江苏 徐州
 79 | 3204 江苏 常州
 80 | 3205 江苏 苏州
 81 | 3206 江苏 南通
 82 | 3207 江苏 连云港
 83 | 3208 江苏 淮安
 84 | 3209 江苏 盐城
 85 | 3210 江苏 扬州
 86 | 3211 江苏 镇江
 87 | 3212 江苏 泰州
 88 | 3301 浙江省 杭州
 89 | 3302 浙江省 宁波
 90 | 3303 浙江省 温州
 91 | 3304 浙江省 嘉兴
 92 | 3305 浙江省 湖州
 93 | 3306 浙江省 绍兴
 94 | 3307 浙江省 金华
 95 | 3308 浙江省 衢州
 96 | 3309 浙江省 舟山
 97 | 3310 浙江省 台州
 98 | 3311 浙江省 丽水
 99 | 3401 安徽 合肥
100 | 3402 安徽 芜湖
101 | 3403 安徽 蚌埠
102 | 3404 安徽 淮南
103 | 3405 安徽 马鞍山
104 | 3406 安徽 淮北
105 | 3407 安徽 铜陵
106 | 3408 安徽 安庆
107 | 3410 安徽 黄山
108 | 3411 安徽 滁州
109 | 3412 安徽 阜阳
110 | 3413 安徽 宿州
111 | 3415 安徽 六安
112 | 3416 安徽 亳州
113 | 3417 安徽 池州
114 | 3418 安徽 宣城
115 | 3422 安徽 宿县
116 | 3501 福建 福州
117 | 3502 福建 厦门
118 | 3503 福建 莆田
119 | 3504 福建 三明
120 | 3505 福建 泉州
121 | 3506 福建 漳州
122 | 3507 福建 南平
123 | 3508 福建 龙岩
124 | 3509 福建 宁德
125 | 3601 江西 南昌
126 | 3602 江西 景德镇
127 | 3603 江西 萍乡
128 | 3604 江西 九江
129 | 3605 江西 新余
130 | 3606 江西 鹰潭
131 | 3607 江西 赣州
132 | 3608 江西 吉安
133 | 3609 江西 宜春
134 | 3610 江西 抚州
135 | 3611 江西 上饶
136 | 3701 山东 济南
137 | 3702 山东 青岛
138 | 3703 山东 淄博
139 | 3704 山东 枣庄
140 | 3705 山东 东营
141 | 3706 山东 烟台
142 | 3707 山东 潍坊
143 | 3708 山东 济宁
144 | 3709 山东 泰安
145 | 3710 山东 威海
146 | 3711 山东 日照
147 | 3712 山东 莱芜
148 | 3713 山东 临沂
149 | 3714 山东 德州
150 | 3715 山东 聊城
151 | 3716 山东 滨州
152 | 3717 山东 菏泽
153 | 4101 河南 郑州
154 | 4102 河南 开封
155 | 4103 河南 洛阳
156 | 4104 河南 平顶山
157 | 4105 河南 安阳
158 | 4106 河南 鹤壁
159 | 4107 河南 新乡
160 | 4108 河南 焦作
161 | 4109 河南 濮阳
162 | 4110 河南 许昌
163 | 4111 河南 漯河
164 | 4112 河南 三门峡
165 | 4113 河南 南阳
166 | 4114 河南 商丘
167 | 4115 河南 信阳
168 | 4116 河南 周口
169 | 4117 河南 驻马店
170 | 4201 湖北 武汉
171 | 4202 湖北 黄石
172 | 4203 湖北 十堰
173 | 4205 湖北 宜昌
174 | 4206 湖北 襄阳
175 | 4207 湖北 鄂州
176 | 4208 湖北 荆门
177 | 4209 湖北 孝感
178 | 4210 湖北 荆州
179 | 4211 湖北 黄冈
180 | 4212 湖北 咸宁
181 | 4213 湖北 随州
182 | 4228 湖北 恩施州
183 | 4301 湖南 长沙
184 | 4302 湖南 株洲
185 | 4303 湖南 湘潭
186 | 4304 湖南 衡阳
187 | 4305 湖南 邵阳
188 | 4306 湖南 岳阳
189 | 4307 湖南 常德
190 | 4309 湖南 益阳
191 | 4310 湖南 郴州
192 | 4311 湖南 永州
193 | 4312 湖南 怀化
194 | 4313 湖南 娄底
195 | 4331 湖南 湘西州
196 | 4401 广东 广州
197 | 4402 广东 韶关
198 | 4403 广东 深圳
199 | 4404 广东 珠海
200 | 4405 广东 汕头
201 | 4406 广东 佛山
202 | 4407 广东 江门
203 | 4408 广东 湛江
204 | 4409 广东 茂名
205 | 4412 广东 肇庆
206 | 4413 广东 惠州
207 | 4414 广东 梅州
208 | 4415 广东 汕尾
209 | 4416 广东 河源
210 | 4417 广东 阳江
211 | 4418 广东 清远
212 | 4419 广东 东莞
213 | 4420 广东 中山
214 | 4451 广东 潮州
215 | 4452 广东 揭阳
216 | 4453 广东 云浮
217 | 4501 广西 南宁
218 | 4502 广西 柳州
219 | 4503 广西 桂林
220 | 4504 广西 梧州
221 | 4505 广西 北海
222 | 4506 广西 防城港
223 | 4507 广西 钦州
224 | 4508 广西 贵港
225 | 4509 广西 玉林
226 | 4510 广西 百色
227 | 4511 广西 贺州
228 | 4512 广西 河池
229 | 4513 广西 来宾
230 | 4514 广西 崇左
231 | 4524 广西 贺州
232 | 4601 海南 海口
233 | 4602 海南 三亚
234 | 4690 海南 儋州
235 | 4690 海南 三沙
236 | 5000 重庆 重庆
237 | 5101 四川 成都
238 | 5103 四川 自贡
239 | 5104 四川 攀枝花
240 | 5105 四川 泸州
241 | 5106 四川 德阳
242 | 5107 四川 绵阳
243 | 5108 四川 广元
244 | 5109 四川 遂宁
245 | 5110 四川 内江
246 | 5111 四川 乐山
247 | 5113 四川 南充
248 | 5114 四川 眉山
249 | 5115 四川 宜宾
250 | 5116 四川 广安
251 | 5117 四川 达州
252 | 5119 四川 巴中
253 | 5120 四川 资阳
254 | 5134 四川 凉山州
255 | 5201 贵州 贵阳
256 | 5202 贵州 六盘水
257 | 5203 贵州 遵义
258 | 5204 贵州 安顺
259 | 5205 贵州 毕节
260 | 5206 贵州 铜仁
261 | 5223 贵州 黔西南州
262 | 5226 贵州 黔东南州
263 | 5227 贵州 黔南州
264 | 5301 云南 昆明
265 | 5303 云南 曲靖
266 | 5304 云南 玉溪
267 | 5305 云南 保山
268 | 5306 云南 昭通
269 | 5307 云南 丽江
270 | 5308 云南 普洱
271 | 5309 云南 临沧
272 | 5323 云南 楚雄州
273 | 5325 云南 红河州
274 | 5326 云南 文山州
275 | 5328 云南 西双版纳
276 | 5329 云南 大理州
277 | 5331 云南 德宏州
278 | 5333 云南 怒江州
279 | 5334 云南 迪庆州
280 | 5401 西藏 拉萨
281 | 5421 西藏 昌都
282 | 5422 西藏 山南
283 | 5423 西藏 日喀则
284 | 5426 西藏 林芝
285 | 6101 陕西 西安
286 | 6102 陕西 铜川
287 | 6103 陕西 宝鸡
288 | 6104 陕西 咸阳
289 | 6105 陕西 渭南
290 | 6106 陕西 延安
291 | 6107 陕西 汉中
292 | 6108 陕西 榆林
293 | 6109 陕西 安康
294 | 6110 陕西 商洛
295 | 6201 甘肃省 兰州
296 | 6202 甘肃省 嘉峪关
297 | 6203 甘肃省 金昌
298 | 6204 甘肃省 白银
299 | 6205 甘肃省 天水
300 | 6206 甘肃省 武威
301 | 6207 甘肃省 张掖
302 | 6208 甘肃省 平凉
303 | 6209 甘肃省 酒泉
304 | 6210 甘肃省 庆阳
305 | 6211 甘肃省 定西
306 | 6212 甘肃省 陇南
307 | 6229 甘肃省 临夏州
308 | 6230 甘肃省 甘南州
309 | 6301 青海 西宁
310 | 6321 青海 海东
311 | 6322 青海 海北州
312 | 6323 青海 黄南州
313 | 6325 青海 海南州
314 | 6326 青海 果洛州
315 | 6327 青海 玉树州
316 | 6328 青海 海西州
317 | 6401 宁夏 银川
318 | 6402 宁夏 石嘴山
319 | 6403 宁夏 吴忠
320 | 6404 宁夏 固原
321 | 6405 宁夏 中卫
322 | 6501 新疆 乌鲁木齐
323 | 6502 新疆 克拉玛依
324 | 6521 新疆 吐鲁番
325 | 6522 新疆 哈密
326 | 6523 新疆 昌吉州
327 | 6527 新疆 博尔塔拉州
328 | 6528 新疆 巴音郭楞
329 | 6530 新疆 克孜勒苏州
330 | 6531 新疆 喀什地区
331 | 6532 新疆 和田地区
332 | 6540 新疆 伊犁州
333 | 6542 新疆 塔城地区
334 | 6590 新疆 石河子
335 | 


--------------------------------------------------------------------------------
/src/assets/img/defaultPic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yeti-xxx/Cloud-Music-move/12a36a10bd7daf3b745eff94718e52c06227078a/src/assets/img/defaultPic.png


--------------------------------------------------------------------------------
/src/assets/img/playDefaultPic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yeti-xxx/Cloud-Music-move/12a36a10bd7daf3b745eff94718e52c06227078a/src/assets/img/playDefaultPic.png


--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/src/axios/http.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import qs from 'qs'
 3 | 
 4 | let api_base_url = ''
 5 | if (import.meta.env.MODE === 'development') {
 6 |   api_base_url = 'http://111.67.195.237:8886/'
 7 | } else if (import.meta.env.MODE === 'production') {
 8 |   api_base_url = 'http://111.67.195.237:8886/'
 9 | }
10 | let instance = axios.create({
11 |   timeout: 1000 * 80,
12 |   baseURL: api_base_url
13 | })
14 | instance.defaults.responseType = 'json'
15 | instance.defaults.withCredentials = true
16 | instance.defaults.transformRequest = [
17 |   data => {
18 |     return qs.stringify(data)
19 |   }
20 | ]
21 | instance.defaults.validateStatus = function () {
22 |   // return status >= 200 && status < 400; // 200- 399  resolve  其他状态码 reject
23 |   // 如果在响应拦截设置了状态码判断，这里设置返回 true
24 |   return true
25 | }
26 | // 请求拦截器
27 | instance.interceptors.request.use(
28 |   config => {
29 | 
30 |     return config
31 |   },
32 |   error => {
33 |     return Promise.reject(error)
34 |   }
35 | )
36 | // 响应拦截器即异常处理
37 | // 服务器 Response 对象
38 | instance.interceptors.response.use(
39 |   response => {
40 |     // {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request:{…}}
41 |     let data = response.data     //响应的数据部分
42 |     let status = response.status  //标准状态码
43 |     if (status === 200) {  //如果响应正常则放行 数据
44 |       return Promise.resolve(data) //  *响应拦截器，只取数据部分*
45 |     }
46 | 
47 |     else if (status >= 400 && status <= 499) {
48 |       return
49 |     }
50 |     else {
51 |       //其他错误
52 |       return Promise.reject(response)
53 |     }
54 |   },
55 |   error => {
56 |   }
57 | )
58 | let api = {}
59 | api.get = function (url) {
60 |   return new Promise((resolve, reject) => {
61 |     instance
62 |       .get(url)
63 |       .then(response => {
64 |         resolve(response)
65 |       })
66 |       .catch(error => {
67 |         reject(error)
68 |       })
69 |   })
70 | }
71 | api.post = function (url, data) {
72 |   return new Promise((resolve, reject) => {
73 |     instance
74 |       .post(url, data)
75 |       .then(response => {
76 |         resolve(response)
77 |       })
78 |       .catch(error => {
79 |         reject(error)
80 |       })
81 |   })
82 | }
83 | export default api


--------------------------------------------------------------------------------
/src/components/avatar/avatar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="avatarContainer">
 3 |         <!-- 头像框 -->
 4 |         <div class="block">
 5 |             <el-avatar :size="60" :src="avatarUrl" />
 6 |         </div>
 7 |         <!-- nickname -->
 8 |         <span class="nickname">{{nickname}}</span>
 9 |         <slot class="Change"></slot>
10 |     </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |     name: 'avatar',
16 |     props:{
17 |         avatarUrl:String,
18 |         nickname:String
19 |     }
20 | }
21 | 
22 | </script>
23 | 
24 | <style lang='less' scoped>
25 | ::v-deep(.el-card) {
26 |   --el-card-padding: 0;
27 | }
28 | .avatarContainer{
29 |     display:flex;
30 |     flex-direction: column;
31 |     align-items:center;
32 |     margin:auto;
33 |     background:#2b2b2b;
34 |     width:90%;
35 |     height:120px;
36 |     border-radius:5%;
37 |     .block{
38 |         position:relative;
39 |         top:-25px;
40 |     }
41 |     .nickname{
42 |         font-weight:800;
43 |         color:#eaeaea;
44 |         font-size:18px;
45 |         margin-top:-20px;
46 |     }
47 |    
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/components/calendar/calendar.vue:
--------------------------------------------------------------------------------
  1 | <!-- 日历组件 -->
  2 | <template>
  3 |     <div class="containerCalendar">
  4 |         <div :style="mt"></div>
  5 |         <div class="calendar" :style="screenChange">
  6 |             <div class="title">请选择</div>
  7 |             <div class="box">
  8 |                 <div class="yearDayContainer">
  9 |                     <div class="yearChoose" @click="MYflagChange(false)">
 10 |                         {{ this.selectData.Year }}年
 11 |                     </div>
 12 |                     <div class="BigMouthAndDay" @click="MYflagChange(true)">
 13 |                         {{ this.selectData.Mouth }}月{{ this.selectData.Day }}日周{{ ChinaWeek[this.selectData.Week] }}
 14 |                     </div>
 15 |                 </div>
 16 |                 <div class="MouthChoose" v-if="MYflag">
 17 |                     <div class="preMouth" @click="changeMouth('pre')">
 18 |                         <el-icon>
 19 |                             <ArrowLeft />
 20 |                         </el-icon>
 21 |                     </div>
 22 |                     <div class="yearAndMouth">
 23 |                         {{ birthdayTimeInStore.Y }}年{{ birthdayTimeInStore.M }}月
 24 |                     </div>
 25 |                     <div class="nextMouth" @click="changeMouth('next')">
 26 |                         <el-icon>
 27 |                             <ArrowRight />
 28 |                         </el-icon>
 29 |                     </div>
 30 |                 </div>
 31 |                 <div class="dayChoose" v-if="MYflag">
 32 |                     <ul class="weekArea">
 33 |                         <li class="weekItem" v-for="(item, i) in weekArray" :key="i">
 34 |                             {{ item }}
 35 |                         </li>
 36 |                     </ul>
 37 |                     <ul class="dataArea">
 38 |                         <li :class="['dataItem', item.isSelect ? 'dayChoose' : '']" v-for="(item, i) in dataArray"
 39 |                             :key="i" @click="chooseTheDay(item)">
 40 |                             {{ item.day }}
 41 |                         </li>
 42 |                     </ul>
 43 |                 </div>
 44 |                 <div class="YearChooseBox" v-if="!MYflag" id="YearChooseBox">
 45 |                     <div :class="['yearItem', yearArray[i] === selectData.Year ? 'theYear' : '']"
 46 |                         v-for="(item, i) in yearArray" :key="i" @click="changeSelectYear(item)">
 47 |                         {{ item }}
 48 |                     </div>
 49 |                 </div>
 50 |                 <div class="foot">
 51 |                     <div class="close" @click="close">取消</div>
 52 |                     <div class="sure" @click="sureTime">确定</div>
 53 |                 </div>
 54 |             </div>
 55 |         </div>
 56 |     </div>
 57 | </template>
 58 | 
 59 | <script>
 60 | import { mapState, mapMutations } from 'vuex'
 61 | export default {
 62 |     name: 'calendar',
 63 |     computed: {
 64 |         ...mapState('t_my', ['birthdayTimeInStore'])
 65 |     },
 66 |     inject: ['changCalendarFlag'],
 67 |     data() {
 68 |         return {
 69 |             screenChange: {
 70 |                 position: 'absolute',
 71 |                 width: document.documentElement.clientWidth * 0.9 + 'px',
 72 |                 height: document.documentElement.clientHeight * 0.8 + 'px',
 73 |                 transform: 'translateX(-50%)',
 74 |                 top: '15%',
 75 |                 left: '50%',
 76 |             },
 77 |             mt: {
 78 |                 position: 'absolute',
 79 |                 width: document.documentElement.clientWidth + 'px',
 80 |                 height: document.documentElement.clientHeight + 'px',
 81 |                 background: 'rgba(0,0,0,.5)'
 82 |             },
 83 |             theYear: {
 84 | 
 85 |             },
 86 |             weekArray: ['日', '一', '二', '三', '四', '五', '六'],
 87 |             dataArray: Array(40).fill(0, 0, 40),
 88 |             ChinaWeek: ['日', '一', '二', '三', '四', '五', '六'],
 89 |             selectData: {},
 90 |             MYflag: true,
 91 |             yearArray: []
 92 |         }
 93 |     },
 94 |     created() {
 95 |         //初始化选中日期
 96 |         this.selectData.Day = this.birthdayTimeInStore.D
 97 |         this.selectData.Mouth = this.birthdayTimeInStore.M
 98 |         this.selectData.Year = this.birthdayTimeInStore.Y
 99 |         this.selectData.Week = new Date(this.selectData.Year, this.selectData.Mouth - 1, this.selectData.Day).getDay()
100 |         this.dataArray = this.getMouthData(this.birthdayTimeInStore)
101 |         for (let i = 0; i <= 2100 - 1920; i++) {
102 |             this.yearArray[i] = 1920 + i
103 | 
104 |         }
105 | 
106 |     },
107 |     mounted() {
108 |     },
109 |     methods: {
110 |         ...mapMutations('t_my', ['updatedBirthdayTimeInStore']),
111 |         // 获取当年的月份数据
112 |         getMouthData(birthdayTime) {
113 |             let dataArray = []
114 |             let daysInMouth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
115 |             // 闰年判断
116 |             if ((birthdayTime.Y % 4 === 0 && birthdayTime.Y % 100 !== 0) || birthdayTime.Y % 400 == 0) {
117 |                 daysInMouth[1] = 29
118 |             }
119 |             // 获取该年该月一号的星期 如11月1日
120 |             const mouthStartWeekDay = new Date(birthdayTime.Y, birthdayTime.M - 1, 1).getDay()
121 |             // 获取该年该月的下一月一号的星期 则此处获取12月1日
122 |             const mouthEndWeekDay = new Date(birthdayTime.Y, birthdayTime.M, 1).getDay()
123 |             // 填充数据
124 |             for (let i = 0; i < mouthStartWeekDay; i++) {
125 |                 let emptDay = {
126 |                     type: 'pre',
127 |                     day: '',
128 |                     mouth: '',
129 |                     year: ''
130 |                 }
131 |                 dataArray.push(emptDay)
132 |             }
133 |             for (let i = 0; i < daysInMouth[birthdayTime.M - 1]; i++) {
134 |                 let ItemDay = {
135 |                     type: 'normal',
136 |                     day: i + 1,
137 |                     mouth: birthdayTime.M,
138 |                     year: birthdayTime.Y,
139 |                     isSelect: Number(birthdayTime.D) === i + 1
140 |                 }
141 |                 dataArray.push(ItemDay)
142 |             }
143 |             for (let i = 0; i < 6 - mouthEndWeekDay; i++) {
144 |                 let emptDay = {
145 |                     type: 'next',
146 |                     day: '',
147 |                     mouth: '',
148 |                     year: ''
149 |                 }
150 |                 dataArray.push(emptDay)
151 |             }
152 |             return dataArray
153 |         },
154 |         // 选择某一天时
155 |         chooseTheDay(item) {
156 |             //空的日期不可选择
157 |             if (item.type !== 'normal') {
158 |                 return
159 |             }
160 |             this.dataArray.forEach(element => {
161 |                 element.isSelect = false
162 |             })
163 |             item.isSelect = true
164 |             this.birthdayTimeInStore.D = item.day
165 |             this.selectData.Day = item.day
166 |             this.selectData.Mouth = this.birthdayTimeInStore.M
167 |             this.selectData.Year = this.birthdayTimeInStore.Y
168 |             this.selectData.Week = new Date(this.selectData.Year, this.selectData.Mouth - 1, this.selectData.Day).getDay()
169 |         },
170 |         //切换月份操作
171 |         changeMouth(flag) {
172 |             if (flag === 'pre') {
173 |                 if (this.birthdayTimeInStore.M === 1) {
174 |                     this.birthdayTimeInStore.Y = this.birthdayTimeInStore.Y - 1
175 |                     this.birthdayTimeInStore.M = 12
176 |                 } else {
177 |                     this.birthdayTimeInStore.M = this.birthdayTimeInStore.M - 1
178 |                 }
179 |                 this.dataArray = this.getMouthData(this.birthdayTimeInStore)
180 |             } else {
181 |                 if (this.birthdayTimeInStore.M === 12) {
182 |                     this.birthdayTimeInStore.Y = this.birthdayTimeInStore.Y + 1
183 |                     this.birthdayTimeInStore.M = 1
184 |                 } else {
185 |                     this.birthdayTimeInStore.M = this.birthdayTimeInStore.M + 1
186 |                 }
187 |                 this.dataArray = this.getMouthData(this.birthdayTimeInStore)
188 |             }
189 |         },
190 |         // 点击取消按钮
191 |         close() {
192 |             this.changCalendarFlag()
193 |         },
194 |         // 点击确定
195 |         sureTime() {
196 |             this.updatedBirthdayTimeInStore(this.birthdayTimeInStore)
197 |             this.changCalendarFlag()
198 |         },
199 |         MYflagChange(flag) {
200 |             this.MYflag = flag
201 |             let This = this
202 |             if (flag === false) {
203 |                 setTimeout(() => {
204 |                     This.yearBoxTop()
205 |                 }, 10)
206 |             } else {
207 |                 this.getMouthData(this.birthdayTimeInStore)
208 |                 
209 |             }
210 |         },
211 |         // 控制滚动条
212 |         yearBoxTop() {
213 |             // 单个yearItem的高度
214 |             const h = Math.ceil(document.querySelector('.box').clientHeight * 0.62 * 0.1428)
215 |             let This = this
216 |             let num = 0
217 |             this.yearArray.forEach((element, i) => {
218 |                 if (element === This.selectData.Year) {
219 | 
220 |                     return num = i
221 |                 }
222 |             })
223 |             document.getElementById('YearChooseBox').scrollTop = Math.floor(h * num) - h * 0.5
224 |         },
225 |         // 当yearItem被单击
226 |         changeSelectYear(Year) {
227 |             this.selectData.Year = Year
228 |             this.birthdayTimeInStore.Y = Year
229 |             this.dataArray = this.getMouthData(this.birthdayTimeInStore)
230 | 
231 |         }
232 | 
233 |     }
234 | }
235 | 
236 | </script>
237 | 
238 | <style lang='less' scoped>
239 | .calendar {
240 | 
241 |     box-sizing: border-box;
242 |     background-color: #fefefe;
243 |     border-radius: 2%;
244 |     padding: 14px;
245 | }
246 | 
247 | .box {
248 |     display: flex;
249 |     flex-direction: column;
250 |     align-items: center;
251 |     width: 100%;
252 |     height: 100%;
253 | }
254 | 
255 | .yearDayContainer {
256 |     margin-top: 5%;
257 |     width: 100%;
258 |     height: 20%;
259 |     background-color: #cd3d3d;
260 | }
261 | 
262 | .MouthChoose {
263 |     display: flex;
264 |     justify-content: space-around;
265 |     align-items: center;
266 |     margin-top: 5%;
267 |     width: 90%;
268 |     height: 10%;
269 |     // background-color: pink;
270 |     color: #212121;
271 |     font-weight: 700;
272 | 
273 |     .yearAndMouth {
274 |         position: relative;
275 |         top: -3px;
276 |     }
277 | 
278 | }
279 | 
280 | .dayChoose {
281 |     transition: opacity .5s;
282 |     // box-sizing: border-box;
283 |     // padding: 3px;
284 |     margin-top: 5%;
285 |     width: 90%;
286 |     height: 51%;
287 |     // background-color: blueviolet;
288 | 
289 |     .weekArea {
290 |         width: 100%;
291 |         display: flex;
292 |         margin: 0;
293 |         padding: 0;
294 |         justify-content: space-between;
295 |         align-items: center;
296 |         font-size: 13px;
297 |         color: #777777;
298 | 
299 |         .weekItem {
300 |             // display: flex;
301 |             flex: 0 0 14.285%;
302 |             list-style-type: none;
303 |             align-items: center;
304 |             justify-content: center;
305 |             text-align: center;
306 |         }
307 |     }
308 | 
309 |     .dataArea {
310 |         display: flex;
311 |         flex-flow: row wrap;
312 |         width: 100%;
313 |         margin: 0;
314 |         padding: 0;
315 | 
316 |         .dataItem {
317 |             flex: 0 0 14.285%;
318 |             width: 40px;
319 |             height: 40px !important;
320 |             line-height: 40px;
321 |             list-style-type: none;
322 |             align-items: center;
323 |             justify-content: center;
324 |             text-align: center;
325 |             font-size: 14px;
326 |         }
327 | 
328 |         .dayChoose {
329 |             background-color: #cd3d3d;
330 |             border-radius: 50%;
331 |             margin: 0;
332 |         }
333 |     }
334 | }
335 | 
336 | .yearDayContainer {
337 |     box-sizing: border-box;
338 |     padding-top: 15px;
339 |     padding-left: 25px;
340 | 
341 |     .yearChoose {
342 |         font-size: 16px;
343 |         color: #efc5c6;
344 |     }
345 | 
346 |     .BigMouthAndDay {
347 |         font-size: 32px;
348 |         color: #ffffff;
349 |     }
350 | }
351 | 
352 | .YearChooseBox {
353 |     width: 100%;
354 |     height: 62%;
355 |     // background-color: pink;
356 |     overflow: hidden;
357 |     overflow-y: scroll;
358 | 
359 |     /*总是显示滚动条*/
360 |     .yearItem {
361 |         display: flex;
362 |         align-items: center;
363 |         justify-content: center;
364 |         border-bottom: 1px solid #e0e0e0;
365 |         height: 14.28%;
366 |     }
367 | 
368 |     .theYear {
369 |         font-size: 22px;
370 |         color: #cd3d3d;
371 |     }
372 | }
373 | 
374 | .foot {
375 |     position: absolute;
376 |     display: flex;
377 |     font-size: 14px;
378 |     color: #f83b3c;
379 |     font-weight: 600;
380 |     right: 4%;
381 |     bottom: 6%;
382 | 
383 |     .close {
384 |         margin-right: 50px;
385 |     }
386 | }
387 | </style>
388 | 


--------------------------------------------------------------------------------
/src/components/cloudPan.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 下拉刷新loading -->
  3 |   <div class="loadingBoxHome" v-if="loadingShow">
  4 |     <div class="loading"></div>
  5 |   </div>
  6 |   <div class="cloudContainer" ref="container">
  7 |     <input type="file" ref="songFileInput" accept="audio/mp3" @change="uploadSong" v-show="false" />
  8 |     <el-card class="box-card">
  9 |       <div class="top" v-show="!searchFlag">
 10 |         <div class="topLeft">
 11 |           <el-icon :size="27" color="#fdfdfd">
 12 |             <MostlyCloudy />
 13 |           </el-icon>
 14 |           <div class="titleAndDetail">
 15 |             <div class="title">音乐云盘</div>
 16 |             <div class="detail">{{ (size.useSize / 1024 / 1024 / 1024).toFixed(2) }} / {{ size.maxSize / 1024 / 1024 /
 17 |                 1024
 18 |             }}G</div>
 19 |           </div>
 20 |         </div>
 21 |         <div class="topRight">
 22 |           <div class="setting delete" @click="gotoDelete">
 23 |             <el-icon :size="25" color="#fdfdfd">
 24 |               <Delete />
 25 |             </el-icon>
 26 |           </div>
 27 |           <div class="search" @click="goSearch">
 28 |             <el-icon :size="25" color="#fdfdfd">
 29 |               <Search />
 30 |             </el-icon>
 31 |           </div>
 32 |         </div>
 33 |       </div>
 34 |       <div class="top topSearch" v-show="searchFlag">
 35 |         <div class="closeSearch" @click="goNormal">
 36 |           <el-icon :size="24" color="#fdfdfd">
 37 |             <ArrowLeft />
 38 |           </el-icon>
 39 |         </div>
 40 |         <div class="SearchInputBox">
 41 |           <input placeholder="搜索云盘内的歌曲" class="SearchInput" ref="SearchInput" />
 42 |         </div>
 43 |       </div>
 44 |       <div class="content">
 45 |         <div class="cloudItem" v-for="(item, i) in songArray" :key="i">
 46 |           <div class="index check">
 47 |             <span v-if="!deleteItem">{{ i + 1 }}</span>
 48 |             <div class="checkBox" :style="item.isDelete ? 'background:#fe3a3b;border: 2px solid #fe3a3b;' : ''"
 49 |               v-if="deleteItem" @click="checkItem(item)"></div>
 50 |           </div>
 51 |           <div class="song" @click="playMusictoApp(item.url, item.pic, item.name, item.id)">
 52 |             <div class="songName">
 53 |               {{ item.name }}
 54 |             </div>
 55 |             <div class="author">
 56 |               {{ item.author }}
 57 |             </div>
 58 |           </div>
 59 |         </div>
 60 |         <!-- 上传按钮 -->
 61 |         <div class="uploadBox" v-show="!searchFlag" @click="clickInput">
 62 |           <el-icon :size="23" color="#fdfdfd">
 63 |             <Upload />
 64 |           </el-icon>
 65 |         </div>
 66 |         <!-- 上传进度 -->
 67 |         <div class="progress" v-show="!searchFlag">
 68 |           <el-progress type="dashboard" :width="50" :percentage="complete" color="#2b2b2b" :status="'#777a80'"
 69 |             :stroke-width="4" />
 70 |         </div>
 71 |         <!-- 确认删除按钮 -->
 72 |         <div class="setting deleteBox" v-if="deleteItem" @click="deleteInCloudPan">
 73 |           <el-icon :size="25" color="#fdfdfd">
 74 |             <Delete />
 75 |           </el-icon>
 76 |         </div>
 77 |       </div>
 78 |     </el-card>
 79 |     <tabbar :pageNum="pageIndex"></tabbar>
 80 |   </div>
 81 | 
 82 | 
 83 | </template>
 84 | 
 85 | <script>
 86 | import { mapMutations, mapState } from 'vuex'
 87 | import Tabbar from './tababr/tabbar.vue'
 88 | import mixinItem from '../mixins/mixin.js'
 89 | import { reactive } from 'vue'
 90 | import axios from 'axios'
 91 | import { ElMessage } from 'element-plus'
 92 | export default {
 93 |   name: 'cloudPan',
 94 |   setup() {
 95 |     const songArray = reactive([]);
 96 |     const temp2 = reactive([]);
 97 |     const deletArray = reactive([])
 98 |     return {
 99 |       songArray,
100 |       temp2,
101 |       deletArray
102 |     }
103 |   },
104 |   components: {
105 |     Tabbar
106 |   },
107 |   mixins: [mixinItem],
108 |   computed: {
109 |     ...mapState('m_cloud', ['cloudPanSongArray', 'sizeStore']),
110 |     ...mapState('m_my', ['cookie'])
111 |   },
112 |   watch: {
113 |     searchFlag(newV, oldV) {
114 |       if (newV) {
115 |         this.searchSong()
116 |       }
117 |     }
118 |   },
119 |   data() {
120 |     return {
121 |       pageIndex: 3,
122 |       // songArray: [],
123 |       flag: false,
124 |       size: {},
125 |       isRefresh: true,
126 |       loadingShow: false,
127 |       searchFlag: false,
128 |       tempArray: [],
129 |       complete: 0,
130 |       deleteItem: false
131 |     }
132 |   },
133 |   async created() {
134 | 
135 |     if (this.cloudPanSongArray === 'null') {
136 |       const res = await this.$h.get('/user/cloud')
137 |       this.handleRes(res.data)
138 |       this.size.maxSize = res.maxSize
139 |       this.size.useSize = res.size
140 |       this.updatedSize(this.size)
141 |     } else {
142 |       this.songArray = this.cloudPanSongArray
143 |       this.size = this.sizeStore
144 |     }
145 | 
146 | 
147 |   },
148 |   mounted() {
149 |     this.downRefresh()
150 |   },
151 |   inject: ['playMusictoApp'],
152 |   methods: {
153 |     ...mapMutations('m_cloud', ['updatedCloudPanSongArray', 'updatedSize']),
154 |     // 处理初始数据
155 |     async handleRes(res) {
156 |       let This = this
157 |       this.songArray = [] //清空原始数据
158 |       for (let i = 0; i < res.length; i++) {
159 |         const element = res[i];
160 |         let songDetail = {}
161 |         if (element.fileName.indexOf('@#@') !== -1) {
162 |           const temp = element.fileName.split('@#@')
163 |           songDetail.name = temp[0]
164 |           songDetail.deletId = element.simpleSong.id
165 |           songDetail.id = temp[1].split('.')[0]
166 |           const { songs: res1 } = await This.getMusicDetail(songDetail.id)
167 |           const { data: url } = await This.getMusicUrl(songDetail.id)
168 |           songDetail.url = url[0].url
169 |           songDetail.author = res1[0].ar[0].name
170 |           songDetail.pic = res1[0].al.picUrl
171 |           songDetail.isDelete = false
172 |         } else {
173 |           songDetail.name = element.simpleSong.name
174 |           songDetail.author = element.simpleSong.ar[0].name
175 |           songDetail.id = element.songId
176 |           songDetail.deletId = element.songId
177 |           songDetail.pic = element.simpleSong.al.picUrl
178 |           const { data: url } = await This.getMusicUrl(songDetail.id)
179 |           songDetail.url = url[0].url
180 |           songDetail.isDelete = false
181 |         }
182 |         this.songArray.push(songDetail)
183 |       }
184 |       this.flag = true
185 |       this.updatedCloudPanSongArray(this.songArray)
186 |     },
187 |     // 点击搜索按钮发生的事件
188 |     goSearch() {
189 |       this.searchFlag = true
190 |       this.tempArray = this.songArray
191 |       this.songArray = this.temp2
192 |     },
193 |     //  从搜索状态退出
194 |     goNormal() {
195 |       this.songArray = this.cloudPanSongArray
196 |       this.searchFlag = false
197 |       this.temp2.length = 0
198 |       this.$refs.SearchInput.value = ''
199 |     },
200 |     // 输入关键词对数据进行处理
201 |     searchSong() {
202 |       let This = this
203 |       this.$refs.SearchInput.addEventListener('input', function () {
204 |         clearTimeout(This.timer)
205 |         This.timer = setTimeout(() => {
206 |           if (!This.$refs.SearchInput.value) {
207 |             return
208 |           } else {
209 |             This.temp2.length = 0
210 |             const imKey = This.$refs.SearchInput.value
211 |             for (let i = 0; i < This.tempArray.length; i++) {
212 |               const songNameItem = This.tempArray[i].name;
213 |               if (songNameItem.indexOf(imKey) !== -1) {
214 |                 This.songArray.push(This.tempArray[i])
215 |               }
216 |             }
217 |           }
218 |         }, 1000)
219 |       })
220 | 
221 |     },
222 |     // 模拟点击input
223 |     clickInput() {
224 |       this.$refs.songFileInput.click()
225 |     },
226 |     // 上传歌曲
227 |     uploadSong(e) {
228 |       let file = e.target.files[0]
229 |       let This = this
230 |       let formData = new FormData()
231 |       formData.append('songFile', file)
232 |       ElMessage({
233 |         showClose: false,
234 |         message: '上传中...',
235 |         center: true,
236 |       })
237 |       axios({
238 |         method: 'post',
239 |         url: 'https://netease-cloud-music-api-nxzt.vercel.app/cloud?time=' + Date.now() + '&cookie=' + This.cookie,
240 |         headers: {
241 |           'Content-Type': 'multipart/form-data',
242 |         },
243 |         data: formData,
244 |         onUploadProgress: progressEvent => {
245 |           This.complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
246 | 
247 |         }
248 |       }).then(res => {
249 |         This.complete = 0
250 |         ElMessage({
251 |           showClose: false,
252 |           message: '上传成功',
253 |           type: 'success',
254 |           center: true,
255 |         })
256 |       }).catch(err => {
257 | 
258 |       })
259 | 
260 |     },
261 |     // 点击垃圾桶,进入删除状态
262 |     gotoDelete() {
263 |       if (this.deleteItem) {
264 |         this.deleteItem = false
265 |       } else {
266 |         this.deleteItem = true
267 | 
268 |       }
269 |     },
270 |     // item被选中或取消选中
271 |     checkItem(item) {
272 |       if (item.isDelete) {
273 |         // 传进来是true...
274 |         item.isDelete = false
275 |         this.deletArray.splice(this.deletArray.indexOf(item.deletId), 1)
276 |       } else {
277 |         // 传进来是false
278 |         item.isDelete = true
279 |         this.deletArray.push(item.deletId)
280 |       }
281 | 
282 |     },
283 |     // 点击最终删除按钮
284 |     async deleteInCloudPan() {
285 |       if (this.deletArray.length === 0) {
286 |         return ElMessage({
287 |           showClose: false,
288 |           message: '未选中歌曲',
289 |           type: 'error',
290 |           center: true,
291 |         })
292 |       } else {
293 |         const str = this.deletArray.join(',')
294 |         const res = await this.$h.get('/user/cloud/del?id=' + str)
295 |         for (let i = 0; i < this.deletArray.length; i++) {
296 |           if (this.songArray.deletId === this.deletArray) {
297 |             this.songArray.splice(i,1)
298 |           }
299 |         }
300 |         if (res.code === 200) {
301 |           const res = await this.$h.get('/user/cloud')
302 |           this.handleRes(res.data)
303 |           this.size.maxSize = res.maxSize
304 |           this.size.useSize = res.size
305 |           this.updatedSize(this.size)
306 |           this.deletArray.length = 0
307 |         }
308 |       }
309 |     },
310 |     // 下拉刷新
311 |     downRefresh() {
312 |       let start = 0 //初始位置
313 |       let transitionHeight = 0  //移动距离
314 |       let This = this
315 |       this.$refs.container.addEventListener('touchstart', function (e) {
316 |         start = e.touches[0].pageY
317 |       }, false)
318 |       this.$refs.container.addEventListener('touchmove', async function (e) {
319 |         transitionHeight = e.touches[0].pageY - start //记录差值
320 |         if (transitionHeight > 0 && document.documentElement.scrollTop === 0) {
321 |           if (transitionHeight > 250 && This.isRefresh) {
322 |             This.isRefresh = false
323 |             This.loading()
324 |             const res = await This.$h.get('/user/cloud')
325 |             This.handleRes(res.data)
326 |             This.size.maxSize = res.maxSize
327 |             This.size.useSize = res.size
328 |             This.updatedSize(This.size)
329 | 
330 |           }
331 |         }
332 |       }, { passive: false })
333 |     },
334 |     //刷新效果动画
335 |     loading() {
336 |       this.loadingShow = true
337 |       setTimeout(() => {
338 |         this.isRefresh = true
339 |         this.loadingShow = false
340 |       }, 1000);
341 |     }
342 |   },
343 | 
344 | }
345 | 
346 | </script>
347 | 
348 | <style lang='less' scoped>
349 | ::v-deep(.el-card) {
350 |   --el-card-padding: 0;
351 |   --el-card-border-color: 0;
352 |   background-color: #141414;
353 | }
354 | 
355 | .cloudContainer {
356 |   .top {
357 |     display: flex;
358 |     padding: 10px;
359 |     align-items: center;
360 |     justify-content: space-between;
361 |     background-color: #2b2b2b;
362 | 
363 |     .topLeft {
364 |       display: flex;
365 |       align-items: center;
366 | 
367 |       .titleAndDetail {
368 |         margin-left: 10px;
369 |         display: flex;
370 |         flex-direction: column;
371 |         align-items: center;
372 | 
373 |         .title {
374 |           color: #fafafa;
375 |         }
376 | 
377 |         .detail {
378 |           font-size: 14px;
379 |           color: #979797;
380 |         }
381 | 
382 |       }
383 |     }
384 | 
385 |     .topRight {
386 |       display: flex;
387 | 
388 |       .setting {
389 |         margin-right: 25px;
390 |       }
391 |     }
392 |   }
393 | 
394 | 
395 |   .topSearch {
396 | 
397 |     .closeSearch {
398 |       width: 10%;
399 |     }
400 | 
401 |     .SearchInputBox {
402 |       position: relative;
403 |       left: -10px;
404 |       width: 84%;
405 |       padding-right: 5px;
406 | 
407 |       .SearchInput {
408 |         outline: none;
409 |         border: none;
410 |         background-color: #2b2b2b;
411 |         width: 100% !important;
412 |         font-size: 16px;
413 |         border-bottom: 1px solid #5f6065;
414 |         color: #5f6065;
415 |       }
416 |     }
417 |   }
418 | 
419 |   .content {
420 | 
421 |     .cloudItem {
422 |       padding: 10px;
423 |       display: flex;
424 |       align-items: center;
425 |       border-bottom: 1px solid #3f3d3d;
426 | 
427 |       .index {
428 |         margin-left: 10px;
429 |         font-size: 18px;
430 |         color: #949494;
431 |       }
432 | 
433 |       .checkBox {
434 |         border: 2px solid #6e7176;
435 |         width: 13px;
436 |         height: 13px;
437 |         border-radius: 20%;
438 |       }
439 | 
440 |       .song {
441 |         margin-left: 20px;
442 |         display: flex;
443 |         flex-direction: column;
444 |         justify-content: center;
445 | 
446 |         .songName {
447 |           width: 150px;
448 |           overflow: hidden; //超出的文本隐藏
449 |           text-overflow: ellipsis; //溢出用省略号显示
450 |           white-space: nowrap; //溢出不换行
451 |           font-size: 16px;
452 |           color: #e7e7e7;
453 |         }
454 | 
455 |         .author {
456 |           font-size: 14px;
457 |           color: #aeaaab;
458 |         }
459 |       }
460 |     }
461 | 
462 |     .uploadBox {
463 |       position: absolute;
464 |       bottom: 130px;
465 |       left: 10px;
466 |       display: flex;
467 |       justify-content: center;
468 |       align-items: center;
469 |       border-radius: 50%;
470 |       border: 1px solid #fdfdfd;
471 |       width: 40px;
472 |       height: 40px;
473 |       background-color: #e63434;
474 |       z-index: 999;
475 |     }
476 | 
477 |     .progress {
478 |       position: absolute;
479 |       bottom: 122px;
480 |       left: 6px;
481 |     }
482 | 
483 |     .deleteBox {
484 |       position: absolute;
485 |       bottom: 130px;
486 |       right: 10px;
487 |       display: flex;
488 |       justify-content: center;
489 |       align-items: center;
490 |       border-radius: 50%;
491 |       border: 1px solid #fdfdfd;
492 |       width: 40px;
493 |       height: 40px;
494 |       background-color: #e63434;
495 |       z-index: 999;
496 |     }
497 |   }
498 | }
499 | 
500 | // 转转转动画
501 | @keyframes circle {
502 |   0% {
503 |     transform: rotate(0);
504 |   }
505 | 
506 |   100% {
507 |     transform: rotate(360deg);
508 |   }
509 | }
510 | 
511 | .loadingBoxHome {
512 |   width: 20px;
513 |   height: 20px;
514 |   position: absolute;
515 |   top: 20px;
516 |   left: 50%;
517 |   transform: translateX(-50%);
518 |   z-index: 999;
519 | 
520 |   .loading {
521 |     width: 20px;
522 |     height: 20px;
523 |     border: 2px solid #e63434;
524 |     border-top-color: transparent;
525 |     border-radius: 100%;
526 |     animation: circle infinite 0.75s linear;
527 |   }
528 | }
529 | </style>
530 | 
531 |   


--------------------------------------------------------------------------------
/src/components/comment/comment.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="commentContainer" ref="commentContainer">
  3 |         <el-card class="box-card">
  4 |             <!-- 顶部 -->
  5 |             <div class="top">
  6 |                 <div class="close" @click="closed">
  7 |                     <el-icon :size="20">
  8 |                         <ArrowLeft />
  9 |                     </el-icon>
 10 |                     <span>评论(40)</span>
 11 |                 </div>
 12 |             </div>
 13 |             <!-- 评论内容区域 -->
 14 |             <div class="content">
 15 |                 <div class="contentTop">
 16 |                     <div class="title">评论区</div>
 17 |                     <div class="choose">
 18 |                         <div :class="['recommend','chooseItem',getNum===1?'get':'']" @click="changeGetNum(1)">推荐</div>
 19 |                         <div :class="['hot','chooseItem',getNum===2?'get':'']" @click="changeGetNum(2)">最热</div>
 20 |                         <div :class="['new','chooseItem',getNum===3?'get':'']" @click="changeGetNum(3)">最新</div>
 21 |                     </div>
 22 |                 </div>
 23 |                 <div class="UserComment" v-for="(item,i) in commentArray" :key="i">
 24 |                     <div class="left">
 25 |                         <div class="avatar">
 26 |                             <el-avatar :size="30" :src=item.user.avatarUrl />
 27 |                         </div>
 28 |                     </div>
 29 |                     <div class="right">
 30 |                         <div class="userName">{{item.user.nickname}}</div>
 31 |                         <div class="time">{{item.timeStr}}<span class="location">来自 {{item.ipLocation.location}}</span>
 32 |                         </div>
 33 | 
 34 |                         <div class="Usercontent">
 35 |                             {{item.content}}
 36 |                         </div>
 37 |                     </div>
 38 |                 </div>
 39 |             </div>
 40 |             <!-- 评论框 -->
 41 |             <el-card class="box-card commentInput">
 42 |                 <div class="text">
 43 |                     <textarea rows="" cols="" ref="textArea" @focus="clearWord"></textarea>
 44 |                     <div class="sentBtn" @click="sentComment">发送</div>
 45 |                 </div>
 46 |             </el-card>
 47 |         </el-card>
 48 |     </div>
 49 | </template>
 50 | <script>
 51 | import { ElMessage } from 'element-plus'
 52 | export default {
 53 |     name: 'comment',
 54 |     created: {
 55 | 
 56 |     },
 57 |     data() {
 58 |         return {
 59 |             id: null,
 60 |             type: null,         //判断需要获取的是 0: 歌曲 1: mv 2: 歌单 的评论
 61 |             sortType: '1',        //排序方式, 1:按推荐排序, 2:按热度排序, 3:按时间排序
 62 |             commentArray: [],    //评论数组
 63 |             prePath: '',        //保存上一页面地址
 64 |             getNum: 1
 65 | 
 66 |         }
 67 |     },
 68 |     methods: {
 69 |         async sentComment() {
 70 |             if (this.$refs.textArea.value == '') {
 71 |                 return ElMessage({
 72 |                     showClose: false,
 73 |                     message: '评论内容为空',
 74 |                     center: true,
 75 |                 })
 76 |             }
 77 |             const res = await this.$h.get('/comment?t=1&type=0&id=' + this.id + '&content=' + this.$refs.textArea.value)
 78 |             if (res.code === 200) {
 79 |                 this.$refs.textArea.value = ''
 80 |                 ElMessage({
 81 |                     showClose: false,
 82 |                     message: '发布成功',
 83 |                     center: true,
 84 |                 })
 85 |                 return this.changeGetNum(3)
 86 |             }
 87 |         },
 88 |         // 清除默认文本
 89 |         clearWord() {
 90 |             if (this.$refs.textArea.value === '这一次也许就是你上热评了') {
 91 |                 this.$refs.textArea.value = ''
 92 |             }
 93 |         },
 94 |         // 默认文本
 95 |         textAreaWord() {
 96 |             this.$refs.textArea.value = '这一次也许就是你上热评了'
 97 |         },
 98 |         // 按需获取评论
 99 |         changeGetNum(num) {
100 |             this.getNum = num
101 |             this.sortType = num
102 |             this.getComment(this.type, this.id, this.sortType)
103 |         },
104 |         closed() {
105 |             // this.$router.push({
106 |             //     path:this.prePath,
107 |             //     query:{
108 |             //         id:this.id
109 |             //     }
110 |             // })
111 |             this.$router.go(-1)
112 |             // 显示播放器
113 |             this.DisplayMusictoApp()
114 |         },
115 |         //获取评论函数
116 |         async getComment(type, id, sortType) {
117 |             this.commentArray = []
118 |             const res = await this.$h.get('/comment/new?type=' + type + '&id=' + id + '&sortType=' + sortType + '&pageSize=40&pageNo=1')
119 |             for (let i = 0; i < res.data.comments.length; i++) {
120 |                 const resfilter = this.filterComment(res.data.comments[i], ['user', 'content', 'timeStr', 'ipLocation']);
121 |                 this.commentArray.push(resfilter)
122 |             }
123 |         },
124 |         // 过滤getComment中得到的初步数据
125 |         filterComment(obj, arr) {
126 |             const res = {}
127 |             Object.keys(obj).filter((key) => arr.includes(key)).forEach(key => {
128 |                 res[key] = obj[key]
129 |             });
130 |             return res
131 |         },
132 |         //判断是否需要继续获取数据
133 |         getNewComment() {
134 |             this.$refs.commentContainer.addEventListener('touchstart', function (e) {
135 |                 let clientHeight = document.documentElement.clientHeight; //浏览器高度
136 |                 let scrollHeight = document.body.scrollHeight;
137 |                 let scrollTop = document.documentElement.scrollTop;
138 |                 let distance = 170  //距离可视窗口多高时发起请求
139 |                 if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
140 | 
141 |                 }
142 |             }, false)
143 |         }
144 |     },
145 |     mounted() {
146 |         this.getNewComment()
147 |         this.textAreaWord()
148 |     },
149 |     inject: ['DisplayMusictoApp'],
150 |     created() {
151 |         // 隐藏播放器
152 |         this.DisplayMusictoApp()
153 |         // 判断需要获取的评论类型
154 |         switch (this.$route.query.id.charAt(0)) {
155 |             case 's':
156 |                 this.type = 0
157 |                 break;
158 |             case 'm':
159 |                 this.type = 1
160 |                 break;
161 |             case 'l':
162 |                 this.type = 2
163 |                 break;
164 |         }
165 |         // split 出id
166 |         this.id = this.$route.query.id.split('sid')[1]
167 |         this.getComment(this.type, this.id, this.sortType)
168 |         // this.prePath = this.$route.query.pAth
169 |     },
170 | 
171 | }
172 | 
173 | </script>
174 | 
175 | <style lang='less' scoped>
176 | ::v-deep(.el-card) {
177 |     --el-card-padding: 0;
178 |     --el-card-border-color: 0;
179 |     background-color: #2b2b2b;
180 | }
181 | 
182 | body {
183 |     background: #2b2b2b;
184 | }
185 | 
186 | .commentContainer {
187 |     background: #2b2b2b;
188 | 
189 |     // 被选中则添加该样式
190 |     .get {
191 |         color: #fefefe;
192 |     }
193 | 
194 |     .top {
195 |         display: flex;
196 |         height: 50px;
197 |         background: #2b2b2b;
198 |         color: #fefefe;
199 |         align-items: center;
200 |         padding-left: 10px;
201 |         font-weight: 600;
202 | 
203 |         .close {
204 |             display: flex;
205 |             align-items: center;
206 | 
207 |             span {
208 |                 margin-left: 10px;
209 |             }
210 |         }
211 |     }
212 | 
213 |     .content {
214 |         background: #141414;
215 |         padding: 5px;
216 | 
217 |         .contentTop {
218 |             display: flex;
219 |             align-items: center;
220 |             justify-content: space-between;
221 |             font-weight: 600;
222 | 
223 |             .title {
224 |                 padding: 10px;
225 |                 font-size: 14px;
226 |                 color: #fefefe;
227 |             }
228 | 
229 |             .choose {
230 |                 display: flex;
231 |                 font-size: 14px;
232 |                 color: #959595;
233 |             }
234 | 
235 |             .chooseItem {
236 |                 margin-right: 10px;
237 |             }
238 |         }
239 | 
240 |         .UserComment {
241 |             margin-top: 15px;
242 |             display: flex;
243 | 
244 |             .left {
245 |                 padding-left: 10px;
246 |                 padding-right: 5px;
247 |             }
248 | 
249 |             .right {
250 |                 width: 318px;
251 |                 border-bottom: 1px solid #4b4949;
252 | 
253 |                 .userName {
254 |                     padding: 3px;
255 |                     color: #e7e7e7;
256 |                     font-size: 12px;
257 |                     font-weight: 500;
258 |                 }
259 | 
260 |                 .time {
261 |                     color: #959595;
262 |                     font-size: 12px;
263 |                     transform: scale(0.85);
264 |                     margin-left: -25px;
265 | 
266 |                     .location {
267 |                         margin-left: 10px;
268 |                     }
269 |                 }
270 | 
271 |                 .Usercontent {
272 |                     color: #dfdbdb;
273 |                     margin-top: 5px;
274 |                     font-size: 14px;
275 |                     font-weight: 500;
276 |                     padding: 2px;
277 |                     padding-bottom: 5px;
278 |                     overflow: hidden;
279 |                     /*将对象作为弹性伸缩盒子模型显示*/
280 |                     display: -webkit-box;
281 |                     /*设置子元素排列方式*/
282 |                     -webkit-box-orient: vertical;
283 |                     /*设置显示的行数，多出的部分会显示为...*/
284 |                     -webkit-line-clamp: 6;
285 |                 }
286 |             }
287 |         }
288 |     }
289 | 
290 |     .commentInput {
291 | 
292 |         width: 100%;
293 |         position: fixed;
294 |         bottom: 0;
295 |         z-index: 999;
296 | 
297 |         .text {
298 |             width: 100%;
299 |             display: flex;
300 |             justify-content: center;
301 | 
302 |             textarea {
303 |                 padding: 10px;
304 |                 color: #fefefe;
305 |                 font-weight: 600;
306 |                 width: 80%;
307 |                 height: 30px;
308 |                 outline: none;
309 |                 resize: none;
310 |                 border: 0;
311 |                 background-color: #2b2b2b;
312 |             }
313 |         }
314 | 
315 |         .sentBtn {
316 |             height: 50px;
317 |             color: #efefef;
318 |             line-height: 48px;
319 |             font-size: 14px;
320 |         }
321 |     }
322 | }
323 | </style>
324 | 


--------------------------------------------------------------------------------
/src/components/commune.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="communeContainer" ref="communeContainer">
  3 |     <!-- 下拉刷新loading -->
  4 |     <div class="loadingBoxHome" v-if="loadingShow">
  5 |       <div class="loading"></div>
  6 |     </div>
  7 |     <el-card class="box-card">
  8 |       <div class="box" v-for="(item, i) in videoArray" :key="i">
  9 |         <div class="videoItem" v-if="item.data.urlInfo">
 10 |           <div class="videoBox">
 11 |             <!-- 视频组件 -->
 12 |             <VideoPlay v-bind:videoUrl="item.data.urlInfo.url"></VideoPlay>
 13 |           </div>
 14 |           <div class="bottomBox">
 15 |             <div class="title">{{ item.data.title }}</div>
 16 |             <div class="information">
 17 |               <div class="authorAvator">
 18 |                 <el-avatar :src="item.data.creator.avatarUrl" :size="30" />
 19 |               </div>
 20 |               <div class="authorNickname">{{ item.data.creator.nickname }}</div>
 21 |             </div>
 22 |           </div>
 23 |         </div>
 24 |       </div>
 25 |     </el-card>
 26 |     <Tabbar :pageNum="4"></Tabbar>
 27 |   </div>
 28 | </template>
 29 |   
 30 | <script>
 31 | import { mapState, mapMutations } from 'vuex'
 32 | import Tabbar from './tababr/tabbar.vue'
 33 | import VideoPlay from './video/video.vue'
 34 | export default {
 35 |   name: 'commune',
 36 |   data() {
 37 |     return {
 38 |       videoArray: [],
 39 |       page: 1,
 40 |       fresh: true,
 41 |       isRefresh: true,
 42 |       loadingShow: false
 43 |     }
 44 |   },
 45 |   computed: {
 46 |     ...mapState('m_video', ['videoPageInstore', 'videoArrayInstore']),
 47 |     ...mapState('t_video', ['videoScrollTop'])
 48 |   },
 49 |   components: {
 50 |     Tabbar,
 51 |     VideoPlay
 52 |   },
 53 |   watch: {
 54 | 
 55 |   },
 56 |   created() {
 57 |     // 获取视频资源
 58 |     if (this.videoArrayInstore === '11') {
 59 |       this.getVideo()
 60 |     } else {
 61 |       this.videoArray = this.videoArrayInstore
 62 |     }
 63 |     this.videoPage = this.videoPageInstore
 64 |   },
 65 |   mounted() {
 66 |     document.documentElement.scrollTop = this.videoScrollTop
 67 |     this.upFresh()
 68 |     this.downRefresh()
 69 |     this.MoveScrollTop()
 70 |   },
 71 |   beforeUnmount() {
 72 |     // 离开时记录scrollTop
 73 |     this.getScrollTop()
 74 |   },
 75 |   methods: {
 76 |     ...mapMutations('m_video', ['updatedVideoPageInstore', 'updatedVideoArrayInstore']),
 77 |     ...mapMutations('t_video', ['updatedVideoScrollTop', 'updatedToPlayScrollTop']),
 78 |     // 获取视频
 79 |     async getVideo() {
 80 |       const { datas: res } = await this.$h.get('/video/timeline/recommend')
 81 |       this.videoArray = [...this.videoArray, ...res]
 82 |       this.updatedVideoArrayInstore(this.videoArray)
 83 |       this.page++
 84 |     },
 85 |     /**
 86 |      * 上拉加载视频
 87 |      */
 88 |     upFresh() {
 89 |       let This = this
 90 |       this.$refs.communeContainer.addEventListener('touchstart', async function (e) {
 91 |         let clientHeight = document.documentElement.clientHeight; //浏览器高度
 92 |         let scrollHeight = document.body.scrollHeight;
 93 |         let scrollTop = document.documentElement.scrollTop;
 94 |         let distance = 20  //距离可视窗口多高时发起请求
 95 |         // 已经触底 发起请求
 96 |         if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
 97 |           if (This.fresh) {
 98 |             This.fresh = false
 99 |             await This.getVideo()
100 |             This.fresh = true
101 |           }
102 |         }
103 |       }, false)
104 | 
105 |     },
106 |     /**
107 |      * 下拉刷新
108 |      */
109 |     downRefresh() {
110 |       let start = 0 //初始位置
111 |       let transitionHeight = 0  //移动距离
112 |       let This = this
113 |       this.$refs.communeContainer.addEventListener('touchstart', function (e) {
114 |         start = e.touches[0].pageY
115 |       }, false)
116 |       this.$refs.communeContainer.addEventListener('touchmove', async function (e) {
117 |         transitionHeight = e.touches[0].pageY - start //记录差值
118 |         if (transitionHeight > 0 && document.documentElement.scrollTop === 0) {
119 |           if (transitionHeight > 250 && This.isRefresh) {
120 |             This.isRefresh = false
121 |             This.loading()
122 |             This.videoArray = []
123 |             This.getVideo()
124 |             This.updatedVideoScrollTop(0)
125 |           }
126 |         }
127 |       })
128 |     },
129 |     // 当屏幕发生滚动时，我们需要记录scrollTop值，用于判断应该播放当前的哪一个视频
130 |     MoveScrollTop() {
131 |       this.$refs.communeContainer.addEventListener('touchmove', e => {
132 |         this.updatedToPlayScrollTop(Math.ceil(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))
133 | 
134 |       })
135 |     },
136 |     // 动画函数
137 |     loading() {
138 |       this.loadingShow = true
139 |       setTimeout(() => {
140 |         this.isRefresh = true
141 |         this.loadingShow = false
142 |       }, 1000);
143 |     },
144 |     // 获取滚动条的位置
145 |     getScrollTop() {
146 |       this.updatedVideoScrollTop(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop)
147 |     }
148 |   },
149 | 
150 | }
151 | 
152 | </script>
153 |   
154 | <style lang='less' scoped>
155 | @keyframes circle {
156 |   0% {
157 |     transform: rotate(0);
158 |   }
159 | 
160 |   100% {
161 |     transform: rotate(360deg);
162 |   }
163 | }
164 | 
165 | ::v-deep(.el-card) {
166 |   --el-card-padding: 0;
167 |   border: 0;
168 |   background-color: #141414;
169 |   padding-bottom: 200px;
170 | }
171 | 
172 | .communeContainer {
173 |   width: 100%;
174 |   height: 100%;
175 | 
176 |   .loading {
177 |     position: absolute;
178 |     left: 50%;
179 |     transform: translateX(-50%);
180 |     width: 20px;
181 |     height: 20px;
182 |     border: 2px solid #e63434;
183 |     border-top-color: transparent;
184 |     border-radius: 100%;
185 |     animation: circle infinite 0.75s linear;
186 |   }
187 | 
188 |   .box {
189 |     display: flex;
190 |     flex-direction: column;
191 |     align-items: center;
192 |     padding-top: 50px;
193 |   }
194 | 
195 |   .videoItem {
196 |     margin-top: 10px;
197 |     left: 50%;
198 |     width: 94%;
199 |     height: 400px;
200 |     background-color: #2a2a2a;
201 |     border-radius: 3%;
202 | 
203 |     .videoBox {
204 |       width: 100%;
205 |       height: 76%;
206 |       background-color: #000;
207 |       border-radius: 3%;
208 |     }
209 | 
210 |     .bottomBox {
211 |       width: 100%;
212 |       height: 24%;
213 | 
214 |       .title {
215 |         display: flex;
216 |         align-items: center;
217 |         color: #eaeaea;
218 |         width: 100%;
219 |         height: 50%;
220 |       }
221 | 
222 |       .information {
223 |         display: flex;
224 |         align-items: center;
225 |         padding: 0 8px;
226 |         width: 100%;
227 |         height: 50%;
228 |         color: #b3b3b3;
229 | 
230 |         .authorNickname {
231 |           margin-left: 6px;
232 |         }
233 |       }
234 |     }
235 |   }
236 | }
237 | </style>
238 |   


--------------------------------------------------------------------------------
/src/components/cropper/cropper.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="CropperContainer">
  3 |         <div class="cropperBtn">
  4 |             <div class="close" @click="closeCropper">
  5 |                 <el-icon :size="24" color="#f2eeeb">
  6 |                     <Back />
  7 |                 </el-icon>
  8 |                 <span>图片裁剪</span>
  9 |             </div>
 10 |             <div class="save" @click="cropperImg">确认</div>
 11 |         </div>
 12 |         <vueCropper style="background-image:none" ref="cropper" :img="option.img" :outputSize="option.size"
 13 |             :outputType="option.outputType" :info="option.info" :full="option.full" :canMove="option.canMove"
 14 |             :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop"
 15 |             :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox"
 16 |             :enlarge="option.enlarge">
 17 |         </vueCropper>
 18 |     </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import 'vue-cropper/dist/index.css'
 23 | import { VueCropper } from "vue-cropper";
 24 | import { mapState, mapMutations } from 'vuex'
 25 | import { ElMessage } from 'element-plus'
 26 | import axios from 'axios'
 27 | export default {
 28 |     name: 'myCropper',
 29 |     components: {
 30 |         VueCropper
 31 |     },
 32 |     computed: {
 33 |         ...mapState('m_my', ['cookie'])
 34 |     },
 35 |     props: {
 36 |         imgurl: String
 37 |     },
 38 |     watch: {
 39 |         imgurl(newV, oldV) {
 40 |             this.option.img = this.imgurl
 41 |         }
 42 |     },
 43 |     created() {
 44 | 
 45 |     }
 46 |     ,
 47 |     data() {
 48 |         return {
 49 |             option: {
 50 |                 img: '',
 51 |                 outputSize: 1, //剪切后的图片质量（0.1-1）
 52 |                 full: false,//输出原图比例截图 props名full
 53 |                 outputType: 'png',
 54 |                 canMove: true,
 55 |                 original: false,
 56 |                 canMoveBox: true,
 57 |                 autoCrop: true,
 58 |                 autoCropWidth: 375,
 59 |                 autoCropHeight: 375,
 60 |                 fixedBox: false,
 61 |                 blobImg: null,
 62 |                 enlarge: 0.13333
 63 |             },
 64 |         }
 65 |     },
 66 |     inject: ['closeCropper'],
 67 |     methods: {
 68 |         cropperImg() {
 69 |             let This = this
 70 |             this.$refs.cropper.getCropBlob(data => {
 71 |                 This.blobImg = data
 72 |                 This.upload(This.blobImg)
 73 |             })
 74 |         },
 75 |         async upload(file) {
 76 |             let This = this
 77 |             const formData = new FormData()
 78 |             formData.append('imgFile', file)
 79 |             const { data: res } = await axios({
 80 |                 method: 'post',
 81 |                 // https://service-mlkn7ujm-1310291392.gz.apigw.tencentcs.com/release
 82 |                 url: 'https://service-mlkn7ujm-1310291392.gz.apigw.tencentcs.com/release/avatar/upload?cookie=' + This.cookie + 'imgSize=375',
 83 |                 // url: 'https://netease-cloud-music-api-nxzt.vercel.app/avatar/upload?cookie=' + This.cookie + 'imgSize=375',
 84 |                 headers: {
 85 |                     'Content-Type': 'multipart/form-data',
 86 |                 },
 87 |                 data: formData,
 88 |             })
 89 |             if (res.code === 200) {
 90 |                 ElMessage({
 91 |                     message: '保存成功！',
 92 |                     type: 'success',
 93 |                 })
 94 |                 return this.closeCropper()
 95 |             } else {
 96 |                 return ElMessage({
 97 |                     message: '保存失败！',
 98 |                 })
 99 |             }
100 | 
101 |         }
102 |     }
103 | }
104 | 
105 | </script>
106 | 
107 | <style lang='less' scoped>
108 | .CropperContainer {
109 |     position: absolute;
110 |     top: 0;
111 |     width: 100%;
112 |     height: 100%;
113 |     background-color: #000;
114 | 
115 |     .cropperBtn {
116 |         padding: 5px;
117 |         display: flex;
118 |         align-items: center;
119 |         justify-content: space-between;
120 |         color: #fff;
121 |         font-weight: 800;
122 | 
123 |         .close {
124 |             display: flex;
125 |             justify-content: center;
126 |             align-items: center;
127 | 
128 |             span {
129 |                 margin-left: 5px;
130 |             }
131 |         }
132 |     }
133 | }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/src/components/home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 下拉刷新loading -->
  3 |   <div class="loadingBoxHome" v-if="loadingShow">
  4 |     <div class="loading"></div>
  5 |   </div>
  6 |   <div class="container" ref="container">
  7 | 
  8 |     <!-- 导航栏区域 -->
  9 |     <div class="nav">
 10 |       <el-icon color="#eee" :size="28">
 11 |         <Expand />
 12 |       </el-icon>
 13 |       <div class="searchBox" @click="gotoSearch">
 14 |         <div class="content">
 15 |           <div class="iconSearch">
 16 |             <el-icon :size="18" color="#777777">
 17 |               <Search />
 18 |             </el-icon><span>搜一搜</span>
 19 |           </div>
 20 |         </div>
 21 |       </div>
 22 |     </div>
 23 |     <!-- 轮播图区域 -->
 24 |     <div class="block text-center swiper-container" m="t-4">
 25 |       <span class="demonstration"></span>
 26 |       <el-carousel trigger="click" height="120px" arrow="never">
 27 |         <el-carousel-item v-for="(item, i) in bannerArray.slice(0, 4)">
 28 |           <img :src="item.pic" />
 29 |         </el-carousel-item>
 30 |       </el-carousel>
 31 |     </div>
 32 |     <!-- 功能导航栏 -->
 33 |     <div class="use-nav">
 34 |       <div class="use-nav-item">
 35 |         <div class="use-nav-item-back">
 36 |           <el-icon color="red" :size="27">
 37 |             <Calendar />
 38 |           </el-icon>
 39 |         </div>
 40 |         <p style="fontSize:14px;color:gray;margin-top:5px;">每日推荐</p>
 41 |       </div>
 42 |       <div class="use-nav-item">
 43 |         <div class="use-nav-item-back">
 44 |           <el-icon color="red" :size="27">
 45 |             <Headset />
 46 |           </el-icon>
 47 |         </div>
 48 |         <p style="fontSize:14px;color:gray;margin-top:5px;">歌单</p>
 49 |       </div>
 50 |       <div class="use-nav-item">
 51 |         <div class="use-nav-item-back">
 52 |           <el-icon color="red" :size="27">
 53 |             <Histogram />
 54 |           </el-icon>
 55 |         </div>
 56 |         <p style="fontSize:14px;color:gray;margin-top:5px;">排行榜</p>
 57 |       </div>
 58 |       <div class="use-nav-item">
 59 |         <div class="use-nav-item-back">
 60 |           <el-icon color="red" :size="27">
 61 |             <Flag />
 62 |           </el-icon>
 63 |         </div>
 64 |         <p style="fontSize:14px;color:gray;margin-top:5px;">推荐音乐</p>
 65 |       </div>
 66 |     </div>
 67 |     <!-- 推荐歌单 -->
 68 |     <div class="recommend-music-list">
 69 |       <div class="title" style="color:#fff;margin:13px;">推荐歌单</div>
 70 |       <el-scrollbar>
 71 |         <div class="scrollbar-flex-content">
 72 |           <div v-for="(item, i) in musicList" :key="i" class="scrollbar-demo-item" @click="goToList(item.id)">
 73 |             <img class="ListImg" :src="item.picUrl" alt="">
 74 |             <div class="ListTitle">{{ item.name }}</div>
 75 |           </div>
 76 |         </div>
 77 |       </el-scrollbar>
 78 |     </div>
 79 |     <!-- 大家都在听 -->
 80 |     <!-- 写死只曲九首歌曲 -->
 81 |     <div class="WeListen">
 82 |       <div class="WeTitle" style="color:#fff;margin:11px 0 2px 13px;">大家都在听</div>
 83 |       <el-scrollbar>
 84 |         <div class="scrollbar-flex-content">
 85 |           <div class="scrollbar-demo-item">
 86 |             <div class="WeListen-item" v-for="(item, index) in weListen.slice(0, 3)" :key="index"
 87 |               @click="playMusic(item)">
 88 |               <div class="Welisten-item-song">
 89 |                 <img :src="item.picUrl" class="song-img" />
 90 |                 <div class="song-item">{{ item.name }}</div>
 91 |                 <div class="song-artists">-{{ item.song.artists[0].name }}</div>
 92 |               </div>
 93 |             </div>
 94 |           </div>
 95 |           <div class="scrollbar-demo-item">
 96 |             <div class="WeListen-item" v-for="(item, index) in weListen.slice(3, 6)" :key="index"
 97 |               @click="playMusic(item)">
 98 |               <div class="Welisten-item-song">
 99 |                 <img :src="item.picUrl" class="song-img" />
100 |                 <div class="song-item">{{ item.name }}</div>
101 |                 <div class="song-artists">-{{ item.song.artists[0].name }}</div>
102 |               </div>
103 |             </div>
104 |           </div>
105 |           <div class="scrollbar-demo-item">
106 |             <div class="WeListen-item" v-for="(item, index) in weListen.slice(6, 9)" :key="index"
107 |               @click="playMusic(item)">
108 |               <div class="Welisten-item-song">
109 |                 <img :src="item.picUrl" class="song-img" />
110 |                 <div class="song-item">{{ item.name }}</div>
111 |                 <div class="song-artists">-{{ item.song.artists[0].name }}</div>
112 |               </div>
113 |             </div>
114 |           </div>
115 |         </div>
116 |       </el-scrollbar>
117 |     </div>
118 |     <!-- 音乐播放器单独写了一个组件 -->
119 |     <tabbar :pageNum="pageIndex"></tabbar>
120 |   </div>
121 | </template>
122 | 
123 | <script>
124 | import { reactive } from 'vue'
125 | import { mapState, mapMutations } from 'vuex'
126 | // import axios from '../axios/http.js'
127 | import playmusic from './playmusic/playmusic.vue'
128 | import Tabbar from './tababr/tabbar.vue'
129 | export default {
130 |   name: 'home',
131 |   setup() {
132 |     const weListen = reactive([]);
133 |     return {
134 |       weListen
135 |     }
136 |   },
137 |   components: {
138 |     Tabbar,
139 |     playmusic
140 |   },
141 |   computed: {
142 |     ...mapState('m_home', ['musicListinStore', 'weListeninStore', 'refreshTime', 'bannerArrayinStore'])
143 |   },
144 |   data() {
145 |     return {
146 |       musicList: {},
147 |       pageIndex: 1,
148 |       musicUrl: '',
149 |       isRefresh: true,
150 |       loadingShow: false,
151 |       searchHotArray: [],
152 |       bannerArray: []
153 |     }
154 |   },
155 |   async created() {
156 |     // 无缓存
157 |     if (this.musicListinStore == '11' && this.weListeninStore == '22') {
158 |       // 获取轮播图
159 |       this.getBanner()
160 |       // 获取推荐歌单
161 |       this.getMusicList()
162 |       // 获取大家都在听
163 |       this.getWeListen()
164 |       // 获取热搜数据
165 |       this.getSearchHot()
166 |       this.updatedMusicListinStore(this.musicList)
167 |       this.updatedWeListeninStore(this.weListen)
168 |       this.updatedSerachHot(this.searchHotArray)
169 |       this.updatedBannerArrayinStore(this.bannerArray)
170 | 
171 |     }
172 |     // 设置时间戳，用于每隔一小时进行一次刷新获取新数据
173 |     if (this.refreshTime === '0') {
174 |       let startDate = new Date()
175 |       this.uodateRefreshTime(startDate.getTime() + '')
176 |     } else {
177 |       let nowDate = new Date()
178 |       const nowtime = nowDate.getTime() //获取当前时间
179 |       if (nowtime - parseInt(this.refreshTime) > 1000 * 60 * 60) {
180 |         this.uodateRefreshTime(nowtime + '')
181 |         // 获取轮播图
182 |         this.getBanner()
183 |         // 获取推荐歌单
184 |         this.getMusicList()
185 |         // 获取大家都在听
186 |         this.getWeListen()
187 |         // 获取热搜数据
188 |         this.getSearchHot()
189 |         this.updatedMusicListinStore(this.musicList)
190 |         this.updatedWeListeninStore(this.weListen)
191 |         this.updatedSerachHot(this.searchHotArray)
192 |         this.updatedBannerArrayinStore(this.bannerArray)
193 |       }
194 |     }
195 |     // 有缓存
196 |     this.musicList = this.musicListinStore
197 |     this.weListen = this.weListeninStore
198 |     this.bannerArray = this.bannerArrayinStore
199 | 
200 |   },
201 |   mounted() {
202 |     this.downRefresh()
203 |   },
204 |   inject: ['playMusictoApp'],
205 |   methods: {
206 |     ...mapMutations('m_home', ['updatedMusicListinStore', 'updatedWeListeninStore', 'uodateRefreshTime', 'updatedSerachHot', 'updatedBannerArrayinStore']),
207 |     // 获取轮播图数据
208 |     async getBanner() {
209 |       const { banners: res } = await this.$h.get('/banner?type=2')
210 |       this.bannerArray = res
211 |     },
212 |     // 获取歌单数据
213 |     async getMusicList() {
214 |       const { result: res } = await this.$h.get('/personalized?limit=6')
215 |       this.musicList = res
216 | 
217 |     },
218 |     // 大家都在听
219 |     async getWeListen() {
220 |       const { result: res } = await this.$h.get('/personalized/newsong?limit=9')
221 |       this.weListen = res
222 | 
223 |     },
224 |     // 获取歌曲url
225 |     async getMusicUrl(info) {
226 |       const res = await this.$h.get('/song/url?id=' + info.id)
227 |       this.musicUrl = res.data[0].url
228 |       return true
229 |     },
230 |     // 向父组件中的音乐播放器组件传入数据
231 |     async playMusic(songInfo) {
232 |       const res = await this.getMusicUrl(songInfo);
233 |       if (res) {
234 |         this.playMusictoApp(this.musicUrl, songInfo.picUrl, songInfo.name, songInfo.id)
235 |       }
236 |     },
237 |     // 点击歌单进入歌单详情页面
238 |     goToList(ListId) {
239 |       this.$router.push({
240 |         path: '/songListPage',
241 |         query: {
242 |           id: ListId
243 |         }
244 |       })
245 |     },
246 |     // 下拉刷新
247 |     downRefresh() {
248 |       let start = 0 //初始位置
249 |       let transitionHeight = 0  //移动距离
250 |       let This = this
251 |       this.$refs.container.addEventListener('touchstart', function (e) {
252 |         start = e.touches[0].pageY
253 |       }, false)
254 |       this.$refs.container.addEventListener('touchmove', async function (e) {
255 |         transitionHeight = e.touches[0].pageY - start //记录差值
256 |         if (transitionHeight > 0 && document.documentElement.scrollTop === 0) {
257 |           if (transitionHeight > 250 && This.isRefresh) {
258 |             This.isRefresh = false
259 |             This.loading()
260 |             await This.getMusicList()
261 |             await This.getWeListen()
262 |             await This.getSearchHot()
263 |             await This.getBanner()
264 |             This.updatedBannerArrayinStore(This.bannerArray)
265 |             This.updatedMusicListinStore(This.musicList)
266 |             This.updatedWeListeninStore(This.weListen)
267 |             This.updatedSerachHot(This.searchHotArray)
268 |           }
269 |         }
270 |       }, { passive: false })
271 |     },
272 |     //刷新效果动画
273 |     loading() {
274 |       this.loadingShow = true
275 |       setTimeout(() => {
276 |         this.isRefresh = true
277 |         this.loadingShow = false
278 |       }, 1000);
279 |     },
280 |     // 前往搜索页面
281 |     gotoSearch() {
282 |       this.$router.push('/search')
283 |     },
284 |     // 获取搜索界面的热搜数据
285 |     async getSearchHot() {
286 |       const { data: res } = await this.$h.get('/search/hot/detail')
287 |       this.searchHotArray = res
288 |     }
289 |   }
290 | 
291 | 
292 | }
293 | 
294 | </script>
295 | 
296 | <style lang='less' scoped>
297 | .container {
298 |   background-color: #242424;
299 |   width: 100%;
300 |   padding-bottom: 123px;
301 | 
302 | }
303 | 
304 | .nav {
305 |   padding-top: 5px;
306 |   padding-left: 5px;
307 | 
308 |   .searchBox {
309 |     width: 100%;
310 |     position: absolute;
311 |     top: 0;
312 |     left: 65px;
313 | 
314 |     .content {
315 |       position: relative;
316 |       margin-top: 7px;
317 |       height: 30px;
318 |       width: 70%;
319 |       background-color: #3d3d3d;
320 | 
321 |       .iconSearch {
322 |         display: flex;
323 |         justify-content: center;
324 |         align-items: center;
325 |         font-size: 15px;
326 |         position: absolute;
327 |         top: 7px;
328 |         left: 35%;
329 | 
330 |         span {
331 |           margin-left: 5px;
332 |           font-weight: 600;
333 |           color: #646464;
334 |         }
335 |       }
336 | 
337 |     }
338 | 
339 |     .content::after {
340 |       position: absolute;
341 |       right: -20px;
342 |       display: inline-block;
343 |       content: "";
344 |       height: 30px;
345 |       width: 30px;
346 |       border-radius: 50%;
347 |       background-color: #3d3d3d;
348 |     }
349 | 
350 |     .content::before {
351 |       position: relative;
352 |       left: -20px;
353 |       display: inline-block;
354 |       content: "";
355 |       height: 30px;
356 |       width: 30px;
357 |       border-radius: 50%;
358 |       background-color: #3d3d3d;
359 |     }
360 |   }
361 | }
362 | 
363 | .swiper-container {
364 |   margin: auto;
365 |   margin-top: 20px;
366 |   width: 340px;
367 | 
368 |   img {
369 |     border-radius: 5%;
370 |     width: 100%;
371 |     height: 100%;
372 |   }
373 | }
374 | 
375 | .use-nav {
376 |   margin: 10px;
377 |   margin-top: 20px;
378 |   display: flex;
379 |   justify-content: space-around;
380 |   align-items: center;
381 |   border-bottom: 1px solid #322f2f;
382 | 
383 | }
384 | 
385 | .use-nav-item-back {
386 |   display: flex;
387 |   justify-content: center;
388 |   align-items: center;
389 |   border-radius: 50%;
390 |   width: 45px;
391 |   height: 45px;
392 |   background-color: rgba(255, 0, 0, 0.3)
393 | }
394 | 
395 | .use-nav-item {
396 |   display: flex;
397 |   flex-direction: column;
398 |   align-items: center;
399 | }
400 | 
401 | .recommend-music-list {
402 |   border-radius: 10px;
403 |   border-bottom: 1px solid #322f2f;
404 | }
405 | 
406 | .scrollbar-flex-content {
407 |   display: flex;
408 | }
409 | 
410 | .scrollbar-demo-item {
411 |   display: flex;
412 |   flex-direction: column;
413 |   width: 180px;
414 |   height: 134px;
415 |   margin: 10px;
416 |   color: #fff;
417 | 
418 |   .ListImg {
419 |     height: 100px;
420 |     width: 100px;
421 |     border-radius: 10px;
422 |   }
423 | 
424 |   .ListTitle {
425 |     padding: 2px 4px;
426 |     font-size: 12px;
427 |     overflow: hidden;
428 |     text-overflow: ellipsis;
429 |     display: -webkit-box;
430 |     -webkit-line-clamp: 2;
431 |     -webkit-box-orient: vertical;
432 |   }
433 | }
434 | 
435 | .WeListen {
436 |   .scrollbar-demo-item {
437 |     flex-shrink: 0;
438 |     width: 300px;
439 |     height: 160px;
440 |   }
441 | 
442 |   .WeListen-item {
443 |     .Welisten-item-song {
444 |       width: 100%;
445 |       padding: 5px;
446 |       display: flex;
447 |       align-items: center;
448 | 
449 |       border-bottom: 1px solid #1e1e1e;
450 | 
451 |       .song-img {
452 |         border-radius: 4px;
453 |         height: 40px;
454 |         width: 40px;
455 |       }
456 | 
457 |       .song-item {
458 |         margin-left: 5px;
459 |         font-size: 14px;
460 |       }
461 | 
462 |       .play {
463 |         margin-right: 5px;
464 |       }
465 | 
466 |       .song-artists {
467 |         font-size: 12px;
468 |         color: #979797;
469 |       }
470 | 
471 |     }
472 |   }
473 | 
474 | }
475 | 
476 | // 转转转动画
477 | @keyframes circle {
478 |   0% {
479 |     transform: rotate(0);
480 |   }
481 | 
482 |   100% {
483 |     transform: rotate(360deg);
484 |   }
485 | }
486 | 
487 | .loadingBoxHome {
488 |   width: 20px;
489 |   height: 20px;
490 |   position: absolute;
491 |   top: 20px;
492 |   left: 50%;
493 |   transform: translateX(-50%);
494 |   z-index: 999;
495 | 
496 |   .loading {
497 |     width: 20px;
498 |     height: 20px;
499 |     border: 2px solid #e63434;
500 |     border-top-color: transparent;
501 |     border-radius: 100%;
502 |     animation: circle infinite 0.75s linear;
503 |   }
504 | }
505 | </style>
506 | 


--------------------------------------------------------------------------------
/src/components/login/login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="login-container">
  3 | 
  4 |         <div class="choose-login" v-if="gotoPage">
  5 |             <div class="top">
  6 |                 <div class="text">
  7 |                     <span class="text-1">新用户登录得</span>
  8 |                     <span class="text-2">黑胶会员周卡</span>
  9 |                 </div>
 10 |             </div>
 11 |             <div class="content">
 12 |                 <div class="goToLogin" @click="gotoPageChange">
 13 |                     <span>登录</span>
 14 |                 </div>
 15 |             </div>
 16 |         </div>
 17 |         <!-- 二维码登录 -->
 18 |         <!-- <div class="login-page" v-if="gotoLogin">
 19 |             <div class="qr"
 20 |                 style="width: 200px;height: 200px;margin: auto;margin-top: 100px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
 21 |                 <div class="qrText" style="color: azure;">
 22 |                     扫描二维码进行登录
 23 |                 </div>
 24 |                 <img :src="qrCode">
 25 |             </div>
 26 |         </div> -->
 27 |         <!-- 手机号码登录 -->
 28 |         <div class="login-page" v-if="gotoLogin">
 29 |             <div class="top">
 30 |                 <div class="back">
 31 |                     <el-icon :size="26">
 32 |                         <Back />
 33 |                     </el-icon>
 34 |                 </div>
 35 |                 <span>手机号登录</span>
 36 |             </div>
 37 |             <div class="container">
 38 |                 <div class="title">
 39 |                     <div class="title-big">
 40 |                         登录体验更多精彩
 41 |                     </div>
 42 |                     <div class="title-small">
 43 |                         未注册手机号登录后将自动创建账号
 44 |                     </div>
 45 |                 </div>
 46 |                 <div class="inputBox">
 47 |                     <input maxlength="11" type="tel" class="phoneInput" placeholder="请输入手机号" ref="inputPhone"
 48 |                         oninput="value=value.replace(/[^\d]/g,'')" />
 49 |                     <div class="inputClear" @click="clearInput">
 50 |                         <el-icon :size="20">
 51 |                             <Close />
 52 |                         </el-icon>
 53 |                     </div>
 54 |                 </div>
 55 |                 <div class="next" @click="getLogin">下一步</div>
 56 |             </div>
 57 |         </div>
 58 |         <div class="checkout-page" v-if="gotoCheck">
 59 |             <div class="top">
 60 |                 <div class="back">
 61 |                     <el-icon :size="26">
 62 |                         <Back />
 63 |                     </el-icon>
 64 |                 </div>
 65 |                 <span>手机号登录</span>
 66 |             </div>
 67 |             <div class="container">
 68 |                 <div class="title">
 69 |                     <div class="title-big">
 70 |                         请输入验证码
 71 |                     </div>
 72 |                     <div class="title-small">
 73 |                         已发送至 {{this.phone}}
 74 |                     </div>
 75 |                 </div>
 76 |                 <div class="six-input-box">
 77 |                     <input v-for="(item,index) in inputbox" :key="index" :ref="`ref${index}`" class="input"
 78 |                         v-model="item.value" type="text" oninput="value=value.replace(/[^\d]/g,'')"
 79 |                         @input="onInput(index)" @keyup.delete="onDelete(index)" maxlength="1" />
 80 |                 </div>
 81 |             </div>
 82 |         </div>
 83 | 
 84 |     </div>
 85 | </template>
 86 | <script>
 87 | import vueQr from 'vue-qr/src/packages/vue-qr.vue' //二维码渲染库
 88 | import { mapState, mapMutations } from 'vuex'
 89 | import { ElMessage } from 'element-plus'
 90 | import axios from 'axios'
 91 | export default {
 92 |     name: 'login',
 93 |     computed: {
 94 |         ...mapState('m_my', ['accountStore', 'userInfo']),
 95 |         ...mapMutations('m_my', ['updateCookie'])
 96 |     },
 97 |     created() {
 98 | 
 99 |     },
100 |     data() {
101 |         return {
102 |             gotoLogin: false,
103 |             gotoPage: true,
104 |             gotoCheck: false,
105 |             phone: '',
106 |             inputbox: [
107 |                 {
108 |                     value: ''
109 |                 },
110 |                 {
111 |                     value: ''
112 |                 },
113 |                 {
114 |                     value: ''
115 |                 },
116 |                 {
117 |                     value: ''
118 |                 }
119 |             ],
120 |             check: '',
121 |             account: {},
122 |             qrKey: '',  //生成二维吗的key
123 |             qrCode: '',   //生成二维码信息
124 |             qrState: ''
125 |         }
126 |     },
127 |     methods: {
128 |         ...mapMutations('m_my', ['updateAccount', 'updateUserInfo', 'updateCookie']),
129 |         async gotoPageChange() {
130 |             this.gotoPage = !this.gotoPage
131 |             this.gotoLogin = !this.gotoLogin
132 |             // const cookie = localStorage.getItem('cookie')   //先获取状态？
133 |             // this.getLoginStatus(cookie)
134 |             // const res = await this.$h.get('/login/qr/key?' + 'timestamp=' + Date.now())
135 |             // this.qrKey = res.data.unikey
136 |             // const qrRes = await this.$h.get('/login/qr/create?qrimg=true&key=' + this.qrKey + '&' + 'timestamp=' + Date.now())
137 |             // this.qrCode = qrRes.data.qrimg
138 |             // this.getQrCodeState()
139 |         },
140 |         // // 轮训二维码扫码状态
141 |         // getQrCodeState() {
142 |         //     let timer = setInterval(async () => {
143 |         //         const statusRes = await this.$h.get('/login/qr/check?key=' + this.qrKey + '&' + 'timestamp=' + Date.now())
144 |         //         if (statusRes.code === 800) {
145 |         //             alert('二维码已过期,请重新获取')
146 |         //             clearInterval(timer)
147 |         //         }
148 |         //         if (statusRes.code === 803) {
149 |         //             // 这一步会返回cookie
150 |         //             clearInterval(timer)
151 |         //             // this.updateCookie(statusRes.cookie)
152 |         //             localStorage.setItem('wyCookie', statusRes.cookie)
153 |         //             const status = await this.getLoginStatus(statusRes.cookie)
154 |         //             (status);
155 |         //             this.getUserInfo(status.data.data.account.id)
156 |         //         }
157 |         //     }, 3000)
158 |         // },
159 |         
160 |         // // 检查登录状态
161 |         // async getLoginStatus(cookie = '') {
162 |         //     const res = await axios({
163 |         //         url: `https://service-mlkn7ujm-1310291392.gz.apigw.tencentcs.com/release/login/status?timestamp=${Date.now()}`,
164 |         //         method: 'post',
165 |         //         data: {
166 |         //             cookie,
167 |         //         },
168 |         //     })
169 |         //     (res);
170 |         //     return res
171 |         // },
172 |         
173 |         clearInput() {
174 |             this.$refs.inputPhone.value = '';
175 |         },
176 |         async getLogin() {
177 |             if (this.$refs.inputPhone.value.length !== 11) {
178 |                 return ElMessage('请输入11位数字的手机号')
179 |             }
180 |             this.phone = this.$refs.inputPhone.value
181 |             // 验证通过后
182 |             const res = await this.$h.get('/captcha/sent?phone=' + this.$refs.inputPhone.value)
183 |             if (res.code === 200 && res.data === true) {
184 |                 this.gotoLogin = !this.gotoLogin
185 |                 this.gotoCheck = !this.gotoCheck
186 |             }
187 |         },
188 |         // 校验 验证码
189 |         async getCheck(check) {
190 |             const res = await this.$h.get('/login/cellphone?phone=' + this.phone + '&captcha=' + check)
191 |             this.account = res.account
192 |             this.updateAccount(this.account)
193 |             // this.updateCookie(res.cookie)
194 |             // this.getUserInfo(this.account.account.id)//测试时使用
195 |             this.getUserInfo(this.account.id)
196 |             setTimeout(() => {
197 |                 this.$router.go(0) 
198 |             }, 2000);
199 | 
200 |         },
201 |         // 获取用户基本信息
202 |         async getUserInfo(uid) {
203 |             const res = await this.$h.get('/user/detail?uid=' + uid)
204 |             // const res = await this.$h.get('/user/detail?cookie=' + encodeURIComponent(localStorage.getItem('cookie')))
205 |             if (res.code !== 200) {
206 |                 ElMessage({
207 |                     showClose: true,
208 |                     message: '服务器出错！',
209 |                     type: 'error',
210 |                 })
211 |                 return this.reload
212 |             }
213 |             this.updateUserInfo(res)
214 |             setTimeout(() => {
215 |                 this.$router.go(0)
216 |             }, 2000);
217 | 
218 |         },
219 |         onInput(index) {
220 |             // index < 5 ，如果是第6格，不触发光标移动至下一个输入框。
221 |             if (this.inputbox[index].value && index < 3) {
222 |                 this.$refs['ref' + (index + 1)][0].focus()
223 |             }
224 |             var inputValue = ''
225 |             this.inputbox.forEach(item => {
226 |                 inputValue = inputValue + item.value
227 |             })
228 |             if (inputValue.length < 4) {
229 |                 this.isError = true
230 |             } else {
231 |                 this.isError = false
232 |             }
233 |             // 判断验证码是否输入完成,输入完成发送验证
234 |             if (this.inputbox[index].value && index === 3) {
235 |                 for (let index = 0; index < this.inputbox.length; index++) {
236 |                     this.check += this.inputbox[index].value
237 |                 }
238 |                 this.getCheck(this.check)
239 |             }
240 | 
241 |         },
242 |         onDelete(index) {
243 |             // 如果是第1格，不触发光标移动至上一个输入框
244 |             if (index > 0) {
245 |                 this.$refs['ref' + (index - 1)][0].focus()
246 |             }
247 |         }
248 |     },
249 | } 
250 | </script>
251 | <style lang='less' scoped>
252 | .login-container {
253 |     width: 100%;
254 |     height: 100%;
255 | 
256 |     .choose-login {
257 |         width: 100%;
258 |         height: 100%;
259 |         overflow: hidden;
260 | 
261 |         .top {
262 |             z-index: 10;
263 |             width: 100%;
264 |             height: 40%;
265 |             background: linear-gradient(#5c514d, 3%, #141212);
266 | 
267 |             .text {
268 |                 position: relative;
269 |                 margin-left: 50%;
270 |                 transform: translateX(-50%);
271 |                 display: flex;
272 |                 flex-direction: column;
273 |                 align-items: center;
274 |                 justify-content: center;
275 |                 font-size: 30px;
276 |                 color: #fff;
277 | 
278 |                 .text-1 {
279 |                     font-size: 24px;
280 |                 }
281 | 
282 |                 span {
283 |                     background: linear-gradient(to right, #f8cfc8, #fcf0f0);
284 |                     -webkit-background-clip: text;
285 |                     color: transparent;
286 |                 }
287 |             }
288 |         }
289 | 
290 |         .top::before {
291 |             content: '';
292 |             display: block;
293 |             top: 200px;
294 |             left: -12px;
295 |             position: relative;
296 |             width: 400px;
297 |             height: 100px;
298 |             background: #141212;
299 |             border-radius: 50%;
300 |         }
301 | 
302 |         .goToLogin {
303 |             display: flex;
304 |             justify-content: center;
305 |             align-items: center;
306 |             font-size: 18px;
307 |             color: #fef6ea;
308 |             font-weight: 600;
309 |             position: relative;
310 |             margin-left: 50%;
311 |             transform: translateX(-50%);
312 |             margin-top: 30%;
313 |             width: 220px;
314 |             height: 50px;
315 |             background: #dc2c1f;
316 |             border-radius: 5%;
317 |         }
318 | 
319 |         .goToLogin:active {
320 |             background: #ba3f37;
321 |         }
322 |     }
323 | 
324 |     .login-page {
325 |         height: 100%;
326 |         background: #141414;
327 | 
328 |         .top {
329 |             width: 100%;
330 |             height: 50px;
331 |             background: #2b2b2b;
332 |             color: #fff;
333 |             font-weight: 800;
334 |             font-size: 16px;
335 |             display: flex;
336 |             align-items: center;
337 | 
338 |             span {
339 |                 margin-left: 20px;
340 |             }
341 |         }
342 | 
343 |         .title {
344 |             margin-top: 20px;
345 |             margin-left: 20px;
346 | 
347 |             .title-big {
348 |                 color: #fff;
349 |                 font-size: 20px;
350 |             }
351 | 
352 |             .title-small {
353 |                 margin-top: 5px;
354 |                 color: #959595;
355 |                 font-size: 15px;
356 |             }
357 |         }
358 | 
359 |         .inputBox {
360 |             display: flex;
361 |             justify-content: space-bettewn;
362 |             align-items: center;
363 |             margin-top: 30px;
364 |             margin-left: 20px;
365 |             margin-right: 10px;
366 |             border-bottom: 1px solid #444444;
367 | 
368 |             .phoneInput {
369 |                 background: #141414;
370 |                 height: 30px;
371 |                 width: 90%;
372 |                 border: none;
373 |                 outline: none;
374 |                 color: #e8e8e8;
375 |                 font-size: 20px;
376 |             }
377 | 
378 |             .inputClear {
379 |                 color: #444444;
380 |             }
381 | 
382 | 
383 |         }
384 | 
385 |         .next {
386 |             margin-left: 50%;
387 |             transform: translateX(-50%);
388 |             margin-top: 40px;
389 |             text-align: center;
390 |             color: #fefefe;
391 |             width: 300px;
392 |             height: 40px;
393 |             line-height: 40px;
394 |             font-size: 16px;
395 |             font-weight: 800;
396 |             background: #dc2c1f;
397 |             border-radius: 3%;
398 |         }
399 | 
400 |     }
401 | 
402 |     .checkout-page {
403 |         height: 100%;
404 |         background: #141414;
405 | 
406 |         .top {
407 |             width: 100%;
408 |             height: 50px;
409 |             background: #2b2b2b;
410 |             color: #fff;
411 |             font-weight: 800;
412 |             font-size: 16px;
413 |             display: flex;
414 |             align-items: center;
415 | 
416 |             span {
417 |                 margin-left: 20px;
418 |             }
419 |         }
420 | 
421 |         .title {
422 |             margin-top: 20px;
423 |             margin-left: 20px;
424 | 
425 |             .title-big {
426 |                 color: #fff;
427 |                 font-size: 20px;
428 |             }
429 | 
430 |             .title-small {
431 |                 margin-top: 5px;
432 |                 color: #959595;
433 |                 font-size: 15px;
434 |             }
435 |         }
436 | 
437 |         .six-input-box {
438 |             display: flex;
439 |             margin-left: 41%;
440 |             margin-top: 30px;
441 |             transform: translateX(-50%);
442 |         }
443 | 
444 |         .input {
445 |             display: flex;
446 |             width: 25px;
447 |             margin-left: 30px;
448 |             height: 30px;
449 |             font-size: 18px;
450 |             color: #fff;
451 |             background-color: #141414;
452 |             text-align: center;
453 |             outline: none;
454 |             border: solid 1px #2e2e2e;
455 |             border-top: 0px;
456 |             border-left: 0px;
457 |             border-right: 0px;
458 |         }
459 |     }
460 | }
461 | </style>


--------------------------------------------------------------------------------
/src/components/lyric/lyric.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="wordContent" ref="wordContentMove" :style="lyricMove">
  4 |             <div ref="item" :class="['wordItem',currentRow===i?'current':'']" v-for="(item,i) in lyricArray" :key="i">
  5 |                 {{item.text}}
  6 |             </div>
  7 |         </div>
  8 |     </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import { mapState, mapMutations } from 'vuex'
 13 | export default {
 14 |     name: 'lyric',
 15 |     props: ["lyricArray"],
 16 |     computed:{
 17 |         ...mapState('t_play', ['TsongListStore', 'TsongPageIdStore', 'TlyricTime'])
 18 |     },
 19 |     watch: {
 20 |         TlyricTime(newV, oldV) {
 21 |             this.lyricArray.forEach((element, index) => {
 22 |                 if (this.TlyricTime === element.time) {
 23 |                     let h = window.innerHeight * 0.23
 24 |                     h += -index * 39
 25 |                     this.lyricMove.top = h + 'px'
 26 |                     this.currentRow = index
 27 |                 }
 28 |             });
 29 |         }
 30 |     },
 31 |     data() {
 32 |         return {
 33 |             currentRow: 0,
 34 |             lyricMove: {
 35 |                 top: window.innerHeight * 0.23 + 'px'
 36 |             },
 37 |         }
 38 |     },
 39 |     created() {
 40 | 
 41 |     },
 42 | }
 43 | 
 44 | </script>
 45 | 
 46 | <style lang='less' scoped>
 47 | .wordContent {
 48 |     top: 100px;
 49 |     display: flex;
 50 |     flex-direction: column;
 51 |     align-items: center;
 52 |     width: 90%;
 53 |     // border: 1px solid blue;
 54 |     position: absolute;
 55 |     left: 50%;
 56 |     transform: translateX(-50%);
 57 |     transition: all .3s;
 58 | 
 59 |     .wordItem {
 60 |         margin-top: 20px;
 61 |         font-size: 14px;
 62 |     }
 63 | 
 64 |     .current {
 65 |         color: #eff1f2;
 66 |         font-size: 16px;
 67 |     }
 68 | }
 69 | </style>
 70 | 
 71 | <!-- <template>
 72 |     <div class="wordContent" ref="wordContentMove" :style="lyricMove">
 73 |         <div class="falgDiv" v-if="flag">
 74 |             <div ref="item" :class="['wordItem',currentRow===i?'current':'']" v-for="(item,i) in lyric" :key="i">
 75 |                 {{item.text}}
 76 |             </div>
 77 |         </div>
 78 |     </div>
 79 | </template>
 80 | <script>
 81 | import { reactive } from 'vue'
 82 | import { mapState, mapMutations } from 'vuex'
 83 | import mixinItem from '../../mixins/mixin.js'
 84 | export default {
 85 |     name: 'lyric',
 86 |     // mixins: [mixinItem],
 87 |     setup() {
 88 |         // const lyric = reactive([]);
 89 |         // return {
 90 |         //     lyric
 91 |         // }
 92 |     },
 93 |     data() {
 94 |         return {
 95 |             lyricMove: {
 96 |                 top: window.innerHeight * 0.23 + 'px'
 97 |             },
 98 |             word: '',
 99 |             currentRow: 0,
100 |             lyric: [1, 2, 3],
101 |             flag:false
102 |         }
103 |     },
104 |     computed: {
105 |         ...mapState('t_play', ['TsongListStore', 'TsongPageIdStore', 'TlyricTime'])
106 |     },
107 |     watch: {
108 |         TlyricTime(newV, oldV) {
109 |             this.lyric.forEach((element, index) => {
110 |                 if (this.TlyricTime === element.time) {
111 |                     let h = window.innerHeight * 0.23
112 |                     h += -index * 39
113 |                     this.lyricMove.top = h + 'px'
114 |                     this.currentRow = index
115 |                 }
116 |             });
117 |         },
118 |     },
119 |     methods: {
120 |         // 歌词处理
121 |         wordHandle() {
122 |             // (this.word);
123 |             //先通过“\n”将每行歌词存入数组之中
124 |             let arr = this.word.split('\n')
125 |             for (let i = 0; i < arr.length; i++) {
126 |                 let lyricRow = {}   //将每行歌词及其出现的时间视为一个对象
127 |                 let row = arr[i].split(']') //文本切割
128 |                 let text = row[1]   //拿到当前行的真正的歌词
129 |                 let time_arr = row[0].substr(1, row[0].length - 1).split(":")   //将[01:13]秒转为["01","13"]用于先处理
130 |                 let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1])   //将时间统一转为秒
131 |                 lyricRow.time = s   //向对象存入数据
132 |                 lyricRow.text = text
133 |                 // push进lyryc数组
134 |                 this.lyric.push(lyricRow)             
135 |             }
136 |             this.flag = true;
137 |         },
138 |         // 外界发入信息，表示此时歌词组件获取歌词
139 |         getWordInLyric(word) {
140 |             this.word = word
141 |             this.wordHandle()
142 |         }
143 |     }
144 | }
145 | </script>
146 | <style lang='less' scoped>
147 | .wordContent {
148 |     top: 100px;
149 |     display: flex;
150 |     flex-direction: column;
151 |     align-items: center;
152 |     width: 90%;
153 |     // border: 1px solid blue;
154 |     position: absolute;
155 |     left: 50%;
156 |     transform: translateX(-50%);
157 |     transition: all .3s;
158 | 
159 |     .wordItem {
160 |         margin-top: 20px;
161 |         font-size: 14px;
162 |     }
163 | 
164 |     .current {
165 |         color: #eff1f2;
166 |         font-size: 16px;
167 |     }
168 | 
169 |     .dis {
170 |         display: none;
171 | 
172 |     }
173 | }
174 | </style> -->


--------------------------------------------------------------------------------
/src/components/my.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container" ref="container">
  3 |         <!-- 下拉刷新loading -->
  4 |         <div class="loadingBoxHome" v-if="loadingShow">
  5 |             <div class="loading"></div>
  6 |         </div>
  7 |         <!-- 已登录 -->
  8 |         <div class="myConatiner" v-if="accountStore != 11">
  9 |             <Avatars v-bind:nickname="userInfo.profile.nickname" v-bind:avatarUrl="userInfo.profile.avatarUrl"
 10 |                 @click="gotoMyInfo">
 11 |                 <div class="level">
 12 |                     <span>{{ userInfo.profile.follows }}关注</span>
 13 |                     <span>{{ userInfo.profile.followeds }}粉丝</span>
 14 |                     <span>LV.{{ userInfo.level }}</span>
 15 |                 </div>
 16 |             </Avatars>
 17 |             <!-- 我喜欢的歌单 -->
 18 |             <div class="myLove">
 19 |                 <Songlist v-bind:title="songList[0].name" v-bind:count="songList[0].trackCount"
 20 |                     v-bind:songImg="songList[0].coverImgUrl" @click="gotoList(songList[0].id)"></Songlist>
 21 |             </div>
 22 |             <!-- 其他歌单 -->
 23 |             <div class="songListOther">
 24 |                 <div class="title">歌单({{ songList.length - 1 }}个)</div>
 25 |                 <Songlist v-for="(item, i) in songList.slice(1, songList.length - 1)" :key="i" v-bind:title="item.name"
 26 |                     v-bind:count="item.trackCount" v-bind:songImg="item.coverImgUrl" @click="gotoList(item.id)">
 27 |                 </Songlist>
 28 |             </div>
 29 |             <!-- 退出登录 -->
 30 |             <el-card class="box-card logOut-box" @click="LogOut">
 31 |                 <div class="logOut">退出登录</div>
 32 |             </el-card>
 33 |         </div>
 34 |         <!-- 未登录 -->
 35 |         <Login v-else></Login>
 36 |         <Tabbar :pageNum="2"></Tabbar>
 37 |     </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import Songlist from './songlist/songlist.vue'
 42 | import Login from './login/login.vue'
 43 | import Tabbar from './tababr/tabbar.vue'
 44 | import Avatars from './avatar/avatar.vue'
 45 | import { mapState, mapMutations } from 'vuex'
 46 | import { ElLoading } from 'element-plus'
 47 | import mixinItem from '../mixins/mixin.js'
 48 | export default {
 49 |     name: 'my',
 50 |     computed: {
 51 |         ...mapState('m_my', ['accountStore', 'userInfo', 'songListinStore']),
 52 | 
 53 |     },
 54 |     mixins: [mixinItem],
 55 |     components: {
 56 |         Tabbar,
 57 |         Login,
 58 |         Avatars,
 59 |         Songlist
 60 |     },
 61 |     data() {
 62 |         return {
 63 |             UserId: 0,
 64 |             songList: {},
 65 |             isRefresh: true,
 66 |             loadingShow: false,
 67 |         }
 68 |     },
 69 |     mounted() {
 70 |         this.downRefresh()
 71 |     },
 72 |     async created() {
 73 |         this.UserId = this.userInfo.profile.userId
 74 |         if (this.accountStore != 11) {
 75 |             this.SongListId = this.userInfo.userPoint.userId
 76 |             if (this.songListinStore == '11') {
 77 |                 await this.getSongList(this.SongListId)
 78 |                 this.updateSongListinStore(this.songList)
 79 |             }
 80 |             this.songList = this.songListinStore
 81 |         }
 82 | 
 83 |     },
 84 |     methods: {
 85 |         ...mapMutations('m_my', ['updateSongListinStore', 'updateUserInfo']),
 86 |         // 获取用户歌单
 87 |         async getSongList(uid) {
 88 |             const { playlist: res } = await this.$h.get('http://111.67.195.237:8886/user/playlist?uid=' + uid)
 89 |             this.songList = res
 90 |         },
 91 |         // 退出登录
 92 |         LogOut() {
 93 |             localStorage.removeItem('vuex')
 94 |             this.$router.go(0)
 95 |         },
 96 |         gotoList(id) {
 97 |             this.goToList(id)
 98 |         },
 99 |         //刷新效果动画
100 |         loading() {
101 |             this.loadingShow = true
102 |             setTimeout(() => {
103 |                 this.isRefresh = true
104 |                 this.loadingShow = false
105 |             }, 1000);
106 |         },
107 |         // 下拉刷新
108 |         downRefresh() {
109 |             let start = 0 //初始位置
110 |             let transitionHeight = 0  //移动距离
111 |             let This = this
112 |             this.$refs.container.addEventListener('touchstart', function (e) {
113 |                 start = e.touches[0].pageY
114 |             }, false)
115 |             this.$refs.container.addEventListener('touchmove', async function (e) {
116 |                 transitionHeight = e.touches[0].pageY - start //记录差值
117 |                 if (transitionHeight > 0 && document.documentElement.scrollTop === 0) {
118 |                     if (transitionHeight > 250 && This.isRefresh) {
119 |                         This.isRefresh = false
120 |                         This.loading()
121 |                         await This.getSongList(This.SongListId)
122 |                         const res = await This.getUserInfo(This.UserId)
123 |                         This.updateUserInfo(res)
124 |                         This.updateSongListinStore(This.songList)
125 | 
126 |                     }
127 |                 }
128 |             })
129 |         },
130 |         // 前往myInfo页面
131 |         gotoMyInfo() {
132 |             this.$router.push('/myInfo')
133 |         }
134 |     },
135 | }
136 | 
137 | </script>
138 | 
139 | <style lang='less' scoped>
140 | // 转转转动画
141 | @keyframes circle {
142 |     0% {
143 |         transform: rotate(0);
144 |     }
145 | 
146 |     100% {
147 |         transform: rotate(360deg);
148 |     }
149 | }
150 | 
151 | .loadingBoxHome {
152 |     width: 20px;
153 |     height: 20px;
154 |     position: absolute;
155 |     top: 20px;
156 |     left: 50%;
157 |     transform: translateX(-50%);
158 |     z-index: 999;
159 | 
160 |     .loading {
161 |         width: 20px;
162 |         height: 20px;
163 |         border: 2px solid #e63434;
164 |         border-top-color: transparent;
165 |         border-radius: 100%;
166 |         animation: circle infinite 0.75s linear;
167 |     }
168 | }
169 | 
170 | .container {
171 |     width: 100%;
172 |     height: 100%;
173 | }
174 | 
175 | .myConatiner {
176 |     padding-top: 50px;
177 |     padding-bottom: 120px;
178 |     width: 100%;
179 |     background: #141414;
180 | 
181 |     .level {
182 |         margin-top: 10px;
183 |         color: #b5b5b5;
184 |         font-size: 13px;
185 |         font-weight: 600;
186 |         display: flex;
187 |         justify-content: space-around;
188 | 
189 |         span {
190 |             margin-left: 10px;
191 |         }
192 |     }
193 | 
194 |     .myLove {
195 |         display: flex;
196 |         padding-left: 10px;
197 |         align-items: center;
198 |         margin: auto;
199 |         margin-top: 35px;
200 |         width: 90%;
201 |         height: 80px;
202 |         background: #2c2c2c;
203 |         border-radius: 5%;
204 |     }
205 | 
206 |     .songListOther {
207 |         padding-top: 5px;
208 |         padding-left: 10px;
209 |         margin: auto;
210 |         margin-top: 35px;
211 |         margin-left: 10px;
212 |         width: 91%;
213 |         background: #2c2c2c;
214 |         border-radius: 5%;
215 |     }
216 | 
217 |     .title {
218 |         margin: 10px;
219 |         color: #a0a0a0;
220 |         font-size: 13px;
221 |     }
222 | 
223 |     .logOut-box {
224 |         display: flex;
225 |         justify-content: center;
226 |         background: #2c2c2c;
227 |         border: none;
228 |         width: 95%;
229 |         height: 60px;
230 |         margin: auto;
231 |         margin-top: 20px;
232 | 
233 |         .logOut {
234 |             font-weight: 800;
235 |             color: #f43f3f;
236 | 
237 |         }
238 | 
239 |     }
240 | 
241 |     .logOut-box:active {
242 |         background: #1e1d1d;
243 |     }
244 | }
245 | </style>
246 | 


--------------------------------------------------------------------------------
/src/components/myInfo/myInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="myInfoContainer">
  3 |     <el-card class="box-card">
  4 |       <div class="backImg">
  5 |         <div class="back" @click="Back">
  6 |           <el-icon :size="24" color="#f2eeeb">
  7 |             <Back />
  8 |           </el-icon>
  9 |         </div>
 10 |         <img src="http://p1.music.126.net/pf6wr3laJhP56M-3UxfQNA==/109951164663755261.jpg" />
 11 |       </div>
 12 |       <div class="avatarContainer">
 13 |         <Avatars v-bind:nickname="userInfo.profile.nickname" v-bind:avatarUrl="userInfo.profile.avatarUrl">
 14 |           <div class="level">
 15 |             <span>{{ userInfo.profile.follows }}关注</span>
 16 |             <span>{{ userInfo.profile.followeds }}粉丝</span>
 17 |             <span>LV.{{ userInfo.level }}</span>
 18 |           </div>
 19 |         </Avatars>
 20 |       </div>
 21 |       <el-card class="userInfo">
 22 |         <div class="top">
 23 |           <div class="title">基本信息</div>
 24 |           <div class="revise" @click="gotoRevise">编辑资料</div>
 25 |         </div>
 26 |         <div class="form">
 27 |           <span class="cun">村龄:
 28 |             <span>{{ cunAge }}年({{ registerTime.Y }}年{{ registerTime.M }}月注册)</span>
 29 |           </span>
 30 |           <span class="gender">性别:
 31 |             <span>{{ sex }}</span>
 32 |           </span>
 33 |           <span class="age">年龄:
 34 |             <span>{{ AgeLater }} {{ Zodiac }}</span>
 35 |           </span>
 36 |           <span class="age">简介:
 37 |             <span>{{userInfo.profile.signature}}</span>
 38 |           </span>
 39 |         </div>
 40 |       </el-card>
 41 |       <el-card class="userInfo comment">
 42 |         <div class="title">已购</div>
 43 |         <div class="tabsContainer">
 44 |           <div class="tabsTop">
 45 |             <div :class="['album', changeFlag === 'album' ? 'show' : '']" @click="change('album')">数字专辑</div>
 46 |             <div :class="['song', changeFlag === 'song' ? 'show' : '']" @click="change('song')">单曲</div>
 47 |           </div>
 48 |           <div class="content">
 49 |             <div class="item" v-for="(item, i) in BuyArray" :key="i" @click="playMusic(item.pic, item.title, item.id)">
 50 |               <div class="pic">
 51 |                 <img :src="item.pic" alt="">
 52 |               </div>
 53 |               <div class="right">
 54 |                 <div class="songTitle">{{ item.title }}</div>
 55 |                 <div class="author">{{ item.author }}</div>
 56 |               </div>
 57 |             </div>
 58 |           </div>
 59 |         </div>
 60 |       </el-card>
 61 |     </el-card>
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import { reactive } from 'vue'
 67 | import { mapState, mapMutations } from 'vuex'
 68 | import Avatars from '../avatar/avatar.vue';
 69 | import mixinItem from '../../mixins/mixin.js'
 70 | export default {
 71 |   name: 'myInfo',
 72 |   // setup() {
 73 |   //   const BuyArray = reactive([]);
 74 |   //   return {
 75 | 
 76 |   //   }
 77 |   // },
 78 |   inject: ['playMusictoApp'],
 79 |   components: {
 80 |     Avatars
 81 |   },
 82 |   mixins: [mixinItem],
 83 |   computed: {
 84 |     ...mapState('m_my', ['userInfo']),
 85 |     ...mapState('t_my',['birthdayTimeInStore'])
 86 |   },
 87 |   data() {
 88 |     return {
 89 |       birthdayTimeStr: '',
 90 |       registerTimeStr: '',
 91 |       gender: 0,
 92 |       sex: '女',
 93 |       birthdayTime: {},
 94 |       registerTime: {},
 95 |       cunAge: 0,
 96 |       AgeLater: '',
 97 |       Zodiac: '',
 98 |       changeFlag: 'album',
 99 |       BuyItem: {},
100 |       BuyArray: []
101 |     }
102 |   },
103 |   created() {
104 |     // 获取生日时间戳
105 |     this.birthdayTimeStr = this.userInfo.profile.birthday
106 |     // 获取账号创建的时间戳
107 |     this.registerTimeStr = this.userInfo.profile.createTime
108 |     // 获取性别
109 |     this.gender = this.userInfo.profile.gender
110 |     if (this.gender !== 1) {
111 |       this.sex = '女'
112 |     } else if (this.gender !== 0) {
113 |       this.sex = '男'
114 |     } else {
115 |       this.sex = '保密'
116 |     }
117 | 
118 |     this.birthdayTime = this.getDate(this.birthdayTimeStr)
119 |     this.updatedBirthdayTimeInStore(this.birthdayTime)
120 |     this.registerTime = this.getDate(this.registerTimeStr)
121 |     this.cunAge = (new Date()).getFullYear() - this.registerTime.Y
122 |     this.AgeLater = this.getAge(this.birthdayTime)
123 |     this.Zodiac = this.getZodiac(this.birthdayTime)
124 |     // 获取专辑
125 |     this.getAlbum()
126 |   },
127 |   methods: {
128 |     // 存储生日对象方法
129 |     ...mapMutations('t_my',['updatedBirthdayTimeInStore']),
130 |     // 返回上一页
131 |     Back() {
132 |       this.$router.go(-1)
133 |     },
134 |     // tab标签切换
135 |     change(flag) {
136 |       if (this.changeFlag === flag) {
137 |         return
138 |       }
139 |       this.changeFlag = flag
140 |       if (this.changeFlag === 'album') {
141 |         this.getAlbum()
142 |       } else if (this.changeFlag === 'song') {
143 |         this.getSong()
144 |       }
145 | 
146 |     },
147 |     // 获取专辑
148 |     async getAlbum() {
149 |       const res = await this.$h.get('/digitalAlbum/purchased?limit=10')
150 |       this.BuyArray = []
151 |       for (let i = 0; i < res.total; i++) {
152 |         this.BuyItem = {}
153 |         this.BuyItem.title = res.paidAlbums[i].albumName
154 |         this.BuyItem.id = res.paidAlbums[i].albumId
155 |         this.BuyItem.pic = res.paidAlbums[i].cover
156 |         this.BuyItem.author = res.paidAlbums[i].artist.name
157 |         this.BuyArray.push(this.BuyItem)
158 |       }
159 | 
160 |     },
161 |     // 获取歌曲
162 |     async getSong() {
163 |       const { data: res } = await this.$h.get('/song/purchased?limit=10')
164 |       this.BuyArray = []
165 |       for (let i = 0; i < res.count; i++) {
166 |         this.BuyItem = {}
167 |         this.BuyItem.title = res.list[i].name
168 |         this.BuyItem.id = res.list[i].songId
169 |         this.BuyItem.pic = res.list[i].picUrl
170 |         this.BuyItem.author = res.list[i].artistName
171 |         this.BuyArray.push(this.BuyItem)
172 |       }
173 |     },
174 |     // 播放单曲
175 |     async playMusic(pic, name, id) {
176 |       if (this.changeFlag === 'album') {
177 |         return
178 |       } else if (this.changeFlag === 'song') {
179 |         const { data: res } = await this.getMusicUrl(id)
180 |         const url = res[0].url
181 |         this.playMusictoApp(url, pic, name, id)
182 |       }
183 |     },
184 |     //进入资料编辑页面
185 |     gotoRevise() {
186 |       this.$router.push('./reviseMyInfo')
187 |     }
188 |   }
189 | 
190 | }
191 | 
192 | </script>
193 | 
194 | <style lang='less' scoped>
195 | ::v-deep(.el-card) {
196 |   --el-card-padding: 0;
197 |   border: 0;
198 | }
199 | 
200 | .myInfoContainer {
201 |   width: 100%;
202 |   padding-bottom: 56px;
203 | 
204 |   .box-card {
205 |     width: 100%;
206 |     background-color: #1b1b1d;
207 | 
208 |   }
209 | 
210 |   .backImg {
211 |     height: 200px;
212 |     overflow: hidden;
213 | 
214 |     .back {
215 |       position: absolute;
216 |       left: 10px;
217 |       top: 10px;
218 |     }
219 | 
220 |     img {
221 |       width: 100%;
222 | 
223 |     }
224 |   }
225 | 
226 |   .avatarContainer {
227 |     z-index: 999;
228 |     margin-top: 10px;
229 | 
230 |     .level {
231 |       margin-top: 10px;
232 |       color: #b5b5b5;
233 |       font-size: 13px;
234 |       font-weight: 600;
235 |       display: flex;
236 |       justify-content: space-around;
237 | 
238 |       span {
239 |         margin-left: 20px;
240 |       }
241 |     }
242 |   }
243 | 
244 |   .userInfo {
245 |     box-sizing: border-box;
246 |     width: 90%;
247 |     margin-left: 50%;
248 |     background-color: #2b2b2b;
249 |     transform: translateX(-50%);
250 |     margin-top: 20px;
251 |     padding: 15px 10px;
252 | 
253 |     .top {
254 |       display: flex;
255 |       justify-content: space-between;
256 | 
257 |       .title {
258 |         color: #e9e9e9;
259 |         font-weight: 600;
260 | 
261 |       }
262 | 
263 |       .revise {
264 |         color: #e9e9e9;
265 |         font-size: 13px;
266 |         font-weight: 600;
267 |       }
268 | 
269 |       .revise::after {
270 |         content: '';
271 |         top: 13px;
272 |         right: 3px;
273 |         height: 20px;
274 |         width: 65px;
275 |         position: absolute;
276 |         border: 1px solid #fff;
277 |         border-radius: 5%;
278 |       }
279 |     }
280 | 
281 |     .form {
282 |       display: flex;
283 |       flex-direction: column;
284 |       justify-content: space-around;
285 |       margin-top: 10px;
286 | 
287 |       .cun,
288 |       .age,
289 |       .gender {
290 |         margin-top: 10px;
291 |         color: #b5b5b5;
292 |         font-size: 13px;
293 | 
294 |         span {
295 |           color: #d5d5d5;
296 |         }
297 |       }
298 |     }
299 |   }
300 | 
301 |   .comment {
302 |     .top {
303 |       display: flex;
304 | 
305 |       img {
306 |         width: 25px;
307 |         height: 25px;
308 |       }
309 | 
310 |       .name {
311 |         margin-left: 12px;
312 |         color: #b5b5b5;
313 |       }
314 |     }
315 | 
316 |     .tabsContainer {
317 |       .tabsTop {
318 |         display: flex;
319 |         margin-top: 8px;
320 |         color: #b5b5b5;
321 |         font-size: 14px;
322 |         font-weight: 600;
323 | 
324 |         .song {
325 |           margin-left: 15px;
326 |         }
327 | 
328 |         .show {
329 |           color: #c52930;
330 |         }
331 |       }
332 | 
333 |       .content {
334 |         margin-top: 20px;
335 | 
336 |         .item {
337 |           margin-top: 10px;
338 |           display: flex;
339 | 
340 |           .pic {
341 |             img {
342 |               border-radius: 8%;
343 |               width: 100px;
344 |               height: 100px;
345 |             }
346 |           }
347 | 
348 |           .right {
349 |             margin-left: 15px;
350 | 
351 |             .songTitle {
352 |               margin-top: 10px;
353 |               color: #e9e9e9;
354 |               font-weight: 600;
355 |               font-size: 17px;
356 |               /*将对象作为弹性伸缩盒子模型显示*/
357 |               display: -webkit-box;
358 |               /*设置子元素排列方式*/
359 |               -webkit-box-orient: vertical;
360 |               /*设置显示的行数，多出的部分会显示为...*/
361 |               -webkit-line-clamp: 1;
362 |               overflow: hidden;
363 |             }
364 | 
365 |             .author {
366 |               margin-top: 5px;
367 |               color: #d5d5d5;
368 |               font-size: 14px;
369 |               font-weight: 600;
370 |             }
371 |           }
372 |         }
373 |       }
374 |     }
375 | 
376 | 
377 | 
378 |   }
379 | }
380 | </style>
381 | 


--------------------------------------------------------------------------------
/src/components/playmusic/playmusic.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="music" ref="big">
  3 |         <div class="music__main">
  4 |             <div :class="['music__main__cover', isPlay ? 'active' : '']" ref="cover" @click="pause">
  5 |                 <img :src="songPic" />
  6 |             </div>
  7 |             <div class="music__main__timeBar">
  8 |                 <!-- <div class="time" ref="time" style="display:none">
  9 |                     <span>{{ realMusicTime }}</span>
 10 |                     <span>{{ totalMusicTime }}</span>
 11 |                 </div> -->
 12 |                 <div class="title" ref="title" @click="gotoSongPage">
 13 |                     <spna>{{ songName }}</spna>
 14 |                 </div>
 15 |                 <div class="bar" ref="bar" @click="handClickBar">
 16 |                     <div class="bar__slid" ref="slid" @click="handClickBar"></div>
 17 |                 </div>
 18 |                 <div class="head" ref="head"></div>
 19 |             </div>
 20 |         </div>
 21 |         <div class="music__btn">
 22 |             <i class="el-icon-refresh" @click="switchMusic"></i>
 23 |         </div>
 24 |         <div class="music__mask"></div>
 25 |         <audio ref="music" :src="audioSrc"></audio>
 26 | 
 27 |     </div>
 28 | </template>
 29 | <script>
 30 | import { reactive } from 'vue'
 31 | import { mapState, mapMutations } from 'vuex'
 32 | import mixinItem from '../../mixins/mixin.js'
 33 | import urltext from './url.js'
 34 | export default {
 35 |     setup() {
 36 |         const audioSrcs = reactive([]);
 37 |         return {
 38 |             audioSrcs
 39 |         }
 40 |     },
 41 |     computed: {
 42 |         ...mapState('m_play', ['playIt', 'changeMusic', 'songStore', 'songListStore']),
 43 |         ...mapState('t_play', ['TsongListStore', 'TlyricTime'])
 44 |     },
 45 |     watch: {
 46 |         changeMusic(newV, oldV) {
 47 |             this.changeTheMusic(this.changeMusic)
 48 |         }
 49 |     },
 50 |     mixins: [mixinItem],
 51 |     data() {
 52 |         return {
 53 |             isPlay: false,
 54 |             realMusicTime: "00:00",
 55 |             totalMusicTime: "00:00",
 56 |             audioSrc: '',
 57 |             songPic: urltext.url,
 58 |             songName: '',
 59 |             songId: 0,
 60 |             song: {},
 61 |             audioIndex: 0,
 62 |             word: {},
 63 |             lyric: {}
 64 |         };
 65 |     },
 66 |     created() {
 67 |     },
 68 |     mounted() {
 69 |         this.watchMusicTime();
 70 |     },
 71 |     methods: {
 72 |         ...mapMutations('m_play', ['updateChangeMusic', 'updatesongStore', 'updateplayIt', 'playTotrue']),
 73 |         ...mapMutations('t_play', ['updatedTlyricTime']),
 74 |         // 离开回复缩下版样式
 75 |         showStyle() {
 76 |             this.$refs.cover.style.display = 'block'
 77 |             this.$refs.title.style.display = 'block'
 78 |             // this.$refs.time.style.display = 'none'
 79 |             this.$refs.bar.style.height = '1px'
 80 |             this.$refs.big.style.width = '100%'
 81 |             this.$refs.big.style.background = '#1c1c1e'
 82 | 
 83 |         },
 84 |         // 进入songPage页面需要修改布局和样式
 85 |         noneStyle() {
 86 |             this.$refs.cover.style.display = 'none'
 87 |             this.$refs.title.style.display = 'none'
 88 |             // this.$refs.time.style.display = 'flex'
 89 |             this.$refs.big.style.width = '100%'
 90 |             // 进度条放大
 91 |             this.$refs.bar.style.height = '2px'
 92 |             this.$refs.big.style.background = 'rgba(0,0,0,0)'
 93 | 
 94 | 
 95 |         },
 96 |         // 点击歌曲标题，进入歌曲详情页面
 97 |         gotoSongPage() {
 98 |             this.$router.push({
 99 |                 path: '/songPage',
100 |                 query: {
101 |                     id: this.songId
102 |                 }
103 |             })
104 |         },
105 |         // 点击单首歌曲时的方法
106 |         OneclickPlay(url, pic, name, id) {
107 |             this.audioSrc = '' + url
108 |             if (this.audioSrcs.indexOf(url + '@#' + id) === -1) {
109 |                 this.audioSrcs.push(url + '@#' + id)
110 |             }
111 |             this.songPic = pic
112 |             this.songName = name
113 |             this.songId = id
114 |             setTimeout(() => {
115 |                 this.play()
116 |             }, 300);
117 | 
118 |         },
119 |         play() {
120 |             this.music.play();
121 |             // (this.music);
122 |             this.isPlay = true;
123 |         },
124 |         pause() {
125 |             if (this.isPlay === true) {
126 |                 this.isPlay = false;
127 |                 this.music.pause();
128 |             } else {
129 |                 this.isPlay = true;
130 |                 this.music.play()
131 |             }
132 |             this.updateplayIt()
133 |         },
134 |         // 处理时间
135 |         handlMusicTime() {
136 |             //用秒数来显示当前播放进度
137 |             let timeDisplay = Math.floor(this.music.currentTime); //获取实时时间
138 |             //分钟
139 |             let minute = parseInt(timeDisplay / 60);
140 |             if (minute < 10) {
141 |                 minute = "0" + minute;
142 |             }
143 |             //秒
144 |             let second = Math.round(timeDisplay % 60);
145 |             if (second < 10) {
146 |                 second = "0" + second;
147 |             }
148 |             this.realMusicTime = minute + ":" + second;
149 |         },
150 |         // 处理进度条
151 |         handMusicBar() {
152 |             let head = this.$refs.head;
153 |             let slid = this.$refs.slid;
154 |             let duration = this.music.duration;
155 |             let lyricTime = Math.ceil(this.music.currentTime)   //向外传递当前播放的时间
156 |             this.updatedTlyricTime(lyricTime)
157 |             let x = ((this.music.currentTime / duration) * 100).toFixed(2) + "%";
158 |             slid.style.width = x;
159 |             let y = 281 * (this.music.currentTime / duration).toFixed(2);
160 |             // (y);
161 |             head.style.marginLeft = y + 'px';
162 |         },
163 |         // 处理点击进度条事件
164 |         handClickBar(e) {
165 |             this.playTotrue()
166 |             const barTotalWidth = this.bar.offsetWidth; // bar 总宽度
167 |             const rect = e.target.getBoundingClientRect(); // 元素右边距离页面边距的距离 返回上下左右
168 |             let length = e.pageX - rect.left;
169 |             this.music.currentTime = length / barTotalWidth * this.music.duration; // 计算播放时间 位置百分比*总时间
170 |             this.$nextTick(() => {
171 |                 this.music.play();
172 |                 this.isPlay = true;
173 |             })
174 |         },
175 |         // 播放完后随机切换歌曲
176 |         async switchMusic() {
177 |             const preaudioSrc = this.audioSrc
178 |             this.isPlay = false;
179 |             this.audioIndex = Math.floor(Math.random() * this.audioSrcs.length)
180 |             // (this.audioIndex);
181 |             const str = this.audioSrcs[this.audioIndex];
182 |             // 获取到随机值后
183 |             const arr = str.split('@#')
184 |             // 获取url
185 |             this.audioSrc = arr[0]
186 |             // 判断前后歌曲是否相同，减少请求
187 |             if (this.audioSrc !== preaudioSrc) {
188 |                 // 获取id
189 |                 const id = arr[1]
190 |                 // 调用获取歌曲详情函数
191 |                 const { songs: res } = await this.getMusicDetail(id)
192 |                 // 修改封面
193 |                 this.songPic = res[0].al.picUrl
194 |                 // 修改歌曲名称
195 |                 this.songName = res[0].name
196 |                 // (res[0])
197 |                 this.song = res[0]
198 |                 // 10.23晚处理
199 |                 this.songId = res[0].id
200 |                 this.song.Id = res[0].id
201 |                 this.songToStore(this.song)
202 |             }
203 |             this.updateChangeMusic(this.changeMusic + '1')
204 |             this.music.load()
205 |             // 文件下载完毕，如果不用等到全部下载完毕，可以用canplay事件
206 |             this.music.addEventListener("canplay", () => {
207 |                 this.music.play();
208 |                 this.isPlay = true;
209 |             });
210 |         },
211 |         // 切换歌曲
212 |         async changeTheMusic() {
213 |             let res = null
214 |             const temp = this.audioSrc + '@#' + this.songId
215 |             // 获取当前歌曲在歌曲数组中的位置
216 |             for (let index = 0; index < this.audioSrcs.length; index++) {
217 |                 if (temp === this.audioSrcs[index]) {
218 |                     this.audioIndex = index
219 |                     break;
220 |                 }
221 | 
222 |             }
223 |             if (this.changeMusic === 'next') {
224 |                 // 获取当前的audioIndex加一
225 |                 if (this.audioIndex === this.audioSrcs.length - 1) {
226 |                     this.audioIndex = 0
227 |                 } else {
228 |                     this.audioIndex++
229 |                 }
230 |             } else if (this.changeMusic === 'pre') {
231 |                 // 获取当前的audioIndex减一
232 |                 if (this.audioIndex === 0) {
233 |                     this.audioIndex = this.audioSrcs.length - 1
234 |                 } else {
235 |                     this.audioIndex--
236 |                 }
237 |             } else if (changeMusicHandle === 'qie') {
238 | 
239 |             }
240 |             const str = this.audioSrcs[this.audioIndex];
241 |             const arr = str.split('@#')
242 |             // 获取url
243 |             this.audioSrc = arr[0]
244 |             // 获取id
245 |             const id = arr[1]
246 |             let flagToget = true
247 |             this.songId = id
248 |             // 判断缓存中是否存在歌曲的封面等信息，避免重复请求
249 |             for (let i = 0; i < this.TsongListStore.length; i++) {
250 |                 if (this.TsongListStore[i].id == id) {
251 |                     this.songPic = this.TsongListStore[i].al.picUrl
252 |                     this.songName = this.TsongListStore[i].name
253 |                     this.song = this.TsongListStore[i].al
254 |                     flagToget = false
255 |                     res = i
256 |                     break;
257 |                 }
258 |             }
259 |             // 缓存中不存在歌曲的信息
260 |             if (flagToget) {
261 |                 // 调用获取歌曲详情函数
262 |                 const data = await this.getMusicDetail(id)
263 |                 this.word = (await this.getWord(id)).lyric
264 |                 res = data.songs
265 |                 // 歌词存入res
266 |                 res[0].word = this.word
267 |                 // 修改封面
268 |                 this.songPic = res[0].al.picUrl
269 |                 // 修改歌曲名称
270 |                 this.songName = res[0].al.name
271 |                 this.song = res[0].al
272 |                 // 加入缓存中
273 |                 this.TsongListStore.push(res[0])
274 |             }
275 |             this.songToStore(this.song)
276 |             this.music.load()
277 |             // 文件下载完毕，如果不用等到全部下载完毕，可以用canplay事件
278 |             this.music.addEventListener("canplay", () => {
279 |                 this.music.play();
280 |                 this.isPlay = true;
281 |             });
282 |             return res
283 |         },
284 |         songToStore(song) {
285 |             this.updatesongStore(song)
286 |         },
287 |         //使用事件监听方式捕捉事件
288 |         watchMusicTime() {
289 |             this.music = this.$refs.music;
290 |             this.bar = this.$refs.bar;
291 |             this.music.addEventListener(
292 |                 "timeupdate",
293 |                 () => {
294 |                     this.handlMusicTime();
295 |                     this.$nextTick(() => {
296 |                         this.handMusicBar();
297 |                     })
298 |                 },
299 |                 false
300 |             );
301 |             // 播放完毕
302 |             this.music.addEventListener("ended", () => {
303 |                 this.switchMusic(); // 自动播放
304 |             });
305 |             // 捕获音频文件已准备完毕
306 |             // 当媒体文件可以播放的时候会触发oncanplay事件,也可以用oncanplay
307 |             this.music.oncanplaythrough = () => {
308 |                 let time = this.music.duration;
309 |                 //分钟
310 |                 let minutes = parseInt(time / 60);
311 |                 if (minutes < 10) {
312 |                     minutes = "0" + minutes;
313 |                 }
314 |                 //秒
315 |                 let seconds = Math.round(time % 60);
316 |                 if (seconds < 10) {
317 |                     seconds = "0" + seconds;
318 |                 }
319 |                 this.totalMusicTime = minutes + ":" + seconds;
320 |             };
321 |         },
322 |         downLoadForm() {
323 |             let form = {}
324 |             form.id = this.songId
325 |             form.name = this.songName
326 |             form.url = this.audioSrc
327 |             // form.author = this.
328 |             return form
329 |     }   }
330 | };
331 | </script>
332 | <style lang="less">
333 | ::v-deep(.el-card) {
334 |     --el-card-padding: 0;
335 |     --el-card-border-color: 0;
336 |     background-color: #2b2b2b;
337 |     border: 0;
338 |     border-radius: 0;
339 | }
340 | 
341 | ::v-deep(.el-card__body) {
342 |     padding: 0;
343 | }
344 | 
345 | @keyframes musicRotate {
346 |     from {
347 |         transform: rotate(0);
348 |     }
349 | 
350 |     to {
351 |         transform: rotate(360deg);
352 |     }
353 | }
354 | 
355 | .music {
356 | 
357 |     width: 100%;
358 |     margin: 0 auto;
359 |     margin-left: 1px;
360 |     // border-radius: 15px;
361 |     // position: relative;
362 |     padding: 5px 22px;
363 |     box-sizing: border-box;
364 |     overflow: hidden;
365 |     background: #1c1c1e;
366 |     transition: .7s;
367 | 
368 |     &__main {
369 |         display: flex;
370 | 
371 | 
372 |         &__cover {
373 |             width: 40px;
374 |             height: 40px;
375 |             overflow: hidden;
376 |             border-radius: 50%;
377 |             background-color: #dddddd;
378 |             cursor: pointer;
379 |             animation: musicRotate 10s linear infinite;
380 |             animation-play-state: paused; // 暂定动画
381 | 
382 |             img {
383 |                 width: 40px;
384 |                 height: 40px;
385 |             }
386 | 
387 |             &.active {
388 |                 animation-play-state: running; // 运行动画
389 |             }
390 |         }
391 | 
392 |         &__timeBar {
393 |             flex: 1;
394 |             display: flex;
395 |             flex-direction: column;
396 |             justify-content: space-evenly;
397 |             padding-left: 10px;
398 |             box-sizing: border-box;
399 | 
400 |             .title {
401 |                 width: 200px;
402 |                 color: #e9e9e9;
403 |                 font-size: 12px;
404 |                 // line-height: 12px;
405 |                 font-weight: 500;
406 |                 overflow: hidden;
407 |                 /*文本不会换行*/
408 |                 white-space: nowrap;
409 |                 /*当文本溢出包含元素时，以省略号表示超出的文本*/
410 |                 text-overflow: ellipsis;
411 | 
412 |             }
413 | 
414 |             .time {
415 |                 display: flex;
416 |                 justify-content: space-between;
417 |                 color: #ceb8b7;
418 | 
419 |                 span {
420 |                     // position:absolute;
421 |                     font-size: 12px;
422 |                     line-height: 1;
423 |                     transform: scale(0.8);
424 |                 }
425 | 
426 | 
427 |             }
428 | 
429 |             .bar {
430 |                 height: 1px;
431 |                 background-color: rgba(235, 241, 251, 0.5);
432 |                 border-radius: 8px;
433 |                 position: relative;
434 |                 border-radius: 8px;
435 |                 overflow: hidden;
436 |                 cursor: pointer;
437 | 
438 |                 &__slid {
439 |                     position: absolute;
440 |                     left: 0;
441 |                     top: 0;
442 |                     background-color: rgba(241, 243, 244, 0.9);
443 |                     height: 100%;
444 |                     width: 0;
445 |                     transition: width 0.3s;
446 |                 }
447 | 
448 | 
449 |             }
450 | 
451 |             .head {
452 |                 transition: width 0.3s;
453 |                 position: absolute;
454 |                 top: 34px;
455 |                 width: 8px;
456 |                 height: 8px;
457 |                 border-radius: 50%;
458 |                 background: rgba(241, 243, 244, 0.9);
459 |             }
460 |         }
461 |     }
462 | 
463 |     &__btn {
464 |         position: absolute;
465 |         right: 30px;
466 |         top: 10px;
467 | 
468 |         i {
469 |             font-size: 18px;
470 |             color: #fff;
471 |             cursor: pointer;
472 |         }
473 |     }
474 | 
475 |     &__mask {
476 |         // background-image: url('../../assets/meet.jpg');
477 |         z-index: -2;
478 |         background-repeat: no-repeat;
479 |         background-size: cover;
480 |         background-position: 50%;
481 |         filter: blur(15px);
482 |         opacity: 0.5;
483 |         transition: all 0.8s;
484 |         position: absolute;
485 |         top: 0;
486 |         right: 0;
487 |         left: 0;
488 |         bottom: 0;
489 | 
490 |         &::before {
491 |             position: absolute;
492 |             top: 0;
493 |             right: 0;
494 |             left: 0;
495 |             bottom: 0;
496 |             z-index: -1;
497 |             content: '';
498 |             background-color: rgba(0, 0, 0, 0.08);
499 |         }
500 |     }
501 | }
502 | </style>


--------------------------------------------------------------------------------
/src/components/reviseMyInfo/reviseMyInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="mt"></div>
  4 |         <div class="CalendarBox" v-if="calendarFlag">
  5 |             <myCalendar></myCalendar>
  6 |         </div>
  7 |         <div class="Top">
  8 |             <div class="Back" @click="close">
  9 |                 <el-icon :size="24" color="#f2eeeb">
 10 |                     <Back />
 11 |                 </el-icon>
 12 |                 <span>我的资料</span>
 13 |             </div>
 14 |             <div class="saveRevise" @click="saveRevise">保存</div>
 15 |         </div>
 16 |         <el-card class="box-cardContainer">
 17 |             <div class="avatar col" @click="clickSvatarInput">
 18 |                 <span>头像</span>
 19 |                 <div class="avatarRevise">
 20 |                     <el-avatar :size="50" :src="userInfo.profile.avatarUrl" />
 21 |                 </div>
 22 |             </div>
 23 |             <div class="nickname col" @click="nickNameFlag = true, modalFlag = true">
 24 |                 <span>昵称</span>
 25 |                 <span class="nicknameRevise right">{{ userInfo.profile.nickname }}</span>
 26 |             </div>
 27 |             <div class="gender col" @click="GenderBoxFlag = true; modalFlag = true">
 28 |                 <span>性别</span>
 29 |                 <span class="nicknameRevise right">{{ sex }}</span>
 30 |             </div>
 31 |         </el-card>
 32 |         <el-card class="box-cardContainer">
 33 |             <div class="gender col" @click="changCalendarFlag">
 34 |                 <span>生日</span>
 35 |                 <span class="nicknameRevise right">{{ birthdayTimeInStore.Y + '-' + birthdayTimeInStore.M + '-' +
 36 |                         birthdayTimeInStore.D
 37 |                 }}</span>
 38 |             </div>
 39 |             <div class="area col" @click="signatureBoxFlag = true; modalFlag = true">
 40 |                 <span>签名</span>
 41 |                 <span class="nicknameRevise right">{{ signature }}</span>
 42 |             </div>
 43 |         </el-card>
 44 |         <!-- 性别选择面板 -->
 45 |         <div class="genderChooseBox" v-if="GenderBoxFlag">
 46 |             <div class="genderItem" @click="gender = 1; GenderBoxFlag = false; modalFlag = false">男</div>
 47 |             <div class="genderItem" @click="gender = 2; GenderBoxFlag = false; modalFlag = false">女</div>
 48 |             <div class="closeDote" @click="GenderBoxFlag = false; modalFlag = false">
 49 |                 <el-icon>
 50 |                     <CloseBold />
 51 |                 </el-icon>
 52 |             </div>
 53 |         </div>
 54 |         <!-- 签名修改面板 -->
 55 |         <div class="signatureBox genderChooseBox" v-if="signatureBoxFlag">
 56 |             <textarea ref="textareaInput"></textarea>
 57 |             <div class="closeDote signatureClose" @click="signatureText">
 58 |                 <el-icon>
 59 |                     <CloseBold />
 60 |                 </el-icon>
 61 |             </div>
 62 |         </div>
 63 |         <!-- 昵称修改面板 -->
 64 |         <div class="signatureBox genderChooseBox NickNameBox" v-show="nickNameFlag">
 65 |             <input ref="nickInput" />
 66 |             <div :class="nickMclass" ref="nickM"></div>
 67 |             <div class="closeDote signatureClose" @click="closeAndSaveNickname">
 68 |                 <el-icon><Select /></el-icon>
 69 |             </div>
 70 |         </div>
 71 |         <!-- 模态框 -->
 72 |         <div class="modal" v-if="modalFlag"></div>
 73 |         <input ref="avatarInput" type="file" @change="getImg($event)" v-show="none" />
 74 |         <myCopper v-show="cropperFlag" v-bind:imgurl="url"></myCopper>
 75 |     </div>
 76 | </template>
 77 | 
 78 | <script>
 79 | import { mapState, mapMutations } from 'vuex'
 80 | import Avatars from '../avatar/avatar.vue';
 81 | import Copper from '../cropper/cropper.vue'
 82 | import mixinItem from '../../mixins/mixin.js'
 83 | import calendar from '../calendar/calendar.vue'
 84 | import { ElMessage } from 'element-plus'
 85 | export default {
 86 |     mixins: [mixinItem],
 87 |     name: 'reviseMyInfo',
 88 |     computed: {
 89 |         ...mapState('m_my', ['userInfo','cookie']),
 90 |         ...mapState('t_my', ['birthdayTimeInStore'])
 91 |     },
 92 |     components: {
 93 |         myCalendar: calendar,
 94 |         myCopper: Copper
 95 |     },
 96 |     data() {
 97 |         return {
 98 |             birthdayTimeStr: '',
 99 |             gender: 0,
100 |             signature: '',
101 |             birthdayTime: {},
102 |             area: '',
103 |             calendarFlag: false,
104 |             GenderBoxFlag: false,
105 |             modalFlag: false,
106 |             signatureBoxFlag: false,
107 |             nickNameFlag: false,
108 |             sex: '',
109 |             cropperFlag: false,
110 |             nickMclass: '',
111 |             url: '',
112 |             timer: null,
113 |             nickNameSucc: false
114 |         }
115 |     },
116 |     watch: {
117 |         gender(newV, oldV) {
118 |             if (this.gender !== 1) {
119 |                 this.sex = '女'
120 |             } else if (this.gender !== 0) {
121 |                 this.sex = '男'
122 |             } else {
123 |                 this.sex = '保密'
124 |             }
125 |         },
126 |         nickNameFlag(newV, oldV) {
127 |             if (newV === true) {
128 |                 this.nickNameText()
129 |             }
130 |         }
131 |     },
132 |     async created() {
133 |         this.signature = this.userInfo.profile.signature
134 |         this.gender = this.userInfo.profile.gender
135 |         if (this.gender !== 1) {
136 |             this.sex = '女'
137 |         } else if (this.gender !== 0) {
138 |             this.sex = '男'
139 |         } else {
140 |             this.sex = '保密'
141 |         }
142 |         // const res = await this.$h.get('/user/update?nickname=庚希xx')
143 | 
144 |     },
145 |     provide() {
146 |         return {
147 |             changCalendarFlag: this.changCalendarFlag,
148 |             closeCropper: this.closeCropper
149 |         }
150 |     },
151 |     mounted() {
152 |         // this.nickNameText()
153 |     },
154 |     methods: {
155 |         close() {
156 |             this.$router.go(-1)
157 |         },
158 |         // 控制日历组件的创建与销毁
159 |         changCalendarFlag() {
160 |             this.calendarFlag = !this.calendarFlag
161 |         },
162 |         // 保存签名到data中
163 |         signatureText() {
164 |             this.signature = this.$refs.textareaInput.value
165 |             this.signatureBoxFlag = false
166 |             this.modalFlag = false
167 | 
168 |         },
169 |         // 保存修改的资料
170 |         async saveRevise() {
171 |             // 获取选中的生日日期时间戳
172 |             let d = new Date(this.birthdayTimeInStore.Y, this.birthdayTimeInStore.M - 1, this.birthdayTimeInStore.D)
173 |             let timeStr = d.getTime(d)
174 |             const res = await this.$h.get('/user/update'+'?cookie='+localStorage.getItem('wyCookie')+'?gender=' + this.gender + '&signature=' + this.signature + '&city=' + this.userInfo.profile.city + '&nickname=' + this.userInfo.profile.nickname + '&birthday=' + timeStr + '&province=' + this.userInfo.profile.province)
175 |             if (res.code === 200) {
176 |                 return ElMessage({
177 |                     message: '保存成功！',
178 |                     type: 'success',
179 |                 })
180 |             } else {
181 |                 return ElMessage('保存失败！')
182 |             }
183 | 
184 |         },
185 |         // 模拟点击input
186 |         clickSvatarInput() {
187 |             this.$refs.avatarInput.click()
188 |         },
189 |         // 获取file对象
190 |         getImg(e) {
191 |             let file = e.target.files[0]
192 |             let This = this
193 |             const reader = new FileReader()
194 |             reader.readAsDataURL(file);
195 |             reader.onload = function (e) {
196 |                 This.url = 'data:image/png;base64,' + this.result.substring(this.result.indexOf(',') + 1);
197 |             }
198 |             this.cropperFlag = true
199 |             this.$refs.avatarInput.value = null
200 |         },
201 |         // 关闭图片裁剪组件
202 |         closeCropper() {
203 |             this.cropperFlag = false
204 |         },
205 |         // 
206 |         nickNameText() {
207 |             let This = this
208 |             this.$refs.nickInput.addEventListener('input', function (timer) {
209 |                 clearTimeout(This.timer)
210 |                 This.timer = setTimeout(() => {
211 |                     //输入完成之后首先判断是否合法
212 |                     if (This.$refs.nickInput.value.length < 4) {
213 |                         This.$refs.nickM.innerHTML = '昵称不能少于两个汉字或4个英文字符'
214 |                         This.nickMclass = 'errM'
215 |                         This.nickNameSucc = false
216 |                     } else {
217 |                         //合法时发送请求查看名字是否存在
218 |                         This.$h.get('/nickname/check?nickname=' + This.$refs.nickInput.value).then(res => {
219 |                             if (res.duplicated === false) {
220 |                                 This.$refs.nickM.innerHTML = '昵称可用~'
221 |                                 This.nickMclass = 'succM'
222 |                                 This.nickNameSucc = true
223 |                             } else {
224 |                                 This.$refs.nickM.innerHTML = '昵称被占用，试试其他的吧'
225 |                                 This.nickMclass = 'errM'
226 |                                 This.nickNameSucc = false
227 |                             }
228 |                         }).catch(err => {
229 |                             This.$refs.nickM.innerHTML = '昵称被占用，试试其他的吧'
230 |                             This.nickMclass = 'errM'
231 |                             This.nickNameSucc = false
232 |                         })
233 |                     }
234 |                 }, 1000)
235 |             })
236 | 
237 | 
238 |         },
239 |         // 关闭昵称修改框并保存
240 |         closeAndSaveNickname() {
241 |             this.nickNameFlag = false
242 |             this.modalFlag = false
243 |             if (this.nickNameSucc) {
244 |                 this.userInfo.profile.nickname = this.$refs.nickInput.value
245 |             }
246 |         }
247 | 
248 |     }
249 | }
250 | 
251 | </script>
252 | 
253 | <style lang='less' scoped>
254 | ::v-deep(.el-card) {
255 |     --el-card-padding: 0;
256 |     border: 0;
257 | }
258 | 
259 | // .CalendarBox {
260 | //     position: absolute;
261 | //     top: 15%;
262 | //     left:50%;
263 | //     transform: translateX(-50%);
264 | // }
265 | 
266 | .container {
267 |     position: relative;
268 |     width: 100%;
269 |     height: 100%;
270 | 
271 |     .genderChooseBox {
272 |         position: absolute;
273 |         width: 85%;
274 |         height: 15%;
275 |         background-color: #1c1c1e;
276 |         left: 50%;
277 |         top: 40%;
278 |         transform: translateX(-50%);
279 |         z-index: 999;
280 |         border-radius: 3%;
281 | 
282 |         textarea {
283 |             position: absolute;
284 |             left: 50%;
285 |             transform: translateX(-50%);
286 |             padding-top: 5px;
287 |             background-color: #1c1c1e;
288 |             width: 90%;
289 |             height: 90%;
290 |             /*别忘了文本域的box-sizing属性值是border-box;所有的边框和padding都是在你固定的宽高的基础上绘制*/
291 |             /*去除点击出现轮廓颜色*/
292 |             outline: none;
293 |             /*如果有需要，去掉右下角的可拉伸变大小的图标和功能*/
294 |             resize: none;
295 |             border: 0;
296 |             color: #e9e9e7;
297 |             font-size: 15px;
298 |             font-weight: 800;
299 |             /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/
300 |         }
301 | 
302 |         .closeDote {
303 |             position: absolute;
304 |             display: flex;
305 |             justify-content: center;
306 |             align-items: center;
307 |             border-radius: 50%;
308 |             width: 30px;
309 |             height: 30px;
310 |             left: 50%;
311 |             transform: translateX(-50%);
312 |             background-color: #999999;
313 |             margin-top: 20%;
314 |             color: #fff;
315 |         }
316 | 
317 |         .signatureClose {
318 |             margin-top: 40%;
319 |         }
320 | 
321 |         .genderItem {
322 |             box-sizing: border-box;
323 |             padding-left: 20px;
324 |             padding-top: 15px;
325 |             margin-top: 5px;
326 |             width: 100%;
327 |             height: 35%;
328 |             color: #e9e9e9;
329 |             font-weight: 500;
330 |         }
331 |     }
332 | 
333 |     .NickNameBox {
334 |         height: 12%;
335 |         padding-left: 15px;
336 | 
337 |         input {
338 |             width: 90%;
339 |             height: 60%;
340 |             outline: none;
341 |             /*如果有需要，去掉右下角的可拉伸变大小的图标和功能*/
342 |             resize: none;
343 |             border: 0;
344 |             font-size: 18px;
345 |             background-color: #1c1c1e;
346 |             color: #fff;
347 |         }
348 | 
349 |         .errM {
350 |             color: #fd3a39;
351 |             font-size: 13px;
352 |         }
353 | 
354 |         .succM {
355 |             color: #cfcfcf;
356 |             font-size: 13px;
357 |         }
358 |     }
359 | 
360 |     .modal {
361 |         position: absolute;
362 |         top: 0;
363 |         width: 100%;
364 |         height: 100%;
365 |         background-color: rgba(0, 0, 0, .4);
366 |     }
367 | }
368 | 
369 | .Top {
370 |     height: 50px;
371 |     display: flex;
372 |     align-items: center;
373 |     justify-content: space-between;
374 |     padding-left: 10px;
375 |     background-color: #2b2b2b;
376 | 
377 |     .Back {
378 |         display: flex;
379 |         align-items: center;
380 |     }
381 | 
382 |     span {
383 |         margin-left: 10px;
384 |         color: #ffffff;
385 |         font-weight: 600;
386 | 
387 |     }
388 | 
389 |     .saveRevise {
390 |         margin-right: 4.2%;
391 |         color: #ffffff;
392 |         font-size: 14px;
393 |         font-weight: 600;
394 |     }
395 | }
396 | 
397 | .saveRevise {
398 |     margin-right: 10px;
399 | }
400 | 
401 | .box-cardContainer {
402 |     margin-top: 10px;
403 |     background-color: #2b2b2b;
404 |     padding: 0 10px;
405 | 
406 |     .col {
407 |         display: flex;
408 |         justify-content: space-between;
409 |         align-items: center;
410 |         padding: 10px 10px;
411 |         border-bottom: 1px solid #373737;
412 | 
413 |         span {
414 |             margin-left: 3px;
415 |             color: #e9e9e9;
416 |             font-size: 16px;
417 |         }
418 | 
419 |         .right {
420 |             font-size: 15px;
421 |             color: #a0a0a0;
422 |         }
423 |     }
424 | }
425 | </style>
426 | 


--------------------------------------------------------------------------------
/src/components/search/search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="searchContainer">
  3 |         <el-card>
  4 |             <!-- 头部 包含返回按钮 搜索框 搜素按钮 -->
  5 |             <div class="top">
  6 |                 <div class="back" @click="goBack">
  7 |                     <el-icon :size="26" color="#f9f9f9">
  8 |                         <Back />
  9 |                     </el-icon>
 10 |                 </div>
 11 |                 <div class="mid">
 12 |                     <div class="inputLeft">
 13 |                         <el-icon :size="18" color="#777777">
 14 |                             <Search />
 15 |                         </el-icon>
 16 |                     </div>
 17 |                     <div class="inputMid">
 18 |                         <input ref="searchInput" />
 19 |                     </div>
 20 |                     <div class="inputRight"></div>
 21 |                 </div>
 22 |                 <div class="right">
 23 |                     <span @click="searchKeyword">搜索</span>
 24 |                 </div>
 25 |             </div>
 26 |             <!-- content分为初始状态 搜索建议 搜索结果展示状态 三个状态-->
 27 |             <!-- 初始状态包含历史和热搜榜 -->
 28 |             <div class="searchInit" v-if="searchContentFlag === 'init'">
 29 |                 <div class="historyBox">
 30 |                     <div class="historyBoxTop">
 31 |                         <span>历史</span>
 32 |                         <div class="deleteBtn" @click="deleteSearchArray">
 33 |                             <el-icon :size="20" color="#848484">
 34 |                                 <Delete />
 35 |                             </el-icon>
 36 |                         </div>
 37 |                     </div>
 38 |                     <div class="historyContent">
 39 |                         <div class="historyItem" v-for="(item, i) in histories" :key="i" @click="clickItem(item)">
 40 |                             {{ item }}
 41 |                         </div>
 42 |                     </div>
 43 |                 </div>
 44 |                 <div class="searchHotBox">
 45 |                     <div class="searchHotBoxTop">
 46 |                         <span>热搜榜</span>
 47 |                     </div>
 48 |                     <div class="searchHotContent" v-for="(item, i) in searchHotArray" :key="i">
 49 |                         <div class="searchHotItem" >
 50 |                             <div :class="[(i + 1) <= 3 ? 'hotIndex' : 'index']">{{ i + 1 }}</div>
 51 |                             <div class="searchcontent" @click="clickItem(item.searchWord)">{{ item.searchWord }}</div>
 52 |                         </div>
 53 |                     </div>
 54 |                 </div>
 55 |             </div>
 56 |             <!-- 搜索建议展示 -->
 57 |             <div class="searchSuggest" v-if="searchContentFlag === 'suggest'">
 58 |                 <div class="suggestItem" v-for="(item, i) in searchSuggestArray" :key="i">
 59 |                     <div class="icon">
 60 |                         <el-icon :size="16" color="#777777">
 61 |                             <Search />
 62 |                         </el-icon>
 63 |                     </div>
 64 |                     <div class="keywords" @click="clickItem(item.keyword)">
 65 |                         {{ item.keyword }}
 66 |                     </div>
 67 |                 </div>
 68 |             </div>
 69 |             <!-- 搜索结果展示 -->
 70 |             <div class="searchResult" v-if="searchContentFlag === 'result'">
 71 |                 <div class="searchResultBox">
 72 |                     <div class="resultItem" v-for="(item, i) in searchResult">
 73 |                         <div class="ItemLeft">
 74 |                             <el-avatar :size="50" :src="item[0].picUrl">
 75 | 
 76 |                             </el-avatar>
 77 |                         </div>
 78 |                         <div class="ItemRight">
 79 |                             <!-- <div class="order">{{}}</div> -->
 80 |                             <div class="name">{{ item[0].name }}</div>
 81 |                         </div>
 82 |                     </div>
 83 |                 </div>
 84 |             </div>
 85 |         </el-card>
 86 |     </div>
 87 | </template>
 88 | 
 89 | <script>
 90 | import { mapState, mapMutations } from 'vuex'
 91 | export default {
 92 |     name: 'search',
 93 |     data() {
 94 |         return {
 95 |             searchHotArray: [],
 96 |             searchContentFlag: 'init',
 97 |             searchSuggestArray: [],
 98 |             searchResult: [],
 99 |             searchHistoryArray: []
100 |         }
101 |     },
102 |     computed: {
103 |         ...mapState('m_home', ['searchHot', 'searchHistory']),
104 |         histories() {
105 |             return [...this.searchHistoryArray].reverse()
106 |         }
107 |     },
108 |     created() {
109 |         this.searchHotArray = this.searchHot
110 |         if (this.searchHistory !== '11') {
111 |             this.searchHistoryArray = this.searchHistory
112 |         }
113 |         
114 |     },
115 |     mounted() {
116 |         this.searchInputLisenter()
117 |     },
118 |     methods: {
119 |         ...mapMutations('m_home', ['updatedSearchHistory']),
120 |         goBack() {
121 |             this.$router.go(-1)
122 |         },
123 |         // 通过input内容发送请求 获取搜索建议
124 |         getSearchSuggest(value) {
125 |             return this.$h.get('/search/suggest?keywords=' + value + '&type=mobile')
126 |         },
127 |         // 获取搜索结果
128 |         getSearchResult(value) {
129 |             return this.$h.get('/search/multimatch?keywords=' + value)
130 |         },
131 |         //按键监听函数
132 |         searchInputLisenter() {
133 |             let This = this
134 |             let timer = null
135 |             this.$refs.searchInput.addEventListener('input', function () {
136 |                 const keyWords = This.$refs.searchInput.value.replace(/\s/g, '') //去除空格
137 |                 clearTimeout(timer)
138 |                 timer = setTimeout(async () => {
139 |                     if (!keyWords) {
140 |                         return This.searchContentFlag = 'init'
141 |                     } else {
142 |                         This.searchContentFlag = 'suggest'
143 |                         This.searchSuggestArray = []
144 |                         const res = await This.getSearchSuggest(keyWords)
145 |                         This.searchSuggestArray = res.result.allMatch
146 |                     }
147 |                 }, 400)
148 |             })
149 |         },
150 |         //点击搜索按钮
151 |         async searchKeyword() {
152 |             const keyword = this.$refs.searchInput.value.replace(/\s/g, '')
153 |             if (!keyword) {
154 |                 return
155 |             } else {
156 |                 this.searchContentFlag = 'result'
157 |                 this.searchResult = []
158 |                 this.savaSearchHistory(keyword)
159 |                 const { result: res } = await this.getSearchResult(keyword)
160 |                 Object.keys(res).forEach(v => {
161 |                     let o = {}
162 |                     o[v] = res[v]
163 |                     this.searchResult.push(o[v])
164 |                 })
165 |                 (this.searchResult);
166 |                 this.searchResult.pop()
167 |             }
168 |         },
169 |         // 保存搜索历史
170 |         savaSearchHistory(keyword) {
171 |             // this.searchHistoryArray.push(keyword)
172 |             const set = new Set(this.searchHistoryArray)
173 |             set.delete(keyword)
174 |             set.add(keyword)
175 |             this.searchHistoryArray = Array.from(set)
176 |             this.updatedSearchHistory(this.searchHistoryArray)
177 |         },
178 |         // 清空搜索历史
179 |         deleteSearchArray(){
180 |             this.searchHistoryArray = []
181 |             this.updatedSearchHistory('11')
182 |         },
183 |         clickItem(key){
184 |             this.$refs.searchInput.value = key
185 |             this.searchKeyword()
186 |         }
187 | 
188 | 
189 |     },
190 | }
191 | 
192 | </script>
193 | 
194 | <style lang='less' scoped>
195 | ::v-deep(.el-card) {
196 |     --el-card-padding: 0;
197 |     --el-card-border-color: 0;
198 |     background-color: #141414;
199 |     height: 100%;
200 | }
201 | 
202 | .searchContainer {
203 |     .top {
204 |         display: flex;
205 |         justify-content: center;
206 |         align-items: center;
207 |         padding: 12px 0;
208 |         background-color: #2c2c2c;
209 | 
210 |         .back {
211 |             display: flex;
212 |             justify-content: center;
213 |             align-items: center;
214 |             width: 13%;
215 |         }
216 | 
217 |         .mid {
218 |             position: relative;
219 |             height: 35px;
220 |             width: 74%;
221 |             // background-color: #3d3d3d;
222 | 
223 |             .inputLeft {
224 |                 display: flex;
225 |                 justify-content: center;
226 |                 align-items: center;
227 |                 position: absolute;
228 |                 height: 35px;
229 |                 width: 35px;
230 |                 border-radius: 50%;
231 |                 background-color: #3d3d3d;
232 |             }
233 | 
234 |             .inputMid {
235 |                 display: flex;
236 |                 justify-content: center;
237 |                 align-items: center;
238 |                 width: 237px;
239 |                 margin-left: 20px;
240 |                 height: 35px;
241 |                 z-index: 999;
242 |                 background-color: #3d3d3d;
243 | 
244 |                 input {
245 |                     color: #c4c4c4;
246 |                     font-size: 15px;
247 |                     background: #3d3d3d;
248 |                     outline: none;
249 |                     border: 0px;
250 |                     height: 60%;
251 |                 }
252 |             }
253 | 
254 |             .inputRight {
255 |                 position: absolute;
256 |                 top: 0;
257 |                 right: 0;
258 |                 height: 35px;
259 |                 width: 35px;
260 |                 border-radius: 50%;
261 |                 background-color: #3d3d3d;
262 |             }
263 |         }
264 | 
265 |         .right {
266 |             display: flex;
267 |             justify-content: center;
268 |             align-items: center;
269 |             width: 13%;
270 |             color: #fdfdfd;
271 |             font-weight: 600;
272 |         }
273 |     }
274 | 
275 |     .searchInit {
276 |         .historyBox {
277 |             padding: 5px 10px;
278 | 
279 |             .historyBoxTop {
280 |                 display: flex;
281 |                 justify-content: space-between;
282 | 
283 |                 span {
284 |                     color: #ebebed;
285 |                     font-size: 14px;
286 |                     font-weight: 600;
287 |                 }
288 |             }
289 | 
290 |             .historyContent {
291 |                 // display: grid;
292 |                 margin-top: 5px;
293 |                 display: flex;
294 |                 flex-wrap: wrap;
295 | 
296 |                 .historyItem {
297 |                     display: flex;
298 |                     justify-content: center;
299 |                     align-items: center;
300 |                     margin-bottom: 15px;
301 |                     margin-right: 15px;
302 |                     padding: 3px 5px;
303 |                     width: fit-content;
304 |                     background-color: #2d2d2d;
305 |                     color: #b8b8b8;
306 |                     border-radius: 20%;
307 |                 }
308 |             }
309 | 
310 |         }
311 |     }
312 | 
313 |     .searchSuggest {
314 |         .suggestItem {
315 |             display: flex;
316 |             height: 30px;
317 |             align-items: center;
318 |             padding: 8px 0;
319 | 
320 |             .icon {
321 |                 display: flex;
322 |                 justify-content: center;
323 |                 align-items: center;
324 |                 width: 10%
325 |             }
326 | 
327 |             .keywords {
328 |                 line-height: 30px;
329 |                 width: 90%;
330 |                 border-bottom: 1px solid #202020;
331 |                 color: #ececec;
332 |             }
333 | 
334 |         }
335 |     }
336 | 
337 |     .searchResult {
338 |         .searchResultBox {
339 |             margin-top: 10px;
340 |             position: absolute;
341 |             left: 50%;
342 |             transform: translateX(-50%);
343 |             width: 90%;
344 |             background-color: #2b2b2b;
345 |             border-radius: 3%;
346 | 
347 |             .resultItem {
348 |                 padding: 7px;
349 |                 display: flex;
350 |                 align-items: center;
351 | 
352 |                 .ItemRight {
353 |                     margin-left: 20px;
354 |                     display: flex;
355 |                     align-items: center;
356 |                     color: #eeecef;
357 | 
358 |                     .name {
359 |                         margin-left: 8px;
360 |                     }
361 |                 }
362 |             }
363 | 
364 |         }
365 |     }
366 | 
367 |     .searchHotBox {
368 |         position: absolute;
369 |         left: 50%;
370 |         transform: translateX(-50%);
371 |         width: 70%;
372 |         color: #e8e8e8;
373 |         background-color: #2c2c2c;
374 |         font-weight: 600;
375 |         border-radius: 5%;
376 |         padding: 15px;
377 |         margin-top: 10px;
378 | 
379 |         .searchHotBoxTop {
380 |             border-bottom: 1px solid #333333;
381 |             padding-bottom: 10px;
382 |         }
383 | 
384 |         .searchHotContent {
385 |             .searchHotItem {
386 |                 display: flex;
387 |                 align-items: center;
388 |                 font-size: 14px;
389 |                 margin-top: 8px;
390 | 
391 |                 .index {
392 |                     width: 18px;
393 |                     display: flex;
394 |                     justify-content: center;
395 |                     align-items: center;
396 |                     color: #b6b6b6;
397 |                 }
398 | 
399 |                 .searchcontent {
400 | 
401 |                     margin-left: 8px;
402 | 
403 |                 }
404 | 
405 |                 .hotIndex {
406 |                     display: flex;
407 |                     justify-content: center;
408 |                     align-items: center;
409 |                     width: 18px;
410 |                     color: #e04651;
411 |                 }
412 |             }
413 | 
414 |         }
415 |     }
416 | }
417 | </style>
418 | 


--------------------------------------------------------------------------------
/src/components/songListPage/songListPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="songListPageContainer" ref="songListPageContainer">
  3 |     <!-- 数据加载完成时 -->
  4 |     <div v-if="getOver">
  5 |       <el-card class="List">
  6 |         <div class="topBackImg">
  7 |           <img class="backimg" :src="SongListDetail.coverImgUrl" alt="" />
  8 |         </div>
  9 |         <!-- 顶部的歌单信息 -->
 10 |         <div class="TopBox">
 11 |           <div class="nav">
 12 |             <div class="goBack" @click="goBack">
 13 |               <el-icon :size="22" color="#f2eeeb">
 14 |                 <Back />
 15 |               </el-icon>
 16 |               <div>歌单</div>
 17 |             </div>
 18 |           </div>
 19 |           <div class="content">
 20 |             <img class="cover" :src="SongListDetail.coverImgUrl" />
 21 |             <div class="right">
 22 |               <div class="title">{{SongListDetail.name}}</div>
 23 |               <div class="author" @click="gotoMyInfo">
 24 |                 <el-avatar :size="28" :src="author?.profile?.avatarUrl" />
 25 |                 <span>{{author?.profile?.nickname}}</span>
 26 |               </div>
 27 |               <div class="describe">{{SongListDetail.description}}</div>
 28 |             </div>
 29 |           </div>
 30 |         </div>
 31 | 
 32 |       </el-card>
 33 |       <!-- 歌曲项 -->
 34 |       <el-card class="box-card songItems">
 35 |         <div class="songItem" v-for="(item,i) in song" :key="i" @click="play(item)">
 36 |           <div class="index">{{i+1}}</div>
 37 |           <div class="songFrom">
 38 |             <div class="songName">{{item.name}}</div>
 39 |             <div class="songAuthor">{{item.ar[0].name}}</div>
 40 |           </div>
 41 |         </div>
 42 |       </el-card>
 43 |     </div>
 44 |     <!-- 数据未完成加载时 -->
 45 |     <el-card class="loadingbox" v-else>
 46 |       <div class="loading"></div>
 47 |       <div class="text">加载中....</div>
 48 |     </el-card>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | import { mapState, mapMutations } from 'vuex'
 54 | import { ElMessage } from 'element-plus'
 55 | import mixinItem from '../../mixins/mixin.js'
 56 | export default {
 57 |   name: 'soangListPage',
 58 |   mixins: [mixinItem],
 59 |   inject: ['playMusictoApp'],
 60 |   computed: {
 61 |     ...mapState('t_play', ['TsongBigListStore', 'TListLengthStore', 'TListNowStore'])
 62 |   },
 63 |   data() {
 64 |     return {
 65 |       ListId: 0,
 66 |       Listlength: 0,
 67 |       song: [],
 68 |       SongListDetail: {},
 69 |       getOver: false,
 70 |       author: {},
 71 |       getNext: true,  //记录是否可以进行下一次歌曲获取
 72 |       ListNow: 20  //记录已获取列表歌曲数量
 73 |     }
 74 |   },
 75 |   async created() {
 76 |     this.ListId = this.$route.query.id;
 77 |     if (this.TsongBigListStore[0] === '01' || this.TsongBigListStore[0] !== this.ListId) {
 78 |       this.updateTsongBigListStore(['01'])
 79 |       this.TsongBigListStore[0] = this.ListId
 80 |       // 获取长度
 81 |       await this.getSongList(this.ListId)
 82 |       this.pushToStore()
 83 |     } else {
 84 |       this.ListId = this.TsongBigListStore[0]
 85 |       this.song = this.TsongBigListStore[1]
 86 |       this.SongListDetail = this.TsongBigListStore[2]
 87 |       this.author = this.TsongBigListStore[3]
 88 |       this.getOver = true
 89 |       this.Listlength = this.TListLengthStore
 90 |       this.ListNow = this.TListNowStore
 91 |     }
 92 |   },
 93 |   mounted() {
 94 |     this.upFresh()
 95 |   },
 96 |   methods: {
 97 |     ...mapMutations('t_play', ['updateTsongBigListStore', 'updateTListNowStore', 'updatedTListLengthStore']),
 98 |     // 获取歌单长度
 99 |     async getSongList(id) {
100 |       const { songs: res } = await this.$h.get('/playlist/track/all?id=' + id)
101 |       this.Listlength = res.length
102 |       // 得到长度后,获取歌曲
103 |       await this.getSong(id, this.Listlength)
104 |       // 获取详情
105 |       await this.getSongListDetail(id)
106 |     },
107 |     // 获取歌单内的歌曲
108 |     async getSong(id, length) {
109 |       // this.updateTsongBigListStore([])//清空上一条的数据
110 |       for (let i = 0; i < 10; i += 10) {
111 |         if (i >= length) {
112 |           return
113 |         }
114 |         const { songs: res } = await this.$h.get('/playlist/track/all?id=' + id + '&limit=10&offset=' + i)
115 |         this.song = [...this.song, ...res]
116 |       }
117 |       // 当歌曲获取完毕后，getOver设为true
118 |       this.getOver = true
119 | 
120 |     },
121 |     // 获取歌单详情
122 |     async getSongListDetail(id) {
123 |       const { playlist: res } = await this.$h.get('/playlist/detail?id=' + id)
124 |       this.SongListDetail = res
125 |       this.author = await this.getUserInfo(this.SongListDetail.userId)
126 |       
127 |     },
128 | 
129 |     // 播放歌曲
130 |     async play(item) {
131 |       const res = await this.getMusicUrl(item.id)
132 |       if (res === 'urlNull') {
133 |         return ElMessage({
134 |           showClose: false,
135 |           center: true,
136 |           message: '歌曲暂时无法播放.',
137 |           type: 'error',
138 |         })
139 |       }
140 |       this.playMusictoApp(res.data[0].url, item.al.picUrl, item.name, item.id)
141 |     },
142 |     // 返回上一页
143 |     goBack() {
144 |       this.pushToStore()
145 |       this.$router.go(-1)
146 |     },
147 |     // 歌单缓存
148 |     pushToStore() {
149 |       this.TsongBigListStore.push(this.song)
150 |       this.TsongBigListStore.push(this.SongListDetail)
151 |       this.TsongBigListStore.push(this.author)
152 |       this.updateTsongBigListStore(this.TsongBigListStore)
153 |       this.updateTListNowStore(this.ListNow)
154 |       this.updatedTListLengthStore(this.Listlength)
155 | 
156 |     },
157 |     // 上拉加载歌曲
158 |     upFresh() {
159 |       let This = this
160 |       this.$refs.songListPageContainer.addEventListener('touchstart', async function (e) {
161 |         let clientHeight = document.documentElement.clientHeight; //浏览器高度
162 |         let scrollHeight = document.body.scrollHeight;
163 |         let scrollTop = document.documentElement.scrollTop;
164 |         let distance = 20  //距离可视窗口多高时发起请求
165 |         // 已经触底 发起请求
166 |         if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
167 | 
168 |           if (This.getNext && This.ListNow < This.Listlength) {
169 |             This.getNext = false
170 |             const { songs: res } = await This.$h.get('/playlist/track/all?id=' + This.ListId + '&limit=10&offset=' + This.ListNow)
171 |             This.song = Array.from(new Set([...This.song, ...res]))
172 |             This.ListNow += 10
173 |             This.getNext = true
174 |           } else {
175 |             (111);
176 |             return
177 |           }
178 |         }
179 |       }, false)
180 |     },
181 | 
182 |   }
183 | 
184 | }
185 | 
186 | </script>
187 | 
188 | <style lang='less' scoped>
189 | ::v-deep(.el-card) {
190 |   --el-card-padding: 0;
191 | }
192 | .songListPageContainer{
193 |   width: 100%;
194 | }
195 | .List {
196 |   background: #151515;
197 |   border-radius: 0;
198 |   // margin: 0;
199 |   // padding: 0 !import;
200 | 
201 |   .topBackImg {
202 |     width: 100%;
203 |     height: 200px;
204 |   }
205 | 
206 |   .TopBox {
207 |     width: 100%;
208 |     height: 200px;
209 |     position: absolute;
210 |     top: 0;
211 | 
212 |     // background:red;
213 |     .nav {
214 |       height: 30px;
215 |       width: 100%;
216 |       padding: 3px;
217 |       margin-top: 10px;
218 | 
219 |       .goBack {
220 |         display: flex;
221 |         font-size: 15px;
222 |         font-weight: 700;
223 |         color: #f2eeeb;
224 | 
225 |         div {
226 |           margin-left: 6px;
227 |         }
228 |       }
229 |     }
230 | 
231 |     .content {
232 |       display: flex;
233 |       padding-left: 20px;
234 |       margin-top: 20px;
235 | 
236 |       .cover {
237 |         width: 100px;
238 |         height: 100px;
239 |         border-radius: 5%;
240 |       }
241 | 
242 |       .right {
243 |         display: flex;
244 |         flex-direction: column;
245 |         justify-content: space-around;
246 |         margin-left: 10px;
247 | 
248 |         .author {
249 |           display: flex;
250 |           margin-top: 5px;
251 |           align-items: center;
252 | 
253 |           span {
254 |             font-size: 13px;
255 |             font-weight: 600;
256 |             margin-left: 5px;
257 |             color: #f2eeeb;
258 |           }
259 | 
260 |         }
261 | 
262 |         .title {
263 |           margin-left: 5px;
264 |           width: 200px;
265 |           color: #f2eeeb;
266 |           font-weight: 500;
267 | 
268 |         }
269 | 
270 |         .describe {
271 |           margin-left: 5px;
272 |           margin-top: 5px;
273 |           font-size: 13px;
274 |           font-weight: 800;
275 |           color: rgba(0, 0, 0, 0.6);
276 |           // height: 16px;
277 |           width: 200px;
278 |           overflow: hidden;
279 |           /*文本不会换行*/
280 |           white-space: nowrap;
281 |           /*当文本溢出包含元素时，以省略号表示超出的文本*/
282 |           text-overflow: ellipsis;
283 |         }
284 |       }
285 | 
286 | 
287 |     }
288 |   }
289 | 
290 |   .backimg {
291 |     width: 100%;
292 |     height: 100%;
293 |     filter: blur(50px);
294 |     transform: scale(3);
295 |   }
296 | 
297 | 
298 | }
299 | 
300 | .songItems {
301 |   margin-top: -2px;
302 |   background: #151515;
303 |   border-radius: 0;
304 | 
305 |   .songItem {
306 |     width: 95%;
307 |     height: 50px;
308 |     background: #151515;
309 |     display: flex;
310 |     align-items: center;
311 |     padding-left: 15px;
312 | 
313 |     .index {
314 |       color: #949494;
315 |       font-size: 16px;
316 |     }
317 | 
318 |     .songFrom {
319 |       display: flex;
320 |       flex-direction: column;
321 |       justify-content: center;
322 |       margin-left: 15px;
323 | 
324 |       .songName {
325 |         width: 200px;
326 |         overflow: hidden;
327 |         /*文本不会换行*/
328 |         white-space: nowrap;
329 |         /*当文本溢出包含元素时，以省略号表示超出的文本*/
330 |         text-overflow: ellipsis;
331 |         color: #e8e8e8;
332 |         font-size: 14px;
333 |         font-weight: 400;
334 |       }
335 | 
336 |       .songAuthor {
337 |         color: #acacac;
338 |         font-size: 13px;
339 |       }
340 |     }
341 |   }
342 | }
343 | 
344 | .loadingbox {
345 |   width: 100%;
346 |   display: flex;
347 |   padding-top: 100px;
348 |   height: 900px;
349 |   background: #151515;
350 |   justify-content: center;
351 | 
352 |   .text {
353 |     margin-top: 10px;
354 |     font-weight: 800;
355 |     color: #e8e8e8;
356 |     font-size: 15px;
357 |   }
358 | 
359 |   .loading {
360 |     width: 40px;
361 |     height: 40px;
362 |     border: 2px solid #e63434;
363 |     border-top-color: transparent;
364 |     border-radius: 100%;
365 |     animation: circle infinite 0.75s linear;
366 |   }
367 | 
368 |   // 转转转动画
369 |   @keyframes circle {
370 |     0% {
371 |       transform: rotate(0);
372 |     }
373 | 
374 |     100% {
375 |       transform: rotate(360deg);
376 |     }
377 |   }
378 | 
379 | }
380 | </style>
381 | 


--------------------------------------------------------------------------------
/src/components/songPage/songPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container" :style="{ '--height': '100%' }">
  3 |         <el-card class="box-card content" v-if="song">
  4 |             <div class="background">
  5 |                 <img :src="song.al.picUrl" />
  6 |             </div>
  7 |             <div class="top">
  8 |                 <div class="close" @click="closed">
  9 |                     <el-icon :size="20">
 10 |                         <ArrowLeft />
 11 |                     </el-icon>
 12 |                 </div>
 13 |                 <div class="title">
 14 |                     <div class="name" @click="wait = !wait">{{ song.name }}</div>
 15 |                     <div class="author">{{ song.ar[0].name }}</div>
 16 |                 </div>
 17 |                 <div class="share" @click="gotoComment">
 18 |                     <el-icon :size="20">
 19 |                         <ChatDotRound />
 20 |                     </el-icon>
 21 |                 </div>
 22 |             </div>
 23 |             <div class="coverAndWord">
 24 | 
 25 |                 <div :class="['cover', coverOrlyric === false ? 'dis' : '']" @click="ChangecoverOrlyric">
 26 |                     <img src="../../assets/img/playDefaultPic.png" />
 27 |                     <div class="pic" :class="[playIt ? 'active' : '']">
 28 |                         <img :src="song.al.picUrl" />
 29 |                     </div>
 30 |                 </div>
 31 |                 <div :class="['Word cover', coverOrlyric === true ? 'dis' : '']" @click="ChangecoverOrlyric">
 32 |                     <div class="wordBox">
 33 |                         <div class="wordContent" ref="wordContentMove" :style="lyricMove">
 34 |                             <div ref="item" :class="['wordItem', currentRow === i ? 'current' : '']" v-for="(item, i) in lyric"
 35 |                                 :key="i">
 36 |                                 {{ item.text }}
 37 |                             </div>
 38 |                         </div>
 39 |                     </div>
 40 |                 </div>
 41 |             </div>
 42 |             <div class="bottom">
 43 |                 <div class="left" @click="changeTheMusic('pre')">
 44 |                     <el-icon :size="20" color="#dfd6d6">
 45 |                         <ArrowLeftBold />
 46 |                     </el-icon>
 47 |                 </div>
 48 |                 <div class="play" @click="playMusic">
 49 |                     <el-icon :size="50" color="#dfd6d6" v-if="playIt">
 50 |                         <VideoPause />
 51 |                     </el-icon>
 52 |                     <el-icon :size="50" color="#dfd6d6" v-else>
 53 |                         <VideoPlay />
 54 |                     </el-icon>
 55 |                 </div>
 56 |                 <div class="right" @click="changeTheMusic('next')">
 57 |                     <el-icon :size="20" color="#dfd6d6">
 58 |                         <ArrowRightBold/>
 59 |                     </el-icon>
 60 |                 </div>
 61 |             </div>
 62 |             <div class="downSong" @click="downSong">
 63 |                 <el-icon :size="20" color="#dfd6d6">
 64 |                     <Download />
 65 |                 </el-icon>
 66 |             </div>
 67 |         </el-card>
 68 |     </div>
 69 | 
 70 | </template>
 71 | 
 72 | <script>
 73 | import { reactive } from 'vue'
 74 | import { mapState, mapMutations } from 'vuex'
 75 | import mixinItem from '../../mixins/mixin.js'
 76 | import { useRoute } from "vue-router";
 77 | export default {
 78 |     name: 'SongPage',
 79 |     setup() {
 80 |         const lyric = reactive([]);
 81 |         return {
 82 |             lyric
 83 |         }
 84 |     },
 85 |     mixins: [mixinItem],
 86 |     inject: ['showPlaytoApp', 'changeMusicStoApp', 'playContainertoApp'],
 87 |     data() {
 88 |         return {
 89 |             songId: 0,
 90 |             song: {},
 91 |             fromPath: '11',
 92 |             prePath: '',
 93 |             word: '',
 94 |             // lyric: [],
 95 |             lyricMove: {
 96 |                 top: window.innerHeight * 0.23 + 'px'
 97 |             },
 98 |             currentRow: 0,
 99 |             coverOrlyric: true,
100 |         }
101 |     },
102 |     watch: {
103 |         changeMusic(newV, oldV) {
104 |             if (newV !== 'next' || newV !== 'pre') {
105 |                 this.song = this.songStore
106 |                 // 10.23晚处理
107 |                 this.songId = this.song.id
108 |             }
109 |         },
110 |         TlyricTime(newV, oldV) {
111 |             this.lyric.forEach((element, index) => {
112 |                 if (this.TlyricTime === element.time) {
113 |                     let h = window.innerHeight * 0.23
114 |                     h += -index * 39
115 |                     this.lyricMove.top = h + 'px'
116 |                     this.currentRow = index
117 |                 }
118 |             });
119 |         }
120 |     },
121 |     beforeRouteUpdate(to, from) {
122 |         this.prePath = '777'
123 |     },
124 |     computed: {
125 |         ...mapState('m_play', ['showPlay', 'playIt', 'changeMusic', 'songStore', 'songListStore']),
126 |         ...mapState('t_play', ['TsongListStore', 'TsongPageIdStore', 'TlyricTime','downloadFlag'])
127 | 
128 |     },
129 |     async created() {
130 |         let flagToGet = true
131 |         if (this.TsongPageIdStore == '11' || this.$route.query.id != this.TsongPageIdStore) {
132 |             this.songId = this.$route.query.id
133 |         }
134 |         else {
135 |             this.songId = this.TsongPageIdStore
136 | 
137 |         }
138 |         for (let i = 0; i < this.TsongListStore.length; i++) {
139 |             if (this.TsongListStore[i].id == this.songId) {
140 |                 this.song = this.TsongListStore[i]
141 |                 this.word = this.song.word
142 |                 flagToGet = false
143 |                 break;
144 |             }
145 |         }
146 |         if (flagToGet) {
147 |             const res = await this.getMusicDetail(this.songId)  //获取歌曲信息
148 |             this.word = (await this.getWord(this.songId)).lyric
149 |             this.song = res.songs[0]
150 |             this.song.word = this.word
151 |             this.TsongListStore.push(this.song)
152 | 
153 |         }
154 |         this.updateShowPlay()
155 |         this.wordHandle()
156 |     },
157 |     methods: {
158 |         ...mapMutations('m_play', ['updateShowPlay', 'updateplayIt', 'updateChangeMusic', 'playTotrue']),
159 |         ...mapMutations('t_play', ['updateTsongPageIdStore','updatedDownloadFlag']),
160 |         // 关闭SongPage
161 |         closed() {
162 |             this.showPlaytoApp()
163 |             this.updateTsongPageIdStore(this.songId)
164 |             this.$router.go(-1)
165 |         },
166 |         // 暂停或播放音乐
167 |         playMusic() {
168 |             this.playContainertoApp()
169 |         },
170 |         // 切换音乐
171 |         async changeTheMusic(direction) {
172 |             this.lyric = []
173 |             this.updateTsongPageIdStore(this.songId)
174 |             this.updateChangeMusic(direction)
175 |             this.playTotrue()
176 |             // this.wait = true;
177 |             const res = await this.changeMusicStoApp()
178 |             if (typeof res == 'object') {
179 |                 this.song = res[0]
180 |                 // 说明当前歌曲无缓存 需要获取新的歌词
181 |                 this.word = this.song.word
182 |                 this.wordHandle()
183 |             } else {
184 |                 this.song = this.TsongListStore[res]
185 |                 this.word = this.song.word
186 |                 this.wordHandle()
187 |                 this.songId = this.song.id
188 |                 this.updateTsongPageIdStore(this.songId)
189 |             }
190 |         },
191 |         gotoComment() {
192 |             this.$router.push({
193 |                 path: '/comment',
194 |                 query: {
195 |                     id: 'sid' + this.songId,
196 |                 }
197 |             })
198 | 
199 |         },
200 |         // 获取歌词
201 |         async getWord(id) {
202 |             const res = await this.$h.get('/lyric?id=' + id)
203 |             return res.lrc
204 |         },
205 |         // 歌词处理
206 |         wordHandle() {
207 |             //先通过“\n”将每行歌词存入数组之中
208 |             let arr = this.word.split('\n')
209 |             for (let i = 0; i < arr.length; i++) {
210 |                 let lyricRow = {}   //将每行歌词及其出现的时间视为一个对象
211 |                 let row = arr[i].split(']')     //文本切割
212 |                 let text = row[1]   //拿到当前行的真正的歌词
213 |                 let time_arr = row[0].substr(1, row[0].length - 1).split(":")   //将[01:13]秒转为["01","13"]用于先处理
214 |                 let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1])   //将时间统一转为秒
215 |                 lyricRow.time = s   //向对象存入数据
216 |                 lyricRow.text = text
217 |                 // push进lyryc数组
218 |                 this.lyric.push(lyricRow)
219 |             }
220 |         },
221 |         // 处理显示歌词还是封面
222 |         ChangecoverOrlyric() {
223 |             this.coverOrlyric = !this.coverOrlyric
224 |         },
225 |         // 下载歌曲
226 |         downSong(){
227 |             this.updatedDownloadFlag('start')
228 |         }
229 | 
230 |     },
231 | 
232 | }
233 | 
234 | </script>
235 | 
236 | <style lang='less' scoped>
237 | @keyframes musicRotate {
238 |     from {
239 |         transform: rotate(0);
240 |     }
241 | 
242 |     to {
243 |         transform: rotate(360deg);
244 |     }
245 | }
246 | 
247 | ::v-deep(.el-card) {
248 |     --el-card-padding: 0;
249 | }
250 | 
251 | .container {
252 |     height: 100%;
253 | 
254 |     // overflow:hidden;
255 |     .content {
256 |         height: 100%;
257 |     }
258 | 
259 |     .background {
260 |         img {
261 |             // width:100%;
262 |             height: 150%;
263 |             filter: blur(50px);
264 |             transform: scale(3);
265 |         }
266 |     }
267 | 
268 |     .top {
269 |         // border-box: box-sizing;
270 |         display: flex;
271 |         justify-content: space-between;
272 |         align-items: center;
273 |         position: absolute;
274 |         top: 0;
275 |         height: 50px;
276 |         width: 100%;
277 |         color: #f2eeec;
278 | 
279 |         // background: red;
280 |         .share {
281 |             margin-right: 5px;
282 |         }
283 | 
284 |         .close {
285 |             margin-left: 5px;
286 |         }
287 | 
288 |         .title {
289 |             display: flex;
290 |             flex-direction: column;
291 |             align-items: center;
292 | 
293 |             .name {
294 |                 font-weight: 600;
295 |             }
296 | 
297 |             .author {
298 |                 color: #d0bdbe;
299 |                 font-size: 13px;
300 |             }
301 |         }
302 |     }
303 | 
304 |     .cover {
305 |         height: 265px;
306 |         width: 265px;
307 |         position: absolute;
308 |         border-radius: 50%;
309 |         top: 100px;
310 |         left: 50%;
311 |         transform: translateX(-50%);
312 | 
313 | 
314 |         img {
315 |             height: 265px;
316 |             width: 265px;
317 | 
318 |         }
319 | 
320 |         .active {
321 |             animation: musicRotate 10s linear infinite;
322 |             animation-play-state: running;
323 |         }
324 | 
325 |         .pic {
326 |             display: flex;
327 |             justify-content: center;
328 |             margin-top: -216px;
329 | 
330 |             img {
331 |                 width: 160px;
332 |                 height: 160px;
333 |                 border-radius: 50%;
334 |             }
335 |         }
336 |     }
337 | 
338 |     .Word {
339 |         height: 50%;
340 |         width: 300px;
341 | 
342 |         .wordBox {
343 |             width: 100%;
344 |             height: 100%;
345 |             // border: 1px solid red;
346 |             position: relative;
347 |             overflow: hidden;
348 | 
349 |             .wordContent {
350 |                 top: 100px;
351 |                 display: flex;
352 |                 flex-direction: column;
353 |                 align-items: center;
354 |                 width: 90%;
355 |                 // border: 1px solid blue;
356 |                 position: absolute;
357 |                 left: 50%;
358 |                 transform: translateX(-50%);
359 |                 transition: all .3s;
360 | 
361 |                 .wordItem {
362 |                     margin-top: 20px;
363 |                     font-size: 14px;
364 |                     /*将对象作为弹性伸缩盒子模型显示*/
365 |                     display: -webkit-box;
366 |                     /*设置子元素排列方式*/
367 |                     -webkit-box-orient: vertical;
368 |                     /*设置显示的行数，多出的部分会显示为...*/
369 |                     -webkit-line-clamp: 1;
370 |                 }
371 | 
372 |                 .current {
373 |                     color: #eff1f2;
374 |                     font-size: 16px;
375 |                 }
376 |             }
377 |         }
378 |     }
379 | 
380 | 
381 |     .bottom {
382 |         display: flex;
383 |         justify-content: space-around;
384 |         align-items: center;
385 |         position: absolute;
386 |         bottom: 30px;
387 |         width: 275px;
388 |         height: 65px;
389 |         // background:red;
390 |         left: 50%;
391 |         transform: translateX(-50%);
392 |     }
393 | 
394 |     .dis {
395 |         display: none;
396 | 
397 |     }
398 | }
399 | .downSong{
400 |     position: absolute;
401 |     top: 13px;
402 |     right:10%
403 | }
404 | </style>
405 | 


--------------------------------------------------------------------------------
/src/components/songlist/songlist.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="songlistContainer">
 3 |         <div class="songImg">
 4 |             <img :src="songImg" />
 5 |         </div>
 6 |         <div class="from">
 7 |             <span style="color:#eaeaea;" class="title">{{ title }}</span>
 8 |             <span class="count">{{ count }}首</span>
 9 |         </div>
10 | 
11 |     </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |     name: 'Songlist',
17 |     props: {
18 |         songImg: String,
19 |         title: String,
20 |         count: Number
21 |     }
22 | }
23 | 
24 | </script>
25 | 
26 | <style lang='less' scoped>
27 | .songlistContainer {
28 |     display: flex;
29 |     align-items: center;
30 |     padding-left: 10px;
31 |     background: #2c2c2c;
32 |     width: 300px;
33 |     height: 60px;
34 | 
35 |     .songImg img {
36 |         width: 50px;
37 |         height: 50px;
38 |         border-radius: 10%;
39 |     }
40 | 
41 |     .from {
42 |         margin-left: 10px;
43 |         display: flex;
44 |         flex-direction: column;
45 | 
46 |         .title {
47 |             font-size: 15px;
48 |             font-weight: 600;
49 |         }
50 | 
51 |         .count {
52 |             font-size: 12px;
53 |             color: #9f9f9f;
54 |         }
55 |     }
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/components/tababr/tabbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="tabbar">
  3 |     <div class="home">
  4 |       <div class="home-item home" @click="TabbarChange(1)">
  5 |         <div class="ActiveHome" v-if="pageNum==1">
  6 |           <div class="ActiveHome-item">
  7 |             <div class="back">
  8 |               <el-icon color="#fff" :size="24">
  9 |                 <Headset />
 10 |               </el-icon>
 11 |             </div>
 12 |             <p style="fontSize:12px;color:#fff;margin-top:5px;">首页</p>
 13 |           </div>
 14 |         </div>
 15 |         <div class="noActiveHome" v-else>
 16 |           <div class="noActive-item">
 17 |             <div class="no-back">
 18 |               <el-icon color="#747378" :size="24">
 19 |                 <Headset />
 20 |               </el-icon>
 21 |             </div>
 22 |             <p style="fontSize:12px;color:#747378;margin-top:5px;">首页</p>
 23 |           </div>
 24 |         </div>
 25 |       </div>
 26 |       <div class="home-item my" @click="TabbarChange(2)">
 27 |         <div class="ActiveHome" v-if="pageNum==2">
 28 |           <div class="ActiveHome-item">
 29 |             <div class="back">
 30 |               <el-icon color="#fff" :size="24">
 31 |                 <User />
 32 |               </el-icon>
 33 |             </div>
 34 |             <p style="fontSize:12px;color:#fff;margin-top:5px;">我的</p>
 35 |           </div>
 36 |         </div>
 37 |         <div class="noActiveHome" v-else>
 38 |           <div class="noActive-item">
 39 |             <div class="no-back">
 40 |               <el-icon color="#747378" :size="24">
 41 |                 <User />
 42 |               </el-icon>
 43 |             </div>
 44 |             <p style="fontSize:12px;color:#747378;margin-top:5px;">我的</p>
 45 |           </div>
 46 |         </div>
 47 |       </div>
 48 |       <div class="home-item play" @click="TabbarChange(3)">
 49 |         <div class="ActiveHome" v-if="pageNum==3">
 50 |           <div class="ActiveHome-item">
 51 |             <div class="back">
 52 |               <el-icon color="#fff" :size="24">
 53 |                 <MostlyCloudy />
 54 |               </el-icon>
 55 |             </div>
 56 |             <p style="fontSize:12px;color:#fff;margin-top:5px;">云盘</p>
 57 |           </div>
 58 |         </div>
 59 |         <div class="noActiveHome" v-else>
 60 |           <div class="noActive-item">
 61 |             <div class="no-back">
 62 |               <el-icon color="#747378" :size="24">
 63 |                 <MostlyCloudy />
 64 |               </el-icon>
 65 |             </div>
 66 |             <p style="fontSize:12px;color:#747378;margin-top:5px;">云盘</p>
 67 |           </div>
 68 |         </div>
 69 |       </div>
 70 |       <div class="home-item commune" @click="TabbarChange(4)">
 71 |         <div class="ActiveHome" v-if="pageNum==4">
 72 |           <div class="ActiveHome-item">
 73 |             <div class="back">
 74 |               <el-icon color="#fff" :size="24">
 75 |                 <ChatDotRound />
 76 |               </el-icon>
 77 |             </div>
 78 |             <p style="fontSize:12px;color:#fff;margin-top:5px;">社区</p>
 79 |           </div>
 80 |         </div>
 81 |         <div class="noActiveHome" v-else>
 82 |           <div class="noActive-item">
 83 |             <div class="no-back">
 84 |               <el-icon color="#747378" :size="24">
 85 |                 <ChatDotRound />
 86 |               </el-icon>
 87 |             </div>
 88 |             <p style="fontSize:12px;color:#747378;margin-top:5px;">社区</p>
 89 |           </div>
 90 |         </div>
 91 |       </div>
 92 |     </div>
 93 |   </div>
 94 | </template>
 95 | 
 96 | <script>
 97 | export default {
 98 |   name: 'tabbar',
 99 |   props: {
100 |     pageNum: Number,
101 |   },
102 |   data() {
103 |     return {
104 | 
105 |     }
106 |   },
107 |   methods:{
108 |     TabbarChange(num){
109 |       if (num===1) {
110 |         this.$router.push('/home')
111 |       }else if(num===2){
112 |         this.$router.push('/my')
113 |       }else if(num===3){
114 |         this.$router.push('/cloudPan')
115 |       }else if(num===4){
116 |         this.$router.push('/commune')
117 |       }
118 |     
119 |     }
120 |       
121 |   }
122 | }
123 | 
124 | </script>
125 | 
126 | <style lang='less' scoped>
127 | .tabbar {
128 |   // border-top: 2px solid #252525;
129 |   position: fixed;
130 |   background: #1c1c1e;
131 |   bottom: 0;
132 |   width: 100%;
133 |   height: 60px;
134 | }
135 | 
136 | .home {
137 |   display: flex;
138 |   justify-content: space-around;
139 | 
140 |   .ActiveHome {
141 |     display: flex;
142 | 
143 |     .ActiveHome-item {
144 |       width: 25%;
145 |       padding: 5px 25px;
146 |       display: flex;
147 |       flex-direction: column;
148 |       justify-content: center;
149 |       align-items: center;
150 | 
151 |       p {
152 |         width: 24px;
153 |       }
154 | 
155 |       .back {
156 |         display: flex;
157 |         align-items: center;
158 |         justify-content: center;
159 |         width: 30px;
160 |         height: 30px;
161 |         border-radius: 50%;
162 |         background-color: red;
163 |       }
164 |     }
165 |   }
166 |   .noActiveHome {
167 |     display: flex;
168 | 
169 |     .noActive-item {
170 |       width: 25%;
171 |       padding: 5px 25px;
172 |       display: flex;
173 |       flex-direction: column;
174 |       justify-content: center;
175 |       align-items: center;
176 |   
177 |     }
178 | 
179 |     .no-back {
180 |         display: flex;
181 |         align-items: center;
182 |         justify-content: center;
183 |         width: 30px;
184 |         height: 30px;
185 |         border-radius: 50%;
186 |         background-color: #1c1c1e;
187 |       }
188 | 
189 |     p {
190 |       width: 24px;
191 | 
192 |     }
193 |   }
194 | }
195 | </style>
196 | 


--------------------------------------------------------------------------------
/src/components/video/video.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="videoContainer" ref="videoContainer">
  3 |         <video ref="videoPlay" loop="true">
  4 |             <source ref="source" :src="videoUrl" type="video/mp4" />
  5 |         </video>
  6 |         <div class="model" @click="playVideo">
  7 |             <div class="playFlagBox" v-show="!play">
  8 |                 <el-icon :size="50" color="#fff">
  9 |                     <VideoPlay />
 10 |                 </el-icon>
 11 |             </div>
 12 |         </div>
 13 |         <div class="timeBar" ref="timeBar" @click="handlerClickTimeBar">
 14 |         </div>
 15 |         <div class="timeOverBar" ref="timeOverBar" @click="handlerClickTimeBar"></div>
 16 |     </div>
 17 | </template>
 18 | 
 19 | <script>
 20 | import { mapState, mapMutations } from 'vuex'
 21 | export default {
 22 |     name: 'video',
 23 |     props: {
 24 |         videoUrl: String
 25 |     },
 26 |     watch: {
 27 |         toPlayScrollTop(newV, oldV) {
 28 |             if (this.$refs.videoContainer.offsetTop - newV < 250 && -100 < this.$refs.videoContainer.offsetTop - newV) {
 29 |                 this.$refs.videoPlay.play()
 30 |                 this.play = true
 31 |             } else {
 32 |                 this.$refs.videoPlay.pause()
 33 |                 this.play = false
 34 |             }
 35 |         }
 36 |     },
 37 |     computed: {
 38 |         ...mapState('t_video', ['toPlayScrollTop'])
 39 |     },
 40 |     data() {
 41 |         return {
 42 |             alltimer: 0,
 43 |             currentTime: 0,
 44 |             play: false,
 45 |             videoContainerScrollTop: 0
 46 |         }
 47 |     },
 48 |     mounted() {
 49 |         this.handlerTimeBar()
 50 |     },
 51 |     methods: {
 52 |         playVideo() {
 53 |             this.$refs.videoPlay.play()
 54 |         },
 55 |         // 处理进度条
 56 |         handlerTimeBar() {
 57 |             let This = this
 58 |             this.$refs.videoPlay.addEventListener('timeupdate', function () {
 59 |                 This.alltimer = This.$refs.videoPlay.duration
 60 |                 This.currentTime = This.$refs.videoPlay.currentTime
 61 |                 const persent = Math.ceil((This.currentTime / This.alltimer) * 100)
 62 |                 This.$refs.timeOverBar.style.width = persent + '%'
 63 |             })
 64 |         },
 65 |         // 处理点击进度条
 66 |         handlerClickTimeBar(e) {
 67 |             // (e);
 68 |             const barTotalWidth = this.$refs.timeBar.offsetWidth
 69 |             const rect = e.target.getBoundingClientRect() //元素右边距离页面边距的距离 返回上下左右
 70 |             let length = e.pageX - rect.left;   //获取点击的长度
 71 |             this.$refs.videoPlay.currentTime = length / barTotalWidth * this.$refs.videoPlay.duration
 72 |         },
 73 |         // 暂停或播放处理
 74 |         playVideo() {
 75 |             if (this.play) {
 76 |                 this.$refs.videoPlay.pause()
 77 |                 this.play = false
 78 |             } else {
 79 |                 this.$refs.videoPlay.play()
 80 |                 this.play = true
 81 |             }
 82 |         },
 83 | 
 84 |     }
 85 | 
 86 | }
 87 | 
 88 | </script>
 89 | 
 90 | <style lang='less' scoped>
 91 | .videoContainer {
 92 |     position: relative;
 93 |     height: 100%;
 94 |     width: 100%;
 95 | 
 96 |     video {
 97 |         width: 99%;
 98 |         height: 99%;
 99 |     }
100 | 
101 |     .model {
102 |         display: flex;
103 |         justify-content: center;
104 |         align-items: center;
105 |         position: absolute;
106 |         top: 0;
107 |         width: 100%;
108 |         height: 100%;
109 | 
110 |     }
111 | 
112 |     .timeBar {
113 |         position: absolute;
114 |         bottom: 5px;
115 |         height: 2px;
116 |         width: 100%;
117 |         background-color: #adadad;
118 |     }
119 | 
120 |     .timeOverBar {
121 |         position: absolute;
122 |         bottom: 5px;
123 |         height: 2px;
124 |         background-color: #e63434;
125 |         transition: all .4s;
126 |     }
127 | 
128 | }
129 | </style>
130 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import ElementPlus from 'element-plus'
 4 | import '../node_modules/element-plus/dist/index.css'
 5 | import './style.css'
 6 | import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 7 | import axios from './axios/http'
 8 | import Router from './router/router.js'
 9 | import store from './store/store.js'
10 | 
11 | const app = createApp(App)
12 | for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
13 |     app.component(key, component)
14 | }
15 | app.config.globalProperties.$h = axios;
16 | app.use(ElementPlus)
17 | app.use(Router)
18 | app.use(store)
19 | app.mount('#app')


--------------------------------------------------------------------------------
/src/mixins/mixin.js:
--------------------------------------------------------------------------------
  1 | import { ElMessage } from 'element-plus'
  2 | export default {
  3 |     methods: {
  4 |         async getUserInfo(uid) {
  5 |             const res = await this.$h.get('/user/detail?uid=' + uid)
  6 |             return res
  7 | 
  8 |         },
  9 |         // 向父组件中的音乐播放器组件传入数据
 10 |         async playMusic(songInfo) {
 11 |             const res = await this.getMusicUrl(songInfo);
 12 |             if (res) {
 13 |                 this.playMusictoApp(this.musicUrl, songInfo.picUrl, songInfo.name)
 14 |             }
 15 |         },
 16 |         // 获取歌曲url
 17 |         async getMusicUrl(id) {
 18 |             const res = await this.$h.get('/song/url/v1?id=' + id + '&level=standard')
 19 |             if (res.data[0].url === null) {
 20 |                 return 'urlNull'
 21 |             }
 22 |             return res
 23 |         },
 24 |         // 获取歌曲信息
 25 |         async getMusicDetail(id) {
 26 |             const res = await this.$h.get('/song/detail?ids=' + id)
 27 |             return res
 28 |         },
 29 |         test() {
 30 | 
 31 |         },
 32 |         // 点击歌单进入歌单详情页面
 33 |         goToList(ListId) {
 34 |             this.$router.push({
 35 |                 path: '/songListPage',
 36 |                 query: {
 37 |                     id: ListId
 38 |                 }
 39 |             })
 40 |         },
 41 |         // 时间戳转时间
 42 |         getDate(timeStr) {
 43 |             let date = new Date(timeStr)
 44 |             let Y = date.getFullYear()
 45 |             let M = parseInt((date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1))
 46 |             let D = parseInt((date.getDate() < 10 ? '0' + date.getDate() : date.getDate()))
 47 |             const time = {
 48 |                 Y,
 49 |                 M, D
 50 |             }
 51 |             return time
 52 |         },
 53 |         // 判断年代
 54 |         getAge(time) {
 55 |             let Y = time.Y
 56 |             let res1 = '神秘后'
 57 |             switch (true) {
 58 |                 case 2030 > Y && Y >= 2020:
 59 |                     res1 = '20后'
 60 |                     break;
 61 |                 case 2020 > Y && Y >= 2010:
 62 |                     res1 = '10后'
 63 |                     break;
 64 |                 case 2010 > Y && Y >= 2000:
 65 |                     res1 = '00后'
 66 |                     break;
 67 |                 case 2000 > Y && Y >= 1990:
 68 |                     res1 = '90后'
 69 |                     break;
 70 |                 case 1990 > Y && Y >= 1980:
 71 |                     res1 = '80后'
 72 |                     break;
 73 |                 case 1980 > Y && Y >= 1970:
 74 |                     res1 = '70后'
 75 |                     break;
 76 |                 case 1970 > Y && Y >= 1960:
 77 |                     res1 = '60后'
 78 |                     break;
 79 |                 case 1960 > Y && Y >= 1950:
 80 |                     res1 = '50后'
 81 |                     break;
 82 |                 case 1950 > Y && Y >= 1940:
 83 |                     res1 = '40后'
 84 |                     break;
 85 |                 case 1940 > Y && Y >= 1930:
 86 |                     res1 = '30后'
 87 |                     break;
 88 |                 case 1930 > Y && Y >= 1920:
 89 |                     res1 = '20后'
 90 |                     break;
 91 | 
 92 |             }
 93 |             return res1
 94 |         },
 95 |         // 判断星座
 96 |         getZodiac(time) {
 97 |             const M = parseInt(time.M)
 98 |             const D = parseInt(time.D)
 99 |             // 星座判断表
100 |             const sdate = [20, 19, 21, 20, 21, 22, 23, 23, 23, 24, 23, 22]
101 |             // 星座表
102 |             const conts = ['摩羯座', '水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座']
103 |             if (D < sdate[M - 1]) {
104 |                 return conts[M - 1]
105 |             } else {
106 |                 return conts[M]
107 |             }
108 |         },
109 |         // 歌词处理
110 |         wordHandle() {
111 |             //先通过“\n”将每行歌词存入数组之中
112 |             let arr = this.word.split('\n')
113 |             for (let i = 0; i < arr.length; i++) {
114 |                 let lyricRow = {}   //将每行歌词及其出现的时间视为一个对象
115 |                 let row = arr[i].split(']') //文本切割
116 |                 let text = row[1]   //拿到当前行的真正的歌词
117 |                 let time_arr = row[0].substr(1, row[0].length - 1).split(":")   //将[01:13]秒转为["01","13"]用于先处理
118 |                 let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1])   //将时间统一转为秒
119 |                 lyricRow.time = s   //向对象存入数据
120 |                 lyricRow.text = text
121 |                 // push进lyryc数组
122 |                 this.lyric.push(lyricRow)
123 |             }
124 |         },
125 |         // 获取歌词
126 |         async getWord(id) {
127 |             const res = await this.$h.get('/lyric?id=' + id)
128 |             return res.lrc
129 |         },
130 |         // 文件下载
131 |         downloadFile(url, fileName, cb) {
132 |             const xhr = new XMLHttpRequest();
133 |             xhr.open('GET', url, true);
134 |             // 响应类型设置为blob
135 |             xhr.responseType = 'blob';
136 |             // 请求成功
137 |             xhr.addEventListener('load', function () {
138 |                 if (xhr.status === 200) {
139 |                     const a = document.createElement('a');
140 |                     a.href = window.URL.createObjectURL(xhr.response);
141 |                     a.download = fileName;
142 |                     // 将a标签添加到body中是为了更好的兼容性，谷歌浏览器可以不用添加
143 |                     document.body.appendChild(a);
144 |                     a.click();
145 |                     // 移除
146 |                     a.remove();
147 |                     // 释放url
148 |                     window.URL.revokeObjectURL(a.href);
149 |                     cb | cb()   //完成后判断是否调用回调函数
150 |                 }           
151 |             });
152 |             // 监听下载进度
153 |             let percent = xhr.addEventListener('progress', function (e) {
154 |                 return Math.trunc(e.loaded / e.total * 100);
155 |             });
156 |             if (percent === 100) {
157 |                 (47477);
158 |             }
159 |             // 错误处理
160 |             xhr.addEventListener('error', function (e) {
161 | 
162 |             });
163 |             // 发送请求
164 |             xhr.send();
165 | 
166 |         }
167 | 
168 |     },
169 | }


--------------------------------------------------------------------------------
/src/router/router.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from "vue-router";
 2 | import home from '../components/home.vue'
 3 | import my from '../components/my.vue'
 4 | import cloudPan from '../components/cloudPan.vue'
 5 | import commune from '../components/commune.vue'
 6 | import songListPage from '../components/songListPage/songListPage.vue'
 7 | import songPage from '../components/songPage/songPage.vue'
 8 | import comment from '../components/comment/comment.vue'
 9 | import myInfo from '../components/myInfo/myInfo.vue'
10 | import reviseMyInfo from '../components/reviseMyInfo/reviseMyInfo.vue'
11 | import search from '../components/search/search.vue'
12 | 
13 | const routes = [ 
14 |     { path: '/', redirect: '/home' },
15 |     { path: '/home', component: home, name: 'home' },
16 |     { path: '/my', component: my, name: 'my' },
17 |     { path: '/cloudPan', component: cloudPan, name: 'cloudPan' },
18 |     { path: '/commune', component: commune, name: 'commune' },
19 |     { path: '/songListPage', component: songListPage, name: 'songListPage' },
20 |     { path: '/songPage', component: songPage, name: 'songPage' },
21 |     { path: '/comment', component: comment, name: 'comment' },
22 |     { path: '/myInfo', component: myInfo, name: 'myInfo' },
23 |     { path: '/reviseMyInfo', component: reviseMyInfo, name: 'reviseMyInfo' },
24 |     { path: '/search', component: search, name: 'search' }
25 | ]
26 | 
27 | const Router = createRouter({
28 |     history: createWebHashHistory(),
29 |     // 声明路由规则
30 |     routes
31 | })
32 | 
33 | export default Router;
34 | 


--------------------------------------------------------------------------------
/src/store/cloud.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     namespaced: true,
 3 |     state: () => ({
 4 |         cloudPanSongArray: 'null',
 5 |         sizeStore: 'null'
 6 |     }),
 7 |     mutations: {
 8 |         updatedCloudPanSongArray(state, cloudPanSongArray) {
 9 |             (cloudPanSongArray);
10 |             state.cloudPanSongArray = cloudPanSongArray
11 |         },
12 |         updatedSize(state, sizeStore) {
13 |             state.sizeStore = sizeStore
14 |         },
15 |     },
16 |     getters: {
17 | 
18 |     }
19 | }


--------------------------------------------------------------------------------
/src/store/home.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     namespaced: true,
 3 |     state: () => ({
 4 |         musicListinStore: '11',
 5 |         weListeninStore: '22',
 6 |         refreshTime: '0',
 7 |         searchHot: '11',
 8 |         searchHistory: '11',
 9 |         bannerArrayinStore: '11'
10 |     }),
11 |     mutations: {
12 |         updatedMusicListinStore(state, musicListinStore) {
13 |             state.musicListinStore = musicListinStore
14 |         },
15 |         updatedWeListeninStore(state, weListeninStore) {
16 |             state.weListeninStore = weListeninStore
17 |         },
18 |         uodateRefreshTime(state, refreshTime) {
19 |             state.refreshTime = refreshTime
20 |         },
21 |         updatedSerachHot(state, searchHot) {
22 |             (searchHot);
23 |             state.searchHot = searchHot
24 |         },
25 |         updatedSearchHistory(state, searchHistory) {
26 |             state.searchHistory = searchHistory
27 |         },
28 |         updatedBannerArrayinStore(state,bannerArrayinStore){
29 |             (bannerArrayinStore);
30 |             state.bannerArrayinStore = bannerArrayinStore
31 |         }
32 |     },
33 |     getters: {
34 | 
35 |     }
36 | }


--------------------------------------------------------------------------------
/src/store/my-temp.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     namespaced: true,
 3 |     state: () => ({
 4 |         birthdayTimeInStore: {}
 5 |     }),
 6 |     mutations: {
 7 |         updatedBirthdayTimeInStore(state, birthdayTimeInStore) {
 8 |             (birthdayTimeInStore);
 9 |             state.birthdayTimeInStore = birthdayTimeInStore
10 |         },
11 |     },
12 |     getters: {
13 | 
14 |     }
15 | }


--------------------------------------------------------------------------------
/src/store/my.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     namespaced: true,
 3 |     state: () => ({
 4 |         accountStore: '11',
 5 |         userInfo: '{}',
 6 |         songListinStore: '11',
 7 |         cookie: ''
 8 | 
 9 |     }),
10 |     mutations: {
11 |         updateAccount(state, account) {
12 |             state.accountStore = account
13 |         },
14 |         updateUserInfo(state, userInfo) {
15 |             (userInfo);
16 |             state.accountStore = 'true'
17 |             state.userInfo = userInfo
18 | 
19 |         },
20 |         updateSongListinStore(state, songListinStore) {
21 |             state.songListinStore = songListinStore
22 |         },
23 |         updateCookie(state, cookie) {
24 |             (11);
25 |             state.cookie = cookie
26 |         },
27 |     },
28 |     getters: {
29 | 
30 |     }
31 | }


--------------------------------------------------------------------------------
/src/store/play-temp.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   namespaced: true,
 3 |   state: () => ({
 4 |     TsongListStore: [],
 5 |     TsongBigListStore: ['01'],
 6 |     TsongPageIdStore: '11', //解决从其他歌曲评论页面返回时，页面导航进入最初的歌曲
 7 |     TListNowStore: null,
 8 |     TListLengthStore: null,
 9 |     TlyricTime:null,
10 |     downloadFlag:'wait'
11 |   }),
12 |   mutations: {
13 |     updateTsongBigListStore(state, TsongBigListStore) {
14 |       state.TsongBigListStore = TsongBigListStore
15 |     },
16 |     updateTsongPageIdStore(state, TsongPageIdStore) {
17 |       state.TsongPageIdStore = TsongPageIdStore
18 |     },
19 |     updateTListNowStore(state, TListNowStore) {
20 |       state.TListNowStore = TListNowStore
21 | 
22 |     },
23 |     updatedTListLengthStore(state, TListLengthStore) {
24 |       state.TListLengthStore = TListLengthStore
25 |     },
26 |     updatedTlyricTime(state,TlyricTime){
27 |       state.TlyricTime = TlyricTime
28 |     },
29 |     updatedDownloadFlag(state,downloadFlag){
30 |       state.downloadFlag = downloadFlag
31 |     }
32 | 
33 |   },
34 |   getters: {
35 | 
36 |   }
37 | }


--------------------------------------------------------------------------------
/src/store/play.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     namespaced: true,
 3 |     state: () => ({
 4 |         showPlay: true,
 5 |         playIt: true,   //若设为false可能导致第一次进入play页面时 唱片不进行旋转并且播放按钮为暂停状态
 6 |         changeMusic: '',
 7 |         songStore:{},
 8 |         songListStore:[]
 9 |     }),
10 |     mutations: {
11 |         updateShowPlay(state) {
12 |             state.showPlay = !state.showPlay
13 |         },
14 |         updateplayIt(state) {
15 |             // (11);
16 |             state.playIt = !state.playIt
17 |         },
18 |         // 覆盖play为true
19 |         playTotrue(state) {
20 |             state.playIt = true
21 |         },
22 |         updateChangeMusic(state, direction) {
23 |             if (direction === 'next') {
24 |                 state.changeMusic = direction
25 |             } else if (direction === 'pre') {
26 |                 state.changeMusic = 'pre'
27 |             }else{
28 |                 state.changeMusic = direction
29 |             }
30 |         },
31 |         updatesongStore(state,songStore){
32 |             state.songStore = songStore
33 |         }
34 |     },
35 |     getters: {
36 | 
37 |     }
38 | }


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
 1 | import Vuex from 'vuex'
 2 | import modulesMy from './my.js'
 3 | import modulesPlay from './play.js'
 4 | import modulesHome from './home.js'
 5 | import playTemp from './play-temp.js'
 6 | import cloud from './cloud.js'
 7 | import createPersistedState from 'vuex-persistedstate';
 8 | import myTemp from './my-temp'
 9 | import myVideo from './video'
10 | import videoTemp from './video-temp'
11 | 
12 | 
13 | const store = new Vuex.Store({
14 | 
15 |     modules: {
16 |         m_my: modulesMy,
17 |         m_play: modulesPlay,
18 |         m_home: modulesHome,
19 |         t_play: playTemp,
20 |         m_cloud: cloud,
21 |         t_my: myTemp,
22 |         m_video: myVideo,
23 |         t_video: videoTemp
24 |     },
25 |     plugins: [createPersistedState({
26 |         paths: ["m_my", "m_play", "m_home", "m_cloud", "m_video"]
27 |     })]
28 | })
29 | 
30 | export default store


--------------------------------------------------------------------------------
/src/store/video-temp.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     namespaced: true,
 3 |     state: () => ({
 4 |         videoScrollTop: 0,
 5 |         toPlayScrollTop: 0
 6 |     }),
 7 |     mutations: {
 8 |         updatedVideoScrollTop(state, videoScrollTop) {
 9 |             state.videoScrollTop = videoScrollTop
10 |         },
11 |         updatedToPlayScrollTop(state,toPlayScrollTop){
12 |             state.toPlayScrollTop = toPlayScrollTop
13 |         }
14 | 
15 |     },
16 |     getters: {
17 | 
18 |     }
19 | }


--------------------------------------------------------------------------------
/src/store/video.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     namespaced: true,
 3 |     state: () => ({
 4 |         videoPageInstore: 1,
 5 |         videoArrayInstore: '11',
 6 |         videoScrollTop: 0
 7 |     }),
 8 |     mutations: {
 9 |         updatedVideoPageInstore(state, videoPageInstore) {
10 |             state.videoPageInstore = videoPageInstore
11 |         },
12 |         updatedVideoArrayInstore(state, videoArrayInstore) {
13 |             state.videoArrayInstore = videoArrayInstore
14 |         },
15 |         
16 |     },
17 |     getters: {
18 | 
19 | 
20 |     }
21 | }


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | /* :root {
 2 |   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
 3 |   font-size: 16px;
 4 |   line-height: 24px;
 5 |   font-weight: 400;
 6 | 
 7 |   color-scheme: light dark;
 8 |   color: rgba(255, 255, 255, 0.87);
 9 |   background-color: #242424;
10 | 
11 |   font-synthesis: none;
12 |   text-rendering: optimizeLegibility;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 |   -webkit-text-size-adjust: 100%;
16 | }
17 | 
18 | a {
19 |   font-weight: 500;
20 |   color: #646cff;
21 |   text-decoration: inherit;
22 | }
23 | a:hover {
24 |   color: #535bf2;
25 | }
26 | 
27 | a {
28 |   font-weight: 500;
29 |   color: #646cff;
30 |   text-decoration: inherit;
31 | }
32 | a:hover {
33 |   color: #535bf2;
34 | }
35 | 
36 | body {
37 |   margin: 0;
38 |   display: flex;
39 |   place-items: center;
40 |   min-width: 320px;
41 |   min-height: 100vh;
42 | }
43 | 
44 | h1 {
45 |   font-size: 3.2em;
46 |   line-height: 1.1;
47 | }
48 | 
49 | button {
50 |   border-radius: 8px;
51 |   border: 1px solid transparent;
52 |   padding: 0.6em 1.2em;
53 |   font-size: 1em;
54 |   font-weight: 500;
55 |   font-family: inherit;
56 |   background-color: #1a1a1a;
57 |   cursor: pointer;
58 |   transition: border-color 0.25s;
59 | }
60 | button:hover {
61 |   border-color: #646cff;
62 | }
63 | button:focus,
64 | button:focus-visible {
65 |   outline: 4px auto -webkit-focus-ring-color;
66 | }
67 | 
68 | .card {
69 |   padding: 2em;
70 | }
71 | 
72 | #app {
73 |   max-width: 1280px;
74 |   margin: 0 auto;
75 |   padding: 2rem;
76 |   text-align: center;
77 | }
78 | 
79 | @media (prefers-color-scheme: light) {
80 |   :root {
81 |     color: #213547;
82 |     background-color: #ffffff;
83 |   }
84 |   a:hover {
85 |     color: #747bff;
86 |   }
87 |   button {
88 |     background-color: #f9f9f9;
89 |   }
90 | } */
91 | html,body,#app{
92 |   height: 100%;
93 |   width: 100%;
94 |   margin: 0;
95 |   padding: 0;
96 |   /* background: #2b2b2b; */
97 |   background: #151515;
98 |   font-family: 'YaHei Consolas Hybrid';
99 | }


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | export default defineConfig({
 4 |   plugins: [vue()],
 5 |   // 跨域
 6 |   server: {
 7 |     cors: true, // 默认启用并允许任何源
 8 |     proxy: {
 9 |       '/agent': {
10 |         target: 'http://111.67.195.237:8886/',
11 |           //原先接口部署在vercel上，虽然免费但是太慢了......
12 |         changeOrigin: true,
13 |       },
14 |     }
15 |   },
16 |   base:'./'
17 | })


--------------------------------------------------------------------------------