通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/usercenter/address/edit/index.js

@@ -0,0 +1,356 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+import { fetchDeliveryAddress } from '../../../../services/address/fetchAddress';
+import { areaData } from '../../../../config/index';
+import { resolveAddress, rejectAddress } from './util';
+
+const innerPhoneReg = '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$';
+const innerNameReg = '^[a-zA-Z\\d\\u4e00-\\u9fa5]+$';
+const labelsOptions = [
+  { id: 0, name: '家' },
+  { id: 1, name: '公司' },
+];
+
+Page({
+  options: {
+    multipleSlots: true,
+  },
+  externalClasses: ['theme-wrapper-class'],
+  data: {
+    locationState: {
+      labelIndex: null,
+      addressId: '',
+      addressTag: '',
+      cityCode: '',
+      cityName: '',
+      countryCode: '',
+      countryName: '',
+      detailAddress: '',
+      districtCode: '',
+      districtName: '',
+      isDefault: false,
+      name: '',
+      phone: '',
+      provinceCode: '',
+      provinceName: '',
+      isEdit: false,
+      isOrderDetail: false,
+      isOrderSure: false,
+    },
+    areaData: areaData,
+    labels: labelsOptions,
+    areaPickerVisible: false,
+    submitActive: false,
+    visible: false,
+    labelValue: '',
+    columns: 3,
+  },
+  privateData: {
+    verifyTips: '',
+  },
+  onLoad(options) {
+    const { id } = options;
+    this.init(id);
+  },
+
+  onUnload() {
+    if (!this.hasSava) {
+      rejectAddress();
+    }
+  },
+
+  hasSava: false,
+
+  init(id) {
+    if (id) {
+      this.getAddressDetail(Number(id));
+    }
+  },
+  getAddressDetail(id) {
+    fetchDeliveryAddress(id).then((detail) => {
+      this.setData({ locationState: detail }, () => {
+        const { isLegal, tips } = this.onVerifyInputLegal();
+        this.setData({
+          submitActive: isLegal,
+        });
+        this.privateData.verifyTips = tips;
+      });
+    });
+  },
+  onInputValue(e) {
+    const { item } = e.currentTarget.dataset;
+    if (item === 'address') {
+      const { selectedOptions = [] } = e.detail;
+      this.setData(
+        {
+          'locationState.provinceCode': selectedOptions[0].value,
+          'locationState.provinceName': selectedOptions[0].label,
+          'locationState.cityName': selectedOptions[1].label,
+          'locationState.cityCode': selectedOptions[1].value,
+          'locationState.districtCode': selectedOptions[2].value,
+          'locationState.districtName': selectedOptions[2].label,
+          areaPickerVisible: false,
+        },
+        () => {
+          const { isLegal, tips } = this.onVerifyInputLegal();
+          this.setData({
+            submitActive: isLegal,
+          });
+          this.privateData.verifyTips = tips;
+        },
+      );
+    } else {
+      const { value = '' } = e.detail;
+      this.setData(
+        {
+          [`locationState.${item}`]: value,
+        },
+        () => {
+          const { isLegal, tips } = this.onVerifyInputLegal();
+          this.setData({
+            submitActive: isLegal,
+          });
+          this.privateData.verifyTips = tips;
+        },
+      );
+    }
+  },
+  onPickArea() {
+    this.setData({ areaPickerVisible: true });
+  },
+  onPickLabels(e) {
+    const { item } = e.currentTarget.dataset;
+    const {
+      locationState: { labelIndex = undefined },
+      labels = [],
+    } = this.data;
+    let payload = {
+      labelIndex: item,
+      addressTag: labels[item].name,
+    };
+    if (item === labelIndex) {
+      payload = { labelIndex: null, addressTag: '' };
+    }
+    this.setData({
+      'locationState.labelIndex': payload.labelIndex,
+    });
+    this.triggerEvent('triggerUpdateValue', payload);
+  },
+  addLabels() {
+    this.setData({
+      visible: true,
+    });
+  },
+  confirmHandle() {
+    const { labels, labelValue } = this.data;
+    this.setData({
+      visible: false,
+      labels: [...labels, { id: labels[labels.length - 1].id + 1, name: labelValue }],
+      labelValue: '',
+    });
+  },
+  cancelHandle() {
+    this.setData({
+      visible: false,
+      labelValue: '',
+    });
+  },
+  onCheckDefaultAddress({ detail }) {
+    const { value } = detail;
+    this.setData({
+      'locationState.isDefault': value,
+    });
+  },
+
+  onVerifyInputLegal() {
+    const { name, phone, detailAddress, districtName } = this.data.locationState;
+    const prefixPhoneReg = String(this.properties.phoneReg || innerPhoneReg);
+    const prefixNameReg = String(this.properties.nameReg || innerNameReg);
+    const nameRegExp = new RegExp(prefixNameReg);
+    const phoneRegExp = new RegExp(prefixPhoneReg);
+
+    if (!name || !name.trim()) {
+      return {
+        isLegal: false,
+        tips: '请填写收货人',
+      };
+    }
+    if (!nameRegExp.test(name)) {
+      return {
+        isLegal: false,
+        tips: '收货人仅支持输入中文、英文（区分大小写）、数字',
+      };
+    }
+    if (!phone || !phone.trim()) {
+      return {
+        isLegal: false,
+        tips: '请填写手机号',
+      };
+    }
+    if (!phoneRegExp.test(phone)) {
+      return {
+        isLegal: false,
+        tips: '请填写正确的手机号',
+      };
+    }
+    if (!districtName || !districtName.trim()) {
+      return {
+        isLegal: false,
+        tips: '请选择省市区信息',
+      };
+    }
+    if (!detailAddress || !detailAddress.trim()) {
+      return {
+        isLegal: false,
+        tips: '请完善详细地址',
+      };
+    }
+    if (detailAddress && detailAddress.trim().length > 50) {
+      return {
+        isLegal: false,
+        tips: '详细地址不能超过50个字符',
+      };
+    }
+    return {
+      isLegal: true,
+      tips: '添加成功',
+    };
+  },
+
+  builtInSearch({ code, name }) {
+    return new Promise((resolve, reject) => {
+      wx.getSetting({
+        success: (res) => {
+          if (res.authSetting[code] === false) {
+            wx.showModal({
+              title: `获取${name}失败`,
+              content: `获取${name}失败，请在【右上角】-小程序【设置】项中，将【${name}】开启。`,
+              confirmText: '去设置',
+              confirmColor: '#FA550F',
+              cancelColor: '取消',
+              success(res) {
+                if (res.confirm) {
+                  wx.openSetting({
+                    success(settinRes) {
+                      if (settinRes.authSetting[code] === true) {
+                        resolve();
+                      } else {
+                        console.warn('用户未打开权限', name, code);
+                        reject();
+                      }
+                    },
+                  });
+                } else {
+                  reject();
+                }
+              },
+              fail() {
+                reject();
+              },
+            });
+          } else {
+            resolve();
+          }
+        },
+        fail() {
+          reject();
+        },
+      });
+    });
+  },
+
+  onSearchAddress() {
+    this.builtInSearch({ code: 'scope.userLocation', name: '地址位置' }).then(() => {
+      wx.chooseLocation({
+        success: (res) => {
+          if (res.name) {
+            this.triggerEvent('addressParse', {
+              address: res.address,
+              name: res.name,
+              latitude: res.latitude,
+              longitude: res.longitude,
+            });
+          } else {
+            Toast({
+              context: this,
+              selector: '#t-toast',
+              message: '地点为空，请重新选择',
+              icon: '',
+              duration: 1000,
+            });
+          }
+        },
+        fail: function (res) {
+          console.warn(`wx.chooseLocation fail: ${JSON.stringify(res)}`);
+          if (res.errMsg !== 'chooseLocation:fail cancel') {
+            Toast({
+              context: this,
+              selector: '#t-toast',
+              message: '地点错误，请重新选择',
+              icon: '',
+              duration: 1000,
+            });
+          }
+        },
+      });
+    });
+  },
+  formSubmit() {
+    const { submitActive } = this.data;
+    if (!submitActive) {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: this.privateData.verifyTips,
+        icon: '',
+        duration: 1000,
+      });
+      return;
+    }
+    const { locationState } = this.data;
+
+    this.hasSava = true;
+
+    resolveAddress({
+      saasId: '88888888',
+      uid: `88888888205500`,
+      authToken: null,
+      id: locationState.addressId,
+      addressId: locationState.addressId,
+      phone: locationState.phone,
+      name: locationState.name,
+      countryName: locationState.countryName,
+      countryCode: locationState.countryCode,
+      provinceName: locationState.provinceName,
+      provinceCode: locationState.provinceCode,
+      cityName: locationState.cityName,
+      cityCode: locationState.cityCode,
+      districtName: locationState.districtName,
+      districtCode: locationState.districtCode,
+      detailAddress: locationState.detailAddress,
+      isDefault: locationState.isDefault === 1 ? 1 : 0,
+      addressTag: locationState.addressTag,
+      latitude: locationState.latitude,
+      longitude: locationState.longitude,
+      storeId: null,
+    });
+
+    wx.navigateBack({ delta: 1 });
+  },
+
+  getWeixinAddress(e) {
+    const { locationState } = this.data;
+    const weixinAddress = e.detail;
+    this.setData(
+      {
+        locationState: { ...locationState, ...weixinAddress },
+      },
+      () => {
+        const { isLegal, tips } = this.onVerifyInputLegal();
+        this.setData({
+          submitActive: isLegal,
+        });
+        this.privateData.verifyTips = tips;
+      },
+    );
+  },
+});

