jufubao-base 1.0.167 → 1.0.169-beta1

package/src/components/JfbBaseTfkCardLogin/JfbBaseTfkCardLogin.vue

@@ -13,8 +13,153 @@
       <view class="jfb-base-tfk-card-login__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-tfk-card-login__body">
-      <view>测试插件( {{containerId}} )</view>
+    <view class="jfb-base-tfk-card-login__body" :style="{
+      '--card-list-margin': ($rpxNum * cardItemMargin) + 'px',
+    }">
+      <view class="menu_wrap" :style="menuBoxStyle">
+        <view class="menu_list">
+          <view class="menu_item" :style="{
+            marginRight: menuItemMargin + 'px'
+          }">
+            <view class="menu_item_inner"
+              :style="[menuType === 'card' ? menuItemActiveStyle : menuItemStyle,  menuItemBoxStyle]">我的票券包</view>
+          </view>
+          <view class="menu_item">
+            <view class="menu_item_inner"
+              :style="[menuType === 'coupon' ? menuItemActiveStyle : menuItemStyle,  menuItemBoxStyle]">我的优惠券</view>
+          </view>
+        </view>
+        <view @click="toBindCard">
+          <xd-font-icon :icon="bindCardIcon.icon"
+            :color="bindCardIcon.color"
+            :style="{fontSize: bindCardIcon.fontSize}"
+          ></xd-font-icon>
+        </view>
+      </view>
+      <view class="JfbBaseNotice">
+        <!--notice-->
+        <view class="jfb-base-tfk-card-login__body-line" v-if="!notice"></view>
+        <view :style="{marginTop: '0rpx'}" class="jfb-base-tfk-card-login__body-notice" v-if="notice">
+          <view
+            class="jfb-base-tfk-card-login__body-notice-in"
+            :style="{ background: noticeBackgroundColor }"
+          >
+            <xd-notice-bar
+              style="width: 100%"
+              :showIcon="true"
+              :scrollable="true"
+              :speed="20"
+              :fontSize="24"
+              :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" v-if="noticeStatus && isPreview && notice === ''">
+          <view
+            class="jfb-base-tfk-card-login__body-notice-in"
+            :style="{
+              background: noticeBackgroundColor,
+              textAlign: 'center',
+              color: dangerColor,
+              fontSize: 26 + 'rpx',
+            }">该组件未配置数据，因此改模块在正式环境将不显示</view>
+        </view>
+        <!--notice end-->
+      </view>
+      <view class="card_list_wrap" :style="listBoxStyle">
+
+        <!-- 我的票券包- 已绑票券 -->
+        <template v-if="menuType === 'card'">
+          <view v-if="loadingList">
+            <view class="bind_list skeleton-wrap">
+              <view class="bind_item" v-for="i in 5" :key="i" :style="cardItemBoxStyle">
+                <view class="bind_point"></view>
+                <view class="bind_deduct"></view>
+                <view class="bind_number"></view>
+                <view class="bind_time"></view>
+                <view class="bind_type"></view>
+                <view class="bind_btn"></view>
+              </view>
+            </view>
+          </view>
+          <view v-else>
+            <view v-if="cardList.length" class="bind_list">
+              <view class="bind_item" v-for="(item, i) in cardList" :key="i"
+                :style="cardItemBoxStyle">
+                <view class="bind_point">120</view>
+                <view class="bind_deduct">兑换其他商品可抵：240元宝</view>
+                <view class="bind_number">1001000002541</view>
+                <view class="bind_time">2029-12-31到期</view>
+                <view class="bind_type" :style="{
+                  top: cardPadding.top + 'rpx',
+                  right: cardPadding.right + 'rpx',
+                }">
+                  <view>兰州vip优惠券</view>
+                  <view>(可转票券)</view>
+                </view>
+                <view class="bind_btn" :style="[{
+                  right: cardPadding.right + 'rpx',
+                  bottom: cardPadding.bottom + 'rpx',
+                  borderRadius: cardBtnRadius + 'rpx',
+                  padding: bindCardBtnPadding
+                }, item.is_login !== 'Y' ? bindCardActiveStyle : bindCardBtnStyle]">登录</view>
+              </view>
+              <view v-if="!hasCardList" class="no_more_card">没有更多券了，查看失效的票券 ></view>
+            </view>
+            <view v-else>
+              暂无数据
+            </view>
+          </view>
+        </template>
+
+        <!-- 优惠券 -->
+        <template v-else >
+          <view v-if="couponList.length" class="coupon_list">
+            <view class="coupon_item" v-for="(item, i) in couponList" :key="i" :style="couponItemBoxStyle">
+              <view class="coupon_left">
+                <view class="_point">200<text style="font-size: 24rpx;">点</text></view>
+                <view class="_rule">满100减40</view>
+              </view>
+              <view class="coupon_right" :style="couponRightItemBoxStyle">
+                <view class="cont_top" :style="{
+                  background: couponTitleBgColor
+                }">众福优选-众选全场通兑次票60档（上海）</view>
+                <view class="cont_main">
+                  <view class="cou_number">券号：923974909815654</view>
+                  <view class="cou_time">有效期：2023-09-09</view>
+                  <view class="cou_point">余额：120</view>
+                  <view class="cou_btn" :style="[couponBtnStyle, {
+                    padding: couponBtnPadding,
+                    borderRadius: couponBtnRadius + 'rpx'
+                  }]">去使用</view>
+                </view>
+                <view class="cont_bottom">
+                  <view class="switch_rule">
+                    <view>使用规则</view>
+                    <view>
+                      <xd-font-icon icon="iconxia_down" size="24"></xd-font-icon>
+                    </view>
+                  </view>
+                  <view class="expand_rule">
+                    这是一段文字规则描述，不知道又多长多长长...
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view v-if="!hasCouponList" class="no_more_card">没有更多券了，查看失效的票券 ></view>
+          </view>
+          <view v-else>
+            暂无数据
+          </view>
+
+        </template>
+      </view>
+      
     </view>
   </view>
 </template>
