docs: address

src/packages/address/demo.vue

@@ -16,7 +16,7 @@
       :town="town"
       @change="cal => onChange(cal, 'normal')"
       @close="close1"
-      customAddressTitle="请选择所在地区"
+      custom-address-title="请选择所在地区"
     ></nut-address>
 
     <h2>选择已有地址</h2>
@@ -30,12 +30,12 @@
     <nut-address
       v-model:show="exist"
       type="exist"
-      :existAddress="existAddress"
+      :exist-address="existAddress"
       @change="cal => onChange(cal, 'exist')"
       @close="close2"
-      :isShowCustomAddress="false"
+      :is-show-custom-address="false"
       @selected="selected"
-      existAddressTitle="配送至"
+      exist-address-title="配送至"
     ></nut-address>
 
     <h2>自定义图标</h2>
@@ -49,14 +49,14 @@
     <nut-address
       v-model:show="customImg"
       type="exist"
-      :existAddress="existAddress"
+      :exist-address="existAddress"
       @change="cal => onChange(cal, 'customImg')"
       @close="close3"
-      :isShowCustomAddress="false"
+      :is-show-custom-address="false"
       @selected="selected"
-      :defaultIcon="defaultIcon"
-      :selectedIcon="selectedIcon"
-      :closeBtnIcon="closeBtnIcon"
+      :default-icon="defaultIcon"
+      :selected-icon="selectedIcon"
+      :close-btn-icon="closeBtnIcon"
     ></nut-address>
 
     <h2>自定义地址与已有地址切换</h2>
@@ -70,18 +70,18 @@
     <nut-address
       v-model:show="other"
       type="exist"
-      :existAddress="existAddress"
+      :exist-address="existAddress"
       :province="province"
       :city="city"
       :country="country"
       :town="town"
-      :backBtnIcon="backBtnIcon"
+      :back-btn-icon="backBtnIcon"
       @change="cal => onChange(cal, 'other')"
       @close="close4"
       @selected="selected"
-      customAndExistTitle="选择其他地址"
-      @switchModule="switchModule"
-      @closeMask="closeMask"
+      custom-and-exist-title="选择其他地址"
+      @switch-module="switchModule"
+      @close-mask="closeMask"
     ></nut-address>
   </div>
 </template>
@@ -90,6 +90,36 @@
 import { createComponent } from '@/utils/create';
 import { reactive, ref, toRefs } from 'vue';
 const { createDemo } = createComponent('address');
