jufubao-base 1.0.66 → 1.0.67-beta200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.66",
+  "version": "1.0.67-beta200",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseConDialog/Api.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * @description 卡券登陆
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getCouponDialogList', //自定义方法名字（必选）
+    title: '获取活动弹框列表',
+    path: '/sms/v1/activity/list',
+    isRule: false,
+    params: {
+      namespace: ['业务线', 'String', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseConDialog/Attr.js

@@ -0,0 +1,47 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content:(data) => {
+    return [
+      {
+        label: '选取优惠券列表路径:', //label
+        ele: 'xd-select-pages-path', //package 名称
+        valueKey: 'list_url', //form[valueKey]
+        placeholder: '请选择优惠券列表路径',
+        value: data['list_url'] ||null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
+      {
+        label: '活动提示方式:',
+        ele: 'xd-radio',
+        valueKey: 'type',
+        value: data['type']||1,
+        placeholder: '请选择活动提示方式',
+        multiple: false,
+        className: 'input80',
+        list: [
+          { label: '弹框', value: 1 },
+          { label: '切换', value: 2 },
+        ]
+      },
+      {
+        label: '弹窗间隔:',
+        ele: 'el-input',
+        type: 'text',
+        valueKey: 'time',
+        value: data.time || '',
+        placeholder: '请输入弹窗间隔，默认值：3小时',
+        className: 'input80',
+        unit: '小时'
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseConDialog/JfbBaseConDialog.vue

@@ -0,0 +1,290 @@
+<template>
+  <view
+    class="jfb-base-con-dialog"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-con-dialog__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-con-dialog__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-con-dialog__body">
+      <view class="jfb-base-con-dialog__body-dialog" v-if="isShow">
+        <view class="jfb-base-con-dialog__body-dialog-mask"></view>
+        <view class="jfb-base-con-dialog__body-dialog-content">
+          <view class="jfb-base-con-dialog__body-dialog-content-num">
+            <text>{{ currentIndex + 1 }}/{{ list.length }}</text>
+          </view>
+          <xd-font-icon
+            @click="handleClose"
+            class="jfb-base-con-dialog__body-dialog-content-close"
+            icon="iconguanbi_xian"
+            color="#fff"
+            size="64"
+          ></xd-font-icon>
+          <view
+            @click="handleChange('left')"
+            v-if="this.type === 2 && this.currentIndex !== 0"
+            class="jfb-base-con-dialog__body-dialog-content-left"
+          >
+            <xd-font-icon icon="iconxiangzuo_xian"></xd-font-icon>
+          </view>
+          <view
+            v-if="this.type === 2 && this.currentIndex !== list.length - 1"
+            @click="handleChange('right')"
+            class="jfb-base-con-dialog__body-dialog-content-right"
+          >
+            <xd-font-icon icon="iconxiangyou_xian"></xd-font-icon>
+          </view>
+          <view class="jfb-base-con-dialog__body-dialog-content-image">
+            <image :src="currentImage"></image>
+            <image @click="handleToList" :src="currentBtnImage"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import { jfbRootExec, JfbEvent } from "@/utils/xd.event";
+import JfbBaseConDialogMixin from "./JfbBaseConDialogMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import getServiceUrl from "@/common/getServiceUrl";
+import XdDailog from "@/components/XdDailog/XdDailog";
+import XdContentXss from "@/components/XdContentXss/XdContentXss";
+import colorCardMixins from "@/mixins/colorCardMixins";
+const Color = require("color");
+import { mapState } from "vuex";
+import storage from "@/common/storage";
+
+export default {
+  name: "JfbBaseConDialog",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdDailog,
+    XdContentXss,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseConDialogMixin],
+  data() {
+    return {
+      list_url: "",
+      list: [],
+      currentImage: "",
+      currentBtnImage: "",
+      currentIndex: 0,
+      isShow: false,
+      type: "",
+      isPreview: false, //是否预览
+      activity_id: "",
+    };
+  },
+  computed: {
+    ...mapState(["xnamespace"]),
+  },
+  watch: {
+    container(value) {
+      console.log(value, "aakakakkaka");
+      this.init(value);
+    },
+  },
+  created() {
+    this.isPreview = this.$configProject.isPreview;
+    if (this.isPreview) {
+      this.isShow = true;
+      return;
+    }
+    this.init(this.container);
+  },
+  methods: {
+    init(value) {
+      this.list_url = getContainerPropsValue(value, "content.list_url", {
+        value: "",
+      }).value;
+      this.type = getContainerPropsValue(value, "content.type", 1);
+      this.time = Number(getContainerPropsValue(value, "content.time", 3));
+    },
+    getDialogList() {
+      jfbRootExec("getCouponDialogList", {
+        vm: this,
+        data: {
+          namespace: this.xnamespace,
+        },
+      })
+        .then((res) => {
+          console.log(res, "resresres");
+          this.list = res.list;
+          this.currentImage = getServiceUrl(
+            this.list[this.currentIndex].app_activity_url
+          );
+          this.currentBtnImage = getServiceUrl(
+            this.list[this.currentIndex].app_activity_button
+          );
+          this.activity_id = this.list[this.currentIndex].activity_id;
+          this.handlePop();
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+    handlePop() {
+      console.log("this.time", this.time * 60 + "分钟");
+      storage.set(this.containerId, 1, this.time);
+      this.isShow = true;
+    },
+    onJfbLoad(options) {
+      console.log(11111);
+      try {
+        this.setNameSpace(options);
+        if (!storage.get(this.containerId)) this.getDialogList();
+      } catch (error) {
+        console.log(error, "errorerror");
+      }
+    },
+    onJfbUpdate(data) {
+      storage.remove(this.containerId);
+      this.getDialogList();
+    },
+    handleToList() {
+      this.$xdUniHelper.navigateTo({
+        url: `${this.list_url}?activity_id=${this.activity_id}`,
+      });
+    },
+    handleClose() {
+      //切换下一张，没有下一张，关闭
+      if (this.currentIndex == this.list.length - 1 || this.type == 2) {
+        this.isShow = false;
+        return;
+      }
+      this.currentIndex = this.currentIndex + 1;
+      this.currentImage = getServiceUrl(
+        this.list[this.currentIndex].app_activity_url
+      );
+      this.currentBtnImage = getServiceUrl(
+        this.list[this.currentIndex].app_activity_button
+      );
+      this.activity_id = this.list[this.currentIndex].activity_id;
+    },
+    handleChange(type) {
+      this.currentIndex =
+        type === "left" ? this.currentIndex - 1 : this.currentIndex + 1;
+      //不小于0，不大于数组长度
+      this.currentIndex = Math.max(
+        0,
+        Math.min(this.currentIndex, this.list.length - 1)
+      );
+      this.currentImage = getServiceUrl(
+        this.list[this.currentIndex].app_activity_url
+      );
+      this.currentBtnImage = getServiceUrl(
+        this.list[this.currentIndex].app_activity_button
+      );
+      this.activity_id = this.list[this.currentIndex].activity_id;
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseConDialogLess.less";
+
+.jfb-base-con-dialog {
+  &__body {
+    &-dialog {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 2000;
+
+      &-mask {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      &-content {
+        &-num {
+          position: absolute;
+          top: 16%;
+          right: 50%;
+          z-index: 3000;
+          transform: translateX(50%);
+          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);
+        }
+        &-close {
+          position: absolute;
+          bottom: 12%;
+          right: 50%;
+          z-index: 3000;
+          transform: translateX(50%);
+        }
+        &-left {
+          position: absolute;
+          top: 50%;
+          left: 1%;
+          z-index: 3000;
+          background: rgba(255, 255, 255, 0.1);
+          padding: unit(40, rpx) unit(10, rpx);
+          color: #fff;
+          border-radius: unit(40, rpx);
+        }
+        &-right {
+          position: absolute;
+          top: 50%;
+          right: 1%;
+          z-index: 3000;
+          background: rgba(255, 255, 255, 0.1);
+          padding: unit(40, rpx) unit(10, rpx);
+          color: #fff;
+          border-radius: unit(40, rpx);
+        }
+        &-image {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: unit(600, rpx);
+          height: unit(800, rpx);
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+
+          & > image:first-child {
+            width: 100%;
+            height: 100%;
+          }
+
+          & > image:nth-child(2) {
+            width: unit(448, rpx);
+            height: unit(70, rpx);
+            position: absolute;
+            bottom: unit(110, rpx);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/JfbBaseConDialog/JfbBaseConDialogLess.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-con-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-con-dialog {
+  &:before {
+    content: " ";
+    display: table;
+  }
+}
+/**endNotPreview**/

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

package/src/components/JfbBaseConDialog/Mock.js

@@ -0,0 +1,30 @@
+'use strict';
+
+module.exports = {
+  getCouponDialogList: {
+    "list": [
+      {
+        "app_key": "sms-coupon",
+        "app_activity_url": "//sandbox-img.jufubao.cn/uploads/20231123/b68d9ff61ffe6cada499d8ad809aaa8d.jpg",
+        "app_activity_button": "//sandbox-img.jufubao.cn/uploads/20231123/d9730115b5e1e8047b2b36e69655e745.jpg",
+        "background": "background1.png",
+        "activity_id": 35,
+      },
+      {
+        "app_key": "sms-coupon",
+        "app_activity_url": "//sandbox-img.jufubao.cn/uploads/20231123/b68d9ff61ffe6cada499d8ad809aaa8d.jpg",
+        "app_activity_button": "//sandbox-img.jufubao.cn/uploads/20231123/d9730115b5e1e8047b2b36e69655e745.jpg",
+        "background": "background1.png",
+        "activity_id": 35,
+      },
+      {
+        "app_key": "sms-coupon",
+        "app_activity_url": "//sandbox-img.jufubao.cn/uploads/20231123/b68d9ff61ffe6cada499d8ad809aaa8d.jpg",
+        "app_activity_button": "//sandbox-img.jufubao.cn/uploads/20231123/d9730115b5e1e8047b2b36e69655e745.jpg",
+        "background": "background1.png",
+        "activity_id": 35,
+      }
+    ],
+    "request_id": "4b9803ed0ecdc0f6"
+  }
+}

package/src/components/JfbBaseConList/Api.js

@@ -0,0 +1,47 @@
+'use strict';
+
+/**
+ * @description 卡券登陆
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getListBaseNewsContentCoupon', //自定义方法名字（必选）
+    title: '获取内容',
+    path: '/cms/v1/news-content',
+    isRule: false,
+    params: {
+      scene: ['使用场景', 'String', '选填'],
+      container_id: ['插件ID', 'String', '必填'],
+      page_id: ['页面ID', 'String', '必填'],
+      page_size: ['记录条数', 'Number', '必填', 1],
+      code: ['业务线id', 'String', '选填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'getCouponList', //自定义方法名字（必选）
+    title: '获取优惠券列表',
+    path: '/sms-coupon/v1/activity-prizes-user/list',
+    isRule: false,
+    params: {
+      distribution_method: ['发放方式 entry=主动发放, homed=首页发放,paid=消费后发放,card_binded=绑定卡后发放', 'String', '选填'],
+      namespace: ['业务线', 'String', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'getAllCoupon', //自定义方法名字（必选）
+    title: '领取优惠券',
+    path: '/sms-coupon/v1/activity-prizes-user/set',
+    isRule: false,
+    params: {
+      distribution_method: ['发放方式 entry=主动发放, homed=首页发放,paid=消费后发放,card_binded=绑定卡后发放', 'String', '选填'],
+      namespace: ['业务线', 'String', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseConList/Attr.js

@@ -0,0 +1,224 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: [
+    {
+      label: '领券规则:',
+      ele: 'xd-site-news',
+      valueKey: 'notice',
+      value: null,
+      className: 'input70',
+      setting: {
+        config: {
+          sort: true,
+          maxlen: 100,
+          action: 'aliyun',
+          size: 5,
+          tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+          uploadType: 'aliyun',
+          type: ['jpg', 'png', 'jpeg']
+        },
+      },
+      handleCustom({action, data}) {
+        if (data && data.params) {
+          //当一个插件中出现使用内容分类时候需要设置code值，在页面引用时候容器id + code进行拼接
+          //data.params = Object.assign({}, data.params, {code: 'g_test_id'});
+        }
+
+        //获取返回参数(场景类型名称为必填)
+        let loading = XdBus.getParentApi('loading')({});
+
+        //获取显示内容
+        if (action === 'screen') {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_bucket_content_tip'})
+            .then(res => {
+              loading.close();
+              data.cb(res['list'])
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+            });
+
+        }
+
+        //获取返回参数(广告位高度必选项)
+        if (action === 'getNewsInfo') {
+          XdBus.getParentApi('cmsGetPublishEditxContent')(data.params)
+            .then(res => {
+              loading.close()
+              data.cb({list: res.list, selectId: res.selected})
+            })
+            .catch(error => {
+              loading.close()
+              console.error(error);
+            });
+        }
+
+        //获取产品业务线列表
+        if (action === 'namespace') {
+          XdBus.getParentApi('getOptionsNamespaces')({})
+            .then(res => {
+              loading.close()
+              data.cb(res['list'])
+            })
+            .catch(error => {
+              loading.close()
+              console.error(error);
+            });
+        }
+
+        //使用内容分类
+        if (action === 'cmsPublishEditxContent') {
+          XdBus.getParentApi('cmsPublishEditxContent')(data.params)
+            .then(res => {
+              console.log('cmsPublishEditxContent', res)
+              loading.close();
+              data.cb(res)
+            })
+            .catch(error => {
+              loading.close();
+              console.error(error);
+            });
+        }
+
+        //位置列表
+        if (action === 'getListPostion') {
+          XdBus.getParentApi('getListNewsPosition')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(res)
+            })
+            .catch(error => {
+              loading.close();
+              console.error(error);
+            });
+        }
+
+        //位置创建
+        if (action === 'addPostion') {
+          XdBus.getParentApi('addNewsPosition')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //位置编辑
+        if (action === 'editPostion') {
+          XdBus.getParentApi('updateNewsPosition')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //位置删除
+        if (action === 'deleltePostion') {
+          XdBus.getParentApi('deleteNewsPosition')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //获取广告位内容列表
+        if (action === 'getListContent') {
+          XdBus.getParentApi('getListNewsContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(res)
+            })
+            .catch(error => {
+              loading.close();
+              console.error(error);
+            });
+        }
+
+        //广告内容创建
+        if (action === 'addContent') {
+          XdBus.getParentApi('addNewsContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //广告内容编辑
+        if (action === 'editContent') {
+          XdBus.getParentApi('updateNewsContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //广告内容删除
+        if (action === 'deleteContent') {
+          XdBus.getParentApi('deleteNewsContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //内容发布
+        if (action === 'publish') {
+          console.log('publish', data.params)
+          XdBus.getParentApi('cmsPublishContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(res)
+            })
+            .catch(error => {
+              loading.close();
+              console.error(error);
+            });
+        }
+
+        //通知页面进行刷新
+        if (action === 'update') {
+          XdBus.getParentApi('getXdBusUpdateView')('onUpdateView', {});
+          loading.close()
+        }
+      },
+      inline: false,
+      notice: '请配置温馨提示内容，未配置的情况将不显示此模块',
+    },
+  ],
+  advanced: [],
+};

package/src/components/JfbBaseConList/JfbBaseConList.vue

@@ -0,0 +1,319 @@
+<template>
+  <view
+    class="jfb-base-con-list"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-con-list__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-con-list__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-con-list__body">
+      <view class="jfb-base-con-list__body-header">
+        <image
+          :src="background"
+        ></image>
+      </view>
+      <view class="jfb-base-con-list__body-content">
+        <view class="jfb-base-con-list__body-content-header">
+          <view class="jfb-base-con-list__body-content-header-left">
+            <view :style="{ backgroundColor: mainColor }"></view>
+            <view>赠送优惠券</view>
+          </view>
+          <view
+            :style="{ color: mainColor, background: contentBackground }"
+            class="jfb-base-con-list__body-content-header-right"
+            @click="showRule = true"
+          >
+            <text>领券规则</text>
+            <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
+          </view>
+        </view>
+        <view class="jfb-base-con-list__body-content-list">
+          <view
+            v-for="(item, index) in couponList"
+            :key="index"
+            class="jfb-base-con-list__body-content-list-item"
+            :style="{ background: contentBackground }"
+          >
+            <view class="jfb-base-con-list__body-content-list-item-left">
+              <view
+                style="
+                  background: url('https://i.niupic.com/images/2023/11/22/d1bV.webp');
+                  background-size: 100% 100%;
+                  background-repeat: no-repeat;
+                "
+                class="jfb-base-con-list__body-content-list-item-left-info"
+              >
+                <view :style="{ color: mainColor }">满减券</view>
+                <view>{{item.prize_name}}</view>
+              </view>
+              <view class="jfb-base-con-list__body-content-list-item-left-num">
+                <view>{{item.prize_name}}</view>
+                <view :style="{ color: mainColor }">X{{item.prize_num}}</view>
+              </view>
+            </view>
+            <view class="jfb-base-con-list__body-content-list-item-right">
+              <xd-font-icon
+                :style="{ color: disabled ? '#D6D6D6' : mainColor }"
+                icon="iconerweima"
+              ></xd-font-icon>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view style="height: 120rpx"></view>
+      <view class="bottom_btn" :style="prod_bottom">
+        <xd-button
+          @click="getCoupont"
+          :style="{ backgroundColor: btnBackground }"
+          width="60%"
+          :type="disabled ? 'info' : 'primary'"
+          >一键领取</xd-button
+        >
+      </view>
+      <xd-dailog
+        :cancel="false"
+        :confirm="false"
+        title="活动规则说明"
+        :show.sync="showRule"
+      >
+        <xd-content-xss :html="notice"></xd-content-xss>
+      </xd-dailog>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseConListMixin from "./JfbBaseConListMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdDailog from "@/components/XdDailog/XdDailog";
+import XdContentXss from "@/components/XdContentXss/XdContentXss";
+import getServiceUrl from '@/common/getServiceUrl'
+import colorCardMixins from "@/mixins/colorCardMixins";
+import { mapState } from "vuex";
+const Color = require("color");
+
+export default {
+  name: "JfbBaseConList",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdDailog,
+    XdContentXss,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseConListMixin],
+  data() {
+    return {
+      contentBackground: "",
+      couponList: [],
+      disabled: false,
+      notice: "",
+      showRule: false,
+      btn: "",
+      activity_id: '',
+      background: ''
+    };
+  },
+  computed: {
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
+    },
+    btnBackground() {
+      if (this.disabled) return;
+      return this.btn ? this.btn : this.mainColor;
+    },
+    ...mapState(["xnamespace"]),
+  },
+  watch: {
+    container(value) {
+      this.init(value);
+    },
+  },
+  created() {
+    this.init(this.container);
+  },
+  methods: {
+    init(value) {
+      this.contentBackground = Color(this.mainColor).alpha(0.2).toString();
+    },
+    getList() {
+      jfbRootExec("getCouponList", {
+        vm: this,
+        data: {
+          distribution_method: "entry",
+          namespace: this.xnamespace,
+          activity_id: this.activity_id
+        },
+      }).then(res=>{
+        this.background = getServiceUrl(res.background)
+        this.couponList = res.list
+      }).catch(err=>{
+        console.log(err,'err');
+      })
+    },
+    getCoupont() {
+      jfbRootExec("getAllCoupon", {
+        vm: this,
+        data: {
+          distribution_method: "entry",
+          namespace: this.xnamespace,
+          activity_id: this.activity_id
+        },
+      }).then(res=>{
+        this.$xdAlert({
+          content: "领取成功",
+          zIndex: 3200,
+          time: 2000,
+          isClose: false,
+        });
+        this.disabled=true
+      }).catch(err=>{
+        console.log(err,'err');
+      })
+    },
+    getContent() {
+      jfbRootExec("getListBaseNewsContentCoupon", {
+        vm: this,
+        data: {
+          page_id: this.pageAttr["page_id"], //页面ID
+          container_id: this.containerId, //组件ID
+          limit: 1,
+        },
+      })
+        .then((res) => {
+          console.log(res, "ajajajajaj");
+          if (res.list.length > 0) {
+            this.notice = res.list[0].content;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+    onJfbLoad(options) {
+      this.activity_id = options.activity_id
+      this.setNameSpace(options);
+      this.getContent();
+      this.getList();
+    },
+
+    onJfbCustomEvent(data) {
+      console.log("onJfbCustomEvent", data);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseConListLess.less";
+
+.jfb-base-con-list {
+  &__body {
+    position: relative;
+    &-header {
+      width: 100%;
+      height: unit(600, rpx);
+      & > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    &-content {
+      border-radius: unit(20, rpx);
+      background: #fff;
+      padding: unit(40, rpx);
+      position: relative;
+      top: unit(-340, rpx);
+      margin: 0 unit(20, rpx);
+
+      &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &-left {
+          display: flex;
+          align-items: center;
+          font-size: unit(32, rpx);
+          & > view:first-child {
+            width: unit(8, rpx);
+            height: unit(36, rpx);
+            border-radius: unit(4, rpx);
+            margin-right: unit(20, rpx);
+          }
+        }
+
+        &-right {
+          display: flex;
+          font-size: unit(24, rpx);
+          padding: unit(8, rpx) unit(16, rpx);
+          border-radius: unit(24, rpx);
+        }
+      }
+
+      &-list {
+        margin-top: unit(20, rpx);
+        &-item {
+          margin-top: unit(20, rpx);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: unit(20, rpx) unit(30, rpx);
+          border-radius: unit(12, rpx);
+          &-left {
+            display: flex;
+
+            &-info {
+              padding: unit(20, rpx) unit(36, rpx);
+              & > view:first-child {
+                font-size: unit(44, rpx);
+                font-weight: 500;
+                margin-bottom: unit(36, rpx);
+              }
+              & > view:nth-child(2) {
+                font-size: unit(28, rpx);
+                color: #fff;
+              }
+            }
+
+            &-num {
+              margin-left: unit(24, rpx);
+              margin-top: unit(10, rpx);
+              & > view:first-child {
+                font-size: unit(40, rpx);
+                margin-bottom: unit(16, rpx);
+              }
+              & > view:nth-child(2) {
+                font-size: unit(28, rpx);
+              }
+            }
+          }
+        }
+      }
+    }
+    .bottom_btn {
+      position: fixed;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: unit(120, rpx);
+      background: #ffffff;
+    }
+  }
+}
+</style>

package/src/components/JfbBaseConList/JfbBaseConListLess.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-con-list {
+  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-con-list {
+  &:before {
+    content: " ";
+    display: table;
+  }
+}
+/**endNotPreview**/

package/src/components/JfbBaseConList/JfbBaseConListMixin.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-con-list'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseConList/Mock.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = {
+  getCouponList: {
+    "list": [
+      {
+        "prize_id": 25,
+        "prize_name": "满100减1",
+        "prize_num": 23
+      }
+    ],
+    "background": "//sandbox-img.jufubao.cn/uploads/20231123/4767f11be07185af4d31c657812dd96f.jpg",
+    "app_coupon_url": "//sandbox-img.jufubao.cn/uploads/20231123/9709c60e75753585d7bab94699ce1d96.jpg",
+    "request_id": "60417690eab2c156"
+  },
+  getAllCoupon: {
+    "request_id": "5987aa28c709d4ef"
+  }
+}