uniapp 模拟单选按钮效果

<template>
  <view class="page-bg">
    <view class="main-container">
      <view class="tl-panel">
        <u-search placeholder="请输出疾病名称" v-model="keyword" shape="square" bg-color="#F0F0F0" border-color="#F0F0F0" height="84" action-text="取消" :action-style="actionStyle"></u-search>
      </view>
      <view class="tl-history">
        <checkbox-group class="block" @change="changeCheckbox">
          <view class="tl-section-list" v-for="(item,index) in diseaseList" :key="index">
            <view>
              <image src="https://file.genepre.com/wechat/icon-jiankang22x.png" class="tl-img-120"/>
            </view>
            <view class="tl-w-538">
              <view class="tl-font-32-333-6 mb-20">
                内膜异位症异位症
              </view>
              <view class="tl-font-28-333">内分泌系统</view>
            </view>
            <view>
              <view :class="[item.checked===true?'checkDemo1':'checkDemo']" @click="toChecked(item,itemIndex)"></view>
            </view>
          </view>
        </checkbox-group>




        <view class="m-t-220">
          <fq-empty :emptyImg="emptyImg" :imgStyle="imgStyle" :emptyText="emptyText"/>
        </view>
      </view>

      <view class="tl-footer">
          <view class="tl-btn-686 tl-font-28-fff">确定</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      emptyImg: 'https://file.genepre.com/wechat/nomsg72.png',
      emptyText: '暂无搜索结果',
      keyword: '',
      actionStyle: {
        color: '#333',
        fontSize: '32rpx'
      },
      imgStyle: {
        width: '254rpx',
        height: '230rpx'
      },
      historyList: [], // 本地搜索记录
      contactsList: [], // 搜索的处理结果
      checkedArr:[], //复选框选中的值
      isChecked:false,
      diseaseList:[
        {
          name:'十二导联心电图检查',
          type:'心电图检查',
          disease:[{name:'结直肠癌',level:'high'}],
        },
        {
          name:'腹部MR检查查',
          type:'心电图检查',
          disease:[{name:'胰腺癌',level:'high'}],
        },
        {
          name:'腹部MR检查',
          type:'影像学检查',
          disease:[{name:'高血压',level:'low'}],
        },
        {
          name:'鼻咽MR检查',
          type:'病理学检查',
          disease:[{name:'心脏病',level:'high'},{name:'丙肝',level:'low'},{name:'心脏病',level:'high'},{name:'丙肝',level:'low'},{name:'心脏病',level:'high'},{name:'丙肝',level:'low'}],
        },
        {
          name:'鼻咽MR检查查',
          type:'CT',
          disease:[{name:'糖尿病',level:'low'}],
        },
      ],
      tem:[],
    }
  },
  methods: {


    checkboxGroupChange(e){
      console.log(e)
      if(e.length===this.diseaseList.length){
        this.allchecked = true
      }
      console.log(this.diseaseList)
    },
    toChecked(e,i){
      // this.tem =
      if(this.tem.length>2){
        e.checked = false
        for(let i in this.tem){
          if(this.tem[i].name===e.name){
            this.tem.splice(i,1)
            return
          }
        }
      }else{
        this.tem.push(e)
        e.checked = !e.checked
      }
      console.log(this.tem,this.tem.length)
    },



    confirm() {
      let that = this
      app.search({}, (res) => {
        if (res.code == 0) {
          // 过滤出符合条件的值高亮
          res.data.map((item, index) => {
            if (item.name.includes(that.keyword)) {
              item.name = that.join(item.name, that.keyword)
            }
          })
          that.contactsList = res.data
        } else {
          app.showToast(res.message)
        }
      })
    },

    // 拼接
    join(str, key) {
      var reg = new RegExp(`(${key})`, 'gm')
      var replace = '<span style="color:#2851F3">$1</span>'
      return str.replace(reg, replace)
    }
  }
}
</script>

<style lang="less" scoped>
.page-bg {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background-size: 750rpx auto;
  background-color: #F9F9F9;
}

.main-container {
  width: 694rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.tl-panel{
  margin-top:40rpx;
  margin-bottom: 48rpx;
}
.tl-img-44{
  width: 44rpx;
  height: 44rpx;
}
.tl-tag-192{
  width: 192rpx;
  height: 64rpx;
  line-height: 64rpx;
  background: rgba(255, 255, 255, 0.39);
  border: 2rpx solid #F5F5F5;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  border-radius: 32rpx;
  margin-right: 28rpx;
  margin-bottom: 28rpx;
}
.tl-section-list{
  height: 214rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.tl-section-list:after{
  content: '';
  position: absolute;
  left: 150rpx;
  top: 214rpx;
  bottom: 0px;
  right: 32rpx;
  height: 2rpx;
  width: 538rpx;
  background-color: #D6D6D6;
}

.m-t-220{
  margin-top: 220rpx;
}
.tl-img-120{
  width: 120rpx;
  height: 120rpx;
}
.tl-w-538{
  width: 538rpx;
  margin: 46rpx 0 48rpx 28rpx;
}
.mb-20{
  margin-bottom: 20rpx;
}

.tl-footer{
  width: 750rpx;
  height: 162rpx;
  background: #FFFFFF;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  .tl-btn-686{
    width: 686rpx;
    height: 84rpx;
    line-height: 84rpx;
    background: #002FA7;
    border-radius: 42rpx;
    margin-top: 24rpx;
  }
}


/deep/ checkbox .wx-checkbox-input {
  border-radius: 50% !important;
  color: #ffffff !important;
}

/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  color: #fff;
  background: #2851F3;
}

/deep/.wx-checkbox-input.wx-checkbox-input-checked {
  border: none !important;
}
.checkDemo{
  width: 36rpx;
  height: 36rpx;
  border-radius: 50% !important;
  background-color: #ffffff;
  color: #ffffff !important;
  border: #999999 1px solid;
  position: relative;
}
.checkDemo1{
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background-color: #2851F3;
  color: #2851F3;
  position: relative;
}
.checkDemo1:after{
  content: '';
  width: 10rpx;
  height: 24rpx;
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
</style>