jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseAddress/JfbBaseAddress.vue

@@ -0,0 +1,802 @@
+<template>
+  <view
+    class="jfb-base-address"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-address__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-address__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view
+      class="jfb-base-address__body"
+      v-if="addressList !== null"
+      :style="{ minHeight: layoutInfo.bodyMinHeightRpx + 'rpx' }"
+    >
+      <view
+        :style="{ padding: jfbListMarginComputed }"
+        class="jfb-base-address__body-address"
+        v-if="addressList && addressList.length > 0"
+      >
+        <template v-if="layout_style === 'old'">
+          <view
+            :style="{
+              marginBottom: jfbListSpacing + 'rpx',
+              boxShadow: jfbListShadowComputed,
+              border: jfbListBorderComputed,
+              backgroundColor: jfbListBgColor,
+              borderRadius: cardRadius + 'rpx'
+            }"
+            class="jfb-base-address__body-address-item"
+            v-for="(item, index) in addressList"
+            @click="handleSelectAddress(item)"
+            :key="index"
+          >
+            <view class="jfb-base-address__body-address-item-top">
+              <view
+                v-if="item.is_default === 'Y'"
+                :style="{
+                  backgroundColor: mainColor,
+                  color: '#fff',
+                  fontSize: '24rpx',
+                  padding: '4rpx 10rpx',
+                  borderRadius: '4rpx',
+                  marginRight: '20rpx',
+                }"
+                >默认</view
+              >
+              <view
+                :style="{
+                  color: '#999999',
+                  flex: 1,
+                  paddingRight: item.is_valid === 'N' ? '40rpx' : '',
+                }"
+              >
+                <view>
+                  {{ item | getCodeName }}
+                </view>
+              </view>
+              <view
+                style="position: absolute; right: 40rpx; width: 50rpx"
+                v-if="item.is_valid === 'N'"
+              >
+                <xd-font-icon
+                  size="32"
+                  :color="dangerColor"
+                  icon="iconmingchengtubiao"
+                ></xd-font-icon>
+              </view>
+            </view>
+            <view class="jfb-base-address__body-address-item-middle">
+              {{ item.address_detail }} {{ item.house_number }}
+            </view>
+            <view
+              :style="{
+                backgroundColor: item.is_select === 'Y' ? mainColor : '#CCC',
+              }"
+              class="jfb-base-address__body-address-item-bottom"
+            >
+              <view>
+                <view style="margin-right: 40rpx">{{ item.name }}</view>
+                <view>{{ item.phone }}</view>
+              </view>
+              <view>
+                <xd-font-icon
+                  @click.native.stop="handleEdit(item)"
+                  style="margin-right: 40rpx"
+                  icon="iconbianji-01"
+                  size="32"
+                ></xd-font-icon>
+                <xd-font-icon
+                  @click.native.stop="handleDel(item)"
+                  icon="iconshanchu-01"
+                  size="32"
+                ></xd-font-icon>
+              </view>
+            </view>
+          </view>
+        </template>
+        <template v-else>
+          <view
+            :style="{
+              marginBottom: jfbListSpacing + 'rpx',
+              boxShadow: jfbListShadowComputed,
+              border: jfbListBorderComputed,
+              backgroundColor: jfbListBgColor,
+              borderRadius: cardRadius + 'rpx'
+            }"
+            v-for="(item, index) in addressList"
+            @click="handleSelectAddress(item)"
+            :key="index"
+          >
+            <xd-tfk-item
+              :edit_icon="edit_icon"
+              :delete_icon="delete_icon"
+              :item="item"
+              :dangerColor="dangerColor"
+              @editAddress="handleEdit(item)"
+              @delAddress="handleDel(item)"
+              @setDefault="handleSetDefault(item)"
+            ></xd-tfk-item>
+          </view>
+        </template>
+      </view>
+      <view class="jfb-base-address__body-empty" v-else>
+        <xd-font-icon icon="iconbianzu-01" size="120"></xd-font-icon>
+        <view>您还没有收货地址哦！</view>
+      </view>
+      <view style="height: 110rpx"></view>
+      <view class="jfb-base-address__body-footer" :style="prod_bottom">
+        <view :style="[bottomBoxStyle]">
+          <xd-button
+            width="100%"
+            type="primary"
+            :style="{
+              background: bottomBtnBgColor,
+              color: bottomBtnTextColor
+            }"
+            :radius="bottomBtnRadius+'rpx'"
+            @click="showAddress = !showAddress"
+            >+新增收货地址
+          </xd-button>
+        </view>
+        <xd-down-drawer
+          v-if="showAddress"
+          :show.sync="showAddress"
+          :z-index="2500"
+          :is-close="true"
+          :is-body-close="true"
+          :fullscreen="true"
+        >
+          <xd-address
+            v-if="showAddress"
+            @close="handleClose"
+            @save="handleSave"
+            @onToLocation="handleToLocation"
+            @onAddressToCode="handleAddressToCode"
+            @getCity="handleGetCity"
+            :default-value="defaultValue"
+            :mainColor="mainColor"
+          ></xd-address>
+        </xd-down-drawer>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer";
+import XdAddress from "./XdAddress";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseAddressMixin from "./JfbBaseAddressMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import StyleForm from "@/utils/StyleForm";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdTfkItem from "./XdTfkItem"
+let styleForm = new StyleForm(
+  {
+    border: null,
+    shadow: null,
+    spacing: 20,
+    bgColor: "#FFFFFF",
+    margin: {
+      bottom: 20,
+      left: 20,
+      right: 20,
+      top: 20,
+    },
+  },
+  getContainerPropsValue,
+  "list"
+);
+
+export default {
+  name: "JfbBaseAddress",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdDownDrawer,
+    XdAddress,
+    XdTfkItem,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseAddressMixin],
+  data() {
+    return {
+      showAddress: false,
+      defaultValue: null,
+      backStatus: false,
+      location_url: "",
+      addressList: null,
+      ...styleForm.getDataItem(),
+      version: '',
+		  cache_key: '',
+      layout_style: "old",
+      edit_icon: "",
+      delete_icon: "",
+      cardRadius: 16,
+      bottomPadding: "",
+      bottomBgColor: "",
+      bottomBtnBgColor: "",
+      bottomBtnTextColor: "",
+      bottomBtnRadius: "",
+    };
+  },
+  filters: {
+    getCodeName(item) {
+      return `${item.province_name}${item.city_name}${item.area_name}${item.street_name}`;
+    },
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+    showAddress(val) {
+      if (val === false) this.defaultValue = null;
+    },
+  },
+  created() {
+    console.log(this, "dsadas");
+    this.init(this.container);
+  },
+  computed: {
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
+    },
+    ...styleForm.getComputedItem(),
+    bottomBoxStyle(){
+      let padding = `${this.checkValue(this.bottomPadding.top, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.bottomPadding.right, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.bottomPadding.bottom, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.bottomPadding.left, 20)}rpx`;
+      return {
+        padding: padding,
+        backgroundColor: this.bottomBgColor,
+      }
+    }
+  },
+  methods: {
+    onJfbLoad(options) {
+      let { back } = options;
+      if(options.cache_key) {
+        this.cache_key = options.cache_key
+      }
+      this.backStatus = back;
+      jfbRootExec("getVersion", {
+        vm: this,
+        data: {
+          datetime: '240603'
+        },
+      }).then(res=>{
+        this.version=res.version;
+        this.getList();
+      })
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(value) {
+      this.location_url = getContainerPropsValue(
+        value,
+        "content.location_url",
+        { value: "" }
+      ).value;
+      styleForm.getInitItem(this, value);
+      this.layout_style = getContainerPropsValue(value, "content.layout_style", "old");
+      this.edit_icon = getContainerPropsValue(value, "content.edit_icon", "iconbianji-01");
+      this.delete_icon = getContainerPropsValue(value, "content.delete_icon", "iconshanchu-01");
+      this.cardRadius = getContainerPropsValue(value, "content.cardRadius", 16);
+      this.bottomPadding = getContainerPropsValue(value, "content.bottomPadding", {});
+      this.bottomBgColor = getContainerPropsValue(value, "content.bottomBgColor", "#FFFFFF");
+      this.bottomBtnBgColor = getContainerPropsValue(value, "content.bottomBtnBgColor", this.mainColor);
+      this.bottomBtnTextColor = getContainerPropsValue(value, "content.bottomBtnTextColor", "#FFFFFF");
+      this.bottomBtnRadius = getContainerPropsValue(value, "content.bottomBtnRadius", 40);
+      console.log("bottomBtnRadius", this.bottomBtnRadius)
+    },
+    getList(callback) {
+      this.$xdShowLoading({});
+      jfbRootExec("getBaseAddressList", {
+        vm: this,
+        data: {
+          version: this.version,
+          cache_key: this.cache_key
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          if (res && res.list.length === 0) {
+            this.addressList = [];
+            return;
+          }
+
+          let temp = [];
+          let is_check = false;
+          let is_default_index = 0;
+          res.list.map((item, index) => {
+            if (item["is_default"] === "Y") {
+              is_default_index = index;
+            }
+            if (item["is_select"] === 1 || item["is_select"] === "Y") {
+              is_check = true;
+            }
+            temp.push(item);
+          });
+
+          if (!is_check) {
+            let check = temp[is_default_index];
+            temp.splice(is_default_index, 1, { ...check, is_select: "Y" });
+          }
+          this.addressList = temp;
+
+          if (typeof callback === "function") {
+            callback(temp);
+          }
+        })
+        .catch(this.$xdLog.catch);
+    },
+    handleClose() {
+      this.showAddress = false;
+    },
+    /**
+     * @description 获取城下的下级城市
+     * @param parentId
+     * @param level
+     * @param resolve
+     */
+    handleGetCity({ parentId, level }, resolve) {
+      jfbRootExec("getCityList", {
+        vm: this,
+        data: { city_code: parentId },
+      })
+        .then((res) => {
+          console.log("handleGetCity", parentId, level, res);
+          resolve(res.list);
+        })
+        .catch(this.$xdLog.catch);
+    },
+    /**
+     * @description 打开地图定位
+     */
+    handleToLocation() {
+      if (this.defaultValue) {
+        this.$xdUniHelper.navigateTo({
+          url: `${this.location_url}?latitude=${this.defaultValue.latitude}&longitude=${this.defaultValue.longitude}`,
+        });
+      } else {
+        this.$xdUniHelper.navigateTo({
+          url: this.location_url,
+        });
+      }
+    },
+    /**
+     * @description 保存事件
+     * @param address
+     */
+    handleSave(address) {
+      console.log(address, "address");
+      if (this.isCheck(address)) {
+        return;
+      }
+      // if(!address.latitude||!address.longitude) {
+      //   this.$xdConfirm({
+      //     content: "因版本升级，为了确保您能正常收货，请重新选取所在地区!",
+      //     zIndex: 3200,
+      //     isClose: false,
+      //     cancel: false,
+      //     showClose: false,
+      //     confirmText: "我知道了",
+      //     styles: this.styles,
+      //   });
+      //   return
+      // }
+      let params = this.getParams(address);
+      console.log(params, "321321321");
+      params["tag"] = 0;
+      //区分新老版本组件生成的地址，帮助后端做新老地址兼容
+      params['version'] = this.version;
+      // params["latitude"] = address.latitude ? address.latitude + "" : "";
+      // params["longitude"] = address.longitude ? address.longitude + "" : "";
+      this.$xdShowLoading({});
+      if (params["address_nnid"]) {
+        params["is_select"] = "Y";
+        let address_nnid = params["address_nnid"];
+        delete params["address_nnid"];
+        jfbRootExec("updateAddress", {
+          vm: this,
+          data: {
+            address_nnid: address_nnid,
+            member_address: params,
+            cache_key: this.cache_key
+          },
+        })
+          .then((res) => {
+            console.log(33333, params);
+            this.showAddress = false;
+            setTimeout(() => {
+              this.getList((list) => {
+                if (this.backStatus) {
+                  let select = list.filter((item) => {
+                    return item.is_select === "Y";
+                  });
+                  this.$xdRoot.$on("onGetSelectAddress", select);
+                  this.back();
+                }
+              });
+            }, 200);
+          })
+          .catch((err) => {
+            console.log(err, "erredit");
+          });
+      } else {
+        jfbRootExec("addAddress", {
+          vm: this,
+          data: {
+            member_address: params,
+            cache_key: this.cache_key
+          },
+        })
+          .then((res) => {
+            this.showAddress = false;
+            setTimeout(() => {
+              this.getList((list) => {
+                if (this.backStatus) {
+                  let select = list.filter((item) => {
+                    return item.is_select === "Y";
+                  });
+                  this.$xdRoot.$on("onGetSelectAddress", select);
+                  this.back();
+                }
+              });
+            }, 200);
+          })
+          .catch((err) => {
+            console.log(err, "erradd");
+          });
+      }
+      this.defaultValue = null;
+    },
+    /**
+     * @description 反解析地址获取数据
+     * @param address 定位地址对象
+     * @param callback 成功回调方法
+     */
+    handleAddressToCode(address, callback) {
+      let { latitude, longitude } = address;
+      let { title, city, province } = address["sourceData"];
+      let prefix = `${province}${city}`;
+      if (province === city) {
+        prefix = province;
+      }
+      let lastTitle;
+      if (
+        province &&
+        city &&
+        address["sourceData"]["address"].indexOf(prefix) === 0
+      ) {
+        lastTitle = address["sourceData"]["address"];
+      } else {
+        lastTitle = `${prefix}${title}${address["sourceData"]["address"]}`;
+      }
+      // 当原始title不在查询数据中 自动补全。
+      if (lastTitle.indexOf(title) === -1) {
+        lastTitle += title;
+      }
+      jfbRootExec("getJdCode", {
+        vm: this,
+        data: {
+          address: lastTitle,
+          latitude: latitude,
+          longitude: longitude,
+        },
+      })
+        .then((res) => {
+          console.log(res, "4545454545");
+          res.data.receipt_region_name = `${res.data.province_name}${res.data.city_name}${res.data.area_name}${res.data.street_name}`;
+          res.data.city_name = [
+            res.data.province_name,
+            res.data.city_name,
+            res.data.area_name,
+            res.data.street_name,
+          ];
+          res.data.city_code = [
+            res.data.province_code,
+            res.data.city_code,
+            res.data.area_code,
+            res.data.street_code,
+          ];
+          callback(res.data);
+        })
+        .catch(this.$xdLog.catch);
+    },
+    handleSelectAddress(item) {
+      console.log("handleSelectAddress", item);
+      if (item.is_valid === "N") {
+        this.$xdConfirm({
+          content: "因版本升级，为了确保您能正常收货，请您重新编辑收货地址!",
+          zIndex: 3200,
+          isClose: false,
+          cancel: false,
+          showClose: false,
+          confirmText: "我知道了",
+          styles: this.styles,
+        });
+        return;
+      }
+      item.is_select = "Y";
+      this.$xdShowLoading({});
+      jfbRootExec("selectAddress", {
+        vm: this,
+        data: {
+          address_nnid: item.address_nnid,
+          is_select: "Y",
+          version: this.version,
+          cache_key: this.cache_key
+        },
+      })
+        .then((res) => {
+          setTimeout(() => {
+            this.getList((list) => {
+              console.log(this.backStatus, "this.backStatus");
+
+              if (this.backStatus) {
+                let select = list.filter((item) => {
+                  return item.is_select === "Y";
+                });
+                this.$xdRoot.$emit("onGetSelectAddress", select);
+                this.back();
+              }
+            });
+          }, 200);
+        })
+        .catch(this.$xdLog.catch);
+    },
+    //接口数据接口映射到组件数据接口
+    apiDataMapCompData(item){
+      let city_name = [
+        item["province_name"],
+        item["city_name"],
+        item["area_name"],
+        item["street_name"],
+      ];
+      let city_code = [
+        item["province_code"],
+        item["city_code"],
+        item["area_code"],
+        item["street_code"],
+      ];
+      return {
+        receipt_username: item["name"],
+        receipt_address: item["address_detail"],
+        receipt_phone: item["phone"],
+        receipt_default: item["is_default"] === "Y" ? true : false,
+        city_name: city_name,
+        city_code: city_code,
+        receipt_city_code: city_code,
+        receipt_city_name: city_name,
+        receipt_region_name: city_name.join("  "),
+        city_selected_data: city_name.map((item, index) => {
+          return { label: item, value: city_code[index] };
+        }),
+        id: item["address_nnid"],
+        latitude: item["latitude"] || null,
+        longitude: item["longitude"] || null,
+        house_number: item["house_number"],
+      }
+    },
+    handleEdit(item) {
+      this.defaultValue = this.apiDataMapCompData(item);
+
+      console.log("handleEdit", item, this.defaultValue);
+      this.showAddress = true;
+    },
+    handleSetDefault(item){
+      let is_default = item.is_default === "Y" ? "N" : "Y";
+      this.$set(item, 'is_default', is_default);
+      let saveData = this.apiDataMapCompData({...item, is_default});
+      this.handleSave(saveData);
+    },
+    handleDel(item) {
+      console.log("handleDel", item);
+      this.$xdConfirm({
+        styles: this.styles,
+        content: "确定删除当前配送地址吗?",
+        width: "80%",
+        success: (res) => {
+          if (res.confirm) {
+            this.$xdShowLoading({});
+            jfbRootExec("deleteAddress", {
+              vm: this,
+              data: {
+                address_nnid: item.address_nnid,
+                version: this.version,
+                cache_key: this.cache_key
+              },
+            })
+              .then(() => {
+                setTimeout(() => {
+                  this.getList();
+                }, 200);
+              })
+              .catch(this.$xdLog.catch);
+          }
+        },
+      });
+    },
+    getParams(address) {
+      return {
+        address_nnid: address["id"],
+        name: address["receipt_username"],
+        address_detail: address["receipt_address"],
+        phone: address["receipt_phone"],
+        province_code: address["receipt_city_code"][0],
+        city_code: address["receipt_city_code"][1],
+        area_code: address["receipt_city_code"][2],
+        street_code: address["receipt_city_code"][3],
+        province_name: address["receipt_city_name"][0],
+        city_name: address["receipt_city_name"][1],
+        area_name: address["receipt_city_name"][2],
+        street_name: address["receipt_city_name"][3],
+        is_default: address["receipt_default"] ? "Y" : "N",
+        house_number: address["house_number"],
+      };
+    },
+    isCheck({
+      receipt_username,
+      receipt_address,
+      receipt_phone,
+      receipt_city_code,
+    }) {
+      if (!receipt_username) {
+        this.$xdAlert({
+          content: "输入收件人姓名",
+          zIndex: 3200,
+          time: 2000,
+          isClose: false,
+        });
+        return true;
+      }
+
+      if (!receipt_phone) {
+        this.$xdAlert({
+          content: "输入收件人手机号码",
+          zIndex: 3200,
+          isClose: false,
+        });
+        return true;
+      }
+
+      if (receipt_city_code.length === 0) {
+        this.$xdAlert({
+          content: "请选择所在地区",
+          zIndex: 3200,
+          isClose: false,
+        });
+        return true;
+      }
+
+      if (!receipt_address) {
+        this.$xdAlert({
+          content: "输入收件人详情地址",
+          zIndex: 3200,
+          isClose: false,
+        });
+        return true;
+      }
+      return false;
+    },
+    doneInput() {
+      uni.hideKeyboard();
+    },
+    back() {
+      this.$xdUniHelper.navigateBack();
+      //         if(this.back_url) {
+      //           this.$xdUniHelper.navigateBack()
+      // return
+      //           this.$xdUniHelper.navigateTo({
+      //             url: this.back_url
+      //           })
+      //         } else {
+
+      //         }
+    },
+    onJfbScroll(options) {
+      console.log("event.onJfbScroll", options);
+    },
+    onJfbReachBottom(options) {
+      console.log("event.onJfbReachBottom", options);
+    },
+    onJfbShow(options) {
+      this.onJfbLoad(options);
+    },
+    onJfbHide(options) {
+      console.log("event.onJfbHide", options);
+    },
+    onJfbBack(options) {
+      console.log("event.onJfbBack", options);
+      this.back();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseAddressLess.less";
+
+.jfb-base-address {
+  &__body {
+    &-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%);
+
+      & > view {
+        font-size: unit(32, rpx);
+        color: #b3c1c4;
+        margin-top: unit(40, rpx);
+      }
+    }
+
+    &-address {
+      &-item {
+        // border-radius: unit(16, rpx);
+        margin-bottom: unit(20, rpx);
+        box-shadow: 0px 0px unit(20, rpx) 0px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+
+        &-top {
+          display: flex;
+          align-items: flex-start;
+          font-size: unit(28, rpx);
+          padding: unit(40, rpx) unit(40, rpx) unit(24, rpx) unit(40, rpx);
+          position: relative;
+        }
+
+        &-middle {
+          color: #333333;
+          font-size: unit(32, rpx);
+          padding: 0 unit(40, rpx) unit(40, rpx) unit(40, rpx);
+        }
+
+        &-bottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: unit(20, rpx) unit(40, rpx);
+          font-size: unit(28, rpx);
+          color: #fff;
+          // border-radius: 0px 0px unit(16, rpx) unit(16, rpx);
+
+          & > view {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+
+    &-footer {
+      position: fixed;
+      left: 0;
+      right: 0;
+      background: #fff;
+    }
+  }
+}
+</style>