fontend-web/src/views/personal/profile.vue

<template>
  <div class="coin-profile">
    <div class="majorBox">
      <div class="majorTitleBox majorBoxStyle major-fiexd">
        <p class="majorTitle">{{ $t('personal.profile.basicInfo.title') }}</p>
        <!-- 申请取消商家 -->
        <div
          class="major-te-two"
          v-if="applyStatus == 'MARKET'"
          @click="getMerchant()"
        >
          <span>{{ $t('exchangeotc.merchant.data_del') }}</span>
        </div>
      </div>

      <div class="secondaryBox majorBoxStyle majorBoxStyleBc">
        <div v-show="isRemake === false" class="profileContent">
          <span class="secondaryTitle"
            >{{ $t('personal.profile.basicInfo.userName') }}：</span
          >
          <span class="secondaryCont">{{ userName }}</span>
          <div class="btnRemake" @click="remakeName">
            {{ $t('personal.profile.basicInfo.changeNameBtn') }}
          </div>
        </div>
        <div v-show="isRemake == true" class="profileContent">
          <span class="secondaryTitle"
            >{{ $t('personal.profile.basicInfo.userName') }}：</span
          >
          <el-input
            v-model="userName"
            :placeholder="$t('personal.profile.basicInfo.userName_p')"
          ></el-input>
          <div class="btnHandle" @click="renameSuccess">
            {{ $t('personal.profile.basicInfo.affirm') }}
          </div>
          <div class="btnHandle" @click="remakeName('cancel')">
            {{ $t('personal.profile.basicInfo.cancel') }}
          </div>
        </div>
      </div>

      <!--<div class="secondaryBox majorBoxStyle">
        <div class="profileContent">
          <span class="secondaryTitle"
            >{{ $t('personal.profile.basicInfo.loginPasswrod') }}：</span
          >
          <span class="secondaryCont">*********</span>
      &lt;!&ndash;    <router-link to="/profile/change-password">
            <div class="btnRemake">
              {{ $t('personal.profile.basicInfo.changePasswordBtn') }}
            </div>
          </router-link>&ndash;&gt;
        </div>
      </div>-->
    </div>

    <div class="loginHistory" :style="{height: calac + 'px'}">
      <div class="majorBox">
        <div class="majorTitleBox majorBoxStyle">
          <p class="majorTitle">
            {{ $t('personal.profile.loginHistory.title') }}
          </p>
        </div>
      </div>
      <el-table :data="loginHistory" stripe style="width: 100%">
        <el-table-column
          prop="createTime"
          :label="$t('personal.profile.loginHistory.table_header_time')"
        >
          <template slot-scope="scope">
            <span class="timeData">{{
              scope.row.createTime.split(' ')[0].replace(/-/g, '/')
            }}</span>
            <span class="timeData timeDataAfter">{{
              scope.row.createTime.split(' ')[1]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="mobilePhone"
          :label="$t('personal.profile.loginHistory.phone')"
        ></el-table-column>
        <el-table-column prop="ipAddress" label="IP"></el-table-column>
        <el-table-column
          prop="status"
          :label="$t('personal.profile.loginHistory.table_header_status')"
        >
          <template slot-scope="scope">
            <span v-show="scope.row.status === 'SUCCESS'">{{
              $t('personal.profile.loginHistory.success')
            }}</span>
            <span v-show="scope.row.status === 'FAIL'">{{
              $t('personal.profile.loginHistory.fail')
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 修改昵称成功弹窗 -->
    <el-dialog :visible.sync="is_dialog" center>
      <span>{{ $t('personal.profile.dialog') }}</span>
    </el-dialog>
  </div>
</template>

<script>
import {rename, getUserData, getLoginLog} from '@/api/user';
import {getCancelApply, cheackApply} from '@/api/coin';
export default {
  name: 'profile',
  data() {
    return {
      loginHistory: [],
      userName: '',
      isRemake: false,
      is_dialog: false,
      // dialogMerchant: false,
      id: '',
      applyStatus: '',
    };
  },
  created: function() {
    let userData = JSON.parse(localStorage.getItem('userData'));
    // console.log(userData)
    this.userName = userData.nickName;
    this.id = userData.id;
    this.getcheckApply(); // 查询用户市商状态
    //请求登录日志
    getLoginLog({
      userId: this.id,
      // pageNum: 1,
      // pageSize: 10,
    }).then(res => {
      this.loginHistory = res.data.data.rows;
    });
  },
  computed: {
    calac: function() {
      if (this.loginHistory.length === 0) {
        return 202;
      } else {
        return (this.loginHistory.length + 2) * 71;
      }
    },
  },
  methods: {
    // 查询用户市商状态
    getcheckApply() {
      cheackApply().then(res => {
        if (res.data.code === 200) {
          this.applyStatus = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 取消商家
    getMerchant() {
      // this.$confirm(
      //   this.$t('exchangeotc.merchant.cao'),
      //   this.$t('exchangeotc.merchant.tishi'),
      //   {
      //     confirmButtonText: this.$t('exchangeotc.merchant.sure'),
      //     cancelButtonText: this.$t('exchangeotc.merchant.delete'),
      //     type: 'warning',
      //   }
      // )
      //   .then(() => {
      getCancelApply().then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: this.$t('exchangeotc.merchant.success'),
          });
          setInterval(() => {
            location.reload(); //成功刷新页面
          }, 1000);
        } else {
          this.$message.error(res.data.msg);
        }
      });
      // })
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: this.$t('exchangeotc.merchant.deled'),
      //   });
      // });
    },
    remakeName(e) {
      if (e == 'cancel') {
        this.userName = JSON.parse(localStorage.getItem('userData')).nickName;
      }
      this.isRemake = !this.isRemake;
    },
    //修改昵称
    renameSuccess() {
      rename({
        nickName: this.userName,
      }).then(res => {
        // console.log(res);
        if (res.data.code === 200) {
          this.is_dialog = true;
          this.isRemake = !this.isRemake;

          //修改成功之后再次请求用户信息接口，更新数据
          getUserData().then(res => {
            // Cookie.set('userData', res.data.data);
            localStorage.setItem('userData', JSON.stringify(res.data.data));
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.coin-profile {
  p {
    margin: 0;
    padding: 0;
  }

  .btnRemake {
    cursor: pointer;
    color: #e8494a;
    margin-left: 20px;
    font-size: 14px;
  }

  .loginHistory {
    margin-top: 20px;
    margin-bottom: 60px;
    width: 1000px;
  }

  .el-table {
    margin-top: 1px;
  }

  .el-table th {
    height: 50px;
    font-size: 14px;
    color: #545663;
    padding: 0;
  }
  .el-table td {
    color: #545663;
    font-size: 12px;
  }
  .el-table th > .cell,
  .el-table__row td > .cell {
    padding-left: 50px;
  }

  .el-table td:first-child {
    padding: 0;
  }
  .el-table tr {
    height: 50px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  }

  .el-input {
    width: 307px;
    height: 49px;
  }

  .btnHandle {
    color: #e8494a;
    font-size: 14px;
    margin-left: 30px;
    cursor: pointer;
  }

  .el-dialog {
    width: 544px;
    height: 169px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0 !important;
  }

  .el-dialog__body {
    font-size: 28px;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    span {
      color: #fff;
    }
  }

  .timeData {
    color: #a0a6b5;
  }

  .timeDataAfter {
    margin-left: 10px;
  }
}
.major-fiexd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .major-te-two {
    cursor: pointer;
    margin-right: 50px;

    font-size: 14px;
    color: #e8494a;
    span {
      padding: 9px 11px;
      border: 1px solid #e8494a;
      border-radius: 6px;
    }
  }
}
.el-message-box {
  width: 536px;
  background-color: #1f2026;
  border: 1px solid #1f2026;
  .el-message-box__header {
    padding: 18px 30px;
    background-color: #24252c;
    .el-message-box__title {
      font-size: 16px;
      color: #9ba0bc;
    }
  }
  .el-message-box__content {
    margin: 28px 30px;
    color: #e8494a;
  }
  .el-message-box__btns {
    .el-button {
      width: 80px;
      height: 40px;
      background-color: #1f2026;
      color: #686e7c;
      border: 1px solid #545663;
    }
    .el-button--primary {
      background-color: #e8494a;
      border: 1px solid #e8494a;
      color: #fff;
      margin-left: 19px;
    }
  }
}
</style>