mini-program/pages/usercenter/address/edit/index.json

@@ -0,0 +1,16 @@
+{
+  "navigationBarTitleText": "添加新地址",
+  "usingComponents": {
+    "t-textarea": "tdesign-miniprogram/textarea/textarea",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-switch": "tdesign-miniprogram/switch/switch",
+    "t-location": "/pages/usercenter/components/t-location/index",
+    "t-cascader": "tdesign-miniprogram/cascader/cascader"
+  }
+}

mini-program/pages/usercenter/address/edit/index.wxml

@@ -0,0 +1,134 @@
+<view class="address-detail">
+  <view class="divider-line" />
+  <t-location
+    title="获取微信收获地址"
+    isCustomStyle
+    t-class="address-detail-wx-location"
+    bind:change="getWeixinAddress"
+  >
+    <t-icon class="address-detail-wx-arrow" name="arrow_forward" prefix="wr" color="#bbb" size="32rpx" />
+  </t-location>
+  <view class="divider-line" />
+  <view class="form-address">
+    <form class="form-content">
+      <t-cell-group>
+        <t-cell class="form-cell" t-class-title="t-cell-title" title="收货人" t-class-note="t-cell-note">
+          <t-input
+            class="t-input"
+            slot="note"
+            t-class="field-text"
+            borderless
+            data-item="name"
+            maxlength="20"
+            type="text"
+            value="{{locationState.name}}"
+            placeholder="您的姓名"
+            bind:change="onInputValue"
+          />
+        </t-cell>
+        <t-cell class="form-cell" t-class-title="t-cell-title" title="手机号">
+          <t-input
+            slot="note"
+            class="t-input"
+            t-class="field-text"
+            borderless
+            type="number"
+            value="{{locationState.phone}}"
+            maxlength="11"
+            placeholder="联系您的手机号"
+            bind:change="onInputValue"
+            data-item="phone"
+          />
+        </t-cell>
+        <t-cell class="form-cell" t-class-title="t-cell-title" title="地区">
+          <t-input
+            slot="note"
+            class="t-input"
+            t-class="field-text"
+            borderless
+            placeholder="省/市/区"
+            data-item="address"
+            value="{{locationState.provinceName ? locationState.provinceName+'/':'' }}{{locationState.cityName ? locationState.cityName+'/':''}}{{locationState.districtName}}"
+            catch:tap="onPickArea"
+            disabled
+          />
+          <t-icon slot="right-icon" t-class="map" prefix="wr" name="location" catch:tap="onSearchAddress" />
+        </t-cell>
+        <t-cell class="form-cell" t-class-title="t-cell-title" title="详细地址" bordered="{{false}}">
+          <view slot="note" class="textarea__wrapper">
+            <t-textarea
+              slot="note"
+              type="text"
+              value="{{locationState.detailAddress}}"
+              placeholder="门牌号等(例如:10栋1001号)"
+              autosize
+              bind:change="onInputValue"
+              data-item="detailAddress"
+            />
+          </view>
+        </t-cell>
+
+        <view class="divider-line" />
+        <t-cell
+          class="form-cell"
+          t-class-note="t-cell-note address__tag"
+          t-class-title="t-cell-title"
+          title="标签"
+          bordered="{{false}}"
+        >
+          <view class="t-input address-flex-box" slot="note">
+            <t-button
+              wx:for="{{labels}}"
+              wx:for-item="label"
+              wx:key="index"
+              size="extra-small"
+              t-class="label-list {{locationState.labelIndex === index ? 'active-btn':''}}"
+              bindtap="onPickLabels"
+              data-item="{{index}}"
+            >
+              {{label.name}}
+            </t-button>
+            <t-button size="extra-small" t-class="label-list" bindtap="addLabels">
+              <t-icon name="add" size="40rpx" color="#bbb" />
+            </t-button>
+          </view>
+        </t-cell>
+        <view class="divider-line" />
+        <t-cell title="设置为默认收货地址" bordered="{{false}}">
+          <t-switch
+            value="{{locationState.isDefault}}"
+            slot="note"
+            colors="{{['#0ABF5B', '#c6c6c6']}}"
+            bind:change="onCheckDefaultAddress"
+          />
+        </t-cell>
+      </t-cell-group>
+      <view class="submit">
+        <t-button shape="round" block disabled="{{!submitActive}}" bind:tap="formSubmit"> 保存 </t-button>
+      </view>
+    </form>
+  </view>
+  <t-cascader
+    data-item="address"
+    data-type="1"
+    visible="{{areaPickerVisible}}"
+    theme="tab"
+    options="{{areaData}}"
+    value="{{locationState.districtCode}}"
+    title="选择地区"
+    bind:change="onInputValue"
+  ></t-cascader>
+</view>
+<t-dialog
+  visible="{{visible}}"
+  t-class-confirm="dialog__button-confirm"
+  t-class-cancel="dialog__button-cancel"
+  title="填写标签名称"
+  confirm-btn="确定"
+  cancel-btn="取消"
+  bind:confirm="confirmHandle"
+  bind:cancel="cancelHandle"
+>
+  <t-input slot="content" class="dialog__input" model:value="{{labelValue}}" placeholder="请输入标签名称" borderless />
+</t-dialog>
+<t-toast id="t-toast" />

