vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
module.exports = {
  //删除
  lintOnSave:false,
	configureWebpack: {
		resolve: {
            // 别名配置
			alias: {
				assets: "@/assets",
				common: "@/common",
				components: "@/components",
				network: "@/network",
				layout: "@/layout",
				views: "@/views",
			},
		},
	},
	 devServer: {			
	 	proxy: {
	 		"/api": {//api表示拦截以/api开头的请求路径
	 			target: "https://netease-cloud-music-api-coral-gamma.vercel.app/",//跨域的域名（不需要写路径）
	 			changeOrigin: true,//是否开启跨域
	 			ws: true,//是否代理websocked
	 			pathRewrite: {//重写路径
	 				"^/api": "",//把/api变为空字符 
	 			},
	 		},·
	 	},
	 },
};

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store/index.js";
/**全局使用Elemen-ui**/
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
	router,
	store,
	render: function (h) {
		return h(App);
	},
}).$mount("#app");

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div id="app">
	  <div id="app">
		<!-- 头部 -->
		<Header />
		<!-- 主体 -->
		<Main />
		<!-- 底部 -->
		<Footer />
	  </div>
	  <router-view />
	</div>
</template>
<script>
    import Header from "./layout/Header.vue";
    import Main from "./layout/Main.vue";
    import Footer from "./layout/Footer.vue";
    export default {
        name: "App",
        components: { Header, Main, Footer },
    };
</script>
<style scoped>
    /* 引用图标 */
    @import "assets/css/base.css";
    #app {
        width: 100%;
        height: 100vh;
        position: fixed;
}
</style>

router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

/* 1 发现音乐 */
const Findmusic = () => import("../views/findmusic/Findmusic.vue");
const routes = [

	/* 1 发现音乐 */
	{
		path: "/findmusic",
		component: Findmusic,
		name: "Findmusic",
		redirect: "/findmusic/discover",
	},
];


const router = new VueRouter({
	routes,
});

export default router;

store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        routes:[]
    },
    mutations:{
        initRoutes(state, data) {
            state.routes = data;
        }
    },
    actions:{}
})

小知识点

主路由导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="aside">
    <!-- 主路由导航 -->
    <el-menu router :default-active="defaultActive"><!-- //当前激活菜单的 index
其实，即使不加这个属性，也能正常显示选中的item变亮，但是之所以要加这个属性，是为了浏览器刷新后，仍然可以定位到之前选中的路由。-->
        <el-menu-item v-for="(item, index) in subnavitem" :key="index" :index="item.path">
            <span class="iconfont" :class="item.icon"></span>
            <span>{{ item.name }}</span>
        </el-menu-item>
    </el-menu>
</div>	
data() {
		return {
			defaultActive: " ",
			subnavitem: [
				{ name: "发现音乐", path: "/findmusic", icon: "icon-yinyueclick" },
			],
			collectIndex: null,
		};
	},
methods: {
		getPath() {
			let pathArr = "/" + this.$route.path.split("/")[1];
			if (pathArr == "/songlistdetail") {
				this.defaultActive = pathArr + "/" + this.$route.params.id;
			} else {
				this.defaultActive = pathArr;
			}
		},
	},
watch: {
		$route: "getPath",
	},

前进后退操作

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 操作 -->
<div class="operation">
    <span class="iconfont icon-shangyiye" @click="goBack"></span>
    <span class="iconfont icon-xiayiye" @click="goForward"></span>
</div>
methods: {
		goBack() {
			this.$router.go(-1);
		},
		goForward() {
			this.$router.go(1);
		},
	},

搜索

1
2
3
4
5
6
<!-- 输入框 --><!-- Popover弹出框,slot=“reference” 的具名插槽 -->
<!-- 绑定的时候加上 .trim 那么如果直接在开头输入空格，或者是在末尾输入空格，是不会显示有输入内容的 -->
<el-input placeholder="请输入内容" size="small" v-model.trim="searchWord" v-popover:popover slot="reference" @keyup.enter.native="search">
    <!-- slot="suffix"是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参； -->
    <span slot="suffix" class="el-icon-search" @click="search"></span>
</el-input>

下列是搜索弹出的Popover弹出框

