xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/ConfirmOrder/components/AddressEdit/index.js

@@ -0,0 +1,343 @@
+// src/ConfirmOrder/components/AddressEdit/index.js
+import {
+  getCityList,
+  getAddressInfo,
+  deleteAddress,
+  updateAddress,
+  createAddress
+} from "../../../common/api/confirmOrder"
+import Dialog from '@vant/weapp/dialog/dialog';
+const computedBehavior = require('miniprogram-computed').behavior
+
+Component({
+  behaviors: [computedBehavior],
+  options: {
+    styleIsolation: 'shared',
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    addressList: {
+      type: Array,
+      value: () => [],
+    },
+    addressInfo: {
+      type: Object,
+      value: () => {},
+    },
+    addressQuery: {
+      type: Object,
+      value: () => {},
+    },
+    isShowEditAddress: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    // 客户信息等
+    address: {
+      receiver: "",
+      phone: "",
+      area: "",
+      detail: "",
+      province: "",
+      city: "",
+      county: "",
+    },
+    cityList: [],
+    isdefault: false, // 是否默认收货地址
+    showArea: false, // 省市区显隐
+    areaList: {}, // 省市区数据
+    selectCountyId: '', // 选中的城市id
+  },
+  lifetimes: {
+    attached: async function () {
+      // 编辑需要调这个接口
+      if (this.data.addressQuery && this.data.addressQuery.id) {
+        let params = {
+          address_id: this.data.addressQuery.id
+        }
+        let result = await getAddressInfo(params)
+        this.initAddressInfo(result)
+      }
+      this.initCityList()
+    },
+  },
+  computed: {
+    // //用于标示进入编辑页时是新增（new）/编辑（edit）
+    isNew(data) {
+      return !data.addressQuery.id;
+    },
+    // // 用于标示是否第一次新增地址
+    haveAddress(data) {
+      return data.addressQuery.haveAddress;
+    },
+    // // 用于标示页面是来自订单(true)还是个人中心(false)
+    pageFlag(data) {
+      return data.addressQuery.selectable;
+    },
+    // 用于正则校验每个输入框的数组
+    dataArray(data) {
+      let arr = [];
+      for (const item in data.address) {
+        arr.push({
+          key: item,
+          value: data.address[item],
+        });
+      }
+      return arr;
+    },
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 保存地址
+    saveAddress(e) {
+      if (!e.detail?.noCheck) {
+        let flag = this.checkValue(this.data.dataArray);
+        if (flag !== true) {
+          wx.showToast({
+            title: flag,
+            icon: 'none',
+            duration: 2000
+          })
+          return;
+        }
+      }
+      let request = this.data.isNew ? createAddress : updateAddress
+      if (e.detail.provinceName) {
+        request = createAddress
+      }
+      let params = {
+        receiver: e.detail.provinceName ? e.detail.userName : this.data.address.receiver, // 收件人
+        phone: e.detail.provinceName ? e.detail.telNumber : this.data.address.phone, // 手机号码
+        province: e.detail.provinceName ? e.detail.provinceName : this.data.address.province, // 省
+        city: e.detail.provinceName ? e.detail.cityName : this.data.address.city, // 市
+        county: e.detail.provinceName ? e.detail.countyName : this.data.address.county, //区/县
+        detail: e.detail.provinceName ? e.detail.detailInfo : this.data.address.detail, // 详细地址
+        is_default: e.detail.provinceName ? 0 : (this.data.isdefault ? 1 : 0), // 是否设为默地址,
+        id: e.detail.provinceName ? null : (this.data.address.id || null),
+      };
+      console.log(params);
+      wx.showLoading({
+        mask: true,
+        title: '加载中'
+      })
+      request(params).then(res => {
+          if (res.data.code === 0) {
+            this.triggerEvent("updataData", {
+              addressInfo: {
+                ...params,
+                ...res.data.data,
+              },
+              isShowEditAddress: false
+            })
+            this.triggerEvent("initConfirmOrderInfo")
+          }
+        }).catch((err) => console.log(err))
+        .finally(() => {
+          wx.hideLoading()
+        })
+    },
+    // 删除地址
+    deleteAddress() {
+      Dialog.confirm({
+          context: this,
+          message: '是否确认删除地址？',
+        }).then(() => {
+          let params = {
+            id: this.data.address.id
+          }
+          wx.showLoading({
+            mask: true,
+            title: '加载中'
+          })
+          deleteAddress(params).then(res => {
+              if (res.data.code === 0) {
+                if (this.data.addressInfo.id === this.data.address.id) {
+                  this.triggerEvent("updataData", {
+                    addressInfo: {},
+                  })
+                }
+                this.triggerEvent("updataData", {
+                  isShowEditAddress: false
+                })
+                this.triggerEvent("initConfirmOrderInfo")
+              }
+            }).catch((err) => console.log(err))
+            .finally(() => {
+              wx.hideLoading()
+            })
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 选择省市区---确认
+    confirmArea(e) {
+      let data = e.detail.values
+      this.setData({
+        showArea: false,
+        ['address.province']: data[0] ? data[0].name : '',
+        ['address.city']: data[1] ? data[1].name : '',
+        ['address.county']: data[2] ? data[2].name : '',
+        ['address.area']: data.map(res => res.name).join("/")
+      })
+      // this.addressChanged = true;
+    },
+    // 获取收货地址信息
+    initCityList() {
+      const areaList = {
+        province_list: {},
+        city_list: {},
+        county_list: {},
+      }
+      getCityList().then(res => {
+        if (res.data.code === 0) {
+          this.setData({
+            cityList: res.data.data
+          })
+          // 省
+          this.data.cityList.forEach(province => {
+            if (province.name === this.data.address.province) {
+              this.setData({
+                selectCountyId: province.region_id
+              })
+            }
+            areaList.province_list[province.region_id] = province.name
+            // 市
+            province.cities.forEach(city => {
+              if (province.name === this.data.address.province && city.name === this.data.address.city) {
+                this.setData({
+                  selectCountyId: city.region_id
+                })
+              }
+              areaList.city_list[city.region_id] = city.name
+              // 区
+              city.counties.forEach(county => {
+                if (
+                  province.name === this.data.address.province &&
+                  city.name === this.data.address.city &&
+                  county.name === this.data.address.county
+                ) {
+                  this.setData({
+                    selectCountyId: county.region_id
+                  })
+                }
+                areaList.county_list[county.region_id] = county.name
+              })
+            })
+          })
+          this.setData({
+            areaList
+          })
+        }
+      })
+    },
+    // 编辑时获取地址详情回填
+    initAddressInfo(res) {
+      if (res.data.code === 0) {
+        let {
+          province,
+          city,
+          county
+        } = res.data.data
+        res.data.data.area =
+          `${province}` +
+          (city ? `/${city}` : "") +
+          (county ? `/${county}` : "");
+        this.setData({
+          address: res.data.data,
+          isdefault: res.data.data.is_default == 1
+        })
+      }
+    },
+    changeMsg(event) {
+      let newData = `address.${event.currentTarget.dataset.type}`
+      this.setData({
+        [newData]: event.detail
+      })
+    },
+    changeTel(event) {
+      const phone = event.detail;
+      if (phone) {
+        // 只能输入整数
+        if (!/^\d+$/.test(phone)) {
+          this.setData({
+            ['address.phone']: this.data.address.phone
+          })
+          return false
+        }
+      }
+      this.setData({
+        ['address.phone']: phone
+      })
+    },
+    // 显示省市区
+    showArea() {
+      this.setData({
+        showArea: !this.data.showArea
+      })
+    },
+    changeSwitch(e) {
+      this.setData({
+        isdefault: e.detail
+      })
+    },
+    // 所有输入框校验
+    checkValue(val) {
+      let flag = true;
+      for (let item of val) {
+        switch (item.key) {
+          case "receiver":
+            if (item.value || item.value.length > 0) {
+              continue;
+            } else {
+              flag = "请填写收货人姓名";
+              return flag;
+            }
+            break
+          case "phone":
+            if (item.value || item.value.length > 0) {
+              if (/^[1]([3-9])[0-9]{9}$/.test(item.value)) {
+                continue;
+              } else {
+                flag = "手机号格式错误";
+                return flag;
+              }
+            } else {
+              flag = "请填写手机号码";
+              return flag;
+            }
+            break
+          case "area":
+            if (item.value || item.value.length > 0) {
+              continue;
+            } else {
+              flag = "请选择所在地区";
+              return flag;
+            }
+            break
+          case "detail":
+            if (item.value || item.value.length > 0) {
+              continue;
+            } else {
+              flag = "请填写详细地址";
+              return flag;
+            }
+            break
+          default:
+            break;
+        }
+      }
+      return true;
+    },
+  }
+})

package/miniprogram_dist/ConfirmOrder/components/AddressEdit/index.json

@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-field": "@vant/weapp/field/index",
+    "van-switch": "@vant/weapp/switch/index",
+    "van-popup": "@vant/weapp/popup/index",
+    "van-area": "@vant/weapp/area/index",
+    "van-dialog": "@vant/weapp/dialog/index",
+    "WechatAddress": "../WechatAddress/index"
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/AddressEdit/index.less

@@ -0,0 +1,98 @@
+@import '../../../common/css/theme.wxss';
+
+.address-edit-content {
+  padding-top: 16rpx;
+
+  .input-wrapper {
+    background: white;
+
+    .van-field__label {
+      font-size: 28rpx;
+      color: #333333;
+    }
+  }
+
+  .default-wrapper {
+    margin-top: 16rpx;
+    height: 112rpx;
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ET2 {
+      font-size: 28rpx;
+      color: #333333;
+    }
+
+    .van-switch {
+      border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
+      background-color: rgba(245, 245, 245, 1);
+
+      .van-switch__node {
+        box-shadow: none;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        background: rgba(255, 255, 255, 1);
+        width: 20px;
+        height: 20px;
+        top: 1px;
+        left: 1px;
+      }
+    }
+
+    .van-switch--on {
+      background-color: #1989fa;
+    }
+  }
+
+  .finish-btn {
+    box-sizing: border-box;
+    border-top: 0.02rem solid #eee;
+    position: fixed;
+    margin: auto;
+    left: 0;
+    right: 0;
+    background: #fff;
+    bottom: 0;
+    z-index: 2;
+
+    .finish-btn-wrapper {
+      padding: 16rpx 28rpx;
+    }
+
+    .finish {
+      padding: 20rpx 0;
+      border-radius: 40rpx;
+      text-align: center;
+      background: #09bb07;
+      color: white;
+    }
+
+    .finish-double {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .cancel-btn {
+        text-align: center;
+        width: 212rpx;
+        padding: 16rpx 0;
+        margin-right: 24rpx;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 40rpx;
+        border: 2rpx solid rgba(183, 183, 183, 1);
+      }
+
+      .finish2 {
+        width: 450rpx;
+        padding: 20rpx 0;
+        border-radius: 40rpx;
+        text-align: center;
+        background: #09bb07;
+        color: #fff;
+      }
+    }
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/AddressEdit/index.wxml

@@ -0,0 +1,39 @@
+<!--src/ConfirmOrder/components/AddressEdit/index.wxml-->
+<view class="address-edit-content">
+  <van-dialog id="van-dialog" />
+  <!-- 获取微信收货地址 -->
+  <WechatAddress 
+    addressList="{{ addressList }}"
+    bind:createAddress="saveAddress"
+  ></WechatAddress>
+  <view class="input-wrapper">
+    <van-field value="{{ address.receiver }}" label="收货人" placeholder="收货人姓名" maxlength="15" bind:change="changeMsg" data-type="receiver" />
+    <van-field value="{{ address.phone }}" label="手机号码" placeholder="收货人手机号" maxlength="11" type="number" bind:change="changeTel" />
+    <van-field value="{{ address.area }}" label="所在地区" placeholder="选择省/市/区" readonly bindtap="showArea" />
+    <van-field value="{{ address.detail }}" label="详细地址" placeholder="街道、门牌号等" maxlength="50" bind:change="changeMsg" data-type="detail" />
+  </view>
+  <!-- 默认收货地址开关组件 -->
+  <view class="default-wrapper">
+    <view class="ET2">设为默认收货地址</view>
+    <van-switch checked="{{ isdefault }}" size="24px" bind:change="changeSwitch" />
+  </view>
+  <!-- 底部操作按钮 -->
+  <view class="finish-btn">
+    <view class="finish-btn-wrapper">
+      <view class="finish theme-customize-bg" wx:if="{{ isNew }}" bindtap="saveAddress">
+        {{ !haveAddress && pageFlag ? "保存并使用" : "保存" }}
+      </view>
+      <view class="finish-double" wx:else>
+        <view class="cancel-btn" bindtap="deleteAddress">删除</view>
+        <view class="finish2 theme-customize-bg" bindtap="saveAddress">
+          保存地址
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 省市区 -->
+  <van-popup show="{{ showArea }}" position="bottom" bind:close="showArea" custom-style="height: auto">
+    <van-area area-list="{{ areaList }}" value="{{ selectCountyId }}" bind:confirm="confirmArea" bind:cancel="showArea" />
+  </van-popup>
+</view>

package/miniprogram_dist/ConfirmOrder/components/AddressEdit/index.wxss

@@ -0,0 +1,99 @@
+/* 主题色 */
+.theme-customize-bg {
+  background-color: #1472FF !important;
+}
+.theme-customize-border {
+  border-color: #1472FF !important;
+}
+.theme-customize-font {
+  color: #1472FF !important;
+}
+.theme-customize-light-new {
+  background-color: #9db8f1 !important;
+}
+.theme-customize-bg-light {
+  background-color: #9db8f1 !important;
+}
+.address-edit-content {
+  padding-top: 16rpx;
+}
+.address-edit-content .input-wrapper {
+  background: white;
+}
+.address-edit-content .input-wrapper .van-field__label {
+  font-size: 28rpx;
+  color: #333333;
+}
+.address-edit-content .default-wrapper {
+  margin-top: 16rpx;
+  height: 112rpx;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.address-edit-content .default-wrapper .ET2 {
+  font-size: 28rpx;
+  color: #333333;
+}
+.address-edit-content .default-wrapper .van-switch {
+  border: 0 solid #010101;
+  background-color: #f5f5f5;
+}
+.address-edit-content .default-wrapper .van-switch .van-switch__node {
+  box-shadow: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #ffffff;
+  width: 20px;
+  height: 20px;
+  top: 1px;
+  left: 1px;
+}
+.address-edit-content .default-wrapper .van-switch--on {
+  background-color: #1989fa;
+}
+.address-edit-content .finish-btn {
+  box-sizing: border-box;
+  border-top: 0.02rem solid #eee;
+  position: fixed;
+  margin: auto;
+  left: 0;
+  right: 0;
+  background: #fff;
+  bottom: 0;
+  z-index: 2;
+}
+.address-edit-content .finish-btn .finish-btn-wrapper {
+  padding: 16rpx 28rpx;
+}
+.address-edit-content .finish-btn .finish {
+  padding: 20rpx 0;
+  border-radius: 40rpx;
+  text-align: center;
+  background: #09bb07;
+  color: white;
+}
+.address-edit-content .finish-btn .finish-double {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.address-edit-content .finish-btn .finish-double .cancel-btn {
+  text-align: center;
+  width: 212rpx;
+  padding: 16rpx 0;
+  margin-right: 24rpx;
+  background: #ffffff;
+  border-radius: 40rpx;
+  border: 2rpx solid #b7b7b7;
+}
+.address-edit-content .finish-btn .finish-double .finish2 {
+  width: 450rpx;
+  padding: 20rpx 0;
+  border-radius: 40rpx;
+  text-align: center;
+  background: #09bb07;
+  color: #fff;
+}