Portal/pages/user/index.vue

<template>
  <view class="user">
    <view class="card">
      <view class="uid">ID:{{ userInfo.username }}</view>
      <u--image
        class="logo"
        :showLoading="true"
        :src="loginLogo"
        width="50px"
        height="auto"
        mode="widthFix"
      ></u--image>
      <view class="box">
        <view class="text">{{ $lang.userBalance }}</view>
        <view class="money">{{ money }}</view>
      </view>
      <u--image
        :showLoading="false"
        :src="require('static/images/card_bg.png')"
        width="100%"
        height="auto"
        mode="widthFix"
      ></u--image>
    </view>
    <view class="content">
      <view
        class="cell"
        v-for="(item, index) in userMenu"
        :key="index"
        @click="goPath(item)"
      >
        <view class="lab">{{ item.name }}</view>
        <u-icon
          class="icon"
          name="arrow-right"
          color="#757272"
          size="16"
        ></u-icon>
      </view>
      <view class="logout" @tap="modalShow = true">{{ $lang.logout }}</view>
    </view>
    <u-picker
      :title="$lang.languageSettings"
      closeOnClickOverlay
      :defaultIndex="defaultIndex"
      :show="show"
      :columns="langList"
      :cancelText="$lang.cancel"
      :confirmText="$lang.confirm"
      keyName="name"
      @close="show = false"
      @cancel="show = false"
      @confirm="confirm"
    ></u-picker>
    <u-modal
      :show="modalShow"
      :title="$lang.tip"
      :confirmText="$lang.confirm"
      :cancelText="$lang.cancel"
      @confirm="confirmLogout"
      @cancel="modalShow = false"
      :showCancelButton="true"
      ref="uModal"
      :asyncClose="true"
    >
      <view style="text-align: center">{{ $lang.logoutTip }}</view>
    </u-modal>
    <view class="mb60"></view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      show: false,
      modalShow: false,

      defaultIndex: [0],
      langList: [
        [
          { key: "en", name: "English" },
          { key: "tw", name: "繁體中文" },
		      { key: "cn", name: "简体中文" },
          { key: "yn", name: "Việt nam" },
          { key: "kr", name: "한국어" },
          { key: "tl", name: "แบบไทย" },
          { key: "in", name: "Indonesia" },
        ],
      ],
      money:0
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      language: (state) => state.app.language,
      $lang: (state) => state.app.lang[state.app.language],
      loginLogo: (state) => state.app.loginLogo,
      userMenu: (state) => {
        let list = [];
        const lang = state.app.lang[state.app.language];
        const userInfo = state.app.userInfo;
        if (userInfo.pay_channel) {
          list = lang.userMenu.filter(
            (v) => v.id != 1
          );
        } else {
          list = lang.userMenu.filter(
            (v) => v.id != 1 && v.id != 2 && v.id != 4 && v.id != 5
          );
        }
        return list;
      },
    }),
  },
  onLoad() {
    this.langList[0].forEach((v, i) => {
      if (v.key == this.language) {
        this.defaultIndex = [i];
      }
    });
    this.getUserMoneyData()
  },
  methods: {
    confirm(item) {
      this.$store.commit("app/updateLanguage", item.value[0].key);
      this.show = false;
    },
    goPath(item) {
      if (item.id == 0) {
        this.show = true;
      } else if (item.id == 4 || item.id == 5 || item.id == 6) {
        uni.switchTab({
          url: item.path,
        });
      } else {
        if (this.userInfo.is_sw == 1) {
          this.$toast({
            message: this.$lang.is_sw,
            duration: 2000,
          });
        } else {
          uni.navigateTo({
            url: item.path,
          });
        }
      }
    },
    confirmLogout() {
      localStorage.removeItem("userInfo");
      this.$router.replace({ path: "/" });
    },
    getUserMoneyData() {
      var that = this
      const params = {
          user_id: this.userInfo.id,
          api_token: this.userInfo.api_token,
        };
        this.$api['getUserMoney'](params)
          .then((res) => {
            if (res.Success) {
              that.money = parseFloat(res.Data.money).toFixed(2)
            } else {
              this.$toast({
                message: res.Msg,
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
    }
  },
};
</script>

<style lang="scss" scoped>
.user {
  background: #0b1520;
  width: 100%;
  min-height: 100vh;
  .card {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    .uid {
      position: absolute;
      left: 30px;
      top: 25px;
      z-index: 3;
      font-size: 14px;
      color: #573d14;
    }
    .logo {
      position: absolute;
      right: 25px;
      top: 20px;
      z-index: 3;
    }
    .box {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 3;
      transform: translate(-50%, -50%);
      font-size: 18px;
      font-weight: 600;
      color: #573d14;
      text-align: center;
      .money {
        padding-left: 38px;
        padding-right: 36px;
        padding-top: 10px;
        padding-bottom: 4px;
        background: url("/static/images/balance_icon.png") no-repeat;
        background-size: 33px auto;
        background-position: left top;
      }
    }
  }
  .content {
    margin: 20px 15px;
    border-radius: 5px;
    overflow: hidden;
    .cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      padding: 15px 10px;
      color: #deb366;
      border-bottom: 1px solid #594522;
      background: #151617;
      &:active {
        opacity: 0.8;
      }
      &:last-child {
        border-bottom: none;
      }
    }
    .logout {
      width: 100%;
      height: 48px;
      line-height: 48px;
      text-align: center;
      font-size: 16px;
      background: #e5b932;
      font-weight: 600;
      margin: 20px auto;
      border-radius: 5px;
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>