搜索的热门弹出框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!-- 热搜弹出框 -->
<el-popover ref="popover" placement="bottom" width="350" trigger="focus">
    <div class="list">
        <div class="history" v-if="historySearch.length != 0">
            <div class="hd">
                <h3>搜索历史</h3>
                <span @click="deleteAll" class="iconfont icon-delete">清空</span>
            </div>

            <div class="bd">
                <div class="historylist">
                    <div class="historylistitem" v-for="(item, index) in historySearch" :key="index" @mouseover="showClear(index)" @mouseleave="clearIcon = false" @click="addHotWord(item)">
                        <span class="icon"></span>
                        <span class="txt">{{ item }}</span>
                        <span class="icon"><i class="iconfont icon-guanbi" v-if="clearIcon && historySearchIndex == index" @click.stop="deleteHistory(index)"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="hot-search-rank hot-search-pop">
            <h3>热搜榜</h3>
            <ul>
                <li v-for="(item, index) in searchList" :key="index" @click="addHotWord(item.searchWord)">
                    <div class="num" :class="index < 3 ? 'hotword-num' : ''">
                        {{ index + 1 }}
                    </div>
                    <div class="main-content">
                        <div class="word">
                            <span :class="index < 3 ? 'hotword' : ''">
                                {{ item.searchWord }}
                            </span>
                            <span class="by">{{ item.score }}</span>
                            <span class="icon" v-if="item.iconUrl">
                                <img :src="item.iconUrl" alt="" />
                            </span>
                        </div>
                        <p class="by" v-if="item.content">{{ item.content }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</el-popover>
data() {
		return {
			searchWord: "",
			searchList: [],
			historySearch: this.getItem("historySearch") ? this.getItem("historySearch") : [],
			clearIcon: false,
			historySearchIndex: 0,
		};
	},
	created() {
		getSearchHotWord().then(res => {
			this.searchList = res.data.data;
		});
	},
	methods: {
		// 搜索事件
		search() {
			if (this.searchWord == "") {
				this.$message({
					showClose: true,
					message: "请输入内容",
					type: "warning",
					center: true,
				});
			} else {
				console.log("搜索");
				this.$router.push("/searchdetail/" + this.searchWord).catch(err => err);
				this.$refs.popover.doClose(); //关闭弹框
				this.addHistory(this.searchWord);
			}
		},
		// 热搜榜添加
		addHotWord(word) {
			this.$refs.popover.doClose(); //关闭弹框
			this.searchWord = word;
			this.$router.push("/searchdetail/" + this.searchWord).catch(err => err);
			this.addHistory(word);
		},
		addHistory(word) {
			if (!this.historySearch.includes(word)) {
				this.historySearch.push(word); //添加历史搜索
				this.setItem("historySearch", this.historySearch);
			}
		},
		showClear(index) {
			/* 组件中show-clear=“true”清除icon点击失效的问题 */
			this.clearIcon = true;
			this.historySearchIndex = index;
		},
		deleteHistory(index) {
			this.historySearch.splice(index, 1);
			this.setItem("historySearch", this.historySearch);
		},
		deleteAll() {
			this.removeItem("historySearch");
			this.historySearch = [];
		},
	},

登录注册

1
2
3
4
5
6
<!-- 右侧登录 -->
<div class="right-login">
    <Login />
</div>
import Login from "components/content/login/Login.vue";
components: { Login },

Login.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<template>
	<div class="login">
		<!-- 未登录头像 -->
		<div class="avatar" v-if="!userInfo" @click="showLogin">
			<div class="block">
				<el-avatar :size="40" :src="circleUrl"></el-avatar>
			</div>
			<div class="uname">{{ uname }}</div>
		</div>
		<!-- 已登录头像 -->
		<div class="avatar" v-else>
			<div @click="toUserDetail">
				<el-avatar :size="40" :src="userInfo.avatarUrl"></el-avatar>
			</div>
			<div class="uname" @click="showUserPop" id="showuserpop">{{ userInfo.nickname }} <i class="el-icon-caret-bottom"></i></div>
		</div>
		<!-- 登录表单弹框 -->
		<transition name="el-fade-in-linear">
			<LoginPop v-if="isShowLogin" @closeLogin="closeLogin" />
		</transition>
		<!-- 展示个人信息弹框 -->
		<transition name="el-fade-in-linear">
			<UserPop v-if="showUserpop" @closeuserPop="isShowUserPop" />
		</transition>
	</div>
</template>
<script>
import { mapGetters } from "vuex";
import LoginPop from "./LoginPop.vue";
import UserPop from "./UserPop.vue";
export default {
	name: "Login",
	components: { LoginPop, UserPop },
	computed: {
		// 将 store 中的 getter 映射到局部计算属性
        /* 如果一个变量或对象需要在多个页面和组件中使用，那么，可以使用mapGetters。在method同级上放入computed */
		...mapGetters(["userInfo"]),
	},
	data() {
		return {
			circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
			uname: "点击头像登录",
			isShowLogin: false,
			showUserpop: false,
		};
	},
	methods: {
		// 显示登录框
		showLogin() {
			this.isShowLogin = true;
		},
		// 关闭登录框
		closeLogin() {
			this.isShowLogin = false;
		},
		// 打开用户信息弹框
		showUserPop() {
			this.showUserpop = !this.showUserpop;
		},
		// 关闭用户信息弹框
		isShowUserPop() {
			this.showUserpop = false;
		},
		// 点击登录后的头像
		toUserDetail() {
			this.$router.push("/userdetail/" + this.userInfo.userId).catch(err => err);
		},
	},
};
</script>

<style lang="less" scoped>
.login {
	padding-right: 2%;
}
.avatar {
	display: flex;
	align-items: center;
	color: #fff;
    /* 鼠标经过区域显示小手 */
	cursor: pointer;
	.uname {
		padding-left: 5px;
	}
}
</style>

LoginPop.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
<template>
	<div class="login-pop">
		<!-- 关闭按钮 -->
		<div class="close" @click="closeLogin">
			<span class="iconfont icon-guanbi1"></span>
		</div>

		<!-- 手机号登录 -->
		<div class="phone-login" v-if="loginWay === 0">
			<h2>手机号登录</h2>
			<!-- logo -->
			<div class="imgs">
				<span class="iconfont icon-tel"></span>
			</div>
			<!-- 表单 -->
			<div class="form">
				<el-form label-width="70px">
					<el-form-item label="手机号">
						<el-input type="tlephone" v-model="PhoneNum" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input type="password" v-model="Password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="phoneLogin">登录</el-button>
					</el-form-item>
					<el-form-item>
						<el-button @click="changeLoginWay(2)">注册</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="other-way" @click="changeLoginWay(1)" style="margin-top: 50px; padding-left: 25px">
				<span><i class="iconfont icon-erweima1"></i> <i class="text">扫码登录</i> </span>
			</div>
		</div>

		<!-- 扫码登录 -->
		<div class="qr-login" v-if="loginWay === 1">
			<div class="qr">
				<h2>扫码登录</h2>
				<img :src="qrurl" alt="" />
				<p class="failqr" v-if="failqr">二维码已失效，<span @click="qrLogin">点击刷新</span></p>
				<p class="text" v-if="!scanQr">使用<span style="color: #5091ca">网易云音乐APP</span>扫码登录</p>
				<p class="text" v-if="scanQr">扫描成功，请在手机上确认登录</p>
				<!-- 其他登录方式 -->
				<div class="other-way" @click="changeLoginWay(0)" style="margin-top: 30px">
					<span>
						<i class="iconfont icon-tel"></i>
						<i class="text"> 手机号登录</i></span
					>
				</div>
				<div class="other-way" style="padding-top: 50px" @click="changeLoginWay(2)">
					<span>还没有账号，去注册</span>
				</div>
			</div>
		</div>

		<!-- 注册新用户 -->
		<div class="register" v-show="loginWay === 2">
			<h2>注册新用户</h2>
			<div class="reg-form">
				<el-form label-position="right" label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
					<el-form-item label="手机号" prop="phone">
						<el-input type="telphone" v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="pass">
						<el-input type="password" v-model="ruleForm.pass" placeholder="密码为8~20位，必须包含字母数字"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPass">
						<el-input type="password" v-model="ruleForm.checkPass" placeholder="请确认密码"></el-input>
					</el-form-item>
					<el-form-item label="昵称" prop="nickname">
						<el-input type="text" v-model="ruleForm.nickname" placeholder="请输入昵称"></el-input>
					</el-form-item>
					<el-form-item label="验证码" prop="captcha" class="captcha-input">
						<el-input v-model="ruleForm.captcha" placeholder="请输入验证码"></el-input>
						<div class="captcha-btn" @click="getCaptcha" v-if="!isGetCaptcha">获取验证码</div>
						<div class="captcha" v-else>{{ tip }}</div>
					</el-form-item>
				</el-form>
			</div>
			<div class="reg-btns">
				<div class="reg-btn">
					<el-button type="primary" @click="register('ruleForm')">注册</el-button>
				</div>
				<div class="reg-btn">
					<el-button @click="changeLoginWay(0)">返回登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { login, getQrKey, getLoginQr, checkLoginQr, getUserAccount, getAuthcode, checkAuthcode, register, checkPhoneNum } from "network/login/login";
import { getUserSonglist, getUserDetail } from "network/userdetail/userdetail";
import { getLikSongList } from "network/playmusic/playmusic.js";
import { isPhone, throttle } from "common/utils.js";
export default {
	name: "LoginPop",
	data() {
		//注册表单验证规则
		var validatePhone = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入手机号"));
			} else {
				if (!isPhone(value)) {
					callback(new Error("手机号格式不正确"));
				}
				callback();
			}
		};
		var validatePass = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入密码"));
			} else {
				if (this.ruleForm.checkPass !== "") {
					this.$refs.ruleForm.validateField("checkPass");
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请再次输入密码"));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error("两次输入密码不一致!"));
			} else {
				callback();
			}
		};
		var validateName = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入昵称"));
			}
			callback();
		};
		var validateCaptcha = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入验证码"));
			}
			callback();
		};
		return {
			PhoneNum: "", //登录手机号
			Password: "", //登录密码
			loginWay: 0, //登录方式
			qrurl: "", //二维码路径
			timer: "", //轮询二维码的定时器
			failqr: false, //控制二维码失效显示文本
			scanQr: false,
			isGetCaptcha: false, //是否获取验证码
			tip: "", //获取验证码后的文字提示
			ruleForm: {
				phone: "", //注册手机号
				pass: "", //注册密码
				checkPass: "", //验证密码
				nickname: "", //昵称
				captcha: "", //验证码
			},
			rules: {
				phone: [{ validator: validatePhone, trigger: "blur", required: true }],
				pass: [{ validator: validatePass, trigger: "blur", required: true }],
				checkPass: [{ validator: validatePass2, trigger: "blur", required: true }],
				nickname: [{ validator: validateName, trigger: "blur", required: true }],
				captcha: [{ validator: validateCaptcha, trigger: "blur", required: true }],
			},
		};
	},
	created() {},
	methods: {
		// 关闭登录框
		closeLogin() {
			this.$emit("closeLogin");
			clearInterval(this.timer);
		},
		// 切换登录方式
		changeLoginWay(way) {
			this.loginWay = way;
			// 如果是手机号登录就清除二维码登录的定时器
			if (way !== 1) {
				clearInterval(this.timer);
				if (way === 0) {
					this.$refs.ruleForm.resetFields(); //重置注册表单
				}
			}
			// 二维码登录
			if (way === 1) {
				this.qrLogin();
			}
		},

		// 二维码登录
		async qrLogin() {
			this.failqr = false; // 用于隐藏二维码失效后的文本提示
			this.scanQr = false;
			// 获取二维码key
			let res = await getQrKey();
			let key = res.data.data.unikey;
			// 生成二维码
			let res2 = await getLoginQr(key);
			this.qrurl = res2.data.data.qrimg;
			// 检查二维码状态（利用定时器不断轮询）
			this.timer = setInterval(async () => {
				let statusRes = await checkLoginQr(key);
				console.log(statusRes.data);
				if (statusRes.data.code === 800) {
					this.$message({
						showClose: true,
						message: "二维码已失效",
						type: "error",
						center: true,
					});
					clearInterval(this.timer);
					// 用于显示二维码失效后的文本提示，
					this.failqr = true;
				}
				if (statusRes.data.code === 802) {
					this.scanQr = true;
				}
				if (statusRes.data.code === 803) {
					clearInterval(this.timer);
					this.$message({
						showClose: true,
						message: "登录成功",
						type: "success",
						center: true,
					});
					// 获取用户账户信息
					this.getUserLoginAccount();
				}
			}, 2000);
		},
		// 二维码登录 获取用户登录后的账户信息
		getUserLoginAccount() {
			getUserAccount().then(res1 => {
				let uid = res1.data.account.id;
				// 获取用户个人信息
				getUserDetail(uid).then(res => {
					this.loginSuccess(res);
				});
			});
		},

		// 手机号登录事件
		phoneLogin() {
			if (this.PhoneNum.trim() === "" || this.Password === "") {
				this.$message({
					message: "手机号或密码不能为空",
					type: "warning",
					center: true,
				});
				return;
			} else {
				login(this.PhoneNum, this.Password)
					.then(res => {
						if (res.data.code === 200) {
							this.$message({
								showClose: true,
								message: "登录成功",
								type: "success",
								center: true,
							});
							// 登录成功后的一些操作
							this.loginSuccess(res);
						} else if (res.data.code === 502) {
							this.$message({
								message: "密码错误",
								type: "warning",
								center: true,
							});
						} else {
							this.$message({
								message: "手机号或密码错误",
								type: "warning",
								center: true,
							});
						}
					})
					.catch(err => {
						this.$message({
							message: "账号不存在",
							type: "warning",
							center: true,
						});
					});
			}
		},

		// 登录成功后的一些操作
		loginSuccess(res) {
			// 关闭登录框
			this.closeLogin();
			// 更新登录状态
			this.$store.dispatch("updateLogin", true);
			this.setItem("isLogin", true);
			//缓存用户信息 防止刷新消失
			this.setItem("userInfo", res.data.profile);
			// 提交vuex 保存用户信息
			this.$store.dispatch("saveUserInfo", res.data.profile);
			// 获取用户歌单数据
			this.getUserSonglistBy(res.data.profile.userId);
		},

		// 获取用户歌单和喜欢的音乐数据
		getUserSonglistBy(uid) {
			getUserSonglist(uid).then(res => {
				this.setItem("userSongList", res.data.playlist);
				this.$store.dispatch("saveUserSongList", res.data.playlist);
			});
			getLikSongList(uid).then(res => {
				if (res.data.ids.length != 0) {
					this.$store.dispatch("saveLikeSongIds", res.data.ids);
				}
			});
		},

		// 点击获取验证码
		getCaptcha() {
			// 检测手机号码是否输入
			if (this.ruleForm.phone.trim() === "") {
				this.$message({
					showClose: true,
					message: "请先输入手机号",
					type: "warning",
					center: true,
				});
			} else {
				// 检测手机号是否注册
				// checkPhoneNum(this.ruleForm.phone).then(res => {
				// if (res.data.exist === 1) {
				// 	this.$message({
				// 		showClose: true,
				// 		message: "该手机号已注册",
				// 		type: "warning",
				// 		center: true,
				// 	});
				// } else if (res.data.exist === -1) {
				// 获取验证码
				getAuthcode(this.ruleForm.phone).then(res => {
					switch (res.data.code) {
						case 200:
							this.$message({
								showClose: true,
								message: "验证码已发送",
								type: "success",
								center: true,
							});
							this.isGetCaptcha = true;
							let count = 60;
							this.tip = `请${count}秒后再获取`;
							let timerC = setInterval(() => {
								count--;
								this.tip = `请${count}秒后再获取`;
								if (count === 0) {
									this.isGetCaptcha = false;
									clearInterval(timerC);
								}
							}, 1000);
							break;
						case 400:
							this.$message({
								showClose: true,
								message: "发送验证码超过限制:每个手机号一天只能发5条验证码",
								type: "warning",
								center: true,
							});
							break;
						case 405:
							this.$message({
								showClose: true,
								message: "发送验证码间隔过短",
								type: "warning",
								center: true,
							});
							break;
						default:
							this.$message({
								showClose: true,
								message: "手机号不符合规范",
								type: "warning",
								center: true,
							});
							break;
					}
				});
				// }
				// });
			}
		},

		//点击注册按钮事件
		register(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					// 检查验证码
					checkAuthcode(this.ruleForm.phone, this.ruleForm.captcha)
						.then(res => {
							// 注册
							if (res.data.code == 200) {
								register(this.ruleForm.phone, this.ruleForm.captcha, this.ruleForm.pass, this.ruleForm.nickname)
									.then(res => {
										// console.log(res);
										if (res.data.code == 200) {
											this.$message({
												showClose: true,
												message: "注册成功",
												type: "success",
												center: true,
											});
											setTimeout(() => {
												this.changeLoginWay(0);
											}, 500);
										}
									})
									.catch(err => {
										this.$message({
											showClose: true,
											message: "改昵称已被占用",
											type: "warning",
											center: true,
										});
									});
							}
						})
						.catch(err => {
							this.$message({
								showClose: true,
								message: "验证码错误",
								type: "warning",
								center: true,
							});
						});
				} else {
					this.$message({
						showClose: true,
						message: "请填写完整表单",
						type: "warning",
						center: true,
					});
				}
			});
		},
	},
};
</script>

