个人中心布局及功能

babel.config.js

@@ -9,6 +9,11 @@ module.exports = {
                 "libraryName": "element-ui",
                 "styleLibraryName": "theme-chalk"
             }
-        ]
+        ],
+        ["import", {
+            "libraryName": "vant",
+            "libraryDirectory": "es",
+            "style": true
+        }]
     ]
 };

src/main.ts

@@ -71,6 +71,10 @@ import {
     Message,
     Notification
 } from 'element-ui';
+import { Cell, CellGroup, Icon } from 'vant';
+Vue.use(Cell);
+Vue.use(CellGroup);
+Vue.use(Icon);
 
 Vue.use(Pagination);
 Vue.use(Dialog);

src/views/index/index.ts

@@ -35,6 +35,7 @@ export default class Index extends Vue {
         if(localStorage.getItem('access_token')){
            let res = await Http.getInstance().userinfo();
             let resbanner = await Http.getInstance().getBannerList();
+            console.log('resbanner', resbanner);
             this.data.id_card = res.data.id_card;
             this.data.bannerlist = resbanner.data;
             this.citycode = res.data.social_city  as string;

src/views/index/index.vue

@@ -21,12 +21,10 @@
             <router-link class="btn-lg btn-calc text-left" to="/calc">
                 <img src="../../assets/image/ico_04.png" alt="">
                 <span style="font-size: 1.5rem">社保计算器</span></router-link>
-            <!-- to="/social?is_fund=0" -->
             <a class="btn-lg btn-social text-left" @click="hSocialInsurance">
                 <img src="../../assets/image/ico_05.png" alt="">
                 <span  style="font-size: 1.5rem">社保代缴</span>
             </a>
-            <!-- @click="hFiveSocial" to="/social?is_fund=1" -->
             <a class="btn-lg btn-social text-left" @click="hFiveSocial">
                 <img src="../../assets/image/ico_06.png" alt="">
                 <span  style="font-size: 1.5rem">五险一金</span>

src/views/user/index.vue

@@ -1,18 +1,16 @@
 <script src="../index/index.ts"></script>
 <template>
     <div class="user-wrap">
-        <div class="tuichu" @click="exit">
-            <img src="../../assets/image/exit_03.png" alt="" >
-            退出
-        </div>
         <div class="jumbotron jumbotron-fluid">
             <div class="avator-top">
-                <router-link   to="/user/info">
                    <img class="avator" :src="avatar">
-                   <span class="nicheng">{{nickname}}</span><br>
-                   <span class="phone">{{data.phone}}  </span>
-                    <b class="bbb"><img src="../../assets/image/arrow_03.png" alt=""></b>
-                </router-link>
+                   <!-- <span class="nicheng">{{nickname}}</span><br> -->
+                   <span class="phone">{{data.phone}}  </span><br>
+                   <span class="userInfo" @click="$router.push('/user/info')">
+                       <img src="../../assets/image/userInfo@2x.png" class="userInfo_icon" alt="">
+                        <span class="editInfo">编辑资料</span>
+                   </span>
+                    <b class="bbb"><img src="../../assets/image/arrow_03_2@2x.png" alt=""></b>
 <!--                <div class="canbao">-->
 <!--                    已参保  到期时间2019-02-->
 <!--                </div>-->
@@ -28,30 +26,25 @@
             </div>
         </div>
         <div class="info">
-            <div class="list-group  ">
-                <router-link class="list-group-item" to="/order/list">
-                    我的订单
-                </router-link>
-                <router-link class="list-group-item" to="/user/discount">
-                    我的优惠券
-                </router-link>
-                <router-link class="list-group-item text-center" to="/user/share">
-                    邀请好友
-                </router-link>
-                <router-link class="list-group-item text-center" to="/user/inviter">
-                    好友列表
-                </router-link>
-                <div class="list-group-item" to="" @click="opentwo">
-                    联系客服
-                </div>
-            </div>
+            <van-cell-group >
+                <van-cell title="我的订单" icon="orders-o" is-link @click="$router.push('/order/list')" />
+                <van-cell title="我的优惠劵" icon="coupon-o" is-link  @click="$router.push('/user/discount')"/>
+                <van-cell title="邀请好友" is-link icon="user-circle-o" @click="$router.push('/user/share')">
+                    <!-- <template slot="icon">
+                        <van-icon name="userFriend" class="userIcon" />
+                    </template> -->
+                </van-cell>
+                <van-cell title="好友列表" icon="friends-o" is-link @click="$router.push('/user/inviter')" />
+                <van-cell title="联系客服" icon="service-o" is-link @click="opentwo" />
+                <van-cell title="退出登录" icon="setting-o" is-link @click="exit" />
+            </van-cell-group>
         </div>
         <div class="query bottom-user">
-            <a class="col-6 text-center" href="http://fuwu.rsj.beijing.gov.cn/csibiz/indinfo/login.jsp">
-                <img src="../../assets/image/ico_07.png" alt="">
+            <a class="col-6  text-center " href="http://fuwu.rsj.beijing.gov.cn/csibiz/indinfo/login.jsp">
+                <img src="../../assets/image/shebao@2x.png" alt="">
             </a>
             <a class="col-6 text-center" href="https://grwsyw.gjj.beijing.gov.cn/ish/">
-                <img src="../../assets/image/ico_08.png" alt="">
+                <img src="../../assets/image/accumulation@2x.png" alt="">
             </a>
         </div>
     </div>
@@ -64,6 +57,7 @@
     import wx from "weixin-jsapi";
     import router from '@/router';
     import {MessageBox} from 'element-ui';
+    const userFriend = require("../../assets/image/use_friend@2x.png")
 
     @Component({
         components: {}
@@ -208,13 +202,15 @@
     @import '@/assets/scss/variables.scss';
     .user-wrap {
         width: 100%;
+        height: 100%;
         overflow-x: hidden;
         position: relative;
+        background-color: #edf0f5;
     }
 
     .jumbotron {
         text-align: left;
-        background: #20b452;
+        background: #fff;
         padding: 2rem 0 0;
     }
     .avator-top{
@@ -250,36 +246,61 @@
         border-radius: 6rem;
         margin-top: 1rem;
     }
-    .nicheng{
+    // .nicheng{
+    //     font-size: 1.6rem;
+    //     padding-left: 1rem;
+    //     color: white;
+    // }
+    .phone{
         font-size: 1.6rem;
         padding-left: 1rem;
-        color: white;
+        color: #666;
     }
-    .phone{
+    .userInfo{
         font-size: 1.4rem;
         position: absolute;
         top: 4rem;
         left: 7.5rem;
         color: white;
     }
+    .userInfo_icon {
+        display: inline-block;
+        width: 1.325rem;
+        height: 1.325rem;
+    }
+    .editInfo {
+        display: inline-block;
+        font-size: 1.6rem;
+        padding-left: 1rem;
+        color: #19BC53;
+        vertical-align: middle;
+    }
 
+    .info {
+        width: 100%;
+        // height: 22.875rem;
+        // background: red;
+        margin: 0 auto;
+        border-radius: 0.8rem;
+        padding: 0 1.25rem;
+    }
     .info .list-group-item {
-        margin: 0.6rem 1.25rem;
+        // margin: 0.6rem 1.25rem;
         font-size: 1.3rem;
         height: 5rem;
         line-height: 5rem;
         padding: 0;
-        color: #ffffff;
+        // color: #ffffff;
         text-align: center;
-        border-radius: 0.8rem;
+        // border-radius: 0.8rem;
+        border: 0;
     }
 
-    .list-group-item {
-        background: #20b452;
+    .van-cell:last-child {
+        border-radius: 0 0 0.8rem 0.8rem;
     }
-
-    .list-group-item:last-child {
-        background: $orange;
+    .van-cell:first-child {
+        border-radius: 0.8rem 0.8rem 0 0;
     }
 
     .invite {
@@ -287,31 +308,47 @@
         line-height: normal;
     }
 
-    .query img {
-        width: 25%;
-        margin-left: 12%;
-        margin-top: 6%;
+    .query {
+        // width: 100%;
+        margin: 1.25rem 1.25rem;
+        display: flex;
+        justify-content: space-between;
+        img {
+            display: inline-block;
+            width: 13.75rem;
+            height: 7.625rem;
+            // margin-left: 12%;
+            // margin-top: 6%;
+        }
+        .col-6 {
+            padding-right: 0;
+            padding-left: 0;
+        }
     }
+    
     .bottom-user{
         margin-bottom: 6rem;
     }
+    .userBtn {
+        display: inline-block;
+        width: 7.625rem;
+        height: 13.75rem;
+        background-color:red;
+        color: #666;
+        font-size: 1.417rem;
+        display: flex;
+        flex-direction:column;
+        align-items: center;
+        img {
+            display: inline-block;
+            width: 2.083rem;
+            height: 1.792rem;
+        }
+    }
 
     .list-group-flush {
         border-bottom: 0;
     }
-    .tuichu{
-        position: absolute;
-        right: 1.5rem;
-        top: 1rem;
-        color: white;
-        border: 1px solid white;
-        border-radius: 20px;
-        padding: 0.2rem 0.8rem;
-        img{
-            width: 1rem;
-            vertical-align: middle;
-        }
-    }
     .avator-bottom{
         margin-top: 2.5rem;
         padding-left: 1.2rem;
@@ -345,8 +382,9 @@
             color: #18a447;
             border: none;
             height: 2rem;
+            font-size: 1.575rem;
             margin-left: 1.5rem;
-            border-radius: 5rem;
+            border-radius: 0.5rem;
             padding: 0 1.2rem;
         }