feat: 地址组件适配

src/sites/mobile-taro/vue/dist/app.json

@@ -1 +1 @@
-{"pages":["pages/button/demo"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}
+{"pages":["pages/button/demo","pages/address/demo"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}

src/sites/mobile-taro/vue/dist/common.js

@@ -2,9 +2,9 @@
   ['common'],
   {
     /***/ '../../../packages/utils/create/component.ts':
-      /*!***********************************************************************************************!*\
-  !*** /Users/suzigang/Downloads/project/nutui3.0/nutui/src/packages/utils/create/component.ts ***!
-  \***********************************************************************************************/
+      /*!**********************************************************************************************!*\
+  !*** /Users/yangxiaolu3/Documents/JD/workspace/nutui/src/packages/utils/create/component.ts ***!
+  \**********************************************************************************************/
       /*! exports provided: createComponent */
       /*! exports used: createComponent */
       /***/ function(module, __webpack_exports__, __webpack_require__) {
@@ -61,9 +61,9 @@
       },
 
     /***/ '../../../packages/utils/create/index.ts':
-      /*!*******************************************************************************************!*\
-  !*** /Users/suzigang/Downloads/project/nutui3.0/nutui/src/packages/utils/create/index.ts ***!
-  \*******************************************************************************************/
+      /*!******************************************************************************************!*\
+  !*** /Users/yangxiaolu3/Documents/JD/workspace/nutui/src/packages/utils/create/index.ts ***!
+  \******************************************************************************************/
       /*! exports provided: createComponent */
       /*! exports used: createComponent */
       /***/ function(module, __webpack_exports__, __webpack_require__) {

src/sites/mobile-taro/vue/dist/pages/address/demo.json

@@ -0,0 +1 @@
+{"usingComponents":{"custom-wrapper":"../../custom-wrapper","comp":"../../comp"}}

src/sites/mobile-taro/vue/dist/pages/address/demo.wxml

@@ -0,0 +1,2 @@
+<import src="../../base.wxml"/>
+<template is="taro_tmpl" data="{{root:root}}" />

src/sites/mobile-taro/vue/dist/pages/inputnumber/demo.wxss

@@ -957,52 +957,140 @@ to {
   -webkit-animation-name: nutRotateOut;
           animation-name: nutRotateOut;
 }
-.nut-inputnumber {
+.nut-address__header {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  margin-top: 48rpx;
+  margin-bottom: 34rpx;
+  padding: 0 40rpx;
+  text-align: center;
+  font-weight: bold;
+  color: #333;
+  line-height: 40rpx;
 }
-.nut-inputnumber--disabled .h5-input {
-  color: #cccccc;
+.nut-address__header__title {
+  color: #262626;
+  font-size: 36rpx;
 }
-.nut-inputnumber__icon {
+.nut-address .custom-address .region-tab {
+  position: relative;
+  margin-top: 64rpx;
+  padding: 0 40rpx;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 26rpx;
+  color: #1d1e1e;
+}
+.nut-address .custom-address .region-tab .tab-item {
+  margin-right: 60rpx;
+}
+.nut-address .custom-address .region-tab .tab-item.active {
+  font-weight: bold;
+}
+.nut-address .custom-address .region-tab .tab-item .h5-span {
+  display: inline-block;
+  max-width: 200rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+     text-overflow: ellipsis;
+}
+.nut-address .custom-address .region-tab .region-tab-line {
+  position: absolute;
+  bottom: -20rpx;
+  left: 40rpx;
+  display: inline-block;
+  margin-top: 10rpx;
+  width: 52rpx;
+  height: 6rpx;
+  background: -webkit-gradient(linear, left top, right top, from(#fa2c19), to(#fa6419));
+  background: -webkit-linear-gradient(left, #fa2c19 0%, #fa6419 100%);
+  background: -o-linear-gradient(left, #fa2c19 0%, #fa6419 100%);
+  background: linear-gradient(90deg, #fa2c19 0%, #fa6419 100%);
+}
+.nut-address .custom-address .region-con {
+  margin: 40rpx 40rpx 0;
+}
+.nut-address .custom-address .region-con .region-group {
+  padding-top: 30rpx;
+  height: 540rpx;
+  overflow-y: auto;
+}
+.nut-address .custom-address .region-con .region-group .region-item {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  color: #1a1a1a;
-  font-size: 40rpx;
+  margin-bottom: 40rpx;
+  font-size: 24rpx;
+  color: #333;
 }
-.nut-inputnumber__icon--disabled {
-  color: #cccccc;
+.nut-address .custom-address .region-con .region-group .region-item.active {
+  font-weight: bold;
 }
-.nut-inputnumber__text--readonly {
-  width: 80rpx;
-  height: 100%;
-  text-align: center;
-  margin: 0 12rpx;
-  background-color: #f5f5f5;
-  border-radius: 8rpx;
+.nut-address .custom-address .region-con .region-group .region-item .region-item-icon {
+  margin-right: 12rpx;
 }
-.nut-inputnumber .h5-input {
-  width: 80rpx;
-  height: 100%;
-  text-align: center;
-  outline: none;
-  border: 0;
-  margin: 0 12rpx;
-  background-color: #f5f5f5;
-  border-radius: 8rpx;
+.nut-address .exist-address {
+  margin-top: 30rpx;
 }
-.nut-inputnumber .h5-input::-webkit-outer-spin-button,
-.nut-inputnumber .h5-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-          appearance: none;
+.nut-address .exist-address .exist-address-group {
+  padding: 30rpx 40rpx 0;
+  height: 558rpx;
+  overflow-y: scroll;
+}
+.nut-address .exist-address .exist-address-group .exist-ul .exist-item {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-bottom: 40rpx;
+  font-size: 24rpx;
+  line-height: 28rpx;
+  color: #333;
+}
+.nut-address .exist-address .exist-address-group .exist-ul .exist-item.active {
+  font-weight: bold;
+}
+.nut-address .exist-address .exist-address-group .exist-ul .exist-item .exist-item-icon {
+  margin-right: 18rpx;
+}
+.nut-address .exist-address .exist-address-group .exist-ul .exist-item .h5-span {
+  display: inline-block;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.nut-address .exist-address .choose-other {
+  width: 100%;
+  height: 108rpx;
+  padding: 12rpx 0 0;
+  border-top: 2rpx solid #f2f2f2;
+}
+.nut-address .exist-address .choose-other .btn {
+  width: 90%;
+  height: 84rpx;
+  line-height: 84rpx;
+  margin: auto;
+  text-align: center;
+  background: -webkit-linear-gradient(315deg, #fa2c19 0%, #fa6419 100%);
+  background: -o-linear-gradient(315deg, #fa2c19 0%, #fa6419 100%);
+  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+  border-radius: 42rpx;
+  font-size: 30rpx;
+  color: #fff;
 }
 view-block {
   display: block;
@@ -1712,3 +1800,309 @@ to {
 .nut-cell__link {
   color: #979797;
 }
+view-block[data-v-3e528abc] {
+  display: block;
+}
+@-webkit-keyframes nutFadeIn-3e528abc {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes nutFadeIn-3e528abc {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutFadeOut-3e528abc {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutFadeOut-3e528abc {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+.nutFade-enter-active[data-v-3e528abc],
+.nutFadeIn[data-v-3e528abc],
+.nutFade-leave-active[data-v-3e528abc],
+.nutFadeOut[data-v-3e528abc] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutFade-enter-active[data-v-3e528abc],
+.nutFadeIn[data-v-3e528abc] {
+  -webkit-animation-name: nutFadeIn-3e528abc;
+          animation-name: nutFadeIn-3e528abc;
+}
+.nutFade-leave-active[data-v-3e528abc],
+.nutFadeOut[data-v-3e528abc] {
+  -webkit-animation-name: nutFadeOut-3e528abc;
+          animation-name: nutFadeOut-3e528abc;
+}
+@-webkit-keyframes nutZoomIn-3e528abc {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@keyframes nutZoomIn-3e528abc {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutZoomOut-3e528abc {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutZoomOut-3e528abc {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+.nutZoom-enter-active[data-v-3e528abc],
+.nutZoomIn[data-v-3e528abc],
+.nutZoom-leave-active[data-v-3e528abc],
+.nutZoomOut[data-v-3e528abc] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutZoom-enter-active[data-v-3e528abc],
+.nutZoomIn[data-v-3e528abc] {
+  -webkit-animation-name: nutZoomIn-3e528abc;
+          animation-name: nutZoomIn-3e528abc;
+}
+.nutZoom-leave-active[data-v-3e528abc],
+.nutZoomOut[data-v-3e528abc] {
+  -webkit-animation-name: nutZoomOut-3e528abc;
+          animation-name: nutZoomOut-3e528abc;
+}
+@-webkit-keyframes nutEaseIn-3e528abc {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@keyframes nutEaseIn-3e528abc {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@-webkit-keyframes nutEaseOut-3e528abc {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+@keyframes nutEaseOut-3e528abc {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+.nutEase-enter-active[data-v-3e528abc],
+.nutEaseIn[data-v-3e528abc],
+.nutEase-leave-active[data-v-3e528abc],
+.nutEaseOut[data-v-3e528abc] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutEase-enter-active[data-v-3e528abc],
+.nutEaseIn[data-v-3e528abc] {
+  -webkit-animation-name: nutEaseIn-3e528abc;
+          animation-name: nutEaseIn-3e528abc;
+}
+.nutEase-leave-active[data-v-3e528abc],
+.nutEaseOut[data-v-3e528abc] {
+  -webkit-animation-name: nutEaseOut-3e528abc;
+          animation-name: nutEaseOut-3e528abc;
+}
+@-webkit-keyframes nutDropIn-3e528abc {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@keyframes nutDropIn-3e528abc {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@-webkit-keyframes nutDropOut-3e528abc {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+@keyframes nutDropOut-3e528abc {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+.nutDrop-enter-active[data-v-3e528abc],
+.nutDropIn[data-v-3e528abc],
+.nutDrop-leave-active[data-v-3e528abc],
+.nutDropOut[data-v-3e528abc] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutDrop-enter-active[data-v-3e528abc],
+.nutDropIn[data-v-3e528abc] {
+  -webkit-animation-name: nutDropIn-3e528abc;
+          animation-name: nutDropIn-3e528abc;
+}
+.nutDrop-leave-active[data-v-3e528abc],
+.nutDropOut[data-v-3e528abc] {
+  -webkit-animation-name: nutDropOut-3e528abc;
+          animation-name: nutDropOut-3e528abc;
+}
+@-webkit-keyframes rotation-3e528abc {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+@keyframes rotation-3e528abc {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+.nutRotate-enter-active[data-v-3e528abc],
+.nutRotateIn[data-v-3e528abc],
+.nutRotate-leave-active[data-v-3e528abc],
+.nutRotateOut[data-v-3e528abc] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutRotate-enter-active[data-v-3e528abc],
+.nutRotateIn[data-v-3e528abc] {
+  -webkit-animation-name: nutRotateIn;
+          animation-name: nutRotateIn;
+}
+.nutRotate-leave-active[data-v-3e528abc],
+.nutRotateOut[data-v-3e528abc] {
+  -webkit-animation-name: nutRotateOut;
+          animation-name: nutRotateOut;
+}
+.demo .nut-cell[data-v-3e528abc] {
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.demo .nut-cell .nut-cell__value[data-v-3e528abc] {
+  margin-right: 16rpx;
+}

src/sites/mobile-taro/vue/dist/sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}

src/sites/mobile-taro/vue/project.private.config.json

@@ -0,0 +1,23 @@
+{
+  "condition": {
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/address/demo",
+          "pathName": "pages/address/demo",
+          "query": "",
+          "scene": null
+        }
+      ]
+    }
+  }
+}

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,7 +1,8 @@
 export default {
   pages: [
     // 'pages/inputnumber/demo',
-    'pages/button/demo'
+    'pages/button/demo',
+    'pages/address/demo'
   ],
   window: {
     backgroundTextStyle: 'light',

src/sites/mobile-taro/vue/src/pages/address/demo.vue

@@ -0,0 +1,337 @@
+<template>
+  <view class="demo">
+    <h2>选择自定义地址</h2>
+    <nut-cell
+      title="选择地址"
+      :desc="one"
+      is-link
+      @click="showAddress"
+    ></nut-cell>
+
+    <nut-address
+      v-model:visible="normal"
+      :province="province"
+      :city="city"
+      :country="country"
+      :town="town"
+      @change="cal => onChange(cal, 'normal')"
+      @close="close1"
+      custom-address-title="请选择所在地区"
+    ></nut-address>
+
+    <h2>选择已有地址</h2>
+    <nut-cell
+      title="选择地址"
+      :desc="two"
+      is-link
+      @click="showAddressExist"
+    ></nut-cell>
+
+    <nut-address
+      v-model:visible="exist"
+      type="exist"
+      :exist-address="existAddress"
+      @change="cal => onChange(cal, 'exist')"
+      @close="close2"
+      :is-show-custom-address="false"
+      @selected="selected"
+      exist-address-title="配送至"
+    ></nut-address>
+
+    <h2>自定义图标</h2>
+    <nut-cell
+      title="选择地址"
+      :desc="three"
+      is-link
+      @click="showCustomImg"
+    ></nut-cell>
+
+    <nut-address
+      v-model:visible="customImg"
+      type="exist"
+      :exist-address="existAddress"
+      @change="cal => onChange(cal, 'customImg')"
+      @close="close3"
+      :is-show-custom-address="false"
+      @selected="selected"
+      :default-icon="defaultIcon"
+      :selected-icon="selectedIcon"
+      :close-btn-icon="closeBtnIcon"
+    ></nut-address>
+
+    <h2>自定义地址与已有地址切换</h2>
+    <nut-cell
+      title="选择地址"
+      :desc="four"
+      is-link
+      @click="showAddressOther"
+    ></nut-cell>
+
+    <nut-address
+      v-model:visible="other"
+      type="exist"
+      :exist-address="existAddress"
+      :province="province"
+      :city="city"
+      :country="country"
+      :town="town"
+      :back-btn-icon="backBtnIcon"
+      @change="cal => onChange(cal, 'other')"
+      @close="close4"
+      @selected="selected"
+      custom-and-exist-title="选择其他地址"
+      @switch-module="switchModule"
+      @close-mask="closeMask"
+    ></nut-address>
+  </view>
+</template>
+
+<script lang="ts">
+import { reactive, ref, toRefs } from 'vue';
+
+import { createComponent } from './../../../../../../packages/utils/create';
+import Address from './index.taro.vue';
+import Cell from './../cell/index.taro.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({
+  components: {
+    'nut-address': Address,
+    'nut-cell': Cell
+  },
+  props: {},
+  setup() {
+    const address = reactive({
+      province: [
+        { id: 1, name: '北京' },
+        { id: 2, name: '广西' },
+        { id: 3, name: '江西' },
+        { id: 4, name: '四川' }
+      ],
+      city: [
+        { id: 7, name: '朝阳区' },
+        { id: 8, name: '崇文区' },
+        { id: 9, name: '昌平区' },
+        { id: 6, name: '石景山区' }
+      ],
+      country: [
+        { id: 3, name: '八里庄街道' },
+        { id: 9, name: '北苑' },
+        { id: 4, name: '常营乡' }
+      ],
+      town: []
+    });
+
+    const showPopup = reactive({
+      normal: false,
+      exist: false,
+      customImg: false,
+      other: false
+    });
+
+    const icon = reactive({
+      selectedIcon: 'heart-fill',
+      defaultIcon: 'heart1',
+      closeBtnIcon: 'close',
+      backBtnIcon: 'left'
+    });
+
+    const existAddress = ref([
+      {
+        id: 1,
+        addressDetail: '',
+        cityName: '次渠镇',
+        countyName: '通州区',
+        provinceName: '北京市',
+        selectedAddress: true,
+        townName: ''
+      },
+      {
+        id: 2,
+        addressDetail: '',
+        cityName: '钓鱼岛全区',
+        countyName: '',
+        provinceName: '钓鱼岛',
+        selectedAddress: false,
+        townName: ''
+      },
+      {
+        id: 3,
+        addressDetail: '京东大厦',
+        cityName: '大兴区',
+        countyName: '科创十一街18号院',
+        provinceName: '北京市',
+        selectedAddress: false,
+        townName: ''
+      }
+    ]);
+
+    const text = reactive({
+      one: '请选择地址',
+      two: '请选择地址',
+      three: '请选择地址',
+      four: '请选择地址'
+    });
+
+    const showAddress = () => {
+      showPopup.normal = !showPopup.normal;
+    };
+
+    const onChange = (cal: CalBack, tag: string) => {
+      const name = (address as any)[cal.next];
+      if (name.length < 1) {
+        (showPopup as any)[tag] = false;
+      }
+    };
+    const close1 = (val: CalResult) => {
+      console.log(val);
+      text.one = val.data.addressStr;
+    };
+
+    const showAddressExist = () => {
+      showPopup.exist = true;
+    };
+
+    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;
+      } else {
+        text.two = val.data.addressStr;
+      }
+    };
+    const selected = (
+      prevExistAdd: AddressList,
+      nowExistAdd: RegionData,
+      arr: AddressList[]
+    ) => {
+      console.log(prevExistAdd);
+      console.log(nowExistAdd);
+    };
+
+    const showAddressOther = () => {
+      showPopup.other = true;
+    };
+    const showCustomImg = () => {
+      showPopup.customImg = true;
+    };
+
+    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;
+      } else {
+        text.three = val.data.addressStr;
+      }
+    };
+
+    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;
+      } else {
+        text.four = val.data.addressStr;
+      }
+    };
+
+    const switchModule = (val: CalResult) => {
+      if (val.type == 'custom') {
+        console.log('点击了“选择其他地址”按钮');
+      } else {
+        console.log('点击了自定义地址左上角的返回按钮');
+      }
+    };
+
+    const closeMask = (val: CalResult) => {
+      console.log('关闭弹层', val);
+    };
+
+    return {
+      showAddress,
+      showPopup,
+      onChange,
+      close1,
+      showAddressExist,
+      close2,
+      selected,
+      existAddress,
+      showAddressOther,
+      showCustomImg,
+      close3,
+      close4,
+      switchModule,
+      closeMask,
+      ...toRefs(icon),
+      ...toRefs(text),
+      ...toRefs(showPopup),
+      ...toRefs(address)
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.demo {
+  .nut-cell {
+    align-items: center;
+
+    .nut-cell__value {
+      margin-right: 8px;
+    }
+  }
+}
+</style>

src/sites/mobile-taro/vue/src/pages/address/index.taro.vue

@@ -5,6 +5,7 @@
     @click-overlay="clickOverlay"
     @open="closeWay = 'self'"
     v-model:visible="showPopup"
+    :class="classes"
   >
     <view-block class="nut-address">
       <view-block class="nut-address__header">
@@ -114,10 +115,13 @@
   </nut-popup>
 </template>
 <script lang="ts">
-import { reactive, ref, toRefs, watch, nextTick } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('address');
-import { TweenMax } from 'gsap';
+import { reactive, ref, toRefs, watch, nextTick, computed } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+import Icon from './../icon/index.taro.vue';
+import Popup from './../popup/index.taro.vue';
+
+const { create, componentName } = createComponent('address');
+
 interface RegionData {
   name: string;
   [key: string]: any;
@@ -207,6 +211,10 @@ export default create({
       default: 'left'
     }
   },
+  components: {
+    'nut-icon': Icon,
+    'nut-popup': Popup
+  },
   emits: [
     'update:visible',
     'type',
@@ -218,6 +226,13 @@ export default create({
   ],
 
   setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
     const regionLine = ref<null | HTMLElement>(null);
 
     const tabItemRef = reactive({
@@ -276,8 +291,8 @@ export default create({
       const name = (tabItemRef as any)[tabName.value[tabIndex.value]];
       nextTick(() => {
         if (name) {
-          const distance = name.offsetLeft;
-          TweenMax.to(regionLine.value, 0.5, { left: distance });
+          // const distance = name.offsetLeft;
+          // TweenMax.to(regionLine.value, 0.5, { left: distance });
         }
       });
     };
@@ -462,6 +477,7 @@ export default create({
     );
 
     return {
+      classes,
       showPopup,
       privateType,
       tabIndex,
@@ -487,5 +503,5 @@ export default create({
 </script>
 
 <style lang="scss">
-@import 'index.scss';
+@import '../../../../../../packages/__VUE/address/index.scss';
 </style>