Portal/pages/transfer.vue

<template>
  <view class="transfer">
    <u-navbar
      title=""
      bgColor="#000"
      :placeholder="true"
      :fixed="true"
      leftIcon=""
      height="60"
    >
      <view slot="left">
        <text class="navbar-lab">{{ $lang.transfer }}</text>
      </view>
    </u-navbar>
    <view class="content">
      <view class="list">
        <view class="lable money"
          >{{ $lang.accountBalance }}：{{ userInfo.money }}</view
        >
        <view class="lable gmoney">{{ $lang.gameBalance }}：{{ gmoney }}</view>
      </view>

      <view class="list transfer-box">
        <u-input
          class="input"
          color="#947b2b"
          clearable
          border="none"
          v-model="from"
          readonly
        >
          <u--text
            :text="$lang.from"
            slot="prefix"
            margin="0 3px 0 0"
            type="tips"
          ></u--text>
        </u-input>
        <view class="down_icon"></view>
        <u-input
          class="input"
          color="#947b2b"
          clearable
          border="none"
          v-model="to"
          readonly
        >
          <u--text
            :text="$lang.to"
            slot="prefix"
            margin="0 3px 0 0"
            type="tips"
          ></u--text>
        </u-input>
        <view class="transfer-btn" @tap="switchFlow"></view>
      </view>

      <view class="picker-view" @click="show = true">
        <u-input
          readonly
          :placeholder="$lang.pleaseChoose"
          color="#93979b"
          v-model="type"
          border="none"
        >
          <u--text
            :text="$lang.transferType"
            slot="prefix"
            margin="0 3px 0 0"
            type="tips"
          ></u--text>
          <u-icon
            slot="suffix"
            name="arrow-down-fill"
            color="#757272"
            size="16"
          ></u-icon>
        </u-input>
      </view>
      <u-picker
        :title="$lang.pleaseChooseTransferType"
        closeOnClickOverlay
        :show="show"
        :columns="columns"
        :cancelText="$lang.cancel"
        :confirmText="$lang.confirm"
        @cancel="close"
        @close="close"
        @confirm="confirm"
      ></u-picker>
      <view class="list">
        <view class="lable">{{ $lang.amount }}</view>
        <u-input
          class="input"
          color="#947b2b"
          clearable
          :placeholder="$lang.pleaseEnterTransferAmount"
          border="surround"
          v-model="money"
        ></u-input>
      </view>
      <view class="list">
        <u-button
          @tap="submit"
          class="button"
          color="#e5b932"
          :text="$lang.transfer"
        ></u-button>
      </view>
    </view>
    <view class="mb60"></view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      from: "",
      to: "",
      flow: true, //"upper"
      money: "",
      gmoney: "",
      type: "USDT",
      show: false,
      columns: [["USDT"]],
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      $lang: (state) => state.app.lang[state.app.language],
    }),
  },
  onLoad() {
    this.from = this.$lang.capitalAccount;
    this.to = this.$lang.gameAccount;
    this.getGameInfo();
  },
  methods: {
    confirm(chose) {
      this.type = chose.value[0];
      this.close();
    },
    close() {
      this.show = false;
    },
    switchFlow() {
      this.flow = !this.flow;
      if (this.flow) {
        this.from = this.$lang.capitalAccount;
        this.to = this.$lang.gameAccount;
      } else {
        this.from = this.$lang.gameAccount;
        this.to = this.$lang.capitalAccount;
      }
    },
    getGameInfo() {
      this.$api
        .gameInfo()
        .then((res) => {
          if (res.status_code == 200) {
            this.gmoney = res.data.totalmoney;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submit() {
      const params = {
        money: this.money,
      };
      if (!params.money) {
        this.$toast({
          message: this.$lang.amountCannotBe0,
          duration: 2000,
        });
      } else {
        this.$toast({
          type: "loading",
          message: this.$lang.submittingApplication,
          duration: 200000,
        });
        const type = this.flow ? "gameUpper" : "gameUnder";
        this.$api[type](params)
          .then((res) => {
            if (res.status_code == 200) {
              this.$toast({
                type: "success",
                message: res.message,
                duration: 2000,
              });
              this.getGameInfo();
              this.$store.dispatch("app/getUserInfo");
              this.money = "";
            } else {
              this.$toast({
                message: res.message,
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          })
          .finally(() => {
            this.$toastHide();
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.transfer {
  background: #0b1520;
  width: 100%;
  min-height: 100vh;
  .navbar-lab {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
  }
  .content {
    margin: 5px 5px;
    border: 2px solid #947b2b;
    background: #222222;
    box-sizing: border-box;
    padding: 15px;
    min-height: 400px;
    .transfer-box {
      border: 2px solid #947b2b;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 20px;
      font-weight: 600;
      position: relative;
      .down_icon {
        height: 20px;
        width: 20px;
        background: url("~@/static/images/down_icon.png") no-repeat -3px center;
        background-size: 100% auto;
      }
      .transfer-btn {
        position: absolute;
        width: 50px;
        height: 50px;
        background: url("~@/static/images/transfer_btn.png") no-repeat;
        background-size: 100% auto;
        right: 20px;
        top: 50%;
        margin-top: -25px;
        &:active {
          opacity: 0.6;
        }
      }
    }

    .picker-view {
      border: 2px solid #947b2b;
      padding: 8px;
      border-radius: 5px;
    }
    .list {
      font-size: 14px;
      text-align: center;
      .lab {
        color: #757272;
        margin: 10px 0;
      }
      .lable {
        text-align: left;
        color: #ddd;
        margin-top: 20px;
        font-size: 16px;
        margin-bottom: 10px;
      }
      .money {
        font-size: 16px;
        margin-top: 0;
        padding-top: 15px;
        padding-bottom: 5px;
        color: #e5b932;
      }
      .gmoney {
        font-size: 16px;
        margin-top: 0;
        padding-bottom: 15px;
        color: #e5b932;
      }
      .btn {
        height: 30px;
        font-weight: 600;
        color: #0b1520 !important;
      }
      .type {
        width: 70px;
        height: 35px;
        background: #e5b932;
        border-radius: 40px;
        text-align: center;
        line-height: 35px;
        font-weight: 600;
        margin: 10px auto;
      }
      .input {
        line-height: 30px;
        height: 30px;
      }
      .button {
        line-height: 45px;
        height: 45px;
        color: #0b1520 !important;
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: 10px;
      }
      .tip {
        color: #cc4c0e;
        font-size: 13px;
        text-align: justify;
      }
    }
  }
}
</style>