Merge pull request 'xbx' (#23) from xbx into master

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

src/api/index.ts

@@ -1,6 +1,19 @@
 import { get, post } from './base'
 import { AxiosPromise } from 'axios'
 
+/**
+ * 请求验证码
+ * @param phone 手机号
+ * @param type 类型 0国内 1国外
+ */
+
+export function sendsms(phone: string, type?: number):  Promise<AxiosPromise>{
+    return post('SendSms',{phone, type})
+}
+
+
+// 下面是示例接口 可以删除
+
 /**
  * 请求用户信息
  */

src/components/Menu.vue

@@ -11,7 +11,7 @@
             <div v-for="(i,j) in list" :key="j" style="overflow: hidden;" @click="routeto(j)">
                 <div class="item" :class="{'selitem': j == selnum, 'seltop': j == selnum - 1, 'selbottom': j == selnum + 1}">
                     <div class="route">
-                        <img src="" alt="" class="icon">
+                        <img :src="i.icon" alt="" class="icon">
                         <div class="title">{{i.name}}</div>
                     </div>
                     <img src="" alt="" class="right">
@@ -79,7 +79,6 @@
                 .icon{
                     width: 15px;
                     height: 15px;
-                    background-color: #0f0;
                 }
                 .title{
                     font-size: 13px;
@@ -118,47 +117,54 @@
 }
 </style>
 <script lang="ts">
+import router from '@/router';
 import { defineComponent, ref } from 'vue';
 
-
 export default defineComponent({
     setup(){
         interface MenuItem {
             icon: string;
+            sleicon: string;
             name: string;
             route: string;
         }
         // 左侧的列表数组
         const list: Array<MenuItem> = [
             {  
-                icon: "",
+                icon: "../static/images/wode1.ping",
+                sleicon:"",
                 name: "我的档案",
-                route: ""
+                route: "/mine/archives"
             },
             {  
-                icon: "",
+                icon: "../static/images/xiayig.ping",
+                sleicon:"",
                 name: "发布直播",
-                route: ""
+                route: "/mine/webcast"
             },
             {  
-                icon: "",
+                icon: "../static/images/shipin.png",
+                sleicon:"shipin.png",
                 name: "上传视频",
-                route: ""
+                route: "/mine/video"
             },
             {  
-                icon: "",
+                icon: "/static/images/yinhangka.png",
+                sleicon:"",
                 name: "我的钱包",
-                route: ""
+                route: "/mine/wallet"
             },
             {  
-                icon: "",
+                icon: "../static/images/tongji.png",
+                sleicon:"",
                 name: "列表统计",
-                route: ""
+                route: "/mine/liststatistic"
             },
             {  
-                icon: "",
+                icon: "../static/images/bangzhu@2x.png",
+                sleicon:"",
                 name: "关于Beelink",
-                route: ""
+                route: "/mine/aboutus"
             }
         ]
         // 当前选中的index
@@ -170,6 +176,9 @@ export default defineComponent({
         function routeto(index: number): void {
             console.log(index)
             selnum.value = index;
+            router.push({
+                path: list[index].route
+            })
 
         }
         return{

src/components/NavTop.vue

@@ -1,33 +1,34 @@
 <template>
     <div class="nav">
-        <div class="logo">
+        <div class="logo" :style="{'background-color': types == 0 ? 'unset' : ''}">
-            <img src="" alt="" class="img">
+
-            <div class="title">Beelink</div>
+            <img src="@/static/images/logo.png" alt="" class="img">
+            <div class="title" :style="{'color': types == 0 ? '#07AD97' : ''}">Beelink</div>
         </div>
         <div class="navigation">
-            <div class="item" v-for="(i,j) in nav" :key="j">
+            <div class="item" v-for="(i,j) in nav" :key="j" @click="navto(j)">
                 {{i.name}}
             </div>
         </div>
         <div style="width: 100%"></div>
         <div class="setting">
             <div class="item">
-                <img src="" alt="" class="icon">
+                <img src="@/static/images/shijian.png" alt="" class="icon">
                 <div class="name">北京 GMT +08:00</div>
-                <img src="" alt="" class="down">
+                <img src="@/static/images/jiantou2.png" alt="" class="down">
             </div>
             <div class="item">
-                <img src="" alt="" class="icon">
+                <img src="@/static/images/qianbi.png" alt="" class="icon">
                 <div class="name">人民币</div>
-                <img src="" alt="" class="down">
+                <img src="@/static/images/jiantou2.png" alt="" class="down">
             </div>
             <div class="item">
-                <img src="" alt="" class="icon">
+                <img src="@/static/images/yuyan.png" alt="" class="icon">
                 <div class="name">中文</div>
-                <img src="" alt="" class="down">
+                <img src="@/static/images/jiantou2.png" alt="" class="down">
             </div>
             <div class="item">
-                <img src="" alt="" class="icon">
+                <img src="@/static/images/rili.png" alt="" class="icon">
                 <div class="name">日历</div>
             </div>
         </div>
@@ -36,7 +37,6 @@
 <style lang="scss" scoped>
 .nav{
     display: flex;
-    background-color: #fff;
     min-width: 1366px;
     user-select: none;
     .logo{
@@ -49,7 +49,6 @@
         .img{
             width: 38px;
             height: 38px;
-            background-color: #0f0;
             margin-left: 14px;
             border-radius: 50%;
         }
@@ -93,7 +92,6 @@
             .icon{
                 width: 16px;
                 height: 16px;
-                background-color: #0f0;
             }
             .name{
                 margin-left: 6px;
@@ -105,22 +103,29 @@
                 width: 9px;
                 height: 5px;
                 margin-left: 20px;
-                background-color: #0f0;
             }
         }
     }
 }
 </style>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import router from '@/router';
+import { defineComponent, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 export default defineComponent({
-    setup(){
+    props:{
+        type: {
+            type: Number,
+            default:0
+        }
+    },
+    setup(props){
         // console.log(useRoute().currentRoute.value.name)
         const routes = useRoute();
         console.log(routes.path);
-
+        const types = ref(props.type)
+        console.log(types.value)
         interface Nav{
             name: string;
             route: string;
@@ -132,7 +137,7 @@ export default defineComponent({
             },
             {
                 name: "视频管理",
-                route: ""
+                route: "/regime/video"
             },
             {
                 name: "订阅者管理",
@@ -140,11 +145,18 @@ export default defineComponent({
             },
             {
                 name: "个人中心",
-                route: ""
+                route: "/mine/archives"
             }
         ]
+        function navto(index: number){
+            router.push({
+                path: nav[index].route
+            })
+        }
         return {
-            nav
+            nav,
+            types,
+            navto
         }
     }
 })

src/components/VideoReview.vue

@@ -60,7 +60,7 @@
     .reply{
         padding-top: 28px;
         border-top: 1px solid #ededed;
-        &::v-deep .ant-input{
+        ::v-deep() .ant-input{
             font-size: 11px;
         }
         .send{

src/config/axiosConfig.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-axios.defaults.baseURL = 'https://theluyuan.com/api/';
+axios.defaults.baseURL = 'http://beelink.com/home/';
 axios.defaults.headers.common['Authorization'] = 'token';
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 

src/layout/Mine.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="mine" :style="{height:height + 'px'}">
-        <NavTop style="flex-shrink:0"></NavTop>
+        <NavTop :type="1" style="flex-shrink:0"></NavTop>
         <div class="body">
             <Menu></Menu>
             <div class="container">

src/layout/Regime.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="mine" :style="{height:height + 'px'}">
-        <NavTop style="flex-shrink:0"></NavTop>
+        <NavTop :type="1" style="flex-shrink:0"></NavTop>
         <div class="body">
             <router-view/>
         </div>

src/router/index.ts

@@ -81,11 +81,6 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/',
-    name: 'Home',
-    component: () => import(/* webpackChunkName: "about" */ '../components/NavTop.vue')
-  },
-  {
-    path: '/login',
     name: 'Login',
     component:Login
   },
@@ -99,11 +94,7 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Reset',
     component: () => import('../views/login/Reset.vue')
   },
-  {
+
-    path: '/about',
-    name: 'About',
-    component: () => import('../views/login/About.vue')
-  },
 ]
 
 const router = createRouter({

src/views/login/About.vue

@@ -89,10 +89,10 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.about /deep/  .nav-bottom  /deep/ .nav-container{
+.about ::v-deep()  .nav-bottom  ::v-deep() .nav-container{
   color:white!important
 }
-.about /deep/ .nav-bottom /deep/ .copyright{
+.about ::v-deep() .nav-bottom ::v-deep() .copyright{
   color:white!important
 }
 .about {

src/views/login/Login.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="login">
+     <NavTop :type="0" style="flex-shrink:0"></NavTop>
     <div class="box">
       <div class="left">
         <div class="title">
@@ -23,7 +24,7 @@
                   <a-select-option value="Jiangsu"> Jiangsu </a-select-option>
                 </a-select>
                 <div class="line"></div>
-                <a-input style="width: 50%" placeholder="请输入您的手机号" />
+                <a-input v-model:value="phone" style="width: 50%" placeholder="请输入您的手机号" />
               </a-input-group>
             </a-form-item>
             <a-form-item label="验证码" class="form-item">
@@ -145,10 +146,14 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 import LoginTab from "@/components/login/LoginTab.vue";
+import NavTop from "@/components/NavTop.vue"
+import { sendsms } from '@/api';
+
 export default defineComponent({
   name: "Login",
   components: {
     LoginTab,
+    NavTop
   },
   setup() {
     const formLayout = {
@@ -157,7 +162,7 @@ export default defineComponent({
     };
     const tabselected = ref(1);  //tab切换的标志
     const time = ref(60);//倒计时
-
+    const phone = ref(""); // 手机号
     /**
      * @param val  子组件传过来的值
      */
@@ -172,7 +177,10 @@ export default defineComponent({
      * 点击获取验证码 触发倒计时
      */
     const getcode: () => void = () => {
-      console.log(11111);
+      console.log(phone.value);
+      sendsms("86" + phone.value, 0).then((res)=>{
+        console.log(res)
+      })
       const timestep = setInterval(() => {
         console.log(11112);
         time.value = time.value - 1;
@@ -190,15 +198,16 @@ export default defineComponent({
       Selectnum,
       getcode,
       time,
+      phone
     };
   },
 });
 </script>
 <style lang="scss" scoped>
-.login /deep/ .ant-select-selection {
+.login ::v-deep() .ant-select-selection {
   border: none;
 }
-.login /deep/ .ant-input {
+.login ::v-deep() .ant-input {
   border: none;
 }
 .ant-input:focus {
@@ -206,10 +215,10 @@ export default defineComponent({
   border-bottom: 1px solid white !important;
   box-shadow: none;
 }
-.login /deep/ .ant-form-item-label {
+.login ::v-deep() .ant-form-item-label {
   line-height: 14px;
 }
-.login /deep/ .ant-form-item /deep/ label {
+.login ::v-deep() .ant-form-item ::v-deep() label {
   color: #0dbba4;
   font-size: 11px;
   left: 1px;
@@ -220,8 +229,8 @@ export default defineComponent({
   background: url("../../static/images/loginbg.png");
   background-size: 100% 130%;
   background-repeat: no-repeat;
-  padding-top: 145px;
   .box {
+    padding-top: 145px;
     display: flex;
     justify-content: space-around;
     .left {
@@ -381,7 +390,6 @@ export default defineComponent({
       }
       .relation{
         height:29px;
-        background: gold;
         display: flex;
         line-height: 29px;
         margin-top: 52px;

src/views/login/Reset.vue

@@ -165,10 +165,10 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.login /deep/ .ant-select-selection {
+.login ::v-deep() .ant-select-selection {
   border: none;
 }
-.login /deep/ .ant-input {
+.login ::v-deep() .ant-input {
   border: none;
 }
 .ant-input:focus {
@@ -176,10 +176,10 @@ export default defineComponent({
   border-bottom: 1px solid white !important;
   box-shadow: none;
 }
-.login /deep/ .ant-form-item-label {
+.login ::v-deep() .ant-form-item-label {
   line-height: 14px;
 }
-.login /deep/ .ant-form-item /deep/ label {
+.login ::v-deep() .ant-form-item ::v-deep() label {
   color: #0dbba4;
   font-size: 11px;
   left: 1px;

src/views/login/Sign.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="login">
+     <NavTop :type="0" style="flex-shrink:0"></NavTop>
     <div class="box">
       <div :class="stepnow != 2 ? 'left' : 'left left1'">
         <div class="title">
@@ -128,9 +129,11 @@
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
+import NavTop from "@/components/NavTop.vue"
+
 export default defineComponent({
   name: "Sign",
-  components: {},
+  components: {NavTop},
   setup() {
     const formLayout = {
       labelCol: 4,
@@ -188,10 +191,10 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.login /deep/ .ant-select-selection {
+.login ::v-deep() .ant-select-selection {
   border: none;
 }
-.login /deep/ .ant-input {
+.login ::v-deep() .ant-input {
   border: none;
 }
 .ant-input:focus {
@@ -199,10 +202,10 @@ export default defineComponent({
   border-bottom: 1px solid white !important;
   box-shadow: none;
 }
-.login /deep/ .ant-form-item-label {
+.login ::v-deep() .ant-form-item-label {
   line-height: 14px;
 }
-.login /deep/ .ant-form-item /deep/ label {
+.login ::v-deep() .ant-form-item ::v-deep() label {
   color: #0dbba4;
   font-size: 11px;
   left: 1px;
@@ -213,8 +216,9 @@ export default defineComponent({
   background: url("../../static/images/loginbg.png");
   background-size: 100% 130%;
   background-repeat: no-repeat;
-  padding-top: 145px;
   .box {
+    padding-top: 145px;
+
     display: flex;
     justify-content: space-around;
     .left1 {

src/views/mine/Addaccount.vue

@@ -162,11 +162,17 @@ export default defineComponent({
     const paytype = ref(1);
     const paytypeforign = ref(1);
 
-    const onChange: (e: any) => void = (e: any) => {
+    interface Changes {
+        target: {
+          value: number;
+        };
+    }
+
+    const onChange: (e: Changes) => void = (e: Changes) => {
       console.log("radio checked", e.target.value);
       paytype.value = e.target.value;
     };
-    const onChange1: (e: any) => void = (e: any) => {
+    const onChange1: (e: Changes) => void = (e: Changes) => {
       console.log("radio checked", e.target.value);
       paytypeforign.value = e.target.value;
     };
@@ -183,19 +189,19 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.cashout /deep/ .ant-breadcrumb > span:last-child {
+.cashout ::v-deep() .ant-breadcrumb > span:last-child {
   color: #08ae98;
 }
-.cashout /deep/ .ant-radio-wrapper {
+.cashout ::v-deep() .ant-radio-wrapper {
   display: flex;
 }
-.cashout /deep/ .ant-radio-checked /deep/ .ant-radio-inner {
+.cashout ::v-deep() .ant-radio-checked ::v-deep() .ant-radio-inner {
   border-color: #08ae98 !important;
 }
-.cashout /deep/ .ant-radio-inner::after {
+.cashout ::v-deep() .ant-radio-inner::after {
   background: #08ae98 !important;
 }
-.cashout /deep/ .ant-radio {
+.cashout ::v-deep() .ant-radio {
   //   top: 43px;
 }
 .cashout {

src/views/mine/Archives.vue

@@ -496,7 +496,7 @@ export default defineComponent({
             }
             .main-container {
                 margin-left: 17px;
-                ::v-deep .input-box {
+                ::v-deep() .input-box {
                     display: flex;
                     align-items: center;
                     margin-bottom: 28px;
@@ -602,7 +602,7 @@ export default defineComponent({
                 }
             }
         }
-        ::v-deep .modal-dialog {
+        ::v-deep() .modal-dialog {
             .close {
                 width: 14px;
                 height: 14px;

src/views/mine/Cashout.vue

@@ -100,13 +100,13 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.cashout /deep/ .ant-breadcrumb > span:last-child {
+.cashout ::v-deep() .ant-breadcrumb > span:last-child {
   color: #08ae98;
 }
-.cashout /deep/ .ant-radio-wrapper {
+.cashout ::v-deep() .ant-radio-wrapper {
   display: flex;
 }
-.cashout /deep/ .ant-radio {
+.cashout ::v-deep() .ant-radio {
   top: 43px;
 }
 .cashout {

src/views/mine/Cashoutdetail.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent } from "vue";
 import NavBottom from "@/components/NavBottom.vue";
 export default defineComponent({
   name: "Cashoutdetail",
@@ -80,7 +80,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.transaction /deep/ .ant-breadcrumb > span:last-child {
+.transaction ::v-deep() .ant-breadcrumb > span:last-child {
   color: #08ae98;
 }
 .transaction{

src/views/mine/ReleaseVideo.vue

@@ -156,7 +156,7 @@ export default defineComponent({
     padding: 46px;
     border-radius: 17px;
     position: relative;
-    ::v-deep .ant-form {
+    ::v-deep() .ant-form {
         .title {
             font-size: 12px;
             font-weight: bold;

src/views/mine/ReleaseWebcast.vue

@@ -202,7 +202,7 @@ export default defineComponent({
     padding: 46px;
     border-radius: 17px;
     position: relative;
-    ::v-deep .ant-form {
+    ::v-deep() .ant-form {
         .title {
             font-size: 12px;
             font-weight: bold;
@@ -322,7 +322,7 @@ export default defineComponent({
         }
     }
     .modal-container {
-        ::v-deep .modal-dialog {
+        ::v-deep() .modal-dialog {
             .close {
                 width: 14px;
                 height: 14px;

src/views/mine/Transaction.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent } from "vue";
 import NavBottom from "@/components/NavBottom.vue";
 export default defineComponent({
   name: "Transaction",
@@ -96,7 +96,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.transaction /deep/ .ant-breadcrumb > span:last-child {
+.transaction ::v-deep() .ant-breadcrumb > span:last-child {
   color: #08ae98;
 }
 .transaction{

src/views/mine/Transactiondetail.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent } from "vue";
 import NavBottom from "@/components/NavBottom.vue";
 export default defineComponent({
   name: "Transactiondetail",
@@ -61,7 +61,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.transaction /deep/ .ant-breadcrumb > span:last-child {
+.transaction ::v-deep() .ant-breadcrumb > span:last-child {
   color: #08ae98;
 }
 .transaction{

src/views/mine/Wallet.vue

@@ -11,8 +11,8 @@
         <div class="topinfo">
           <div class="title">我的钱包</div>
 
-          <div class="topbtn">立即提现</div>
+          <div class="topbtn" @click="navto(2)">立即提现</div>
-          <div class="topbtn topbtn1">提现记录</div>
+          <div class="topbtn topbtn1" @click="navto(3)">提现记录</div>
         </div>
         <div class="line"></div>
         <div class="accounts">
@@ -38,7 +38,7 @@
           </div>
         </div>
       </div>
-      <div class="add">
+      <div class="add" @click="navto(1)">
         <img src="@/static/images/walletadd.png" alt="" class="icon" />
         <div>添加新的账户</div>
       </div>
@@ -201,8 +201,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent } from "vue";
 import NavBottom from "@/components/NavBottom.vue";
+import router from '@/router';
 export default defineComponent({
   name: "Wallet",
   components: {
@@ -211,15 +212,26 @@ export default defineComponent({
   setup() {
     const ifchina = false;
     const ifmingxi = true;
+    function navto(index: number){
+      let url = "";
+      switch (index){
+        case 1: url = "/mine/addaccount"; break;
+        case 2: url = "/mine/cashout"; break;
+      }
+      router.push({
+        path: url
+      })
+    }
     return {
       ifchina,
       ifmingxi,
+      navto
     };
   },
 });
 </script>
 <style lang="scss" scoped>
-.wallet /deep/ .ant-breadcrumb > span:last-child {
+.wallet ::v-deep() .ant-breadcrumb > span:last-child {
   color: #08ae98;
 }
 .wallet {

src/views/regime/Video.vue

@@ -111,13 +111,13 @@
         bottom:  114px;
         display: flex;
         justify-content: center;      
-        &::v-deep .ant-pagination-next > .ant-pagination-item-link, &::v-deep .ant-pagination-prev > .ant-pagination-item-link, &::v-deep .ant-pagination-item, &::v-deep .ant-pagination-jump-next-custom-icon, &::v-deep .ant-pagination-jump-prev-custom-icon{
+        ::v-deep() .ant-pagination-next > .ant-pagination-item-link, ::v-deep() .ant-pagination-prev > .ant-pagination-item-link, ::v-deep() .ant-pagination-item, ::v-deep() .ant-pagination-jump-next-custom-icon, ::v-deep() .ant-pagination-jump-prev-custom-icon{
             border: 1px solid #08AE98;
         }
-        &::v-deep .ant-pagination-item-active a{
+        ::v-deep() .ant-pagination-item-active a{
             color: #fff;
         }
-        &::v-deep .ant-pagination-item-active{
+        ::v-deep() .ant-pagination-item-active{
             background-color: #08AE98;
         }
     }