jufubao-base 1.0.19 → 1.0.21

package/src/components/JfbBaseSetPwd/JfbBaseSetPwdMixin.js

@@ -93,16 +93,31 @@ export default {
       //#ifdef H5
       
       //@AttrData
-      Attr, //对外开发编辑属性
+      Attr:{}, //对外开发编辑属性
       //@EndAttrData
       
       active: false, //是否选择当前状态
       isEditx: true, //当前为Editx模式
       edit: false, //是否开启编辑模式
       // #endif
+
+      //风格键
+      mainColor: '',
+      successColor: '',
+      warningColor: '',
+      subMainColor: '',
+      infoColor: '',
+      defaultColor: '',
+      dangerColor: ''
     }
   },
   created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
     //设置插件cid
     if (this.cid) {
       this.containerId = this.cid;
@@ -110,6 +125,9 @@ export default {
       this.containerId = this.$xdUniHelper.randomChar(20);
     }
 
+    //初始化风格
+    this.initThemesToData();
+
     //#ifdef H5
     //监听用户点击状态显示虚框
     XdBus.addEvent('select', ({containerId}) => {
@@ -132,6 +150,26 @@ export default {
     onCheck() {
     },
 
+    /***
+     * @description 业务组件风格map到data中
+     */
+    initThemesToData() {
+      Object.keys(this.styles).map(key => {
+        let k = key.replace('$', '');
+        if (this[k] !== undefined) this[k] = this.styles[key];
+      });
+      console.log('initThemesToData',this)
+    },
+
+    /**
+     * @description 其子级插件获取当前插件的业务组件风格列表
+     * @returns {*}
+     */
+    getParentThemes(){
+      return this.styles;
+    },
+
+
     //#ifdef H5
     /**
      * @description 点击删除操作按钮
@@ -153,8 +191,8 @@ export default {
       //#ifdef H5
       if (this.active) return;
       this.active = true;
-      let AttrObj = this.$xdUniHelper.checkVarType(Attr) === 'object' ?
-        Attr: { style: [], advanced: [], content: []};
+      let AttrObj = this.$xdUniHelper.checkVarType(this.Attr) === 'object' ?
+        this.Attr : { style: [], advanced: [], content: []};
       console.log('handleSelect.Attr', AttrObj);
 
       //设置已绑定数据
@@ -169,7 +207,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseSuccess/Attr.js

@@ -0,0 +1,68 @@
+'use strict';
+
+export default {
+  style: [],
+  content: [
+    {
+      label: '选择订单状态接口地址:',
+      ele: 'xd-select-list',
+      valueKey: 'order_status_url',
+      value: null,
+      placeholder: '请选择订单状态接口地址',
+      multiple: false,
+      classNmae: 'input80',
+      list: XdBus.getParentData('getOrderStatusApiList'),
+      rules: [
+        {
+          required: true,
+          message: '请选择订单状态接口地址',
+          trigger: 'change'
+        },
+      ]
+    },
+    {
+      label: '背景颜色:',
+      ele: 'xd-color',
+      valueKey: 'bgColor',
+      value: '#EC4D71',
+      placeholder: '请选择背景颜色',
+      classNmae: 'input80',
+      rules: [
+        {
+          required: true,
+          message: '请选择背景颜色',
+          trigger: 'blur'
+        },
+      ]
+    },
+    {
+      label: '轮询最大2的N次方（秒）:',
+      ele: 'el-input',
+      type: 'number',
+      valueKey: 'maxTime',
+      value: 5,
+      placeholder: '请输入自定义按钮名称',
+      className: 'input80'
+    },
+    {
+      label: '自定义按钮名称:',
+      ele: 'el-input',
+      type: 'text',
+      valueKey: 'custom_btn_name',
+      value: '',
+      placeholder: '请输入自定义按钮名称',
+      className: 'input80'
+    },
+    {
+      "label": "自定义按钮跳转地址:",
+      "ele": "xd-select-pages-path",
+      "valueKey": "custom_btn_url",
+      "value": null,
+      "setting": {
+        router: XdBus.getParentData('getPagesTree'),
+      },
+      "inline": false,
+    },
+  ],
+  advanced: [],
+}

package/src/components/JfbBaseSuccess/JfbBaseSuccess.vue

@@ -0,0 +1,327 @@
+<template>
+  <view
+    class="jfb-base-success"
+    @click="handleSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-success__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-success__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-success__body">
+      <xd-success
+        v-if="order_id !== null && packageData"
+        :bg-color="bgColor"
+        :title-background="background"
+        :key="xdMySuccess"
+        :max-time="maxTime"
+        @onBtn="handleOnBtnClick"
+        @getStatus="getStatus"
+      ></xd-success>
+    </view>
+  </view>
+</template>
+
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import {jfbRootExec} from "@/utils/xd.event";
+  import JfbBaseSuccessMixin from "./JfbBaseSuccessMixin";
+  import XdSuccess from "@/components/XdSuccess/XdSuccess";
+  import {getContainerPropsValue} from "@/utils/xd.base";
+  import {getNoUrl} from "@/utils/nourl";
+
+  export default {
+    name: "JfbBaseSuccess",
+    components: {
+      XdFontIcon,
+      XdSuccess
+    },
+    mixins: [
+      JfbBaseSuccessMixin
+    ],
+    data() {
+      return {
+        packageData: false, //插件数据已完成初始化
+        order_id: null, //订单号已完成初始化
+        maxTime: 5, //最长轮询2的N次方（秒）
+        detail: '',//自定义按钮跳转
+        index: '', //首页跳转
+        statusUrl: null, //获取订单状态接口地址
+        
+        //请求参数
+        params:null,
+        view: window['jfbConfingView'] === 'preview',
+        bgColor: null,
+        
+        //预览模式刷新插件
+        xdMySuccess: 'xdMySuccess',
+        background: '',
+      }
+    },
+    watch: {
+      container(value) {
+        this.init(value)
+      }
+    },
+    created() {
+      this.init(this.container);
+    },
+    methods: {
+      onJfbLoad(options) {
+        this.params = options;
+        this.order_id = options.order_id || '470274149596532736';
+      },
+  
+      /**
+       * @description 打包预览模式
+       * @param cb {Function|null}
+       */
+      viewTrue(cb){
+        //status => 3000:成功  3002:失败  3001:进行中
+        let orderStatus = ['3001', '3000', '3002'][this.$xdUniHelper.random(0, 2)];
+        let info = {
+          icon: 'iconshijian',
+          iconSize: 80, //图标大小
+          iconColor: '#333', //图标颜色
+          orderName: '订单处理中', //订单状态名称
+          orderStatus: orderStatus, //订单状态名称,
+          content: '',
+          tips: '请耐心等待...',
+        };
+        
+        //成功
+        if(orderStatus  === '3000'){
+          info = {
+            icon: 'icondingdanwancheng',
+            iconSize: 80, //图标大小
+            iconColor: 'green', //图标颜色
+            orderName: '订单支付完成', //订单状态名称
+            orderStatus: orderStatus, //订单状态名称,
+            content: '',
+            tips: '非常感谢您购买我们的产品！',
+          }
+        }
+        
+        //失败
+        if (orderStatus === '3002') {
+          info = {
+            icon: 'icongerenzhongxinchufabaocuo',
+            iconSize: 80, //图标大小
+            iconColor: 'red', //图标颜色
+            orderName: '订单支付失败', //订单状态名称
+            orderStatus: orderStatus, //订单状态名称,
+            content: '',
+            tips: '请返回订单重新支付！',
+          }
+        }
+        
+        let result = {
+          //基础信息
+          info: {
+            descTitle: '温馨提示',
+            desc: '支付成功后，平台不会以付款异常、卡单、系统升级为由联系您。请勿泄露银行卡号、手机验证码，否则会造成钱款损失！谨防诈骗电话！',
+            btn: [
+              {'label': '返回首页', type: 'info', radius: '10rpx', value: 1},
+              {
+                label: getContainerPropsValue(this.container, 'content.custom_btn_name'),
+                type: 'primary',
+                radius: '12rpx',
+                value: 2
+              },
+            ],
+          },
+  
+          //订单信息
+          order: info,
+  
+          //app提示
+          app: {
+            use_desc: '本兑换码：仅限于万达电影官方APP使用'
+          },
+  
+          //码信息
+          code: {
+            //电子码 （密码）
+            code: [
+              {label: "兑换码：", value: "jfbcake.oss-cn-beijing.aliyuncs.comliyuncs.com"},
+              {label: "兑换码：", value: "45122"}
+            ],
+    
+            //电子码 （号码 + 密码）
+            numberAndPassword: [
+              [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}],
+              [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}]
+            ],
+    
+            //条形码
+            barcode: [
+              {
+                label: "券号:cardcardcardcard0001 密码：21337",
+                value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=&p=21337"
+              },
+              {
+                label: "券号:cardcardcardcard0001 密码：21337",
+                value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=cardcardcardcard0001&p=21337"
+              }
+            ],
+    
+            //二维码
+            twocode: [
+              {
+                label: "券号:cardcardcardcard0001 密码：21337",
+                value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
+              },
+              {
+                label: "券号:cardcardcardcard0001 密码：21337",
+                value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
+              }
+            ],
+          },
+        };
+        if(orderStatus !== '3000') {
+          delete result.app;
+          delete result.code;
+        }
+        
+        cb(result);
+      },
+      
+      /**
+       * @description 监听事件变化
+       * @param value {object} 业务组件对象自己
+       */
+      init(value) {
+        this.order_id = this.$xdUniHelper.parseURL()['params'].order_id || '470274149596532736';
+        this.detail = getContainerPropsValue(value, 'content.custom_btn_url', {label: '', value: ''}).value;
+        this.index = this.settings.index;
+        this.bgColor = getContainerPropsValue(value, 'content.bgColor', '#EC4D71');
+        this.maxTime = Number(getContainerPropsValue(value, 'content.maxTime', 5));
+        this.statusUrl = getContainerPropsValue(value, 'content.order_status_url', null);
+        this.xdMySuccess = this.$xdUniHelper.randomChar(20);
+        this.packageData = true;
+        this.background = this.pageAttr.configs['background_color'];
+        
+      },
+      /**
+       * @description 获取订单详情，轮询时间使用2n次方递增方式
+       * @param resolve 回调函数
+       */
+      getStatus(resolve) {
+        if(this.view && 0) {
+          this.viewTrue(resolve);
+          return
+        }
+        
+        //当前请求次未获取到参数返回正在进行中
+        if(this.params === null && this.packageData === false) {
+          return resolve({
+            icon: 'iconshijian',
+            iconSize: 80, //图标大小
+            iconColor: '#333', //图标颜色
+            orderName: '订单处理中', //订单状态名称
+            orderStatus: '3001', //订单状态名称,
+          });
+        }
+        
+        console.log('getOrderStatus.start', this.statusUrl);
+        getNoUrl({url:this.statusUrl, params: {...this.params, order_id: this.order_id}})
+          .then(([res])=>{
+            console.log(res);
+            resolve(this.handleOrderResolve(res));
+          })
+          .catch(error => {
+            console.error(error);
+            this.$xdLog.catch(error)
+          })
+      },
+
+      handleOrderResolve({info, order}){
+        let icon = "iconshijian";
+        let iconColor = '#333';
+        let btn = [{'label': '返回首页', type: 'info', radius: '10rpx', value: 1}];
+        if(order.orderStatus == '3000'){
+          icon = "icondingdanwancheng";
+          iconColor = "green";
+          btn = btn.concat([
+            {
+              label: getContainerPropsValue(this.container, 'content.custom_btn_name'),
+              type: 'primary',
+              radius: '12rpx',
+              value: 2
+            }
+          ])
+        }else if(order.orderStatus == '3002'){
+          iconColor = "red";
+          icon = "icongerenzhongxinchufabaocuo";
+          btn = btn.concat([
+            {'label': '重新支付', type: 'info', radius: '10rpx', value: 3},
+          ])
+        }
+
+        let result = {
+          //基础信息
+          info: {
+            descTitle: info.descTitle,
+            desc: info.desc,
+            tips: order.tips,
+            btn: btn,
+          },
+  
+          //订单信息
+          order: {
+            icon: icon,
+            iconSize: 80, //图标大小
+            iconColor: iconColor, //图标颜色
+            orderName: order.orderName, //订单状态名称
+            orderStatus: order.orderStatus, //订单状态名称,
+            content: '',
+            tips: order.tips,
+          },
+        };
+        return result;
+      },
+
+      handleOnBtnClick({btn}) {
+        if (btn['value'] === 1) {
+          this.$xdUniHelper.redirectTo({
+            url: this.index
+          }, false)
+        }
+        if (btn['value'] === 2) {
+          let other = this.$xdUniHelper.jsonToParams({...this.params, order_id: this.order_id});
+          this.$xdUniHelper.redirectTo({
+            url: `${this.detail}?${other}`
+          })
+        }
+        if (btn['value'] === 3) {
+          this.$xdUniHelper.navigateBack();
+        }
+      },
+      
+      /**
+       * @description 页面返回按钮
+       * @param options
+       */
+      onJfbBack(options) {
+        this.$xdUniHelper.navigateBack()
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseSuccessLess.less";
+
+  .jfb-base-success {
+    &__body {
+
+    }
+  }
+</style>

package/src/components/JfbBaseSuccess/JfbBaseSuccessLess.less

@@ -0,0 +1,57 @@
+/**
+* @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-success {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+
+  &.editx {
+    position: relative;
+    border: 1px dashed blue;
+    box-sizing: border-box;
+
+  }
+
+  &:hover {
+    border: 1px dashed blue;
+  }
+
+
+  &__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