shoot-miniprograms/src/pages/practise.vue

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Guide from "@/components/Guide.vue";
import Avatar from "@/components/Avatar.vue";
import { getPractiseDataAPI } from "@/apis";
import { canEenter } from "@/util";

import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device, online } = storeToRefs(store);
const data = ref({});

const goPractise = async (type) => {
  if (!canEenter(user.value, device.value, online.value)) return;
  // await uni.$checkAudio();
  uni.navigateTo({
    url: `/pages/practise-${type}`,
  });
};

onShow(async () => {
  const result = await getPractiseDataAPI();
  data.value = result;
});
</script>

<template>
  <Container title="个人练习">
    <view :style="{ width: '100%', height: '100%' }">
      <Guide>
        <view class="guide-tips">
          <text>师傅领进门，修行靠自身，赶紧练起来吧。</text>
          <text>坚持练习就能你快速升级，早日加入全国排位赛！</text>
        </view>
      </Guide>
      <view class="practise-data">
        <view>
          <view>
            <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
            <text class="truncate">{{ user.nickName }}</text>
          </view>
          <view>
            <text>已练习打卡</text>
            <text>{{ data.totalDay }}</text>
            <text>天</text>
          </view>
        </view>
        <view>
          <view>
            <view>
              <text>{{ data.totalGroup }}</text>
              <text>组</text>
            </view>
            <text>个人练习量</text>
          </view>
          <view>
            <view>
              <text>{{ data.totalArrow }}</text>
              <text>箭</text>
            </view>
            <text>射箭量</text>
          </view>
          <view>
            <view>
              <text>射灵</text>
              <text>{{ user.lvl }}</text>
              <text>级</text>
            </view>
            <text>当前等级</text>
          </view>
        </view>
      </view>
      <view class="practise-btn" @click="() => goPractise('one')">
        <image
          src="https://static.shelingxingqiu.com/attachment/2025-07-12/db9x668e2vdtqh0otq.png"
          class="practise1"
          mode="widthFix"
        />
      </view>
      <view class="practise-btn" @click="() => goPractise('two')">
        <image
          src="https://static.shelingxingqiu.com/attachment/2025-07-12/db9x668eehkvyicc08.png"
          class="practise2"
          mode="widthFix"
        />
      </view>
    </view>
  </Container>
</template>

<style scoped>
.practise-data,
.practise-btn {
  width: calc(100% - 30px);
  margin: 15px;
  margin-top: 0;
  border-radius: 20px;
  border: 1px solid #473f25;
  overflow: hidden;
}
.practise-data > view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff9;
  font-size: 12px;
}
.practise-data > view:first-child {
  padding-bottom: 15px;
  border-bottom: 1px solid #48494e;
  margin: 15px;
  margin-bottom: 0;
}
.practise-data > view:first-child > view {
  display: flex;
  align-items: flex-end;
}
.practise-data > view:first-child > view:first-child > text {
  color: #fff;
  margin-left: 10px;
  font-size: 16px;
  width: 120px;
}
.practise-data > view:first-child > view:last-child > text:nth-child(2) {
  color: #f7d247;
  margin: 0 3px;
  font-size: 20px;
  font-weight: 600;
  transform: translateY(3px);
}
.practise-data > view:last-child {
  margin-bottom: 15px;
}
.practise-data > view:last-child > view {
  width: 33%;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.practise-data > view:last-child > view:nth-child(2) {
  border-left: 1px solid #48494e;
  border-right: 1px solid #48494e;
}
.practise-data > view:last-child > view > view {
  display: flex;
  align-items: flex-end;
}
.practise-data > view:last-child > view > view > text:nth-last-child(2) {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0 3px;
  transform: translateY(5px);
}
.practise-data > view:last-child > view > text {
  margin-top: 5px;
}
.practise-btn > image {
  width: 100%;
}
</style>