功能完善

src/components/AppFooter.vue

@@ -4,6 +4,13 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 
+const props = defineProps({
+  signin: {
+    type: Function,
+    default: () => {},
+  },
+});
+
 const tabs = [
   { image: "../static/tab-vip.png" },
   { image: "../static/tab-grow.png" },
@@ -11,12 +18,7 @@ const tabs = [
 ];
 
 function handleTabClick(index) {
-  if (!user.value.id) {
-    return uni.showToast({
-      title: "还未登录",
-      icon: "none",
-    });
-  }
+  if (!user.value.id) return props.signin();
   if (index === 1) {
     uni.navigateTo({
       url: "/pages/my-growth",

src/components/BowData.vue

@@ -0,0 +1,109 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+import Avatar from "@/components/Avatar.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScorePanel from "@/components/ScorePanel.vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  arrows: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <AppBackground :type="1" />
+    <view class="header">
+      <view>
+        <Avatar :src="user.avatarUrl" frame :size="50" />
+        <view>
+          <text>{{ user.nickName }}</text>
+          <text>砖石1级</text>
+        </view>
+      </view>
+      <view @click="onClose">
+        <image src="../static/close-white.png" mode="widthFix" />
+      </view>
+    </view>
+    <view :style="{ width: '100%', marginBottom: '20px' }">
+      <BowTarget :scores="arrows" :showE="false" />
+    </view>
+    <view class="desc">
+      <text>{{ arrows.length }}</text>
+      <text>支箭，共</text>
+      <text>{{ arrows.reduce((a, b) => a + b.ring, 0) }}</text>
+      <text>环</text>
+    </view>
+    <ScorePanel
+      :rowCount="arrows.length === 12 ? 6 : 9"
+      :total="arrows.length"
+      :scores="arrows.map((a) => a.ring)"
+    />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #232323;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 20px);
+  padding: 10px;
+}
+.header > view:first-child {
+  display: flex;
+  align-items: center;
+}
+.header > view:first-child > view:last-child {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 10px;
+  color: #fff;
+}
+.header > view:first-child > view:last-child > text:last-child {
+  font-size: 10px;
+  color: #fff9;
+  background-color: #5f51ff;
+  padding: 2px 5px;
+  border-radius: 10px;
+  margin-top: 5px;
+}
+.header > view:last-child > image {
+  width: 40px;
+}
+.desc {
+  color: #fff;
+  margin-bottom: 40px;
+}
+.desc > text:nth-child(2),
+.desc > text:nth-child(4) {
+  color: #fed847;
+}
+</style>

src/components/BowTarget.vue

@@ -41,16 +41,20 @@ const props = defineProps({
 });
 
 const showRoundTips = ref(false);
+const showLatestArrow = ref(false);
+const prevLength = ref(0);
 
 watch(
   () => props.scores,
   (newVal) => {
-    if (newVal.length > 0) {
+    if (newVal.length - prevLength.value === 1) {
       showRoundTips.value = true;
+      showLatestArrow.value = true;
       setTimeout(() => {
         showRoundTips.value = false;
-      }, 2000);
+      }, 1000);
     }
+    prevLength.value = newVal.length;
   },
   {
     deep: true,
@@ -93,7 +97,7 @@ function calcRealY(num) {
         v-for="(bow, index) in scores"
         :key="index"
         :src="
-          index === scores.length - 1 && !blueScores.length
+          index === scores.length - 1 && !blueScores.length && showLatestArrow
             ? '../static/hit-icon-green.png'
             : '../static/hit-icon.png'
         "

src/components/Container.vue

@@ -26,7 +26,7 @@ defineProps({
 <style scoped>
 .content {
   width: 100vw;
-  height: calc(100vh - 116px);
+  height: calc(100vh - 95px);
   overflow-x: hidden;
   overflow-y: auto;
   display: flex;

src/components/Header.vue

@@ -25,7 +25,7 @@ const simulShoot = async () => {
       <image src="../static/back.png" mode="widthFix" />
     </navigator>
     <text>{{ title }}</text>
-    <view class="simul" @click="simulShoot">S</view>
+    <view class="simul" @click="simulShoot">模拟射箭</view>
   </view>
 </template>
 
@@ -37,7 +37,7 @@ const simulShoot = async () => {
   width: 72vw;
   height: 60px;
   padding-left: 15px;
-  padding-top: 36px;
+  padding-top: 25px;
 }
 .back-btn {
   display: flex;

src/components/SButton.vue

@@ -20,13 +20,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <view
+  <button
     class="sbtn"
+    hover-class="none"
     :style="{
       width: width,
       borderRadius: rounded + 'px',
       backgroundColor: disabled ? '#757575' : '#fed847',
     }"
+    open-type="getUserInfo"
     @click="
       () => {
         if (!disabled) onClick();
@@ -34,7 +36,7 @@ const props = defineProps({
     "
   >
     <slot />
-  </view>
+  </button>
 </template>
 
 <style scoped>

src/components/ScorePanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 const props = defineProps({
   rowCount: {
     type: Number,
@@ -15,6 +15,12 @@ const props = defineProps({
   },
 });
 const items = ref(new Array(props.total).fill(9));
+watch(
+  () => props.total,
+  (newValue) => {
+    items.value = new Array(newValue).fill(9);
+  }
+);
 </script>
 <template>
   <view class="container">

src/components/ScoreResult.vue

@@ -4,6 +4,7 @@ import IconButton from "@/components/IconButton.vue";
 import SButton from "@/components/SButton.vue";
 import ImageShare from "@/components/ImageShare.vue";
 import CoachComment from "@/components/CoachComment.vue";
+import BowData from "@/components/BowData.vue";
 const props = defineProps({
   show: {
     type: Boolean,
@@ -29,6 +30,7 @@ const props = defineProps({
 const showPanel = ref(true);
 const showComment = ref(false);
 const showShare = ref(false);
+const showBowData = ref(false);
 const closePanel = () => {
   showPanel.value = false;
   setTimeout(() => {
@@ -71,7 +73,7 @@ setTimeout(() => {
               .reduce((last, next) => last + next, 0)
           }}环）：</text
         >
-        <button>
+        <button @click="() => (showBowData = true)">
           <text>查看靶纸</text>
           <image
             src="../static/enter-arrow-blue.png"
@@ -103,6 +105,11 @@ setTimeout(() => {
     <CoachComment :show="showComment" :onClose="() => (showComment = false)">
       {{ result.adjustmentHint }}
     </CoachComment>
+    <BowData
+      :arrows="result.arrows"
+      :show="showBowData"
+      :onClose="() => (showBowData = false)"
+    />
   </view>
 </template>
 

src/components/Signin.vue

@@ -0,0 +1,185 @@
+<script setup>
+import { ref } from "vue";
+import Avatar from "@/components/Avatar.vue";
+import SButton from "@/components/SButton.vue";
+import { getMyDevicesAPI, loginAPI } from "@/apis";
+import useStore from "@/store";
+const store = useStore();
+const { updateUser, updateDevice } = store;
+const props = defineProps({
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+const agree = ref(false);
+const avatarUrl = ref("");
+const nickName = ref("");
+const handleAgree = () => {
+  agree.value = !agree.value;
+};
+
+function onChooseAvatar(e) {
+  avatarUrl.value = e.detail.avatarUrl;
+}
+
+function onNicknameChange(e) {
+  nickName.value = e.detail.value;
+}
+
+const handleLogin = () => {
+  if (!avatarUrl.value) {
+    return uni.showToast({
+      title: "请选择头像",
+      icon: "none",
+    });
+  }
+  if (!nickName.value) {
+    return uni.showToast({
+      title: "请输入昵称",
+      icon: "none",
+    });
+  }
+  if (!agree.value) {
+    return uni.showToast({
+      title: "请先同意协议",
+      icon: "none",
+    });
+  }
+  uni.login({
+    provider: "weixin",
+    success: async (loginRes) => {
+      const { code } = loginRes;
+      const result = await loginAPI(nickName.value, avatarUrl.value, code);
+      updateUser({
+        ...result.user,
+        nickName: nickName.value,
+        avatarUrl: avatarUrl.value,
+      });
+      const devices = await getMyDevicesAPI();
+      if (devices.bindings.length) {
+        updateDevice(
+          devices.bindings[0].deviceId,
+          devices.bindings[0].deviceName
+        );
+      }
+      props.onClose();
+    },
+    fail: (err) => {
+      uni.showToast({
+        title: "登录失败",
+        icon: "none",
+      });
+      console.error("登录失败：", err);
+    },
+  });
+};
+</script>
+
+<template>
+  <view class="container">
+    <view class="avatar">
+      <text>头像:</text>
+      <button
+        open-type="chooseAvatar"
+        @chooseavatar="onChooseAvatar"
+        class="login-btn"
+        hover-class="none"
+      >
+        <Avatar v-if="avatarUrl" :src="avatarUrl" />
+        <text v-else>点击获取</text>
+      </button>
+    </view>
+    <view class="nickname">
+      <text>昵称:</text>
+      <input
+        type="nickname"
+        class="nickname-input"
+        placeholder="请输入昵称"
+        @change="onNicknameChange"
+        @blur="onNicknameBlur"
+      />
+    </view>
+    <SButton :rounded="20" width="80vw" :onClick="handleLogin">
+      <image
+        src="../static/wechat-icon.png"
+        mode="widthFix"
+        class="wechat-icon"
+      />
+      <text :style="{ color: '#000' }">登录/注册</text>
+    </SButton>
+    <view class="protocol" @click="handleAgree">
+      <view v-if="!agree" />
+      <image v-if="agree" src="../static/checked.png" mode="widthFix" />
+      <text
+        >已同意并阅读<text :style="{ color: '#fff' }">《用户协议》</text>及<text
+          :style="{ color: '#fff' }"
+          >《隐私协议》</text
+        >内容</text
+      >
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.avatar,
+.nickname {
+  width: 80%;
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+}
+.avatar {
+  margin: 0;
+}
+.avatar > text,
+.nickname > text {
+  width: 20%;
+  margin-right: 10px;
+  color: #fff9;
+}
+.nickname > input {
+  flex: 1;
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 7px 15px;
+  font-size: 14px;
+  color: #000;
+}
+.wechat-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 20px;
+}
+.protocol {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  margin-top: 15px;
+  color: #8a8a8a;
+}
+.protocol > image {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+}
+.protocol > view:first-child {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin-right: 10px;
+  border: 1px solid #fff;
+}
+.login-btn::after {
+  border: none;
+}
+</style>

src/components/Swiper.vue

@@ -69,7 +69,7 @@ const handleChange = (e) => {
 
 .dots {
   position: absolute;
-  bottom: 12%;
+  bottom: 14%;
   left: 50%;
   transform: translateX(-50%);
   display: flex;

src/components/UserItem.vue

@@ -20,13 +20,13 @@ defineProps({
 </script>
 
 <template>
-  <view class="user-item" :style="customStyle">
+  <view class="user-item" :style="customStyle" @click="onClick">
     <text>{{ title }}</text>
     <view>
       <slot></slot>
-      <button v-if="onClick !== null" @click="onClick">
+      <view v-if="onClick !== null">
         <image src="../static/enter.png" mode="widthFix" />
-      </button>
+      </view>
     </view>
   </view>
 </template>