1XJT/scoring/pages/compute/compute.vue

<template>
  <view class="container">
    <!-- 顶部表头 -->
    <view class="table-header">
      <view class="header-player">玩家</view>
      <view class="header-result">胜负</view>
      <view class="header-score">得分</view>
    </view>
    
    <!-- 玩家信息区域 -->
    <view class="player-row">
      <view class="player-info">
        <view class="player-avatar">
          <!-- 兔子头像 SVG -->
          <svg width="30" height="30" viewBox="0 0 30 30">
            <ellipse cx="15" cy="20" rx="9" ry="6" fill="#ffffff"/>
            <circle cx="15" cy="12" r="7" fill="#ffffff"/>
            <ellipse cx="12" cy="8" rx="2" ry="4" fill="#ffffff"/>
            <ellipse cx="18" cy="8" rx="2" ry="4" fill="#ffffff"/>
            <ellipse cx="12" cy="8" rx="1" ry="3" fill="#ffb6c1"/>
            <ellipse cx="18" cy="8" rx="1" ry="3" fill="#ffb6c1"/>
            <circle cx="13" cy="12" r="1" fill="#333333"/>
            <circle cx="17" cy="12" r="1" fill="#333333"/>
            <circle cx="15" cy="14" r="0.8" fill="#ff69b4"/>
            <path d="M14,16 Q15,17 16,16" stroke="#ff69b4" stroke-width="0.5" fill="none"/>
            <circle cx="11" cy="13" r="1.5" fill="#ffb6c1" opacity="0.6"/>
            <circle cx="19" cy="13" r="1.5" fill="#ffb6c1" opacity="0.6"/>
            <rect x="10" cy="19" width="10" height="4" fill="#4169e1" rx="1"/>
            <circle cx="20" cy="21" r="2" fill="#ffd700"/>
          </svg>
        </view>
        <text class="player-name">玩家59306</text>
      </view>
      
      <view class="result-buttons">
        <view 
          class="result-btn" 
          :class="{ active: result === 'win' }"
          @tap="setResult('win')"
        >胜</view>
        <view 
          class="result-btn" 
          :class="{ active: result === 'lose' }"
          @tap="setResult('lose')"
        >负</view>
      </view>
      
      <view class="score-display">
        <text class="score-value">{{ score }}</text>
        <button class="sum-btn" @tap="sumScore">Σ 合分</button>
      </view>
    </view>
    
    <!-- 固定在底部的数字键盘 -->
    <view class="keyboard">
      <view 
        v-for="key in keys" 
        :key="key.value"
        class="key" 
        :class="{
          'operator': key.type === 'operator',
          'minus': key.value === '-',
          'submit-key': key.type === 'submit'
        }"
        @tap="pressKey(key.value, key.type)"
      >{{ key.display }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const result = ref('win');
const score = ref('0');

// 键盘布局 - 提交按钮在0的左侧
const keys = [
  { value: '1', display: '1', type: 'number' },
  { value: '2', display: '2', type: 'number' },
  { value: '3', display: '3', type: 'number' },
  { value: '+', display: '+', type: 'operator' },
  { value: '×', display: '×', type: 'delete' },
  { value: '4', display: '4', type: 'number' },
  { value: '5', display: '5', type: 'number' },
  { value: '6', display: '6', type: 'number' },
  { value: '-', display: '-', type: 'operator' },
  { value: '√', display: '√', type: 'operator' },
  { value: '7', display: '7', type: 'number' },
  { value: '8', display: '8', type: 'number' },
  { value: '9', display: '9', type: 'number' },
  { value: 'submit', display: '提交', type: 'submit' }, // 提交按钮在0的左侧
  { value: '0', display: '0', type: 'number' }
];

const setResult = (res) => {
  result.value = res;
};

const pressKey = (key, type) => {
  if (type === 'submit') {
    // 提交分数
    if (score.value !== '0') {
      uni.showToast({
        title: `分数 ${score.value} 已提交`,
        icon: 'success'
      });
      
      // 实际应用中，这里应该调用API提交分数
      console.log('提交分数:', score.value);
      
      // 重置分数
      setTimeout(() => {
        score.value = '0';
      }, 1500);
    }
  } else if (key === '×') {
    // 删除最后一个字符
    if (score.value.length > 1) {
      score.value = score.value.slice(0, -1);
    } else {
      score.value = '0';
    }
  } else if (key === '√') {
    // 计算平方根
    try {
      const result = Math.sqrt(parseFloat(score.value));
      score.value = result.toString();
    } catch (error) {
      score.value = '错误';
      setTimeout(() => {
        score.value = '0';
      }, 1000);
    }
  } else {
    // 添加数字或运算符
    if (score.value === '0') {
      score.value = key;
    } else {
      score.value += key;
    }
  }
};

const sumScore = () => {
  uni.showToast({
    title: '合分功能需要与后端API交互',
    icon: 'none'
  });
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 240rpx; /* 为底部键盘留出空间 */
}

/* 顶部表头 */
.table-header {
  display: flex;
  background-color: white;
  padding: 30rpx 40rpx;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-player {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.header-result {
  width: 200rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
}

.header-score {
  width: 200rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
}

/* 玩家信息区域 */
.player-row {
  display: flex;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1px solid #f5f5f5;
  background-color: white;
}

.player-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.player-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  background-color: #1e3a8a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.player-name {
  font-size: 32rpx;
  color: #333;
}

.result-buttons {
  width: 200rpx;
  display: flex;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  padding: 4rpx;
}

.result-btn {
  flex: 1;
  padding: 12rpx 0;
  text-align: center;
  font-size: 28rpx;
  border-radius: 6rpx;
}

.result-btn.active {
  background-color: #6a5acd;
  color: white;
}

.score-display {
  width: 200rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.score-value {
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
}

.sum-btn {
  background-color: #6a5acd;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
  font-size: 28rpx;
}

/* 固定在底部的数字键盘 */
.keyboard {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background-color: #e0e0e0;
  padding: 1px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 750rpx;
  margin: 0 auto;
}

.key {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120rpx;
  font-size: 40rpx;
}

.key:active {
  background-color: #f0f0f0;
}

.operator {
  color: #6a5acd;
}

.minus {
  color: #ff4757;
}

.submit-key {
  background-color: #8a2be2;
  color: white;
  font-weight: 500;
}

/* 调整键盘布局，使提交按钮在0的左侧 */
.keyboard {
  grid-template-areas: 
    "num1 num2 num3 plus delete"
    "num4 num5 num6 minus sqrt"
    "num7 num8 num9 submit num0";
}

.key:nth-child(1) { grid-area: num1; }
.key:nth-child(2) { grid-area: num2; }
.key:nth-child(3) { grid-area: num3; }
.key:nth-child(4) { grid-area: plus; }
.key:nth-child(5) { grid-area: delete; }
.key:nth-child(6) { grid-area: num4; }
.key:nth-child(7) { grid-area: num5; }
.key:nth-child(8) { grid-area: num6; }
.key:nth-child(9) { grid-area: minus; }
.key:nth-child(10) { grid-area: sqrt; }
.key:nth-child(11) { grid-area: num7; }
.key:nth-child(12) { grid-area: num8; }
.key:nth-child(13) { grid-area: num9; }
.key:nth-child(14) { grid-area: submit; }
.key:nth-child(15) { grid-area: num0; }
</style>