xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

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

@@ -0,0 +1,160 @@
+// src/ConfirmOrder/components/AddressManage/index.js
+import {
+  getReceiveAddress,
+  createAddress
+} from "../../../common/api/confirmOrder"
+const computedBehavior = require('miniprogram-computed').behavior
+
+Component({
+  behaviors: [computedBehavior],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    addressInfo: {
+      type: Object,
+      value: () => {},
+    },
+    addressQuery: {
+      type: Object,
+      value: () => {},
+    },
+    isShowEditAddress: {
+      type: Boolean,
+      value: false,
+    },
+    isShowAddressManage: {
+      type: Boolean,
+      value: false,
+    }
+  },
+  options: {
+    styleIsolation: 'shared',
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    addressList: [],
+    pageFlag: true,
+    radio: '1',
+  },
+  lifetimes: {
+    attached: async function () {
+      // 在组件实例进入页面节点树时执行
+      // 用于标示页面是来自订单(true)还是个人中心(false)
+      this.setData({
+        pageFlag: this.data.addressQuery.selectable || false
+      })
+      this.initReceiveAddress()
+    },
+  },
+  computed: {
+    publicAddressId(data) {
+      return (data.addressInfo && data.addressInfo.id) || data.addressQuery.id;
+    },
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 新增地址
+    createAddress(e) {
+      let data = e.detail
+      let params = {
+        receiver: data.userName, // 收件人
+        phone: data.telNumber, // 手机号码
+        province: data.provinceName, // 省
+        city: data.cityName, // 市
+        county: data.countyName, //区/县
+        detail: data.detailInfo, // 详细地址
+        is_default: 0, // 是否设为默地址,
+        id: null,
+      }
+      wx.showLoading({
+        mask: true,
+        title: '加载中'
+      })
+      createAddress(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()
+      })
+    },
+    // 获取收货地址列表
+    initReceiveAddress() {
+      wx.showLoading({
+        mask: true,
+        title: '加载中'
+      })
+      getReceiveAddress().then(res => {
+          if (res.data.code === 0) {
+            let addressList = [];
+            if (this.data.publicAddressId && res.data.data.length > 1) {
+              addressList = this.sortChoosen(res.data.data);
+            } else {
+              addressList = res.data.data;
+            }
+            this.setData({
+              addressList: addressList
+            })
+          }
+        }).catch((err) => console.log(err))
+        .finally(() => {
+          wx.hideLoading()
+        })
+    },
+    chooseAddress(e) {
+      if (this.data.pageFlag) {
+        this.triggerEvent("updataData", {
+          addressInfo: e.currentTarget.dataset.item || e.detail,
+          isShowAddressManage: false
+        })
+      }
+    },
+    newAddress(e) {
+      let data = e.currentTarget.dataset
+      let id = Object.keys(data).length ? data.id : null
+      this.setData({
+        isShowAddressManage: false,
+        isShowEditAddress: true
+      })
+      this.triggerEvent("updataData", {
+        addressQuery: {
+          orderdata: this.data.addressQuery.orderdata || null,
+          selectable: this.data.addressQuery.selectable || false,
+          id: id,
+        },
+        isShowAddressManage: false,
+        isShowEditAddress: true
+      })
+    },
+    // 选中的地址置于首位
+    sortChoosen(arr) {
+      let index,
+        element,
+        newArr = arr;
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].id == this.data.publicAddressId) {
+          element = arr[i];
+          index = i;
+        }
+      }
+      if (index && index >= 0) {
+        newArr.splice(index, 1);
+        newArr.unshift(element);
+      }
+      return newArr;
+    },
+  }
+})

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

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-radio": "@vant/weapp/radio/index",
+    "van-radio-group": "@vant/weapp/radio-group/index",
+    "WechatAddress": "../WechatAddress/index"
+  }
+}

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

