jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseUserOrder/JfbBaseUserOrder.vue

@@ -0,0 +1,434 @@
+<template>
+  <view
+    class="jfb-base-user-order"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-user-order__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-user-order__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-user-order__body">
+      <view class="x-line"></view>
+      <view :style="[bodyStyleComp]" v-if="list.length > 0">
+        <view class="my-order__add" :style="[titleMarginComp]">
+          <view :style="[titleStyleComp]">{{myOrderName}}</view>
+          <view
+            v-if="isShowBtn === 'Y'"
+            @click="handleToLink(afterUrl)"
+            :style="[addBtnStyleComp]"
+            class="afterBuy"
+          >
+            <text>{{afterBuyName}}</text>
+            <view v-if="isShowICONBtn === 'Y'">
+              <xd-font-icon
+                icon="iconxiangyou_xian"
+                :color="addBtnStyleComp.color"
+                :size="20"
+              ></xd-font-icon>
+            </view>
+
+          </view>
+        </view>
+        <view class="my-order__content" :style="[contStyleComp]">
+          <view class="my-order__content-type">
+            <view
+              class="my-order__content-type-item"
+              v-for="item in list"
+              :key="item.status"
+              @click="handleToLink(orderListUrl, item.status)"
+            >
+              <view class="my-order__content-type-item-icon">
+                <image v-if="item.image" :src="item.image"></image>
+                <xd-font-icon
+                  v-else
+                  :icon="item.icon"
+                  :color="iconColor"
+                  :size="item.size"
+                ></xd-font-icon>
+                <view
+                  v-if="item.num"
+                  :style="[popComp]"
+                  class="my-order__content-type-item-number"
+                >{{item.num}}</view>
+              </view>
+              <view :style="{color: color}" class="my-order__content-type-item-text">{{item.customName || item.label}}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseUserOrderMixin from "./JfbBaseUserOrderMixin";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins"
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import getServiceUrl from "@/common/getServiceUrl";
+  export default {
+    name: "JfbBaseUserOrder",
+    components: {
+      XdFontIcon
+    },
+    mixins: [componentsMixins,extsMixins,JfbBaseUserOrderMixin],
+    computed: {
+      titleMarginComp(){
+        return {
+          padding: this.getMarginAndPadding(this.titleMargin, 0)
+        }
+      },
+      titleStyleComp(){
+        return {
+          fontSize: this.titleStyle.fontSize || '28rpx',
+          color: `${this.titleStyle.color || this.cardNameColor ||'#333'}`,
+          fontWeight: `${this.titleStyle.fontWeight || 'normal'}`,
+        }
+      },
+      bodyStyleComp(){
+        return {
+          margin: this.getMarginAndPadding(this.bodyMargin, 20),
+          padding: this.getMarginAndPadding(this.bodyPadding, 0),
+          borderRadius: this.bodyRadius + 'rpx',
+          backgroundColor: this.bodyBackgroundColor,
+        }
+      },
+      addBtnStyleComp(){
+        let border = {};
+        if(this.addBtnBorder && this.addBtnBorder.type === 'Y') {
+          let value = this.addBtnBorder.value ||{};
+          if(value.width) border['borderWidth'] = value.width + 'rpx';
+          if(value.color) border['borderColor'] = value.color;
+          if(value.style) border['borderStyle'] = value.style;
+        }
+        if(this.addBtnBorder && this.addBtnBorder.type === 'N') {
+          border['borderWidth'] = 0;
+          border['borderColor'] = '';
+          border['borderStyle'] = ''
+        }
+        let addBtnShadow = {};
+        if(this.addBtnShadow && this.addBtnShadow.type === 'Y') {
+          let value = this.addBtnShadow.value || {};
+          if(value.color && value.width) {
+            addBtnShadow['boxShadow'] = `0 0 ${value.width}rpx ${value.color}`
+          }
+        }
+        return {
+          color: this.addBtnStyle.color || this.mainColor,
+          fontSize: this.addBtnStyle.fontSize || '26rpx',
+          fontWeight: this.addBtnStyle.fontWeight || 'normal',
+          borderColor: this.mainColor,
+          borderWidth: '2rpx',
+          borderStyle:'solid',
+          backgroundColor: this.addBtnBgColor || 'rgba(0,0,0,0)',
+          borderRadius:this.addBtnRadius + 'rpx',
+          ...border,
+          ...addBtnShadow
+        }
+      },
+      popComp(){
+        return {
+          backgroundColor: this.popBgColor,
+          color: this.popColor || '#f00',
+        }
+      },
+      contStyleComp(){
+        let border = this.getBorderCompatibleOldStyle(this.contBorder, {
+          color: this.is_border_c,
+          width: this.is_border_w,
+          type: this.is_border,
+          style: 'solid'
+        })
+
+        return {
+          borderRadius: this.radius + 'rpx',
+          backgroundColor: this.backgroundColor,
+          marginTop: this.spacing + 'rpx',
+          border: border,
+          boxShadow: this.contShadow,
+          padding: this.getMarginAndPadding(this.contPadding,{top:40, bottom: 34, left: 20, right: 20})
+        }
+      }
+    },
+    data() {
+      return {
+        options: {},
+        list: [],
+
+        //整体
+        bodyPadding: {},
+        bodyRadius: 0,
+        bodyBackgroundColor: 'rgba(0,0,0,0)',
+        bodyMargin: { },
+        spacing:20,
+
+        //内容列表
+        color: '#333',
+        iconColor: '',
+
+        //我的标题
+        myOrderName: '我的订单',
+        cardNameColor: '#333',
+        titleStyle: {},
+        titleMargin:{},
+
+        //售后订单
+        isShowBtn:'Y',
+        afterBuyName:'售后订单',
+        addBtnBgColor:'rgba(0,0,0,0)',
+        addBtnStyle:{},
+        addBtnBorder:{},
+        addBtnShadow:{},
+        addBtnRadius: '40',
+        isShowICONBtn:'N',
+
+        //数字气泡
+        popColor:'#fff',
+        popBgColor:'#f00',
+
+        //content
+        backgroundColor: 'rgba(0,0,0,0)',
+        radius: 0,
+        contPadding:{},
+        contShadow:{},
+        contBorder:{},
+        is_border: 'Y',
+        is_border_w: 0,
+        is_border_c: '',
+
+        //其他
+        afterUrl: null,
+        orderListUrl: null,
+
+      }
+    },
+    watch: {
+      container(value,oldValue) {
+        if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']){
+          this.init(value);
+          this.onJfbLoad( this.options)
+        }
+      }
+    },
+    created() {
+      this.init(this.container);
+    },
+    methods: {
+      onJfbLoad(options) {
+        this.options = options;
+        //处理方法
+        const handle = (res)=>{
+          this.list = this.list.map(item => {
+            return {
+              ...item,
+              num: res[item.status] > 99 ? '99+' : res[item.status]
+            }
+          })
+        };
+
+        //Preview
+        if(this.$configProject.isPreview) {
+          setTimeout(() => {
+            let res = {
+              'all': [0, 4, 9, 99, 888][this.$xdUniHelper.random(0, 4)],
+              'unpaid': [0, 4, 9, 99, 888][this.$xdUniHelper.random(0, 4)],
+              'unreceived': [0, 4, 9, 99, 888][this.$xdUniHelper.random(0, 4)],
+              'cancel': [0, 4, 9, 99, 888][this.$xdUniHelper.random(0, 4)],
+              'com': [0, 4, 9, 99, 888][this.$xdUniHelper.random(0, 4)],
+            };
+            handle(res)
+          }, 400)
+        }
+        else{
+          jfbRootExec('getBaseOrderListCount', {
+            vm: this,
+            data: {}
+          }).then(res => {
+            handle(res)
+          }).catch(error => {
+            console.error('getBaseOrderListCount', error)
+          })
+        }
+
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.isShowBtn = getContainerPropsValue(container, 'content.isShowBtn', 'Y');
+        this.afterBuyName = getContainerPropsValue(container, 'content.afterBuyName', '售后订单');
+
+        //数字气泡
+        this.popColor = getContainerPropsValue(container, 'content.popColor', '#fff');
+        this.popBgColor = getContainerPropsValue(container, 'content.popBgColor', '#f00');
+
+
+        //标题
+        this.myOrderName = getContainerPropsValue(container, 'content.myOrderName', '我的订单')
+        this.titleStyle = getContainerPropsValue(container, 'content.titleStyle', {});
+        this.titleMargin = getContainerPropsValue(container,'content.titleMargin', {})
+
+        //添加按钮
+        this.addBtnBgColor = getContainerPropsValue(container, 'content.addBtnBgColor', 'rgba(0,0,0,0)');
+        this.addBtnStyle = getContainerPropsValue(container, 'content.addBtnStyle', {});
+        this.addBtnBorder = getContainerPropsValue(container, 'content.addBtnBorder', {});
+        this.addBtnRadius = getContainerPropsValue(container, 'content.addBtnRadius', '40');
+        this.addBtnShadow =  getContainerPropsValue(container, 'content.addBtnShadow', {});
+
+        //整体
+        this.bodyMargin = getContainerPropsValue(container, 'content.bodyMargin', {top: 0, left: 0, right: 0, bottom: 0});
+        this.bodyRadius = getContainerPropsValue(container, 'content.bodyRadius', 0);
+        this.bodyBackgroundColor = getContainerPropsValue(container, 'content.bodyBackgroundColor', 'rgba(0,0,0,0)');
+        this.bodyPadding = getContainerPropsValue(container, 'content.bodyPadding', {top: 20, left: 20, right: 20, bottom: 20});
+        this.cardNameColor = getContainerPropsValue(container, 'content.cardNameColor', '#333');
+        this.subColor = getContainerPropsValue(container, 'content.cardNameColor', '');
+        this.spacing = getContainerPropsValue(container, 'content.spacing', 20);
+
+        //其他
+        this.afterUrl = getContainerPropsValue(container, 'content.after_url', {value: ''}).value;
+        this.orderListUrl = getContainerPropsValue(container, 'content.order_url', {value: ''}).value;
+        this.margin = getContainerPropsValue(container, 'content.margin', {top: 0, left: 0, right: 0, bottom: 0});
+        this.isShowICONBtn = getContainerPropsValue(container, 'content.isShowICONBtn', 'N')
+
+        //基础
+        this.radius = getContainerPropsValue(container, 'content.radius', 0);
+        this.backgroundColor = getContainerPropsValue(container, 'content.backgroundColor', '#f8f8f8');
+        this.contPadding = getContainerPropsValue(container, 'content.contPadding', '{}')
+        this.contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contShadow', {}))
+        this.contBorder = getContainerPropsValue(container, 'content.contBorder', {});
+        this.is_border = getContainerPropsValue(container, 'content.is_border', 'N');
+        this.is_border_c = getContainerPropsValue(container, 'content.is_border_c', '#f8f8f8');
+        this.is_border_w = getContainerPropsValue(container, 'content.is_border_w', '2');
+
+        //内容列表
+        this.list = getContainerPropsValue(container, 'content.orderTypeList', []).map(item=>{
+          let image = '';
+          if(this.$xdUniHelper.checkVarType(item.image) === 'object') {
+            image = getServiceUrl(item.image.url, 'size1');
+          }
+          return {
+            ...item,
+            image,
+            size: Number(item.size ? item.size: 18) * 2,
+            num: 0
+          }
+        });
+        this.color = getContainerPropsValue(container, 'content.textColor', '#333');
+        this.iconColor = getContainerPropsValue(container, 'content.iconColor', this.mainColor);
+      },
+
+      onJfbShow(options) {
+        this.onJfbLoad(options);
+      },
+
+      handleToLink(path, type) {
+        if (this.$configProject['isPreview']) return;
+        this.$xdUniHelper.navigateTo({
+          url: type ? `${path}?type=${type}` : path
+        })
+      },
+
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseUserOrderLess.less";
+
+  .jfb-base-user-order {
+    &__body{
+      & .afterBuy {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        & > view {
+          margin-left: 10rpx;
+        }
+      }
+    }
+  }
+
+  .my-order {
+    &__add {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: unit(28, rpx);
+      min-height: 62rpx;
+
+      & > view:nth-child(2) {
+        width: unit(200, rpx);
+        height: unit(60, rpx);
+        line-height: unit(60, rpx);
+        border-radius: unit(30, rpx);
+        border: 1px solid #FF5733;
+        color: #FF5733;
+        text-align: center;
+      }
+    }
+
+    &__content {
+      &-type {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        &-item {
+          font-size: unit(24, rpx);
+          color: #999999;
+          flex: 1;
+
+          &-icon {
+            height: unit(54, rpx);
+            width: unit(54, rpx);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto;
+            position: relative;
+
+            & > image {
+              max-width: 100%;
+              max-height: 100%;
+            }
+          }
+
+          &-text {
+            padding-top: unit(10, rpx);
+            width: 100%;
+            font-size: unit(26, rpx);
+            height: unit(48, rpx);
+            line-height: unit(48, rpx);
+            text-align: center;
+          }
+
+          &-number {
+            position: absolute;
+            top: unit(-20, rpx);
+            left: unit(26, rpx);
+            font-size: unit(20, rpx);
+            border-radius: unit(18, rpx);
+            height:unit(30, rpx);
+            padding: 0 unit(8, rpx);
+            text-align: center;
+            line-height:unit(30, rpx);
+            color: #fff;
+            min-width: unit(16, rpx);
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/JfbBaseUserOrder/JfbBaseUserOrderLess.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-user-order {
+  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-user-order {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseUserOrder/JfbBaseUserOrderMixin.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-user-order'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseVideo/Api.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = [
+  {
+    mapFnName: 'getListVideoContent', //自定义方法名字（必选）
+    title: '获取内容',
+    path: '/cms/v1/ad-content',
+    isRule: false,
+    params: {
+      scene: ['使用场景', 'String', '选填'],
+      container_id: ['插件ID', 'String', '必填'],
+      page_id: ['页面ID', 'String', '必填'],
+      page_size: ['记录条数', 'Number', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+
+];