@@ -26,20 +171,203 @@
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import getServiceUrl from '@/common/getServiceUrl'
+  import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
+  import Color from "color"
   export default {
     name: "JfbBaseTfkCardLogin",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdNoticeBar
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkCardLoginMixin
     ],
     data() {
       return {
+        menuType: "coupon", // card, coupon
+        loadingList: false,
+        cardList: [{id: 1}, {id: 2}],
+        couponList: [{id: 1}, {id: 2}],
+        hasCardList: false,
+        hasCouponList: false,
 
         //todo
+        previewCurrent: "",
+        isPreview: false,
+        notice: "",
+        noticeStatus: false,
+        noticeBackgroundColor: "",
+        cardBindPath: "",
+        menuPadding: {},
+        menuBtnPadding: {},
+        menuItemMargin: 40,
+        menuBorderWidth: 1,
+        menuTabColor: {},
+        bindCardIcon: {},
+        cardImageUrl: "",
+        couponImageUrl: "",
+        cardPadding: {},
+        cardRadius: 0,
+        couponRadius: 0,
+        cardListPadding: {},
+        cardItemMargin: 20,
+        couponTitleBgColor: "",
+        cardBtnTextStyle: {}, //我的票券包登录按钮文字背景色设置
+        cardBtnRadius: 16,
+        cardBtnPadding: {},
+        couponBtnTextStyle: {}, //优惠券包登录按钮文字背景色设置
+        couponUseBtnPadding: {},
+        couponBtnRadius: 16,
       }
     },
