jufubao-base 1.0.305-beta1 → 1.0.305

package/package.json

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

package/src/components/JfbBaseInvoice/Api.js

@@ -0,0 +1,49 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Invoice
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    //设置方法名字当别忘记加上【模块名字】：Invoice
+    mapFnName: 'userInvoiceDetail',
+    title: '用户开票 - 详情',
+    path: '/pay/v1/user-invoice/detail',
+    isRule: false,
+    params: {
+      main_order_id: ['订单编号', 'Number', '必选'],
+      pay_order_id: ['支付订单号', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  }, {
+    //设置方法名字当别忘记加上【模块名字】：Invoice
+    mapFnName: 'userInvoiceOptions',
+    title: '用户开票 - options',
+    path: '/pay/v1/user-invoice/options',
+    isRule: false,
+    params: {
+      main_order_id: ['订单编号', 'Number', '必选'],
+      pay_order_id: ['支付订单号', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    //设置方法名字当别忘记加上【模块名字】：Invoice
+    mapFnName: 'userInvoiceSubmit',
+    title: '用户开票 - 申请开票',
+    path: '/pay/v1/user-invoice/submit',
+    isRule: false,
+    data: {
+      main_order_id: ['订单编号', 'Number', '必选'],
+      pay_order_id: ['支付订单号', 'Number', '必选'],
+      email: ['邮箱', 'Number', '必选'],
+      invoice_header: ['发票抬头', 'Number', '必选'],
+      invoice_header_type: ['发票抬头类型', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseInvoice/Attr.js

@@ -0,0 +1,21 @@
+'use strict';
+import Content from './cusAttr/content'
+import Style from './cusAttr/style'
+import Advanced from './cusAttr/advanced'
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data, gValue, gColor, oldData = {}) => {
+    return [
+      ...Content(data, gValue, gColor, oldData),
+      ...Style(data, gValue, gColor, oldData),
+      ...Advanced(data, gValue, gColor, oldData),
+
+    ].filter(i => i)
+  },
+  advanced: [
+
+  ],
+};

package/src/components/JfbBaseInvoice/JfbBaseInvoice.vue

@@ -0,0 +1,524 @@
+<template>
+  <view
+    class="jfb-base-invoice"
+    @click="handleEditxSelect"
+    :class="{ editx: isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-invoice__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-invoice__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view
+      class="jfb-base-invoice__body"
+      :style="{ minHeight: layoutInfo.bodyMinHeightRpx + 'rpx' }"
+    >
+      <view v-if="firstStep">
+        <view :style="[statusStyle]" class="jfb-base-invoice__body-status">
+          <XdFontIcon icon="icongantanhao"></XdFontIcon>
+          <view>{{ status_name }}</view>
+        </view>
+        <view class="jfb-base-invoice__body-content">
+          <view class="jfb-base-invoice__body-content-item">
+            <view class="jfb-base-invoice__body-content-item-info">
+              <view>订单编号</view>
+              <view>{{ main_order_id }}</view>
+            </view>
+            <view class="jfb-base-invoice__body-content-item-info">
+              <view>开票金额</view>
+              <XdUnit :price="invoice_amount" :isOld="false"></XdUnit>
+            </view>
+          </view>
+          <view
+            style="margin-top: 24rpx"
+            class="jfb-base-invoice__body-content-item"
+          >
+            <view class="jfb-base-invoice__body-content-item-info">
+              <view>发票类型</view>
+              <view>（普通发票）数电发票</view>
+            </view>
+            <view class="jfb-base-invoice__body-content-item-info">
+              <view><text class="required">*</text>抬头类型</view>
+              <view>
+                <radio-group @change="radioChange">
+                  <label
+                    style="margin-left: 10rpx"
+                    v-for="(item, index) in invoice_header_type_list"
+                    :key="index"
+                  >
+                    <radio
+                      style="transform: scale(0.7)"
+                      :value="item.value"
+                      :checked="item.value === invoice_header_type"
+                      :activeBackgroundColor="mainColor"
+                      :activeBorderColor="mainColor"
+                      :color="mainColor"
+                    />
+                    <text
+                      :style="{
+                        color:
+                          item.value === invoice_header_type ? mainColor : '',
+                      }"
+                      >{{ item.label }}</text
+                    >
+                  </label>
+                </radio-group>
+              </view>
+            </view>
+            <view class="jfb-base-invoice__body-content-item-info">
+              <view><text class="required">*</text>发票抬头</view>
+              <view class="jfb-base-invoice__body-content-item-info-input">
+                <input
+                  type="text"
+                  v-model="invoice_header"
+                  placeholder="填写需要开具发票的抬头"
+                />
+              </view>
+            </view>
+            <view class="jfb-base-invoice__body-content-item-info">
+              <view><text class="required">*</text>联系电话</view>
+              <view class="jfb-base-invoice__body-content-item-info-input">
+                <input
+                  type="text"
+                  v-model="phone_number"
+                  placeholder="填写联系电话"
+                />
+              </view>
+            </view>
+            <view
+              v-if="invoice_header_type === 'company'"
+              class="jfb-base-invoice__body-content-item-info"
+            >
+              <view><text class="required">*</text>税号</view>
+              <view class="jfb-base-invoice__body-content-item-info-input">
+                <input
+                  type="text"
+                  v-model="invoice_number"
+                  placeholder="填写税号"
+                />
+              </view>
+            </view>
+            <view class="jfb-base-invoice__body-content-item-info">
+              <view><text class="required">*</text>接收邮箱</view>
+              <view class="jfb-base-invoice__body-content-item-info-input">
+                <input
+                  type="text"
+                  v-model="email"
+                  placeholder="开票成功后将发往您的邮箱"
+                />
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="fixe_bottom" :style="prod_bottom">
+          <XdButton
+            width="680rpx"
+            @click="handleToSecondStep"
+            size="small"
+            type="primary"
+            >下一步</XdButton
+          >
+        </view>
+      </view>
+      <view v-else>
+        <view class="jfb-base-invoice__body-step2-content">
+          <view class="jfb-base-invoice__body-step2-content-item">
+            <view class="jfb-base-invoice__body-step2-content-item-info">
+              <view>开票金额</view>
+              <XdUnit :isOld="false" :price="invoice_amount"></XdUnit>
+            </view>
+            <view class="jfb-base-invoice__body-step2-content-item-info">
+              <view>发票类型</view>
+              <view>（普通发票）数电发票</view>
+            </view>
+          </view>
+          <view
+            style="margin-top: 24rpx"
+            class="jfb-base-invoice__body-step2-content-item"
+          >
+            <view class="jfb-base-invoice__body-step2-content-item-info">
+              <view>抬头类型</view>
+              <view>{{
+                invoice_header_type === "company" ? "单位" : "个人"
+              }}</view>
+            </view>
+            <view class="jfb-base-invoice__body-step2-content-item-info">
+              <view>发票抬头</view>
+              <view>{{ invoice_header }}</view>
+            </view>
+            <view class="jfb-base-invoice__body-step2-content-item-info">
+              <view>联系电话</view>
+              <view>{{ phone_number }}</view>
+            </view>
+            <view
+              v-if="invoice_header_type === 'company'"
+              class="jfb-base-invoice__body-step2-content-item-info"
+            >
+              <view>税号</view>
+              <view>{{ invoice_number }}</view>
+            </view>
+            <view class="jfb-base-invoice__body-step2-content-item-info">
+              <view>接收邮箱</view>
+              <view>{{ email }}</view>
+            </view>
+          </view>
+        </view>
+        <view class="fixe_bottom" :style="prod_bottom">
+          <XdButton
+            style="width: 300rpx"
+            :cusStyle="[btnStyle]"
+            @click="handleBack"
+            size="small"
+            type="default"
+            >返回修改</XdButton
+          >
+          <XdButton
+            style="width: 300rpx"
+            @click="handleConfirm"
+            size="small"
+            type="primary"
+            >确认提交</XdButton
+          >
+        </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 JfbBaseInvoiceMixin from "./JfbBaseInvoiceMixin";
+import { getContainerPropsValue, gCPVal } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import getServiceUrl from "@/common/getServiceUrl";
+import XdUnit from "@/components/XdUnit/XdUnit";
+export default {
+  name: "JfbBaseInvoice",
+  components: {
+    XdFontIcon,
+    XdUnit,
+    XdButton,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseInvoiceMixin],
+  data() {
+    return {
+      statusBg: "",
+      invoice_header_type_list: [],
+      invoice_header_type: "",
+      invoice_header: "",
+      phone_number: "",
+      email: "",
+      confirmPath: "",
+      detailPath: "",
+      main_order_id: "",
+      pay_order_id: "",
+      invoice_amount: "",
+      invoice_number: "",
+      status_name: "",
+      firstStep: true,
+    };
+  },
+  computed: {
+    statusStyle() {
+      return {
+        backgroundImage: `url(${this.statusBg})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 100%",
+      };
+    },
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
+    },
+    btnStyle() {
+      return {
+        color: this.mainColor,
+        border: `1px solid ${this.mainColor}`,
+      };
+    },
+  },
+  watch: {
+    container(value, oldValue) {
+      if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject["isPreview"]) this.init(value);
+    },
+  },
+  created() {
+    this.init(this.container);
+
+    //todo
+  },
+  methods: {
+    async onJfbLoad(options) {
+      this.main_order_id = options.main_order_id;
+      this.pay_order_id = options.pay_order_id;
+      await jfbRootExec("userInvoiceOptions", {
+        vm: this,
+        data: {},
+      })
+        .then((res) => {
+          this.invoice_header_type_list = res.invoice_header_type_list;
+        })
+        .catch();
+      await jfbRootExec("userInvoiceDetail", {
+        vm: this,
+        data: {
+          main_order_id: this.main_order_id,
+          pay_order_id: this.pay_order_id,
+        },
+      })
+        .then((res) => {
+          this.invoice_amount = res.invoice_result.invoice_amount;
+          this.status_name = res.invoice_result.status_name;
+        })
+        .catch();
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.statusBg = getServiceUrl(
+        gCPVal(container, "statusBg", { url: "" }, {}).url
+      );
+      this.confirmPath = getContainerPropsValue(
+        container,
+        "content.confirmPath",
+        { value: "" }
+      ).value;
+      this.detailPath = getContainerPropsValue(
+        container,
+        "content.detailPath",
+        { value: "" }
+      ).value;
+    },
+    radioChange: function (evt) {
+      for (let i = 0; i < this.invoice_header_type_list.length; i++) {
+        if (this.invoice_header_type_list[i].value === evt.detail.value) {
+          this.invoice_header_type = evt.detail.value;
+          break;
+        }
+      }
+    },
+    convertObjToQueryString(obj, prefix = "this.", encode = true) {
+      // 过滤掉值为 undefined/null 的属性，避免生成空参数
+      const validEntries = Object.entries(obj).filter(
+        ([_, value]) => value !== undefined && value !== null
+      );
+
+      // 拼接每个键值对：key=prefix.key（支持编码）
+      const querySegments = validEntries.map(([key, _]) => {
+        const valueStr = this[key];
+        // 根据需求决定是否对值进行 URL 编码（避免特殊字符问题）
+        const encodedValue = encode ? encodeURIComponent(valueStr) : valueStr;
+        return `${encodeURIComponent(key)}=${encodedValue}`;
+      });
+
+      // 用 & 连接所有段，返回最终查询字符串
+      return querySegments.join("&");
+    },
+    handleToSecondStep() {
+      if (!this.invoice_header_type) {
+        this.$xdAlert({ content: "请选择发票抬头类型" });
+        return;
+      }
+      if (!this.invoice_header) {
+        this.$xdAlert({ content: "请填写发票抬头" });
+        return;
+      }
+      if (this.invoice_header_type == "company") {
+        if (!this.invoice_number) {
+          this.$xdAlert({ content: "请填写税号" });
+          return;
+        }
+      }
+      if (!this.phone_number) {
+        this.$xdAlert({ content: "请填写联系电话" });
+        return;
+      } else {
+        const reg = /^1[3456789]\d{9}$/;
+        if (!reg.test(this.phone_number)) {
+          this.$xdAlert({ content: "请填写正确的手机号" });
+          return;
+        }
+      }
+      if (!this.email) {
+        this.$xdAlert({ content: "请填写接收邮箱" });
+        return;
+      } else {
+        const reg =
+          /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
+        if (!reg.test(this.email)) {
+          this.$xdAlert({ content: "请填写正确的邮箱" });
+          return;
+        }
+      }
+      this.firstStep = false;
+    },
+    handleConfirm() {
+      //调用确认提交接口并跳转详情页面
+      jfbRootExec("userInvoiceSubmit", {
+        vm: this,
+        data: {
+          main_order_id: this.main_order_id,
+          pay_order_id: this.pay_order_id,
+          email: this.email,
+          invoice_header_type: this.invoice_header_type,
+          invoice_header: this.invoice_header,
+          phone_number: this.phone_number,
+          invoice_number: this.invoice_number,
+        },
+      }).then((res) => {
+        let params = {
+          main_order_id: this.main_order_id,
+          pay_order_id: this.pay_order_id,
+        };
+        params = this.convertObjToQueryString(params);
+        params = this.$xdUniHelper.navigateTo({
+          url: `${this.detailPath}?${params}`,
+        });
+      });
+    },
+    handleBack() {
+      this.firstStep = true;
+    },
+    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 "./JfbBaseInvoiceLess.less";
+
+.jfb-base-invoice {
+  &__body {
+    &-status {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 36rpx;
+      height: 180rpx;
+      color: #fff;
+      & > view {
+        margin-left: 16rpx;
+      }
+    }
+    &-content {
+      padding: 24rpx;
+      position: relative;
+      top: -18rpx;
+      border-radius: 16rpx;
+      background: #f8f8f8;
+      &-item {
+        background: #fff;
+        border-radius: 8rpx;
+        &-info {
+          padding: 20rpx 48rpx;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: #333333;
+          font-size: 28rpx;
+          border-bottom: 2rpx solid #f7f7f7;
+          position: relative;
+          &-input {
+            flex: 1;
+          }
+          input {
+            font-size: 26rpx;
+            text-align: right;
+          }
+        }
+        .required {
+          color: red;
+          position: absolute;
+          left: 30rpx;
+        }
+      }
+    }
+    .fixe_bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: unit(100, rpx);
+      padding: 0 unit(40, rpx);
+      flex-flow: nowrap;
+      background: #fff;
+      box-shadow: 0 0 unit(16, rpx) rgba(0, 0, 0, 0.05);
+      .flex_l {
+        display: flex;
+        align-items: center;
+        font-size: unit(32, rpx);
+      }
+
+      & > view {
+        flex: 1;
+        padding: 0 unit(15, rpx);
+      }
+    }
+    &-step2-content {
+      padding: 24rpx;
+      border-radius: 16rpx;
+      &-item {
+        background: #fff;
+        border-radius: 8rpx;
+        &-info {
+          padding: 20rpx 48rpx;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: #333333;
+          font-size: 28rpx;
+          border-bottom: 2rpx solid #f7f7f7;
+        }
+      }
+    }
+    .fixe_bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: unit(100, rpx);
+      padding: 0 unit(40, rpx);
+      flex-flow: nowrap;
+      background: #fff;
+      box-shadow: 0 0 unit(16, rpx) rgba(0, 0, 0, 0.05);
+      .flex_l {
+        display: flex;
+        align-items: center;
+        font-size: unit(32, rpx);
+      }
+
+      & > view {
+        flex: 1;
+        padding: 0 unit(15, rpx);
+      }
+    }
+  }
+}
+</style>

package/src/components/JfbBaseInvoice/JfbBaseInvoiceLess.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-invoice {
+  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-invoice {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/