jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseRecharge/Api.js

@@ -0,0 +1,74 @@
+'use strict';
+
+/**
+ * @description API模型
+ * 建议：Ffff=>模块  Xxxx=>自定义名字
+ * 获取单记录(getByIdFfffXxxx)
+ * 获取列表记录(getByListFfffXxxx)
+ * 添加列表记录(addFfffXxxxx)
+ * 删除列表记录(removeFfffXxxxx|deleteFfffXxxx)
+ * 更新列表记录(updateFfffXxxxx)
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: "cardRecharge",
+    title: "卡券充值下单",
+    path: "/card/v1/card-recharge/create-order",
+    isRule: false,
+    data: {
+      card_number: ['卡券号', "String", "必填"],
+      card_point: ['充值点数 单位是分', "String", '必选']
+    },
+    isConsole: true,
+    disabled: true
+  },
+  {
+    mapFnName: "getRechargeAmount",
+    title: "获得充值点数需要支付的钱",
+    path: "/card/v1/card-recharge/get-amount",
+    isRule: false,
+    params: {
+      card_number: ['卡券号', "String", "必填"],
+      card_point: ['充值点数 单位是分', "String", '必选']
+    },
+    isConsole: true,
+    disabled: true
+  },
+  {
+    mapFnName: 'getListRechargeNewsContent', //自定义方法名字（必选）
+    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: "cardRechargeNew",
+    title: "获取卡券套餐列表",
+    path: "/card/v1/new-card-recharge/create-order",
+    isRule: false,
+    data: {
+      package_id: ['套餐ID', "String", "必填"]
+    },
+    isConsole: true,
+    disabled: true
+  },
+  {
+    mapFnName: "cardRechargeList",
+    title: "卡券充值下单",
+    path: "/card/v1/new-card-recharge/list",
+    isRule: false,
+    params: {},
+    isConsole: true,
+    disabled: true
+  },
+
+];

package/src/components/JfbBaseRecharge/Attr.js

@@ -0,0 +1,271 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        label: '票券框自定义文案:',
+        ele: 'el-input',
+        type: 'text',
+        valueKey: 'card_num_placeholder',
+        groupKey:'content',
+        value: data.card_num_placeholder||'',
+        placeholder: '请输入票券框自定义文案',
+        className: 'input80'
+      },
+      {
+        label: '票券充值点数自定义文案:',
+        ele: 'el-input',
+        type: 'text',
+        valueKey: 'point_placeholder',
+        groupKey:'content',
+        value: data.point_placeholder || '',
+        placeholder: '请输入票券充值点数自定义文案',
+        className: 'input80'
+      },
+      {
+        label: '注意事项:',
+        ele: 'xd-site-news',
+        valueKey: 'notice',
+        groupKey:'content',
+        value: data.notice || 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')({});
+
+          //获取返回参数(场景类型名称为必填)
+          let loading = { close(){}}
+
+          //获取显示内容
+          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') {
+            loading = XdBus.getParentApi('loading')({});
+            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') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('getListNewsPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //位置创建
+          if (action === 'addPostion') {
+            loading = XdBus.getParentApi('loading')({});
+            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') {
+            loading = XdBus.getParentApi('loading')({});
+            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') {
+            loading = XdBus.getParentApi('loading')({});
+            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') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('getListNewsContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //广告内容创建
+          if (action === 'addContent') {
+            loading = XdBus.getParentApi('loading')({});
+            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') {
+            loading = XdBus.getParentApi('loading')({});
+            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') {
+            loading = XdBus.getParentApi('loading')({});
+            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') {
+            loading = XdBus.getParentApi('loading')({});
+            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') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('getXdBusUpdateView')('onUpdateView', {});
+            loading.close()
+          }
+        },
+      },
+      {
+        label: '票券支付路径:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'payPath',
+        groupKey:'advanced',
+        placeholder: '请选择票券支付路径',
+        value: data['payPath'] || {},
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
+    ].filter(i=>i)
+  },
+  advanced: [ ],
+};

package/src/components/JfbBaseRecharge/JfbBaseRecharge.vue

@@ -0,0 +1,369 @@
+<template>
+  <view
+    class="jfb-base-recharge"
+    @click="handleEditxSelect"
+    :class="{ editx: isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-recharge__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-recharge__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-recharge__body">
+      <view class="recharge">
+        <view class="recharge-list">
+          <view class="recharge-item">
+            <view class="jfb-base-recharge__body-card">
+              <view>
+                <view class="jfb-base-recharge__body-form">
+                  <input v-model="cardNumber" :placeholder="card_num_placeholder" />
+                </view>
+                <view class="jfb-base-recharge__body-form">
+                  <input v-model="card_point" :placeholder="point_placeholder" />
+                </view>
+                <view
+                  v-if="amount && card_point"
+                  :style="{
+                    color: mainColor,
+                    fontSize: '24rpx',
+                    paddingBottom: '32rpx',
+                  }"
+                >支付金额：{{ amount }} 元</view>
+                <xd-button
+                  size="medium"
+                  type="primary"
+                  :bgColor="mainColor"
+                  @click="handleToRecharge"
+                  :disabled="!amount || !card_point || !cardNumber"
+                >提交</xd-button>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="xd-notice-content" v-if="content">
+          <view>注意事项:</view>
+          <view v-html="content" class="prod_info"></view>
+        </view>
+        <view
+          v-if="isPreview && statusContent === true && content === '' "
+          class="xd-notice"
+          :style="{ color: dangerColor,fontSize: 24 + 'rpx',backgroundColor:noticeBgc }"
+        >注意事项未配置数据，因此改模块在正式环境将不显示</view>
+        <view class="bottom_btn-mask"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import XdUnit from "@/components/XdUnit/XdUnit.vue";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseRechargeMixin from "./JfbBaseRechargeMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import Color from "color";
+import getServiceUrl from "@/common/getServiceUrl";
+export default {
+  name: "JfbBaseRecharge",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdUnit
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseRechargeMixin],
+  data() {
+    return {
+      closeMask: true,
+      card_num_placeholder: "",
+      point_placeholder: "",
+      cardNumber: "",
+      card_point: "",
+      payPath: "",
+      amount: "",
+      timer:null,
+
+      //提示文案
+      isPreview: false,
+      content: "",
+      statusContent: false,
+      noticeBgc:'',
+    };
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+    card_point(value) {
+      if(this.timer) clearTimeout(this.timer);
+      this.timer = setTimeout(()=>{
+        if (value && value != 0) {
+          this.handleGetPrice();
+        }
+      }, 1000)
+    },
+  },
+  created() {
+    this.isPreview = this.$configProject.isPreview;
+    this.noticeBgc = Color(this.dangerColor).alpha(0.1).toString();
+    this.init(this.container);
+  },
+  methods: {
+    onJfbLoad(options) {
+      this.getContent();
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.card_num_placeholder = getContainerPropsValue(this.container, "content.card_num_placeholder", "输入券号");
+      this.point_placeholder = getContainerPropsValue(this.container, "content.point_placeholder", "充值点数");
+      this.payPath = getContainerPropsValue(container, "content.payPath", {value: "",}).value;
+    },
+
+
+    getContent() {
+      jfbRootExec("getListRechargeNewsContent", {
+        vm: this,
+        data: {
+          page_id: this.pageAttr["page_id"], //页面ID
+          container_id: this.containerId, //组件ID
+        },
+      })
+        .then((res) => {
+          if(res && res.list && res.list.length > 0) {
+            this.content = res.list[0].content;
+          }
+          this.statusContent = true;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+
+    toLink(pay_order_id, order_id){
+      this.$xdUniHelper.navigateTo({
+        url: `${this.payPath}?order_id=${pay_order_id}&main_order_id=${order_id}&type=recharge`,
+      });
+    },
+
+    handleToRecharge() {
+      if (!this.cardNumber) {
+        this.$xdAlert({ content: "请输入卡券号" });
+        return;
+      }
+      if (!this.card_point) {
+        this.$xdAlert({ content: "请输入充值点数" });
+        return;
+      }
+
+      if( this.$configProject.isPreview) {
+        return;
+      }
+
+      this.$xdShowLoading({});
+      jfbRootExec("cardRecharge", {
+        vm: this,
+        data: {
+          card_number: this.cardNumber, //页面ID
+          card_point: this.card_point * 100, //组件ID
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          this.toLink(res.pay_order_id, res.order_id)
+        })
+        .catch((err) => {
+          this.$xdHideLoading();
+          console.log(err, "err");
+        });
+    },
+
+    handleGetPrice(e) {
+      //未填写值
+      if (!this.cardNumber || !this.card_point) {
+        return;
+      }
+
+      //预览模式
+      if( this.$configProject.isPreview) {
+        this.amount = this.card_point;
+        return;
+      }
+
+      jfbRootExec("getRechargeAmount", {
+        vm: this,
+        data: {
+          card_number: this.cardNumber, //页面ID
+          card_point: this.$xdUniHelper.multiplyFloatNumber(Number(this.card_point),100), //组件ID
+        },
+      })
+        .then((res) => {
+          this.amount = this.$xdUniHelper.divisionFloatNumber(res.amount ,100);
+        })
+        .catch((err) => {
+        });
+    },
+
+    onJfbUpdate(data) {
+      if( this.$configProject.isPreview) {
+        this.getContent();
+      }
+
+    },
+
+    onJfbShow(options) {
+      this.onJfbLoad(options);
+    },
+    onJfbCustomEvent(options) {
+      console.log("event.onJfbReachBottom", options);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseRechargeLess.less";
+
+.jfb-base-recharge {
+  &__body {
+    &-card {
+      box-shadow: 0 unit(16, rpx) unit(60, rpx) 0 rgba(227, 227, 227, 0.37);
+      border-radius: unit(20, rpx);
+      background: #fff;
+      padding: 30rpx;
+    }
+    &-form {
+      input {
+        background: #eeeeee;
+        border-radius: unit(16, rpx);
+        padding: unit(30, rpx);
+        margin-bottom: unit(30, rpx);
+      }
+    }
+
+    .xd-notice-content {
+      padding: 0 40rpx 40rpx 40rpx;
+      & > view:first-child {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #333;
+        margin-bottom: 20rpx;
+      }
+      & > view:last-child {
+        line-height: 44rpx;
+        font-size: 26rpx;
+        color: #666;
+        /deep/ img, /deep/ image{
+          max-width: 100% !important;
+          height: auto !important;
+          margin: 22rpx 0;
+        }
+
+        /deep/ *{
+          max-width: 100% !important;
+        }
+      }
+    }
+    .xd-notice {
+      margin-top: unit(40, rpx);
+      padding: unit(40, rpx);
+      border-radius: unit(15, rpx)
+    }
+  }
+}
+
+.recharge {
+  padding: 30rpx;
+
+  &-tab {
+    height: 100rpx;
+    margin-bottom: 15rpx;
+    display:flex;
+    justify-content: flex-start;
+    align-items: center;
+    & > view {
+      margin: 0 50rpx 0 0;
+      font-size: 32rpx;
+      position: relative;
+      height: 100%;
+      line-height: 100rpx;
+      cursor: pointer;
+    }
+
+    &-index {
+      height: 6rpx;
+      overflow: hidden;
+      border-radius: 4rpx;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 16rpx;
+    }
+  }
+
+  .recharge-pack {
+    height: 330rpx;
+    background-position: top left;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #fff;
+    padding: 30rpx;
+    box-sizing: border-box;
+    border-radius: 16rpx;
+    margin-bottom: 30rpx;
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    & .name {
+      font-size: 32rpx;
+      font-weight: 500;
+    }
+
+    & .price {
+      font-size: 28rpx;
+      font-weight: 400;
+      padding: 20rpx 0 10rpx;
+    }
+
+    & .time {
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+
+    & .line {
+      margin: 20rpx 0;
+      height: 2rpx;
+      background: rgba(255,255,255,.2);
+    }
+
+    & .buy {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & > view:nth-child(2) {
+        height: 60rpx;
+        min-width: 120rpx;
+        text-align: center;
+        border-radius: 40rpx;
+        line-height: 60rpx;
+        border: 4rpx solid #fff;
+        padding: 0 25rpx;
+        font-size: 28rpx;
+
+      }
+    }
+
+  }
+}
+</style>