91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<template>
|
|
<view class="form-row">
|
|
<view class="form-row__label" :class="required ? 'form-cell--required' : ''">{{ name }}</view>
|
|
<view class="form-row__content content">
|
|
<input
|
|
:disabled="disableChange"
|
|
:value="value"
|
|
class="input"
|
|
type="number"
|
|
:maxlength="11"
|
|
:placeholder="placeholder"
|
|
placeholder-class="form__placeholder"
|
|
@input="onInput"
|
|
/>
|
|
<picker mode="selector" :disabled="disableChange" :range="relationRange" @change="onPick">
|
|
<view class="relation" :class="noteValue ? '' : 'form__placeholder'">
|
|
{{ noteValue || '请选择' }}
|
|
<uni-icons class="arrow" type="arrowdown" size="16" color="#999" />
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const emits = defineEmits(['change']);
|
|
const props = defineProps({
|
|
form: { type: Object, default: () => ({}) },
|
|
name: { default: '' },
|
|
required: { type: Boolean, default: false },
|
|
title: { default: '' },
|
|
disableChange: { type: Boolean, default: false },
|
|
});
|
|
|
|
const placeholder = computed(() => `请输入${props.name || ''}`);
|
|
|
|
const relationRange = ['本人', '父亲', '母亲', '配偶', '子女', '其他'];
|
|
const noteTitle = computed(() => `${props.title || ''}Note`);
|
|
const value = computed(() => {
|
|
const v = props.form?.[props.title];
|
|
return v === undefined || v === null ? '' : String(v);
|
|
});
|
|
const noteValue = computed(() => {
|
|
const v = props.form?.[noteTitle.value];
|
|
return v === undefined || v === null ? '' : String(v);
|
|
});
|
|
|
|
function onInput(e) {
|
|
emits('change', { title: props.title, value: String(e?.detail?.value || '') });
|
|
}
|
|
|
|
function onPick(e) {
|
|
const idx = Number(e?.detail?.value || 0);
|
|
emits('change', { title: noteTitle.value, value: relationRange[idx] || '' });
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../cell-style.css';
|
|
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.relation {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8rpx;
|
|
min-width: 180rpx;
|
|
border-left: 1px solid #eee;
|
|
padding-left: 16rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.arrow {
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|