jufubao-base 1.0.320-beta2 → 1.0.320-beta4

package/package.json

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

package/src/components/JfbBaseCardInfo/JfbBaseCardInfo.vue

@@ -246,27 +246,6 @@ export default {
       card_number_focus: false,
       showCardTypeChoose: false,
       cardTypeList: [
-        {
-          card_type_name: "电影票兑换券",
-          card_number: "923974909815654",
-          points: "300.00",
-          business_lines: "蛋糕、百货、提货商城、蛋糕商城。超长展示时,自动折行处理即可。",
-          validity: "2年"
-        },
-        {
-          card_type_name: "购物券",
-          card_number: "923974909815655",
-          points: "500.00",
-          business_lines: "百货、提货商城、蛋糕商城。",
-          validity: "1年"
-        },
-        {
-          card_type_name: "礼品券",
-          card_number: "923974909815656",
-          points: "200.00",
-          business_lines: "蛋糕、百货。",
-          validity: "3年"
-        }
       ], // 票券类型列表
       multiple_id: '', // 多场景ID
       multiple_scene: '', // 多场景场景
@@ -457,6 +436,15 @@ export default {
             this.showInfo = true;
             this.info = temp;
             res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
+            // 对 site_entry_settings 进行去重处理，基于 business_code
+            const seen = new Map();
+            res['site_entry_settings'] = res['site_entry_settings'].filter(item => {
+              if (!seen.has(item.business_code)) {
+                seen.set(item.business_code, true);
+                return true;
+              }
+              return false;
+            });
             this.showCardTypeChoose = res.multiple_info.is_support_multiple === 'Y';
             this.cardTypeList = res.multiple_info.multiple_list.map(item => {
               item.business_codes_name = '';
@@ -499,6 +487,15 @@ export default {
           this.showForm = false;
           this.info = temp;
           res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
+          // 对 site_entry_settings 进行去重处理，基于 business_code
+          const seen = new Map();
+          res['site_entry_settings'] = res['site_entry_settings'].filter(item => {
+            if (!seen.has(item.business_code)) {
+              seen.set(item.business_code, true);
+              return true;
+            }
+            return false;
+          });
           this.showCardTypeChoose = res.multiple_info.is_support_multiple === 'Y';
           this.cardTypeList = res.multiple_info.multiple_list.map(item => {
             item.business_codes_name = '';

package/src/components/JfbBaseCardInfoEntry/JfbBaseCardInfoEntry.vue

@@ -122,6 +122,80 @@
           </view>
         </view>
       </view>
+      <xd-down-drawer
+        :show.sync="showCardTypeChoose"
+        :isBodyClose="false"
+        :isClose="false"
+        :z-index="3000"
+      >
+        <view class="jfb-base-card-info-entry__body-type-choose">
+          <view class="jfb-base-card-info-entry__body-type-choose-header">
+            <view class="jfb-base-card-info-entry__body-type-choose-title">设置票券类型</view>
+            <view class="jfb-base-card-info-entry__body-type-choose-notice" :style="{ color: mainColor }">
+              注：票券类型一经确认，后续无法更改，请慎重选择
+            </view>
+          </view>
+          
+          <!-- 可滚动的类型 item 列表 -->
+          <view class="jfb-base-card-info-entry__body-type-choose-scroll">
+            <view
+              v-for="(item, index) in cardTypeList"
+              :key="index"
+            >
+              <view
+                class="jfb-base-card-info-entry__body-type-choose-item"
+              >
+                <!-- 顶部区域 -->
+                <view class="jfb-base-card-info-entry__body-type-choose-item-header">
+                  <view class="jfb-base-card-info-entry__body-type-choose-item-header-left">
+                    <xd-font-icon
+                      icon="iconkaquan"
+                      color="#ffc65d"
+                      size="32"
+                      class="jfb-base-card-info-entry__body-type-choose-item-icon"
+                    ></xd-font-icon>
+                    <view class="jfb-base-card-info-entry__body-type-choose-item-title">{{ item.card_type_name }}</view>
+                  </view>
+                  <view class="jfb-base-card-info-entry__body-type-choose-item-validity">有效期: {{ item.end_time }}</view>
+                </view>
+                
+                <!-- 中间区域 -->
+                <view class="jfb-base-card-info-entry__body-type-choose-item-content">
+                  <view class="jfb-base-card-info-entry__body-type-choose-item-field">票券号: {{ item.card_number }}</view>
+                  <view class="jfb-base-card-info-entry__body-type-choose-item-field">
+                    <text style="color: #999">点数： </text>
+                    <text style="color: #333; font-weight: bold">{{ $xdUniHelper.divisionFloatNumber(item.card_point, 100) }} </text>
+                    <text style="color: #999">点</text>
+                  </view>
+                </view>
+                
+                <!-- 分隔线 -->
+                <view class="jfb-base-card-info-entry__body-type-choose-item-divider"></view>
+                
+                <!-- 底部业务线描述 -->
+                <view class="jfb-base-card-info-entry__body-type-choose-item-business">
+                  业务线: {{ item.business_codes_name}}
+                </view>
+              </view>
+              
+              <!-- 确认按钮 -->
+              <view class="jfb-base-card-info-entry__body-type-choose-item-btn-wrap">
+                <view class="jfb-base-card-info-entry__body-type-choose-item-btn-inner">
+                  <xd-button
+                    type="primary"
+                    size="small"
+                    radius="16"
+                    width="240rpx"
+                    @click="handleConfirmBind(item)"
+                  >
+                    确认选择绑定
+                  </xd-button>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </xd-down-drawer>
     </view>
   </view>
 </template>
@@ -137,6 +211,7 @@ import extsMixins from "@/mixins/extsMixins";
 import colorCardMixins from "@/mixins/colorCardMixins";
 import XdUnit from "@/components/XdUnit/XdUnit";
 import XdButton from "@/components/XdButton/XdButton";
+import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer";
 
 export default {
   name: "JfbBaseCardInfoEntry",
@@ -144,6 +219,7 @@ export default {
     XdFontIcon,
     XdUnit,
     XdButton,
+    XdDownDrawer
   },
   mixins: [
     componentsMixins, extsMixins, JfbBaseCardInfoEntryMixin,colorCardMixins
@@ -174,6 +250,10 @@ export default {
 
       card_password_focus: false,
       card_number_focus: false,
+      showCardTypeChoose: false,
+      cardTypeList: [], // 票券类型列表
+      multiple_id: '', // 多场景ID
+      multiple_scene: '', // 多场景场景
     };
   },
   watch: {
@@ -238,6 +318,8 @@ export default {
           data: {
             card_qrcode: this.qrcode,
             is_show_pop: "Y",
+            multiple_id: this.multiple_id,
+            multiple_scene: this.multiple_scene
           },
         })
           .then((res) => {
@@ -253,6 +335,8 @@ export default {
             card_number: this.card_number + "",
             is_show_entry_settings: "Y",
             is_show_pop: "Y",
+            multiple_id: this.multiple_id,
+            multiple_scene: this.multiple_scene
           },
         })
           .then((res) => {
@@ -296,6 +380,7 @@ export default {
             });
           },
         });
+        this.showCardTypeChoose = false;
       }
     },
     //卡券已被自己绑定时的弹框
@@ -366,13 +451,10 @@ export default {
                 temp[key] = res[key];
               }
             });
-
             //过滤入口配置
             if(res && res.site_entry_settings && res.site_entry_settings.length > 0) {
               res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
             }
-
-
             if(res && res.site_entry_settings && res.site_entry_settings.length > 0) {
               temp.site_entry_settings = res.site_entry_settings.filter(item=>{
                 item['image_url'] = getServiceUrl(item['image_url'], 'size2')
@@ -383,6 +465,27 @@ export default {
             this.headerBg = this.getCardThemes(res.card_type_name);
             this.showInfo = true;
             this.info = temp;
+            res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
+            // 对 site_entry_settings 进行去重处理，基于 business_code
+            const seen = new Map();
+            res['site_entry_settings'] = res['site_entry_settings'].filter(item => {
+              if (!seen.has(item.business_code)) {
+                seen.set(item.business_code, true);
+                return true;
+              }
+              return false;
+            });
+            this.showCardTypeChoose = res.multiple_info.is_support_multiple === 'Y';
+            this.cardTypeList = res.multiple_info.multiple_list.map(item => {
+              item.business_codes_name = '';
+              res.site_entry_settings.map(Sitem => {
+                if (item.business_codes.includes(Sitem.business_code)) {
+                  item.business_codes_name += Sitem.entry_name + '、';
+                }
+              })
+              item.business_codes_name = item.business_codes_name.slice(0, -1);
+              return item;
+            })
           })
           .catch();
       }
@@ -420,12 +523,48 @@ export default {
           this.showInfo = true;
           this.showForm = false;
           this.info = temp;
+          res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
+          // 对 site_entry_settings 进行去重处理，基于 business_code
+          const seen = new Map();
+          res['site_entry_settings'] = res['site_entry_settings'].filter(item => {
+            if (!seen.has(item.business_code)) {
+              seen.set(item.business_code, true);
+              return true;
+            }
+            return false;
+          });
+          this.showCardTypeChoose = res.multiple_info.is_support_multiple === 'Y';
+          this.cardTypeList = res.multiple_info.multiple_list.map(item => {
+            item.business_codes_name = '';
+            res.site_entry_settings.map(Sitem => {
+              if (item.business_codes.includes(Sitem.business_code)) {
+                item.business_codes_name += Sitem.entry_name + '、';
+              }
+            })
+            item.business_codes_name = item.business_codes_name.slice(0, -1);
+            return item;
+          })
         })
         .catch();
     },
     isEmpty(str) {
       return str === null || str === "";
     },
+    handleConfirmBind(item) {
+      if (!item) {
+        this.$xdAlert({
+          content: "请先选择票券类型",
+          time: 1500,
+          isClose: false,
+          zIndex: 5000,
+        });
+        return;
+      }
+      // 处理确认绑定逻辑
+      this.multiple_id = item.multiple_id;
+      this.multiple_scene = item.multiple_scene;
+      this.handleToLink()
+    },
     handleGetInfo() {
       if (this.isEmpty(this.card_password)) {
         this.$xdAlert({
@@ -871,6 +1010,105 @@ export default {
         font-size: unit(32, rpx);
       }
     }
+    &-type-choose {
+      background: #F8F8F8;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      &-header {
+        padding: unit(20, rpx) unit(20, rpx) unit(24, rpx) unit(20, rpx);
+      }
+
+      &-title {
+        font-size: unit(28, rpx);
+        color: #333;
+        margin-bottom: unit(24, rpx);
+        text-align: center;
+      }
+
+      &-notice {
+        font-size: unit(24, rpx);
+        text-align: center;
+      }
+
+      &-scroll {
+        flex: 1;
+        padding: 0 unit(20, rpx) 0 unit(20, rpx);
+        overflow-y: auto;
+        max-height: 800rpx;
+      }
+
+      &-item {
+        background: #fff;
+        border-radius: unit(16, rpx);
+        padding: unit(32, rpx);
+        margin-bottom: unit(24, rpx);
+        border: unit(2, rpx) solid #eee;
+
+        &-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: unit(24, rpx);
+        }
+
+        &-header-left {
+          display: flex;
+          align-items: center;
+          flex: 1;
+        }
+
+        &-icon {
+          margin-right: unit(16, rpx);
+        }
+
+        &-title {
+          font-size: unit(28, rpx);
+          color: #333;
+          flex: 1;
+        }
+
+        &-validity {
+          font-size: unit(24, rpx);
+          color: #999;
+        }
+
+        &-content {
+          margin-bottom: unit(24, rpx);
+        }
+
+        &-field {
+          font-size: unit(24, rpx);
+          color: #333;
+
+          &:first-child {
+            margin-bottom: unit(24, rpx);
+          }
+        }
+
+        &-divider {
+          height: unit(1, rpx);
+          background: #F2F2F2;
+          margin-bottom: unit(24, rpx);
+        }
+
+        &-business {
+          font-size: unit(24, rpx);
+          color: #999;
+          line-height: unit(36, rpx);
+        }
+
+        &-btn-wrap {
+          display: flex;
+          margin-bottom: unit(24, rpx);
+        }
+
+        &-btn-inner {
+          margin-left: auto;
+        }
+      }
+    }
   }
 }
 </style>

