vue+uniapp

Question

问题遇到的现象和发生背景

用代码块功能插入代码

    <view class="addhands">
      <view class="title">
        添加手牌
      </view>
      <view class="cardArea">
        <view class="card1" :class="{activeCard:group==addhands.length+2}" @click="cardChange" >
          <view class="flower">
            {{addhands[group-2].flower || " "}}
          </view>
          <view class="number">
            {{addhands[group-2].number || " "}}
          </view>
        </view>
        <view class="card2" :class="{activeCard:group==addhands.length+1}">
          <view class="flower">
            {{addhands[group-1].flower || " "}}
          </view>
          <view class="number">
            {{addhands[group-1].number || " "}}
          </view>
        </view>
      </view>

    </view>

我想要达到的结果

目前能通过:class="{activeCard:group==addhands.length+2}实现当前需添加的手牌有边框高亮。需要增加的功能：
点击后

Answer 1

大概下面这样吧，存在的就允许选，要控制下面按钮dom样式题主自己增加了，

<template>
  <view>
    <view class="addhands">
      <view class="title">
        添加手牌
      </view>
      <view class="cardArea">
        <view :class="{card:1,selected:index==currentIndex}" v-for="(item,index) in hands" @click="choosePoker(index)">
          <view class="flower">
            {{item.flower}}
          </view>
          <view class="number">
            {{item.number}}
          </view>
        </view>
        <view :class="{card:1,selected:hands.length==currentIndex}" @click="choosePoker()">
          <view class="flower">
            {{selectedFlower}}
          </view>
          <view class="number">
            {{selectedNumber}}
          </view>
        </view>
      </view>
 
    </view>
    
    <view class="cardSelect">
      <view class="flowerArea">
        <button v-for="(item,i) in flower" :key='i' @click="flowerSelected(i)" :class="{buttonSelect:i==flowerStatus}">{{item}} </button>  
      </view>
      <view class="numberArea">
        <button v-for="(item,i) in number" :key='i' @click="numberSelected(i)" :class="{buttonSelect:i==numberStatus}">{{item}}</button>  
        <button>c</button>
      </view>
    </view>
  </view>
  
 
</template>
 
<script>
  export default {
    data() {
      return {
        number: ["A", "K", "Q", "J", '10', '9', '8', '7', '6', '5', '4', '3', '2'],
        flower: ["♦️", "♣️", "♥️", "♠️"],
        hands: [],
        currentIndex:0,
        selectedFlower:'',
        selectedNumber:'',
        flowerStatus:-1,
        numberStatus:-1,
        isNew:true
      };
    },
    onLoad() {
      
    },
    methods: {
        canChoose(value,isFlower){//检查当前选中的花色或者牌面是否已存在
        
            let curFlower=isFlower?value:'',curNumber=isFlower?'':value;
            let refValue;
            if(this.isNew){
                refValue=this[isFlower?'selectedNumber':'selectedFlower'];
            }
            else{
                refValue=this.hands[this.currentIndex][isFlower?'number':'flower'];
            }
                    
            if(isFlower)curNumber=refValue;
            else curFlower=refValue;
            console.log(curFlower,curNumber,refValue)
            return this.hands.findIndex(i=>i.number==curNumber&&i.flower==curFlower)==-1;
        },
      choosePoker(index){
          this.isNew=index===undefined;
          if(index===undefined){
              this.currentIndex=this.hands.length;
          }
          else{
              this.currentIndex=index;
          }
          this.selectedFlower=this.selectedNumber=''
          this.flowerStatus=this.numberStatus=-1;
      },
      //选择花色
      flowerSelected(i){
          if(!this.canChoose(this.flower[i],true))return;
          
        this.flowerStatus = i
        
        if(this.isNew){
            this.selectedFlower= this.flower[i]
            this.addPoker();
        }
        else this.hands[this.currentIndex].flower= this.flower[i]
      },
      numberSelected(i){
        if(!this.canChoose(this.number[i]))return;
        this.numberStatus = i
        if(this.isNew){
            this.selectedNumber = this.number[i];
            this.addPoker();
        }
        else this.hands[this.currentIndex].number= this.number[i]
      },
      addPoker(){
          if(this.selectedFlower==''||this.selectedNumber=='')return;
          this.hands.unshift({flower:this.selectedFlower,number:this.selectedNumber});
          //状态重置
          this.selectedFlower=this.selectedNumber=''
          this.flowerStatus=this.numberStatus=-1;
          this.currentIndex=this.hands.length;//自动选最后一张
          this.isNew=true;
      }
    },
    
  }
</script>
<style>
    .addhands{background:#333;border-radius: 5px;color:#fff;padding:10px;margin-bottom: 20px;}
    .cardArea{display: flex;flex-wrap: wrap;}
    .cardArea .card{background: #e6e6e6;padding:5px;color:#000;text-align:center;margin:5px 5px 0 0;width:50px;box-sizing: border-box;}
    .cardArea .card.selected{border:solid 2px deeppink!important}
    .flower,.number{line-height:25px;height:25px}
    
    
    .cardSelect{display: flex;}
    .flowerArea,.numberArea{display: flex;flex-wrap: wrap;}
    .flowerArea button{width:50%}
    .numberArea button{width:14.28%;font-size: 12px;}
    .numberArea button,.numberArea button{display: flex;align-items: center;justify-content: center;box-sizing: border-box;}
    .buttonSelect{background-color: #f00;color: #fff;}
    .disabled{background: #999;cursor:not-allowed}
</style>