<style lang="less" scoped>
.login-pop {
	position: absolute;
	top: 120px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
	box-shadow: 0px 0px 5px 5px #eee;
	background: #dcdcdc;
	border-radius: 10px;
	width: 400px;
	height: 520px;
	background: #fff;
	text-align: center;
	.close {
		text-align: right;
		cursor: pointer;
		padding: 10px 20px 0 0;
		.iconfont {
			font-size: 22px;
		}
	}
}
.imgs {
	width: 150px;
	height: 150px;
	margin: 0 auto;
	line-height: 150px;
	.icon-tel {
		font-size: 82px;
		color: var(--themeColor);
	}
	padding-bottom: 20px;
}
.form {
	padding-right: 30px;
}
.phone-login {
	.el-form-item {
		margin-bottom: 12px;
	}
	.btn {
		width: 300px;
		margin: 0 auto 12px;
		transform: translateX(30px);
	}
}
.qr-login {
	.qr {
		h2 {
			margin-top: 20px;
		}
		width: 100%;
		margin-bottom: 50px;
		img {
			width: 220px;
			height: 220px;
		}
		.failqr {
			margin-bottom: 5px;
			span {
				color: var(--themeColor);
				cursor: pointer;
			}
		}
	}
}
.other-way {
	span:hover {
		color: var(--themeColor);
		cursor: pointer;
	}
}
.register {
	h2 {
		margin-top: 10px;
	}
	.reg-form {
		margin-top: 20px;
		padding-right: 20px;
		.captcha-input {
			position: relative;
			.captcha-btn {
				position: absolute;
				right: 5px;
				top: 0;
				cursor: pointer;
				font-size: 12px;
				color: var(--themeColor);
			}
			.captcha {
				position: absolute;
				right: 5px;
				top: 0;
				font-size: 12px;
				color: #999;
			}
		}
	}
	.reg-btns {
		width: 250px;
		display: flex;
		justify-content: space-between;
		margin: 0 auto 12px;
		transform: translateX(18px);
		.reg-btn {
			width: 48%;
		}
	}
	/deep/ .el-form-item__label {
		padding-right: 5px;
	}
}
.el-button {
	width: 100%;
}
</style>

