upd(address & elevator): remove pinyin dependence

package.json

@@ -63,7 +63,6 @@
     }
   },
   "dependencies": {
-    "pinyin": "^2.10.2",
     "sass": "^1.34.0",
     "vue-router": "^4.0.11"
   },
@@ -73,7 +72,6 @@
     "@tarojs/taro": "^3.3.0-alpha.8",
     "@types/jest": "^26.0.22",
     "@types/node": "^14.14.31",
-    "@types/pinyin": "^2.8.3",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "@vitejs/plugin-legacy": "^1.4.0",

src/packages/__VUE/address/demo.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="demo">
     <h2>选择自定义地址</h2>
-    <nut-cell
-      title="选择地址"
-      :desc="one"
-      is-link
-      @click="showAddress"
-    ></nut-cell>
+    <nut-cell title="选择地址" :desc="one" is-link @click="showAddress"></nut-cell>
 
     <nut-address
       v-model:visible="normal"
@@ -20,12 +15,7 @@
     ></nut-address>
 
     <h2>选择自定义地址2</h2>
-    <nut-cell
-      title="选择地址"
-      :desc="five"
-      is-link
-      @click="showAddress2"
-    ></nut-cell>
+    <nut-cell title="选择地址" :desc="five" is-link @click="showAddress2"></nut-cell>
 
     <nut-address
       v-model:visible="normal2"
@@ -41,12 +31,7 @@
     ></nut-address>
 
     <h2>选择已有地址</h2>
-    <nut-cell
-      title="选择地址"
-      :desc="two"
-      is-link
-      @click="showAddressExist"
-    ></nut-cell>
+    <nut-cell title="选择地址" :desc="two" is-link @click="showAddressExist"></nut-cell>
 
     <nut-address
       v-model:visible="exist"
@@ -60,12 +45,7 @@
     ></nut-address>
 
     <h2>自定义图标</h2>
-    <nut-cell
-      title="选择地址"
-      :desc="three"
-      is-link
-      @click="showCustomImg"
-    ></nut-cell>
+    <nut-cell title="选择地址" :desc="three" is-link @click="showCustomImg"></nut-cell>
 
     <nut-address
       v-model:visible="customImg"
@@ -81,12 +61,7 @@
     ></nut-address>
 
     <h2>自定义地址与已有地址切换</h2>
-    <nut-cell
-      title="选择地址"
-      :desc="four"
-      is-link
-      @click="showAddressOther"
-    ></nut-cell>
+    <nut-cell title="选择地址" :desc="four" is-link @click="showAddressOther"></nut-cell>
 
     <nut-address
       v-model:visible="other"
