jufubao-base 1.0.118 → 1.0.119-beta3

package/src/components/JfbBaseSaasBlessDialog/JfbBaseSaasBlessDialog.vue

@@ -0,0 +1,309 @@
+<template>
+  <view
+    class="jfb-base-saas-bless-dialog"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-saas-bless-dialog__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-saas-bless-dialog__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-saas-bless-dialog__body">
+      <view class="dialog_wrap" v-if="isShow">
+        <view class="dialog_mask"></view>
+        <view class="dialog_content">
+          <view v-if="showIndicator" class="dialog_num">
+            <text>{{currentIndex + 1}}/{{ list.length }}</text>
+          </view>
+          <view class="dialog_main">
+            <view v-if="showIndicator" class="_left" @click="handleChange('left')">
+              <xd-font-icon icon="iconxiangzuo_xian"></xd-font-icon>
+            </view>
+            <view class="_cont" v-if="currCover && currCover.bless_cover_config">
+              <image class="dialog_image" :src="currCover.bless_cover_config.material_image.path"></image>
+              <view class="pop_tip">{{currCover.bless_type_name}}  {{ currCover.bless_card_number }}张</view>
+              <view class="bless_wrap">
+                <view class="bless_name">{{currCover.bless_cover_config.material_nickname}}</view>
+                <view class="bless_cont">{{currCover.bless_cover_config.material_content}}</view>
+                <!-- <view class="bless_comp">{{ currCover.bless_cover_config.material_end }}</view> -->
+              </view>
+              <xd-button class="btn_image" type="primary" @click="handleToDetail">去看看</xd-button>
+            </view>
+            <view v-if="showIndicator" class="_right" @click="handleChange('right')">
+              <xd-font-icon icon="iconxiangyou_xian"></xd-font-icon>
+            </view>
+          </view>
+          <xd-font-icon
+            @click="handleClose"
+            class="dialog_close"
+            icon="iconguanbi_xian"
+            color="#fff"
+            size="64"
+          ></xd-font-icon>
+
+        </view>
+      </view>
+      <view
+        v-if="isPreview"
+        :style="{ background: backgroundColor, color: warningColor }"
+        class="jfb-base-con-dialog__body-pop"
+      >弹框方便编辑(占位)，在线上此模块不显</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdButton from "@/components/XdButton/XdButton"
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseSaasBlessDialogMixin from "./JfbBaseSaasBlessDialogMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import getServiceUrl from '@/common/getServiceUrl'
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  export default {
+    name: "JfbBaseSaasBlessDialog",
+    components: {
+      XdFontIcon,
+      XdButton
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseSaasBlessDialogMixin
+    ],
+    data() {
+      return {
+        isPreview: false, //是否预览
+        isShow: false,
+        currentImage: "",
+        currentIndex: 0,
+        list: [],
+
+        blessDetailUrl: "", //祝福详情url
+        type: "",
+        isHide: false,
+      }
+    },
+    watch: {
+      container(value) {
+        this.init(value)
+      }
+    },
+    computed: {
+      currCover(){
+        if(this.currentIndex < 0) return this.list[0];
+        if(this.currentIndex > this.list.length - 1) return this.list[this.list.length - 1];
+        return this.list[this.currentIndex]
+      },
+      showIndicator(){
+        return this.list.length > 1
+      }
+    },
+    created() {
+      this.isPreview = this.$configProject.isPreview;
+      this.init(this.container);
+    },
+    methods: {
+      onJfbLoad(options) {
+        
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.type = getContainerPropsValue(container, "content.type", 1);
+        this.isHide = getContainerPropsValue(container, "content.isHide", false);
+        this.blessDetailUrl = getContainerPropsValue(container, 'content.blessDetailUrl', {value: "/main/saas/blessDetail"}).value;
+        if (this.isPreview) {
+          this.isShow = !this.isHide;
+        }
+      },
+      getList(){
+        jfbRootExec("getBlessList", {
+          vm: this,
+          data: {
+            page_size: 10,
+            page_token: '1'
+          }
+        }).then(res => {
+          this.handleBlessList(res);
+        })
+      },
+      handleBlessList(res){
+        if(res.list.length > 0) this.isShow = true;
+        this.list = res.list.map(item => {
+          try{
+            item['bless_cover_config'] = JSON.parse(item.bless_cover_config);
+          }catch(err){
+            item['bless_cover_config'] = {};
+          }
+          return item;
+        });
+      },
+      handleToDetail(){
+        const { bless_id } = this.currCover;
+        this.$xdUniHelper.navigateTo({
+          url: `${this.blessDetailUrl}?bless_id=${bless_id}`,
+        });
+      },
+      handleClose(){
+        if (this.currentIndex == this.list.length - 1 || this.type == 2) {
+          this.isShow = false;
+          return;
+        }
+        this.currentIndex = this.currentIndex + 1;
+        this.isShow = false;
+      },
+      handleChange(type){
+        this.currentIndex = type === "left" ? this.currentIndex - 1 : this.currentIndex + 1;
+        this.currentIndex = Math.max(0, Math.min(this.currentIndex, this.list.length - 1));
+      },
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        this.isShow=false
+        this.onJfbLoad(options);
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent({action, data}) {
+        if(action === '@showBaseBlessDialog'){
+          this.getList();
+        }
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseSaasBlessDialogLess.less";
+
+  .jfb-base-saas-bless-dialog {
+    &__body{
+      .dialog_wrap{
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 3000;
+
+        .dialog_mask{
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: rgba(0, 0, 0, 0.5);
+        }
+        .dialog_content{
+          max-height: unit(1000, rpx);
+          overflow-y: auto;
+          overflow-x: hidden;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          display: flex;
+          flex-direction: column;
+
+          .dialog_num{
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: unit(40, rpx);
+            padding: unit(8, rpx) unit(24, rpx);
+            color: #fff;
+            font-size: unit(40, rpx);
+          }
+          .dialog_close{
+            margin: 0 auto;
+          }
+          .dialog_main{
+            display: flex;
+            align-items: center;
+
+            ._left{
+              background: rgba(255, 255, 255, 0.1);
+              padding: unit(40, rpx) unit(10, rpx);
+              color: #fff;
+              border-radius: unit(40, rpx);
+            }
+            ._right{
+              background: rgba(255, 255, 255, 0.1);
+              padding: unit(40, rpx) unit(10, rpx);
+              color: #fff;
+              border-radius: unit(40, rpx);
+            }
+            ._cont{
+              min-width: unit(600, rpx);
+              min-height: unit(800, rpx);
+              height: unit(800, rpx);
+              display: flex;
+              align-items: center;
+              flex-direction: column;
+              margin: 20rpx;
+              position: relative;
+              background-color: #FFFFFF;
+              border-radius: 16rpx;
+
+              .dialog_image {
+                width: 100%;
+                height: 328rpx;
+              }
+              .pop_tip{
+                width: 100%;
+                padding: 20rpx 32rpx;
+                background-color: #FFF2CD;
+                box-sizing: border-box;
+                color: #FA2300;
+                font-size: 28rpx;
+                font-weight: 400;
+              }
+              .bless_wrap{
+                padding: 48rpx 32rpx;
+                width: 100%;
+                box-sizing: border-box;
+                .bless_name{
+                  font-size: 36rpx;
+                  color: #333333;
+                  font-weight: 500;
+                }
+                .bless_cont{
+                  font-size: 32rpx;
+                  color: #999999;
+                  font-weight: 400;
+                  margin-top: 32rpx;
+                }
+                .bless_comp{
+                  text-align: right;
+                }
+              }
+              .btn_image{
+                width: unit(448, rpx);
+                height: unit(70, rpx);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/JfbBaseSaasBlessDialog/JfbBaseSaasBlessDialogLess.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-base-saas-bless-dialog {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  min-height: unit(50, rpx);
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx {
+    position: relative;
+    border: 1px dashed blue;
+    box-sizing: border-box;
+    z-index: 3
+
+  }
+
+  &:hover {
+    border: 1px dashed blue;
+  }
+
+  &.noBorder {
+    border-color: rgba(0,0,0,0);
+    border-width: 0;
+  }
+
+
+  &__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-saas-bless-dialog {
+  &:before {
+    content: " ";
+    display: table;
+  }
+}
+/**endNotPreview**/

package/src/components/JfbBaseSaasBlessDialog/JfbBaseSaasBlessDialogMixin.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-saas-bless-dialog'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseSaasBlessDialog/Mock.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  aaaa: {}
+}

package/src/components/JfbBaseSaasBlessReceive/Api.js

@@ -0,0 +1,25 @@
+'use strict';
+
+/**
+ * @description API模型
+ * 建议：Ffff=>模块  Xxxx=>自定义名字
+ * 获取单记录(getByIdFfffXxxx)
+ * 获取列表记录(getByListFfffXxxx)
+ * 添加列表记录(addFfffXxxxx)
+ * 删除列表记录(removeFfffXxxxx|deleteFfffXxxx)
+ * 更新列表记录(updateFfffXxxxx)
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getBlessAll',
+    title: '祝福 - 列表:所有',
+    path: '/saas/v1/bless/items-all',
+    isRule: false,
+    data: {
+      last_key: ['当前页', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseSaasBlessReceive/Attr.js

@@ -0,0 +1,24 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        label: '祝福详情跳转地址:', //label
+        ele: 'xd-select-pages-path', //package 名称
+        valueKey: 'blessSignUrl', //form[valueKey]
+        placeholder: '请选择祝福详情跳转地址',
+        value: null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseSaasBlessReceive/JfbBaseSaasBlessReceive.vue

@@ -0,0 +1,201 @@
+<template>
+  <view
+    class="jfb-base-saas-bless-receive"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-saas-bless-receive__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-saas-bless-receive__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-saas-bless-receive__body">
+      <view class="receive_list">
+        <view class="receive_item" v-for="(item, i) in blessData" :key="i">
+          <view class="head">{{item.bless_type_name}}</view>
+          <view class="card">
+            <image :src="item.cover_url"/>
+          </view>
+          <view class="receive_cont">
+            <view class="card_name">{{ item.bless_name }}</view>
+            <view class="card_num">× {{ item.bless_card_number }}张</view>
+          </view>
+          <view class="receive_time">
+            <view class="_time">{{ item.release_time }}</view>
+            <view>
+              <xd-button v-if="item.receive_status === 'N'" size="small" type="primary" @click="toSignUrl(item)">立即签收</xd-button>
+              <xd-button v-else size="small" type="default" @click="toSignUrl(item)">再次查看</xd-button>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdButton from "@/components/XdButton/XdButton"
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseSaasBlessReceiveMixin from "./JfbBaseSaasBlessReceiveMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import getServiceUrl from '@/common/getServiceUrl'
+  export default {
+    name: "JfbBaseSaasBlessReceive",
+    components: {
+      XdFontIcon,
+      XdButton
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseSaasBlessReceiveMixin
+    ],
+    data() {
+      return {
+        blessData: [],
+
+        //面板
+        blessSignUrl: "", //签收跳转地址
+      }
+    },
+    watch: {
+      container(value) {
+        this.init(value)
+      }
+    },
+    created() {
+      this.init(this.container);
+
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+
+        this.p_getBlessAll();
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.blessSignUrl = getContainerPropsValue(container, 'content.blessSignUrl', {value: "/main/saas/blessDetail"}).value;
+      },
+      toSignUrl(item){
+        this.$xdUniHelper.navigateTo({
+          url: `${this.blessSignUrl}?bless_id=${item.bless_id}`,
+        });
+      },
+      p_getBlessAll(){
+        this.$xdShowLoading({});
+        jfbRootExec("getBlessAll", {
+          vm: this,
+          data: {
+
+          }
+        }).then(res => {
+          this.$xdHideLoading();
+          this.blessData = res.list.map(item => {
+            try{
+              let cover = JSON.parse(item.bless_cover_config)
+              item['cover_url'] = getServiceUrl(cover.material_image.url);
+            }catch(err){
+              item['cover_url'] = ""
+            }
+            item['release_time'] = this.$xdUniHelper.getDate(
+              item["release_time"] * 1000
+            ).fullTime;
+            return item;
+          });
+        })
+      },
+      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)
+        this.$xdUniHelper.navigateBack();
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseSaasBlessReceiveLess.less";
+
+  .jfb-base-saas-bless-receive {
+    &__body{
+      background: #F5F9FA;
+      .receive_list{
+        padding: 20rpx;
+        .receive_item{
+          background: #FFFFFF;
+          border-radius: 20rpx;
+          padding: 32rpx 35rpx;
+          .head{
+            padding-bottom: 24rpx;
+            font-size: 28rpx;
+            color: #333333;
+            font-weight: 500;
+            border-bottom: 1px solid #F2F2F2;
+          }
+          .card{
+            height: 300rpx;
+            border-radius: 16rpx;
+            margin-top: 24rpx;
+            overflow: hidden;
+            image{
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .receive_cont{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 32rpx 0;
+            .card_name{
+              font-size: 32rpx;
+              color: #333333;
+              font-weight: 400;
+            }
+            .card_num{
+              font-size: 32rpx;
+              color: #999999;
+              font-weight: 400;
+            }
+          }
+          .receive_time{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            ._time{
+              font-size: 24rpx;
+              color: #999999;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>