UserPop.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<template>
	<div>
		<div class="user-pop" ref="userpop">
			<div class="data-num">
				<div class="num-item">
					<h2>{{ userInfo.eventCount }}</h2>
					<div>动态</div>
				</div>
				<div class="num-item" @click="toFollows">
					<h2>{{ userInfo.follows }}</h2>
					<div>关注</div>
				</div>
				<div class="num-item" @click="toFansList">
					<h2>{{ userInfo.followeds | formatNum }}</h2>
					<div>粉丝</div>
				</div>
			</div>
			<div style="text-align: center">
				<el-button round size="small">签到</el-button>
			</div>
			<ul class="userinfo-list">
				<li @click="toMyhome">
					<span><i class="iconfont icon-user"></i>个人主页</span><i class="iconfont icon-xiayiye"></i>
				</li>
				<li @click="getUserRecordBy">
					<span><i class="iconfont icon-dengji"></i>听歌排行</span><i class="iconfont icon-xiayiye"></i>
				</li>
				<li>
					<span><i class="iconfont icon-shezhi"></i>个人设置</span><i class="iconfont icon-xiayiye"></i>
				</li>
				<li @click="logout">
					<span><i class="iconfont icon-tuichu"></i>退出登录</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { logout } from "network/login/login";
import { getUserDetail } from "network/userdetail/userdetail";
import { mapGetters } from "vuex";
export default {
	name: "UserPop",
	computed: {
		...mapGetters(["userInfo"]),
	},
	created() {
		this.getUserDetailBy();
	},
	methods: {
		//获取用户个人信息
		getUserDetailBy() {
			getUserDetail(this.userInfo.userId).then(res => {
				this.setItem("userInfo", res.data.profile);
				// 提交vuex 保存用户信息
				this.$store.dispatch("saveUserInfo", res.data.profile);
			});
		},
		// 点击个人主页
		toMyhome() {
			this.$router.push("/userdetail/" + this.userInfo.userId);
		},
		// 点击听歌排行去往用户播放记录页面
		getUserRecordBy() {
			this.$router.push("/userdetail/record/" + this.userInfo.userId);
		},
		//点击关注去往关注列表
		toFollows() {
			this.$router.push({
				name: "Follows",
				params: {
					uid: this.userInfo.userId,
					uname: this.userInfo.nickname,
					follows: this.userInfo.follows,
				},
			});
		},
		//点击粉丝去往粉丝列表
		toFansList() {
			this.$router.push({
				name: "FansList",
				params: { uid: this.userInfo.userId, uname: this.userInfo.nickname },
			});
		},

		// 退出登录
		logout() {
			this.$confirm("您确定退出登录吗?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					logout().then(res => {
						this.$message({
							showClose: true,
							message: "退出成功",
							type: "success",
							center: true,
						});
						// 更新登录状态
						this.$store.dispatch("updateLogin", false);
						this.removeItem("isLogin");
						// 清空用户信息
						this.$store.dispatch("saveUserInfo", null);
						this.removeItem("userInfo");
						// 清空歌单
						this.$store.dispatch("saveUserSongList", []);
						this.removeItem("userSongList");
						// 清空用户喜欢的音乐id列表
						this.$store.dispatch("saveLikeSongIds", []);
						this.removeItem("likeSongIds");
					});
				})
				.catch(err => {
					err;
				});
		},
	},
	mounted() {
		// 点击其他区域关闭弹框
		document.addEventListener("mouseup", e => {
			let showuserpop = document.querySelector("#showuserpop");
			if (showuserpop) {
				if (!showuserpop.contains(e.target)) {
					this.$emit("closeuserPop");
				}
			}
		});
	},
};
</script>