@@ -146,24 +121,24 @@ export default createDemo({
   setup() {
     const address = reactive({
       province: [
-        { id: 1, name: '北京' },
-        { id: 2, name: '广西' },
-        { id: 3, name: '江西' },
-        { id: 4, name: '四川' },
-        { id: 5, name: '浙江' }
+        { id: 1, name: '北京', title: 'B' },
+        { id: 2, name: '广西', title: 'G' },
+        { id: 3, name: '江西', title: 'J' },
+        { id: 4, name: '四川', title: 'S' },
+        { id: 5, name: '浙江', title: 'Z' }
       ],
       city: [
-        { id: 7, name: '朝阳区' },
-        { id: 8, name: '崇文区' },
-        { id: 9, name: '昌平区' },
-        { id: 6, name: '石景山区' },
-        { id: 3, name: '八里庄街道' },
-        { id: 9, name: '北苑' }
+        { id: 7, name: '朝阳区', title: 'C' },
+        { id: 8, name: '崇文区', title: 'C' },
+        { id: 9, name: '昌平区', title: 'C' },
+        { id: 6, name: '石景山区', title: 'S' },
+        { id: 3, name: '八里庄街道', title: 'B' },
+        { id: 9, name: '北苑', title: 'B' }
       ],
       country: [
-        { id: 3, name: '八里庄街道' },
-        { id: 9, name: '北苑' },
-        { id: 4, name: '常营乡' }
+        { id: 3, name: '八里庄街道', title: 'B' },
+        { id: 9, name: '北苑', title: 'B' },
+        { id: 4, name: '常营乡', title: 'C' }
       ],
       town: []
     });
@@ -258,19 +233,13 @@ export default createDemo({
     const close2 = (val: CalResult) => {
       console.log(val);
       if (val.type == 'exist') {
-        const { provinceName, cityName, countyName, townName, addressDetail } =
-          val.data;
-        text.two =
-          provinceName + cityName + countyName + townName + addressDetail;
+        const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+        text.two = provinceName + cityName + countyName + townName + addressDetail;
       } else {
         text.two = val.data.addressStr;
       }
     };
-    const selected = (
-      prevExistAdd: AddressList,
-      nowExistAdd: RegionData,
-      arr: AddressList[]
-    ) => {
+    const selected = (prevExistAdd: AddressList, nowExistAdd: RegionData, arr: AddressList[]) => {
       console.log(prevExistAdd);
       console.log(nowExistAdd);
     };
@@ -285,10 +254,8 @@ export default createDemo({
     const close3 = (val: CalResult) => {
       console.log(val);
       if (val.type == 'exist') {
-        const { provinceName, cityName, countyName, townName, addressDetail } =
-          val.data;
-        text.three =
-          provinceName + cityName + countyName + townName + addressDetail;
+        const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+        text.three = provinceName + cityName + countyName + townName + addressDetail;
       } else {
         text.three = val.data.addressStr;
       }
@@ -297,10 +264,8 @@ export default createDemo({
     const close4 = (val: CalResult) => {
       console.log(val);
       if (val.type == 'exist') {
-        const { provinceName, cityName, countyName, townName, addressDetail } =
-          val.data;
-        text.four =
-          provinceName + cityName + countyName + townName + addressDetail;
+        const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+        text.four = provinceName + cityName + countyName + townName + addressDetail;
       } else {
         text.four = val.data.addressStr;
       }

src/packages/__VUE/address/doc.md

@@ -101,22 +101,25 @@ setup() {
 setup() {
     const showPopup = ref(false);
     const address = reactive({
-      province:[
-        { id: 1, name: '北京' },
-        { id: 2, name: '广西' },
-        { id: 3, name: '江西' },
-        { id: 4, name: '四川' }
+      province: [
+        { id: 1, name: '北京', title: 'B' },
+        { id: 2, name: '广西', title: 'G' },
+        { id: 3, name: '江西', title: 'J' },
+        { id: 4, name: '四川', title: 'S' },
+        { id: 5, name: '浙江', title: 'Z' }
       ],
-      city:[
-        { id: 7, name: '朝阳区' },
-        { id: 8, name: '崇文区' },
-        { id: 9, name: '昌平区' },
-        { id: 6, name: '石景山区' }
+      city: [
+        { id: 7, name: '朝阳区', title: 'C' },
+        { id: 8, name: '崇文区', title: 'C' },
+        { id: 9, name: '昌平区', title: 'C' },
+        { id: 6, name: '石景山区', title: 'S' },
+        { id: 3, name: '八里庄街道', title: 'B' },
+        { id: 9, name: '北苑', title: 'B' }
       ],
-      country:[
-        { id: 3, name: '八里庄街道' },
-        { id: 9, name: '北苑' },
-        { id: 4, name: '常营乡' }
+      country: [
+        { id: 3, name: '八里庄街道', title: 'B' },
+        { id: 9, name: '北苑', title: 'B' },
+        { id: 4, name: '常营乡', title: 'C' }
       ],
       town:[]
     })
@@ -424,11 +427,11 @@ setup() {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | v-model:visible | 是否打开地址选择 | String | ''
-| type | 地址选择类型 exist/custom/custom2 | String | 'custom'
-| province | 省，每个省的对象中，必须有 name 字段 | Array | []
-| city | 市，每个市的对象中，必须有 name 字段 | Array | []
-| country | 县，每个县的对象中，必须有 name 字段 | Array | []
-| town | 乡/镇，每个乡/镇的对象中，必须有 name 字段 | Array | []
+| type | 地址选择类型 exist/custom/custom2  | String | 'custom'
+| province | 省，每个省的对象中，必须有 name 字段，如果类型选择 custom2，必须指定 title 字段为首字母 | Array | []
+| city | 市，每个市的对象中，必须有 name 字段，如果类型选择 custom2，必须指定 title 字段为首字母 | Array | []
+| country | 县，每个县的对象中，必须有 name 字段，如果类型选择 custom2，必须指定 title 字段为首字母 | Array | []
+| town | 乡/镇，每个乡/镇的对象中，必须有 name 字段，如果类型选择 custom2，必须指定 title 字段为首字母 | Array | []
 | height | 弹层中内容容器的高度，仅在type="custom2"时有效 | String、Number | '200px'
 | exist-address | 已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下） | Array | []
 | default-icon | 已有地址列表默认图标，type=‘exist’ 时生效 | String | ''

src/packages/__VUE/address/index.taro.vue

@@ -22,12 +22,7 @@
         </view-block>
 
         <view-block class="arrow-close" @click="handClose('cross')">
-          <nut-icon
-            v-if="closeBtnIcon"
-            :name="closeBtnIcon"
-            color="#cccccc"
-            size="18px"
-          ></nut-icon>
+          <nut-icon v-if="closeBtnIcon" :name="closeBtnIcon" color="#cccccc" size="18px"></nut-icon>
         </view-block>
       </view-block>
 
@@ -45,11 +40,7 @@
             <view>{{ getTabName(item, index) }}</view>
           </view-block>
 
-          <view-block
-            class="region-tab-line"
-            ref="regionLine"
-            :style="{ left: lineDistance + 'px' }"
-          ></view-block>
+          <view-block class="region-tab-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view-block>
         </view-block>
 
         <view-block class="region-con">
@@ -58,9 +49,7 @@
               v-for="(item, index) in regionList[tabName[tabIndex]]"
               :key="index"
               class="region-item"
-              :class="[
-                selectedRegion[tabName[tabIndex]].id == item.id ? 'active' : ''
-              ]"
+              :class="[selectedRegion[tabName[tabIndex]].id == item.id ? 'active' : '']"
               @click="nextAreaList(item)"
             >
               <nut-icon
@@ -89,11 +78,7 @@
           >
             <view>{{ getTabName(item, index) }}</view>
           </view>
-          <view
-            class="region-tab-line"
-            ref="regionLine"
-            :style="{ left: lineDistance + 'px' }"
-          ></view>
+          <view class="region-tab-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view>
         </view>
         <view class="elevator-group" v-if="showPopup">
           <nut-elevator
@@ -129,13 +114,7 @@
                 </div>
                 <div class="exist-item-info-bottom">
                   <view>
-                    {{
-                      item.provinceName +
-                      item.cityName +
-                      item.countyName +
-                      item.townName +
-                      item.addressDetail
-                    }}
+                    {{ item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail }}
                   </view>
                 </div>
               </div>
@@ -143,11 +122,7 @@
           </ul>
         </div>
 
-        <div
-          class="choose-other"
-          @click="switchModule"
-          v-if="isShowCustomAddress"
-        >
+        <div class="choose-other" @click="switchModule" v-if="isShowCustomAddress">
           <div class="btn">{{ customAndExistTitle }}</div>
         </div>
       </view-block>
@@ -158,7 +133,6 @@
 import { reactive, ref, toRefs, watch, nextTick, computed } from 'vue';
 import { createComponent } from '../../utils/create';
 import Taro from '@tarojs/taro';
-import { transformData } from './transformData';
 
 const { create, componentName } = createComponent('address');
 
@@ -166,12 +140,9 @@ interface RegionData {
   name: string;
   [key: string]: any;
 }
-interface Region {
-  province: RegionData[];
-  city: RegionData[];
-  country: RegionData[];
-  town: RegionData[];
-  [key: string]: any;
+interface CustomRegionData {
+  title: string;
+  list: any[];
 }
 
 interface AddressList {
@@ -255,15 +226,7 @@ export default create({
       default: '200px'
     }
   },
-  emits: [
-    'update:visible',
-    'type',
-    'change',
-    'selected',
-    'close',
-    'close-mask',
-    'switch-module'
-  ],
+  emits: ['update:visible', 'type', 'change', 'selected', 'close', 'close-mask', 'switch-module'],
 
   setup(props, { emit }) {
     const classes = computed(() => {
@@ -288,10 +251,37 @@ export default create({
 
     const isCustom2 = computed(() => props.type === 'custom2');
 
+    const transformData = (data: RegionData[]) => {
+      if (!Array.isArray(data)) throw new TypeError('params muse be array.');
+
+      if (!data.length) return [];
+
+      const newData: CustomRegionData[] = [];
+
+      data = data.sort((a: RegionData, b: RegionData) => {
+        return a.title.localeCompare(b.title);
+      });
+
+      data.forEach((item: RegionData) => {
+        const index = newData.findIndex((value: CustomRegionData) => value.title === item.title);
+        if (index <= -1) {
+          newData.push({
+            title: item.title,
+            list: [].concat(item)
+          });
+        } else {
+          newData[index] = {
+            title: item.title,
+            list: newData[index].list.concat(item)
+          };
+        }
+      });
+
+      return newData;
+    };
+
     const regionList = reactive({
-      province: isCustom2.value
-        ? transformData(props.province)
-        : props.province,
+      province: isCustom2.value ? transformData(props.province) : props.province,
       city: isCustom2.value ? transformData(props.city) : props.city,
       country: isCustom2.value ? transformData(props.country) : props.country,
       town: isCustom2.value ? transformData(props.town) : props.town

src/packages/__VUE/address/index.vue

@@ -9,11 +9,7 @@
     <view class="nut-address">
       <view class="nut-address__header">
         <view class="arrow-back" @click="switchModule">
-          <nut-icon
-            :name="backBtnIcon"
-            color="#cccccc"
-            v-show="privateType == 'custom' && backBtnIcon"
-          ></nut-icon>
+          <nut-icon :name="backBtnIcon" color="#cccccc" v-show="privateType == 'custom' && backBtnIcon"></nut-icon>
         </view>
 
         <view class="nut-address__header__title">
@@ -21,12 +17,7 @@
         </view>
 
         <view class="arrow-close" @click="handClose('cross')">
-          <nut-icon
-            v-if="closeBtnIcon"
-            :name="closeBtnIcon"
-            color="#cccccc"
-            size="18px"
-          ></nut-icon>
+          <nut-icon v-if="closeBtnIcon" :name="closeBtnIcon" color="#cccccc" size="18px"></nut-icon>
         </view>
       </view>
 
@@ -44,11 +35,7 @@
             <view>{{ getTabName(item, index) }}</view>
           </view>
 
-          <view
-            class="region-tab-line"
-            ref="regionLine"
-            :style="{ left: lineDistance + 'px' }"
-          ></view>
+          <view class="region-tab-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view>
         </view>
 
         <view class="region-con">
@@ -57,9 +44,7 @@
               v-for="(item, index) in regionList[tabName[tabIndex]]"
               :key="index"
               class="region-item"
-              :class="[
-                selectedRegion[tabName[tabIndex]].id == item.id ? 'active' : ''
-              ]"
+              :class="[selectedRegion[tabName[tabIndex]].id == item.id ? 'active' : '']"
               @click="nextAreaList(item)"
             >
               <nut-icon
@@ -89,11 +74,7 @@
           >
             <view>{{ getTabName(item, index) }}</view>
           </view>
-          <view
-            class="region-tab-line"
-            ref="regionLine"
-            :style="{ left: lineDistance + 'px' }"
-          ></view>
+          <view class="region-tab-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view>
         </view>
         <view class="elevator-group">
           <nut-elevator
@@ -129,24 +110,14 @@
                 </div>
                 <div class="exist-item-info-bottom">
                   <view>
-                    {{
-                      item.provinceName +
-                      item.cityName +
-                      item.countyName +
-                      item.townName +
-                      item.addressDetail
-                    }}
+                    {{ item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail }}
                   </view>
                 </div>
               </div>
             </li>
           </ul>
         </div>
-        <div
-          class="choose-other"
-          @click="switchModule"
-          v-if="isShowCustomAddress"
-        >
+        <div class="choose-other" @click="switchModule" v-if="isShowCustomAddress">
           <div class="btn">{{ customAndExistTitle }}</div>
         </div>
       </view>
@@ -157,17 +128,13 @@
 import { reactive, ref, toRefs, watch, nextTick, computed } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('address');
-import { transformData } from './transformData';
 interface RegionData {
   name: string;
   [key: string]: any;
 }
-interface Region {
-  province: RegionData[];
-  city: RegionData[];
-  country: RegionData[];
-  town: RegionData[];
-  [key: string]: any;
+interface CustomRegionData {
+  title: string;
+  list: any[];
 }
 
 interface AddressList {
@@ -251,15 +218,7 @@ export default create({
       default: '200px'
     }
   },
-  emits: [
-    'update:visible',
-    'type',
-    'change',
-    'selected',
-    'close',
-    'close-mask',
-    'switch-module'
-  ],
+  emits: ['update:visible', 'type', 'change', 'selected', 'close', 'close-mask', 'switch-module'],
 
   setup(props: any, { emit }) {
     const regionLine = ref<null | HTMLElement>(null);
@@ -277,10 +236,37 @@ export default create({
 
     const isCustom2 = computed(() => props.type === 'custom2');
 
+    const transformData = (data: RegionData[]) => {
+      if (!Array.isArray(data)) throw new TypeError('params muse be array.');
+
+      if (!data.length) return [];
+
+      const newData: CustomRegionData[] = [];
+
+      data = data.sort((a: RegionData, b: RegionData) => {
+        return a.title.localeCompare(b.title);
+      });
+
+      data.forEach((item: RegionData) => {
+        const index = newData.findIndex((value: CustomRegionData) => value.title === item.title);
+        if (index <= -1) {
+          newData.push({
+            title: item.title,
+            list: [].concat(item)
+          });
+        } else {
+          newData[index] = {
+            title: item.title,
+            list: newData[index].list.concat(item)
+          };
+        }
+      });
+
+      return newData;
+    };
+
     const regionList = reactive({
-      province: isCustom2.value
-        ? transformData(props.province)
-        : props.province,
+      province: isCustom2.value ? transformData(props.province) : props.province,
       city: isCustom2.value ? transformData(props.city) : props.city,
       country: isCustom2.value ? transformData(props.country) : props.country,
       town: isCustom2.value ? transformData(props.town) : props.town
@@ -328,7 +314,6 @@ export default create({
         if (name) {
           const distance = name.offsetLeft;
           lineDistance.value = distance;
-          console.log(name);
         }
       });
     };

src/packages/__VUE/address/transformData.ts

@@ -1,48 +0,0 @@
-import pinyin from 'pinyin';
-
-interface Region {
-  title: string;
-  list: any[];
-}
-
-export const transformData = (regionData: any[]) => {
-  if (!Array.isArray(regionData)) throw new TypeError('params muse be array.');
-
-  if (!regionData.length) return [];
-
-  const newData: Region[] = [];
-
-  regionData = regionData.map((item: any) => {
-    if (!item.name) return new Error('the data must includes `name` props');
-    let code = pinyin(item.name, {
-      style: pinyin.STYLE_NORMAL
-    });
-    return {
-      ...item,
-      firstCode: code[0][0].charAt(0).toUpperCase()
-    };
-  });
-
-  regionData = regionData.sort((a: any, b: any) => {
-    return a.firstCode.localeCompare(b.firstCode);
-  });
-
-  regionData.forEach((item: any) => {
-    const index = newData.findIndex(
-      (value: any) => value.title === item.firstCode
-    );
-    if (index <= -1) {
-      newData.push({
-        title: item.firstCode,
-        list: [].concat(item)
-      });
-    } else {
-      newData[index] = {
-        title: item.firstCode,
-        list: newData[index].list.concat(item)
-      };
-    }
-  });
-
-  return newData;
-};