11111

DESKTOP-CVS3R96\我恁爹

2022-11-15 a1fb6cd3c3b8a48da4f9393e09718da04f51a373

 src/page/wallet/index.vue

@@ -3,59 +3,49 @@
    <div class="content">
      <div class="top_icon">
        <div class="left_back" @click="handleBack()">
          <img src="../../assets/img/zuojiantou.png" alt />
          <img src="@/assets/img/zuojiantou.png" alt />
        </div>
        <div class="right_icon">
          <div @click="goToTopUp()">
            <img src="../../assets/img/qianbao.png" alt />
            <img src="@/assets/img/qiandai.png" alt />
          </div>
          <div>
            <img src="../../assets/img/kefu.png" alt />
          <div @click="goOnline()">
            <img src="@/assets/img/kefu.png" alt />
          </div>
        </div>
      </div>
      <div class="tabs">
        <div
          v-for="(item, index) in tabsArr"
          :key="index"
          @click="handleTabsClick(item, index)"
          :class="tabsCurrentIndex === index ? 'active' : ''"
        >
        <div v-for="(item, index) in tabsArr" :key="index" @click="handleTabsClick(item, index)"
          :class="tabsCurrentIndex === index ? 'active' : ''">
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="center_card" v-if="tabsCurrentIndex === 0">
        <div class="keyon">
          <span>{{ '总资产' }}</span>
          <span>{{ $t('hj49') }}</span>
        </div>
        <div class="num_price">
          <p
            v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
          <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account">
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userIndexAmt).toFixed(2)
                $store.state.userInfo.userIndexAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
          <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
            class="account">
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userFuturesAmt).toFixed(2)
                $store.state.userInfo.userFuturesAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p>
          <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p>
        </div>
        <div class="yk es">
          <div>
            <span>{{ '沪深账户' }}</span>
            <span>{{ $t('hj156') }}</span>
          </div>
          <div>
            <span>{{ '指数账户' }}</span>
            <span>{{ $t('hj115') }}</span>
          </div>
        </div>
        <div class="yk as">
@@ -67,35 +57,35 @@
          </div>
        </div>
        <div class="btns" @click="handleGoToTransfers()">
          <span>{{ '账户金额互转' }}</span>
          <span>{{ $t('hj157') }}</span>
        </div>
      </div>
      <div class="withdrawal" v-if="tabsCurrentIndex === 1">
        <div class="ttx">
          <span>{{ '可提现金额 (元)' }}</span>
          <span>{{ $t('hj158') }}</span>
        </div>
        <div class="ttx_price">
          <span>{{ $store.state.userInfo.enableAmt }}</span>
        </div>
        <div class="ttx_input">
          <div class="titles">
            <span>{{ '提现金额' }}</span>
            <span>{{ $t('hj159') }}</span>
          </div>
          <div class="num">
            <input type="text" v-model="withdrawalValue" />
          </div>
          <div class="all" @click="withdrawalAll()">
            <span>{{ '全部' }}</span>
            <span>{{ $t('hj160') }}</span>
          </div>
        </div>
        <div class="btns" @click="handleToSure()">
          <span>{{ '确定' }}</span>
          <span>{{ $t('hj161') }}</span>
        </div>
      </div>
      <div class="banks" v-if="tabsCurrentIndex === 1">
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '提现记录' }}</span>
            <span>{{ $t('hj162') }}</span>
          </div>
          <div class="center_input"></div>
          <div class="right_copy img_right" @click="handleGoToCashWithdrawalRecord()">
