profile

README.md

@@ -213,8 +213,12 @@ npm run build
 
 <img src="https://github.com/bailicangdu/vue2-elm/blob/master/screenshots/reset.png" width="365" height="619"/>
 
+## 个人中心
 
-#### 其他页面陆续开发中。。。
+<img src="https://github.com/bailicangdu/vue2-elm/blob/master/screenshots/profile.png" width="365" height="619"/>
+
+
+#### 其他页面正在开发中。。。
 
 
 # 总结
@@ -232,4 +236,4 @@ npm run build
 
 
 
-如果觉得不错，请star一下吧 😊
+##### 如果觉得不错，请star一下吧 😊

src/page/profile/profile.vue

@@ -3,20 +3,21 @@
         <head-top go-back='true' :head-title="profiletitle"></head-top>
         <section class="profile-number">
             <router-link to="/profile/info" class="profile-link">
-                <span class="privateImage">
+                <img :src="getImgPath(this.avatar)" class="privateImage" v-if="this.avatar">
+                <span class="privateImage" v-else>
                     <svg class="privateImage-svg">
                         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
                     </svg>
                 </span>
                 <div class="user-info">
-                    <p>3adc5bfcd</p>
+                    <p>{{username}}</p>
                     <p>
                         <span class="user-icon">
                             <svg class="icon-mobile" fill="#fff">
                                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mobile"></use>
                             </svg>
                         </span>
-                        <span class="icon-mobile-number">15800319949</span>
+                        <span class="icon-mobile-number">{{mobile}}</span>
                     </p>
                 </div>
                 <span class="arrow">
@@ -29,15 +30,15 @@
         <section class="info-data">
             <ul class="clear">
                 <router-link to="/profile/balance" tag="li" class="info-data-link">
-                    <span class="info-data-top"><b>0.00</b>元</span>
+                    <span class="info-data-top"><b>{{balance}}</b>元</span>
                     <span class="info-data-bottom">我的余额</span>
                 </router-link>
                 <router-link to="/profile/benefit" tag="li" class="info-data-link">
-                    <span class="info-data-top"><b>1</b>个</span>
+                    <span class="info-data-top"><b>{{count}}</b>个</span>
                     <span class="info-data-bottom">我的优惠</span>
                 </router-link>
                 <router-link to="/profile/points" tag="li" class="info-data-link">
-                    <span class="info-data-top"><b>1010</b>分</span>
+                    <span class="info-data-top"><b>{{pointNumber}}</b>分</span>
                     <span class="info-data-bottom">我的积分</span>
                 </router-link>
             </ul>
@@ -94,7 +95,7 @@
         </section>
         <section class="profile-1reTe">
             <!-- 服务中心 -->
-            <router-link to='/profile/service' class="myorder">
+            <router-link to='/service' class="myorder">
                 <aside>
                     <svg fill="#4aa5f0">
                         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#service"></use>
@@ -135,20 +136,34 @@
 <script>
 import headTop from '../../components/header/head'
 import {mapState} from 'vuex'
+import {getImgPath} from '../../components/common/mixin'
 
 export default {
     data(){
         return{
             profiletitle: '我的',
-            count : '',       //优惠券个数
-            pontNumber : '',  //积分
+            getUserinfo: {},        //得到数据 
+            username: '',           //用户名
+            mobile: '',             //电话号码
+            balance: '',            //我的余额
+            count : '',             //优惠券个数
+            pointNumber : '',       //积分数
+            avatar: '',             //头像地址
         }
     },
 
     mounted(){
-        console.log(this.userInfo)
+        this.getUserinfo = this.userInfo;
+        this.avatar = this.getUserinfo.avatar;
+        this.username = this.getUserinfo.username;
+        this.mobile = this.getUserinfo.mobile;
+        this.balance = this.getUserinfo.balance;
+        this.count = this.getUserinfo.gift_amount;
+        this.pointNumber = this.getUserinfo.point;
     },
 
+    mixins: [getImgPath],
+
     components:{
         headTop
     },

src/service/tempdata/login.js

@@ -3,30 +3,27 @@ export const validate_token = {
 };
 
 export const userInfo = {
-	"user_id": 109065163,
-	"mobile": "13681711254",
-	"is_mobile_valid": true,
-	"email": "",
-	"is_email_valid": false,
-	"avatar": "",
-	"username": "32f7e5896",
-	"is_active": true,
-	"brand_member": false,
-	"point": 960,
+	"avatar": "e3c1b9262cfb2c65fa3054d54cfaec54jpeg",
+	"balance": 0,
 	"brand_member_new": 0,
 	"column_desc": {
-		"gift_mall_desc": "0\u5143\u597d\u7269\u5728\u8fd9\u91cc!",
-		"game_desc": "\u73a9\u6e38\u620f\u9886\u7ea2\u5305",
+		"game_desc": "玩游戏领红包",
+		"game_image_hash": "05f108ca4e0c543488799f0c7c708cb1jpeg",
 		"game_is_show": 1,
-		"game_link": "https:\/\/gamecenter.faas.ele.me",
-		"game_image_hash": "05f108ca4e0c543488799f0c7c708cb1jpeg"
+		"game_link": "https://gamecenter.faas.ele.me",
+		"gift_mall_desc": "0元好物在这里"
 	},
-	"pay_without_password": null,
-	"delivery_card_expire_days": 0,
-	"balance": 0,
-	"payment_quota": 50,
 	"current_address_id": 0,
 	"current_invoice_id": 0,
-	"referal_code": "",
-	"gift_amount": 2
+	"delivery_card_expire_days": 0,
+	"email": "",
+	"gift_amount": 1,
+	"id": 108758383,
+	"is_active": 1,
+	"is_email_valid": false,
+	"is_mobile_valid": true,
+	"mobile": "13681711254",
+	"point": 960,
+	"user_id": 109065163,
+	"username": "cangdu"
 };
\ No newline at end of file