package/src/components/JfbBaseCardSweepInfo/JfbBaseCardSweepInfo.vue

@@ -57,6 +57,80 @@
           <xd-button type="primary" width="360rpx" @click="handleToLink">立即绑定</xd-button>
         </view>
       </view>
+      <xd-down-drawer
+        :show.sync="showCardTypeChoose"
+        :isBodyClose="false"
+        :isClose="false"
+        :z-index="3000"
+      >
+        <view class="jfb-base-card-sweep-info__body-type-choose">
+          <view class="jfb-base-card-sweep-info__body-type-choose-header">
+            <view class="jfb-base-card-sweep-info__body-type-choose-title">设置票券类型</view>
+            <view class="jfb-base-card-sweep-info__body-type-choose-notice" :style="{ color: mainColor }">
+              注：票券类型一经确认，后续无法更改，请慎重选择
+            </view>
+          </view>
+          
+          <!-- 可滚动的类型 item 列表 -->
+          <view class="jfb-base-card-sweep-info__body-type-choose-scroll">
+            <view
+              v-for="(item, index) in cardTypeList"
+              :key="index"
+            >
+              <view
+                class="jfb-base-card-sweep-info__body-type-choose-item"
+              >
+                <!-- 顶部区域 -->
+                <view class="jfb-base-card-sweep-info__body-type-choose-item-header">
+                  <view class="jfb-base-card-sweep-info__body-type-choose-item-header-left">
+                    <xd-font-icon
+                      icon="iconkaquan"
+                      color="#ffc65d"
+                      size="32"
+                      class="jfb-base-card-sweep-info__body-type-choose-item-icon"
+                    ></xd-font-icon>
+                    <view class="jfb-base-card-sweep-info__body-type-choose-item-title">{{ item.card_type_name }}</view>
+                  </view>
+                  <view class="jfb-base-card-sweep-info__body-type-choose-item-validity">有效期: {{ item.end_time }}</view>
+                </view>
+                
+                <!-- 中间区域 -->
+                <view class="jfb-base-card-sweep-info__body-type-choose-item-content">
+                  <view class="jfb-base-card-sweep-info__body-type-choose-item-field">票券号: {{ item.card_number }}</view>
+                  <view class="jfb-base-card-sweep-info__body-type-choose-item-field">
+                    <text style="color: #999">点数： </text>
+                    <text style="color: #333; font-weight: bold">{{ $xdUniHelper.divisionFloatNumber(item.card_point, 100) }} </text>
+                    <text style="color: #999">点</text>
+                  </view>
+                </view>
+                
+                <!-- 分隔线 -->
+                <view class="jfb-base-card-sweep-info__body-type-choose-item-divider"></view>
+                
+                <!-- 底部业务线描述 -->
+                <view class="jfb-base-card-sweep-info__body-type-choose-item-business">
+                  业务线: {{ item.business_codes_name}}
+                </view>
+              </view>
+              
+              <!-- 确认按钮 -->
+              <view class="jfb-base-card-sweep-info__body-type-choose-item-btn-wrap">
+                <view class="jfb-base-card-sweep-info__body-type-choose-item-btn-inner">
+                  <xd-button
+                    type="primary"
+                    size="small"
+                    radius="16"
+                    width="240rpx"
+                    @click="handleConfirmBind(item)"
+                  >
+                    确认选择绑定
+                  </xd-button>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </xd-down-drawer>
     </view>
   </view>
 </template>