+interface CalBack {
+  next: string;
+  value: string;
+  custom: string;
+}
+interface RegionData {
+  name: string;
+  [key: string]: any;
+}
+interface CalResult {
+  type: string;
+  data: AddressResult;
+}
+interface AddressList {
+  id?: string | number;
+  provinceName: string;
+  cityName: string;
+  countyName: string;
+  townName: string;
+  addressDetail: string;
+  selectedAddress: boolean;
+}
+interface AddressResult extends AddressList {
+  addressIdStr: string;
+  addressStr: string;
+  province: RegionData[];
+  city: RegionData[];
+  country: RegionData[];
+  town: RegionData[];
+}
 export default createDemo({
   props: {},
   setup() {
@@ -178,13 +208,13 @@ export default createDemo({
       showPopup.normal = !showPopup.normal;
     };
 
-    const onChange = (cal, tag) => {
-      const name = address[cal.next];
+    const onChange = (cal: CalBack, tag: string) => {
+      const name = (address as any)[cal.next];
       if (name.length < 1) {
-        showPopup[tag] = false;
+        (showPopup as any)[tag] = false;
       }
     };
-    const close1 = val => {
+    const close1 = (val: CalResult) => {
       console.log(val);
       text.one = val.data.addressStr;
     };
@@ -193,7 +223,7 @@ export default createDemo({
       showPopup.exist = true;
     };
 
-    const close2 = val => {
+    const close2 = (val: CalResult) => {
       console.log(val);
       if (val.type == 'exist') {
         const {
@@ -209,7 +239,11 @@ export default createDemo({
         text.two = val.data.addressStr;
       }
     };
-    const selected = (prevExistAdd, nowExistAdd, arr) => {
+    const selected = (
+      prevExistAdd: AddressList,
+      nowExistAdd: RegionData,
+      arr: AddressList[]
+    ) => {
       console.log(prevExistAdd);
       console.log(nowExistAdd);
     };
@@ -221,7 +255,7 @@ export default createDemo({
       showPopup.customImg = true;
     };
 
-    const close3 = val => {
+    const close3 = (val: CalResult) => {
       console.log(val);
       if (val.type == 'exist') {
         const {
@@ -238,7 +272,7 @@ export default createDemo({
       }
     };
 
-    const close4 = val => {
+    const close4 = (val: CalResult) => {
       console.log(val);
       if (val.type == 'exist') {
         const {
@@ -255,15 +289,15 @@ export default createDemo({
       }
     };
 
-    const switchModule = cal => {
-      if (cal.type == 'custom') {
+    const switchModule = (val: CalResult) => {
+      if (val.type == 'custom') {
         console.log('点击了“选择其他地址”按钮');
       } else {
         console.log('点击了自定义地址左上角的返回按钮');
       }
     };
 
-    const closeMask = val => {
+    const closeMask = (val: CalResult) => {
       console.log('关闭弹层', val);
     };
 

src/packages/address/doc.md

@@ -361,20 +361,20 @@ setup() {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | v-model:show | 是否打开地址选择 | String | ''
-| type | 地址选择类型 exist/custom | String | custom
+| type | 地址选择类型 exist/custom | String | 'custom'
 | province | 省，每个省的对象中，必须有 name 字段 | Array | []
 | city | 市，每个市的对象中，必须有 name 字段 | Array | []
 | country | 县，每个县的对象中，必须有 name 字段 | Array | []
 | town | 乡/镇，每个乡/镇的对象中，必须有 name 字段 | Array | []
-| existAddress | 已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下） | Array | []
-| defaultIcon | 已有地址列表默认图标，type=‘exist’ 时生效 | string | ''
-| selectedIcon | 已有地址列表选中图标，type=‘exist’ 时生效 | string | ''
-| closeBtnIcon | 自定义关闭弹框按钮图标 | string | -
-| backBtnIcon | 自定义地址与已有地址切换时，自定义返回的按钮图标 | string | -
-| isShowCustomAddress | 是否可以切换自定义地址选择，type=‘exist’ 时生效 | Boolean | true
-| customAddressTitle  | 自定义地址选择文案，type='custom' 时生效 | string | '请选择所在地区'
-| existAddressTitle| 已有地址文案 ，type=‘exist’ 时生效| string | '配送至'
-| customAndExistTitle| 自定义地址与已有地址切换按钮文案 ，type=‘exist’ 时生效| string | '选择其他地址'
+| exist-address | 已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下） | Array | []
+| default-icon | 已有地址列表默认图标，type=‘exist’ 时生效 | string | ''
+| selected-icon | 已有地址列表选中图标，type=‘exist’ 时生效 | string | ''
+| close-btn-icon | 自定义关闭弹框按钮图标 | string | -
+| back-btn-icon | 自定义地址与已有地址切换时，自定义返回的按钮图标 | string | -
+| is-show-custom-address | 是否可以切换自定义地址选择，type=‘exist’ 时生效 | Boolean | true
+| custom-address-title  | 自定义地址选择文案，type='custom' 时生效 | string | '请选择所在地区'
+| exist-address-title| 已有地址文案 ，type=‘exist’ 时生效| string | '配送至'
+| custom-and-exist-title| 自定义地址与已有地址切换按钮文案 ，type=‘exist’ 时生效| string | '选择其他地址'
 
 
   * provinceName 省的名字
@@ -387,11 +387,11 @@ setup() {
 ## Event
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| onChange | 自定义选择地址时，选择地区时触发 |  参考 onChange
+| on-change | 自定义选择地址时，选择地区时触发 |  参考 onChange
 | selected | 选择已有地址列表时触发 | 参考 selected
 | close | 地址选择弹框关闭时触发 | 参考 close
-| closeMask | 点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'}
-| switchModule | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'}
+| close-mask |点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'}
+| switch-module | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'}
 
 
 ## onChange 回调参数

src/packages/address/index.scss

@@ -50,11 +50,7 @@
         margin-top: 5px;
         width: 26px;
         height: 3px;
-        background: linear-gradient(
-          90deg,
-          $primary-color 0%,
-          $primary-color-end 100%
-        );
+        background: $address-region-tab-line;
       }
     }
 
@@ -69,7 +65,7 @@
           display: flex;
           align-items: center;
           margin-bottom: 20px;
-          font-size: 12px;
+          font-size: $font-size-1;
           color: #333;
           &.active {
             font-weight: bold;
@@ -97,9 +93,9 @@
           display: flex;
           align-items: center;
           margin-bottom: 20px;
-          font-size: 12px;
+          font-size: $font-size-1;
           line-height: 14px;
-          color: rgba(51, 51, 51, 1);
+          color: #333;
           &.active {
             font-weight: bold;
           }
@@ -128,7 +124,7 @@
         background: $button-primary-background-color;
         border-radius: 21px;
         font-size: 15px;
-        color: rgba(255, 255, 255, 1);
+        color: $white;
       }
     }
   }

src/packages/address/index.vue

@@ -12,8 +12,9 @@
           class="arrow-back"
           @click="switchModule"
           v-if="showModule == 'custom' && type == 'exist' && backBtnIcon"
-          ><nut-icon :name="backBtnIcon" color="#CCCCCC"></nut-icon
-        ></view-block>
+        >
+          <nut-icon :name="backBtnIcon" color="#CCCCCC"></nut-icon>
+        </view-block>
         <view-block class="arrow-back" v-else></view-block>
 
         <view-block v-if="showModule == 'custom'">{{
@@ -23,14 +24,14 @@
           existAddressTitle
         }}</view-block>
 
-        <view-block class="arrow-close" @click="handClose('cross')"
-          ><nut-icon
+        <view-block class="arrow-close" @click="handClose('cross')">
+          <nut-icon
             v-if="closeBtnIcon"
             :name="closeBtnIcon"
             color="#CCCCCC"
             size="18px"
-          ></nut-icon
-        ></view-block>
+          ></nut-icon>
+        </view-block>
       </view-block>
 
       <!-- 请选择 -->
@@ -43,8 +44,9 @@
             :key="index"
             :ref="key"
             @click="changeRegionTab(item, key, index)"
-            ><view>{{ getTabName(item, index) }}</view></view-block
           >
+            <view>{{ getTabName(item, index) }}</view>
+          </view-block>
 
           <view-block class="region-tab-line" ref="regionLine"></view-block>
         </view-block>
@@ -120,6 +122,27 @@ import { reactive, ref, toRefs, watch, nextTick } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('address');
 import { TweenMax } from 'gsap';
+interface RegionData {
+  name: string;
+  [key: string]: any;
+}
+interface Region {
+  province: RegionData[];
+  city: RegionData[];
+  country: RegionData[];
+  town: RegionData[];
+  [key: string]: any;
+}
+
+interface AddressList {
+  id?: string | number;
+  provinceName: string;
+  cityName: string;
+  countyName: string;
+  townName: string;
+  addressDetail: string;
+  selectedAddress: boolean;
+}
 export default create({
   props: {
     show: {
@@ -197,13 +220,7 @@ export default create({
   ],
 
   setup(props, { emit }) {
-    console.log('componentName', componentName);
-
     const regionLine = ref<null | HTMLElement>(null);
-    // const tabItemprovince = ref<null | HTMLElement>(null);
-    // const tabItemcity = ref<null | HTMLElement>(null);
-    // const tabItemcountry = ref<null | HTMLElement>(null);
-    // const tabItemtown = ref<null | HTMLElement>(null);
 
     const tabItemRef = reactive({
       province: ref<null | HTMLElement>(null),
@@ -225,10 +242,10 @@ export default create({
     });
 
     const selectedRegion = reactive({
-      province: {},
-      city: {},
-      country: {},
-      town: {}
+      province: {} as RegionData,
+      city: {} as RegionData,
+      country: {} as RegionData,
+      town: {} as RegionData
     }); //已选择的 省、市、县、镇
 
     let selectedExistAddress = reactive({}); // 当前选择的地址
@@ -236,7 +253,7 @@ export default create({
     const closeWay = ref('self');
 
     //获取已选地区列表名称
-    const getTabName = (item, index) => {
+    const getTabName = (item: RegionData, index: number) => {
       if (item.name) return item.name;
 
       if (tabIndex.value < index) {
@@ -259,7 +276,7 @@ export default create({
     };
     // 移动下面的红线
     const lineAnimation = () => {
-      const name = tabItemRef[tabName.value[tabIndex.value]];
+      const name = (tabItemRef as any)[tabName.value[tabIndex.value]];
       nextTick(() => {
         if (name) {
           const distance = name.offsetLeft;
@@ -268,7 +285,7 @@ export default create({
       });
     };
     // 切换下一级列表
-    const nextAreaList = item => {
+    const nextAreaList = (item: RegionData | string) => {
       // onchange 接收的参数
       const calBack = {
         next: '',
@@ -276,10 +293,10 @@ export default create({
         custom: tabName.value[tabIndex.value]
       };
 
-      selectedRegion[tabName.value[tabIndex.value]] = item;
+      (selectedRegion as any)[tabName.value[tabIndex.value]] = item;
 
       for (let i = tabIndex.value; i < tabIndex.value - 1; i++) {
-        selectedRegion[tabName.value[i + 1]] = {};
+        (selectedRegion as any)[tabName.value[i + 1]] = {};
       }
 
       if (tabIndex.value < 3) {
@@ -289,28 +306,28 @@ export default create({
 
         // 切换下一个
         calBack.next = tabName.value[tabIndex.value];
-        calBack.value = item;
+        calBack.value = item as string;
         emit('change', calBack);
       } else {
         handClose();
       }
     };
     //切换地区Tab
-    const changeRegionTab = (item, key, index) => {
+    const changeRegionTab = (item: RegionData, key: number, index: number) => {
       tabIndex.value = index;
       lineAnimation();
     };
 
     // 选择现有地址
-    const selectedExist = item => {
-      const copyExistAdd = props.existAddress as [];
+    const selectedExist = (item: RegionData) => {
+      const copyExistAdd = props.existAddress as AddressList[];
       let prevExistAdd = {};
 
       copyExistAdd.forEach((list, index) => {
-        if (list && (list as any).selectedAddress) {
+        if (list && (list as AddressList).selectedAddress) {
           prevExistAdd = list;
         }
-        (list as any).selectedAddress = false;
+        (list as AddressList).selectedAddress = false;
       });
 
       item.selectedAddress = true;
@@ -324,7 +341,7 @@ export default create({
     // 初始化
     const initAddress = () => {
       for (let i = 0; i < tabName.value.length; i++) {
-        selectedRegion[tabName.value[i]] = {};
+        (selectedRegion as any)[tabName.value[i]] = {};
       }
       tabIndex.value = 0;
       lineAnimation();
@@ -332,8 +349,6 @@ export default create({
 
     // 关闭
     const close = () => {
-      console.log('关闭');
-
       const resCopy = Object.assign(
         {
           addressIdStr: '',
@@ -351,16 +366,16 @@ export default create({
         const { province, city, country, town } = resCopy;
 
         resCopy.addressIdStr = [
-          (province as any).id || 0,
-          (city as any).id || 0,
-          (country as any).id || 0,
-          (town as any).id || 0
+          (province as RegionData).id || 0,
+          (city as RegionData).id || 0,
+          (country as RegionData).id || 0,
+          (town as RegionData).id || 0
         ].join('_');
         resCopy.addressStr = [
-          (province as any).name,
-          (city as any).name,
-          (country as any).name,
-          (town as any).name
+          (province as RegionData).name,
+          (city as RegionData).name,
+          (country as RegionData).name,
+          (town as RegionData).name
         ].join('');
         res.data = resCopy;
       } else {
@@ -437,7 +452,7 @@ export default create({
       value => {
         //  existAddress.value = value;
         value.forEach((item, index) => {
-          if ((item as any).selectedAddress) {
+          if ((item as AddressList).selectedAddress) {
             selectedExistAddress = item as {};
           }
         });

src/styles/variables.scss

@@ -226,7 +226,6 @@ $tabbar-active-color: $primary-color;
 $tabbar-border-color: #eee;
 
 //infiniteloading
-
 $infinite-bottom-color: #c8c8c8;
 
 //range
@@ -238,6 +237,13 @@ $rang-bar-bg-color: linear-gradient(
   $primary-color-end 100%
 );
 
+//address
+$address-region-tab-line: linear-gradient(
+  90deg,
+  $primary-color 0%,
+  $primary-color-end 100%
+);
+
 view-block {
   display: block;
 }