xinkeaboard/xinkeaboard-web/pages/member/info.vue

<template>
  <div class="member_info_container">
    <MemberTitle :memberTitle="L['会员信息']"></MemberTitle>
    <div class="member_info" v-loading="loading">
      <table class="form_item">
        <tbody>
          <tr>
            <td>
              <span class="tag_name">{{ L["用户头像"] }}：</span>
            </td>
            <td>
              <form action="" enctype="multipart/form-data">
                <label for="file" class="chooseBtn"><img :src="tempSrc" id="show"/></label>
                <input
                  id="file"
                  class="filepath"
                  @change="changepic"
                  type="file"
                  name="image"
                  size="1"
                  accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp"
                />
              </form>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              {{
                L["仅支持JPG、GIF、PNG、JPEG、BMP格式;文件大小请在4.0MB之内。"]
              }}
            </td>
          </tr>
          <tr>
            <td>
              <span class="tag_name">{{ L["会员名："] }}</span>
            </td>
            <td>
              <el-input
                id="memberName"
                v-model="memberNameInput"
                :disabled="true"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <span class="tag_name">{{ L["真实姓名"] }}：</span>
            </td>
            <td>
              <el-input
                id="memberTrueName"
                v-model="memberTrueName"
                maxlength="10"
                show-word-limit
              >
              </el-input>
            </td>
          </tr>
        
          <tr>
            <td>
              <span class="tag_name">{{ L["昵称："] }}</span>
            </td>
            <td>
              <el-input
                type="text"
                id="memberNickName"
                v-model="memberNickNameInput"
                maxlength="15"
                show-word-limit
              ></el-input>
            </td>
          </tr>

          <tr>
            <td>
              <span class="tag_name">{{ L["公司名称："] }}</span>
            </td>
            <td>
              <el-input
                type="text"
                v-model="member_company"
                maxlength="100"
                show-word-limit
              ></el-input>
            </td>
          </tr>

          <tr>
            <td>
              <span class="tag_name">{{ L["主营产品："] }}</span>
            </td>
            <td>
              <el-input
                type="textarea"
                v-model="member_main_product"
                maxlength="200"
                show-word-limit
              ></el-input>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="memInfo_save">
        <el-button @click="memberInfoSave">{{ L["保存"] }}</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from 'vue';
import { ElInput, ElButton, ElMessage,ElRadioGroup,ElRadio } from "element-plus";
import axios from "axios";
import { getCurLanguage } from '@/composables/common.js';
import { useFiltersStore } from "@/store/filter.js";
import { getContactType } from "@/utils/common";
const L = getCurLanguage();
const filtersStore = useFiltersStore();
const contactType = getContactType();
definePageMeta({
  layout: "member",
  middleware: ["auth"],
});
const { proxy } = getCurrentInstance();
const memberNameInput = ref(""); //会员名
const memberNickNameInput = ref(""); //会员名称
const member_company = ref("")//公司名称
const member_main_product = ref("")//主营产品
const memberTrueName = ref(""); //会员姓名
const avatar = ref(""); //用户头像
const tempSrc = ref("");
const sex = ref(0); //性别
const loading = ref(false);


const changepic = (e) => {
  //上传头像
  let newsrc = getObjectURL(e.target.files[0]);
  let data = new FormData();
  data.append("file", e.target.files[0]);
  data.append("source", "headImg");
  let config = {
    headers: { "Content-Type": "multipart/form-data" },
  };
  let url = apiUrl + "v3/oss/common/upload";
  if (e.target.files[0].size < Math.pow(1024, 2) * 4) {
    tempSrc.value = newsrc;
    axios.post(url, data, config).then((res) => {
      if (res.status === 200) {
        ElMessage.success(L["上传图片成功"]);
        tempSrc.value = res.data.data.url;
        avatar.value = res.data.data.path;
      } else {
        ElMessage.warning(L["上传图片失败"]);
      }
    });
  } else {
    ElMessage.warning(L["图像应小于4MB"]);
    tempSrc.value = avatar.value;
  }
};
const getObjectURL = (file) => {
  //createObjectURL在前端显示更换后的头像
  var url = null;
  if (window.createObjectURL != undefined) {
    // basic
    url = window.createObjectURL(file);
  } else if (window.URL != undefined) {
    // mozilla(firefox)
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {
    // webkit or chrome
    url = window.webkitURL.createObjectURL(file);
  }
  return url;
};

const getInitData = () => {
  //初始化数据
  loading.value = true;
  get("v3/member/front/member/memberInfo").then((res) => {
    if (res.state == 200) {
      memberNameInput.value = contactType === 'email' ? res.data.memberName : res.data.memberMobile;
      memberNickNameInput.value = res.data.memberNickName;
      tempSrc.value = res.data.memberAvatar;
      memberTrueName.value = res.data.memberTrueName;
      member_company.value = res.data.memberCompany;
      member_main_product.value = res.data.memberMainProduct;
    }
  }).finally(() => {
      loading.value = false;
  })
};

const memberInfoSave = () => {

  //保存

  if (!avatar.value) {
    avatar.value = tempSrc.value;
  }
 

  let reg =
    /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im;

  if (memberTrueName.value && reg.test(memberTrueName.value)) {
    ElMessage.warning("真实姓名包含特殊字符，请重新输入");
    return;
  }

  let params = {
    memberAvatar: avatar.value,
    memberName: memberNameInput.value,
    memberTrueName:memberTrueName.value ? memberTrueName.value.toString().trim() : '',
    memberNickName:memberNickNameInput.value ? memberNickNameInput.value.toString().trim() : '',
    memberCompany:member_company.value,
    memberMainProduct:member_main_product.value
  };

  post("v3/member/front/member/updateInfo", params).then((res) => {
    if (res.state == 200) {
      ElMessage.success(res.msg);
      Object.assign(filtersStore.getMemberInfo,params)
      getInitData();
    } else {
      ElMessage.warning(res.msg);
    }
  });
};




onMounted(() => {
  getInitData();
});
</script>
<style lang="scss">
@import "@/assets/style/member/info.scss";


</style>