smart_storage_app/pages/sys/user/info.vue

<template>
  <view class="wrap" style="padding-bottom: 60px">
		<u-toast ref="uToast" />

    <u-cell-group :border="false">
      <u-gap height="20" bg-color="#f5f5f5"></u-gap>
      <u-cell-item
        title="头像"
        :arrow="true"
        @click="navTo('/pages/sys/user/modify')"
      >
        <u-avatar
          size="60"
          bg-color="#000;"
          :src="avatarUrl"
          @click="chooseAvatar"
          style="position: absolute; right: 35px; top: 12px"
        ></u-avatar>
      </u-cell-item>
      <u-cell-item
        title="公司"
        value="科技有限公司"
        :title-width="180"
        :arrow="false"
      ></u-cell-item>
      <u-cell-item
        title="所属部门"
        :value="userData.deptName"
        :title-width="180"
        :arrow="false"
      ></u-cell-item>
      <u-cell-item
        title="岗位"
        :value="positionList"
        :title-width="180"
        :arrow="false"
      ></u-cell-item>
      <u-cell-item
        title="手机"
        :value="userData.phone"
        :title-width="180"
        :arrow="false"
        @click="navTo('/pages/sys/user/modify')"
      ></u-cell-item>
    
      <u-gap height="20" bg-color="#f5f5f5"></u-gap>
    </u-cell-group>
  </view>
</template>
<script>
export default {
  data() {
    return {
      model: {
        sex: "1",
      },
      rules: {},
      avatarBase64: "",
      positionList: ''
    };
  },
  onLoad() {
    // this.$u.api.getUserInfo().then((res) => {
    //   if (res.code == "200") {
    //     this.model = {
    //       id: res.user.id,
    //       name: res.user.name,
    //       sex: res.user.sex,
    //       email: res.user.email,
    //       phonenumber: res.user.phonenumber,
    //       officeTel: res.user.officeTel,
    //       loginDate: res.user.loginDate,
    //       loginIp: res.user.loginIp,
    //     };
    //   } else if (res.result == "login") {
    //     uni.reLaunch({
    //       url: "/pages/sys/login/index",
    //     });
    //   } else {
    //     this.$u.toast(res.message);
    //   }
    // });
    // uni.$on("uAvatarCropper", (path) => {
    //   this.avatarBase64 = path;
    // });
  },
  computed: {
    userData(){
				return this.vuex_user
			},
    avatarUrl() {
      // if (this.avatarBase64 != "") {
      //   return this.avatarBase64;
      // }
      // let url =
      //   this.vuex_config.baseUrl + this.vuex_user.avatar ||
      //   "/static/aidex/tabbar/my_2.png";
      // url = this.replaceAll(url, "\\", "/");
      // //url = url.replace('/aidex/', this.vuex_config.baseUrl + '/');
      // /* alert(url); */
      // return url;
    },
  },
  onLoad(){
    const position =  []
    this.userData.positionList.forEach((el) => {
      position.push(el.name)
    
    })
    this.positionList = position.join();
  },
  onReady() {
    // this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    navTo() {
      this.$refs.uToast.show({
        title: "此功能暂未开放",
        type: "warning",
      });
    },
    chooseAvatar() {
      // this.$u.route({
      // 	url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
      // 	params: {
      // 		destWidth: 200, // 输出图片宽高
      // 		rectWidth: 200, // 裁剪框的宽高
      // 		fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
      // 	}
      // })
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          // #ifdef MP-WEIXIN || MP-TOUTIAO
          this.$u.toast("您填写的信息有误，11。");
          if (
            this.avatarBase64 != "" &&
            !this.avatarBase64.startsWith("data:")
          ) {
            this.avatarBase64 =
              "data:image/jpeg;base64," +
              uni
                .getFileSystemManager()
                .readFileSync(this.avatarBase64, "base64");
          }
          // #endif
          this.model.avatarBase64 = this.avatarBase64;
          this.$u.api.user.saveUserInfo(this.model).then((res) => {
            if (res.code == "200") {
              this.vuex_user.avatar = res.imgUrl;
              this.$u.vuex("vuex_user", this.vuex_user);
              uni.showModal({
                title: "提示",
                content: res.msg,
                showCancel: false,
                success: function () {
                  uni.navigateBack();
                },
              });
            } else {
              this.$u.toast(res.msg);
            }
          });
        } else {
          this.$u.toast("您填写的信息有误，请根据提示修正。");
        }
      });
    },
    cancel() {
      uni.navigateBack();
    },
  },
};
</script>
<style lang="scss">
page {
  background: #f5f5f5;
}
.u-form {
  background: #fff;
  padding: 0 15px;
}
.u-size-medium {
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 20px;
  font-size: 28rpx;
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  border: 1px solid #5186e7;
}
.u-hairline-border:after {
  border: 1px solid #5186e7 !important;
}
.input-placeholder {
  text-align: right;
}
.u-input {
  text-align: right !important;
}
.u-form-item {
  font-size: 36rpx;
}
</style>