jufubao-base 1.0.238 → 1.0.239-beta2

package/src/components/JfbBasePosterGroup/JfbBasePosterGroup.vue

@@ -0,0 +1,268 @@
+<template>
+  <view class="jfb-base-poster-group" @click="handleEditxSelect" :class="{ editx : isEditx && active }">
+    <!--#ifdef H5-->
+    <view class="jfb-base-poster-group__edit" :class="{ editx : isEditx && active }" v-if="isEditx && active">
+      <view class="jfb-base-poster-group__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-poster-group__body" :style="[bodyStyleComp]">      
+      <view class="jfb-base-poster-group__body-header">
+        <view class="jfb-base-poster-group__body-header-title">
+          <XdContentXss :html="title"></XdContentXss>
+          <view @click="handleToMore" v-if="is_show_more==='Y'" class="jfb-base-poster-group__body-header-title-more">
+            更多
+            <XdFontIcon size="20" icon="iconxiangyou_xian"></XdFontIcon>
+          </view>
+        </view>
+        <view class="jfb-base-poster-group__body-header-subtitle">
+          {{subtitle}}
+        </view>
+      </view>
+      <view class="jfb-base-poster-group__body-content">
+        <view class="jfb-base-poster-group__body-content-tabs">
+          <view @click="handleChangeTab(item)" :style="[tab===item.random?activeStyleComp:normalStyleComp]"
+            class="jfb-base-poster-group__body-content-tabs-item" v-for="(item, index) in posterGroup.group"
+            :key="index">
+            {{item.title}}
+          </view>
+        </view>
+        <view v-if="imageGroup&&imageGroup.length>0" class="jfb-base-poster-group__body-content-images">
+          <image :style="{width: imageWidth,height:imageWidth}" @click="handleClick(item)"
+            v-for="(item,index) in imageGroup" :key="index" :src="item.image_url">
+          </image>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdContentXss from '@/components/XdContentXss/XdContentXss';
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBasePosterGroupMixin from "./JfbBasePosterGroupMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import getServiceUrl from "@/common/getServiceUrl";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import posterMixins from "@/mixins/posterMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  export default {
+    name: "JfbBasePosterGroup",
+    components: {
+      XdFontIcon,
+      XdContentXss
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBasePosterGroupMixin, posterMixins
+    ],
+    data() {
+      return {
+        posterGroup: {},
+        morePath: '',
+        is_show_more: 'Y',
+        backgroundImage: '',
+        title: '',
+        subtitle: '',
+        imageGroup: [],
+        tab: '',
+        radius: 0,
+        margin: {},
+        padding: {},
+        bgColor: ''
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    computed: {
+      bodyStyleComp() {
+        return {
+          backgroundColor: this.bgColor,
+          backgroundImage: `url(${this.backgroundImage})`,
+          backgroundSize: '100% 100%',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+          borderRadius: `${this.radius}rpx`,
+          margin: this.getMarginAndPadding(this.margin, 20),
+          padding: this.getMarginAndPadding(this.padding, 20),
+        }
+      },
+      activeStyleComp() {
+        return {
+          color: '#6D4604',
+          background: '#FDDC83',
+          border: '1px solid #FDDC83',
+          borderRadius: '40rpx'
+        }
+      },
+      normalStyleComp() {
+        return {
+          color: '#F5DC9E',
+          border: '1px solid #F5DC9E',
+          borderRadius: '40rpx'
+        }
+      },
+      imageWidth() {
+        let width = 750
+        let paddingLeft = this.checkValue(this.padding.left,20)
+        let paddingRight = this.checkValue(this.padding.right,20)
+        let marginLeft = this.checkValue(this.margin.left,20)
+        let marginRight = this.checkValue(this.margin.right,20)
+        width = width - paddingLeft - paddingRight - marginLeft - marginRight
+        width = width - 60 //减去右边距 
+        return `${width / 4}rpx`
+      }
+    },
+    created() {
+      this.init(this.container);
+    },
+    methods: {
+      onJfbLoad(options) {
+        this.getPosterGroup(this.posterGroup.group[0])
+      },
+      getPosterGroup(item) {
+        this.tab = item.random;
+        jfbRootExec('getListPosterGroupContent', {
+          vm: this,
+          data: {
+            page_id: this.pageAttr["page_id"], //页面ID
+            container_id: this.containerId + item.random, //组件ID
+            page_size: 200
+          }
+        }).then(res => {
+          this.imageGroup = res.list.map(item => {
+            return {
+              ...item,
+              image_url: getServiceUrl(item.image_url)
+            }
+          })
+        }).catch()
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.posterGroup = getContainerPropsValue(container, 'content.posterGroup', {});
+        this.morePath = getContainerPropsValue(container, 'content.morePath', { value: "" }).value;
+        this.is_show_more = getContainerPropsValue(container, 'content.is_show_more', 'Y');
+        this.backgroundImage = getServiceUrl(getContainerPropsValue(container, 'content.backgroundImage', { url: "" }).url);
+        this.bgColor = getContainerPropsValue(container, "content.bgColor", "#FFFFFF");
+        this.title = getContainerPropsValue(container, 'content.title', '<p style="font-weight:bold;font-size:16px"><span style="color: #FFF">全球大牌，会员低至</span><span style="color: #F2D894">8折</span></p>');
+        this.subtitle = getContainerPropsValue(container, 'content.subtitle', '超300+品牌商品');
+        this.radius = getContainerPropsValue(container, 'content.radius', 20);
+        this.margin = getContainerPropsValue(container, 'content.bodyMargin', {});
+        this.padding = getContainerPropsValue(container, 'content.bodyPadding', {});
+      },
+      checkValue(value, dValue = 0) {
+        if (value === undefined || value === '' || value === null) return dValue;
+        return Number(value || 0);
+      },
+      handleClick(item) {
+        if (this.isPreview) return;
+        this.handlePosterClick(item)
+      },
+      handleToMore() {
+        this.$xdUniHelper.navigateTo({
+          url: this.morePath,
+        });
+      },
+      handleChangeTab(item) {
+        this.getPosterGroup(item)
+      },
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      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 "./JfbBasePosterGroupLess.less";
+
+  .jfb-base-poster-group {
+    &__body {
+      padding: 24rpx;
+      margin: 20rpx;
+      border-radius: 30rpx;
+
+      &-header {
+        &-title {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 10rpx;
+
+          &-more {
+            display: flex;
+            align-items: center;
+            color: #FFFFFF;
+            font-size: 24rpx;
+          }
+        }
+
+        &-subtitle {
+          color: #FFFFFF;
+          font-size: 24rpx;
+        }
+      }
+
+      &-content {
+        &-tabs {
+          display: flex;
+          flex-wrap: wrap;
+
+          &-item {
+            margin-top: 20rpx;
+            margin-right: 20rpx;
+            padding: 11rpx 25rpx;
+            font-size: 25rpx;
+          }
+        }
+
+        &-images {
+          display: flex;
+          flex-wrap: wrap;
+          align-content: flex-start;
+
+          &>image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20rpx;
+            margin-right: 20rpx;
+            width: 145rpx;
+            height: 145rpx;
+            border-radius: 14rpx;
+          }
+
+          &>image:nth-child(4n) {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/JfbBasePosterGroup/JfbBasePosterGroupLess.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-poster-group {
+  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-poster-group {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBasePosterGroup/JfbBasePosterGroupMixin.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-poster-group'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBasePosterGroup/Mock.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  
+  getPosterByIdFilmSquate:{},
+  
+  updatePosterFilmPaiqiDate:{},
+  
+  removePosterFilmAddress:{},
+  
+  addPosterFilmcart:{},
+  
+}

package/src/components/JfbBaseSavingDetail/Api.js

@@ -0,0 +1,41 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Saving
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getMonthSavingDetail',
+    title: '省钱明细-月度',
+    path: '/member/v1/money-saving-record/month',
+    isRule: false,
+    params: {
+      year: ['年', 'Number', true],
+      month: ['月', 'Number', true],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'getTotalSavingDetail',
+    title: '省钱明细-累计',
+    path: '/member/v1/money-saving-record/total',
+    isRule: false,
+    params: {
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'getYearSavingDetail',
+    title: '省钱明细-年度',
+    path: '/member/v1/money-saving-record/year',
+    isRule: false,
+    params: {
+      year: ['年', 'Number', true],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseSavingDetail/Attr.js

@@ -0,0 +1,70 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        ele: 'title',
+        label: '切换标签设置',
+        size: 'small',
+        groupKey: 'style',
+      },
+      {
+        label: '背景颜色:',
+        ele: 'xd-color',
+        valueKey: 'titleBgc',
+        groupKey: 'style',
+        value: data['titleBgc'] || '',
+        placeholder: '请选择背景颜色',
+        classNmae: 'input80',
+      },
+      {
+        label: '外填充:',
+        ele: 'xd-margin-padding',
+        valueKey: 'tabPadding',
+        groupKey: 'style',
+        value: data['tabPadding'] || null,
+        setting: {
+          type: 'padding',
+        },
+        placeholder: '请设置外填充',
+        inline: false,
+        notice: '设置填充值，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">上下20，左右0</span>像素',
+      },
+      {
+        label: '切换标签与内容之间间距:',
+        ele: 'el-input',
+        type: 'text',
+        groupKey: 'style',
+        valueKey: 'titlePadding',
+        value: data['titlePadding'] || '',
+        className: 'input60',
+        inline: false,
+        notice:'设置切换标签与内容之间间距，默认值:<span style="color:red">0</span>像素'
+      },
+      {
+        label: '未选中文字颜色:',
+        ele: 'xd-color',
+        valueKey: 'titleColor',
+        value: data['titleColor'] || '',
+        groupKey: 'style',
+        placeholder: '请选择未选中文字颜色',
+        classNmae: 'input80',
+      },
+      {
+        label: '选中文字颜色:',
+        ele: 'xd-color',
+        valueKey: 'titleActColor',
+        value: data['titleActColor'] || '',
+        groupKey: 'style',
+        placeholder: '请选择选中文字颜色',
+        classNmae: 'input80',
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};