PunchSettle-MiniProgram/src/pages/userCenter.vue

<template>
  <view class="bg-box">

    <view class="placehold"></view>

    <view>
      <uni-list>
        <uni-list-item :showArrow="true">
          <template v-slot:body>
            <view class="avatar-box">
              <view class="avatar">
                <view>
                  <Avatar :username="userInfo.nickname" color="#FFFFFF" backgroundColor="#BDE0FF"></Avatar>
                </view>
                <span class="nickname">{{ userInfo.nickname }}</span>
              </view>
              <view class="avatar-func" v-if="loginStatus" @click="modifyNickname">修改</view>
              <view class="avatar-func" v-else @click="login()">登录</view>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>

    <view class="mt24 stat-board" v-if="loginStatus">
      <view class="stat-board-box">
        <view class="stat-item">
          <view class="stat-title">积分</view>
        </view>
        <view class="stat-item">
          <view class="stat-item-label">待使用</view>
          <view class="stat-item-value">{{ userInfo.unusedPoints }}</view>
        </view>
        <view class="stat-item">
          <view class="stat-item-label">已使用</view>
          <view class="stat-item-value">{{ userInfo.usedPoints }}</view>
        </view>
        <view class="stat-item">
          <view class="stat-item-label">总积分</view>
          <view class="stat-item-value">{{ userInfo.totalPoints }}</view>
        </view>
      </view>
      <view class="stat-board-box stat-mt16">
        <view class="stat-item">
          <view class="stat-title">彩票</view>
        </view>
        <view class="stat-item">
          <view class="stat-item-label">购买</view>
          <view class="stat-item-value">{{ userInfo.totalConsumeAmount }}元</view>
        </view>
        <view class="stat-item">
          <view class="stat-item-label">中奖</view>
          <view class="stat-item-value">{{ userInfo.totalWinAmount }}元</view>
        </view>
        <view class="stat-item">
          <view class="stat-item-label"></view>
          <view class="stat-item-value"></view>
        </view>
      </view>
    </view>

    <view class="mt24" v-if="loginStatus">
      <uni-list :border="true">
        <uni-list-item title="积分结算记录" :showArrow="true" :showExtraIcon="true"
          :extraIcon="{ color: '#000000', size: 22, type: 'info' }" link="navigateTo" :to="router.SETTLE_POINTS_PAGE">
        </uni-list-item>
        <uni-list-item title="积分兑换记录" :showArrow="true" :showExtraIcon="true" clickable
          :extraIcon="{ color: '#000000', size: 22, type: 'minus' }" link="navigateTo"
          :to="router.REWARD_EXCHANGE_HISTORY_PAGE">
        </uni-list-item>
        <uni-list-item title="彩票消费与中奖记录" :showArrow="true" :showExtraIcon="true"
          :extraIcon="{ color: '#000000', size: 22, type: 'info' }" link="navigateTo"
          :to="router.ITEM_CONSUME_WIN_HISTORY_PAGE">
        </uni-list-item>
        <uni-list-item title="账户转账记录" :showArrow="true" :showExtraIcon="true" clickable
          :extraIcon="{ color: '#000000', size: 22, type: 'minus' }" link="navigateTo"
          :to="router.ACCOUNT_TRANSFER_HISTORY_PAGE">
        </uni-list-item>
      </uni-list>
    </view>

    <view class="mt24" v-if="loginStatus">
      <uni-list :border="true">
        <uni-list-item title="积分账户" :showArrow="true" :showExtraIcon="true"
          :extraIcon="{ color: '#000000', size: 22, type: 'info' }" link="navigateTo" :to="router.ACCOUNT_LIST_PAGE">
        </uni-list-item>
        <uni-list-item title="兑换列表" :showArrow="true" :showExtraIcon="true" clickable
          :extraIcon="{ color: '#000000', size: 22, type: 'minus' }" link="navigateTo" :to="router.REWARD_LIST_PAGE">
        </uni-list-item>
      </uni-list>
    </view>


    <view class="mt24">
      <uni-list :border="true">
        <uni-list-item title="关于我们" :showArrow="true" :showExtraIcon="true"
          :extraIcon="{ color: '#000000', size: 22, type: 'info' }" link="navigateTo" :to="router.ABOUT_US_PAGE">
        </uni-list-item>
        <uni-list-item title="免责声明" :showArrow="true" :showExtraIcon="true" clickable
          :extraIcon="{ color: '#000000', size: 22, type: 'minus' }" link="navigateTo" :to="router.DISCLAIMER_PAGE">
        </uni-list-item>
      </uni-list>
    </view>

    <view class="mt24" v-if="loginStatus">
      <uni-list :border="true">
        <uni-list-item title="退出登录" :showArrow="true" :showExtraIcon="true"
          :extraIcon="{ color: 'red', size: 22, type: 'closeempty' }" :clickable="true" @click="logout()">
        </uni-list-item>
      </uni-list>
    </view>

    <!-- 修改昵称弹出框 -->
    <uni-popup ref="nicknameInputDialog" type="dialog" :is-mask-click="false">
      <uni-popup-dialog mode="input" :before-close="true" title="修改昵称" confirmText="保存" @confirm="nicknameFormConfirm"
        @close="nicknameFormClose">
        <view class=".nickname-dialog">
          <input class=".nickname" v-model="nicknameFormData.nickname" placeholder="请输入昵称" />
        </view>

        <view style="display: none">
          <uni-forms ref="nicknameForm" :modelValue="nicknameFormData" :rules="nicknameFormRules" label-position="top"
            :label-width="150" err-show-type="modal">
            <uni-forms-item name="nickname">
              <uni-easyinput type="text" placeholder="请输入昵称" v-model="nicknameFormData.nickname"></uni-easyinput>
            </uni-forms-item>
          </uni-forms>
        </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import cacheKey from "@/common/cache.js";