<style lang="less" scoped>
.user-pop {
	position: absolute;
	top: 62px;
	right: 45px;
	box-shadow: 0px 0px 2px 2px #eef;
	background: #fff;
	border-radius: 5px;
	.data-num {
		display: flex;
		justify-content: center;
		margin: 10px 0;
		.num-item {
			padding: 0 15px;
			text-align: center;
			cursor: pointer;
		}
	}
	.userinfo-list {
		margin: 5px 0;
		li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 5px 5px;
			&:hover {
				background: #eee;
				cursor: pointer;
			}
		}
	}
}
.user-pop ::after {
	position: absolute;
	top: -30px;
	left: 85px;
	content: "";
	width: 0;
	height: 0;
	border: 15px solid;
	border-left-color: transparent;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: #fff;
}
</style>

login.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import {request} from "../request";
// 手机号登录
export function login(phone,password){
    return request({
        url:'/login/cellphone',
        params:{
            phone,
            password
        }
    })
}

// 二维码登录
// 获取二维码key
export function getQrKey(){
    return request({
        url:'/login/qr/key',
        params:{
            timestamp:Date.parse(new Date())
        }
    })
}
// 生成二维码
export function getLoginQr(key){
    return request({
        url:'/login/qr/create',
        params:{
            key,
            timestamp:Date.parse(new Date()),
            qrimg:true
        }
    })
}
// 检查二维码状态
export function checkLoginQr(key){
    return request({
        url:'/login/qr/check',
        params:{
            key,
            timestamp:Date.parse(new Date())
        }
    })
}

