最新

XIGUASSR

2022-11-11 c3afe3d4e0a8663b379510c38ec543ac8dbc2e5e

 src/page/newUser/index.vue

@@ -3,8 +3,8 @@
    <div class="content">
      <div class="top_icon">
        <div class="right_icon">
          <div>
            <img src="../../assets/img/dun.png" alt />
          <div @click="goToTopUp()">
            <img src="../../assets/img/qiandai.png" alt />
          </div>
          <div>
            <img src="../../assets/img/kefu.png" alt />
@@ -14,10 +14,12 @@
      <div class="users">
        <div class="left_tou">
          <div class="left_tx">
            <div></div>
            <div>
              <img src="../../assets/img/eslogo.png" alt />
            </div>
          </div>
          <div class="right_name">
            <span>{{ name }}</span>
            <span>{{ userInfo.realName ? userInfo.realName : userInfo.phone }}</span>
          </div>
        </div>
        <div class="right_go">
@@ -60,7 +62,7 @@
        </div>
        <div class="yk as">
          <div>
            <span v-if="selectUserFlag">
            <span v-if="!selectUserFlag">
              <span
                :class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''"
              >{{ '¥ ' + $store.state.userInfo.allIndexProfitAndLose }}</span>
@@ -72,16 +74,11 @@
            </span>
          </div>
          <div>
            <span class="bzz" v-if="selectUserFlag">
              {{ '¥ ' + $store.state.userInfo.userIndexAmt }}
            </span>
            <span class="bzz" v-else>
              {{ '¥ ' + $store.state.userInfo.userAmt }}
            </span>
            <span class="bzz" v-if="!selectUserFlag">{{ '¥ ' + $store.state.userInfo.userIndexAmt }}</span>
          </div>
        </div>
        <div class="btns" @click="handleZh()" :class="selectUserFlag ? '' : 'active'">
          <span>{{ selectUserFlag ? '切换沪深账户' : '切换指数账户' }}</span>
          <span>{{ selectUserFlag ? '切换指数账户' : '切换沪深账户' }}</span>
        </div>
      </div>
      <div class="jy">
@@ -97,32 +94,218 @@
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="goToSettings()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/xiugaimima.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '修改密码' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToTransfer()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/huazhuan2.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '资金划转' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToAuthentication()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/shiming.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '实名认证' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToBankCard()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/shiming.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '绑定银行卡' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleOutLoginClick()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/out2.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '退出登录' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
    </div>
    <van-popup v-model="settingDialog" position="bottom" :style="{ height: '35%' }">
      <div class="setting_content">
        <div class="old_password">
          <div class="left_titles">
            <span>{{ '旧密码:' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="oldPassword" />
          </div>
        </div>
        <div class="old_password">
          <div class="left_titles">
            <span>{{ '新密码:' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="newPassword" />
          </div>
        </div>
        <div class="old_password">
          <div class="left_titles">
            <span>{{ '确认新密码:' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="cirNewPassword" />
          </div>
        </div>
        <div class="btn_setting" @click="changeLoginPsd()">
          <span>{{ '确认修改' }}</span>
        </div>
      </div>
    </van-popup>
    <loginPopup />
  </div>
</template>

<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, pwdReg } from "@/utils/utils";
import loginPopup from "@/components/loginDialog.vue";

export default {
  name: "newUser",
  data() {
    return {
      name: "大狗子",
      selectUserFlag: true
      selectUserFlag: true,
      settingDialog: false,
      oldPassword: "", // 旧密码
      newPassword: "", // 新密码
      cirNewPassword: "", //确认新密码
      userInfo: {},
    };
  },
  components: {
    loginPopup,
  },
  created() {
    this.userInfo();
    this.getUserInfo();
  },
  methods: {
    handleZh() {
      this.selectUserFlag = !this.selectUserFlag;
      this.dialogVisible = true;
    },
    userInfo() {
      api.getUserInfo().then(res => {
        console.log(res);
      });
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.state.userInfo = data.data;
        this.userInfo = data.data;
      } else {
      }
    },
    goToTopUp() {
      this.$router.push("/wallet");
    },
    handleOutLoginClick() {
      // 退出登录
      this.toRegister();
    },
    goToSettings() {
      // 每次打开dialog 清空密码数据
      this.settingDialog = !this.settingDialog;
      if (this.settingDialog) {
        this.oldPassword = "";
        this.newPassword = "";
        this.cirNewPassword = "";
      }
    },
    handleGoToTransfer() {
      this.$router.push("/transfers");
    },
    handleGoToAuthentication() {
      this.$router.push("/authentications");
    },
    handleGoToBankCard() {
      this.$router.push("/bankCard");
    },
    async toRegister() {
      // 注销登陆
      window.localStorage.clear("USERTOKEN"); // 清空本地存储 USERTOKEN字段
      this.clearCookie();
      let data = await api.logout();
      if (data.status === 0) {
        // Toast(data.msg)
        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.settingDialog = false;
      } else if (!pwdReg(this.newPassword)) {
        Toast("密码为6~12位，数字、字母或符号");
        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;
            Toast(data.msg);
            this.settingDialog = false;
          } else {
            Toast(data.msg);
            this.settingDialog = false;
          }
        } else {
          Toast("新密码不一致");
          this.settingDialog = false;
        }
      }
    }
  }
};
@@ -184,6 +367,10 @@
            border-radius: 50%;
            overflow: hidden;
            background: rgb(211, 211, 211);
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .right_name {
@@ -337,4 +524,54 @@
    }
  }
}
.setting_content {
  width: 100%;
  height: 5rem;
  padding: 0.3rem;
  .old_password {
    width: 100%;
    height: 1rem;
    background: rgb(243, 243, 243);
    border-radius: 0.15rem;
    display: flex;
    margin-top: 0.5rem;
    .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;
      }
    }
  }
  .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;
    }
  }
}
</style>