RWACha-DAPP/src/views/mine/setting.vue

<template>
  <div class="mine">
    <div class="head">
      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
      <span>{{ $t('lang44') }}</span>
    </div>

    <div class="content">
      <div class="list">
        <div @click="showPopup(0)" class="li">
          <div class="li_left">
            <span>{{ $t('lang97') }}</span>
          </div>
          <span style="color: #aaaaaa" v-if="userinfo.nickname">{{ userinfo.nickname }}</span>
          <span style="color: #aaaaaa" v-else>{{ $t('lang98') }}</span>
        </div>
        <div @click="showPopup(1)" class="li">
          <div class="li_left">
            <span>{{ $t('lang99') }}</span>
          </div>
          <span style="color: #aaaaaa" v-if="userinfo.name">{{ userinfo.name }}</span>
          <span style="color: #aaaaaa" v-else>{{ $t('lang98') }}</span>
        </div>
        <div @click="showPopup(2)" class="li">
          <div class="li_left">
            <span>{{ $t('lang100') }}</span>
          </div>
          <span style="color: #aaaaaa" v-if="userinfo.phone">{{ userinfo.phone }}</span>
          <span style="color: #aaaaaa" v-else>{{ $t('lang98') }}</span>
        </div>
        <div @click="switchovers('language')" class="li">
          <div class="li_left">
            <span>{{ $t('lang101') }}</span>
          </div>
          <van-icon name="arrow" color="#aaaaaa" size="16" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="list">
        <div @click="switchovers()" class="li">
          <div class="li_left">
            <span>{{ $t('lang102') }}</span>
          </div>
          <van-icon name="arrow" color="#aaaaaa" size="16" />
        </div>
        <div @click="switchovers()" class="li">
          <div class="li_left">
            <span>{{ $t('lang103') }}</span>
          </div>
          <van-icon name="arrow" color="#aaaaaa" size="16" />
        </div>
        <div @click="switchovers()" class="li">
          <div class="li_left">
            <span>{{ $t('lang104') }}</span>
          </div>
          <span style="color: #aaaaaa">V1.0</span>
        </div>
      </div>
    </div>
    <van-popup v-model="editShow" round style="width: 80%" :close-on-click-overlay="true" @close="editShow = false">
      <div class="bind_box">
        <van-icon name="cross" class="close" size="20" @click="editShow = false" />
        <div class="title" v-if="editType == 0">{{ $t('lang105') }}</div>
        <div class="title" v-if="editType == 1">{{ $t('lang106') }}</div>
        <div class="title" v-if="editType == 2">{{ $t('lang107') }}</div>
        <div class="address_field">
          <van-field v-model="inputValue" type="text" rows="1" autosize :placeholder="$t('lang108')" v-if="editType == 0" />
          <van-field v-model="inputValue" type="text" rows="1" autosize :placeholder="$t('lang109')" v-if="editType == 1" />
          <van-field v-model="inputValue" type="text" rows="1" autosize :placeholder="$t('lang110')" v-if="editType == 2" />
        </div>
        <div class="bind_button" @click="editUserInfo">
          <span>{{ $t('lang111') }}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Superior from './superiorPopup.vue';