// 获取用户账号信息
export function getUserAccount(){
    return request({
        url:'/user/account',
        params:{
            timestamp:Date.parse(new Date())
        }
    })
}
// 签到
export function dailySignin(){
    return request({
        url:'/daily_signin',
        params:{
            type:1
        }
    })
}

// 退出登录
export function logout(){
    return request({
        url:'/logout'
    })
}


//注册账号
//获取验证码
export function getAuthcode(phone){
    return request({
        url:'/captcha/sent',
        params:{
            phone,
        }
    })
}
//检查验证码
export function checkAuthcode(phone,captcha){
    return request({
        url:'/captcha/verify',
        params:{
            phone,
            captcha
        }
    })
}
//注册(修改密码)
export function register(phone,captcha,password,nickname){
    return request({
        url:'/register/cellphone',
        params:{
            phone,
            captcha,
            password,
            nickname
        }
    })
}
// 检测手机号码是否已注册
export function checkPhoneNum(phone){
    return request({
        url:'/cellphone/existence/check',
        params:{
            phone,
        }
    })
}
// 初始化昵称
export function initNickName(nickname){
    return request({
        url:'/activate/init/profile',
        params:{
            nickname,
        }
    })
}

request.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import axios from "axios";
import { startLoading, endLoading } from "../common/Loading";
export function request(config) {
	const instance = axios.create({
		// baseURL: "/api",
		// baseURL: "https://autumnfish.cn/",
		//baseURL: "http://localhost:3000",
		baseURL: "https://netease-cloud-music-api-coral-gamma.vercel.app/",
		// baseURL: "http://124.221.63.19:3000/",
		timeout: 30000,
		withCredentials: true,
	});

	// 请求拦截
	instance.interceptors.request.use(
		config => {
			if (config.url != "/login/qr/check") {
				startLoading();
			}
			return config;
		},
		error => {
			return Promise.reject(error);
		}
	);
	// 响应拦截
	instance.interceptors.response.use(
		response => {
			endLoading();
			return response;
		},
		error => {
			endLoading();
			return Promise.reject(error);
		}
	);
	instance.defaults.withCredentials = true;
	return instance(config);
}
// 下载音乐
export function downloadMusic(config) {
	const instance = axios.create({
		timeout: 30000,
		responseType: "blob",
	});

	// 请求拦截
	instance.interceptors.request.use(
		config => {
			startLoading("准备下载...");
			return config;
		},
		error => {
			return Promise.reject(error);
		}
	);

	// 响应拦截
	instance.interceptors.response.use(
		response => {
			endLoading();
			return response;
		},
		error => {
			endLoading();
			return Promise.reject(error);
		}
	);
	return instance(config);
}

