hx123666/scoring/pages/settle/index.vue

<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>