jufubao-base 1.0.169-beta9 → 1.0.170

package/src/components/JfbBaseTfkCardLogin/JfbBaseTfkCardLogin.vue

@@ -41,42 +41,12 @@
         </view>
       </view>
       <view class="JfbBaseNotice">
-        <!--notice-->
-        <view class="jfb-base-tfk-card-login__body-line" v-if="!notice"></view>
-        <view class="jfb-base-tfk-card-login__body-notice" :style="noticeWrapBoxStyle" v-if="notice">
-          <view
-            class="jfb-base-tfk-card-login__body-notice-in"
-            :style="noticeBoxStyle"
-          >
-            <xd-notice-bar
-              style="width: 100%"
-              :color="noticeFont.color"
-              :showIcon="true"
-              :scrollable="true"
-              :speed="20"
-              :fontSize="noticeFont.size"
-              :height="70"
-              :is-no-bgc="false"
-            >
-              <template>
-                <view v-html="notice"></view>
-              </template>
-            </xd-notice-bar>
-          </view>
-        </view>
-        <view class="jfb-base-tfk-card-login__body-notice" :style="noticeWrapBoxStyle" v-if="noticeStatus && isPreview && notice === ''">
-          <view
-            class="jfb-base-tfk-card-login__body-notice-in"
-            :style="[noticeBoxStyle, {
-              textAlign: 'center',
-              color: dangerColor,
-              fontSize: 26 + 'rpx',
-            }]">该组件未配置数据，因此改模块在正式环境将不显示</view>
-        </view>
-        <!--notice end-->
+        <xd-notice
+          :panelSetting="noticeSetting"
+          :apiGetContent="apiGetContent"
+        ></xd-notice>
       </view>
       <view class="card_list_wrap" :style="listBoxStyle">
-
         <!-- 我的票券包- 已绑票券 -->
         <template v-if="menuType === 'card'">
           <view v-if="loadingList">
@@ -107,7 +77,7 @@
                       :price="item.card_point"
                       :isOld="false"
                       :unit="item.unit || ''"
-                      :colorNew="'#333333'"
+                      :colorNew="cardFontColor"
                     ></xd-unit>
                   </view>
                   <view v-if="item.other_card_point && item.card_point_type !== 1" class="bind_deduct">
@@ -136,10 +106,10 @@
                   @click.stop="doCardLogin(item)"
                 >{{ item.is_login === 'Y' ? '已登录' : '登录'}}</view>
               </view>
-              <view v-if="!hasCardList" class="no_more_card">没有更多券了，查看失效的票券 ></view>
+              <view v-if="!hasCardList" class="no_more_card" @click="toDisableUrl">没有更多券了，查看失效的票券 ></view>
             </view>
             <view v-else>
-              暂无数据
+              <!-- 暂无数据 -->
             </view>
           </view>
         </template>
@@ -157,8 +127,9 @@
               :couponLeftBgColor="couponLeftBgColor"
               :item="item"
               @useCoupon="doCardLogin(item)"
+              @toDetail="toCardDetail(item)"
             ></xd-coupon-item>
-            <view v-if="!hasCouponList" class="no_more_card">没有更多券了，查看失效的票券 ></view>
+            <view v-if="!hasCouponList" class="no_more_card" @click="toDisableUrl">没有更多券了，查看失效的票券 ></view>
           </view>
           <view v-else>
             暂无数据
@@ -166,7 +137,7 @@
 
         </template>
       </view>
-      
+
     </view>
   </view>
 </template>
@@ -174,6 +145,7 @@
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdNotice from "./XdNotice";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseTfkCardLoginMixin from "./JfbBaseTfkCardLoginMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
@@ -190,13 +162,15 @@
       XdFontIcon,
       XdNoticeBar,
       XdCouponItem,
-      XdUnit
+      XdUnit,
+      XdNotice,
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkCardLoginMixin
     ],
     data() {
       return {
+        // hideMask: true,
         menuType: "card", // card, coupon
         loadingList: true,
         cardList: [],
@@ -208,6 +182,7 @@
         inCallback: null, //内部跳转地址
         allEntryPath: "", //综合福利入口页
         cardDetailPath: "", //我的票券包详情页
+        disabledPath: "", //禁用票券包详情页
 
         options: {},
         showDisabled: 'Y',
@@ -240,10 +215,28 @@
         couponUseBtnPadding: {},
         couponBtnRadius: 16,
         couponLeftBgColor: "",
+
+
+        noticeStyle: "",
+        notice_is_hide_dailog: "",
+        noticeIsTitle: "",
+        noticeTextAlign: "",
+        noticeRadius: "",
+        noticeBgc: "",
+        noticeTextColor: "",
+        noticeFontSize: "",
+        noticeNum: "",
+        noticeSpeed: "",
+        noticeScrollMargin: "",
+        noticeTime: "",
+
         noticeBgColor: "",
         noticeMargin: {},
         noticePadding: {},
         noticeFont: {},
+        noticeMoreFont: {},
+
+
         bindCardText: "",
         bindCardTextStyle: {},
         bindCardShowType: "",
@@ -254,6 +247,8 @@
         entryGroupId: "",
         cardHeight: 270,
         cardBtnMinWidth: 100,
+        menuShowType: "text",
+        cardFontColor: "",
       }
     },
     computed: {
@@ -299,8 +294,13 @@
           background: this.menuTabColor['actBgColor'] || '#fff',
           fontSize: this.menuTabColor['actFontSize'] || '30rpx',
           fontWeight: this.menuTabColor['actFontWeight'] || 'normal',
-          borderBottom: `${this.menuBorderWidth}px solid ${this.menuTabColor['actColor'] || defaultTextColor}`
         }