@@ -104,69 +94,60 @@
        </div>
      </div>
      <div class="banks" v-if="tabsCurrentIndex === 0">

        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款名称' }}</span>
            <span>{{ $t('hj163') }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skName" />
            <input type="text" v-model="skName" readonly />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skName"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
            <span v-clipboard:copy="skName" v-clipboard:success="onCopy" v-clipboard:error="onError">{{ $t('hj164') }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款银行' }}</span>
            <span>{{ $t('hj166') }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skBankName" />
            <input type="text" v-model="skBankName" readonly />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skBankName"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
            <span v-clipboard:copy="skBankName" v-clipboard:success="onCopy" v-clipboard:error="onError">{{ $t('hj164')
            }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款账号' }}</span>
            <span>{{ $t('hj167') }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skUser" />
            <input type="text" v-model="skUser" readonly />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skUser"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '充值金额' }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="walletNum" />
          </div>
          <div class="right_copy" @click="handleGoCz()">
            <span>{{ '充值' }}</span>
            <span v-clipboard:copy="skUser" v-clipboard:success="onCopy" v-clipboard:error="onError">{{ $t('hj164') }}</span>
          </div>
        </div>
        <div class="bank_1" @click="handleGoToTransferRecord()">
          <div class="left_name">
            <span>{{ '充值记录' }}</span>
            <span>{{ $t('hj168') }}</span>
          </div>
          <div class="center_input"></div>
          <div class="right_copy img_right">
            <img src="../../assets/img/youjiantou.png" alt />
          <div class="right_copy">
            <span>{{ $t('hj169') }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ $t('hj170') }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="walletNum" :placeholder="$t('hj171')" />
          </div>
          <div class="right_copy" @click="handleGoCz()">
            <span style="background: #2d6ae9;color: #fff;padding: 0.2rem 0.4rem;border-radius: 0.2rem;">{{ $t('hj172')
            }}</span>
          </div>
        </div>
      </div>
@@ -182,16 +163,16 @@
              <img src="../../assets/img/liucheng.png" alt />
            </div>
            <div class="right_title">
              <span>{{ '操作流程:' }}</span>
              <span>{{ $t('hj173') + ':' }}</span>
            </div>
          </div>
          <div class="_on">
            <span>{{ '①' }}</span>
            <span>{{ '点击"复制", 复制信息' }}</span>
            <span>{{ $t('hj174') }}</span>
          </div>
          <div class="_on">
            <span>{{ '②' }}</span>
            <span>{{ '完成复制, 打开手机银行进行转账' }}</span>
            <span>{{ $t('hj175') }}</span>
          </div>
        </div>
        <div class="top_title" style="color: red;">
@@ -200,12 +181,12 @@
              <img src="../../assets/img/jinggao.png" alt />
            </div>
            <div class="right_title">
              <span>{{ '操作流程:' }}</span>
              <span>{{ $t('hj173') + ':' }}</span>
            </div>
          </div>
          <div class="_on">
            <span>{{ '①' }}</span>
            <span class="hgg">{{ '为确保入金及时到账, 请确认您输入的金额和提交的充值金额一致' }}</span>
            <span class="hgg">{{ $t('hj176') }}</span>
          </div>
        </div>
      </div>
@@ -224,7 +205,7 @@
    return {
      name: "大狗子",
      selectUserFlag: true,
      tabsArr: ["充值", "提现"],
      tabsArr: [this.$t('hj172'), this.$t('hj177')],
      tabsCurrentIndex: 0,
      walletNum: "",
      skName: "",
@@ -233,8 +214,9 @@
      messShow: false,
      mess: "",
      messDialog: false,
      withdrawalValue: "",
      settingInfo: {}
      withdrawalValue: 0,
      settingInfo: {},
      onlineService: "",
    };
  },
  computed: {
@@ -243,8 +225,36 @@
  created() {
    this.getSettingInfo();
    this.getCardDetail(); // 获取银行卡信息
    this.getUserInfo();
    this.getInfoSite();
  },
  methods: {
    goOnline() {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      window.location.href = this.onlineService;
    },
    async getInfoSite() {
      let data = await api.getInfoSite()
      if (data.status === 0) {
        this.onlineService = data.data.onlineService
      } else {
        Toast(data.msg)
      }
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.commit('dialogVisible', false);
        this.$store.state.userInfo = data.data;
      } else {
        this.$store.commit('dialogVisible', true);
      }
    },
    handleZh() {
      //cho
      this.selectUserFlag = !this.selectUserFlag;
@@ -254,30 +264,42 @@
      this.$router.go(-1);
    },
    goToTopUp() {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push("/wallet");
    },
    handleTabsClick(item, index) {
      this.tabsCurrentIndex = index;
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    withdrawalAll() {
      // 点击全部提现
      this.withdrawalValue = this.userInfo.enableAmt;
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    async handleToSure() {
      // 点击确定提现
      if (!this.userInfo.idCard) {
        Toast("请先实名认证");
        Toast(this.$t('hj178'));
        return;
      }
      if (!this.bankInfo.bankNo) {
        Toast("请先绑定银行卡");
        Toast(this.$t('hj179'));
        return;
      } else {
      }
      if (!this.withdrawalValue || this.withdrawalValue <= 0) {
        Toast("请输入正确的提现金额");
        Toast(this.$t('hj180'));
      } else if (this.withdrawalValue - this.settingInfo.withMinAmt < 0) {
        Toast("提现金额不得小于" + this.settingInfo.withMinAmt);
        Toast(this.$t('hj181') + this.settingInfo.withMinAmt);
      } else {
        let opts = {
          amt: this.withdrawalValue
@@ -285,11 +307,15 @@
        let data = await api.outMoney(opts);
        if (data.status === 0) {
          // 成功
          Toast("申请成功，请等待审核!");
          Toast(this.$t('hj182'));
          this.$router.push("/cashlist");
        } else {
          Toast(data.msg ? data.msg : "提现失败,请重新提现或者联系管理员");
          Toast(data.msg ? data.msg : this.$t('hj183'));
        }
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    async getCardDetail() {
@@ -297,6 +323,9 @@
      let data = await api.getBankCard();
      if (data.status === 0) {
        this.$store.state.bankInfo = data.data;
        this.skName = data.data.bankName
        this.skBankName = data.data.bankAddress
        this.skUser = data.data.bankNo
      } else {
        // Toast(data.msg)
      }
@@ -312,24 +341,36 @@
      }
    },
    handleGoToTransferRecord() { // 充值记录
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push('/transferRecord');
    },
    handleGoToCashWithdrawalRecord() { // 提现记录
      this.$router.push('/cashWithdrawalRecord');
    },
    handleGoToTransfers() {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push('/transfers');
    },
    handleGoCz() {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      if (this.walletNum === "") {
        this.messShow = true;
        this.mess = "请输入充值金额";
        this.mess = this.$t('hj171');
        setTimeout(() => {
          this.messShow = false;
        }, 1500);
      } else if (this.walletNum < 200) {
        this.messShow = true;
        this.mess = "小于最少充值金额";
        this.mess = this.$t('hj184');
        setTimeout(() => {
          this.messShow = false;
        }, 1500);
@@ -339,10 +380,14 @@
      }
    },
    onCopy() {
      Toast("复制成功");
      Toast(this.$t('hj185'));
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    onError() {
      Toast("复制失败请重试");
      Toast(this.$t('hj186'));
    },
    async getPayInfo() {
      // 获取支付渠道 详细信息
@@ -368,37 +413,44 @@
.user_page {
  width: 100%;
  height: calc(100% - 1.3rem);

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

    .top_icon {
      width: 100%;
      height: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left_back {
        width: 10%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

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

      .right_icon {
        width: 25%;
        height: 50%;
        display: flex;
        > div {

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

          img {
            width: 0.6rem;
            height: 0.6rem;
@@ -406,6 +458,7 @@
        }
      }
    }

    .users {
      width: 100%;
      height: 1.7949rem;
@@ -414,10 +467,12 @@
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left_tou {
        width: 80%;
        height: 70%;
        display: flex;

        .left_tx {
          width: 20%;
          height: 100%;
@@ -425,29 +480,34 @@
          display: flex;
          align-items: center;
          justify-content: center;
          > div {

          >div {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            overflow: hidden;
            background: rgb(211, 211, 211);

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .right_name {
          width: 80%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 0.4415rem;

          span {
            font-weight: 600;
          }
        }
      }

      .right_go {
        width: 20%;
        height: 70%;
@@ -455,12 +515,14 @@
        justify-content: flex-end;
        align-items: center;
        padding-right: 0.2rem;

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

    .center_card {
      width: 100%;
      height: 5.3846rem;
@@ -468,6 +530,7 @@
      // background-image: linear-gradient(to right, #ffffff , #dfedfc);
      border-radius: 0.15rem;
      padding: 0.5rem 0.4rem;

      .keyon {
        width: 100%;
        height: 0.5128rem;
@@ -475,10 +538,12 @@
        display: flex;
        align-items: center;
        color: #3d4144;

        span {
          font-weight: 600;
        }
      }

      .num_price {
        width: 100%;
        height: 0.6667rem;
@@ -486,16 +551,19 @@
        display: flex;
        align-items: center;
        font-size: 0.5528rem;

        span {
          font-weight: 600;
        }
      }

      .yk {
        width: 100%;
        height: 0.5rem;
        display: flex;
        align-items: center;
        > div {

        >div {
          width: 50%;
          height: 100%;
          color: #97989d;
@@ -503,20 +571,25 @@
          align-items: center;
        }
      }

      .yk.es {
        margin-top: 0.3rem;
      }

      .yk.as {
        font-size: 0.4033rem;
        margin-top: 0.1rem;

        span {
          color: #000;
          font-weight: 600;
        }

        .bzz {
          color: #4ea364;
        }
      }

      .btns {
        width: 100%;
        height: 1.2821rem;
@@ -528,14 +601,17 @@
        font-size: 0.4015rem;
        color: #fff;
        margin-top: 0.35rem;

        span {
          font-weight: 600;
        }
      }

      .active {
        background: #4ea364;
      }
    }

    .jy {
      width: 100%;
      height: 1.5rem;
@@ -546,21 +622,25 @@
      justify-content: space-between;
      padding: 0 0.3rem;
      margin-top: 0.3rem;

      .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%;
@@ -568,17 +648,20 @@
          align-items: center;
          font-size: 0.4046rem;
          color: #404040;

          span {
            font-weight: 600;
          }
        }
      }

      .right_gos {
        width: 20%;
        height: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        img {
          width: 0.6rem;
          height: 0.6rem;
@@ -587,59 +670,70 @@
    }
  }
}

.tabs {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  > div {
  justify-content: space-between;

  >div {
    width: 48%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .active {
    background: rgb(255, 255, 255);
    border-radius: 0.15rem;
  }
}

.banks {
  width: 100%;
  background: #fff;
  padding: 0 0.3rem;
  border-radius: 0.15rem;
  padding: 0 0.4rem;
  border-radius: 0.3rem;
  margin-top: 0.3rem;
  > div {

  >div {
    width: 100%;
    height: 1.5385rem;
    margin-top: 0.3rem;
    // height: 1.5385rem;
    // margin-top: 0.3rem;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.05rem solid rgb(224, 224, 224);
    font-size: 0.359rem;

    span {
      font-weight: 600;
    }

    .left_name {
      width: 25%;
      // width: 25%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .center_input {
      width: 60%;
      height: 50%;

      input {
        width: 100%;
        height: 100%;
      }
    }

    .right_copy {
      width: 15%;
      // width: 15%;
      height: 50%;
      display: flex;
      align-items: center;
@@ -647,50 +741,60 @@
    }
  }
}

.img_right {
  > img {
    width: 0.8rem;
    height: 0.8rem;
  >img {
    width: 0.55rem;
    height: 0.55rem;
  }
}

.mess_content {
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.3rem;

  .top_title {
    width: 100%;
    height: 2.5rem;

    .tt {
      width: 100%;
      height: 30%;
      display: flex;
      align-items: center;

      .left_icon {
        width: 0.5rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

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

      .right_title {
        margin-left: 0.2rem;
      }
    }
  }

  ._on {
    width: 100%;
    height: 0.5rem;
    padding: 0 0.3rem;
    margin-top: 0.1rem;
  }

  .hgg {
    line-height: 0.5rem;
  }
}

.withdrawal {
  width: 100%;
  height: 5rem;
@@ -698,13 +802,16 @@
  border-radius: 0.15rem;
  padding: 0.5rem 0.4rem;
  background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);

  .ttx {
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.35rem;
  }

  .ttx_price {
    width: 100%;
    height: 1rem;
@@ -713,39 +820,51 @@
    justify-content: center;
    color: #2d6ae9;
    font-size: 0.6615rem;

    span {
      font-weight: 600;
    }
  }

  .ttx_input {
    width: 100%;
    height: 1rem;
    display: flex;
    > div {

    >div {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .titles {
      width: 20%;
      height: 100%;
      font-size: 0.35rem;
    }

    .num {
      width: 70%;
      height: 100%;
      font-size: 0.35rem;

      input {
        width: 100%;
        height: 100%;
        padding-left: 1rem;
        font-weight: 600;
        font-size: 0.35rem;
      }
    }

    .all {
      width: 10%;
      height: 100%;
      font-size: 0.35rem;
    }
  }
}

.btns {
  width: 100%;
  height: 1.2821rem;
@@ -757,8 +876,13 @@
  font-size: 0.4015rem;
  color: #fff;
  margin-top: 0.35rem;

  span {
    font-weight: 600;
  }
}

.bank_1:last-child {
  border: none;
}
</style>