jufubao-base 1.0.302-beta1 → 1.0.302-beta2

package/src/components/JfbBaseInvoice/JfbBaseInvoice.vue

@@ -2,110 +2,502 @@
   <view
     class="jfb-base-invoice"
     @click="handleEditxSelect"
-    :class="{ editx : isEditx && active }"
+    :class="{ editx: isEditx && active }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-invoice__edit"
-      :class="{ editx : isEditx && active }"
+      :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">
-      <view>测试插件( {{containerId}} )</view>
+    <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="iconmingchengtubiao"></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 @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
+            :cusStyle="[btnStyle]"
+            @click="handleBack"
+            size="small"
+            type="default"
+            >返回修改</XdButton
+          >
+          <XdButton @click="handleConfirm" size="small" type="primary"
+            >确认提交</XdButton
+          >
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import { jfbRootExec } from "@/utils/xd.event";
-  import JfbBaseInvoiceMixin from "./JfbBaseInvoiceMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
-  import componentsMixins from "@/mixins/componentsMixins";
-  import extsMixins from "@/mixins/extsMixins";
-  export default {
-    name: "JfbBaseInvoice",
-    components: {
-      XdFontIcon
-    },
-    mixins: [
-      componentsMixins, extsMixins, JfbBaseInvoiceMixin
-    ],
-    data() {
+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 "../XdUnit/XdUnit.vue";
+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 {
-
-        //todo
-      }
+        backgroundImage: `url(${this.statusBg})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 100%",
+      };
     },
-    watch: {
-      container(value, oldValue) {
-        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']) this.init(value)
-      },
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
     },
-    created() {
-      this.init(this.container);
-
-      //todo
+    btnStyle() {
+      return {
+        color: this.mainColor,
+        border: `1px solid ${this.mainColor}`,
+      };
     },
-    methods: {
-      onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
-      },
-      /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
-       */
-      init(container) {
+  },
+  watch: {
+    container(value, oldValue) {
+      if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject["isPreview"]) this.init(value);
+    },
+  },
+  created() {
+    this.init(this.container);
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+    //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;
+      debugger
+    },
+    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
+      );
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
-      },
-      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)
-      },
-    }
-  }
+      // 拼接每个键值对：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.email) {
+        this.$xdAlert({ content: "请填写接收邮箱" });
+        return;
+      }
+      if (!this.phone_number) {
+        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";
+@import "./JfbBaseInvoiceLess.less";
 
-  .jfb-base-invoice {
-    &__body{
+.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: end;
+          }
+        }
+        .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/cusAttr/advanced.js

@@ -0,0 +1,33 @@
+import {
+  dataVal,
+} from "@/utils/AttrTools";
+export default (data, gValue, gColor, oldData = {}) => {
+  return [
+    {
+      label: '确认开票',
+      ele: 'xd-select-pages-path',
+      valueKey: 'confirmPath',
+      placeholder: '请选择确认开票页面',
+      value: data['confirmPath'] || {},
+      labelInline: true,
+      setting: {
+        router: XdBus.getParentApi('getPagesTree'),
+      },
+      className: 'input100',
+      groupKey: 'advanced',
+    },
+    {
+      label: '开票详情',
+      ele: 'xd-select-pages-path',
+      valueKey: 'detailPath',
+      placeholder: '请选择开票详情页面',
+      value: data['detailPath'] || {},
+      labelInline: true,
+      setting: {
+        router: XdBus.getParentApi('getPagesTree'),
+      },
+      className: 'input100',
+      groupKey: 'advanced',
+    },
+  ].filter(i => i);
+}

package/src/components/JfbBaseInvoice/cusAttr/content.js

@@ -0,0 +1,12 @@
+'use strict';
+import {
+  dataVal,
+  statusDataVal,
+  statusShow,
+  customVal,
+  getRemoteOptions
+} from "@/utils/AttrTools";
+
+export default (data, gValue, gColor, oldData = {}) => {
+  return [].filter(i => i);
+}

package/src/components/JfbBaseInvoice/cusAttr/style.js

@@ -0,0 +1,41 @@
+import {
+  dataVal,
+  statusDataVal,
+  statusShow,
+  cRaBorShadow,
+  cusDisabled,
+  getCustomAttr,
+  TestCssInfo
+} from "@/utils/AttrTools";
+export default (data, gValue, gColor, oldData = {}) => {
+  return [
+    {
+      label: '背景图',
+      ele: 'xd-upload',
+      labelInline: true,
+      valueKey: 'statusBg',
+      value: dataVal({
+        data,
+        key: 'statusBg',
+        dValue: null,
+        gValue,
+      }),
+      defaultValue: dataVal({
+        data,
+        key: 'statusBg',
+        dValue: null,
+        gValue,
+      }),
+      slot: true,
+      tipsformet: '上传文件格式：@imageType@，不超过@size@MB.，建议宽度为：<span style="color:red">750</span>像素',
+      type: ['jpg', 'png', 'jpeg'],
+      styleType: 'one',
+      uploadType: 'aliyun',
+      oneHeight: 90,
+      oneWidth: 375,
+      size: 5,
+      action: 'aliyun',
+      groupKey: 'style',
+    },
+  ].filter(i => i);
+}