@@ -71,6 +145,8 @@ import { getContainerPropsValue } from "@/utils/xd.base";
 import componentsMixins from "@/mixins/componentsMixins";
 import extsMixins from "@/mixins/extsMixins";
 import {mapState} from "vuex";
+import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer";
+import colorCardMixins from "@/mixins/colorCardMixins";
 
 
 export default {
@@ -79,8 +155,9 @@ export default {
     XdFontIcon,
     XdButton,
     XdUnit,
+    XdDownDrawer
   },
-  mixins: [componentsMixins, extsMixins, JfbBaseCardSweepInfoMixin],
+  mixins: [componentsMixins, extsMixins, JfbBaseCardSweepInfoMixin, colorCardMixins],
   data() {
     return {
       info: null,
@@ -111,6 +188,11 @@ export default {
       is_show_balance: "N", //是否显示余额
       hasCon: "", //是否有优惠券
       card_number: "", //票券号码
+      showCardTypeChoose: false,
+      cardTypeList: [
+      ], // 票券类型列表
+      multiple_id: '', // 多场景ID
+      multiple_scene: '', // 多场景场景
     };
   },
   watch: {
@@ -154,6 +236,8 @@ export default {
           vm: this,
           data: {
             card_qrcode: this.pa,
+            multiple_id: this.multiple_id,
+            multiple_scene: this.multiple_scene
           },
         })
           .then((res) => {
@@ -218,6 +302,7 @@ export default {
 
                 },
               });
+              this.showCardTypeChoose = false;
             }
           })
           .catch();
