同步资源

src/project/shandong10086/AppMine/userInfo.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="page">
+    <div class="info-list">
+      <div class="item-content mar-b8">
+        <div class="item solid">
+          <p class="mar-t22">头像</p>
+          <button class="user-img-div" open-type="chooseAvatar" @chooseavatar="handleWeixinSync">
+            <img :src="user.avatarUrl" class="user-img">
+          </button>
+        </div>
+        <div class="item">
+          <p>用户昵称</p>
+          <div v-if="!editNickName" @click="editNickName=true">
+            <p class="name" v-text="nickName"/>
+          </div>
+          <input v-else type="nickname" class="editNickName" v-model="nickName" @blur="handleWeixinSync">
+        </div>
+      </div>
+      <div class="item-content mar-b8">
+        <div class="item">
+          <p>手机号</p>
+          <div>{{ user.phone || '' }}</div>
+        </div>
+      </div>
+      <div class="item-content" @click="onLogout">
+        <div class="item">
+          <p class="login-out">退出登录</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {mapActions, mapState} from 'vuex'
+
+export default {
+  name: "userInfo",
+  appName: "个人中心",
+  computed: {
+    ...mapState(['user', 'token']),
+    nickName: {
+      set(v) {
+      },
+      get() {
+        const {nickName} = this.user
+        return nickName
+      }
+    }
+  },
+  onLoad() {
+    this.getUserInfo()
+  },
+  data() {
+    return {
+      editNickName: false
+    }
+  },
+  methods: {
+    ...mapActions(['getUserInfo', 'autoLogin']),
+    upLoad(img) {
+      return new Promise((resolve, reject) => {
+        uni.uploadFile({
+          url: `${this.$instance.baseURL}/admin/file/add`,
+          filePath: img,
+          name: 'file',
+          header: {
+            'Content-Type': 'multipart/form-data',
+            Authorization: uni.getStorageSync('token')
+          },
+          success: uploadFileRes => {
+            resolve(uploadFileRes)
+          },
+          fail: err => {
+            reject(err)
+          }
+        })
+      })
+    },
+    onLogout() {
+      uni.showModal({
+        title: '提示',
+        content: "是否要退出登录",
+        success: res => {
+          if (res.confirm) {
+            this.$store.commit('logout')
+            this.$toast('退出成功');
+            setTimeout(() => {
+              uni.switchTab({
+                url: '/pages/mine/my'
+              })
+            }, 500)
+          }
+        }
+      })
+    },
+    handleWeixinSync({detail}) {
+      const {value: nickName, avatarUrl} = detail
+      this.autoLogin({nickName, avatarUrl})
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "~dvcp-wui/common";
+
+.page {
+  width: 100%;
+  background-color: #F5F5F5;
+
+  .info-list {
+    margin: 0 0 16px 0;
+
+    .item-content {
+      padding: 0 32px;
+      background-color: #fff;
+    }
+
+    .item {
+      padding: 36px 0;
+      line-height: 40px;
+      width: 100%;
+      box-sizing: content-box;
+      display: flex;
+      justify-content: space-between;
+
+      p {
+        color: #333;
+        font-weight: 400;
+      }
+
+      div {
+        color: #666;
+        font-size: 28px;
+      }
+
+      .user-img-div {
+        width: 104px;
+        height: 104px;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+
+      .user-img {
+        width: 104px;
+        height: 104px;
+        vertical-align: middle;
+        border-radius: 50%;
+      }
+
+      .right-icon {
+        width: 40px;
+        height: 40px;
+        vertical-align: middle;
+      }
+
+      .mar-t22 {
+        margin-top: 44px;
+      }
+    }
+
+    .login-out {
+      width: 100%;
+      font-size: 30px;
+      text-align: center;
+    }
+  }
+
+  .self-knowledge-show {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  .toast-bg {
+    position: fixed;
+    z-index: 101;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .toast {
+    background-color: #fff;
+    width: 686px;
+    height: 316px;
+    font-size: 36px;
+  }
+
+  .toast-msg {
+    text-align: center;
+    line-height: 50px;
+    color: #333;
+    font-weight: 500;
+    padding: 84px 0 80px 0;
+  }
+
+  .toast-btn {
+    display: inline-block;
+    width: 120px;
+    text-align: center;
+    line-height: 50px;
+  }
+
+  .cancel {
+    margin-left: 394px;
+    margin-right: 40px;
+  }
+
+  .confirm {
+    color: #197DF0;
+  }
+
+  .editNickName {
+    text-align: right;
+    font-size: 28px;
+  }
+}
+</style>