utils.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
export const getType = obj => {
	let str = Object.prototype.toString.call(obj);
	return str
		.substr(1, str.length - 2)
		.split(" ")[1]
		.toLowerCase();
};
export function isTel(s) {
	var reg = /^(\d{3,4})?\d{7,8}$/;
	if (!reg.test(s)) {
		return false;
	}
	return true;
}
export function isPhone(s) {
	var reg = /^1[356789]\d{9}$/;
	if (!reg.test(s)) {
		return false;
	}
	return true;
}
export const isArray = obj => Object.prototype.toString.call(obj) === "[object Array]";
export const hideTel = tel => tel.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3");
export const pwdReg = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,20}$/;

export const isEmptyObj = obj => {
	for (let _ in obj) {
		return 0;
	}
	return 1;
};
export const getRandom = (min, max) => {
	return Math.floor(Math.random() * (max - min + 1)) + min;
};
/**
 * 
 localStorage存取数据
 */
export const setItem = (key, value) => {
	if (typeof value === "object") {
		value = JSON.stringify(value);
	}
	window.localStorage.setItem(key, value);
};
export const getItem = key => {
	const data = window.localStorage.getItem(key);
	try {
		return JSON.parse(data);
	} catch (err) {
		return data;
	}
};
export const removeItem = key => {
	window.localStorage.removeItem(key);
};
/**
 * 将对象转成 a=1&b=2的形式
 * @param obj 对象
 */
