个人信息修改

src/components/areaSelect.vue

@@ -48,6 +48,8 @@ export default {
                 this.$emit('update:region', values[2].name);
             }
 
+            this.$emit('input', values);
+
             this.show = false;
         }
     }

src/main.js

@@ -48,7 +48,8 @@ export default {
             'pages/questions',
             'pages/rule',
             'pages/minePublish',
-            'pages/mineFollow'
+            'pages/mineFollow',
+            'pages/changeText'
         ],
         tabBar: {
             color: '#7E7E80',

src/pages/changeText.vue

@@ -0,0 +1,63 @@
+<config>
+{
+    "navigationBarTitleText": "修改昵称",
+}
+</config>
+<template>
+    <div>
+        <van-field
+            type="text"
+            clearable
+            placeholder="请输入昵称"
+            :value="message"
+            focus
+            @change="message = $event.detail"
+            @comfirm="message = $event.detail"
+        />
+
+        <div class="submit">
+            <van-button type="primary" block @click="submit"> 保存</van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            message: ''
+        };
+    },
+    onShow() {
+        let eventChannel = this.$mp.page.getOpenerEventChannel();
+        if (eventChannel && eventChannel.on) {
+            eventChannel.on('message', data => {
+                this.message = data;
+            });
+        }
+    },
+    methods: {
+        submit() {
+            let pages = getCurrentPages();
+            let prevPage = pages[pages.length - 2];
+            prevPage.rootVM.updateInfo({
+                nickname: this.message
+            });
+
+            wx.navigateBack({
+                success: res => {
+                    prevPage.rootVM.updateInfo({
+                        nickname: this.message
+                    });
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.submit {
+    margin: 81px 43px 100px;
+}
+</style>

src/pages/mine.vue

@@ -22,6 +22,12 @@
             </van-image>
 
             <van-button type="primary" v-if="!userInfo" @click="login">点击授权登录</van-button>
+
+            <div class="info" v-else>
+                <div class="text1">{{ userInfo.nickname }}</div>
+                <div class="text2" v-if="city">{{ city }}</div>
+            </div>
+
             <van-image
                 class="authentication"
                 width="100%"
@@ -84,7 +90,19 @@ import { mapState } from 'vuex';
 export default {
     name: 'Mine',
     computed: {
-        ...mapState(['userInfo'])
+        ...mapState(['userInfo']),
+        city() {
+            if (this.userInfo) {
+                if (/[\u4e00-\u9fa5]/.test(this.userInfo.city)) {
+                    let province = this.userInfo.province.replace(/省/, '');
+                    province = province.replace(/自治区/, '');
+                    let city = this.userInfo.city.replace(/市/, '');
+                    return province + ' ' + city;
+                }
+            }
+
+            return '';
+        }
     },
     methods: {
         login() {
@@ -140,6 +158,21 @@ export default {
     margin-top: 18px;
 }
 
+.info {
+    margin-left: 16px;
+    .text1 {
+        font-size: 24px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 34px;
+    }
+    .text2 {
+        font-size: 13px;
+        color: #c8c9cc;
+        line-height: 22px;
+    }
+}
+
 .invitation {
     .flex();
     background-color: @prim;

src/pages/setting.vue

@@ -6,45 +6,87 @@
 <template>
     <div>
         <van-cell-group :border="false">
-            <van-cell title="头像" is-link>
-                <van-image round width="36" height="36" src="/native/svgs/img_defaultphoto.svg" fit="cover" />
+            <van-cell title="头像" is-link @click="changeLogo">
+                <van-image
+                    round
+                    width="36"
+                    height="36"
+                    :src="myInfo ? myInfo.avatar : '/native/svgs/img_defaultphoto.svg'"
+                    fit="cover"
+                />
             </van-cell>
-            <van-cell title="昵称" value="粉条" is-link />
-            <van-cell title="性别" is-link @click="chooseSex" />
+            <van-cell title="昵称" @click="goChange" :value="myInfo ? myInfo.nickname : ''" is-link />
+            <van-cell title="性别" :value="getSex(myInfo ? myInfo.sex : '')" is-link @click="chooseSex" />
             <van-cell title="地区" is-link :class="{ not: !city }" @click="$refs.area.init()">
-                <span>{{ province }}{{ city || '未设置' }}</span>
+                <span>{{ city || '未设置' }}</span>
             </van-cell>
             <van-cell title="收货地址" is-link />
-            <van-cell title="手机号" class="not" is-link>
-                <span>未绑定</span>
+            <van-cell title="手机号" :class="{ not: !myInfo.phone }" is-link>
+                <span>{{ myInfo.phone || '未绑定' }}</span>
                 <van-button type="primary" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
                     >授权手机号</van-button
                 >
             </van-cell>
         </van-cell-group>
 
-        <area-select ref="area" :province.sync="province" :city.sync="city" :columnsNum="2"></area-select>
+        <area-select ref="area" :columnsNum="2" @input="changeCity"></area-select>
     </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import areaSelect from '../components/areaSelect.vue';
 export default {
     components: { areaSelect },
     name: 'Setting',
     data() {
         return {
-            province: '',
-            city: '',
-            region: ''
+            myInfo: {}
         };
     },
+    computed: {
+        ...mapState(['userInfo']),
+        city() {
+            if (this.userInfo) {
+                if (/[\u4e00-\u9fa5]/.test(this.userInfo.city)) {
+                    let province = this.userInfo.province.replace(/省/, '');
+                    province = province.replace(/自治区/, '');
+                    let city = this.userInfo.city.replace(/市/, '');
+                    return province + ' ' + city;
+                }
+            }
+
+            return '';
+        }
+    },
+    watch: {
+        userInfo() {
+            this.myInfo = { ...this.userInfo };
+        }
+    },
+    onShow() {
+        let eventChannel = this.$mp.page.getOpenerEventChannel();
+        if (eventChannel && eventChannel.on) {
+            eventChannel.on('changeNick', data => {
+                this.updateInfo({
+                    nickname: data
+                });
+            });
+        }
+    },
+    onLoad() {
+        if (this.userInfo) {
+            this.myInfo = { ...this.userInfo };
+        }
+    },
     methods: {
         chooseSex() {
             wx.showActionSheet({
                 itemList: ['男', '女'],
-                success(res) {
-                    console.log(res.tapIndex);
+                success: res => {
+                    this.updateInfo({
+                        sex: (res.tapIndex + 1).toString()
+                    });
                 },
                 fail(res) {
                     console.log(res.errMsg);
@@ -53,6 +95,53 @@ export default {
         },
         getphonenumber(e) {
             console.log(e);
+        },
+        getSex(sex) {
+            if (Number(sex) == 2) {
+                return '女';
+            } else {
+                return '男';
+            }
+        },
+        changeCity(values) {
+            console.log(values);
+            this.updateInfo({
+                province: values[0].name,
+                city: values[1].name
+            });
+        },
+        changeLogo() {
+            this.choosePhoto().then(res => {
+                console.log(res);
+                this.updateInfo({
+                    avatar: res
+                });
+            });
+        },
+        updateInfo(changeInfo = {}) {
+            let data = { ...this.userInfo, ...changeInfo };
+            this.showLoading();
+            this.$http
+                .post('/user/save', data, {
+                    header: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+                .then(res => {
+                    return this.$store.dispatch('getUserInfo');
+                })
+                .then(() => {
+                    this.toast('更新成功', 'success');
+                });
+        },
+        goChange() {
+            wx.navigateTo({
+                url: '/pages/changeText',
+                success: res => {
+                    // success
+                    res.eventChannel.emit('message', this.userInfo.nickname);
+                }
+            });
         }
     }
 };