HM21St_Page_User/src/views/personalCenter/components/Setting.vue

<template>
  <div class="setting personal-setting" v-loading="loading" v-if="personalInfo">
    <template v-if="!settingFlag">
      <div class="setting-top">
        <div class="avator-box">
          <el-image
            :src="
              personalInfo.image_url
                ? personalInfo.image_url
                : require('../../../assets/avatar.png')
            "
            fit="cover"
            style="width: 96px; height: 96px"
          >
          </el-image>
          <a class="img-crop">
            <upload
              :datafileList="infoForm.cover_image_list"
              :filleNumber="99"
              :changeFillId="handleAvatarSuccess"
              :fileName="'cover'"
              :showList="true"
              uploadType="image"
            />
          </a>
        </div>
        <div class="center">
          <div class="info-items" style="width: 400px">
            <label>用户名：</label>
            <span>{{ personalInfo.user_name }}</span>
          </div>
          <div class="info-items">
            <label>手机号码：</label>
            <span>{{
              personalInfo.phone
                ? personalInfo.phone.substring(0, 3) +
                  "******" +
                  personalInfo.phone.substring(9, 11)
                : "-"
            }}</span>
          </div>
          <div class="info-items" style="width: 400px">
            <label>账号ID：</label>
            <span>{{ personalInfo.id }}</span>
          </div>
          <div class="info-items">
            <label>邮箱：</label>
            <span>{{ personalInfo.email ? personalInfo.email : "-" }}</span>
          </div>
          <div class="info-items" style="width: 400px">
            <label>注册时间：</label>
            <span>{{ personalInfo.register_time }}</span>
          </div>
          <div class="info-items">
            <label>机构：</label>
            <span>{{ personalInfo.org_name }}</span>
          </div>
        </div>
      </div>
      <div class="setting-bottom">
        <div class="tabs-box">
          <a
            :class="[tabsIndex === 0 ? 'active' : '']"
            @click="handleChangeTabs(0)"
            >基本信息</a
          >
          <a
            :class="[tabsIndex === 1 ? 'active' : '']"
            @click="handleChangeTabs(1)"
            >安全设置</a
          >
        </div>
        <template v-if="tabsIndex === 0">
          <el-form
            :model="infoForm"
            :rules="rules"
            ref="ruleForm"
            label-width="150px"
            class="setting-form"
          >
            <el-form-item label="用户名" prop="name">
              <el-input
                v-model="infoForm.name"
                placeholder="请输入用户名"
                maxlength="20"
              ></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
              <el-input
                v-model="infoForm.realName"
                placeholder="请输入真实姓名"
                maxlength="20"
                @blur="handleTrim('infoForm', 'realName')"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="infoForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="所在省市" prop="selectedOptions">
              <el-cascader
                size="medium"
                :options="$provinceCityList"
                v-model="infoForm.selectedOptions"
                @change="handleCity"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="备注" prop="desc">
              <el-input
                type="textarea"
                v-model="infoForm.desc"
                placeholder="请输入备注"
                maxlength="100"
                :rows="4"
                show-word-limit
                @blur="handleTrim('infoForm', 'desc')"
              ></el-input>
            </el-form-item>
            <el-form-item label="我的机构" prop="region">
              <el-select
                v-model="infoForm.region"
                placeholder="请选择机构"
                :disabled="personalInfo.is_manager === 'true'"
              >
                <el-option
                  v-for="item in orgList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!--  -->
              <el-tag
                class="audit-status"
                v-if="personalInfo.audit_status === 0"
              >
                <svg-icon icon-class="information-fill"></svg-icon>审核中
              </el-tag>
              <el-tag
                class="audit-status audit-refused"
                v-if="personalInfo.audit_status === 2"
              >
                <i class="el-icon-error"></i>已拒绝
              </el-tag>
              <!-- <el-button v-if="regionFlag" type="primary" size="small" class="btn" @click="regionFlag=!regionFlag">申请变更</el-button>
                        <template v-else>
                            <el-button type="primary" @click="handleChangeOrg" size="small" class="btn">提交</el-button>
                            <el-button @click="handleorgCancel" size="small">取消</el-button>
                        </template> -->
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit('ruleForm')"
                size="small"
                :loading="submitLoading"
                >保存</el-button
              >
              <el-button @click="onCancel('ruleForm')" size="small"
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </template>
        <template v-if="tabsIndex === 1">
          <div class="safe-items">
            <label>登录密码</label>
            <div class="safe-items-right">
              <p class="hasContent">
                已设置。密码至少6位字符，支持数字和字母，且必须同时包含数字和大小写字母。
              </p>
              <a @click="handleSetting('passwordFlag')">{{
                personalInfo.password ? "修改" : "设置"
              }}</a>
            </div>
          </div>
          <div class="safe-items">
            <label>绑定手机</label>
            <div class="safe-items-right">
              <p v-if="personalInfo.phone" class="hasContent">
                已绑定：
                {{
                  personalInfo.phone.substring(0, 3) +
                  "******" +
                  personalInfo.phone.substring(9, 11)
                }}
              </p>
              <p v-else class="noContent">
                您暂未绑定手机，绑定手机可以有效的保护账号的安全。
              </p>
              <a @click="handleSetting('phoneFlag')">{{
                personalInfo.phone ? "修改" : "设置"
              }}</a>
            </div>
          </div>
          <div class="safe-items">
            <label>绑定邮箱</label>
            <div class="safe-items-right">
              <p v-if="personalInfo.email" class="hasContent">
                已绑定： {{ personalInfo.email }}
              </p>
              <p v-else class="noContent">
                您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。
              </p>
              <a @click="handleSetting('emailFlag')">{{
                personalInfo.email ? "修改" : "设置"
              }}</a>
            </div>
          </div>
        </template>
      </div>
    </template>
    <div class="setting-iframe" v-if="settingFlag && passwordFlag">
      <p class="title">
        <i
          class="el-icon-arrow-left"
          @click="handleSetting('passwordFlag')"
        ></i>
        登录密码
      </p>
      <el-form
        :model="passwordForm"
        :rules="rulesPassword"
        ref="passwordForm"
        label-width="100px"
        class="passwordForm"
      >
        <el-form-item label="原始密码" prop="oldPwd">
          <el-input
            v-model="passwordForm.oldPwd"
            :type="oldPwdFlag ? 'text' : 'password'"
            autocomplete="off"
            placeholder="请输入密码"
            maxlength="20"
            @blur="handleTrim('passwordForm', 'oldPwd')"
          >
            <i
              slot="suffix"
              class="el-icon-view show-icon"
              @click="changeIcon('oldPwdFlag')"
              v-if="oldPwdFlag"
            ></i>
            <i
              slot="suffix"
              class="show-icon"
              @click="changeIcon('oldPwdFlag')"
              v-else
            >
              <svg-icon icon-class="eye-invisible"></svg-icon>
            </i>
          </el-input>
        </el-form-item>
        <el-form-item label="修改密码" prop="newPwd">
          <el-input
            v-model="passwordForm.newPwd"
            :type="newPwdFlag ? 'text' : 'password'"
            autocomplete="off"
            placeholder="请输入密码"
            maxlength="20"
            @blur="handleTrim('passwordForm', 'newPwd')"
          >
            <i
              slot="suffix"
              class="el-icon-view show-icon"
              @click="changeIcon('newPwdFlag')"
              v-if="newPwdFlag"
            ></i>
            <i
              slot="suffix"
              class="show-icon"
              @click="changeIcon('newPwdFlag')"
              v-else
            >
              <svg-icon icon-class="eye-invisible"></svg-icon>
            </i>
          </el-input>
        </el-form-item>
        <el-form-item label="再次输入" prop="confirmPwd">
          <el-input
            v-model="passwordForm.confirmPwd"
            :type="comfirmPwdFlag ? 'text' : 'password'"
            autocomplete="off"
            placeholder="请输入密码"
            maxlength="20"
            @blur="handleTrim('passwordForm', 'confirmPwd')"
          >
            <i
              slot="suffix"
              class="el-icon-view show-icon"
              @click="changeIcon('comfirmPwdFlag')"
              v-if="comfirmPwdFlag"
            ></i>
            <i
              slot="suffix"
              class="show-icon"
              @click="changeIcon('comfirmPwdFlag')"
              v-else
            >
              <svg-icon icon-class="eye-invisible"></svg-icon>
            </i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmitPassword('passwordForm')"
            size="small"
            :loading="passwordLoading"
            >保存</el-button
          >
          <el-button @click="onCancel('passwordForm')" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="setting-iframe" v-if="settingFlag && phoneFlag">
      <p class="title">
        <i class="el-icon-arrow-left" @click="handleSetting('phoneFlag')"></i>
        绑定手机
      </p>
      <el-form
        :model="phoneForm"
        :rules="rulesPhone"
        ref="phoneForm"
        label-width="100px"
        class="phoneForm"
      >
        <el-form-item label="新手机号" prop="newPhone">
          <el-input
            v-model="phoneForm.newPhone"
            autocomplete="off"
            placeholder="请输入完整手机号"
            maxlength="20"
            @blur="handleTrim('phoneForm', 'newPhone')"
          >
            <!-- <template slot="prepend">+86</template> -->
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="newCode" class="code-box">
          <el-input
            v-model="phoneForm.newCode"
            autocomplete="off"
            placeholder="请输入验证码"
            class="code-input"
            maxlength="20"
            @blur="handleTrim('phoneForm', 'newCode')"
          >
          </el-input>
          <el-button
            type="primary"
            @click="sendCode('times', 'newPhone', 'verificationCodesShow')"
            size="small"
            class="sendCode"
          >
            {{ verificationCodesShow ? times + "s" : "发送验证码" }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmitPhone('phoneForm')"
            size="small"
            :loading="passwordLoading"
            >保存</el-button
          >
          <el-button @click="onCancel('phoneForm')" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="setting-iframe" v-if="settingFlag && emailFlag">
      <p class="title">
        <i class="el-icon-arrow-left" @click="handleSetting('emailFlag')"></i>
        绑定邮箱
      </p>
      <el-form
        :model="emailForm"
        :rules="rulesEmail"
        ref="emailForm"
        label-width="100px"
        class="emailForm"
      >
        <el-form-item label="绑定邮箱" prop="email">
          <el-input
            v-model="emailForm.email"
            autocomplete="off"
            placeholder="请输入邮箱地址"
            maxlength="100"
            @blur="handleTrim('emailForm', 'email')"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" class="code-box">
          <el-input
            v-model="emailForm.code"
            autocomplete="off"
            placeholder="请输入验证码"
            class="code-input"
            maxlength="20"
            @blur="handleTrim('emailForm', 'code')"
          >
          </el-input>
          <el-button
            type="primary"
            @click="
              sendCode('timee', 'email', 'verificationCodeeShow', 'email')
            "
            size="small"
            class="sendCode"
          >
            {{ verificationCodeeShow ? timee + "s" : "发送验证码" }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmitEmail('emailForm')"
            size="small"
            :loading="passwordLoading"
            >保存</el-button
          >
          <el-button @click="onCancel('emailForm')" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { mapState } from "vuex";
import { getLogin } from "@/api/ajax";
import Upload from "../../../components/Upload.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Upload },
  props: [],
  data() {
    //这里存放数据
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,16}$/;
        let result = reg.test(value);
        if (result) {
          callback();
        } else {
          callback(new Error("密码必须同时包含数字和大小写字母"));
        }
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passwordForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        let reg = /^1[3-9]\d{9}$/;
        let regex = /^09\d{7,8}$/;
        let result = reg.test(value) || regex.test(value);
        if (result) {
          callback();
        } else {
          callback(new Error("请输入正确的手机号"));
        }
      }
    };
    const validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱地址"));
      } else {
        let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        let result = reg.test(value);
        if (result) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱地址"));
        }
      }
    };
    return {
      show: false, // 编辑头像flag
      tabsIndex: 0,
      personalInfo: null,
      infoForm: {
        name: "",
        realName: " ",
        sex: 1,
        selectedOptions: [],
        desc: "",
        region: "",
        cover_image_list: [],
        cover_image_id: null,
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        region: [{ required: true, message: "请选择机构", trigger: "change" }],
        selectedOptions: [
          {
            type: "array",
            required: true,
            message: "请选择所在省市",
            trigger: "change",
          },
        ],
      },
      regionFlag: true, // 修改机构
      settingFlag: false, // 修改设置
      passwordFlag: false, // 修改密码
      phoneFlag: false, // 修改手机
      emailFlag: false, // 修改邮箱
      passwordForm: {
        oldPwd: "", // 旧密码
        newPwd: "", // 新密码
        confirmPwd: "", // 确认密码
      },
      rulesPassword: {
        oldPwd: [
          { required: true, message: "请输入原始密码", trigger: "blur" },
        ],
        newPwd: [
          { required: true, validator: validatePass, trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "请输入 6-16 位密码，且必须同时包含数字和大小写字母",
            trigger: "change",
          },
        ],
        confirmPwd: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      oldPwdFlag: false, // 查看旧密码
      newPwdFlag: false, // 查看新密码
      comfirmPwdFlag: false, // 查看确认密码
      phoneForm: {
        oldPhone: "", // 旧手机
        oldCode: "", // 旧手机验证码
        newPhone: "", // 新手机
        newCode: "", // 新手机验证码
      },
      rulesPhone: {
        oldPhone: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        oldCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        newPhone: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        newCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      time: 60, //获取验证码的时间
      verificationCodeShow: false, //是否已经获取了验证码
      times: 60, //获取验证码的时间
      verificationCodesShow: false, //是否已经获取了验证码
      timee: 60, //获取验证码的时间
      verificationCodeeShow: false, //是否已经获取了验证码
      emailForm: {
        email: "",
        code: "",
      },
      rulesEmail: {
        email: [{ required: true, validator: validateEmail, trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      loading: false,
      orgList: [],
      submitLoading: false,
      passwordLoading: false,
      timer: null,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["$provinceCityList"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 编辑头像
    toggleShow() {
      this.show = !this.show;
    },
    // 切换tabs
    handleChangeTabs(value) {
      this.tabsIndex = value;
    },
    handleChangeFilters(item) {
      console.log(item);
      // if(this.filterTypeArr.indexOf(value)==-1){
      //     this.filterTypeArr.push(value)
      // }else{
      //     this.filterTypeArr.splice(this.filterTypeArr.indexOf(value),1)
      // }
    },
    // 查询词汇列表
    handleWordList() {
      this.filterTypeArr = [];
    },
    // 级联选择器
    handleCity(value) {
      // console.log(value)
    },
    // 提交表单
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          let MethodName = "/OrgServer/Client/PersonManager/UpdateMyBaseInfo";
          let data = {
            user_name: this.infoForm.name,
            real_name: this.infoForm.realName,
            sex: this.infoForm.sex,
            city_id: this.infoForm.selectedOptions[1],
            memo: this.infoForm.desc,
            org_id: this.infoForm.region,
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.submitLoading = false;
              if (res.status === 1) {
                this.getInfo();
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
            })
            .catch((res) => {
              this.submitLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 取消 恢复到修改前状态
    onCancel(formName) {
      this.$refs[formName].resetFields();
    },
    // 修改机构提交
    handleChangeOrg() {
      this.regionFlag = !this.regionFlag;
    },
    // 取消修改机构
    handleorgCancel() {
      this.regionFlag = !this.regionFlag;
      // 注意把原来的值赋回去
    },
    // 修改设置
    handleSetting(flag) {
      this.settingFlag = !this.settingFlag;
      this[flag] = !this[flag];
    },
    changeIcon(flag) {
      this[flag] = !this[flag];
    },
    // 修改密码提交表单
    onSubmitPassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.passwordLoading = true;
          let MethodName = "/OrgServer/Client/PersonManager/UpdateMyPassword";
          let data = {
            password_old: this.passwordForm.oldPwd,
            password: this.passwordForm.newPwd,
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.passwordLoading = false;
              if (res.status === 1) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.handleSetting("passwordFlag");
                this.passwordForm.oldPwd = "";
                this.passwordForm.newPwd = "";
                this.passwordForm.confirmPwd = "";
              }
            })
            .catch((res) => {
              this.passwordLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 修改手机提交表单
    onSubmitPhone(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.passwordLoading = true;
          let MethodName = "/OrgServer/Client/PersonManager/UpdateMyPhone";
          let data = {
            phone: this.phoneForm.newPhone,
            dynamic_verification_code: this.phoneForm.newCode,
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.passwordLoading = false;
              if (res.status === 1) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.getInfo();
                this.handleSetting("phoneFlag");
                this.phoneForm.newPhone = "";
                this.phoneForm.newCode = "";
              }
            })
            .catch((res) => {
              clearInterval(this.timer);
              this.timer = null;
              this.times = 60;
              this.timee = 60;
              this.passwordLoading = false;
              this.verificationCodeeShow = false;
              this.verificationCodesShow = false;
            });
        } else {
          return false;
        }
      });
    },
    // 修改邮箱
    onSubmitEmail(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.passwordLoading = true;
          let MethodName = "/OrgServer/Client/PersonManager/UpdateMyEmail";
          let data = {
            dynamic_verification_code: this.emailForm.code,
            email: this.emailForm.email,
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.passwordLoading = false;
              if (res.status === 1) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.getInfo();
                this.handleSetting("emailFlag");
                this.emailForm.code = "";
                this.emailForm.email = "";
              }
            })
            .catch((res) => {
              this.passwordLoading = false;
              clearInterval(this.timer);
              this.timer = null;
              this.times = 60;
              this.timee = 60;
              this.verificationCodeeShow = false;
              this.verificationCodesShow = false;
            });
        } else {
          return false;
        }
      });
    },
    // 发送验证码
    sendCode(time, phone, flag, obj) {
      let this_ = this;
      if (this_[time] != 60) {
        return;
      }
      this_.timer = null;
      // 修改手机号
      if (!obj) {
        if (this_.phoneForm[phone]) {
          let reg = /^1[3-9]\d{9}$/;
          let regex = /^09\d{7,8}$/;
          let result =
            reg.test(this_.phoneForm[phone]) ||
            regex.test(this_.phoneForm[phone]);
          if (!result) {
            this_.$message.warning("请输入正确的手机号");
            return;
          }
          this_[flag] = true;
          this_.timer = setInterval(() => {
            this_[time]--;
            if (this_[time] == 0) {
              this_[flag] = false;
              clearInterval(this_.timer);
              this_.timer = null;
              this_[time] = 60;
            }
          }, 1000);
          let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
          let data = {
            send_type: "SMS",
            phone_or_email: this_.phoneForm[phone],
          };
          getLogin(MethodName, data)
            .then((res) => {})
            .catch(() => {
              this_[flag] = false;
              clearInterval(this_.timer);
              this_.timer = null;
              this_[time] = 60;
            });
        } else {
          this_.$message.warning("请先输入手机号");
        }
      } else {
        // 修改邮箱
        if (this_.emailForm[phone]) {
          let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          let result = reg.test(this_.emailForm[phone]);
          if (!result) {
            this_.$message.warning("请输入正确的邮箱地址");
            return;
          }
          this_[flag] = true;
          this_.timer = setInterval(() => {
            this_[time]--;
            if (this_[time] == 0) {
              this_[flag] = false;
              clearInterval(this_.timer);
              this_.timer = null;
              this_[time] = 60;
            }
          }, 1000);
          let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
          let data = {
            send_type: "EMAIL",
            phone_or_email: this_.emailForm[phone],
          };
          getLogin(MethodName, data)
            .then((res) => {})
            .catch(() => {
              this_[flag] = false;
              clearInterval(this_.timer);
              this_.timer = null;
              this_[time] = 60;
            });
        } else {
          this_.$message.warning("请先输入邮箱");
        }
      }
    },
    getInfo() {
      this.loading = true;
      let MethodName = "/OrgServer/Client/PersonManager/GetMyInfo";
      let data = {};
      getLogin(MethodName, data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            this.personalInfo = res.person;
            this.infoForm = {
              name: this.personalInfo.user_name,
              realName: this.personalInfo.real_name,
              sex: this.personalInfo.sex,
              selectedOptions:
                this.personalInfo.province_id && this.personalInfo.city_id
                  ? [this.personalInfo.province_id, this.personalInfo.city_id]
                  : [],
              desc: this.personalInfo.memo,
              region: this.personalInfo.org_id,
              cover_image_list: [],
              cover_image_id: null,
            };
            this.$emit("changeTouxiang", this.personalInfo.image_url);
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    handleAvatarSuccess(fileList, name) {
      let MethodName = "/OrgServer/Client/PersonManager/UpdateMyImage";
      let data = {
        image_id:
          fileList.length > 0 &&
          fileList[fileList.length - 1].response &&
          fileList[fileList.length - 1].response.file_info_list &&
          fileList[fileList.length - 1].response.file_info_list[0]
            ? fileList[fileList.length - 1].response.file_info_list[0].file_id
            : "",
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.getInfo();
          }
        })
        .catch((res) => {});
    },
    // 查询列表
    getOrgList() {
      let MethodName = "/OrgServer/Client/OrgManager/GetOrgIndexList";
      let data = {
        name: "",
        status: 1,
        sn: "",
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.orgList = res.org_index_list;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 去掉前后空格
    handleTrim(form, fild) {
      this[form][fild] = this[form][fild].trim();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getOrgList();
    this.getInfo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.setting {
  height: 100%;
  &-top {
    margin: 0 0 12px 0;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 22px 40px;
    .avator-box {
      width: 96px;
      height: 96px;
      position: relative;
      .img-crop {
        position: absolute;
        // padding: 4px;
        width: 30px;
        height: 30px;
        right: -4px;
        bottom: -4px;
        border-radius: 50%;
        display: block;
        text-align: center;
        font-size: 0;
        border: 2px solid #ffffff;
        background: #f2f3f5 url("../../../assets/camera.png") center no-repeat;
        background-size: 12px;
      }
      .el-image {
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .center {
      flex: 1;
      display: flex;
      flex-flow: wrap;
      margin-top: 12px;
      .info-items {
        margin-bottom: 12px;
        width: 41%;
      }
      label {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: #86909c;
        width: 120px;
        text-align: right;
        display: inline-block;
        padding-right: 10px;
      }
      span {
        font-size: 14px;
        line-height: 22px;
        color: #1d2129;
      }
    }
  }
  &-bottom {
    padding: 24px;
    background: #ffffff;
    border-radius: 4px;
    min-height: calc(100vh - 270px);
    .tabs-box {
      display: flex;
      padding-bottom: 16px;
      a {
        font-size: 14px;
        line-height: 22px;
        color: #4e5969;
        border-radius: 100px;
        padding: 5px 16px;
        margin-right: 12px;
        &:hover {
          background: #f2f3f5;
        }
        &.active {
          background: #f2f3f5;
          font-weight: 500;
          color: #165dff;
        }
      }
    }
    .btn {
      margin-left: 16px;
    }
    .safe-items {
      display: flex;
      width: 100%;
      padding: 30px 20px 13px 20px;
      label {
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        color: #4e5969;
      }
      &-right {
        border-bottom: 1px solid #e5e6eb;
        padding-bottom: 20px;
        flex: 1;
        margin-left: 16px;
        display: flex;
        justify-content: space-between;
        p {
          margin: 0;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #4e5969;
          &.noContent {
            color: #86909c;
          }
        }
        a {
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #165dff;
        }
      }
    }
  }
  &-iframe {
    width: 100%;
    height: 100%;
    background: #ffffff;
    padding: 24px;
    .title {
      margin: 0;
      font-weight: 400;
      font-size: 20px;
      line-height: 28px;
      color: #000000;
      .el-icon-arrow-left {
        margin-right: 8px;
        cursor: pointer;
      }
    }
    .passwordForm,
    .phoneForm,
    .emailForm {
      padding-top: 40px;
      .show-icon {
        cursor: pointer;
        color: #4e5969;
      }
    }
    .code-input {
      width: 268px;
      .el-input__inner {
        border-radius: 2px 0 0 2px;
      }
    }
  }
}
</style>
<style lang="scss">
.setting {
  .el-input,
  .el-textarea {
    width: 360px;
  }
  .el-input__inner {
    height: 32px;
    color: #1d2129;
    background: #f2f3f5;
    border: none;
  }
  .el-textarea__inner,
  .el-input-group__prepend {
    color: #1d2129;
    background: #f2f3f5;
    border: none;
  }
  .el-input__count {
    background: #f2f3f5;
  }
  .el-form-item__label {
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    color: #4e5969;
  }
  .el-form-item__content,
  .el-input__icon {
    line-height: 32px;
    color: #4e5969 !important;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #165dff;
  }
  .el-radio__input.is-checked .el-radio__inner {
    background: #165dff;
    border-color: #165dff;
  }
  .el-button--primary {
    background: #165dff;
    border-color: #165dff;
    border-radius: 2px;
    &:hover {
      background: #4080ff;
      border-color: #4080ff;
    }
    &:focus {
      background: #0e42d2;
      border-color: #0e42d2;
    }
  }
  .el-button--default {
    background: #f2f3f5;
    border-radius: 2px;
    border: none;
    color: #4e5969;
    height: 32px;
    &:hover {
      background: #e5e6eb;
    }
    &:focus {
      background: #c9cdd4;
    }
  }
  .setting-form {
    padding-top: 26px;
  }
  .code-box {
    .el-form-item__content {
      display: flex;
    }
  }
  .code-input {
    height: 32px;
    .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
  }
  .sendCode {
    border-radius: 0 4px 4px 0;
    margin-top: 1px;
    width: 92px;
  }
  .el-input-group__prepend {
    width: 54px;
    height: 32px;
    border: none;
    background: #f2f3f5;
    border-radius: 2px 0px 0px 2px;
    line-height: 32px;
    text-align: center;
    padding: 0;
  }
  .el-input-group--prepend {
    display: flex;
    .el-input__inner {
      margin-left: 8px;
      flex: 1;
    }
  }
}
.personal-setting {
  .upload {
    width: 30px;
    height: 30px;
    overflow: hidden;
    .upload-demo {
      opacity: 0;
      width: 100% !important;
    }
  }
  .audit-status {
    border: none;
    margin-left: 16px;
    border-radius: 2px;
    background: #e8f7ff;
    padding: 1px 8px;
    color: #3491fa;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    height: 24px;
    .svg-icon {
      margin-right: 4px;
    }
    &.audit-refused {
      color: #f53f3f;
      background: #ffece8;
      .el-icon-error {
        margin-right: 4px;
      }
    }
  }
}
</style>