完成用户头像、昵称设置

src/core/apis.js

@@ -43,6 +43,10 @@ export default {
             url: "/wxapp/user/getuserinfo",
             auth: true,
         },
+        save: {
+            url: "/wxapp/user/setuserinfo",
+            auth: true,
+        },
         address: {
             list: {
                 url: "/wxapp/Useraddress/getalladdress",

src/core/models/user.js

@@ -72,8 +72,11 @@ export default {
     /**
      * 获取信息
      */
-    info() {
+    info(refresh) {
         return new Promise((resolve, reject) => {
+            if (refresh === true) {
+                prototype.$storage.remove('userinfo');
+            }
             let cacheUser = prototype.$storage.get('userinfo');
             if (cacheUser) {
                 return resolve(cacheUser);
@@ -84,6 +87,7 @@ export default {
                 if (response.code == 1) {
                     let user = {
                         id: response.data.id,
+                        avatar: response.data.avatar,
                         nickname: response.data.user_nickname,
                         openid: response.data.openid,
                         mobile: response.data.mobile,
@@ -97,6 +101,22 @@ export default {
             }).catch(e => { });
         });
     },
+    /**
+     * 保存用户信息
+     */
+    save(data) {
+        return new Promise((resolve, reject) => {
+            prototype.$request({
+                api: "user.save",
+                data: data
+            }).then(response => {
+                if (response.code == 1) {
+                    return resolve(response.msg);
+                }
+                return reject(response.msg);
+            }).catch(e => { });
+        });
+    },
     /**
      * 用户注册
      */

src/pages/member/member.vue

@@ -2,29 +2,24 @@
     <app-layout title="我的" btnType="unset">
         <view class="member-header">
             <view class="headimg">
-                <image class="img-src" :src="require('@/static/temp/member/1.png')" mode="aspectFill" />
+                <image v-if="!userInfo.avatar" class="img-src" :src="require('@/static/temp/member/1.png')" mode="aspectFill" />
+                <image v-else @click="updateInfoModal = true" class="img-src" :src="userInfo.avatar" mode="aspectFill" />
             </view>
-            <view class="member-desc" v-if="isLogin">
+            <view class="member-desc">
                 <text class="nickname">{{ userInfo.nickname || "微信用户" }}</text>
                 <view class="mobile">
                     <text class="text">{{ userInfo.mobile }}</text>
                 </view>
             </view>
-            <view class="member-desc" v-else @click="utils.toPage('/pages/auth/auth')">
-                <text class="nickname">请登录后再操作</text>
-                <view class="mobile">
-                    <text class="text">点击去登录</text>
-                </view>
-            </view>
         </view>
         <view class="menu-container">
             <view class="common-form-widget-group">
-                <view class="widget-item" @click="toPage('/pages/address/address?openType=list')">
+                <view class="widget-item" @click="utils.toPage('/pages/address/address?openType=list')">
                     <text class="iconfont icon-dingwei icon"></text>
                     <text class="title">我的地址</text>
                     <text class="iconfont icon-jinru more"></text>
                 </view>
-                <view class="widget-item" @click="toPage('/pages/member/complaint')">
+                <view class="widget-item" @click="utils.toPage('/pages/member/complaint')">
                     <text class="iconfont icon-tousu icon"></text>
                     <text class="title">意见投诉</text>
                     <text class="iconfont icon-jinru more"></text>
@@ -34,7 +29,7 @@
                     <text class="title">联系客服</text>
                     <text class="iconfont icon-jinru more"></text>
                 </view>
-                <view class="widget-item" @click="toPage('/pages/member/setting')">
+                <view class="widget-item" @click="utils.toPage('/pages/member/setting')">
                     <text class="iconfont icon-shezhixitongshezhigongnengshezhishuxing icon"></text>
                     <text class="title">设置</text>
                     <text class="iconfont icon-jinru more"></text>
@@ -46,12 +41,12 @@
                     <text class="title">我是师傅</text>
                     <text class="iconfont icon-jinru more"></text>
                 </view>
-                <view class="widget-item" @click="toPage('/pages/service/other/project')">
+                <view class="widget-item" @click="utils.toPage('/pages/service/other/project')">
                     <text class="iconfont icon-cailiaogongcheng icon"></text>
                     <text class="title">工程安装</text>
                     <text class="iconfont icon-jinru more"></text>
                 </view>
-                <view class="widget-item" @click="toPage('/pages/service/other/business')">
+                <view class="widget-item" @click="utils.toPage('/pages/service/other/business')">
                     <text class="iconfont icon-qiye icon"></text>
                     <text class="title">企业安装合作</text>
                     <text class="iconfont icon-jinru more"></text>
@@ -59,12 +54,50 @@
             </view>
         </view>
         <widget-service :showService="showService" @close="showService = false" />
+        <widget-modal v-show="updateInfoModal" title="基础信息" @close="updateInfoModal = false" :showClose="false">
+            <view class="userinfo-box">
+                <!-- #ifdef MP-WEIXIN -->
+                <button open-type="chooseAvatar" class="avatar" @chooseavatar="uploadAvatar">
+                    <image
+                        v-if="!updateInfo.avatar"
+                        class="image"
+                        :src="require('@/static/temp/member/1.png')"
+                        mode="aspectFill"
+                    />
+                    <image v-else class="image" :src="updateInfo.avatar" mode="aspectFill" />
+                </button>
+                <!-- #endif -->
+                <!-- #ifdef H5 -->
+                <button class="avatar" @click="uploadAvatar">
+                    <image
+                        v-if="!updateInfo.avatar"
+                        class="image"
+                        :src="require('@/static/temp/member/1.png')"
+                        mode="aspectFill"
+                    />
+                    <image v-else class="image" :src="updateInfo.avatar" mode="aspectFill" />
+                </button>
+                <!-- #endif -->
+                <view class="nickname">
+                    <input
+                        class="input"
+                        v-model="updateInfo.nickname"
+                        type="nickname"
+                        placeholder="请输入昵称"
+                        placeholder-class="input-placeholder"
+                        @blur="setNickname"
+                    />
+                </view>
+                <view class="save-btn" @click="submitUserInfo"> 保存 </view>
+            </view>
+        </widget-modal>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
 import WidgetService from "@/components/widgets/service";
+import WidgetModal from "@/components/widgets/modal";
 import { mapGetters, mapState } from "vuex";
 export default {
     name: "member",
@@ -72,11 +105,17 @@ export default {
         return {
             utils: this.$utils,
             showService: false,
+            updateInfoModal: false,
+            updateInfo: {
+                avatar: "",
+                nickname: "",
+            },
         };
     },
     components: {
         AppLayout,
         WidgetService,
+        WidgetModal,
     },
     computed: {
         ...mapState({
@@ -87,17 +126,61 @@ export default {
         }),
     },
     onLoad() {},
-    onShow() {},
+    async onShow() {
+        await this.$store.dispatch("user/info");
+        if (this.isLogin) {
+            if (!this.userInfo.nickname || !this.userInfo.avatar) {
+                this.updateInfoModal = true;
+            }
+            this.updateInfo = {
+                avatar: this.userInfo.avatar,
+                nickname: this.userInfo.nickname,
+            };
+        }
+    },
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
     methods: {
-        toPage(url) {
+        /**
-            if (!this.isLogin) {
+         * 头像
-                this.$store.commit("user/showLoginModal", true);
+         */
-                return;
+        uploadAvatar(e) {
-            }
+            // #ifdef MP-WEIXIN
-            this.$utils.toPage(url);
+            this.$models.system.upload(e.detail.avatarUrl).then((response) => {
+                this.updateInfo.avatar = response.img;
+            });
+            // #endif
+            // #ifdef H5
+            this.$utils.chooseImage(1).then((tempFiles) => {
+                tempFiles.forEach((item) => {
+                    this.$models.system.upload(item.path).then((response) => {
+                        this.updateInfo.avatar = response.img;
+                    });
+                });
+            });
+            // #endif
+        },
+        /**
+         * 昵称
+         */
+        setNickname(e) {
+            this.updateInfo.nickname = e.detail.value;
+        },
+        /**
+         * 保存信息
+         */
+        submitUserInfo() {
+            this.$models.user
+                .save({
+                    avatar: this.updateInfo.avatar,
+                    user_nickname: this.updateInfo.nickname,
+                })
+                .then((msg) => {
+                    this.$store.dispatch("user/info", true);
+                    this.updateInfoModal = false;
+                    this.$utils.toast(msg);
+                });
         },
     },
 };
@@ -116,6 +199,8 @@ export default {
     .headimg {
         width: 110rpx;
         height: 110rpx;
+        border-radius: 50%;
+        overflow: hidden;
         .img-src {
             width: 100%;
             height: 100%;
@@ -193,4 +278,48 @@ export default {
         }
     }
 }
+.userinfo-box {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .avatar {
+        width: 200rpx;
+        height: 200rpx;
+        overflow: hidden;
+        border-radius: 50%;
+        border: 2rpx solid #eeeeee;
+        .image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    button.avatar {
+        padding: 0;
+        background-color: unset;
+    }
+    button.avatar::after {
+        border: 0;
+    }
+    .nickname {
+        width: 300rpx;
+        margin: 20rpx 0;
+        .input {
+            border: 2rpx solid #e0e0e0;
+            font-size: 28rpx;
+            padding: 10rpx 20rpx;
+        }
+    }
+
+    .save-btn {
+        width: 300rpx;
+        height: 68rpx;
+        line-height: 68rpx;
+        text-align: center;
+        font-size: 32rpx;
+        color: #ffffff;
+        background-color: #7286f1;
+        margin-top: 15rpx;
+    }
+}
 </style>

src/store/modules/user.js

@@ -7,6 +7,7 @@ export default {
         token: "",
         info: {
             id: 0,
+            avatar: "",
             nickname: "",
             openid: "",
             mobile: "",
@@ -33,8 +34,8 @@ export default {
         }
     },
     actions: {
-        info(context) {
+        info(context, refresh) {
-            user.info().then(info => {
+            user.info(refresh).then(info => {
                 context.commit('info', info);
             });
         },