jufubao-base 1.0.19 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",
@@ -12,6 +12,7 @@
     "init.entry": "node ./build/commands/entry.init.js",
     "update": "node ./commands/update.pack.js",
     "create": "node ./commands/create.pack.js",
+    "change": "node ./commands/change.pack",
     "release": "node ./commands/npmignore && npm publish",
     "init": "cross-env isLocal=false node ./commands.js",
     "init.local": "cross-env isLocal=true node ./commands.js",

package/src/components/JfbBaseBlock/JfbBaseBlockMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseCard/JfbBaseCardMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseCardBind/JfbBaseCardBindMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseCardDetail/JfbBaseCardDetailMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseCardInfo/JfbBaseCardInfoMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseCardMy/JfbBaseCardMyMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseCardShift/JfbBaseCardShiftMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseFooter/Attr.js

@@ -0,0 +1,82 @@
+'use strict';
+export default {
+  style: [],
+  advanced: [],
+  content: [
+    {
+      label: '', //label
+      ele: 'slot', //package 名称
+      slot: 'is_reference_title',
+    },
+    {
+      label: '背景颜色:', //label
+      ele: 'xd-color', //package 名称
+      valueKey: 'bgColor', //form[valueKey]
+      value: '#f9f9f9', //v-model
+      placeholder: '请选择背景颜色',
+      setting: {
+        isAlpha: false
+      },
+      classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+      rules: [
+        {
+          required: true,
+          message: '请选择背景颜色',
+          trigger: 'change'
+        },
+      ]
+    },
+    {
+      label: '菜单文字颜色:', //label
+      ele: 'xd-color', //package 名称
+      valueKey: 'color', //form[valueKey]
+      value: '#333', //v-model
+      setting: {
+        isAlpha: false
+      },
+      placeholder: '请选择菜单文字颜色',
+      classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    },
+    {
+      label: '菜单文字选中颜色:', //label
+      ele: 'xd-color', //package 名称
+      valueKey: 'selectedColor', //form[valueKey]
+      setting: {
+        isAlpha: false
+      },
+      value: '#c00', //v-model
+      placeholder: '请选择菜单文字选中颜色',
+      classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    },
+    {
+      label: '菜单配置:', //label
+      ele: 'xd-footer-setting', //package 名称
+      valueKey: 'footer-setting', //form[valueKey]
+      value: [],
+      setting: {
+        router: XdBus.getParentData('getPagesTree'),
+      },
+      handleCustom({action,data}){
+        console.log(`handleCustom.${action}`, data);
+        if(action === 'number') {
+          XdBus.getParentApi('getOptionsNoticeNumber')()
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch();
+        }
+      },
+      inline: false,
+      notice: '设置底部菜单的链接地址、标题(最多<sapn style="color: red">五个汉字</sapn>)、ICON图标（<a href="https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.db775f1f3&manage_type=myprojects&projectId=3378319&keyword=&project_type=&page=" style="color: blue" target="_blank">ICONFONT库</a>）、ICON大小（单位：<sapn style="color: red">像素</sapn>）和是否有消息数量显示（无数量显示可以不填写）',
+      rules: [
+        {required: true, message: '请添加内容', trigger: 'change'},
+      ],
+    },
+    {
+      label: '', //label
+      ele: 'slot', //package 名称
+      slot: 'is_reference',
+    },
+  ],
+};
+

package/src/components/JfbBaseFooter/JfbBaseFooter.vue

@@ -13,78 +13,149 @@
       <view class="jfb-base-footer__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-footer__body">
-      <view>测试插件( {{containerId}} )</view>
+    <view class="jfb-base-footer__body" :style="{height:height + 'rpx'}">
+      <xd-footer-bar
+        v-if="list !== null"
+        :height="height"
+        :tabbar="list"
+        :view="view"
+        :styles="styles"
+        :key="footerBarKey"
+      ></xd-footer-bar>
     </view>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdFooterBar from "@/components/XdFooterBar/XdFooterBar";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseFooterMixin from "./JfbBaseFooterMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
