huilv

zzzz

2024-04-10 66d132b96fd30abf1d75bed49ff176a52b4101ee

 src/page/newUser/setting.vue

@@ -65,9 +65,21 @@
        <div style="margin-right: 10px">{{ language }}</div>
      </div>
    </div>
    <van-popup v-model="settingDialog" position="bottom" :style="{ height: '35%' }" @close="popClose">
      <div class="lang_box" v-for="(item, index) in actions" :key="index" @click="qkclick(item)">
        <div :class="$i18n.locale == item.lang ? 'lang_box_txt' : 'lang_box_txta'">
    <van-popup
      v-model="settingDialog"
      position="bottom"
      :style="{ height: '35%' }"
      @close="popClose"
    >
      <div
        class="lang_box"
        v-for="(item, index) in actions"
        :key="index"
        @click="qkclick(item)"
      >
        <div
          :class="$i18n.locale == item.lang ? 'lang_box_txt' : 'lang_box_txta'"
        >
          {{ item.text }}
        </div>
      </div>
@@ -112,341 +124,419 @@
</template>

<script>
  import * as api from "@/axios/api";
  import {
    Toast,
    MessageBox
  } from "mint-ui";
  import {
    isNull,
    pwdReg
  } from "@/utils/utils";
  import {
    mapMutations
  } from "vuex";
  import {
    Notify
  } from "vant";
