feat: 分包除了list

2025-09-12 15:30:49 +08:00
parent bd628f2b5c
commit 859ffec852
26 changed files with 33 additions and 20 deletions
--- a/src/other_pages/favorites/index.config.ts
+++ b/src/other_pages/favorites/index.config.ts
@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '订单确认',
+  navigationBarBackgroundColor: '#FAFAFA'
+})
--- a/src/other_pages/favorites/index.scss
+++ b/src/other_pages/favorites/index.scss
@@ -0,0 +1 @@
+@use '~@/scss/images.scss' as img;
--- a/src/other_pages/favorites/index.tsx
+++ b/src/other_pages/favorites/index.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import { View, Text, Button } from '@tarojs/components'
+import Taro, { useDidShow, useRouter } from '@tarojs/taro'
+import { delay } from '@/utils'
+import orderService from '@/services/orderService'
+import detailService, { GameDetail } from '@/services/detailService'
+import { withAuth } from '@/components'
+
+const OrderCheck = () => {
+  const { params } = useRouter()
+  const { id, gameId } = params
+  const [detail ,setDetail] = useState<GameDetail | {}>({})
+
+  useDidShow(async () => {
+    const res = await detailService.getDetail(Number(gameId))
+    console.log(res)
+    if (res.code === 0) {
+      setDetail(res.data)
+    }
+  })
+
+  //TODO: get order msg from id
+  const handlePay = async () => {
+    Taro.showLoading({
+      title: '支付中...',
+      mask: true
+    })
+    const res = await orderService.createOrder(Number(gameId))
+    if (res.code === 0) {
+      const { payment_required, payment_params } = res.data
+      if (payment_required) {
+        const { timeStamp, nonceStr, package: package_, signType, paySign } = payment_params
+        await Taro.requestPayment({
+          timeStamp,
+          nonceStr,
+          package: package_,
+          signType,
+          paySign,
+          success: async () => {
+            Taro.hideLoading()
+            Taro.showToast({
+              title: '支付成功',
+              icon: 'success'
+            })
+            await delay(1000)
+            Taro.navigateBack({
+              delta: 1
+            })
+          },
+          fail: () => {
+            Taro.hideLoading()
+            Taro.showToast({
+              title: '支付失败',
+              icon: 'none'
+            })
+          }
+        })
+      }
+    }
+  }
+  return (
+    <View>
+      <Text>OrderCheck</Text>
+      <Text>球局名称：{detail?.title || '-'}</Text>
+      <Text>价格：¥{detail?.price || '-'}</Text>
+      <Button onClick={handlePay}>支付</Button>
+    </View>
+  )
+}
+
+export default withAuth(OrderCheck)
--- a/src/other_pages/message/index.config.ts
+++ b/src/other_pages/message/index.config.ts
@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '消息',
+  // navigationBarBackgroundColor: '#FAFAFA',
+  navigationStyle: 'custom',
+})
--- a/src/other_pages/message/index.scss
+++ b/src/other_pages/message/index.scss
@@ -0,0 +1,277 @@
+@use '~@/scss/images.scss' as img;
+
+.message-container {
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  // 导航栏
+  .navbar {
+    height: 100px;
+    background: #FFFFFF;
+    padding-top: 44px;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    .navbar-content {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 15px;
+
+      .navbar-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .navbar-avatar {
+          width: 28px;
+          height: 28px;
+        }
+
+        .navbar-title {
+          font-family: 'PingFang SC';
+          font-weight: 600;
+          font-size: 20px;
+          line-height: 1.4;
+          color: #000000;
+        }
+      }
+    }
+  }
+
+
+  // 消息列表
+  .message-list {
+    flex: 1;
+    overflow: hidden;
+    box-sizing: border-box;
+    margin-bottom:100px;
+    background-color: none !important;
+
+    .message-list-content {
+      display: flex;
+      flex-direction: column;
+      padding: 0 12px;
+      gap: 8px;
+    }
+
+    // 系统消息样式
+    .system-message {
+      background: #FFFFFF;
+      border: 0.5px solid rgba(0, 0, 0, 0.08);
+      border-radius: 20px;
+      padding: 0 0 12px;
+      box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+      box-sizing: border-box;
+
+      .message-header {
+        display: flex;
+        align-items: center;
+        padding: 12px 15px 0;
+
+        .message-title {
+          font-family: 'PingFang SC';
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 1.5;
+          color: #000000;
+          flex: 1;
+        }
+
+        .message-time {
+          font-family: 'PingFang SC';
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 1.5;
+          color: rgba(60, 60, 67, 0.6);
+        }
+      }
+
+      .message-content {
+        padding: 8px 15px 0;
+
+        .message-text {
+          font-family: 'PingFang SC';
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 1.43;
+          color: rgba(0, 0, 0, 0.7);
+        }
+      }
+
+      .message-action {
+        padding: 12px 15px 0;
+
+        .action-divider {
+          height: 0.5px;
+          background: rgba(0, 0, 0, 0.08);
+          margin-bottom: 12px;
+        }
+
+        .action-button {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .action-text {
+            font-family: 'PingFang SC';
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 1.43;
+            color: rgba(0, 0, 0, 0.85);
+          }
+
+          .action-arrow {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+
+    // 用户消息样式
+    .user-message {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 15px;
+      background: #FFFFFF;
+      border: 0.5px solid rgba(0, 0, 0, 0.08);
+      border-radius: 20px;
+      box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+      box-sizing: border-box;
+
+      .message-avatar {
+        position: relative;
+        flex-shrink: 0;
+
+        .unread-dot {
+          position: absolute;
+          top: -2px;
+          right: -2px;
+          width: 10px;
+          height: 10px;
+          background: #FF4848;
+          border-radius: 50%;
+        }
+      }
+
+      .message-info {
+        flex: 1;
+        min-width: 0;
+
+        .message-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 4px;
+
+          .message-title {
+            font-family: 'PingFang SC';
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 1.5;
+            color: #000000;
+          }
+
+          .message-time {
+            font-family: 'PingFang SC';
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 1.71;
+            color: rgba(0, 0, 0, 0.35);
+          }
+        }
+
+        .message-content {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          min-width: 0;
+
+          .message-text {
+            font-family: 'PingFang SC';
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 1.29;
+            color: rgba(0, 0, 0, 0.35);
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .unread-indicator {
+            width: 10px;
+            height: 10px;
+            background: #FF4848;
+            border-radius: 50%;
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+
+  // 空状态
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 124px 16px;
+    height: 746px;
+
+    .empty-icon {
+      width: 300px;
+      height: 225px;
+      margin-bottom: 12px;
+      position: relative;
+
+      .empty-message-icon {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
+        border-radius: 12px;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 60px;
+          height: 60px;
+          background: #d0d0d0;
+          border-radius: 50%;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 30px;
+          height: 30px;
+          background: #a0a0a0;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .empty-text {
+      font-family: 'PingFang SC';
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 1.71;
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
+}
--- a/src/other_pages/message/index.tsx
+++ b/src/other_pages/message/index.tsx
@@ -0,0 +1,184 @@
+import { useState } from 'react'
+import { View, Text, ScrollView, Image } from '@tarojs/components'
+import { Avatar } from '@nutui/nutui-react-taro'
+import GuideBar from '@/components/GuideBar'
+import { withAuth } from '@/components'
+import './index.scss'
+
+// 消息类型定义
+interface MessageItem {
+  id: string
+  type: 'system' | 'user' | 'like' | 'comment' | 'follow'
+  title: string
+  content: string
+  time: string
+  avatar?: string
+  isRead: boolean
+  hasAction?: boolean
+  actionText?: string
+}
+
+const Message = () => {
+  const [activeTab] = useState<'all' | 'like' | 'comment' | 'follow'>('all')
+
+  // 模拟消息数据
+  const messageList: MessageItem[] = [
+    {
+      id: '1',
+      type: 'system',
+      title: '球局报名确认',
+      content: '恭喜，你成功报名"世纪公园混双 · 8月20日"球局！请提前15分钟到达，球场门口等你。',
+      time: '今天 09:12',
+      isRead: false,
+      hasAction: true,
+      actionText: '查看详情'
+    },
+    {
+      id: '2',
+      type: 'system',
+      title: '新球友加入提醒',
+      content: 'Fiona 已加入"徐汇双打 · 今晚7点"的群聊，快去和她打个招呼吧～',
+      time: '昨天 09:12',
+      isRead: false,
+      hasAction: true,
+      actionText: '打个招呼'
+    },
+    {
+      id: '3',
+      type: 'system',
+      title: '场地变更通知',
+      content: '请注意，"张江中午快打"已改至世纪园区 3 号场集合。',
+      time: '2025-08-17 18:30',
+      isRead: true
+    },
+    {
+      id: '4',
+      type: 'system',
+      title: '系统维护提醒',
+      content: '系统将于 2025-08-20 凌晨 00:00–02:00 暂停服务，届时活动发布、消息中心等功能可能无法使用，敬请谅解。',
+      time: '2025-08-17 18:30',
+      isRead: true
+    },
+    {
+      id: '5',
+      type: 'system',
+      title: '活动将近提醒',
+      content: '你的"宝山初学者约球"将在 2 小时后开始。快准备好球拍、毛巾和运动鞋，我们赛场见！',
+      time: '2025-08-17 18:30',
+      isRead: true
+    },
+    {
+      id: '6',
+      type: 'user',
+      title: '王晨',
+      content: '你好，昨天约的球场还在吗',
+      time: '09:34',
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      isRead: false
+    },
+    {
+      id: '7',
+      type: 'user',
+      title: '阿斌',
+      content: '七点到世纪公园东门集合可以吗？',
+      time: '昨天 22:10',
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      isRead: false
+    },
+    {
+      id: '8',
+      type: 'user',
+      title: 'Lili',
+      content: '我刚问了，还有一个小时的空场！',
+      time: '昨天 18:47',
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      isRead: true
+    }
+  ]
+
+  // 过滤消息
+  const filteredMessages = messageList.filter(message => {
+    if (activeTab === 'all') return true
+    return message.type === activeTab
+  })
+
+  // 渲染消息项
+  const renderMessageItem = (message: MessageItem) => {
+    if (message.type === 'system') {
+      return (
+        <View className='message-item system-message' key={message.id}>
+          <View className='message-header'>
+            <Text className='message-title'>{message.title}</Text>
+            <Text className='message-time'>{message.time}</Text>
+          </View>
+          <View className='message-content'>
+            <Text className='message-text'>{message.content}</Text>
+          </View>
+          {message.hasAction && (
+            <View className='message-action'>
+              <View className='action-divider'></View>
+              <View className='action-button'>
+                <Text className='action-text'>{message.actionText}</Text>
+                <Image className='action-arrow' src={require('../../static/message/icon-message-arrow.svg')} />
+              </View>
+            </View>
+          )}
+        </View>
+      )
+    }
+
+    return (
+      <View className='message-item user-message' key={message.id}>
+        <View className='message-avatar'>
+          <Avatar src={message.avatar} size='48px' />
+        </View>
+        <View className='message-info'>
+          <View className='message-header'>
+            <Text className='message-title'>{message.title}</Text>
+            <Text className='message-time'>{message.time}</Text>
+          </View>
+          <View className='message-content'>
+            <Text className='message-text'>{message.content}</Text>
+            {!message.isRead && <View className='unread-indicator'></View>}
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View className='message-container'>
+      {/* 导航栏 */}
+      <View className='navbar'>
+        <View className='navbar-content'>
+          <View className='navbar-left'>
+            <Avatar className='navbar-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
+            <Text className='navbar-title'>消息</Text>
+          </View>
+        </View>
+      </View>
+
+
+      {/* 消息列表 */}
+      <ScrollView scrollY className='message-list'>
+        {filteredMessages.length > 0 ? (
+          <View className='message-list-content'>
+            {filteredMessages.map(renderMessageItem)}
+          </View>
+        ) : (
+          <View className='empty-state'>
+            <View className='empty-icon'>
+              <View className='empty-message-icon'></View>
+            </View>
+            <Text className='empty-text'>暂无消息</Text>
+          </View>
+        )}
+      </ScrollView>
+
+      {/* 底部导航 */}
+      <GuideBar currentPage='message' />
+    </View>
+  )
+}
+
+export default withAuth(Message)
--- a/src/other_pages/ntrp-evaluate/index.config.ts
+++ b/src/other_pages/ntrp-evaluate/index.config.ts
@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: "NTRP 评测",
+  // navigationBarBackgroundColor: '#FAFAFA',
+  // navigationStyle: 'custom',
+});
--- a/src/other_pages/ntrp-evaluate/index.module.scss
+++ b/src/other_pages/ntrp-evaluate/index.module.scss
@@ -0,0 +1,64 @@
+@use "~@/scss/images.scss" as img;
+
+.container {
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .title {
+    font-size: 24px;
+    font-weight: bold;
+    font-family: Arial, sans-serif;
+    text-align: center;
+    margin-bottom: 20px;
+    color: #333;
+  }
+
+  .content {
+    width: 100%;
+    height: 300px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .image {
+      /* width: 200px; */
+      /* height: 200px; */
+      /* object-fit: cover; */
+    }
+
+    .description {
+      padding: 10px;
+      box-sizing: border-box;
+      font-size: 16px;
+      color: #666;
+    }
+  }
+  .button {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 200px;
+    height: 50px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    font-family: Arial, sans-serif;
+    text-align: center;
+    line-height: 50px;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+}
--- a/src/other_pages/ntrp-evaluate/index.tsx
+++ b/src/other_pages/ntrp-evaluate/index.tsx
@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+import { View, Text, Image, Button } from "@tarojs/components";
+import Taro, { useRouter } from "@tarojs/taro";
+import { withAuth } from "@/components";
+import evaluateService from "@/services/evaluateService";
+import { useUserActions } from "@/store/userStore";
+import { delay } from "@/utils";
+import styles from "./index.module.scss";
+
+function NtrpEvaluate() {
+  const { updateUserInfo } = useUserActions();
+  const { params } = useRouter();
+  const { redirect } = params;
+
+  useEffect(() => {
+    evaluateService.getEvaluateQuestions().then((data) => {
+      console.log(data);
+    });
+  }, []);
+
+  async function handleUpdateNtrp() {
+    await updateUserInfo({
+      ntrp_level: "4.0",
+    });
+    Taro.showToast({
+      title: "更新成功",
+      icon: "success",
+      duration: 2000,
+    });
+    await delay(2000);
+    if (redirect) {
+      Taro.redirectTo({ url: decodeURIComponent(redirect) });
+    }
+  }
+
+  return (
+    <View className={styles.container}>
+      <View className={styles.title}>NTRP评分</View>
+      <View className={styles.content}>
+        <Image
+          className={styles.image}
+          src="https://img.yzcdn.cn/vant/cat.jpeg"
+        />
+        <Text className={styles.description}>您的NTRP评分是 4.0 分。</Text>
+      </View>
+      <Button className={styles.button} onClick={handleUpdateNtrp}>
+        评测通过
+      </Button>
+    </View>
+  );
+}
+
+export default withAuth(NtrpEvaluate);