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 v-if="!symbolShow" class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.currencySymbol") }}: </span>
            <div class="cust_vantBorder">
              <van-field class="relationClass" v-model="cofficentForm.currencySymbol"
                :placeholder="$t('user.currencySymbolPlace')">
                <template #button>
                  <van-button type="primary" @click="mailboxChg(cofficentForm.currencySymbol, 5)">{{
                    $t("user.confirmLog") }}
                  </van-button>
                </template>
              </van-field>
            </div>
            <van-icon name="edit" class="editIcon" @click="editClk(5)" />
          </div>
          <div v-else class="userInfo l-flex-between">
            <span class="userInfoLeft">{{ $t("user.currencySymbol") }}: </span>
            <span>{{ accountDetail.currencySymbol }}</span>
            <van-icon name="edit" class="editIcon" @click="editClk(5)" />
          </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 v-if="isInland" class="taskListRow flex-col" @click="pushPageList('/joinpayMch')">
            <div class="taskIcon joinPayMchIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">{{ $t("user.withdrawalAccountNo") }}</div>
            </div>
          </div>

          <!-- Airwallex 钱包 -->
          <div v-if="isAbroad && user.companyType != '1'" class="taskListRow flex-col"
            @click="pushPageList('/airwallex')">
            <div class="taskIcon airwallexIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">{{ $t("user.airwallex") }}</div>
            </div>
          </div>

          <!-- 备用提现账号 -->
          <div v-if="isInland" class="taskListRow flex-col" @click="pushPageList('/huifuMch')">
            <div class="taskIcon shandeMchIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">
                {{ $t("user.standbyWithdrawalAccountNo") }}
              </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 v-if="isInWeChat" class="taskListRow flex-col" @click="pushPageList('/bindWechat')">
            <!--          <div class="taskListRow flex-col" @click="pushPageList('/bindWechat')">-->
            <div class="taskIcon bindWechatIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">
                {{ $t("user.bindWechat") }}
              </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 v-if="isInland" 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";
import { styleUrl } from "../common/js/utils";

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 symbolShow = 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: "",
      currencySymbol: accountDetail.value.currencySymbol,
    });
    // 点击修改图标
    const editClk = (idx) => {
      switch (idx) {
        case 1:
          cofficentForm.associateParent = relationAdminName.value;
          relationType.value = !relationType.value;
          mailboxShow.value = true;
          phoneNumberShow.value = true;
          areaShow.value = true;
          symbolShow.value = true;
          break;
        case 2:
          cofficentForm.mailBox = accountDetail.value.email;
          relationType.value = true;
          mailboxShow.value = !mailboxShow.value;
          phoneNumberShow.value = true;
          areaShow.value = true;
          symbolShow.value = true;
          break;
        case 3:
          cofficentForm.phone = accountDetail.value.phone;
          relationType.value = true;
          mailboxShow.value = true;
          phoneNumberShow.value = !phoneNumberShow.value;
          areaShow.value = true;
          symbolShow.value = true;
          break;
        case 4:
          cofficentForm.area = accountDetail.value.area;
          relationType.value = true;
          mailboxShow.value = true;
          phoneNumberShow.value = true;
          areaShow.value = !areaShow.value;
          symbolShow.value = true;
          break;
        case 5:
          cofficentForm.currencySymbol = accountDetail.value.currencySymbol;
          relationType.value = true;
          mailboxShow.value = true;
          phoneNumberShow.value = true;
          areaShow.value = true;
          symbolShow.value = !symbolShow.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;
        case 5:
          if (!e) {
            Toast(t("user.currencySymbolPlace"));
          } else {
            const params = {
              id: user.id,
              currencySymbol: e,
            };
            const { data } = await updateAdmin(params);
            symbolShow.value = true;
            if (data.code === "00000") {
              Toast(data.message);
              // 更新本地存储缓存中的currencySymbol的值
              user.currencySymbol = e; // 将新的currencySymbol的值赋值给user
              localStorage.setItem("loginUser", JSON.stringify(user));
              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 () => {
      // 加载样式
      styleUrl('user');
      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 isInWeChat = ref(false);
    const checkInWechat = () => {
      const ua = window.navigator.userAgent.toLowerCase();
      // 如果是在微信中打开
      if (/MicroMessenger/i.test(ua)) {
        isInWeChat.value = true;
      }
    };
    // 是否内陆或海外
    const isInland = ref(true);
    const isAbroad = ref(false);
    // const checkIsAbroad = async () => {
    //   try {
    //     const { data } = await getIfForeign(user.id);
    //     console.log("isAbroad >>> ", data);

    //     if (data.data === '1') {
    //       // TODO: 这里先把isAbroad设置为fasle，等开发完成再改成true；
    //       isAbroad.value = false;
    //       isInland.value = false;
    //     }
    //   } catch (error) {
    //     console.error(error);
    //   }
    // };
    const checkIsAbroad = async () => {
      try {
        const userInfo = localStorage.getItem("loginUser");
        const userIfForeign = JSON.parse(userInfo);
        // console.log("用户的海内外信息" + userIfForeign.ifForeign);
        // console.log("看下user是什么***" + user.menuCodeList);
        if (userIfForeign.ifForeign === '1') {
          isAbroad.value = true;
          isInland.value = false;
        }
      } catch (error) {
        console.error(error);
      }
    };

    onMounted(() => {
      checkInWechat();
      checkIsAbroad();
    })
    // 获取回显的值
    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,
      isInWeChat,
      getAreaName,
      isAbroad,
      checkIsAbroad,
      isInland,
      symbolShow
    };
  }
};
</script>

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