@@ -0,0 +1,96 @@
+@import "../../../common/css/theme.wxss";
+
+.address-manage-content {
+  padding-bottom: 188rpx;
+
+  .address-bar {
+    background: white;
+    padding: 32rpx;
+    margin-bottom: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+
+    .left-info {
+      display: flex;
+      align-items: center;
+      flex: 1;
+
+      .info-text {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        .top-text {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-bottom: 16rpx;
+
+          .ET2 {
+            font-size: 32rpx
+          }
+
+          .name {
+            margin-right: 32rpx;
+            max-width: 262rpx;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            word-break: break-all;
+          }
+
+          .tag {
+            width: 64rpx;
+            height: 32rpx;
+            text-align: center;
+            line-height: 32rpx;
+            background: #dde8fc;
+            border-radius: 8rpx;
+            margin-left: 32rpx;
+            font-size: 20rpx;
+            text-size-adjust: none;
+          }
+        }
+
+        .address-text {
+          padding-right: 72rpx;
+        }
+      }
+    }
+
+    .update-icon {
+      position: absolute;
+      right: 32rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #c8c8c8;
+      width: 40rpx;
+      height: 40rpx;
+    }
+  }
+
+  .finish-btn {
+    position: fixed;
+    margin: auto;
+    left: 0;
+    right: 0;
+    background: #fff;
+    bottom: 0;
+    box-sizing: border-box;
+    border-top: 2rpx solid #eee;
+
+    .finish-btn-wrapper {
+      padding: 16rpx 28rpx;
+    }
+
+    .finish {
+      padding: 20rpx 0;
+      border-radius: 40rpx;
+      text-align: center;
+      background: #09bb07;
+      color: white;
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+<!--src/ConfirmOrder/components/AddressManage/index.wxml-->
+<view class="address-manage-content">
+  <!-- 获取微信收货地址 -->
+  <WechatAddress 
+    addressList="{{ addressList }}"
+    bind:createAddress="createAddress"
+    bind:chooseAddress="chooseAddress"
+  ></WechatAddress>
+
+  <view class="address-bar" wx:for="{{ addressList }}" wx:key="key">
+    <view class="left-info" bindtap="chooseAddress" data-item="{{ item }}">
+      <van-radio-group value="{{ (pageFlag && publicAddressId == item.id) ? '1' : 2 }}">
+        <van-radio name="1" label-class="info-text">
+          <view class="top-text">
+            <view class="name ET2">{{ item.receiver }}</view>
+            <view class="phone ET2">{{ item.phone }}</view>
+            <view class="tag theme-customize-border theme-customize-font theme-customize-font-black theme-customize-light-new" wx:if="{{ item.is_default }}">
+              默认
+            </view>
+          </view>
+          <view class="address-text">
+            {{ item.province + item.city + item.county + item.detail }}
+          </view>
+        </van-radio>
+      </van-radio-group>
+    </view>
+    <image src="../../../common/assets/images/update.png" class="update-icon" bindtap="newAddress" data-id="{{ item.id }}"></image>
+  </view>
+  <!-- 底部操作按钮 -->
+  <view class="finish-btn">
+    <view class="finish-btn-wrapper">
+      <view class="finish theme-customize-bg" bindtap="newAddress">
+        新增地址
+      </view>
+    </view>
+  </view>
+</view>

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

@@ -0,0 +1,98 @@
+/* 主题色 */
+.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-manage-content {
+  padding-bottom: 188rpx;
+}
+.address-manage-content .address-bar {
+  background: white;
+  padding: 32rpx;
+  margin-bottom: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+.address-manage-content .address-bar .left-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.address-manage-content .address-bar .left-info .info-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.address-manage-content .address-bar .left-info .info-text .top-text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+.address-manage-content .address-bar .left-info .info-text .top-text .ET2 {
+  font-size: 32rpx;
+}
+.address-manage-content .address-bar .left-info .info-text .top-text .name {
+  margin-right: 32rpx;
+  max-width: 262rpx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+.address-manage-content .address-bar .left-info .info-text .top-text .tag {
+  width: 64rpx;
+  height: 32rpx;
+  text-align: center;
+  line-height: 32rpx;
+  background: #dde8fc;
+  border-radius: 8rpx;
+  margin-left: 32rpx;
+  font-size: 20rpx;
+  text-size-adjust: none;
+}
+.address-manage-content .address-bar .left-info .info-text .address-text {
+  padding-right: 72rpx;
+}
+.address-manage-content .address-bar .update-icon {
+  position: absolute;
+  right: 32rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #c8c8c8;
+  width: 40rpx;
+  height: 40rpx;
+}
+.address-manage-content .finish-btn {
+  position: fixed;
+  margin: auto;
+  left: 0;
+  right: 0;
+  background: #fff;
+  bottom: 0;
+  box-sizing: border-box;
+  border-top: 2rpx solid #eee;
+}
+.address-manage-content .finish-btn .finish-btn-wrapper {
+  padding: 16rpx 28rpx;
+}
+.address-manage-content .finish-btn .finish {
+  padding: 20rpx 0;
+  border-radius: 40rpx;
+  text-align: center;
+  background: #09bb07;
+  color: white;
+}

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

@@ -0,0 +1,160 @@
+// src/ConfirmOrder/components/AddressSelect/index.js
+const computedBehavior = require('miniprogram-computed').behavior
+import {
+  ENTITY_GOODS
+} from '../../../common/utils/constants';
+import {
+  isEmptyObject
+} from "../../../common/utils/index"
+
+Component({
+  behaviors: [computedBehavior],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    addressInfo: {
+      type: Object,
+      value: () => {},
+      observer(address) {
+        this.triggerEvent("dataChange", {
+          name: 'address',
+          prePayParams: {
+            address_id: address && address.id,
+          },
+          errMsg: this.data.showAddressSelect && !this.data.haveAddress && '请添加收货地址',
+          triggerPrePay: !!(!this.data.isCart && address && address.id),
+        })
+        if (this.data.isCart) {
+          this.triggerEvent("updataData", {
+            cartInfoLoaded: false
+          })
+        }
+        if (!this.data.addressInfoLoaded) {
+          this.triggerEvent("updataData", {
+            addressInfoLoaded: true
+          })
+        }
+      }
+    },
+    isCart: {
+      type: Number,
+      value: 0,
+    },
+    activeMode: {
+      type: Number,
+      value: 0,
+    },
+    baseInfoQuery: {
+      type: Object,
+      value: () => {},
+    },
+    hasEntityGoods: {
+      type: Boolean,
+      value: false,
+    },
+    cartGoodsList: {
+      type: Array,
+      value: () => [],
+    },
+    goodsInfo: {
+      type: Object,
+      value: () => {},
+    },
+    isShowAddressManage: {
+      type: Boolean,
+      value: false,
+    },
+    addressQuery: {
+      type: Object,
+      value: () => {},
+    },
+    cartInfoLoaded: {
+      type: Boolean,
+      value: false,
+    },
+    addressInfoLoaded: {
+      type: Boolean,
+      value: false,
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  lifetimes: {
+    attached: async function () {
+      this.triggerEvent("dataChange", {
+        name: 'address',
+        errMsg: this.data.showAddressSelect &&
+          !this.data.haveAddress &&
+          this.data.activeMode === 0 &&
+          '请添加收货地址',
+      })
+    },
+  },
+  computed: {
+    showAddressSelect(data) {
+      return (
+        data.baseInfoQuery.spu_type === ENTITY_GOODS ||
+        (data.goodsInfo.is_goods_package && data.hasEntityGoods) ||
+        (data.isCart &&
+          data.cartGoodsList.some((goodsInfo) => {
+            return (
+              goodsInfo.spu_type === ENTITY_GOODS ||
+              goodsInfo.entity_goods_num > 0
+            );
+          }))
+      );
+    },
+    haveAddress(data) {
+      return data.addressInfo && !isEmptyObject(data.addressInfo);
+    },
+    invalidAddress(data) {
+      return data.addressInfo && !data.addressInfo.calculate_freight;
+    },
+    needAddress(data) {
+      return !data.haveAddress && data.showAddressSelect;
+    },
+  },
+  observers: {
+    needAddress(val) {
+      if (val) {
+        this.triggerEvent("dataChange", {
+          name: 'address',
+          errMsg: '请添加收货地址'
+        })
+      }
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 修改地址
+    changeAddress() {
+      let obj = {}
+      if (this.data.haveAddress) {
+        obj = {
+          isShowAddressManage: true,
+          addressQuery: {
+            selectable: true,
+            id: this.data.addressInfo.id,
+            orderdata: this.data.baseInfoQuery,
+          }
+        }
+      } else {
+        obj = {
+          isShowEditAddress: true,
+          addressQuery: {}
+        }
+      }
+      this.triggerEvent("updataData", obj)
+      this.setData(obj)
+    }
+  }
+})

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

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

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

@@ -0,0 +1,80 @@
+.address-select-content {
+  position: relative;
+  margin-bottom: 16rpx;
+  background-color: #fff;
+
+  .address-container {
+    padding: 26rpx 32rpx 20rpx 32rpx;
+
+    .address-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .add-address {
+        display: flex;
+        align-items: center;
+
+        .address-iocn {
+          width: 32rpx;
+          height: 32rpx;
+          margin-right: 8rpx;
+        }
+
+        .ET2 {
+          font-size: 32rpx;
+        }
+      }
+
+      .address-wrapper {
+        display: flex column;
+        align-items: flex-start;
+
+        .address-info {
+          display: flex;
+          align-items: center;
+          font-weight: 600;
+
+          text:first-child {
+            display: inline-block;
+            margin-right: 48rpx;
+            max-width: 300rpx;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .address {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          margin-top: 16rpx;
+          max-width: 614rpx;
+          color: #666;
+        }
+
+        .ET1 {
+          font-size: 28rpx;
+        }
+      }
+
+      .icon-tiaozhuan {
+        width: 32rpx;
+        height: 32rpx;
+      }
+    }
+
+    .address-warning {
+      margin-top: 16rpx;
+      color: #ff4c51;
+    }
+  }
+
+  .line-img {
+    height: 9rpx;
+    width: 100%;
+    position: absolute;
+    bottom: 0rpx;
+  }
+}

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

@@ -0,0 +1,34 @@
+<!--src/ConfirmOrder/components/AddressSelect/index.wxml-->
+<view class="address-select-content">
+  <view class="address-container" wx:if="{{ showAddressSelect }}">
+    <view class="address-bar" bindtap="changeAddress">
+      <!-- 无默认地址 -->
+      <view class="add-address" wx:if="{{ !haveAddress }}">
+        <image src="../../../common/assets/images/address.png" class="address-iocn"></image>
+        <view class="ET2">请先添加收货地址</view>
+      </view>
+      <!-- 选择了地址/有默认地址 -->
+      <view class="address-wrapper">
+        <view class="address-info ET2">
+          <text>{{ addressInfo.receiver || '' }}</text>
+          <text>{{ addressInfo.phone || '' }}</text>
+        </view>
+        <view class="address ET1">
+          {{
+          (addressInfo.province +
+          addressInfo.city +
+          addressInfo.county +
+          addressInfo.detail) || ''
+          }}
+        </view>
+      </view>
+      <image src="../../../common/assets/images/zhixiang.png" class="icon-tiaozhuan"></image>
+    </view>
+    <view class="address-warning ET0" wx:if="{{ invalidAddress }}">
+      {{ addressInfo.calculate_freight_text }}
+    </view>
+  </view>
+  <!-- 地址栏底部彩线 -->
+  <image class="line-img" src="../../../common/assets/images/img_adrr.png"></image>
+  <!-- <view class="line-img" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAADCAYAAADyQg1sAAAABmJLR0QA/wD/AP+gvaeTAAAAQUlEQVQYlWNkgIKnLg4NjP8Z6hnwAMb/DA2S+w40YpPTKnvbwEBAP8N/hoZrPcIo+hkH0nIGBgYGxoG0nIGBgQEAuGkqBGhhw1kAAAAASUVORK5CYIIlNgAAgLN8AB6tKgTVqN14AAAAAElFTkSuQmCC');"></view> -->
+</view>