111

scoring/pages/settle/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <view class="settle-page">
+    <!-- 顶部导航 -->
+    <view class="nav-bar">
+      <view class="nav-home" @click="goHome">
+        <uni-icons type="home" size="24" color="#fff"></uni-icons>
+      </view>
+      <view class="nav-title">计分器</view>
+      <view class="nav-actions">
+        <uni-icons type="more" size="24" color="#fff"></uni-icons>
+      </view>
+    </view>
+
+    <!-- 结算结果表格 -->
+    <view class="result-table">
+      <view class="table-header">
+        <text>玩家</text>
+        <text>胜负</text>
+        <text>得分</text>
+        <text>倍率分</text>
+      </view>
+      <view class="table-row">
+        <view class="player-info">
+          <image class="player-avatar" src="https://ts1.tc.mm.bing.net/th/id/OIP-C.QQG4bvcAR3CJ0WeQULA9UQAAAA?w=275&h=211&c=8&rs=1&qlt=90&o=6&cb=ucfimgc1&dpr=1.5&pid=3.1&rm=2" mode="aspectFit"></image>
+          <text class="player-name">玩家80061</text>
+        </view>
+        <view class="win-tag" v-if="isWin">胜利!</view>
+        <text class="score">{{ score }}</text>
+        <text class="score">0</text>
+      </view>
+    </view>
+
+    <!-- 对局详情链接 -->
+    <view class="detail-link">
+      <text>对局详情</text>
+    </view>
+
+    <!-- 分享按钮 -->
+    <button class="share-btn" @click="shareResult">分享给好友结算信息</button>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const score = ref('0')
+const isWin = ref(true)
+
+// 页面加载时接收计分页传参
+onLoad((options) => {
+  score.value = options.score || '0'
+  isWin.value = options.isWin === 'true'
+})
+
+// 返回首页
+const goHome = () => {
+  uni.switchTab({
+    url: '/pages/index/index'
+  })
+}
+
+// 分享功能（演示用）
+const shareResult = () => {
+  uni.showToast({
+    title: '分享功能待实现',
+    icon: 'none'
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.settle-page {
+  background-color: #fff;
+  min-height: 100vh;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 30rpx;
+  background-color: #41479b;
+  color: #fff;
+
+  .nav-home, .nav-actions {
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .nav-title {
+    font-size: 32rpx;
+    font-weight: 500;
+  }
+}
+
+.result-table {
+  margin: 30rpx;
+  background-color: #f5f5f5;
+  border-radius: 12rpx;
+  overflow: hidden;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-around;
+  padding: 20rpx;
+  background-color: #e8e8e8;
+  border-bottom: 1rpx solid #ddd;
+
+  text {
+    flex: 1;
+    text-align: center;
+    font-size: 28rpx;
+    font-weight: 500;
+  }
+}
+
+.table-row {
+  display: flex;
+  padding: 20rpx;
+
+  .player-info {
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    .player-avatar {
+      width: 60rpx;
+      height: 60rpx;
+      border-radius: 50%;
+      margin-right: 10rpx;
+    }
+
+    .player-name {
+      font-size: 28rpx;
+      color: #000;
+    }
+  }
+
+  .win-tag {
+    flex: 1;
+    text-align: center;
+    background-color: #f00;
+    color: #fff;
+    font-size: 24rpx;
+    padding: 2rpx 10rpx;
+    border-radius: 8rpx;
+  }
+
+  .score {
+    flex: 1;
+    text-align: center;
+    font-size: 28rpx;
+    color: #666;
+  }
+}
+
+.detail-link {
+  text-align: center;
+  margin: 20rpx 0;
+
+  text {
+    font-size: 26rpx;
+    color: #41479b;
+    text-decoration: underline;
+  }
+}
+
+.share-btn {
+  width: 600rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  margin: 30rpx auto;
+  background-color: #ffc107;
+  color: #333;
+  font-size: 32rpx;
+  font-weight: 500;
+  border-radius: 40rpx;
+}
+</style>