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

好的，下面我将为你提供一个微信小程序页面的代码，包括 `index.wxml`, `index.wxss`, `index.json`, 和 `index.ts` 四个文件的内容。 index.wxml ```xml <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="{{selectedMode === '4'}}"> <view class="input-group"> <text>玩家1：</text> <input placeholder-style="color:#aaa;" placeholder="请输入玩家1的名字" value="{{players[0]}}" bindinput="inputPlayerName(0)" /> </view> <view class="input-group"> <text>玩家2：</text> <input placeholder-style="color:#aaa;" placeholder="请输入玩家2的名字" value="{{players[1]}}" bindinput="inputPlayerName(1)" /> </view> <view class="input-group"> <text>玩家3：</text> <input placeholder-style="color:#aaa;" placeholder="请输入玩家3的名字" value="{{players[2]}}" bindinput="inputPlayerName(2)" /> </view> <view class="input-group"> <text>玩家4：</text> <input placeholder-style="color:#aaa;" placeholder="请输入玩家4的名字" value="{{players[3]}}" bindinput="inputPlayerName(3)" /> </view> </block> <block wx:if="{{selectedMode === '3'}}"> <view class="input-group"> <text>玩家1：</text> <input placeholder-style="color:#aaa;" placeholder="请输入玩家1的名字" value="{{players[0]}}" bindinput="inputPlayerName(0)" /> </view> <view class="input-group"> <text>玩家2：</text> <input placeholder-style="color:#aaa;" placeholder="请输入玩家2的名字" value="{{players[1]}}" bindinput="inputPlayerName(1)" /> </view> <view class="input-group"> <text>玩家3：</text> <input placeholder-style="color:#aaa;" placeholder="请输入玩家3的名字" value="{{players[2]}}" bindinput="inputPlayerName(2)" /> </view> </block> <view class="round-input"> <view wx:for="{{rounds}}" wx:key="index" class="round"> <view class="input-group"> <text>第{{index + 1}}轮：</text> <picker mode="selector" range="{{players}}" bindchange="chooseRank(index)"> <view class="picker">{{rankSelected[index] ? rankSelected[index] : '请选择名次'}}</view> </picker> </view> <button bindtap="submitRound">确定</button> </view> </view> <view class="score-board"> <view class="player-score" wx:for="{{players}}" wx:key="player"> <text>{{item.name}}</text> <text>{{item.score}}</text> </view> </view> <view class="multiplier-selector"> <picker mode="selector" range="{{multipliers}}" bindchange="chooseMultiplier"> <view class="picker">{{currentMultiplier}}</view> </picker> </view> </view> ``` index.wxss ```css .container { display: flex; flex-direction: column; align-items: center; padding: 20px; } .mode-selector button { margin: 10px; } .input-group { display: flex; margin: 10px 0; align-items: center; } .input-group text { width: 100px; } .round-input .round { margin-bottom: 20px; } .score-board .player-score { display: flex; justify-content: space-between; margin: 10px 0; } .multiplier-selector picker { margin-top: 20px; } ``` index.json ```json { "navigationBarTitleText": "比赛积分统计", "usingComponents": {} } ``` index.ts ```typescript Component({ properties: {}, data: { selectedMode: null, players: ['', '', ''], rounds: [], rankSelected: [], multipliers: ['1倍', '2倍', '3倍', '4倍', '5倍'], currentMultiplier: '1倍', scores: [ { name: '', score: 0 }, { name: '', score: 0 }, { name: '', score: 0 }, { name: '', score: 0 } ] }, methods: { selectMode(e) { const mode = e.currentTarget.dataset.mode; this.setData({ selectedMode: mode }); if (mode === '4') { this.setData({ players: ['', '', '', ''] }); } else if (mode === '3') { this.setData({ players: ['', '', ''] }); } }, inputPlayerName(index, e) { const { value } = e.detail; let players = this.data.players.slice(); players[index] = value; this.setData({ players }); // Update scores array with names const scores = this.data.scores.slice(0, players.length); for (let i = 0; i < players.length; i++) { scores[i].name = players[i]; } this.setData({ scores }); }, chooseRank(index, e) { const { value } = e.detail; let rankSelected = this.data.rankSelected.slice(); rankSelected[index] = this.data.players[value]; this.setData({ rankSelected }); // Update scores based on rank const ranks = this.data.rounds.map(round => round.rank); const newRank = value + 1; if (ranks.includes(newRank)) { wx.showModal({ title: '提示', content: '本轮次与上一轮次名次重复，请确认', confirmText: '确认', cancelText: '取消', success: res => { if (res.confirm) { this.updateScores(newRank, index); } } }); } else { this.updateScores(newRank, index); } }, updateScores(rank, roundIndex) { const scores = this.data.scores; const multiplier = parseInt(this.data.currentMultiplier.replace('倍', '')); scores.forEach((player, i) => { if (this.data.rankSelected[roundIndex] === player.name) { switch (rank) { case 1: player.score += 6 * multiplier; break; case 2: player.score -= 1 * multiplier; break; case 3: player.score -= 2 * multiplier; break; case 4: player.score -= 3 * multiplier; break; } } }); this.setData({ scores }); }, submitRound() { const { players, rounds, rankSelected } = this.data; const newRound = { rank: rankSelected }; this.setData({ rounds: [...rounds, newRound], rankSelected: [] }); }, chooseMultiplier(e) { const { value } = e.detail; this.setData({ currentMultiplier: value }); } } }); ``` 说明 1. index.wxml：定义了页面结构，包括模式选择、玩家输入、轮次输入和积分显示。 2. index.wxss：定义了页面样式。 3. index.json：定义了页面配置信息。 4. index.ts：定义了页面逻辑，包括选择模式、输入玩家名字、选择名次、提交轮次等操作。 你可以根据实际需求调整样式和逻辑。希望这些代码对你有所帮助！ [2024-10-02 11:23:41 | AI写代码神器 | 1727点数解答]