超实用！微信小程序实现比赛积分统计，四人、三人模式任你选！

好的，下面我将为你提供一个微信小程序页面的代码，包括 `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：定义了页面逻辑，包括选择模式、输入玩家名字、选择名次、提交轮次等操作。 你可以根据实际需求调整样式和逻辑。希望这些代码对你有所帮助！ ######[AI写代码神器 | 1727点数解答 | 2024-10-02 11:23:41]