update: package-lock.json

Tomas

2024-04-30 b4d6944076f1df6eedaae35c4c2a7072fe988e8a

 PAMapp/components/AddressPicker.vue

@@ -1,43 +1,63 @@
<template>
    <div class="text--center">
        <div class="subTitle mb-10">所在地區</div>
        <el-input
            type="text"
            class="p mt-10"
            v-model="keyWord"
            @change="searchDistrict"
            placeholder="請輸入關鍵字"
        ></el-input>
       <Ui-ScrollPicker
            :options="filterOptions"
            :initValue="district"
            @change="change"
        ></Ui-ScrollPicker>
      <div class="subTitle mb-10">服務地區</div>
      <el-input
          type="text"
          class="p mt-10 cursor--pointer input-radius"
          tabindex="-1"
          v-model="keyWord"
          @input="searchDistrict"
          placeholder="請輸入關鍵字"
      ></el-input>
      <Ui-ScrollPicker
          :options="filterOptions"
          :initValue="district"
          @change="selectDistrict"
      ></Ui-ScrollPicker>
      <div class="text--center mt-10">
          <el-button type="primary" @click="confirm">確認</el-button>
      </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
import { Vue, Component, Emit } from 'nuxt-property-decorator';

import { taiwanCities } from '~/shared/const/taiwan-cities';

@Component
export default class AddressPicker extends Vue {

    options = ['基隆市', '台北市', '新北市', '桃園縣', '新竹市', '新竹縣', '苗栗縣', '台中市', '彰化縣', '南投縣', '雲林縣', '嘉義市', '嘉義縣', '台南市', '高雄市', '屏東縣', '台東縣', '花蓮縣', '宜蘭縣', '澎湖縣', '金門縣', '連江縣'];
    keyWord = '';
    options      : string[] = taiwanCities;
    keyWord      : string   = '';
    filterOptions: string[] = [];
    district = '台北市';
    district     : string   = '台北市';

    //////////////////////////////////////////////////////////////////////

    mounted() {
        this.filterOptions = JSON.parse(JSON.stringify(this.options));
    }

    //////////////////////////////////////////////////////////////////////

    @Emit('confirm')
    confirm(): string {
        return this.district;
    }

    //////////////////////////////////////////////////////////////////////

    searchDistrict() {
        this.filterOptions = this.options.filter(e => e.match(this.keyWord));
    }

    change(value: string) {
        console.log('change', value)
    selectDistrict(value: string): void {
        this.district = value;
    }



}
</script>

@@ -45,4 +65,4 @@
    .cus-input {
        font-size: 20px;
    }
</style>
</style>