微信小程序——加减分及显示和界面美化

wxml:

<view class="team"><!--队伍名显示-->
  <button class="edit_A" bindtap="open_close_modal_A">
    <text class="group_A">{{group_name_A}}</text>
  </button>

  <button class="edit_B" bindtap="open_close_modal_B">
    <text class="group_B">{{group_name_B}}</text>
  </button>
</view>

<modal hidden="{{hidden_modal_input_A}}" title="队伍A名称" 
   	confirm-text="确定" cancel-text="取消" bindcancel="cancel_name_A" 
  	bindconfirm="open_close_modal_A">
     <input placeholder="请输入队伍名" bindinput="group_name_A"/>
</modal><!--打开编辑窗口修改A队伍名-->

<modal hidden="{{hidden_modal_input_B}}" title="队伍B名称" 
   	confirm-text="确定" cancel-text="取消" bindcancel="cancel_name_B" 
  	bindconfirm="open_close_modal_B">
     <input placeholder="请输入队伍名" bindinput="group_name_B"/>
</modal><!--打开编辑窗口修改B队伍名-->

<view class="score_deal">
  <view><!--加减分数键-->
    <button class="score_deal_btn" bindtap="add_A" size="large">
      <text class="add_detail">+1</text>
    </button>

    <button class="score_deal_btn" bindtap="minus_A">
      <text class="minus_detail">-1</text>
    </button>
  </view>

  <view class="score"><!--比分数字牌-->
    <text>{{score_A}}</text>
      <text decode="true">:</text>
    <text>{{score_B}}</text>
  </view>

  <view>
    <button class="score_deal_btn" bindtap="add_B">
      <text class="add_detail">+1</text>
    </button>

    <button class="score_deal_btn" bindtap="minus_B">
      <text class="minus_detail">-1</text>
    </button>
  </view>
</view>

wxss:

<view class="team"><!--队伍名显示-->
  <button class="edit_A" bindtap="open_close_modal_A">
    <text class="group_A">{{group_name_A}}</text>
  </button>

  <button class="edit_B" bindtap="open_close_modal_B">
    <text class="group_B">{{group_name_B}}</text>
  </button>
</view>

<modal hidden="{{hidden_modal_input_A}}" title="队伍A名称" 
   	confirm-text="确定" cancel-text="取消" bindcancel="cancel_name_A" 
  	bindconfirm="open_close_modal_A">
     <input placeholder="请输入队伍名" bindinput="group_name_A"/>
</modal><!--打开编辑窗口修改A队伍名-->

<modal hidden="{{hidden_modal_input_B}}" title="队伍B名称" 
   	confirm-text="确定" cancel-text="取消" bindcancel="cancel_name_B" 
  	bindconfirm="open_close_modal_B">
     <input placeholder="请输入队伍名" bindinput="group_name_B"/>
</modal><!--打开编辑窗口修改B队伍名-->

<view class="score_deal">
  <view><!--加减分数键-->
    <button class="score_deal_btn" bindtap="add_A" size="large">
      <text class="add_detail">+1</text>
    </button>

    <button class="score_deal_btn" bindtap="minus_A">
      <text class="minus_detail">-1</text>
    </button>
  </view>

  <view class="score"><!--比分数字牌-->
    <text>{{score_A}}</text>
      <text decode="true">:</text>
    <text>{{score_B}}</text>
  </view>

  <view>
    <button class="score_deal_btn" bindtap="add_B">
      <text class="add_detail">+1</text>
    </button>

    <button class="score_deal_btn" bindtap="minus_B">
      <text class="minus_detail">-1</text>
    </button>
  </view>
</view>

Page({
  data: {
  group_name_A:"Team A",
  group_name_B:"Team B",
  hidden_modal_input_A: true,
  hidden_modal_input_B: true,
  score_A:0,
  score_B:0
  },
  open_close_modal_A: function () {//打开或关闭modal
    this.setData({
      hidden_modal_input_A: !this.data.hidden_modal_input_A
    })
  },

  open_close_modal_B: function () {//打开或关闭modal
    this.setData({
      hidden_modal_input_B: !this.data.hidden_modal_input_B
    })
  },

  cancel_name_A:function(){//将队伍名重置并关闭modal
    this.setData({
      group_name_A:"Team A",
      hidden_modal_input_A: !this.data.hidden_modal_input_A
    })
  },

  cancel_name_B:function(){//将队伍名重置并关闭modal
    this.setData({
      group_name_B:"Team B",
      hidden_modal_input_B: !this.data.hidden_modal_input_B
    })
  },

  group_name_A:function(res){//将输入的队伍名赋给显示文本
    this.setData({
      group_name_A: res.detail.value
    })
  },
  
  group_name_B:function(res){//将输入的队伍名赋给显示文本
    this.setData({
      group_name_B: res.detail.value
    })
  },

  add_A:function(){//A得分+1
    this.setData({
      score_A: this.data.score_A + 1
    })
  },

  minus_A:function(){//A减分-1
    this.setData({
      score_A: this.data.score_A - 1
    })
  },

  add_B:function(){//B得分+1
    this.setData({
      score_B: this.data.score_B + 1
    })
  },

  minus_B:function(){//B减分-1
    this.setData({
      score_B: this.data.score_B - 1
    })
  },

2021年8月3日
实现加减分数逻辑，美化界面，按键和分数显示