jufubao-base 1.0.437 → 1.0.438-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.437",
+  "version": "1.0.438-beta1",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",
@@ -51,7 +51,7 @@
     "dingtalk-jsapi": "^3.0.31",
     "flyio": "^0.6.2",
     "gxd-commands-bussiness": "^1.0.12",
-    "gxd-uni-library-editx": "1.0.198-beta1",
+    "gxd-uni-library-editx": "1.0.202-beta3",
     "jweixin-module": "^1.6.0",
     "md5": "^2.3.0",
     "path-to-regexp": "^6.2.1",

package/src/components/JfbBaseExpressList/Api.js

@@ -0,0 +1,34 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Express
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    //设置方法名字当别忘记加上【模块名字】：Express
+    mapFnName: 'getExpressCount',
+    title: '订单 - 快递包裹数量(代签收/运输中)',
+    path: '/order/v1/logistics/express-package-count',
+    isRule: false,
+    params: {
+      
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    //设置方法名字当别忘记加上【模块名字】：Express
+    mapFnName: 'getExpressList',
+    title: '订单 - 快递包裹分类列表',
+    path: '/order/v1/logistics/express-package-list',
+    isRule: false,
+    params: {
+      logistics_status: ['物流状态', 'String', '必选'],
+      page_size: ['每页数量', 'Number', '必选'],
+      page_token: ['分页token', 'String', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseExpressList/Attr.js

@@ -0,0 +1,25 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        label: '物流详情路径:',
+        groupKey:'advanced',
+        className: 'input100',
+        labelInline:true,
+        ele: 'xd-select-pages-path',
+        valueKey: 'select-pages-path',
+        value: data['select-pages-path'] || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree')
+        },
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseExpressList/JfbBaseExpressList.vue

@@ -0,0 +1,487 @@
+<template>
+  <view
+    class="jfb-base-express-list"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-express-list__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-express-list__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-express-list__body">
+      <!--状态tab栏-->
+      <view class="jfb-base-express-list__status" v-if="statusList.length > 0">
+        <view
+          class="jfb-base-express-list__status-item"
+          :class="{ 'is-active': activeStatus === item.status }"
+          v-for="(item, index) in statusList"
+          :key="index"
+          @click="handleStatusChange(item.status)"
+        >
+          <view class="jfb-base-express-list__status-text">
+            <view class="jfb-base-express-list__status-name">
+              <text>{{ item.label }}</text>
+              <view class="jfb-base-express-list__status-line" :class="{ 'is-visible': activeStatus === item.status }"></view>
+            </view>
+            <view class="jfb-base-express-list__status-count" v-if="item.count">{{ item.count > 99 ? '99+' : item.count }}</view>
+          </view>
+        </view>
+      </view>
+      <!--包裹列表-->
+      <view class="jfb-base-express-list__list">
+        <view
+          class="jfb-base-express-list__item"
+          v-for="(item, index) in express"
+          :key="index"
+        >
+          <view class="jfb-base-express-list__item-title">
+            <view class="jfb-base-express-list__item-title-left">
+              <xd-font-icon icon="iconbaoguo" size="30" color="#999"></xd-font-icon>
+              <text class="jfb-base-express-list__item-title-text">包裹 {{ index + 1 }}</text>
+            </view>
+            <view class="jfb-base-express-list__item-title-right" @click="handleToDetail(item)">
+              <text>查看详情</text>
+              <xd-font-icon icon="iconxiangyou_xian" size="24" color="#999"></xd-font-icon>
+            </view>
+          </view>
+          <view class="jfb-base-express-list__item-number">
+            <view class="jfb-base-express-list__item-number-info">
+              <text class="jfb-base-express-list__item-number-company">{{ item.logistics_company_name }}</text>
+              <text class="jfb-base-express-list__item-number-no">{{ item.logistics_number }}</text>
+            </view>
+            <view
+              class="jfb-base-express-list__item-number-copy"
+              @click.stop="copy(item.logistics_number)"
+            >复制单号</view>
+          </view>
+          <view class="jfb-base-express-list__item-goods">
+            <view
+              class="jfb-base-express-list__item-goods-item"
+              v-for="(Sitem, Sindex) in item.product_list"
+              :key="Sindex"
+            >
+              <image
+                class="jfb-base-express-list__item-goods-image"
+                :src="Sitem.product_thumb"
+                mode="aspectFill"
+              ></image>
+              <view class="jfb-base-express-list__item-goods-info">
+                <view class="jfb-base-express-list__item-goods-name">{{ Sitem.product_name }}</view>
+                <view class="jfb-base-express-list__item-goods-brand" v-if="Sitem.brand_name">{{ Sitem.brand_name }}</view>
+                <view class="jfb-base-express-list__item-goods-bottom">
+                  <view class="jfb-base-express-list__item-goods-price">
+                    <xd-unit :isOld="false" :price="Sitem.price" :color="mainColor" :fontSize="36"></xd-unit>
+                  </view>
+                  <view class="jfb-base-express-list__item-goods-num">x{{ Sitem.product_num }}</view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!--空状态-->
+      <view class="jfb-base-express-list__empty" v-if="express.length === 0">暂无数据</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseExpressListMixin from "./JfbBaseExpressListMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import getServiceUrl from "@/common/getServiceUrl";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  export default {
+    // #ifdef MP-WEIXIN
+    options: { styleIsolation: 'shared' },
+    // #endif
+    name: "JfbBaseExpressList",
+    components: {
+      XdFontIcon,
+      XdUnit,
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseExpressListMixin
+    ],
+    data() {
+      return {
+        expressPath: "", //物流详情路径
+        activeStatus: "logistics_status_p", //当前选中状态
+        statusList: [], //状态tab列表
+        express: [], //包裹列表
+        page_token: "1", //当前页码
+        page_size: 20, //每页数量
+        hasNext: false, //是否有下一页
+        next_page_token: "", //下一页token
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+      this.init(this.container);
+    },
+    methods: {
+      onJfbLoad(options) {
+        if(options.tab) {
+          this.activeStatus = options.tab
+        }
+        //加载状态tab数量与包裹列表
+        this.getExpressCount();
+        this.getExpressList();
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.expressPath = getContainerPropsValue(container, 'content.select-pages-path', {value: ""}).value;
+      },
+      /**
+       * @description 获取各状态包裹数量
+       */
+      getExpressCount() {
+        jfbRootExec("getExpressCount", {
+          vm: this,
+          data: {
+            page_id: this.pageAttr['page_id'], //页面ID
+            container_id: this.containerId, //组件ID
+          },
+        })
+          .then((res) => {
+            //已签收状态不显示数量
+            this.statusList = [
+              { status: 'logistics_status_p', label: '待签收', count: res.proxy_sign_count },
+              { status: 'logistics_status_n', label: '运输中', count: res.transport_count },
+              { status: 'logistics_status_y', label: '已签收', count: 0 },
+            ];
+          })
+          .catch((err) => {
+            this.$xdLog.catch(err);
+            this.statusList = [];
+          });
+      },
+      /**
+       * @description 获取包裹列表
+       */
+      getExpressList() {
+        jfbRootExec("getExpressList", {
+          vm: this,
+          data: this.$xdUniHelper.deleteParamEmptyKey({
+            page_id: this.pageAttr['page_id'], //页面ID
+            container_id: this.containerId, //组件ID
+            logistics_status: this.activeStatus, //当前状态
+            page_token: this.page_token, //当前页码
+            page_size: this.page_size, //每页数量
+          }),
+        })
+          .then((res) => {
+            const list = (res.list || []).map((item) => {
+              item.product_list = (item.product_list || []).map((Sitem) => {
+                Sitem.product_thumb = Sitem.product_thumb ? getServiceUrl(Sitem.product_thumb, "size3") : "";
+                return Sitem;
+              });
+              return item;
+            });
+            //追加列表（首屏替换，分页累加）
+            this.express = this.page_token === '1' ? list : (this.express || []).concat(list);
+            this.next_page_token = res.next_page_token;
+            this.hasNext = !!res.next_page_token;
+          })
+          .catch((err) => {
+            this.$xdLog.catch(err);
+            if (this.page_token === '1') this.express = [];
+          });
+      },
+      /**
+       * @description 切换状态
+       * @param status {string} 状态值
+       */
+      handleStatusChange(status) {
+        this.activeStatus = status;
+        this.page_token = '1';
+        this.getExpressList();
+      },
+      /**
+       * @description 查看物流详情
+       * @param item {object} 包裹对象
+       */
+      handleToDetail(item) {
+        console.log(this.expressPath,'this.expressPath')
+        if (this.$configProject['isPreview']) return;
+        this.$xdUniHelper.navigateTo({
+          url: `${this.expressPath}?package_id=${item.package_id}`,
+        });
+      },
+      /**
+       * @description 复制功能
+       * @param text {string} 复制内容
+       */
+      copy(text) {
+        // #ifdef H5
+        this.$copyText(text).then((res) => {
+          this.$xdAlert({ content: "复制成功" });
+        });
+        // #endif
+        // #ifndef H5
+        uni.setClipboardData({
+          data: text,
+          showToast: false,
+          success: () => {
+            //this.$xdAlert({ content: "复制成功" });
+          },
+        });
+        // #endif
+      },
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        if (this.hasNext) {
+          this.page_token = this.next_page_token;
+          this.getExpressList();
+        }
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseExpressListLess.less";
+
+  .jfb-base-express-list {
+    &__body {
+      background: #f8f8f8;
+    }
+
+    //状态tab栏
+    &__status {
+      background: #fff;
+      display: flex;
+      align-items: center;
+
+      &-item {
+        flex: 1;
+        height: 88rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #666;
+
+        &.is-active {
+          color: #333;
+          font-weight: 600;
+        }
+      }
+
+      &-text {
+        display: flex;
+        align-items: center;
+      }
+
+      &-name {
+        position: relative;
+        font-size: 28rpx;
+      }
+
+      &-line {
+        position: absolute;
+        left: 0;
+        bottom: -8rpx;
+        width: 100%;
+        height: 6rpx;
+        border-radius: 3rpx;
+        background: #333;
+        visibility: hidden;
+
+        &.is-visible {
+          visibility: visible;
+        }
+      }
+
+      &-count {
+        width: 50rpx;
+        height: 40rpx;
+        line-height: 40rpx;
+        margin-left: 8rpx;
+        border-radius: 24rpx;
+        background: rgba(240, 31, 31, 1);
+        box-shadow: 0px 2rpx 4rpx rgba(240, 31, 31, 0.25);
+        color: #fff;
+        font-size: 22rpx;
+        text-align: center;
+        box-sizing: border-box;
+      }
+    }
+
+    //包裹列表
+    &__list {
+      padding: 16rpx;
+    }
+
+    &__item {
+      background: #fff;
+      border-radius: 16rpx;
+      overflow: hidden;
+      margin-bottom: 16rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &-title {
+        padding: 24rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 24rpx;
+        color: #999;
+
+        &-left,
+        &-right {
+          display: flex;
+          align-items: center;
+        }
+
+        &-text {
+          margin-left: 12rpx;
+        }
+      }
+
+      &-number {
+        margin: 0 24rpx;
+        padding-bottom: 24rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &-info {
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        &-company {
+          font-size: 28rpx;
+          font-weight: 600;
+          color: #333;
+          margin-right: 16rpx;
+          flex-shrink: 0;
+        }
+
+        &-no {
+          font-size: 26rpx;
+          color: #999;
+        }
+
+        &-copy {
+          flex-shrink: 0;
+          border: 2rpx solid #e5e5e5;
+          border-radius: 30rpx;
+          color: #999;
+          font-size: 24rpx;
+          padding: 6rpx 20rpx;
+        }
+      }
+
+      &-goods {
+        border-top: 2rpx solid #f5f5f5;
+        padding: 24rpx;
+
+        &-item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 24rpx;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        &-image {
+          width: 160rpx;
+          height: 160rpx;
+          border-radius: 8rpx;
+          flex-shrink: 0;
+        }
+
+        &-info {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          min-height: 160rpx;
+          margin-left: 20rpx;
+          overflow: hidden;
+        }
+
+        &-name {
+          font-size: 28rpx;
+          color: #333;
+          line-height: 40rpx;
+          .uni-max-cut(2, 80);
+          word-break: break-all;
+        }
+
+        &-brand {
+          font-size: 24rpx;
+          color: #999;
+          margin-top: 6rpx;
+          .uni-max-cut(1, 32);
+        }
+
+        &-bottom {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 12rpx;
+        }
+
+        &-price {
+          display: flex;
+          align-items: center;
+        }
+
+        &-num {
+          flex-shrink: 0;
+          font-size: 24rpx;
+          color: #999;
+        }
+      }
+    }
+
+    &__empty {
+      padding: 80rpx 0;
+      text-align: center;
+      font-size: 26rpx;
+      color: #999;
+    }
+  }
+</style>

package/src/components/JfbBaseExpressList/JfbBaseExpressListLess.less

@@ -0,0 +1,79 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-express-list {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-express-list {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseExpressList/JfbBaseExpressListMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-express-list'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}