shenze-sysMan/src/views/user.vue

<template>
  <div class="page flex-col">
    <s-header
      :name="sys ? sys.title : $t('public.sysName')"
      :noback="true"
      :isFixed="false"
    ></s-header>
    <div class="userPageBox">
      <div class="userBaseBox">
        <div class="baseRow flex-row justify-between">
          <div class="group2 flex-col"></div>
          <span class="baseText">{{ $t("user.essentialInformation") }}</span>
        </div>
        <div class="userMessage flex-row justify-between">
          <div class="userId">
            <p class="userText">{{ accountDetail.managerId }}</p>
            <p class="userText">{{ $t("user.systemId") }}</p>
          </div>
          <div class="userLine"></div>
          <div class="userId">
            <p class="userText">{{ accountDetail.username }}</p>
            <p class="userText">{{ $t("user.myAccount") }}</p>
          </div>
          <div class="userLine"></div>
          <div class="userId">
            <p class="userText">{{ accountDetail.name }}</p>
            <p class="userText">{{ $t("user.myName") }}</p>
          </div>
        </div>
        <div class="userInfoBox">
          <!-- 地区 -->
          <div v-if="!areaShow" class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.region") }}: </span>
            <div class="cust_vantBorder">
              <div class="filedInpPad">
                <van-field
                  @click-input="fieldValueInpClk"
                  readonly
                  clearable
                  v-model="fieldValue"
                  :placeholder="$t('user.regionPlace')"
                >
                  <template #right-icon>
                    <div class="l-flex-RC">
                      <van-icon
                        v-if="fieldValue"
                        @click="
                          fieldValue = '';
                          accountDetail.areaId = '';
                        "
                        class="o-mr-6"
                        name="clear"
                      />
                      <van-icon @click="fieldValueInpClk" name="arrow-down" />
                    </div>
                  </template>
                </van-field>
              </div>
            </div>
            <van-icon name="edit" class="editIcon" @click="editClk(4)" />
          </div>
          <div v-else class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.region") }}: </span>
            <span>{{ fieldValue }}</span>
            <van-icon name="edit" class="editIcon" @click="editClk(4)" />
          </div>
          <!-- 手机号 -->
          <div v-if="!phoneNumberShow" class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.phoneNumber") }}: </span>
            <div class="cust_vantBorder">
              <van-field
                class="relationClass"
                v-model="cofficentForm.phone"
                :placeholder="$t('user.phoneNumberPlace')"
              >
                <template #button>
                  <van-button
                    type="primary"
                    @click="mailboxChg(cofficentForm.phone, 3)"
                    >{{ $t("user.confirmLog") }}
                  </van-button>
                </template>
              </van-field>
            </div>
            <van-icon name="edit" class="editIcon" @click="editClk(3)" />
          </div>
          <div v-else class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.phoneNumber") }}: </span>
            <span>{{ accountDetail.phone }}</span>
            <van-icon name="edit" class="editIcon" @click="editClk(3)" />
          </div>
          <!-- 邮箱 -->
          <div v-if="!mailboxShow" class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.mailbox") }}: </span>
            <div class="cust_vantBorder">
              <van-field
                class="relationClass"
                v-model="cofficentForm.mailBox"
                :placeholder="$t('user.mailboxPlace')"
              >
                <template #button>
                  <van-button
                    type="primary"
                    @click="mailboxChg(cofficentForm.mailBox, 2)"
                    >{{ $t("user.confirmLog") }}
                  </van-button>
                </template>
              </van-field>
            </div>
            <van-icon name="edit" class="editIcon" @click="editClk(2)" />
          </div>
          <div v-else class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.mailbox") }}: </span>
            <span>{{ accountDetail.email }}</span>
            <van-icon name="edit" class="editIcon" @click="editClk(2)" />
          </div>
          <!-- 关联上级 -->
          <div v-if="!relationType" class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.associateParent") }}: </span>
            <div class="cust_vantBorder">
              <van-field
                class="relationClass"
                v-model="cofficentForm.associateParent"
                :placeholder="$t('user.associateParentPlace')"
              >
                <template #button>
                  <van-button
                    type="primary"
                    @click="mailboxChg(cofficentForm.associateParent, 1)"
                    >{{ $t("user.confirmLog") }}</van-button
                  >
                </template>
              </van-field>
            </div>
            <van-icon name="edit" class="editIcon" @click="editClk(1)" />
          </div>
          <div v-else class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.associateParent") }}: </span>
            <span>{{ relationAdminName }}</span>
            <van-icon name="edit" class="editIcon" @click="editClk(1)" />
          </div>
        </div>
      </div>
      <div class="lineBox"></div>
      <div class="commonOperBox">
        <div class="baseRow flex-row justify-between">
          <div class="group2 flex-col"></div>
          <span class="baseText">{{ $t("user.commonOperations") }}</span>
        </div>
        <div class="operListBox">
          <div
            v-if="roleCheck()"
            class="taskListRow flex-col"
            @click="pushPageList('/taskMessage')"
          >
            <div class="taskIcon taskMessageIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">{{ $t("user.taskMessage") }}</div>
            </div>
          </div>
          <div
            class="taskListRow flex-col"
            @click="pushPageList('/joinpayMch')"
          >
            <div class="taskIcon joinPayMchIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">{{ $t("user.withdrawalAccountNo") }}</div>
            </div>
          </div>
          <div class="taskListRow flex-col" @click="pushPageList('/shandeMch')">
            <div class="taskIcon shandeMchIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">
                {{ $t("user.standbyWithdrawalAccountNo") }}
              </div>
            </div>
          </div>
          <div
            class="taskListRow flex-col"
            @click="pushPageList('/changepassword')"
          >
            <div class="taskIcon changePasswordIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">{{ $t("user.changePassword") }}</div>
            </div>
          </div>
          <div class="taskListRow flex-col" @click="operUnipay()">
            <div class="taskIcon selfPayIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">{{ $t("user.selfRecharging") }}</div>
            </div>
          </div>
          <div class="taskListRow flex-col" @click="onperExitSys()">
            <div class="taskIcon loginOutIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">{{ $t("user.logOut") }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <nav-bar></nav-bar>
    <!-- 退出登录弹窗 -->
    <kDialog
      :dialogTitle="$t('user.logOutTips')"
      :cancelBtnTxt="$t('user.cancelLog')"
      :confirmBtnTxt="$t('user.confirmLog')"
      ref="kDialogRef"
      :dialogContent="$t('user.logOutContent')"
      @confirmclk="confirmClk"
    >
    </kDialog>
    <!-- 地区弹窗 -->
    <kCascader
      @getareaname="getAreaName"
      :selectId="accountDetail.areaId"
      @areapopfinish="areaPopFinish"
      ref="kCascaderRef"
    ></kCascader>
  </div>
</template>

<script>
// 导入地区弹窗
import kCascader from "@/components/commom/kCascader/index.vue";
// 导入接口
import { getAdmin } from "@/service/merchantManage";
import { updateAdmin } from "@/service/merchantManage";
// 引入弹窗
import kDialog from "@/components/commom/kDialog/index.vue";
import { onMounted, reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import navBar from "@/components/NavBar";
import {
  getLoginUser,
  $M_EmailAvailable,
  $M_PhoneTest,
} from "@/common/js/utils";
import { useRouter } from "vue-router";
import { tAdminGetRelation, tAdminSetRelationAdmin } from "@/service/user";
import { Toast } from "vant";
import { useI18n } from "vue-i18n";
export default {
  components: { sHeader, navBar, kDialog, kCascader },
  setup() {
    // 引入语言
    const { t } = useI18n();
    // 账户信息
    const accountDetail = ref({});
    // 控制都去显示隐藏
    const areaShow = ref(true);
    // 控制手机显示隐藏
    const phoneNumberShow = ref(true);
    // 控制邮箱显示隐藏
    const mailboxShow = ref(true);
    const user = getLoginUser();
    const router = useRouter();
    const relationAdminName = ref("");
    const relationType = ref(true);
    const sys = ref(null);
    // 修改的个人信息
    const cofficentForm = reactive({
      associateParent: relationAdminName.value,
      mailBox: accountDetail.value.email,
      phone: accountDetail.value.phone,
      area: "",
    });
    // 点击修改图标
    const editClk = (idx) => {
      switch (idx) {
        case 1:
          cofficentForm.associateParent = relationAdminName.value;
          relationType.value = !relationType.value;
          mailboxShow.value = true;
          phoneNumberShow.value = true;
          areaShow.value = true;
          break;
        case 2:
          cofficentForm.mailBox = accountDetail.value.email;
          relationType.value = true;
          mailboxShow.value = !mailboxShow.value;
          phoneNumberShow.value = true;
          areaShow.value = true;
          break;
        case 3:
          cofficentForm.phone = accountDetail.value.phone;
          relationType.value = true;
          mailboxShow.value = true;
          phoneNumberShow.value = !phoneNumberShow.value;
          areaShow.value = true;
          break;
        case 4:
          cofficentForm.area = accountDetail.value.area;
          relationType.value = true;
          mailboxShow.value = true;
          phoneNumberShow.value = true;
          areaShow.value = !areaShow.value;
          break;
      }
    };
    // 点击邮箱的确定按钮
    const mailboxChg = async (e, idx) => {
      switch (idx) {
        case 1:
          if (!e) {
            Toast(t("user.associateParentPlace"));
          } else {
            const { data } = await tAdminSetRelationAdmin({
              adminId: user.id,
              username: e,
            });
            relationType.value = true;
            if (data.code === "00000") {
              Toast(data.message);
              setTimeout(() => {
                gettAdminGetRelation();
              }, 500);
            }
          }
          break;
        case 2:
          if (!e) {
            Toast(t("user.mailboxPlace"));
          } else if (!$M_EmailAvailable(e)) {
            Toast(t("user.corrEmailPlace"));
          } else {
            const params = {
              id: user.id,
              email: e,
            };
            const { data } = await updateAdmin(params);
            mailboxShow.value = true;
            if (data.code === "00000") {
              Toast(data.message);
              setTimeout(() => {
                getAcccountDetail();
              }, 500);
            }
          }
          break;
        case 3:
          if (!e) {
            Toast(t("user.phoneNumberPlace"));
          } else if (!$M_PhoneTest(e)) {
            Toast(t("user.corrPhonePlace"));
          } else {
            const params = {
              id: user.id,
              phone: e,
            };
            const { data } = await updateAdmin(params);
            phoneNumberShow.value = true;
            if (data.code === "00000") {
              Toast(data.message);
              setTimeout(() => {
                getAcccountDetail();
              }, 500);
            }
          }
          break;
      }
    };
    // 获取账户详情
    const getAcccountDetail = () => {
      getAdmin({ id: user.id }).then((res) => {
        accountDetail.value = res.data.data;

        // 查询地址回显
        kCascaderRef.value.init(accountDetail.value.areaId);
      });
    };
    // 退出登录弹窗
    const kDialogRef = ref(null);
    // 点击右侧按钮
    const confirmClk = () => {
      // 获取缓存的语言
      const curLang = localStorage.getItem("curLang");
      // 清空缓存
      localStorage.clear();
      localStorage.setItem("curLang", curLang);
      if (sys.value) {
        setTimeout(() => {
          router.push({
            path: "login",
            query: { relation_admin_id: sys.value.relationAdminId },
          });
        }, 200);
      } else {
        setTimeout(() => {
          router.push({ path: "login" });
        }, 200);
      }
    };

    // 初始化页面获取列表
    onMounted(async () => {
      if (localStorage.getItem("loginSys")) {
        const loginSysString = localStorage.getItem("loginSys");
        sys.value = JSON.parse(loginSysString);
      }
      // 获取关联上级
      gettAdminGetRelation();
      // 获取账户
      getAcccountDetail();
    });
    const gettAdminGetRelation = async () => {
      const { data } = await tAdminGetRelation({
        relationAdminId: user.relationAdminId,
      });
      if (typeof data === "string") {
        relationAdminName.value = data;
      }
    };
    const operUnipay = () => {
      router.push({ path: "uniPay" });
    };
    const onperExitSys = () => {
      kDialogRef.value.openDialog();
    };
    const pushPageList = (url) => {
      router.push({ path: url });
    };
    const roleCheck = () => {
      if (user.isAdmined) {
        return true;
      } else {
        const menuList = user.menuCodeList.filter((item) => item === "M6");
        return menuList.length > 0;
      }
    };
    // 地区弹窗
    const fieldValue = ref("");
    const kCascaderRef = ref(null);
    // 点击地区输入框
    const fieldValueInpClk = () => {
      kCascaderRef.value.openPop();
    };
    // 选择地区完成
    const areaPopFinish = async (e) => {
      console.log("e", e);
      fieldValue.value = e.selectName;
      accountDetail.value.areaId = e.selectId;
      const params = {
        id: user.id,
        areaId: e.selectId,
      };
      const { data } = await updateAdmin(params);
      areaShow.value = true;
      if (data.code === "00000") {
        Toast(data.message);
        setTimeout(() => {
          getAcccountDetail();
        }, 500);
      }
    };
    // 获取回显的值
    const getAreaName = (e) => {
      fieldValue.value = e;
    };
    return {
      user,
      operUnipay,
      onperExitSys,
      relationAdminName,
      relationType,
      pushPageList,
      roleCheck,
      sys,
      kDialogRef,
      confirmClk,
      mailboxShow,
      mailboxChg,
      phoneNumberShow,
      editClk,
      cofficentForm,
      areaShow,
      accountDetail,
      fieldValue,
      kCascaderRef,
      fieldValueInpClk,
      areaPopFinish,
      getAreaName,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../common/style/mixin.less";

.page {
  width: 100%;
  background: url(../assets/user/bg.png) top center no-repeat;
  background-size: 100%;
  position: relative;

  /deep/ .simple-header {
    background: transparent;
  }

  .userPageBox {
    width: 100%;
    height: calc(100% - 100px);
    height: 100%;
    margin-bottom: 100px;
    overflow: auto;
    overflow-x: hidden;
  }

  .userBaseBox {
    width: 100%;
  }

  .baseRow {
    width: 100%;
    height: 20px;
    margin-left: 15px;
    margin-top: 5px;
    justify-content: flex-start;

    .group2 {
      background-color: rgba(128, 150, 236, 1);
      border-radius: 2px;
      width: 4px;
      height: 16px;
      margin-top: 4px;
    }

    .baseText {
      width: 150px;
      height: 20px;
      overflow-wrap: break-word;
      color: rgba(64, 77, 116, 1);
      font-size: 14px;
      font-family: PingFangSC-Medium;
      text-align: left;
      white-space: nowrap;
      line-height: 20px;
      display: block;
      margin-left: 15px;
    }
  }

  .userMessage {
    text-align: center;
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
    line-height: 1.7;

    .userText {
      font-size: 14px;
      font-family: PingFangSC-Medium;
      margin: 0;
    }

    .userLine {
      width: 1px;
      height: 3.5em;
      font-size: 14px;
      background: #e7eaf7;
    }
  }

  .userInfoBox {
    margin-top: 25px;
    padding: 0px 15px 20px;
    .userInfo {
      // width: 87%;
      margin: 0 auto;
      justify-content: flex-start;
      margin-top: 20px;
      position: relative;

      .filedInpPad {
        /deep/ .van-cell {
          padding: 0 !important;
        }
      }

      .editIcon {
        position: absolute;
        right: 0;
        font-size: 18px;
        color: #4d6add;
      }

      .userInfoLeft {
        width: 76px;
      }

      .relationClass {
        padding: 0;

        /deep/ .van-field__button button {
          background-color: #4d6add;
          color: #fff;
          padding: 0 0.5em;
          margin-left: 10px;
        }
      }
    }
  }

  .lineBox {
    width: 100%;
    height: 15px;
    background-color: #f6f7fc;
  }

  .commonOperBox {
    width: 100%;
    background: #fff;

    .operListBox {
      margin-top: 20px;

      .taskListRow {
        width: 100%;
        height: 53px;
        flex-wrap: wrap;

        .taskIcon {
          width: 13%;
          height: 100%;
          position: relative;

          &.taskMessageIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/taskMessageIcon.png") top
              center no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }

          &.joinPayMchIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/joinPayMchIcon.png") top center
              no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }

          &.shandeMchIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/shandeMchIcon.png") top center
              no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }

          &.changePasswordIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/changePasswordIcon.png") top
              center no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }

          &.selfPayIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/self.png") top center no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }

          &.loginOutIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/loginOut.png") top center
              no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }
        }

        .taskRight {
          width: 87%;
          height: 100%;
          position: relative;
          border-bottom: 1px solid #e7eaf7;

          &::after {
            content: "";
            position: absolute;
            width: 6px;
            height: 12px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng51122feddbc4a9b3e0b055ed6181d290e60825befaa5c777794f1412ff817e57)
              top center no-repeat;
            background-size: 100%;
            right: 0.55rem;
            top: 0.5rem;
          }

          .taskTitle {
            line-height: 53px;
          }
        }
      }
    }
  }
}
</style>