帮我写一个微信小程序页面代码，完成后index.wxml,index.wxss,index.json,index.ts四个文件的代码，四个文件分别显示。 主要实现比赛积分统计。 首先需要选择模式，有两种模式，第一种模式是四人比赛，第二种模式是三人比赛。 第一种模式首先需要输入四位玩家的名称（分两行输入），接着显示四人积分统计分数（分两行显示）。 第一场需要输入四位玩家名次（第一名玩家第几名，第二名玩家第几名，第三家玩家第几名，第四家玩家第几名，以上确定第几名不能有重复），点击确定后自动积分统计且进入下一场（下一场需要重新输入每个玩家的名次并且不能有重复，本场次跟上一场次每个玩家的名次一样时需要确认本次跟上一次重复，确认后进入下一场）。比赛次数不限，可以滚动显示，但不能遮挡积分统计。积分计算：第一名积6分，第二名积-1分，第三名积-2分，第四名积-3分。累计积分前边增加积分倍数选项，1倍等于所有积分乘以1，2倍等于所有积分乘以2，3倍等于所有积分乘以3，以此类推，n倍等于所有积分乘以n。每个玩家名称的字体颜色不一样。 第二种模式首先需要输入三位玩家的名称（分两行输入），接着显示三人积分统

好的，我将帮助你编写一个微信小程序页面，用于实现比赛积分统计功能。以下是 `index.wxml`, `index.wxss`, `index.json`, 和 `index.ts` 四个文件的代码。 index.wxml ```html <view class="container"> <view class="mode-selector"> <button bindtap="selectMode" data-mode="4">四人比赛</button> <button bindtap="selectMode" data-mode="3">三人比赛</button> </view> <block wx:if="{{modeSelected}}"> <view class="input-names"> <view>请输入玩家名称：</view> <input v-for="(name, index) in playerNames" :key="index" placeholder="玩家名称" bindinput="onNameInput" data-index="{{index}}"/> </view> <view class="scores-display"> <view>当前积分统计：</view> <view v-for="(player, index) in players" :key="index" :style="'color: ' + colors[index]"> {{player.name}}: {{player.score}} </view> </view> <view class="input-ranks"> <view>请输入本轮名次：</view> <input v-for="(rank, index) in ranks" :key="index" placeholder="第几名" bindinput="onRankInput" data-index="{{index}}"/> <button bindtap="submitRanks">确定</button> </view> <view class="multiplier-selector"> <view>积分倍数选择：</view> <picker mode="selector" range="{{multipliers}}" bindchange="onMultiplierChange"> <view class="picker">{{multipliers[multiplierIndex]}}</view> </picker> </view> </block> </view> ``` index.wxss ```css .container { display: flex; flex-direction: column; align-items: center; padding: 20px; } .mode-selector button { margin: 10px; } .input-names, .scores-display, .input-ranks, .multiplier-selector { margin: 10px 0; text-align: center; } .input-names input, .input-ranks input { width: 200px; height: 40px; margin: 5px; padding: 10px; border-radius: 5px; border: 1px solid #ccc; } .scores-display view { margin: 5px; } .multiplier-selector picker { width: 100px; } ``` index.json ```json { "navigationBarTitleText": "比赛积分统计", "enablePullDownRefresh": false, "backgroundColor": "#FFFFFF", "backgroundTextStyle": "light" } ``` index.ts ```typescript import { Component } from 'miniprogram-component'; @Component({ properties: {}, data: { modeSelected: false, mode: 4, playerNames: [''] as string[], players: [] as any[], ranks: [0, 0, 0, 0], multipliers: ['1倍', '2倍', '3倍', '4倍', '5倍'], multiplierIndex: 0, colors: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'] }, methods: { selectMode(e: any) { this.setData({ mode: parseInt(e.currentTarget.dataset.mode), modeSelected: true }); if (this.data.mode === 4) { this.setData({ playerNames: ['', '', '', ''] }); } else { this.setData({ playerNames: ['', '', ''] }); } }, onNameInput(e: any) { const index = e.currentTarget.dataset.index; const names = this.data.playerNames; names[index] = e.detail.value; this.setData({ playerNames: names }); }, onRankInput(e: any) { const index = e.currentTarget.dataset.index; const ranks = this.data.ranks; ranks[index] = parseInt(e.detail.value); this.setData({ ranks: ranks }); }, submitRanks() { if (!this.checkRanks()) return; const scores = this.calculateScores(this.data.ranks); // 更新积分 for (let i = 0; i < this.data.players.length; i++) { this.data.players[i].score += scores[i] * (this.data.multiplierIndex + 1); } this.setData({ players: this.data.players, ranks: [0, 0, 0, 0] }); }, checkRanks() { const ranks = this.data.ranks; const uniqueRanks = new Set(ranks); if (uniqueRanks.size !== ranks.length) { wx.showToast({ title: '名次不能重复', icon: 'none' }); return false; } return true; }, calculateScores(ranks: number[]) { const scores = []; for (let rank of ranks) { switch (rank) { case 1: scores.push(6); break; case 2: scores.push(-1); break; case 3: scores.push(-2); break; case 4: scores.push(-3); break; default: scores.push(0); } } return scores; }, onMultiplierChange(e: any) { this.setData({ multiplierIndex: e.detail.value }); } }, lifetimes: { attached() { this.setData({ players: this.data.playerNames.map(name => ({ name, score: 0 })) }); } } }) export default Component; ``` 说明 1. index.wxml 文件包含页面的基本结构和按钮事件绑定。 2. index.wxss 文件定义了页面的样式。 3. index.json 文件配置了页面的基本属性。 4. index.ts 文件实现了页面的逻辑和事件处理。 这个示例应该能满足你的需求，你可以根据实际需求进行调整。 [2024-10-02 11:20:04 | AI写代码神器 | 1335点数解答]