mini-program/pages/usercenter/address/edit/index.wxss

@@ -0,0 +1,95 @@
+page {
+  background-color: #f5f5f5;
+}
+page .divider-line {
+  width: 100%;
+  height: 20rpx;
+  background-color: #f5f5f5;
+}
+.address-flex-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+.address-detail {
+  font-size: 30rpx;
+}
+.address-detail-wx-location {
+  background: #fff;
+  padding: 24rpx 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.address-detail-wx-arrow {
+  align-items: flex-end;
+}
+
+.form-cell .t-cell__title {
+  width: 144rpx;
+  padding-right: 32rpx;
+  flex: none !important;
+}
+
+.textarea__wrapper {
+  width: 100%;
+}
+
+.textarea__wrapper .t-textarea {
+  padding: 0 !important;
+}
+
+.form-address .map {
+  font-size: 48rpx !important;
+  margin-left: 20rpx;
+  color: #9d9d9f;
+}
+
+.address__tag {
+  justify-content: flex-start !important;
+}
+
+.form-address .label-list {
+  background: #f5f5f5;
+  color: #333;
+  min-width: 100rpx;
+  margin-right: 32rpx;
+  font-size: 26rpx;
+  border: 2rpx solid transparent;
+  width: auto;
+}
+.form-address .label-list::after {
+  content: none;
+}
+.form-address .active-btn {
+  color: #fa4126;
+  border: 2rpx solid #fa4126;
+  background: rgba(255, 95, 21, 0.04);
+}
+.form-address .active-btn::after {
+  border: 4rpx solid #ff5f15;
+}
+
+.submit {
+  box-sizing: border-box;
+  padding: 64rpx 30rpx 88rpx 30rpx;
+}
+.submit .btn-submit-address {
+  background: #fa4126 !important;
+  color: #fff !important;
+}
+
+.dialog__button-confirm {
+  color: #fa4126 !important;
+}
+
+.form-address .form-content {
+  --td-input-vertical-padding: 0;
+}
+
+.dialog__input {
+  margin-top: 32rpx;
+  border-radius: 8rpx;
+  box-sizing: border-box;
+  --td-input-vertical-padding: 12px;
+  --td-input-bg-color: #f3f3f3;
+}

mini-program/pages/usercenter/address/edit/util.js

@@ -0,0 +1,33 @@
+let addressPromise = [];
+
+/** 地址编辑Promise */
+export const getAddressPromise = () => {
+  let resolver;
+  let rejecter;
+  const nextPromise = new Promise((resolve, reject) => {
+    resolver = resolve;
+    rejecter = reject;
+  });
+
+  addressPromise.push({ resolver, rejecter });
+
+  return nextPromise;
+};
+
+/** 用户保存了一个地址 */
+export const resolveAddress = (address) => {
+  const allAddress = [...addressPromise];
+  addressPromise = [];
+
+  console.info('用户保存了一个地址', address);
+
+  allAddress.forEach(({ resolver }) => resolver(address));
+};
+
+/** 取消编辑 */
+export const rejectAddress = () => {
+  const allAddress = [...addressPromise];
+  addressPromise = [];
+
+  allAddress.forEach(({ rejecter }) => rejecter(new Error('cancel')));
+};

mini-program/pages/usercenter/address/list/index.js

@@ -0,0 +1,191 @@
+/* eslint-disable no-param-reassign */
+import { fetchDeliveryAddressList } from '../../../../services/address/fetchAddress';
+import Toast from 'tdesign-miniprogram/toast/index';
+import { resolveAddress, rejectAddress } from './util';
+import { getAddressPromise } from '../edit/util';
+
+Page({
+  data: {
+    addressList: [],
+    deleteID: '',
+    showDeleteConfirm: false,
+    isOrderSure: false,
+  },
+
+  /** 选择模式 */
+  selectMode: false,
+  /** 是否已经选择地址，不置为true的话页面离开时会触发取消选择行为 */
+  hasSelect: false,
+
+  onLoad(query) {
+    const { selectMode = '', isOrderSure = '', id = '' } = query;
+    this.setData({
+      isOrderSure: !!isOrderSure,
+      id,
+    });
+    this.selectMode = !!selectMode;
+    this.init();
+  },
+
+  init() {
+    this.getAddressList();
+  },
+  onUnload() {
+    if (this.selectMode && !this.hasSelect) {
+      rejectAddress();
+    }
+  },
+  getAddressList() {
+    const { id } = this.data;
+    fetchDeliveryAddressList().then((addressList) => {
+      addressList.forEach((address) => {
+        if (address.id === id) {
+          address.checked = true;
+        }
+      });
+      this.setData({ addressList });
+    });
+  },
+  getWXAddressHandle() {
+    wx.chooseAddress({
+      success: (res) => {
+        if (res.errMsg.indexOf('ok') === -1) {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: res.errMsg,
+            icon: '',
+            duration: 1000,
+          });
+          return;
+        }
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: '添加成功',
+          icon: '',
+          duration: 1000,
+        });
+        const { length: len } = this.data.addressList;
+        this.setData({
+          [`addressList[${len}]`]: {
+            name: res.userName,
+            phoneNumber: res.telNumber,
+            address: `${res.provinceName}${res.cityName}${res.countryName}${res.detailInfo}`,
+            isDefault: 0,
+            tag: '微信地址',
+            id: len,
+          },
+        });
+      },
+    });
+  },
+  confirmDeleteHandle({ detail }) {
+    const { id } = detail || {};
+    if (id !== undefined) {
+      this.setData({ deleteID: id, showDeleteConfirm: true });
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '地址删除成功',
+        theme: 'success',
+        duration: 1000,
+      });
+    } else {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '需要组件库发新版才能拿到地址ID',
+        icon: '',
+        duration: 1000,
+      });
+    }
+  },
+  deleteAddressHandle(e) {
+    const { id } = e.currentTarget.dataset;
+    this.setData({
+      addressList: this.data.addressList.filter((address) => address.id !== id),
+      deleteID: '',
+      showDeleteConfirm: false,
+    });
+  },
+  editAddressHandle({ detail }) {
+    this.waitForNewAddress();
+
+    const { id } = detail || {};
+    wx.navigateTo({ url: `/pages/usercenter/address/edit/index?id=${id}` });
+  },
+  selectHandle({ detail }) {
+    if (this.selectMode) {
+      this.hasSelect = true;
+      resolveAddress(detail);
+      wx.navigateBack({ delta: 1 });
+    } else {
+      this.editAddressHandle({ detail });
+    }
+  },
+  createHandle() {
+    this.waitForNewAddress();
+    wx.navigateTo({ url: '/pages/usercenter/address/edit/index' });
+  },
+
+  waitForNewAddress() {
+    getAddressPromise()
+      .then((newAddress) => {
+        let addressList = [...this.data.addressList];
+
+        newAddress.phoneNumber = newAddress.phone;
+        newAddress.address = `${newAddress.provinceName}${newAddress.cityName}${newAddress.districtName}${newAddress.detailAddress}`;
+        newAddress.tag = newAddress.addressTag;
+
+        if (!newAddress.addressId) {
+          newAddress.id = `${addressList.length}`;
+          newAddress.addressId = `${addressList.length}`;
+
+          if (newAddress.isDefault === 1) {
+            addressList = addressList.map((address) => {
+              address.isDefault = 0;
+
+              return address;
+            });
+          } else {
+            newAddress.isDefault = 0;
+          }
+
+          addressList.push(newAddress);
+        } else {
+          addressList = addressList.map((address) => {
+            if (address.addressId === newAddress.addressId) {
+              return newAddress;
+            }
+            return address;
+          });
+        }
+
+        addressList.sort((prevAddress, nextAddress) => {
+          if (prevAddress.isDefault && !nextAddress.isDefault) {
+            return -1;
+          }
+          if (!prevAddress.isDefault && nextAddress.isDefault) {
+            return 1;
+          }
+          return 0;
+        });
+
+        this.setData({
+          addressList: addressList,
+        });
+      })
+      .catch((e) => {
+        if (e.message !== 'cancel') {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '地址编辑发生错误',
+            icon: '',
+            duration: 1000,
+          });
+        }
+      });
+  },
+});