+  import {getNoUrl} from "@/utils/nourl";
+  import {
+    getContainerPropsValue,
+    getComponentAttr
+  } from "@/utils/xd.base";
   export default {
     name: "JfbBaseFooter",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdFooterBar
     },
     mixins: [
       JfbBaseFooterMixin
     ],
     data() {
       return {
-
-        //todo
+        height: 0,
+        list: null,
+        view: false,
+        numObj: {},
+        footerBarKey: 'footerBarKey', //刷新
+        
       }
     },
     watch: {
       container(value) {
-        this.init(value)
+        this.init(value);
+        this.getNumber()
+        this.footerBarKey = this.$xdUniHelper.randomChar(20);
       }
     },
     created() {
+      this.view = window['jfbConfingView'] === 'preview';
+      
+      //设置高度
+      if(window['jfbConfingView'] === 'preview') {
+        this.height = getComponentAttr(this.componentAttr, 'height') - 4;
+      }
+      else {
+        this.height = getComponentAttr(this.componentAttr, 'height');
+      }
+      
       this.init(this.container);
-
-      //todo
     },
     methods: {
       onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
+        this.getNumber()
       },
+      
       /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
+       * @description 从后台获取消息数量
        */
-      init(value) {
-
-        //this.bgcolor = getContainerPropsValue(value, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(value, 'content.height', 10);
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
-      },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
+      getNumber(){
+        let bar = getContainerPropsValue(this.container, 'content.footer-setting', []);
+        let params = [];
+        bar.map((item, index) => {
+          if(item.api) {
+            let urlObj = this.$xdUniHelper.parseURL(item.api);
+            params.push({
+              url: urlObj.path,
+              index: index,
+              params: {
+                ...urlObj.params,
+              }
+            })
+          }
+        });
+        
+        //预览模式
+        if(this.view) {
+          this.setNumber(params, params.map(item=>{
+            return {
+              num: [9,99,199][this.$xdUniHelper.random(0,2)]
+            }
+          }));
+          return;
+        }
+        
+        //打包模式
+        getNoUrl(params)
+          .then(res=>{
+            this.setNumber(params, res);
+          })
+          .catch(error=>{
+            console.log(error)
+          });
       },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
-      },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
+      
+      /**
+       * @description 设置系统消息数量
+       * @param params {Array} 请求参数
+       * @param result {Array} 返回结果
+       */
+      setNumber(params, result){
+        let index = {};
+        params.map((item, idx)=>{
+          if(result[idx]['num'] > 99) result[idx]['num'] = '99+';
+          index[item.index] = result[idx]['num'];
+        });
+        this.numObj = index;
+        this.init(this.container);
+        this.footerBarKey = this.$xdUniHelper.randomChar(20);
       },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
+      
+      /**
+       * @description 监听事件变化
+       * @param value {object} 业务组件对象自己
+       */
+      init(value) {
+        //设置底部菜单
+        let bar = getContainerPropsValue(value, 'content.footer-setting', []);
+        this.list = {
+          bgColor: getContainerPropsValue(value, 'content.bgColor', '#fff'),
+          selectedColor: getContainerPropsValue(value, 'content.selectedColor', '#fff'),
+          color: getContainerPropsValue(value, 'content.color', '#333'),
+          list: bar.map((item,index)=>{
+            return {
+              name: item.name,
+              icon: item.icon,
+              path: item.path.value,
+              size: item.size,
+              num: this.numObj[index] ? this.numObj[index]: 0 ,
+            }
+          }),
+        };
       },
     }
   }
@@ -96,7 +167,7 @@
 
   .jfb-base-footer {
     &__body{
-
+      box-sizing: border-box;
     }
   }
 </style>

package/src/components/JfbBaseFooter/JfbBaseFooterMixin.js

