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

<template>
  <div class="member_info_container">
    <MemberTitle :memberTitle="L['会员信息']"></MemberTitle>
    <div class="member_info">
      <!-- <table class="form_item">
        <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>
     
      </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";
const L = getCurLanguage();
const filtersStore = useFiltersStore();
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 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 = () => {
  //初始化数据
  get("v3/member/front/member/memberInfo").then((res) => {
    if (res.state == 200) {
      memberNameInput.value = res.data.memberName;
      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;
    }
  });
};

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>