import * as api from "@/axios/api";
import { Toast, MessageBox } from "mint-ui";
import { isNull, pwdReg } from "@/utils/utils";
import { mapMutations } from "vuex";
import { Notify } from "vant";

  export default {
    name: "newUser",
    data() {
      return {
        name: "大狗子",
        pswDialog: false,
        selectUserFlag: true,
        settingDialog: false,
        oldPassword: "", // 旧密码
        newPassword: "", // 新密码
        cirNewPassword: "", // 确认新密码
        userInfo: [],
        onlineService: "",
        language: "",
        actions: [{
            text: "English",
            icon: require("@/assets/ico/english.png"),
            lang: "zh-CN",
          },
          {
            text: "हिंदी",
            icon: require("@/assets/ico/india.png"),
            lang: "en"
          },
          {
            text: "한국인",
            icon: require("@/assets/ico/india.png"),
            lang: "hy"
          },
          {
            text: "ภาษาไทย",
            icon: require("@/assets/ico/india.png"),
            lang: "ty",
          },
          {
            text: "日本語にほんご",
            icon: require("@/assets/ico/india.png"),
            lang: "ry",
          },
export default {
  name: "newUser",
  data() {
    return {
      name: "大狗子",
      pswDialog: false,
      selectUserFlag: true,
      settingDialog: false,
      oldPassword: "", // 旧密码
      newPassword: "", // 新密码
      cirNewPassword: "", // 确认新密码
      userInfo: [],
      onlineService: "",
      language: "",
      actions: [
        {
          text: "English",
          icon: require("@/assets/ico/english.png"),
          lang: "zh-CN",
        },
        {
          text: "हिंदी",
          icon: require("@/assets/ico/india.png"),
          lang: "en",
        },
        {
          text: "한국인",
          icon: require("@/assets/ico/india.png"),
          lang: "hy",
        },
        {
          text: "ภาษาไทย",
          icon: require("@/assets/ico/india.png"),
          lang: "ty",
        },
        {
          text: "日本語にほんご",
          icon: require("@/assets/ico/india.png"),
          lang: "ry",
        },

          {
            text: "繁体中文",
            icon: require("@/assets/ico/tw.png"),
            lang: "tw"
          },
        ],
      };
        {
          text: "繁体中文",
          icon: require("@/assets/ico/tw.png"),
          lang: "tw",
        },
      ],
    };
  },
  components: {},
  created() {
    this.getUserInfo();
    this.language = window.localStorage.getItem("language") || "zh-CN";
    let arr = this.actions.filter((item) => item.lang === this.language);
    this.language = arr[0].text;
  },
  methods: {
    ...mapMutations(["undataToken"]),

    popClose() {
      this.settingDialog = false;
    },
    components: {},
    created() {
      this.getUserInfo();
      this.language = window.localStorage.getItem("language");
      console.log(window.localStorage.getItem("language"));
      if (this.language == "zh-CN") {
        this.language = "English";
    qkclick(e) {
      this.settingDialog = false;
      window.localStorage.setItem("language", e.lang);
      this.$i18n.locale = e.lang;
      this.language = e.text;
    },
    clicklang() {
      this.settingDialog = true;
    },
    yebclick() {
      this.$router.push("/yeb");
    },
    regexNum(str) {
      console.log(str);
      str = str.toString();
      if (str.indexOf(".") == -1) {
        str = str + ".00";
      }

      var newStr = str.split(".");
      var point = newStr[1];

      if (point.length < 2) {
        point = point + "0";
      }
      var moneyPoint = newStr[0];
      if (moneyPoint.length <= 3) {
        return moneyPoint + "." + point;
      } else {
        this.language = "हिंदी";
        var mPoint = moneyPoint.substr(
          moneyPoint.length - 3,
          moneyPoint.length
        );
        var twoPoint = moneyPoint.substr(0, moneyPoint.length - 3);
        var endString = twoPoint
          .toString()
          .replace(/(\d)(?=(\d{2})+(?!\d))/g, "$1,");
        return endString + "," + mPoint + "." + point;
      }
    },
    methods: {
      ...mapMutations(["undataToken"]),

      popClose() {
        this.settingDialog = false;
      },
      qkclick(e) {
        this.settingDialog = false;
        window.localStorage.setItem("language", e.lang);
        this.$i18n.locale = e.lang;
        this.language = e.text;
      },
      clicklang() {
        this.settingDialog = true;
      },
      yebclick() {
        this.$router.push("/yeb");
      },
      regexNum(str) {
        console.log(str);
        str = str.toString();
        if (str.indexOf(".") == -1) {
          str = str + ".00";
        }

        var newStr = str.split(".");
        var point = newStr[1];

        if (point.length < 2) {
          point = point + "0";
        }
        var moneyPoint = newStr[0];
        if (moneyPoint.length <= 3) {
          return moneyPoint + "." + point;
        } else {
          var mPoint = moneyPoint.substr(
            moneyPoint.length - 3,
            moneyPoint.length
          );
          var twoPoint = moneyPoint.substr(0, moneyPoint.length - 3);
          var endString = twoPoint
            .toString()
            .replace(/(\d)(?=(\d{2})+(?!\d))/g, "$1,");
          return endString + "," + mPoint + "." + point;
        }
      },
      goOnline() {
        if (navigator.vibrate) {
          // 支持
          navigator.vibrate([55]);
        }
        this.$router.push("/service");
      },
      async getInfoSite() {
        let data = await api.getInfoSite();
        if (data.status === 0) {
          this.onlineService = data.data.onlineService;
        } else {
          Toast(data.msg);
        }
      },
      goWall() {
    goOnline() {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push("/service");
    },
    async getInfoSite() {
      let data = await api.getInfoSite();
      if (data.status === 0) {
        this.onlineService = data.data.onlineService;
      } else {
        Toast(data.msg);
      }
    },
    goWall() {
      this.$router.push("/wallet");
    },
    gotoa(e) {
      if (e == 0) {
        this.$router.push("/wallet");
      },
      gotoa(e) {
        if (e == 0) {
          this.$router.push("/wallet");
        } else if (e == 1) {
          this.$router.push("/tixian");
        } else {
          this.$router.push("/transfers");
        }
      },
      subclick() {
        this.$router.push("/SubDK");
      },
      subaclick() {
      } else if (e == 1) {
        this.$router.push("/tixian");
      },
      handleZh() {
        this.selectUserFlag = !this.selectUserFlag;

        if (navigator.vibrate) {
          // 支持
          navigator.vibrate([55]);
        }
      },
      async getUserInfo() {
        // 获取用户信息
        let data = await api.getUserInfo();
        if (data.status === 0) {
          // 判断是否登录
          this.$store.commit("dialogVisible", false);
          this.$store.state.userInfo = data.data;
          this.userInfo = data.data;
        } else {
          this.$store.commit("dialogVisible", true);
        }
      },
      goToTopUp() {
        // if (this.userInfo.length === 0) {
        //    this.$store.commit('dialogVisible', true)
        //    return
        // }
        // if (navigator.vibrate) {
        //    // 支持
        //    navigator.vibrate([55])
        // }
        this.$router.push("/setting");
      },
      handleOutLoginClick() {
        // 退出登录
        MessageBox.confirm(this.$t("hj149") + "?", this.$t("hj165"), {
            confirmButtonText: this.$t("hj161"),
            cancelButtonText: this.$t("hj106"),
          })
          .then(() => {
            this.toRegister();
          })
          .catch(() => {});
      },
      goToSettings() {
        // 每次打开dialog 清空密码数据
        this.pswDialog = !this.pswDialog;
        if (this.pswDialog) {
          this.oldPassword = "";
          this.newPassword = "";
          this.cirNewPassword = "";
        }
      },
      handleGoToTransfer() {
      } else {
        this.$router.push("/transfers");
      },
      handleGoToAuthentication() {
        this.$router.push("/authentications");
      },
      handleGoToAuthenticationaz() {
        this.$router.push("/download");
      },
      handleGoToBankCard() {
        this.$router.push("/bankCard");
      },
      async toRegister() {
        // 注销登陆
        window.localStorage.removeItem("USERTOKEN"); // 清空本地存储 USERTOKEN字段
        this.clearCookie();
        let data = await api.logout();
        if (data.status === 0) {
          // Toast(data.msg)
          this.undataToken(null);
          this.$router.push("/login");
        } else {
          Toast(data.msg);
        }
        this.$router.push("/login");
      },
      async changeLoginPsd() {
        // 修改密码
        if (
          isNull(this.oldPassword) ||
          isNull(this.newPassword) ||
          isNull(this.cirNewPassword)
        ) {
          Toast(this.$t("hj154"));
          this.settingDialog = false;
        } else if (!pwdReg(this.newPassword)) {
          Toast(this.$t("hj19"));
          this.settingDialog = false;
        } else {
          // 修改密码
          if (this.newPassword === this.cirNewPassword) {
            let opts = {
              oldPwd: this.oldPassword,
              newPwd: this.newPassword,
            };
            let data = await api.changePassword(opts);
            if (data.status === 0) {
              this.changeLoginPsdBox = false;
      }
    },
    subclick() {
      this.$router.push("/SubDK");
    },
    subaclick() {
      this.$router.push("/tixian");
    },
    handleZh() {
      this.selectUserFlag = !this.selectUserFlag;

              this.pswDialog = false;
              this.settingDialog = false;
              Notify({
                type: "success",
                message: this.$t("密码修改成功")
              });
              this.toRegister()
            } else {
              Toast(data.msg);
              this.settingDialog = false;
            }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.commit("dialogVisible", false);
        this.$store.state.userInfo = data.data;
        this.userInfo = data.data;
      } else {
        this.$store.commit("dialogVisible", true);
      }
    },
    goToTopUp() {
      // if (this.userInfo.length === 0) {
      //    this.$store.commit('dialogVisible', true)
      //    return
      // }
      // if (navigator.vibrate) {
      //    // 支持
      //    navigator.vibrate([55])
      // }
      this.$router.push("/setting");
    },
    handleOutLoginClick() {
      // 退出登录
      MessageBox.confirm(this.$t("hj149") + "?", this.$t("hj165"), {
        confirmButtonText: this.$t("hj161"),
        cancelButtonText: this.$t("hj106"),
      })
        .then(() => {
          this.toRegister();
        })
        .catch(() => {});
    },
    goToSettings() {
      // 每次打开dialog 清空密码数据
      this.pswDialog = !this.pswDialog;
      if (this.pswDialog) {
        this.oldPassword = "";
        this.newPassword = "";
        this.cirNewPassword = "";
      }
    },
    handleGoToTransfer() {
      this.$router.push("/transfers");
    },
    handleGoToAuthentication() {
      this.$router.push("/authentications");
    },
    handleGoToAuthenticationaz() {
      this.$router.push("/download");
    },
    handleGoToBankCard() {
      this.$router.push("/bankCard");
    },
    async toRegister() {
      // 注销登陆
      window.localStorage.removeItem("USERTOKEN"); // 清空本地存储 USERTOKEN字段
      this.clearCookie();
      let data = await api.logout();
      if (data.status === 0) {
        // Toast(data.msg)
        this.undataToken(null);
        this.$router.push("/login");
      } else {
        Toast(data.msg);
      }
      this.$router.push("/login");
    },
    async changeLoginPsd() {
      // 修改密码
      if (
        isNull(this.oldPassword) ||
        isNull(this.newPassword) ||
        isNull(this.cirNewPassword)
      ) {
        Toast(this.$t("hj154"));
        this.settingDialog = false;
      } else if (!pwdReg(this.newPassword)) {
        Toast(this.$t("hj19"));
        this.settingDialog = false;
      } else {
        // 修改密码
        if (this.newPassword === this.cirNewPassword) {
          let opts = {
            oldPwd: this.oldPassword,
            newPwd: this.newPassword,
          };
          let data = await api.changePassword(opts);
          if (data.status === 0) {
            this.changeLoginPsdBox = false;

            this.pswDialog = false;
            this.settingDialog = false;
            Notify({
              type: "success",
              message: this.$t("密码修改成功"),
            });
            this.toRegister();
          } else {
            Toast(this.$t("hj155"));
            Toast(data.msg);
            this.settingDialog = false;
          }
        } else {
          Toast(this.$t("hj155"));
          this.settingDialog = false;
        }
        if (navigator.vibrate) {
          // 支持
          navigator.vibrate([55]);
        }
      },
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
  };
  },
};
</script>

<style scoped lang="less">
  .right_gos_txt {
    margin-right: 15px;
  }
.right_gos_txt {
  margin-right: 15px;
}

  .setting_content {
.setting_content {
  width: 100%;
  height: 5rem;
  padding: 0.3rem;

  .old_password {
    width: 100%;
    height: 5rem;
    padding: 0.3rem;
    height: 1rem;
    background: rgb(243, 243, 243);
    border-radius: 0.15rem;
    display: flex;
    margin-top: 0.5rem;

    .old_password {
      width: 100%;
      height: 1rem;
      background: rgb(243, 243, 243);
      border-radius: 0.15rem;
    .left_titles {
      width: 25%;
      height: 100%;
      display: flex;
      margin-top: 0.5rem;
      align-items: center;
      padding-left: 0.2rem;

      .left_titles {
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 0.2rem;

        // justify-content: flex-end;
        span {
          font-weight: 600;
        }
      }

      .right_password_input {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;

        input {
          width: 100%;
          height: 100%;
          padding-left: 0.2rem;
        }
      // justify-content: flex-end;
      span {
        font-weight: 600;
      }
    }

    .btn_setting {
      width: 100%;
      height: 1.3rem;
      border-radius: 0.15rem;
      background: #2d6ae9;
      color: #fff;
      font-size: 0.4615rem;
      margin-top: 0.5rem;
    .right_password_input {
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;

      input {
        width: 100%;
        height: 100%;
        padding-left: 0.2rem;
      }
    }
  }

  .btn_setting {
    width: 100%;
    height: 1.3rem;
    border-radius: 0.15rem;
    background: #2d6ae9;
    color: #fff;
    font-size: 0.4615rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      font-weight: 600;
    }
  }
}

.lang_box_txta {
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border-bottom: 1px solid #ecf5ff;
}

.lang_box_txt {
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border-bottom: 1px solid #ecf5ff;
  color: #2196f3;
}

.lang_box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.btn_s_box {
  border: none;
  background: #409eff;
  color: #fff;
  height: 70px;
  width: 100%;
  line-height: 70px;
  font-size: 16px;
  text-align: center;
  border-radius: 15px;
  font-weight: 600;
  margin: 40px 20px 0 20px;
}

.btn_s {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jy {
  width: 100%;
  height: 1.5rem;
  // border-radius: 0.2rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // padding: 0 0.3rem;
  padding-top: 0.3rem;
  border-bottom: 1px solid #ecf5ff;

  .left_gn {
    // width: 40%;
    height: 60%;
    display: flex;

    .l_icon {
      // width: 30%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 0.5041rem;
        height: 0.5041rem;
      }
    }

    .r_title {
      // width: 70%;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 0.4046rem;
      color: #404040;
      padding-left: 0.4rem;

      span {
        font-weight: 600;
@@ -454,204 +544,113 @@
    }
  }

  .lang_box_txta {
    width: 100%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border-bottom: 1px solid #ecf5ff;
  }

  .lang_box_txt {
    width: 100%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border-bottom: 1px solid #ecf5ff;
    color: #2196f3;
  }

  .lang_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .btn_s_box {
    border: none;
    background: #409eff;
    color: #fff;
    height: 70px;
    width: 100%;
    line-height: 70px;
    font-size: 16px;
    text-align: center;
    border-radius: 15px;
    font-weight: 600;
    margin: 40px 20px 0 20px;
  }

  .btn_s {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .jy {
    width: 100%;
    height: 1.5rem;
    // border-radius: 0.2rem;
    background: #fff;
  .right_gos {
    // width: 20%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding: 0 0.3rem;
    padding-top: 0.3rem;
    border-bottom: 1px solid #ecf5ff;
    justify-content: flex-end;

    .left_gn {
      // width: 40%;
      height: 60%;
      display: flex;

      .l_icon {
        // width: 30%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 0.5041rem;
          height: 0.5041rem;
        }
      }

      .r_title {
        // width: 70%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 0.4046rem;
        color: #404040;
        padding-left: 0.4rem;

        span {
          font-weight: 600;
        }
      }
    img {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
}

    .right_gos {
      // width: 20%;
      height: 60%;
body {
  background-color: #f8f8f8;
}

.pages_logo_btn_right {
  margin-left: 20px;
  margin-top: 20px;
  display: inline-block;
  padding: 16px 40px;
  text-decoration: none;
  color: #fff;
  background: #f44336;
  border-radius: 40px;
}

.pages_logo_btn_left {
  border-radius: 40px;
  margin-top: 20px;
  display: inline-block;
  padding: 16px 40px;
  text-decoration: none;
  color: #fff;
  background: #2196f3;
}

.pages_logo_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

.pages_logo_img {
  width: 200px;
  height: 200px;
  border-radius: 20px;
}

.pages_logo_txt {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.pages_logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

.content {
  width: 100%;
  height: 100%;
  // padding: 0 0.3rem;

  .top_back {
    width: 100%;
    height: 2rem;
    display: flex;
    background-color: #fff;

    > div {
      width: 10%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      img {
        width: 0.6rem;
        height: 0.6rem;
      }
    }
  }

  body {
    background-color: #f8f8f8;
  }
    img {
      width: 0.6rem;
      height: 0.6rem;
      margin-left: 20px;
    }

  .pages_logo_btn_right {
    margin-left: 20px;
    margin-top: 20px;
    display: inline-block;
    padding: 16px 40px;
    text-decoration: none;
    color: #fff;
    background: #f44336;
    border-radius: 40px;
  }

  .pages_logo_btn_left {
    border-radius: 40px;
    margin-top: 20px;
    display: inline-block;
    padding: 16px 40px;
    text-decoration: none;
    color: #fff;
    background: #2196f3;
  }

  .pages_logo_btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
  }

  .pages_logo_img {
    width: 200px;
    height: 200px;
    border-radius: 20px;
  }

  .pages_logo_txt {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
  }

  .pages_logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
  }

  .content {
    width: 100%;
    height: 100%;
    // padding: 0 0.3rem;

    .top_back {
    .titles {
      width: 100%;
      height: 2rem;
      height: 1.5rem;
      margin-top: 15px;
      // margin-left: 110px;
      display: flex;
      background-color: #fff;
      margin-right: 20px;
      justify-content: center;
      align-items: center;

      >div {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
      }

      img {
        width: 0.6rem;
        height: 0.6rem;
        margin-left: 20px;
      }

      .titles {
        width: 100%;
        height: 1.5rem;
        margin-top: 15px;
        // margin-left: 110px;
        display: flex;
        margin-right: 20px;
        justify-content: center;
        align-items: center;

        span {
          font-weight: 600;
        }
      span {
        font-weight: 600;
      }
    }
  }
}
</style>