com.kasite.client.uniapp.patient/pagesPatient/st1/business/outpatient/outpatientRefundNew/components/form/regionPicker/index.vue

<template>
  <view class="form_item">
    <view class="form_item_key font-bold" :class="{ 'require': required }">{{ label }}</view>
    <view class="form_item_val">
      <picker 
        mode="region"
        :disabled="readOnly"
        :value="value"
        :level="level"
        @change="onRegionPickerChange"
      >
        <input 
          type="text" 
          :disabled="true"
          :placeholder="placeholder"
          :value="value"
        />
      </picker>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  readOnly: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: ''
  },
  required: {
    type: Boolean,
    default: false
  },
  level: {
    type: String,
    default: "region"
  },
  value: {
    type: Array,
    default: () => []
  },
});

const emit = defineEmits(['regionPickerChange', 'update:value']);

const onRegionPickerChange = (e: any) => {
  const { detail } = e;
  const { code, postcode, value } = detail;
  
  emit('regionPickerChange', { 
    code, 
    postcode, 
    value,  
  });
  emit('update:value', value);
};
</script>

<style>
/* 表单 start */
.form_item {
  position: relative;
  width: inherit;
  padding: 0 10upx;
  font-size: 30upx;
  min-height: 120upx;
  display: flex;
  align-items: center;
}

.form_item .form_item_key {
  padding-left: 20upx;
  position: relative;
  width: 220upx;
}

.form_item .form_item_val {
  flex: 1 0 0;
  text-align: right;
  height: inherit;
  padding: 0 20upx;
}

.form_item .form_item_val .input {
  min-height: 100%;
  width: 100%;
  line-height: 50upx;
}

.img_captcha {
  width: 160upx;
  height: inherit;
  background-color: var(--dominantColor);
  color: #fff;
  font-weight: bold;
  font-size: 38upx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.require::after {
  content: '*';
  position: absolute;
  color: #FF1D1F;
  top: 10%;
  left: 0;
}
/* 表单 end */

.font-bold {
  font-weight: bold;
}
</style>