mini-program/pages/usercenter/address/list/index.json

@@ -0,0 +1,11 @@
+{
+  "navigationBarTitleText": "收货地址",
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-image": "/components/webp-image/index",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-address-item": "../../components/ui-address-item/index",
+    "t-location": "../../components/t-location/index",
+    "t-empty": "tdesign-miniprogram/empty/empty"
+  }
+}

mini-program/pages/usercenter/address/list/index.wxml

@@ -0,0 +1,49 @@
+<view class="address-container">
+	<view class="address-list" wx:if="{{addressList.length > 0}}">
+		<block
+		  wx:for="{{addressList}}"
+		  wx:for-index="index"
+		  wx:for-item="address"
+		  wx:key="addressId"
+		>
+			<t-address-item
+			  isDrawLine="{{index+1 !== addressList.length}}"
+			  extra-space="{{extraSpace}}"
+			  class-prefix="ym"
+			  address="{{address}}"
+			  data-id="{{address.id}}"
+			  bind:onSelect="selectHandle"
+			  bind:onDelete="deleteAddressHandle"
+			  bind:onEdit="editAddressHandle"
+			/>
+		</block>
+	</view>
+	<view wx:else class="no-address">
+		<t-empty icon="" description="暂无收货地址，赶快添加吧" />
+	</view>
+	<view class="bottom-fixed">
+		<view class="btn-wrap">
+			<t-location
+			  title="微信地址导入"
+			  isOrderSure="{{isOrderSure}}"
+			  isDisabledBtn="{{addressList.length >= 20}}"
+			  navigateUrl="/pages/usercenter/address/edit/index"
+				navigateEvent="onWeixinAddressPassed"	
+			  t-class="location-btn"
+			  isCustomStyle="{{true}}"
+				bind:navigate="waitForNewAddress"
+			/>
+			<view class="address-btn {{addressList.length >= 20 ? 'btn-default':''}}" bind:tap="createHandle">
+				<t-icon
+				  name="add"
+				  size="48rpx"
+				  color="#fff"
+				  t-class="custom-class"
+				/>
+				<text>新建收货地址</text>
+			</view>
+		</view>
+		<view class="footer" wx:if="{{addressList.length >= 20}}">最多支持添加20个收货地址</view>
+	</view>
+</view>
+<t-toast id="t-toast" />