import router from "@/common/router.js";
import { userApi } from "@/apis/apis.js";
import Avatar from 'vue-avatar/src/Avatar.vue';

// 组件
/**
 * 昵称弹出框
 */
const nicknameInputDialog = ref(null);

/**
 * 昵称表单
 */
const nicknameForm = ref(null);

// 属性
/**
 * 登录状态：false-未登录，true-已登录
 */
const loginStatus = ref(false);

/**
 * 用户信息
 */
const userInfo = ref({
  nickname: ''
});

/**
 * 昵称表单数据
 */
const nicknameFormData = ref({
  nickname: null,
});

/**
 * 昵称表单验证规则
 */
const nicknameFormRules = ref({
  nickname: {
    rules: [
      {
        required: true,
        errorMessage: "昵称不能为空",
      },
      {
        maxLength: 30,
        errorMessage: "昵称不能超过{maxLength}个字符",
      },
    ],
  },
});

// 方法
/**
 * 登录
 */
const login = () => {
  uni.navigateTo({
    url: router.LOGIN_PAGE,
  });
};

/**
 * 注销登录
 */
const logout = () => {
  uni.showModal({
    title: "注销提示",
    content: "确认退出登录？",
    success: function (res) {
      // 如果取消，则不执行后续代码
      if (res.cancel) {
        return;
      }
      // 移除用户信息
      uni.removeStorageSync(cacheKey.TOKEN);
      uni.removeStorageSync(cacheKey.NICKNAME);
      // 跳转到主页
      uni.reLaunch({
        url: router.TASK_TODO_PAGE
      });
    }
  });
};

/**
 * 获取用户信息
 */
const fetchUserInfo = async () => {
  userInfo.value = await userApi.queryUserInfo();
};

/**
 * 修改昵称 
 */
const modifyNickname = (e) => {
  nicknameFormData.value.nickname = userInfo.value.nickname;
  nicknameInputDialog.value.open();
};

/**
 * 昵称修改表单 提交
 */
const nicknameFormConfirm = async () => {
  let data = await nicknameForm.value.validate();
  await userApi.modifyNickname(data);
  userInfo.value.nickname = nicknameFormData.value.nickname;
  nicknameInputDialog.value.close();
  uni.showToast({
    title: "修改成功",
    icon: "success",
  });
};

/**
 * 昵称修改表单 关闭
 */
const nicknameFormClose = async () => {
  nicknameInputDialog.value.close();
};

// 生命周期
onShow(() => {
  // 根据登录凭据判断登录状态
  loginStatus.value = uni.getStorageSync(cacheKey.TOKEN) ? true : false;
  if (loginStatus.value) {
    fetchUserInfo();
  } else {
    userInfo.value.nickname = '游客';
  }
});
</script>

<style lang="scss" scoped>
.bg-box {
  background-color: #f5f5f5;
  height: 100vh;
}

.mt24 {
  margin-top: 16rpx;
}

.placehold {
  width: 100%;
  height: 24rpx;
}

.avatar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .avatar {
    display: flex;
    align-items: center;
  }

  .nickname {
    margin-left: 16rpx;
  }

  .avatar-func {
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 0rpx;
    line-height: 34.75rpx;
    color: #000000;
  }
}

.nickname-dialog {
  width: 100%;
  height: 100rpx;
  border-radius: 8px;
  background: #ffffff;
  // 阴影
  border: 0.5px solid #e4e4e4;

  input {
    width: 100%;
    height: 100%;
    font-size: 36rpx;
    font-weight: 700;
    letter-spacing: 0rpx;
    line-height: 52.13rpx;
    color: #000000;
    border-radius: 24rpx;
    text-align: center;
  }
}

.stat-board {
  background-color: #ffffff;
  padding: 16rpx 64rpx 16rpx 24rpx;

  .stat-mt16 {
    margin-top: 16rpx;
  }

  .stat-board-box {
    display: flex;

    .stat-item {
      flex: 1;
      display: inline-block;

      .stat-title {
        width: 100%;
        height: 100%;
        font-size: 32rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 46.34rpx;
        color: #000000;
        text-align: center;

        display: flex;
        /* 启用flex布局 */
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */
      }

      .stat-item-label {
        font-size: 24rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 34.75rpx;
        color: #000000;
        text-align: center;
        vertical-align: middle;
      }

      .stat-item-value {
        font-size: 32rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 46.34rpx;
        color: #000000;
        text-align: center;
        vertical-align: middle;
      }
    }
  }


}
</style>