import { Notify } from 'vant';
import { usApi, newsLetterApi, walletApi, homeApi } from '@/api/index';
import { mapState } from 'vuex';
import union from '../../api/union';
import Clipboard from 'clipboard';
import Web3 from 'web3';
export default {
  data() {
    return {
      withdrawShow: false, //提现弹窗状态
      total: 0,
      team_level_name: '',
      userinfo: {
        address: undefined,
        nickname: undefined,
        avatar: undefined,
        team_level_id: undefined,
        seso_url: undefined,
        submit_limit: 0,
      },
      order_count: {
        pay: 0,
        sell: 0,
        success: 0,
        cancel: 0,
      },
      withdrawAmount: 0, // 提现金额
      feeObj: {
        usdt: 0,
        withdraw_fee_rate: 0,
        withdraw_min_amount: 0,
      },
      receiptAmount: 0, // 实际到账金额
      editShow: false, //
      editType: 0, // 0修改昵称 1真实姓名  2手机号码
      inputValue: '',
    };
  },
  created() {
    this.init();
  },
  mounted() {
    // this.init();
  },
  methods: {
    //返回上一页
    back() {
      this.$router.back();
    },
    init() {
      if (this.account) {
        this.userinfo = JSON.parse(localStorage.getItem('userinfo'));
        this.userinfo.addressEncrypt = this.userinfo.address.substring(0, 5) + '****' + this.userinfo.address.substring(this.userinfo.address.length - 5, this.userinfo.address.length);
        this.getUserInfo();
      }
    },
    editUserInfo() {
      if (this.editType == 0 && !this.inputValue) {
        return this.$toast(this.$t('lang169'));
      } else if (this.editType == 1 && !this.inputValue) {
        return this.$toast(this.$t('lang170'));
      } else if ((this.editType == 2 && !this.inputValue) || (this.editType == 2 && this.inputValue.length < 11)) {
        return this.$toast(this.$t('lang171'));
      }
      let params = {};
      if (this.editType == 0) {
        params.nickname = this.inputValue;
      } else if (this.editType == 1) {
        params.name = this.inputValue;
      } else if (this.editType == 2) {
        params.phone = this.inputValue;
      }
      homeApi.setUserInfo(params).then(res => {
        if (res.code == 200) {
          this.editShow = false;
          this.inputValue = '';
          this.getUserInfo();
          Notify({ type: 'success', message: this.$t('lang172') });
        }
      });
    },
    switchovers(router) {
      if (router == '') {
        // window.location.href = this.userinfo.seso_url;
        this.superiorShow = true;
      } else if (router == '1') {
        this.$toast(this.$t('lang2'));
      } else {
        this.$router.push({ name: router });
      }
    },
    reckoningClick(name) {
      this.$router.push({ name: name });
    },
    showPopup(type) {
      this.editType = type;
      this.editShow = true;
    },
    getUserInfo() {
      homeApi.getUserInfo({}).then(res => {
        if (res.code == 200) {
          this.userinfo = res.data;
          this.order_count = res.data.order_count;
          this.userinfo.addressEncrypt = this.userinfo.address.substring(0, 5) + '****' + this.userinfo.address.substring(this.userinfo.address.length - 5, this.userinfo.address.length);
        }
      });
    },
  },
  computed: {
    ...mapState(['account']),
  },
  watch: {
    account() {
      this.init();
    },
    withdrawAmount(e) {
      // this.receiptAmount = 0;
      this.receiptAmount = Number(e) - Number(e) * Number(this.feeObj.withdraw_fee_rate);
    },
  },
  components: {
    Superior,
  },
};
</script>

<style lang="less" scoped>
.mine {
  min-height: 100vh;
  padding: 50px 0 0;
  .head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(#000, 0.8);
    letter-spacing: 1.5px;
    font-weight: 550;
    background: #fff;
    padding: 14px 0;
    .arrow_img {
      position: absolute;
      left: 20px;
      width: 10px;
      height: 16px;
      // transform: translate(0, -50%);
    }
  }

  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-ac {
    align-items: center;
    justify-content: center;
  }
  .flex-row {
    display: flex;
    align-items: center;
  }
  .content {
    padding: 0 20px;
    color: #000;
    background-color: #fff;

    .list {
      margin-bottom: 16px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 1);

      .li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: rgb(36, 36, 36);
        padding: 22px 0;
        // margin-bottom: 10px;

        // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.29);

        .li_left {
          display: flex;
          align-items: center;
          .imgbox {
            width: 20px;
            height: 20px;
            margin-right: 12px;
          }
          .li_img {
            width: 20px;
            height: 20px;
          }
        }
        .right {
          width: 7px;
          height: 12px;
        }
      }
    }
  }

  .withdrawPopup {
    padding: 20px 30px;
    color: #666666;
    font-size: 14px;
    .title {
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
      font-weight: bold;
      font-size: 16px;
      color: #000000;
    }

    .tip {
      font-size: 12px;
      display: flex;
      flex-direction: column;
    }
    .btn {
      color: #fff;
      padding: 16px 0;
      text-align: center;
      line-height: 50%;
      border-radius: 20px;
      margin-top: 18px;
      background-color: #7938cf;
    }
    .close—icon {
      position: absolute;
      bottom: -40px;
      left: 45%;
    }
  }
}
.bind_box {
  font-size: 15px;
  text-align: center;
  color: #000;
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .title {
    padding: 20px 20px 26px;
  }
  .address_field {
    padding: 10px 0;
    margin: 0 30px 20px;
  }
  .bind_button {
    color: #29b286;
    text-align: center;
    border: none;
    padding: 16px 0;
    border-top: 1px solid #cccccc9d;
  }
}
</style>