mini-program/pages/usercenter/address/list/index.wxss

@@ -0,0 +1,109 @@
+page {
+  background: #f5f5f5;
+  height: 100%;
+}
+.address-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 172rpx);
+}
+.address-container .address-list {
+  font-size: 24rpx;
+  background-color: #ffffff;
+  -webkit-overflow-scrolling: touch;
+}
+.address-list .no-address {
+  width: 750rpx;
+  padding-top: 30vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+.address-list .no-address__icon {
+  width: 224rpx;
+  height: 224rpx;
+}
+.address-list .no-address__text {
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: #999999;
+  margin-top: 24rpx;
+}
+.address-container .bottom-fixed {
+  border-top: 1rpx solid #e5e5e5;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  padding: 12rpx 32rpx calc(env(safe-area-inset-bottom) + 12rpx) 32rpx;
+}
+.address-container .btn-wrap {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.address-container .btn-wrap .location-btn {
+  width: 332rpx;
+  height: 88rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ffffff;
+  color: #333;
+  position: relative;
+}
+.address-container .btn-wrap .location-btn::after {
+  content: '';
+  position: absolute; /* 把父视图设置为relative，方便定位*/
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: 88rpx;
+  border: #dddddd 2rpx solid;
+}
+.address-container .btn-wrap .address-btn {
+  width: 332rpx;
+  height: 88rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fa4126;
+  border-radius: 44rpx;
+  color: #fff;
+}
+.address-container .btn-wrap .btn-default {
+  background: #c6c6c6;
+}
+.address-container .bottom-fixed .footer {
+  margin-top: 10rpx;
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #ff2525;
+  line-height: 60rpx;
+  height: 60rpx;
+}
+.address-container .message {
+  margin-top: 48rpx;
+}
+.address-container .custom-class {
+  margin-right: 12rpx;
+  font-weight: normal;
+}

mini-program/pages/usercenter/address/list/util.js

@@ -0,0 +1,31 @@
+let addressPromise = [];
+
+/** 获取一个地址选择Promise */
+export const getAddressPromise = () => {
+  let resolver;
+  let rejecter;
+  const nextPromise = new Promise((resolve, reject) => {
+    resolver = resolve;
+    rejecter = reject;
+  });
+
+  addressPromise.push({ resolver, rejecter });
+
+  return nextPromise;
+};
+
+/** 用户选择了一个地址 */
+export const resolveAddress = (address) => {
+  const allAddress = [...addressPromise];
+  addressPromise = [];
+
+  allAddress.forEach(({ resolver }) => resolver(address));
+};
+
+/** 用户没有选择任何地址只是返回上一页了 */
+export const rejectAddress = () => {
+  const allAddress = [...addressPromise];
+  addressPromise = [];
+
+  allAddress.forEach(({ rejecter }) => rejecter(new Error('cancel')));
+};