+    computed: {
+      menuBoxStyle(){
+        let padding = `${this.checkValue(this.menuPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          // background: this.formBgColor,
+          padding: padding,
+        })
+      },
+      menuItemBoxStyle(){
+        let padding = `${this.checkValue(this.menuBtnPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuBtnPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuBtnPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuBtnPadding.left, 20)}rpx`;
+        return this.styleObjectToString({
+          padding
+        })
+      },
+      menuItemStyle(){
+        let styleObj = {
+          color: this.menuTabColor['color'] || '#333',
+          background: this.menuTabColor['bgColor'] || '#fff',
+          fontSize: this.menuTabColor['fontSize'] || '30rpx',
+          fontWeight: this.menuTabColor['fontWeight'] || 'normal',
+          borderWidth: this.menuBorderWidth + 'px',
+        }
+
+        return this.styleObjectToString(styleObj)
+      },
+      menuItemActiveStyle(){
+        let defaultTextColor = '#ff5a39';
+        let styleActiveObj = {
+          color: this.menuTabColor['actColor'] || defaultTextColor,
+          background: this.menuTabColor['actBgColor'] || '#fff',
+          fontSize: this.menuTabColor['actFontSize'] || '30rpx',
+          fontWeight: this.menuTabColor['actFontWeight'] || 'normal',
+          borderBottom: `${this.menuBorderWidth}px solid ${this.menuTabColor['actColor'] || defaultTextColor}`
+        }
+        return this.styleObjectToString(styleActiveObj)
+      },
+      bindCardBtnPadding(){
+        let padding = `${this.checkValue(this.cardBtnPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardBtnPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardBtnPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardBtnPadding.left, 20)}rpx`;
+        return padding;
+      },
+      bindCardBtnStyle(){
+        let styleObj = {
+          color: this.cardBtnTextStyle['color'] || '#333',
+          background: this.cardBtnTextStyle['bgColor'] || '#fff',
+          fontSize: this.cardBtnTextStyle['fontSize'] || '30rpx',
+          fontWeight: this.cardBtnTextStyle['fontWeight'] || 'normal',
+        }
+        return this.styleObjectToString(styleObj)
+      },
+      bindCardActiveStyle(){
+        let defaultTextColor = '#ff5a39';
+        let styleActiveObj = {
+          color: this.cardBtnTextStyle['actColor'] || defaultTextColor,
+          background: this.cardBtnTextStyle['actBgColor'] || '#fff',
+          fontSize: this.cardBtnTextStyle['actFontSize'] || '30rpx',
+          fontWeight: this.cardBtnTextStyle['actFontWeight'] || 'normal',
+        }
+        return this.styleObjectToString(styleActiveObj)
+      },
+      couponBtnPadding(){
+        let padding = `${this.checkValue(this.couponUseBtnPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.left, 20)}rpx`;
+        return padding;
+      },
+      couponBtnStyle(){
+        let styleObj = {
+          color: this.couponBtnTextStyle['color'] || '#333',
+          background: this.couponBtnTextStyle['bgColor'] || '#fff',
+          fontSize: this.couponBtnTextStyle['fontSize'] || '30rpx',
+          fontWeight: this.couponBtnTextStyle['fontWeight'] || 'normal',
+        }
+        return this.styleObjectToString(styleObj)
+      },
+      getCardBgImage(){
+        let bg = '';
+        if(this.$xdUniHelper.checkVarType(this.cardImageUrl) === 'object'
+          || this.$xdUniHelper.checkVarType(this.cardImageUrl) === 'array'
+        ) {
+          if(!this.$xdUniHelper.isEmpty(this.cardImageUrl)) {
+            return getServiceUrl(this.cardImageUrl.url)
+          }
+        }
+        return bg
+      },
+      cardItemBoxStyle(){
+        let image = {};
+        if(this.cardImageUrl) image = {
+          backgroundImage: `url(${this.getCardBgImage})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+        }
+        let padding = `${this.checkValue(this.cardPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardPadding.left, 20)}rpx`;
+        image['padding'] = padding;
+        image['borderRadius'] = this.cardRadius + 'rpx';
+        return this.styleObjectToString(image)
+      },
+      listBoxStyle(){
+        let padding = `${this.checkValue(this.cardListPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardListPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardListPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardListPadding.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          padding: padding,
+        })
+      },
+      getCouponBgImage(){
+        let bg = '';
+        if(this.$xdUniHelper.checkVarType(this.couponImageUrl) === 'object'
+          || this.$xdUniHelper.checkVarType(this.couponImageUrl) === 'array'
+        ) {
+          if(!this.$xdUniHelper.isEmpty(this.couponImageUrl)) {
+            return getServiceUrl(this.couponImageUrl.url)
+          }
+        }
+        return bg
+      },
+      couponRightItemBoxStyle(){
+        let image = {};
+        if(this.cardImageUrl) image = {
+          backgroundImage: `url(${this.getCouponBgImage})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+        }
+        return this.styleObjectToString(image)
+      },
+      couponItemBoxStyle(){
+        return this.styleObjectToString({
+          borderRadius: this.couponRadius + 'rpx',
+        })
+      },
+    },
     watch: {
       container(value, oldValue) {
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
@@ -48,31 +376,73 @@
     },
     created() {
       this.init(this.container);
-
+      this.isPreview = this.$configProject.isPreview;
+      this.noticeBackgroundColor = Color(this.warningColor).alpha(0.2).toString();
       //todo
     },
     methods: {
       onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
+        this.getContent();
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
-      init(container) {
+      init(value) {
+        this.previewCurrent = getContainerPropsValue(value, "content.previewCurrent", 'card');
+        this.cardBindPath = getContainerPropsValue(value, "content.cardBindPath", {value: ""}).value;
+        this.menuPadding = getContainerPropsValue(value, "content.menuPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.menuBtnPadding = getContainerPropsValue(value, "content.menuBtnPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.menuItemMargin = getContainerPropsValue(value, "content.menuItemMargin", 40);
+        this.menuTabColor = getContainerPropsValue(value, "content.menuTabColor", {});
+        this.menuBorderWidth = getContainerPropsValue(value, "content.menuBorderWidth", 1);
+        this.bindCardIcon = getContainerPropsValue(value, "content.bindCardIcon", {});
+        this.cardImageUrl = getContainerPropsValue(value, "content.cardImageUrl", "");
+        this.couponImageUrl = getContainerPropsValue(value, "content.couponImageUrl", "");
+        this.cardPadding = getContainerPropsValue(value, "content.cardPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.cardRadius = getContainerPropsValue(value, "content.cardRadius", 16);
+        this.couponRadius = getContainerPropsValue(value, "content.couponRadius", 16);
+        this.cardListPadding = getContainerPropsValue(value, "content.cardListPadding", {});
+        this.cardItemMargin = getContainerPropsValue(value, "content.cardItemMargin", 20);
+        this.couponTitleBgColor = getContainerPropsValue(value, "content.couponTitleBgColor", {});
+        this.cardBtnTextStyle = getContainerPropsValue(value, "content.cardBtnTextStyle", {});
+        this.cardBtnRadius = getContainerPropsValue(value, "content.cardBtnRadius", 16);
+        this.cardBtnPadding = getContainerPropsValue(value, "content.cardBtnPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.couponBtnTextStyle = getContainerPropsValue(value, "content.couponBtnTextStyle", {});
+        this.couponUseBtnPadding = getContainerPropsValue(value, "content.couponUseBtnPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.couponBtnRadius = getContainerPropsValue(value, "content.couponBtnRadius", 16);
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+        console.log(this.couponTitleBgColor, 'couponTitleBgColor')
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        if(this.$configProject.isPreview){
+          this.menuType = this.previewCurrent;
+        }
+      },
+      toBindCard(){
+        this.$xdUniHelper.navigateTo({
+          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;
+            }
+          })
+          .catch((error) => {
+            console.error(error);
+          });
       },
       onJfbScroll(options) {
         console.log('event.onJfbScroll', options)
@@ -105,7 +475,202 @@
 
   .jfb-base-tfk-card-login {
     &__body{
+      .menu_wrap{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #FFFFFF;
+        .menu_list{
+          display: flex;
+          align-items: center;
+          .menu_item_inner{
+            border-bottom: 1px solid transparent;
+          }
+        }
+      }
+      &-notice {
+        width: 100%;
+        margin-top: unit(30, rpx);
+        height: unit(80, rpx);
+        position: relative;
+        &-in {
+          position: absolute;
+          left: unit(-30, rpx);
+          top: unit(0, rpx);
+          right: unit(-30, rpx);
+          bottom: 0;
+          display: flex;
+          padding: 0 unit(30, rpx);
+          overflow: hidden;
+          align-items: center;
+        }
+
+      }
+      .card_list_wrap{
+        padding: 0 20rpx;
+        .bind_list{
+          &.skeleton-wrap{
+            .bind_item{
+              .bind_point{
+                .skeleton-item(120rpx, 40rpx);
+              }
+              .bind_deduct{
+                .skeleton-item(350rpx, 48rpx);
+                padding: 0;
+              }
+              .bind_number{
+                .skeleton-item(250rpx, 28rpx);
+              }
+              .bind_time{
+                .skeleton-item(180rpx, 24rpx);
+              }
+              .bind_type{
+                .skeleton-item(150rpx, 66rpx);
+              }
+              .bind_btn{
+                .skeleton-item(180rpx, 64rpx);
+                padding: 0;
+              }
+            }
+          }
+          .bind_item{
+            padding: 32rpx;
+            background: #fff;
+            border-radius: 16rpx;
+            border: 1px solid #eeeeee;
+            margin: var(--card-list-margin) 0;
+            position: relative;
+            .bind_point{
+              color: #000;
+              font-size: 48rpx;
+            }
+            .bind_deduct{
+              font-size: 28rpx;
+              color: #999;
+              background: rgba(51, 51, 51, 0.05);
+              display: inline-block;
+              padding: 4rpx 20rpx;
+              margin-top: 12rpx;
+            }
+            .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;
+              text-align: center;
+              font-size: 24rpx;
+              font-weight: 400;
+            }
+            .bind_btn{
+              font-size: 28rpx;
+              color: #999;
+              position: absolute;
+              bottom: 32rpx;
+              right: 32rpx;
+              background: #ddd;
+              padding: 16rpx 60rpx;
+              border-radius: 12rpx;
+            }
+          }
+        }
+        .coupon_list{
+          .coupon_item{
+            display: flex;
+            margin: 20rpx 0;
+            border-radius: 16rpx;
+            background: #FFFFFF;
+            overflow: hidden;
+            .coupon_left{
+              color: #FFFFFF;
+              width: 170rpx;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              background: linear-gradient(180deg, #FFA852 0%, #FF5733 100%);
 
+              ._point{
+                font-size: 48rpx;
+              }
+              ._rule{
+                font-size: 24rpx;
+              }
+            }
+            .coupon_right{
+              flex: 1;
+              width: 530rpx;
+              .cont_top{
+                background: rgba(255, 87, 51, 0.1);
+                padding: 8rpx 40rpx;
+                font-size: 24rpx;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+              .cont_main{
+                position: relative;
+                padding: 28rpx 20rpx 28rpx 40rpx;
+                .cou_number{
+                  font-size: 32rpx;
+                  font-weight: bold;
+                }
+                .cou_time{
+                  font-size: 28rpx;
+                  margin: 16rpx 0;
+                }
+                .cou_point{
+                  font-size: 28rpx;
+                }
+                .cou_btn{
+                  position: absolute;
+                  padding: 10rpx 30rpx;
+                  background-color: #ddd;
+                  border-radius: 12rpx;
+                  right: 20rpx;
+                  bottom: 20rpx;
+                }
+              }
+              .cont_bottom{
+                background: #EEEEEE;
+                .switch_rule{
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  padding: 12rpx 40rpx;
+                }
+                .expand_rule{
+                  padding: 12rpx 40rpx;
+                  font-size: 20rpx;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  background-color: #F5F5F5;
+                }
+              }
+            }
+          }
+        }
+        .no_more_card{
+          text-align: center;
+          padding: 20rpx 0;
+          color: #CCCCCC;
+          font-size: 28rpx;
+        }
+      }
     }
   }
 </style>