VAVABUY/pages/user/edit_user.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar :title="t('编辑资料')" fixed />
      <view class="user_info flex_center">
        <view class="img_box">
          <image
            class="img"
            :src="userInfo.userimg || '/static/avatar.png'"
          ></image>

          <view class="icon_box flex_center">
            <i class="icon-font icon-camera" @click="openCamera"></i>
            <!-- <popOver placement="bottom-end" :options="optionsList" key-name="text" isArrow ref="popoverRef"
              @select="selectItem">
              <i class="icon-font icon-camera"></i>
            </popOver> -->
          </view>
        </view>
      </view>

      <view class="form">
        <view class="form_item">
          <view class="item_label">
            <trans _t="昵称" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('请输入昵称')"
              border="surround"
              v-model="userInfo.username"
            />
          </view>
        </view>
      </view>

      <view class="btn" @click="saveInfon">
        <trans _t="保存修改" />
      </view>

      <CameraUpload @confirm="getUrl" ref="cameraUploadRef" />
    </view>
  </Theme>
</template>

<script setup>
import Navbar from "@/components/navbar";
import popOver from "@/components/popover";
import CameraUpload from "@/components/CameraUpload";
import { ref, computed, reactive, nextTick } from "vue";
import { t } from "@/locale";
import Input from "@/components/input";
import { USERS_EDIT_AVATAR } from "@/api";
import { uploadChooseImage, $upload, Toast } from "@/utils";
import { useUserStore } from "@/store";
import { onShow } from "@dcloudio/uni-app";

const useUser = useUserStore();
const userInfo = computed(() => useUser.getuserInfo);
const optionsList = ref([
  {
    type: "camera",
    text: "拍照",
  },
  {
    type: "album",
    text: "相册",
  },
]);

const cameraUploadRef = ref(null);
const openCamera = () => {
  cameraUploadRef.value && cameraUploadRef.value.open();
};

const getUrl = (url) => {
  userInfo.value.userimg = url;
};
const saveInfon = async () => {
  try {
    let para = {
      userimg: userInfo.value.userimg,
      username: userInfo.value.username,
    };
    let res = await USERS_EDIT_AVATAR(para);
    Toast(res.msg, 1000).then(() => {
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    });
    Toast(res.msg);
  } catch (error) {
    Toast(error.msg);
    close();
  }
};
onShow(() => {
  useUser.getUserInfo();
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background-color: var(--light);

  .form {
    margin: 0 34rpx;
    margin-top: 94rpx;

    .item_label {
      margin-bottom: 24rpx;
      .size(28rpx);
      color: var(--text);
    }

    .item_value {
      /deep/ .u-border {
        box-shadow: none;
        border-style: none;
      }

      /deep/ .u-input--radius {
        border-radius: 20rpx !important;
      }
    }
  }

  .user_info {
    margin-top: 48rpx;

    .img_box {
      width: 30vw;
      height: 30vw;
      position: relative;

      .img {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }

      .icon_box {
        width: 60rpx;
        height: 60rpx;
        padding: 10rpx;
        background-color: var(--light);
        border-radius: 50%;
        position: absolute;
        bottom: -10rpx;
        right: -10rpx;

        .icon-font {
          .size(50rpx);
        }
      }
    }
  }

  .btn {
    height: 100rpx;
    position: fixed;
    left: 28rpx;
    right: 28rpx;
    bottom: 88rpx;
    background-color: var(--black);
    padding: 28rpx;
    .size();
    color: var(--light);
    font-weight: bold;
    text-align: center;
    border-radius: 20rpx;
  }
}
</style>