jufubao-base 1.0.302-beta1 → 1.0.302-beta10

package/src/components/JfbBaseInvoice/JfbBaseInvoice.vue

@@ -2,110 +2,523 @@
   <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="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 { 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 "@/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 {
-
-        //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;
+    },
+    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.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";
+@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: 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/Mock.js

@@ -2,12 +2,10 @@
 
 module.exports = {
   
-  getInvoiceByIdFilmSquate:{},
+  userInvoiceDetail: { "invoice_result": { "id": 0, "open_nnid": "", "partner_id": 0, "supplier_id": 0, "site_id": "", "user_id": 0, "issuer": "", "category": "", "category_name": "", "content_type": "", "content_type_name": "", "invoice_header": "", "invoice_header_type": "", "invoice_header_type_name": "", "invoice_amount": 1, "invoice_number": "", "phone_number": "", "email": "", "status": "N", "pay_order_id": "", "main_order_id": "", "scene": "", "supplier_fulfil_type": "", "file_info": "", "product_data": [], "open_user_id": "", "open_username": "", "comment": "", "apply_time": 0, "open_time": 0, "created_time": 0, "updated_time": 0, "issuer_name": "", "product_num": 0, "status_name": "未开票", "total_amount": 0, "channel_amount": 0, "error_info": "", "status_desc": "" }, "request_id": "80f312c6000ec59a" },
   
-  updateInvoiceFilmPaiqiDate:{},
+  userInvoiceOptions: { "status_list": [{ "label": "未开票", "value": "N" }, { "label": "已开票", "value": "Y" }, { "label": "待开票", "value": "P" }], "category_list": [{ "label": "数电发票（普通发票）", "value": "normal" }], "content_type_list": [{ "label": "明细", "value": "detail" }], "invoice_header_type_list": [{ "label": "个人", "value": "person" }, { "label": "单位", "value": "company" }], "issuer_list": [{ "label": "供货商", "value": "supplier" }, { "label": "平台", "value": "platform" }], "request_id": "c989ca4688ac7ecb" },
   
-  removeInvoiceFilmAddress:{},
-  
-  addInvoiceFilmcart:{},
+  userInvoiceSubmit:{},
   
 }

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);
+}