uniapp利用image实现单选效果

<template>
  <view class="check_device_page">
    <view class="block">
      <view>设备</view>
      <view>A1出渣链板 </view>
    </view>
    <uni-forms :modelValue="formData" ref="form" :rules="formRules">
      <uni-forms-item required name="status">
        <view class="block">
          <view>检查项目</view>
          <view>
            <view>*1、检查各个液位以及是否有渗漏情况（燃油、发动机机油、冷却液、变速箱油</view>
            <view
              @click="handerChange(item, 'status')"
              class="radio_item"
              v-for="item of statusRadiolist"
              :key="item.id"
            >
              <image
                class="checked_icon"
                :src="formData.status === item.value ? '/static/radio_checked.png' : '/static/radio_unchecked.png'"
              ></image>
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item required name="abnormalSound">
        <view>*检查各个部件是否有异音</view>
        <view>
          <view
            @click="handerChange(item, 'sound')"
            class="radio_item"
            v-for="item of abnormalSoundRadioList"
            :key="item.id"
          >
            <image
              class="checked_icon"
              :src="formData.abnormalSound == item.value ? '/static/radio_checked.png' : '/static/radio_unchecked.png'"
            ></image>
            <text>{{ item.label }}</text>
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item>
        <pictureList></pictureList>
      </uni-forms-item>
      <uni-forms-item required name="warnLevel">
        <view>报警等级</view>
        <view
          class="item"
          @click="handerChange(item, 'warningLevel')"
          v-for="(item, index) in warnLevelRadios"
          :key="item.value"
        >
          <image
            class="checked_icon"
            :src="formData.warnLevel == item.value ? '/static/radio_checked.png' : '/static/radio_unchecked.png'"
          ></image>
          <text>{{ item.label }}</text>
        </view>
      </uni-forms-item>
      <uni-forms-item required name="manager">
        <view class="row_item">
          <view class="row_item_label">指派给</view>
          <view class="row_item_info">
            <text class="" v-if="formData.manager == ''">请选择负责人</text>
            <text v-else class="">{{ formData.manager }}</text>
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item required name="desc">
        <view class="">
          <view class="row_item_label">问题描述</view>
          <view class="row_textrarea">
            <uni-easyinput type="textarea" placeholder="请详细描述问题" v-model="formData.desc"></uni-easyinput>
          </view>
        </view>
      </uni-forms-item>
    </uni-forms>
    <view>
      <image
        class="checked_icon"
        @click="handerChange($event, 'isNext')"
        :src="isNext == 0 ? '/static/checkbox_unchecked.png' : '/static/checkbox_checked.png'"
      ></image>
      继续扫码检查下一个</view
    >
  </view>
  <view>
    <button size="mini">保存草稿</button>
    <button size="mini" @click="confirm">确认</button>
  </view>
</template>
<script setup lang="ts">
import pictureList from '../../components/pictureList.vue'

const formData = ref({
  status: '',
  abnormalSound: '',
  warnLevel: '',
  manager: '',
  desc: ''
})
const isNext = ref(0)
const form = ref(null)
const statusRadiolist = ref([
  { id: '001', label: '异常', value: 1 },
  { id: '002', label: '正常', value: 2 }
])
const abnormalSoundRadioList = ref([
  { id: '003', label: '异常', value: 1 },
  { id: '004', label: '正常', value: 2 }
])
const warnLevelRadios = ref([
  { id: '005', label: '注意', value: 1 },
  { id: '006', label: '重点', value: 2 },
  { id: '007', label: '紧急', value: 3 }
])

const formRules = {
  status: {
    rules: [{ required: true, errorMessage: '不能为空' }]
  },
  abnormalSound: {
    rules: [{ required: true, errorMessage: '不能为空' }]
  },
  warnLevel: {
    rules: [{ required: true, errorMessage: '报警等级不能为空' }]
  },
  desc: {
    rules: [{ required: true, errorMessage: '问题描述不能为空' }]
  }
}
const handerChange = (data, type) => {
  // data.checked = !data.checked

  console.log('data', data)
  switch (type) {
    case 'status':
      formData.value.status = data.value
      console.log('formData.value', formData.value)
      break
    case 'sound':
      formData.value.abnormalSound = data.value
      break
    case 'warningLevel':
      formData.value.warnLevel = data.value
      break
    case 'isNext':
      isNext.value = !isNext.value
      break
    default:
  }
}

const confirm = () => {
  form.value.validate((valid) => {
    if (valid) {
      console.log('表单提交成功')
      // 在这里进行表单提交的逻辑
    } else {
      console.log('表单验证失败')
    }
  })
}
</script>
<style scoped lang="scss">
.check_device_page {
  padding: 24rpx;
}
.row_item {
  display: flex;
  font-size: 24rpx;
  padding-top: 16rpx;
}
.row_item_label,
.row_item_info {
  flex: 1;
}
.row_item_label {
  color: #9194a3;
}
.row_item_info {
  text-align: right;
}
.row_item_info_revice {
  color: #694feb;
}
.checked_icon {
  width: 36rpx;
  height: 36rpx;
  vertical-align: bottom;
}
.radio_label {
  display: inline-block;
  margin-right: 40rpx;
}
</style>