@@ -1,5 +1,9 @@
 'use strict';
 
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
 import {getContainerPropsValue} from "@/utils/xd.base";
 export default {
   props: {
@@ -88,6 +92,10 @@ export default {
       containerId: null, //容器ID
       //#ifdef H5
       
+      //@AttrData
+      Attr, //对外开发编辑属性
+      //@EndAttrData
+      
       active: false, //是否选择当前状态
       isEditx: true, //当前为Editx模式
       edit: false, //是否开启编辑模式
@@ -161,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseLine/JfbBaseLineMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseLogin/JfbBaseLoginMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseSetPwd/JfbBaseSetPwdMixin.js

@@ -169,7 +169,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,277 @@
+<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);
+          })
+          .catch(error => {
+            console.error(error);
+            this.$xdLog.catch(error)
+          })
+      },
+
+      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}`
+          })
+        }
+      },
+      
+      /**
+       * @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

package/src/components/JfbBaseSuccess/JfbBaseSuccessMixin.js

@@ -0,0 +1,184 @@
+'use strict';
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+import {getContainerPropsValue} from "@/utils/xd.base";
+export default {
+  props: {
+    /**
+     * @description 插件在页面中到唯一ID
+     */
+    cid:{
+      type: null|String|Number,
+      default: null,
+    },
+    /**
+     * @description 业务插件相关数据集合
+     */
+    container:{
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    /**
+     * @description 页面框架属性
+     */
+    layoutInfo: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    /**
+     * @description 页面属性
+     */
+    pageAttr: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    /**
+     * @description 业务插件元素属性（插件管理时候填写属性）
+     */
+    componentAttr: {
+      type: Object|Array,
+      default() {
+        return {}
+      }
+    },
+    /**
+     * @description 业务插件所属插件库属性（业务插件库）
+     */
+    appAttr: {
+      type: Object|Array,
+      default() {
+        return {}
+      }
+    },
+    /**
+     * @description 项目配置
+     */
+    settings: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    /**
+     * @description 业务插件库所用风格属性
+     */
+    styles: {
+      type: Object || null,
+      default() {
+        return {}
+      }
+    },
+    /**
+     * @description 项目配置文件
+     */
+    projectAttr: {
+      type: Object || null,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      containerId: null, //容器ID
+      //#ifdef H5
+      
+      //@AttrData
+      Attr, //对外开发编辑属性
+      //@EndAttrData
+      
+      active: false, //是否选择当前状态
+      isEditx: true, //当前为Editx模式
+      edit: false, //是否开启编辑模式
+      // #endif
+    }
+  },
+  created() {
+    //设置插件cid
+    if (this.cid) {
+      this.containerId = this.cid;
+    } else {
+      this.containerId = this.$xdUniHelper.randomChar(20);
+    }
+
+    //#ifdef H5
+    //监听用户点击状态显示虚框
+    XdBus.addEvent('select', ({containerId}) => {
+      this.active = containerId === this.containerId;
+    });
+
+    //业务面板选中插件操作
+    XdBus.addEvent('onBoardSelect', ({containerId}) => {
+      if (containerId === this.containerId) {
+        this.handleSelect()
+      }
+    });
+    // #endif
+  },
+  methods: {
+
+    /**
+     * 检查插件是否加载成功
+     */
+    onCheck() {
+    },
+
+    //#ifdef H5
+    /**
+     * @description 点击删除操作按钮
+     */
+    delEdit(){
+      XdBus.send('onDelPackage', {
+        containerId: this.containerId,
+        componentAtrr: this.componentAtrr,
+        cid: this.cid,
+        container: this.container
+      })
+    },
+    //#endif
+
+    /**
+     * @description 点击选择插件显示边框
+     */
+    handleSelect() {
+      //#ifdef H5
+      if (this.active) return;
+      this.active = true;
+      let AttrObj = this.$xdUniHelper.checkVarType(Attr) === 'object' ?
+        Attr: { style: [], advanced: [], content: []};
+      console.log('handleSelect.Attr', AttrObj);
+
+      //设置已绑定数据
+      Object.keys(AttrObj).map(type=>{
+        AttrObj[type].map(item=>{
+           if(item.value !== undefined) item.value = getContainerPropsValue(this.container, `${type}.${item.valueKey}`, item.value);
+           if(item.defaultValue !== undefined) item.defaultValue = getContainerPropsValue(this.container, `${type}.${item.valueKey}`, item.value);
+        })
+      });
+
+      //发送点击组件事件
+      XdBus.send('onSelectPackage', {
+        containerId: this.containerId,
+        Attr: AttrObj,
+        container: this.$xdUniHelper.cloneDeep(this.container)
+      });
+
+      //绑定选中插件事件
+      XdBus.message('select', {
+        containerId: this.containerId,
+      })
+      //#endif
+    },
+
+
+  }
+}

package/src/components/JfbBaseTestApi/JfbBaseTestApiMixin.js

@@ -169,7 +169,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseTestBody/JfbBaseTestBodyMixin.js

@@ -161,7 +161,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseTestBottom/JfbBaseTestBottomMixin.js

@@ -161,7 +161,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseTestTop/JfbBaseTestTopMixin.js

@@ -161,7 +161,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件