jufubao-third 1.0.23-beta1 → 1.0.23-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-third",
-  "version": "1.0.23-beta1",
+  "version": "1.0.23-beta3",
   "private": false,
   "description": "聚福宝业务组件第三方购物平台包",
   "main": "index.js",

package/src/components/JfbThirdOpenEmbeddedMp/Attr.js

@@ -0,0 +1,121 @@
+'use strict';
+
+import {dataVal,getAttrPathMsg} from "@/utils/AttrTools";
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data={},gValue={},gColor={},oldData) => {
+    const cashierURL = getAttrPathMsg(data , 'cashierURL', '收银台');
+    return [
+      //===base=========
+      {
+        ele: 'title',
+        label: '基础',
+        size: 'small',
+        groupKey:'content',
+      },
+      {
+        label: '渠道配置',
+        ele: 'xd-site-select-list',
+        labelInline: true,
+        valueKey: 'channelApi',
+        value: dataVal({data, key:'channelApi', dValue:'10', gValue}),
+        placeholder: '请选择渠道配置',
+        multiple: false,
+        className: 'input100',
+        groupKey:'content',
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({
+            setting_id: 'edtix_style_radius1',
+            key: Date.now()
+          })
+            .then(res => {
+              res.list = res.list.filter(item=>{
+                return item.label !== '无';
+              });
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+        rules: [
+          {
+            required: false,
+            validator: (rule, value, callback) => {
+              let setTpl = dataVal({data, key:'footerTpl', dValue:'normal', gValue});
+              if(setTpl === 'itemCenterBig') {
+                if(value && value.length === 0) callback('请设置菜单');
+                else {
+                  let errorStr = '';
+                  if(value && value.length > 0) {
+                    let len = value.length;
+                    for(let i = 0; i < len; i++) {
+                      if(value[i].name.length > 5) {
+                        errorStr = `菜单${i}最大长度不能超过5个汉字`;
+                        break
+                      }
+                    }
+                  }
+                  if(errorStr) {
+                    callback(errorStr)
+                  }else callback();
+                }
+              }
+              else callback()
+            },
+            trigger: 'blur'
+          }
+        ],
+      },
+      {
+        label: '',
+        ele: 'el-input',
+        type: 'text',
+        groupKey: 'content',
+        valueKey: 'channelApiBase',
+        value: 'v2.0',
+        hidden: true,
+      },
+
+      //===advanced=========
+      {
+        label: cashierURL.label,
+        ele: 'xd-select-pages-path',
+        valueKey: cashierURL['key'],
+        groupKey:'advanced',
+        placeholder: cashierURL.hold,
+        value: cashierURL.path,
+        labelInline:true,
+        className: 'input100',
+        setting: {
+          mode:'new',
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
+      {
+        label: '版本号:',
+        ele: 'el-input',
+        type: 'text',
+        groupKey: 'advanced',
+        valueKey: 'version',
+        value: 'v2.0',
+        hidden: true,
+      },
+      {
+        label: '过滤引用模版字段:',
+        ele: 'el-input',
+        type: 'text',
+        groupKey: 'advanced',
+        valueKey: 'refFilterKey',
+        value: '[]',
+        hidden: true,
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbThirdOpenEmbeddedMp/JfbThirdOpenEmbeddedMp.vue

@@ -0,0 +1,130 @@
+<template>
+  <view
+    class="jfb-third-open-embedded-mp"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-third-open-embedded-mp__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-third-open-embedded-mp__edit-icon" @click.stop="delEdit">
+        <xd-font-icon icon="iconshanchu-01" color="#fff" size="30"></xd-font-icon>
+      </view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-third-open-embedded-mp__body">
+      <view class="pop" :style="[noDataStyleComp]">弹窗模式方便编辑(占位)，在线上此模块不显</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import JfbThirdOpenEmbeddedMpMixin from "./JfbThirdOpenEmbeddedMpMixin";
+  import { gCPVal } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import {mapState} from "vuex";
+  import {getNoUrl} from "@/utils/nourl";
+  import Color from "color";
+
+  export default {
+    name: "JfbThirdOpenEmbeddedMp",
+    components: {
+      XdFontIcon
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbThirdOpenEmbeddedMpMixin
+    ],
+    data() {
+      return {
+        backgroundColor: '',//提示信息背景
+        isPreview: false,
+
+        //基础
+        channelApi:'',
+
+
+        //高级
+        cashierURL:'',
+      }
+    },
+    computed:{
+      ...mapState(['extraData']),
+
+      noDataStyleComp(){
+        let height = '60rpx';
+        if(!this.isPreview) height = 0;
+        return {
+          backgroundColor:this.backgroundColor,
+          color:this.warningColor,
+          minHeight: height,
+          textAlign: 'center',
+          lineHeight: height,
+          fontSize: '24rpx',
+          padding: '16rpx',
+          overflow: 'hidden'
+        }
+      },
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+      extraData:{
+        deep: true,
+        handler(value){
+          this.requestApi(value)
+        }
+      }
+    },
+    created() {
+      this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
+      this.isPreview = this.$configProject['isPreview'];
+
+      this.init(this.container);
+    },
+    methods: {
+      /**
+       * @description 请求三方接口
+       */
+      requestApi(params){
+        this.$xdShowLoading({});
+        //打包模式
+        getNoUrl(params)
+          .then(res => {
+
+          })
+          .catch(error => {
+            console.log(error)
+          });
+
+      },
+
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.channelApi = gCPVal(container, 'channelApi', '');
+        this.cashierURL = gCPVal(container, 'cashierURL', {value: 'cashierURL'}).value;
+      },
+
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbThirdOpenEmbeddedMpLess.less";
+
+  .jfb-third-open-embedded-mp {
+    &__body{
+
+    }
+  }
+</style>

package/src/components/JfbThirdOpenEmbeddedMp/JfbThirdOpenEmbeddedMpLess.less

@@ -0,0 +1,80 @@
+/**
+* @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-third-open-embedded-mp {
+  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: var(--preview-z-index);
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(0, rpx);
+    height: unit(50, rpx);
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .4);
+    border-radius: 0 0 0 20rpx;
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+    padding: 0 6rpx 0 6px;
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-third-open-embedded-mp {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbThirdOpenEmbeddedMp/JfbThirdOpenEmbeddedMpMixin.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-third-open-embedded-mp'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}