Merge pull request '首页登录完成' (#26) from xbx into master

Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/26

src/api/base.ts

@@ -1,5 +1,4 @@
 import axios from '../config/axiosConfig'
-import { AxiosPromise } from 'axios';
 
 axios.interceptors.response.use((response)=>{
     return response.data;
@@ -7,11 +6,11 @@ axios.interceptors.response.use((response)=>{
     return error;
 })
 
-function get(url: string,data?: object): Promise<AxiosPromise> {
+function get(url: string,data?: object) {
     return axios.get(url,{params:data})
 }
 
-function post(url: string,data?: object): Promise<AxiosPromise> {
+function post(url: string,data?: object) {
     return axios.post(url,data)
 }
 

src/api/index.ts

@@ -1,5 +1,4 @@
 import { get, post } from './base'
-import { AxiosPromise } from 'axios'
 
 /**
  * 请求验证码
@@ -7,32 +6,10 @@ import { AxiosPromise } from 'axios'
  * @param type 类型 0国内 1国外
  */
 
-export function sendsms(phone: string, type?: number): Promise<AxiosPromise>{
+export function sendsms(phone: string, type?: number){
     return post('SendSms',{phone, type})
 }
 
-export function loginpass(phone: string, password: string): Promise<AxiosPromise>{
+export function loginpass(phone: string, password: string){
     return post("login",{type: 2,username: phone, password: password})
 }
-
-
-// 下面是示例接口 可以删除
-
-/**
- * 请求用户信息
- */
-
-export function getinfo(): Promise<AxiosPromise>{
-    return get("a")
-}
-
-/**
- * 提交修改之后的用户信息
- * @param data 
- * 
- */
-
-export function seninfo(data: object): Promise<AxiosPromise>{
-    return post("b",data)
-}
-

src/config/axiosConfig.ts

@@ -1,6 +1,7 @@
+import { getValue } from '@/utils/common';
 import axios from 'axios'
 axios.defaults.baseURL = '/beelink/public/home/';
-axios.defaults.headers.common['Authorization'] = 'token';
+axios.defaults.headers.common['Authorization'] = "Bearer " + getValue("token");
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
 export default axios

src/static/js/common.ts

@@ -1,20 +0,0 @@
-/**
- * 图片转Base64
- */
-function getBase64(file: File): Promise<string | ArrayBuffer | null> {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = error => reject(error);
-    });
-}
-/**
- * 预览图片
- */
-export async function previewCover(file: any): Promise<string> {
-    if (!file.url && !file.preview) {
-        file.preview = await getBase64(file.originFileObj);
-    }
-    return file.url || file.preview || '';
-}

src/types/index.d.ts

@@ -18,4 +18,11 @@ export interface VideoInfo {
     type: string;
     name: string;
     uid: string;
+}
+
+// 返回数据
+export interface ResData{
+    code?: number;
+    msg?: string;
+    data?: any;
 }

src/utils/common.ts

@@ -0,0 +1,55 @@
+/**
+ * 图片转Base64
+ */
+function getBase64(file: File): Promise<string | ArrayBuffer | null> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = error => reject(error);
+    });
+}
+/**
+ * 预览图片
+ */
+export async function previewCover(file: any): Promise<string> {
+    if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj);
+    }
+    return file.url || file.preview || '';
+}
+
+/**
+ * 存储对应key
+ * @param key 键值
+ * @param value 内容 object自动序列化
+ */
+
+export function saveValue(key: string, value: any): boolean{
+    if(typeof value == 'object'){
+        value = JSON.stringify(value)
+    }
+    try {
+        localStorage.setItem(key, value);
+        return true;
+    } catch (error) {
+        return false;
+    }
+
+}
+
+/**
+ * 获取对应key
+ * @param key 键值
+ */
+export function getValue(key: string): any{
+    let value = localStorage.getItem(key);
+    if(value != null){
+        try {
+            value = JSON.parse(value);
+        } catch (error) {
+            return value;
+        }
+    }
+    return value;
+}

src/views/login/Login.vue

@@ -150,6 +150,10 @@ import { defineComponent, reactive, ref } from "vue";
 import LoginTab from "@/components/login/LoginTab.vue";
 import NavTop from "@/components/NavTop.vue"
 import { loginpass, sendsms } from '@/api';
+import { message } from 'ant-design-vue';
+import { ResData } from '@/types';
+import { saveValue } from '@/utils/common';
+import router from '@/router';
 
 export default defineComponent({
   name: "Login",
@@ -166,8 +170,8 @@ export default defineComponent({
     const time = ref(60);//倒计时
     const phone = ref(""); // 手机号
     const userinfo = reactive({
-      phone: '',
-      password: ''
+      phone: '15652030036',
+      password: '123456'
     })
     /**
      * @param val  子组件传过来的值
@@ -201,8 +205,19 @@ export default defineComponent({
 
     function login(): void {
         console.log(userinfo.phone,userinfo.password)
-        loginpass(userinfo.phone,userinfo.password).then((res)=>{
-          console.log(res)
+        
+        loginpass(userinfo.phone,userinfo.password).then((res: ResData) =>{
+          console.log(res.code)
+          if(res.code == 1){
+            message.error(res.msg)
+          }else{
+            console.log(res.data)
+            if(!saveValue("token", res.data.api_token)){
+              message.error("存储错误, 请允许网页使用本地存储！")
+            }else{
+              router.push("/mine/archives")
+            }
+          }
         })
     }
     return {

src/views/mine/ReleaseVideo.vue

@@ -52,7 +52,7 @@
 import { defineComponent, reactive, Ref, ref } from 'vue';
 import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import NavBottom from '@/components/NavBottom.vue';
-import { previewCover } from '@/static/js/common';
+import { previewCover } from '@/utils/common';
 import { FromSend, ImgInfo, VideoInfo } from '@/types';
 
 export default defineComponent({

src/views/mine/ReleaseWebcast.vue

@@ -86,7 +86,7 @@ import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import { useForm } from '@ant-design-vue/use';
 import NavBottom from '@/components/NavBottom.vue';
 import RankList from './RankList.vue';
-import { previewCover } from '@/static/js/common';
+import { previewCover } from '@/utils/common';
 import { FromSend, ImgInfo } from "@/types/index"
 
 export default defineComponent({