321

src/main.ts

@@ -8,6 +8,9 @@ import './style.less'
 import Util from './util'
 import service from './service'
 import { Plugin } from 'vue-fragment'
+import { Dialog } from 'vant';
+
+Vue.use(Dialog);
 Vue.use(Util)
 Vue.use(Plugin)
 Vue.use(service)

src/router/index.ts

@@ -80,6 +80,11 @@ const routes: Array<RouteConfig> = [
       },
       component: () => import('@/view/User/index.vue')
     },
+    {
+      path:'/User/edit/:type',
+      name:'Edit',
+      meta:{}
+    },
   {
     path: '/auth',
     component: () => import("@/view/Auth/index.vue"),

src/view/User/index.vue

 <template>
 <Layout-Child>
     <div class=" w-11/12 mx-auto py-6 text-font-white">
-        <app-cell text='头像' boxType='border' icon='icon-xiayibu'></app-cell>
-        <app-cell text='昵称' boxType='border' icon='icon-xiayibu'></app-cell>
-        <app-cell text='手机号' boxType='border' icon='icon-xiayibu'></app-cell>
+        <app-cell text='头像' boxType='border' :value='userInfo.avatar?userInfo.avatar:""' icon='icon-xiayibu'></app-cell>
+        <app-cell text='昵称' boxType='border' :value='userInfo.nickname?userInfo.nickname:"无昵称"' icon='icon-xiayibu'></app-cell>
+        <app-cell text='手机号' boxType='border' :value='userInfo.telephone?userInfo.telephone:""' icon='icon-xiayibu'></app-cell>
         <app-cell text='个性签名' boxType='border' icon='icon-xiayibu'></app-cell>
     </div>
     <div class="fixed bottom-0 w-full left-0 z-30">
-        <app-btn text="退出登录" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-red" border='none'></app-btn>
+        <app-btn text="退出登录" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-red" border='none'  @btnClicked='toggleDialog' ></app-btn>
     </div>
 </Layout-Child>
 </template>
@@ -16,10 +16,24 @@
 import Vue from 'vue';
 
 export default Vue.extend({
+    data(){
+        return{
+            userInfo:this.$util.userMsg.getUserMsg()
+        }
+    },
   components:{
        'Layout-Child':()=>import('@/layout/Child.vue'),
        'app-cell':()=>import('@/components/common/Cell.vue'),
         'app-btn':()=>import('@/components/common/Btn.vue')
   },
+  methods:{
+      toggleDialog(){
+          console.log(111);
+          
+             this.$dialog.alert({
+                message: 'Content',
+            });
+      }
+  }
 });
 </script>