pay-customer/src/components/hs-radio/hs-radio.vue

<template>
  <view class="radio_body" :style="props?.radioStyle">
    <view
      v-for="(i, index) in getEnums()"
      :key="`item_${index}`"
      :class="`item item_${props?.size} ${props?.disableds?.includes(i?.value) ? 'disabled' : ''}`"
      :style="i?.value === props?.valueModel || i?.value === selectValue ? getStyleInfo() : ''"
      @click="onClick(i)"
    >
      {{ i?.text }}
    </view>
  </view>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { getStyleBgInfo } from '@/common/libraries/getPageConfig'
interface EnumItem {
  text?: string
  value?: string
}
const props = defineProps([
  'valueModel',
  'Enums',
  'size',
  'radioStyle',
  'selectStyle',
  'disableds' // 不可选数组 6-7 kfyy ，7.40 cook，
])
const selectValue = ref('')
const getStyleInfo = () => {
  return {
    ...props.selectStyle,
    ...getStyleBgInfo()
  }
}
const getEnums = (): any => {
  let list: EnumItem[] = Object.entries(props?.Enums as Record<string, EnumItem>).map(
    ([_key, value]) => ({
      text: value.text,
      value: value.value
    })
  )
  return list
}

watch(
  () => props?.valueModel,
  () => {
    console.log('mounted2', props?.valueModel)
    selectValue.value = props?.valueModel
  }
)

const emit = defineEmits(['update:valueModel', 'onChange'])
const onClick = (e: { value: string }) => {
  if (props?.disableds?.includes(e?.value)) {
    return false
  }
  selectValue.value = e?.value
  emit('update:valueModel', e?.value)
  emit('onChange', e)
}

onMounted(() => {
  console.log('mounted1', props?.valueModel)
  if (props?.valueModel) {
    selectValue.value = props?.valueModel
  }
})
</script>
<style lang="scss" scoped>
.radio_body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .item {
    padding: 0 27rpx;
    font-size: 26rpx;
    height: 60rpx;
    line-height: 60rpx;
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f3f4;
    border-radius: 6rpx;
    margin-right: 15rpx;
    &:last-child {
      margin: 0;
    }
  }
  .active {
    color: #fff;
    background-color: #2a7efb;
  }
  .disabled {
    opacity: 0.7;
  }
}
</style>