+        if(this.menuShowType === 'text'){
+          styleActiveObj.borderBottom = `${this.menuBorderWidth}px solid ${this.menuTabColor['actColor'] || defaultTextColor}`
+        }else{
+          styleActiveObj.borderRadius = '100rpx';
+        }
+
         return this.styleObjectToString(styleActiveObj)
       },
       bindCardBtnPadding(){
@@ -401,6 +401,7 @@
           border: border,
           boxShadow: boxShadow,
           height: this.cardHeight + 'rpx',
+          color: this.cardFontColor
         })
       },
       listBoxStyle(){
@@ -457,6 +458,29 @@
           padding: padding,
           background: this.noticeBgColor
         })
+      },
+      noticeSetting(){
+
+        return {
+          style: this.noticeStyle,
+          is_hide_dailog: this.notice_is_hide_dailog,
+          isTitle: this.noticeIsTitle,
+          textAlign: this.noticeTextAlign,
+          radius: this.noticeRadius,
+          bgc: this.noticeBgc,
+          textColor: this.noticeFont.color || this.warningColor, // noticeTextColor,
+          fontSize: this.noticeFont.size, //noticeFontSize,
+          num: this.noticeNum,
+          speed: this.noticeSpeed,
+          scrollMargin: this.noticeScrollMargin,
+          time: this.noticeTime,
+          warningColor: this.warningColor,
+          containerId: this.containerId,
+          padding: this.noticePadding,
+          margin: this.noticeMargin,
+          moreTextColor: this.noticeMoreFont.color || this.warningColor,
+          moreFontSize: this.noticeMoreFont.size || 24,
+        }
       }
     },
     watch: {
@@ -489,7 +513,6 @@
         this.inCallback = inCallback || this.allEntryPath || this.settings.index;
 
         this.getCardList();
-        this.getContent();
       },
       /**
        * @description 监听事件变化
@@ -519,10 +542,7 @@
         this.couponUseBtnPadding = getContainerPropsValue(value, "content.couponUseBtnPadding", {top: 20, left: 20, right: 20, bottom: 20});
         this.couponBtnRadius = getContainerPropsValue(value, "content.couponBtnRadius", 16);
         this.couponLeftBgColor = getContainerPropsValue(value, "content.couponLeftBgColor", "");
-        this.noticeBgColor = getContainerPropsValue(value, "content.noticeBgColor", "");
-        this.noticeMargin = getContainerPropsValue(value, "content.noticeMargin", {top: 20, left: 20, right: 20, bottom: 20});
-        this.noticePadding = getContainerPropsValue(value, "content.noticePadding", {top: 20, left: 20, right: 20, bottom: 20});
-        this.noticeFont = getContainerPropsValue(value, "content.noticeFont", {});
+
         this.bindCardText = getContainerPropsValue(value, "content.bindCardText", "");
         this.bindCardTextStyle = getContainerPropsValue(value, "content.bindCardTextStyle", {});
         this.bindCardShowType = getContainerPropsValue(value, "content.bindCardShowType", 'text');
@@ -531,10 +551,32 @@
         this.cardShadow = getContainerPropsValue(value, "content.cardShadow", {});
         this.cardImageMode = getContainerPropsValue(value, "content.cardImageMode", '');
         this.allEntryPath = getContainerPropsValue(value, "content.allEntryPath", {value: ""}).value;
-        this.cardDetailPath = getContainerPropsValue(value, "content.cardDetailPath", {value: "/tfktest/system/card/tkfDetail"}).value;
+        this.cardDetailPath = getContainerPropsValue(value, "content.cardDetailPath", {value: ""}).value;
         // this.entryGroupId = getContainerPropsValue(value,"content.entryGroupId","default");
         this.cardHeight = getContainerPropsValue(value, "content.cardHeight", 270);
         this.cardBtnMinWidth = getContainerPropsValue(value, "content.cardBtnMinWidth", 100);
+        this.disabledPath = getContainerPropsValue(value, "content.disabledPath", {value: ""}).value;
+        this.menuShowType = getContainerPropsValue(value, "content.menuShowType", 'text');
+        this.cardFontColor = getContainerPropsValue(value, "content.cardFontColor", '#333');
+
+        this.noticeStyle = getContainerPropsValue(value, "content.noticeStyle", '1');
+        this.notice_is_hide_dailog = getContainerPropsValue(value, "content.notice_is_hide_dailog", 'N');
+        this.noticeIsTitle = getContainerPropsValue(value, "content.noticeIsTitle", '');
+        this.noticeTextAlign = getContainerPropsValue(value, "content.noticeTextAlign", 'left');
+        this.noticeRadius = getContainerPropsValue(value, "content.noticeRadius", '');
+        this.noticeBgc = getContainerPropsValue(value, "content.noticeBgc", '');
+        this.noticeTextColor = getContainerPropsValue(value, "content.noticeTextColor", this.warningColor);
+        this.noticeFontSize = getContainerPropsValue(value, "content.noticeFontSize", '20');
+        this.noticeNum = getContainerPropsValue(value, "content.noticeNum", 1);
+        this.noticeSpeed = getContainerPropsValue(value, "content.noticeSpeed", 30);
+        this.noticeScrollMargin = getContainerPropsValue(value, "content.noticeScrollMargin", '');
+        this.noticeTime = getContainerPropsValue(value, "content.noticeTime", 3);
+
+        this.noticeBgColor = getContainerPropsValue(value, "content.noticeBgColor", "");
+        this.noticeMargin = getContainerPropsValue(value, "content.noticeMargin", {top: 20, left: 20, right: 20, bottom: 20});
+        this.noticePadding = getContainerPropsValue(value, "content.noticePadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.noticeFont = getContainerPropsValue(value, "content.noticeFont", {});
+        this.noticeMoreFont = getContainerPropsValue(value, "content.noticeMoreFont", {});
 
         console.log(this.cardShadow, 'cardShadow')
         if(this.bindCardTextStyle && !this.bindCardTextStyle.color){
@@ -557,6 +599,7 @@
 
         if(this.$configProject.isPreview){
           this.menuType = this.previewCurrent;
+          this.getCardList();
         }
       },
       toCardDetail(item){
@@ -597,7 +640,7 @@
       getCardList(){
         let show_type = this.menuType === 'coupon' ? 'coupon' : 'normal';
         let params = {show_type};
-       
+
         // let params = {is_all: 'Y', is_show_entry_settings: 'Y'};
         // if(options['jfb_business_code']) {
         //   params['card_business_code'] = options['jfb_business_code'];
@@ -617,9 +660,15 @@
             return item;
           })
           if(show_type === 'coupon'){
+            if(this.$configProject.isPreview){
+              list = list.filter(item => item.consume_type == 2)
+            }
             this.couponList = list;
           }
           if(show_type === 'normal'){
+            if(this.$configProject.isPreview){
+              list = list.filter(item => item.consume_type != 2)
+            }
             this.cardList = list;
           }
         })
@@ -630,29 +679,30 @@
           url: this.cardBindPath
         })
       },
-      getContent() {
-        jfbRootExec("getListBaseNewsContent", {
-          vm: this,
-          data: {
-            page_id: this.pageAttr["page_id"], //页面ID
-            container_id: this.containerId, //组件ID
-            limit: 1,
-          },
-        })
-          .then((res) => {
-            if (res.list.length > 0) {
-              if(res.list && res.list.length > 0) {
-                this.notice = this.$xdUniHelper.filterHtml(res.list[0].content);
-              }
-              this.noticeStatus = true;
-            }
+      apiGetContent(params){
+        return new Promise((resolve, reject) => {
+          jfbRootExec("getListBaseNewsContent", {
+            vm: this,
+            data: {
+              page_id: this.pageAttr["page_id"], //页面ID
+              container_id: this.containerId, //组件ID
+              page_size: this.noticeNum || 1,
+              ...params
+            },
+          }).then(res => {
+            resolve(res);
+          }).catch(err => {
+            reject(err);
           })
-          .catch((error) => {
-            console.error(error);
-          });
+        })
+      },
+      toDisableUrl(){
+        this.$xdUniHelper.navigateTo({
+          url: this.disabledPath
+        })
       },
       onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+        // console.log('event.onJfbScroll', options)
       },
       onJfbReachBottom(options) {
         console.log('event.onJfbReachBottom', options)
@@ -750,7 +800,6 @@
             flex-direction: column;
             justify-content: space-between;
             .bind_point{
-              color: #333333;
               font-size: 48rpx;
               ::v-deep .xd-unit{
                 height: auto !important;
@@ -763,7 +812,6 @@
             }
             .bind_deduct{
               font-size: 28rpx;
-              color: #999;
               background: rgba(51, 51, 51, 0.05);
               display: inline-block;
               padding: 4rpx 20rpx;
@@ -771,20 +819,17 @@
             }
             .bind_number{
               font-size: 28rpx;
-              color: #999;
               margin-top: 20rpx;
               font-weight: 500;
             }
             .bind_time{
               font-size: 24rpx;
-              color: #999;
               margin-top: 16rpx;
               font-weight: 500;
               line-height: 1;
             }
             .bind_type{
               font-size: 28rpx;
-              color: #333333;
               position: absolute;
               top: 32rpx;
               right: 32rpx;