129 lines
3.0 KiB
JavaScript
129 lines
3.0 KiB
JavaScript
import { ref } from 'vue';
|
|
|
|
// Utils
|
|
import { createNamespace } from '../utils';
|
|
import { isAndroid } from '../utils/validate/system';
|
|
|
|
// Components
|
|
import Cell from '../cell';
|
|
import Field from '../field';
|
|
|
|
const [createComponent, bem, t] = createNamespace('address-edit-detail');
|
|
const android = isAndroid();
|
|
|
|
export default createComponent({
|
|
props: {
|
|
show: Boolean,
|
|
value: String,
|
|
errorMessage: String,
|
|
focused: Boolean,
|
|
detailRows: [Number, String],
|
|
searchResult: Array,
|
|
detailMaxlength: [Number, String],
|
|
showSearchResult: Boolean,
|
|
},
|
|
|
|
emits: ['blur', 'focus', 'input', 'select-search'],
|
|
|
|
setup(props, { emit }) {
|
|
const field = ref();
|
|
|
|
const showSearchResult = () =>
|
|
props.focused && props.searchResult && props.showSearchResult;
|
|
|
|
const onSelect = (express) => {
|
|
emit('select-search', express);
|
|
emit('input', `${express.address || ''} ${express.name || ''}`.trim());
|
|
};
|
|
|
|
const onFinish = () => {
|
|
field.value.blur();
|
|
};
|
|
|
|
const renderFinish = () => {
|
|
if (props.value && props.focused && android) {
|
|
return (
|
|
<div class={bem('finish')} onClick={onFinish}>
|
|
{t('complete')}
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
const renderSearchTitle = (express) => {
|
|
if (express.name) {
|
|
const text = express.name.replace(
|
|
props.value,
|
|
`<span class=${bem('keyword')}>${props.value}</span>`
|
|
);
|
|
|
|
return <div innerHTML={text} />;
|
|
}
|
|
};
|
|
|
|
const renderSearchResult = () => {
|
|
if (!showSearchResult()) {
|
|
return;
|
|
}
|
|
|
|
const { searchResult } = props;
|
|
return searchResult.map((express) => (
|
|
<Cell
|
|
v-slots={{
|
|
title: () => renderSearchTitle(express),
|
|
}}
|
|
clickable
|
|
key={express.name + express.address}
|
|
icon="location-o"
|
|
label={express.address}
|
|
class={bem('search-item')}
|
|
border={false}
|
|
onClick={() => {
|
|
onSelect(express);
|
|
}}
|
|
/>
|
|
));
|
|
};
|
|
|
|
const onFocus = (event) => {
|
|
emit('focus', event);
|
|
};
|
|
|
|
const onBlur = (event) => {
|
|
emit('blur', event);
|
|
};
|
|
|
|
const onInput = (value) => {
|
|
emit('input', value);
|
|
};
|
|
|
|
return () => {
|
|
if (props.show) {
|
|
return (
|
|
<>
|
|
<Field
|
|
v-slots={{ icon: renderFinish }}
|
|
autosize
|
|
ref={field}
|
|
class={bem()}
|
|
rows={props.detailRows}
|
|
type="textarea"
|
|
label={t('label')}
|
|
border={!showSearchResult()}
|
|
clearable={!android}
|
|
maxlength={props.detailMaxlength}
|
|
modelValue={props.value}
|
|
placeholder={t('placeholder')}
|
|
errorMessage={props.errorMessage}
|
|
onBlur={onBlur}
|
|
onFocus={onFocus}
|
|
{...{ 'onUpdate:modelValue': onInput }}
|
|
/>
|
|
{renderSearchResult()}
|
|
</>
|
|
);
|
|
}
|
|
};
|
|
},
|
|
});
|