xyy-m/src/pages/profile/userInfo.vue

<template>
  <div class="bg-[#f8f8f8] pt-20">
    <van-form>
      <van-cell-group inset>
        <van-field name="uploader" label="头像">
          <template #input>
            <van-uploader
              style="--van-uploader-border-radius: 40px"
              :after-read="afterRead"
              v-model="fileList"
              :max-count="1"
              :deletable="false"
              :multiple="false"
              accept="image/*"
              reupload
            />
          </template>
        </van-field>
        <van-field
          v-model="userInfo.showName"
          name="昵称"
          label="昵称"
          placeholder="昵称"
          maxlength="20"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="userInfo.sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="userInfo.email"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱"
          maxlength="100"
          :rules="[
            {
              required: true,
              validator: validatorEmail,
              message: '请填写正确的邮箱',
            },
          ]"
        />
        <van-field
          v-model="userInfo.job"
          name="职业"
          label="职业"
          placeholder="职业"
          maxlength="100"
        />
        <van-field
          v-model="userInfo.address"
          name="居住地"
          label="居住地"
          maxlength="100"
          placeholder="居住地"
        />
        <van-field
          v-model="userInfo.personalSign"
          rows="3"
          autosize
          label="个性签名"
          maxlength="200"
          type="textarea"
          placeholder="请输入留言"
          show-word-limit
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          @click="handleSubmit"
          round
          block
          style="background-color: #fa8446; color: #fff; font-size: 18px"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
const userInfoStore = useUserInfoStore();
const { userInfo } = storeToRefs(userInfoStore);

const fileList = ref([]);

const form = reactive({
  showName: null,
  email: null,
  sex: null,
  email: null,
  headImageUrl: null,
  address: null,
  job: null,
  personalSign: null,
});

const validatorEmail = (val) =>
  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
    val
  );

async function afterRead(file) {
  console.log(file);
  const formData = new FormData();
  formData.append("uploadFile", file.file);
  formData.append("asImage", true);
  formData.append("fieldName", "headImageUrl");
  try {
    const { data } = await request("/website/tourism/user/upload", {
      method: "post",
      body: formData,
    });
    form.headImageUrl = data.fileUrl;
    userInfoStore.getUserInfo();
  } catch (error) {}
}

watch(
  userInfo,
  () => {
    form.showName = userInfo.value.showName;
    form.email = userInfo.value.email;
    form.sex = userInfo.value.sex;
    form.headImageUrl = userInfo.value.headImageUrl;
    fileList.value[0] = {
      url: userInfo.value.headImageUrl,
    };
    form.address = userInfo.value.address;
    form.job = userInfo.value.job;
    form.personalSign = userInfo.value.personalSign;
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(() => {
  userInfoStore.getUserInfo();
});

async function handleSubmit() {
  try {
    await request("/website/tourism/user/update", {
      method: "post",
      body: form,
    });
    showToast("保存成功");
    userInfoStore.getUserInfo();
  } catch (error) {}
}
</script>

<style lang="scss" scoped></style>