export function obj2String(obj, arr = [], idx = 0) {
	for (let item in obj) {
		arr[idx++] = [item, obj[item]];
	}
	return new URLSearchParams(arr).toString();
}

/**
 * 时间格式化
 * @param date  时间  Date对象
 * @param fmt  格式 ‘yyyy-MM-dd HH:mm:ss’
 * @returns {*} 格式化后的时间  "2018-09-06 10:15:59"
 * @constructor
 */
export const Dateformat = (date, fmt) => {
	var o = {
		"M+": date.getMonth() + 1, //月份
		"d+": date.getDate(), //日
		"h+": date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
		"H+": date.getHours(), //小时
		"m+": date.getMinutes(), //分
		"s+": date.getSeconds(), //秒
		"q+": Math.floor((date.getMonth() + 3) / 3), //季度
		S: date.getMilliseconds(), //毫秒
	};
	if (/(y+)/.test(fmt)) {
		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
	}
	for (var k in o) {
		if (new RegExp("(" + k + ")").test(fmt)) {
			fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
		}
	}
	return fmt;
};

/**
 * 获取html字符串中的文字内容（去掉标签）
 * @param htmlcontent
 * @return
 */
export const filterText = str => {
	if (!str) return str;
	str = str.replace(/<\/?[^>]*>/g, ""); // 去除HTML tag
	str = str.replace(/[ | ]*\n/g, "\n"); // 去除行尾空白
	str = str.replace(/ /gi, ""); // 去掉
	str = str.replace(/&nbsp;/g, ""); // 去掉
	return str;
};

export function debounce(callback, time) {
	// 定时器
	let timer = null;
	// 返回一个函数
	return function(e) {
		// 1 在一定时间内再次触发事件说明已经存在一个定时器在工作，清空当前工作的定时器。
		// 2 但是如果定时器的回调已经执行过了，再次触发事件时定时器变量不为空
		// 而是上一次定时器执行结束的值，所以还会执行下面代码，但是这是无用的，需要在定时器里的回调执行结束后把定时器变量设为null
		if (timer !== null) {
			// 清空定时器
			clearTimeout(timer);
		}
		// 启动定时器
		timer = setTimeout(() => {
			// 执行回调
			callback.call(this, e);
			// 重置定时器变量为null
			timer = null;
		}, time);
	};
}

export function throttle(callback, wait) {
	// 定义开始时间
	let start = 0;
	// 返回结果是一个函数
	return function(e) {
		// 获取当前时间戳
		let now = Date.now();
		if (now - start >= wait) {
			// 如果满足条件 就执行回调函数
			callback.call(this, e);
			start = now;
		}
	};
}

// 检测是全屏
export function isFullscreen() {
	var fullscreenEle = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
	return fullscreenEle;
}
/**页面最大化 */
export function requestFullScreen() {
	const docElm = document.documentElement;
	if (docElm.requestFullscreen) {
		docElm.requestFullscreen();
	} else if (docElm.msRequestFullscreen) {
		docElm.msRequestFullscreen();
	} else if (docElm.mozRequestFullScreen) {
		docElm.mozRequestFullScreen();
	} else if (docElm.webkitRequestFullScreen) {
		docElm.webkitRequestFullScreen();
	}
}
/**退出最大化 */
export function exitFullscreen() {
	const de = window.parent.document;

	if (de.exitFullscreen) {
		de.exitFullscreen();
	} else if (de.mozCancelFullScreen) {
		de.mozCancelFullScreen();
	} else if (de.webkitCancelFullScreen) {
		de.webkitCancelFullScreen();
	} else if (de.msExitFullscreen) {
		de.msExitFullscreen();
	}
}