@@ -227,6 +312,21 @@ export default {
       this.backUrl = getContainerPropsValue( this.container, "content.back_url", { value: "" }).value;
       this.back_detail_url = getContainerPropsValue( this.container, "content.back_detail_url", { value: "" }).value;
       this.is_show_balance = getContainerPropsValue(this.container, 'content.is_show_balance', "N");
+    },
+     handleConfirmBind(item) {
+      if (!item) {
+        this.$xdAlert({
+          content: "请先选择票券类型",
+          time: 1500,
+          isClose: false,
+          zIndex: 5000,
+        });
+        return;
+      }
+      // 处理确认绑定逻辑
+      this.multiple_id = item.multiple_id;
+      this.multiple_scene = item.multiple_scene;
+      this.handleToLink()
     },
     onJfbLoad(options) {
       this.pa = options.pa;
@@ -249,6 +349,7 @@ export default {
           vm: this,
           data: {
             card_qrcode: this.pa,
+            is_show_entry_settings:"Y"
           },
         })
           .then((res) => {
@@ -267,6 +368,27 @@ export default {
               }
             });
             this.info = temp;
+            res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
+            // 对 site_entry_settings 进行去重处理，基于 business_code
+            const seen = new Map();
+            res['site_entry_settings'] = res['site_entry_settings'].filter(item => {
+              if (!seen.has(item.business_code)) {
+                seen.set(item.business_code, true);
+                return true;
+              }
+              return false;
+            });
+            this.showCardTypeChoose = res.multiple_info.is_support_multiple === 'Y';
+            this.cardTypeList = res.multiple_info.multiple_list.map(item => {
+              item.business_codes_name = '';
+              res.site_entry_settings.map(Sitem => {
+                if (item.business_codes.includes(Sitem.business_code)) {
+                  item.business_codes_name += Sitem.entry_name + '、';
+                }
+              })
+              item.business_codes_name = item.business_codes_name.slice(0, -1);
+              return item;
+            })
           })
           .catch(e=>{
             console.error(e);
@@ -403,6 +525,105 @@ export default {
       align-items: center;
       justify-content: center;
     }
+    &-type-choose {
+      background: #F8F8F8;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      &-header {
+        padding: unit(20, rpx) unit(20, rpx) unit(24, rpx) unit(20, rpx);
+      }
+
+      &-title {
+        font-size: unit(28, rpx);
+        color: #333;
+        margin-bottom: unit(24, rpx);
+        text-align: center;
+      }
+
+      &-notice {
+        font-size: unit(24, rpx);
+        text-align: center;
+      }
+
+      &-scroll {
+        flex: 1;
+        padding: 0 unit(20, rpx) 0 unit(20, rpx);
+        overflow-y: auto;
+        max-height: 800rpx;
+      }
+
+      &-item {
+        background: #fff;
+        border-radius: unit(16, rpx);
+        padding: unit(32, rpx);
+        margin-bottom: unit(24, rpx);
+        border: unit(2, rpx) solid #eee;
+
+        &-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: unit(24, rpx);
+        }
+
+        &-header-left {
+          display: flex;
+          align-items: center;
+          flex: 1;
+        }
+
+        &-icon {
+          margin-right: unit(16, rpx);
+        }
+
+        &-title {
+          font-size: unit(28, rpx);
+          color: #333;
+          flex: 1;
+        }
+
+        &-validity {
+          font-size: unit(24, rpx);
+          color: #999;
+        }
+
+        &-content {
+          margin-bottom: unit(24, rpx);
+        }
+
+        &-field {
+          font-size: unit(24, rpx);
+          color: #333;
+
+          &:first-child {
+            margin-bottom: unit(24, rpx);
+          }
+        }
+
+        &-divider {
+          height: unit(1, rpx);
+          background: #F2F2F2;
+          margin-bottom: unit(24, rpx);
+        }
+
+        &-business {
+          font-size: unit(24, rpx);
+          color: #999;
+          line-height: unit(36, rpx);
+        }
+
+        &-btn-wrap {
+          display: flex;
+          margin-bottom: unit(24, rpx);
+        }
+
+        &-btn-inner {
+          margin-left: auto;
+        }
+      }
+    }
   }
 }
 </style>