Detail.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import { use, isAndroid } from '../utils';
  2. import Cell from '../cell';
  3. import Field from '../field';
  4. const [sfc, bem, t] = use('address-edit-detail');
  5. const android = isAndroid();
  6. export default sfc({
  7. props: {
  8. value: String,
  9. error: Boolean,
  10. focused: Boolean,
  11. detailRows: Number,
  12. searchResult: Array,
  13. showSearchResult: Boolean
  14. },
  15. methods: {
  16. onSelect(express) {
  17. this.$emit('select-search', express);
  18. this.$emit(
  19. 'input',
  20. `${express.address || ''} ${express.name || ''}`.trim()
  21. );
  22. },
  23. onFinish() {
  24. this.$refs.field.blur();
  25. },
  26. renderFinish() {
  27. const show = this.value && this.focused && android;
  28. if (show) {
  29. return (
  30. <div class={bem('finish')} onClick={this.onFinish}>
  31. {t('complete')}
  32. </div>
  33. );
  34. }
  35. },
  36. renderSearchResult() {
  37. const { searchResult } = this;
  38. const show = this.focused && searchResult && this.showSearchResult;
  39. if (show) {
  40. return searchResult.map(express => (
  41. <Cell
  42. key={express.name + express.address}
  43. title={express.name}
  44. label={express.address}
  45. icon="location-o"
  46. clickable
  47. onClick={() => {
  48. this.onSelect(express);
  49. }}
  50. />
  51. ));
  52. }
  53. }
  54. },
  55. render(h) {
  56. return (
  57. <Cell class={bem()}>
  58. <Field
  59. autosize
  60. ref="field"
  61. rows={this.detailRows}
  62. clearable={!android}
  63. type="textarea"
  64. maxlength="200"
  65. value={this.value}
  66. error={this.error}
  67. label={t('label')}
  68. placeholder={t('placeholder')}
  69. scopedSlots={{ icon: this.renderFinish }}
  70. {...{ on: this.$listeners }}
  71. />
  72. {this.renderSearchResult()}
  73. </Cell>
  74. );
  75. }
  76. });