jufubao-base 1.0.203 → 1.0.204

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -170,116 +170,132 @@
             v-if="tabIndex === 1 && (cardList && cardList.length > 0)"
             class="jfb-base-card-entry__body-card"
           >
-            <view
-              v-for="(item,index) in cardList"
-              :data-index="item.card_number"
-              :data-idx="index"
-              :data-top="item.top"
-              class="card-list"
-              :key="item.card_number"
-              @click="toDetail(item)"
-              v-if="setCardItemShow(item,index)"
-              :style="{
-                background: item['theme']['color'],
-                backgroundSize: '100%',
-                height: subTabIndex !== 3 ? item.height + 'px' : '300rpx'
-              }"
-            >
-              <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
-                <view class="card-list__title">
-                  <view>
-                    <view>{{item['card_type_name']}}</view>
-                    <view v-if="item['is_login'] === 'Y'"><text></text><text>已登录</text></view>
-                  </view>
-                </view>
-                <view class="card-list__content">
-                  <view>
-                    <text>券号：</text>
-                    <text>{{item.card_number}}{{showIndex?(':' + index):''}}</text>
-                  </view>
-                  <view @click.stop="toDetail(item)" v-if="subTabIndex !== 3&&isShowCode === 'Y'&&!force">
+            <template v-if="cardType==='default'">
+              <view
+                v-for="(item,index) in cardList"
+                :data-index="item.card_number"
+                :data-idx="index"
+                :data-top="item.top"
+                class="card-list"
+                :key="item.card_number"
+                @click="toDetail(item)"
+                v-if="setCardItemShow(item,index)"
+                :style="{
+                  background: item['theme']['color'],
+                  backgroundSize: '100%',
+                  height: subTabIndex !== 3 ? item.height + 'px' : '300rpx'
+                }"
+              >
+                <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
+                  <view class="card-list__title">
                     <view>
-                      <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
+                      <view>{{item['card_type_name']}}</view>
+                      <view v-if="item['is_login'] === 'Y'"><text></text><text>已登录</text></view>
                     </view>
-                    <view>点击查看</view>
                   </view>
-                </view>
-                <view class="card-list__date">
-                  <text>有效期：</text>
-                  <text>{{item.end_time}}</text>
-                </view>
-                <view class="card-list__yue">
-                  <text>余额：</text>
-                  <text>{{item.card_point}} {{ item.unit }}</text>
-                </view>
-                <view class="card-list__other" v-if="item.other_card_point && item.card_point_type === 2">
-                  <view><text>购买其他物品可抵：</text><text>{{item.other_card_point}} {{ item.unit }}</text></view>
-                </view>
-                <template v-if="subTabIndex === 1">
-                  <view class="card-list__entry" v-if="item.is_login==='N'&&force">
-                    <view
-                      @click.stop="handleBindLogin(item,item['entries'][0])"
-                      :style="{
-                        background: '#fff',
-                        color: item['theme']['color']}"
-                    >
-                      登录
+                  <view class="card-list__content">
+                    <view>
+                      <text>券号：</text>
+                      <text>{{item.card_number}}{{showIndex?(':' + index):''}}</text>
+                    </view>
+                    <view @click.stop="toDetail(item)" v-if="subTabIndex !== 3&&isShowCode === 'Y'&&!force">
+                      <view>
+                        <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
+                      </view>
+                      <view>点击查看</view>
                     </view>
                   </view>
-                  <view class="card-list__entry" v-if="item.entries.length === 1&&!force">
-                    <view
-                      @click.stop="handleBindLogin(item,item['entries'][0])"
-                      :style="{color: item['theme']['color']}"
-                    >进入{{item['entries'][0]['entry_name']}}</view>
+                  <view class="card-list__date">
+                    <text>有效期：</text>
+                    <text>{{item.end_time}}</text>
+                  </view>
+                  <view class="card-list__yue">
+                    <text>余额：</text>
+                    <text>{{item.card_point}} {{ item.unit }}</text>
                   </view>
-                  <view class="card-list__nodata" v-if="item.entries.length === 0&&!force">暂无支持服务列表</view>
-                  <view class="card-list__entrys" v-if="item.entries.length > 1&&!force" @click.stop>
-                    <view class="card-list__entrys-title">
-                      <view>可兑换权益</view>
-                      <view @click.stop="toDetail(item, false)">
-                        <text>查看详情</text>
-                        <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                  <view class="card-list__other" v-if="item.other_card_point && item.card_point_type === 2">
+                    <view><text>购买其他物品可抵：</text><text>{{item.other_card_point}} {{ item.unit }}</text></view>
+                  </view>
+                  <template v-if="subTabIndex === 1">
+                    <view class="card-list__entry" v-if="item.is_login==='N'&&force">
+                      <view
+                        @click.stop="handleBindLogin(item,item['entries'][0])"
+                        :style="{
+                          background: '#fff',
+                          color: item['theme']['color']}"
+                      >
+                        登录
                       </view>
                     </view>
-                    <view class="card-list__entrys-list">
-                      <scroll-view scroll-x class="card-list__entrys-scroll">
-                        <view class="card-list__entrys-item">
-                          <view
-                            v-for="(entry,idx) in item.entries"
-                            :key="idx"
-                            @click.stop="handleBindLogin(item, entry)"
-                          >
-                            <view><image :src="entry.image_url"></image></view>
-                            <view>{{entry|cutstr}}</view>
-                            <view>
-                              <text>去兑换</text>
-                              <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                    <view class="card-list__entry" v-if="item.entries.length === 1&&!force">
+                      <view
+                        @click.stop="handleBindLogin(item,item['entries'][0])"
+                        :style="{color: item['theme']['color']}"
+                      >进入{{item['entries'][0]['entry_name']}}</view>
+                    </view>
+                    <view class="card-list__nodata" v-if="item.entries.length === 0&&!force">暂无支持服务列表</view>
+                    <view class="card-list__entrys" v-if="item.entries.length > 1&&!force" @click.stop>
+                      <view class="card-list__entrys-title">
+                        <view>可兑换权益</view>
+                        <view @click.stop="toDetail(item, false)">
+                          <text>查看详情</text>
+                          <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                        </view>
+                      </view>
+                      <view class="card-list__entrys-list">
+                        <scroll-view scroll-x class="card-list__entrys-scroll">
+                          <view class="card-list__entrys-item">
+                            <view
+                              v-for="(entry,idx) in item.entries"
+                              :key="idx"
+                              @click.stop="handleBindLogin(item, entry)"
+                            >
+                              <view><image :src="entry.image_url"></image></view>
+                              <view>{{entry|cutstr}}</view>
+                              <view>
+                                <text>去兑换</text>
+                                <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                              </view>
                             </view>
                           </view>
-                        </view>
-                      </scroll-view>
+                        </scroll-view>
+                      </view>
                     </view>
+                  </template>
+                  <view class="card-list__entry" v-else-if="subTabIndex===2">
+                    <view
+                      @click.stop="handleBindLogin(item,item['entries'][0])"
+                      :style="{color: item['theme']['color']}"
+                    >票券转换</view>
                   </view>
-                </template>
-                <view class="card-list__entry" v-else-if="subTabIndex===2">
-                  <view
-                    @click.stop="handleBindLogin(item,item['entries'][0])"
-                    :style="{color: item['theme']['color']}"
-                  >票券转换</view>
                 </view>
               </view>
-            </view>
-            <view
-              class="card-content-empty card-list"
-              :data-index="item.card_number"
-              :data-idx="index"
-              :data-top="item.top"
-              v-else
-              :style="{
-                height: item.height + 'px',
-                backgroundImage: 'url('+ (tabIndex===2 || item.entries.length <= 1 ? cardItem: cardItemEntry) +')'
-              }"
-            ></view>
+              <view
+                class="card-content-empty card-list"
+                :data-index="item.card_number"
+                :data-idx="index"
+                :data-top="item.top"
+                v-else
+                :style="{
+                  height: item.height + 'px',
+                  backgroundImage: 'url('+ (tabIndex===2 || item.entries.length <= 1 ? cardItem: cardItemEntry) +')'
+                }"
+              ></view>
+            </template>
+            <template v-if="cardType==='style2'">
+
+              <view v-for="(item,index) in cardList" :key="item.card_number">
+                <xd-card-new
+                  :item="item"
+                  :tabIndex="subTabIndex"
+                  :cardBgColor="cardBgColor"
+                  :cardFontColor="cardFontColor"
+                  :mainColor="mainColor"
+                  @onLogin="handleBindLogin(item,item['entries'][0])"
+                  @onClick="toDetail(item)"
+                ></xd-card-new>
+              </view>
+            </template>
           </view>
           <view v-if="tabIndex===2&&(couponList&&couponList.length)">
             <view v-if="couponList.length" class="coupon_list">
@@ -425,6 +441,7 @@
 import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
 import XdButton from "@/components/XdButton/XdButton";
 import XdCardV2 from "@/components/XdCardV2/XdCardV2";
+import XdCardNew from "./XdCardNew.vue"
 import { jfbRootExec } from "@/utils/xd.event";
 import JfbBaseCardEntryMixin from "./JfbBaseCardEntryMixin";
 import componentsMixins from "@/mixins/componentsMixins";
@@ -447,7 +464,8 @@ export default {
     XdButton,
     XdNoticeBar,
     XdCardV2,
-    CusCouponItem
+    CusCouponItem,
+    XdCardNew,
   },
   mixins: [componentsMixins, extsMixins, JfbBaseCardEntryMixin, colorCardMixins, cardListMixins],
   computed: {
@@ -517,6 +535,7 @@ export default {
       showCardList: false,
       showIndex:false,
       isQrCode: false,
+      cardType: 'default',
 
       //活动
       dialogEvent: false,
@@ -557,7 +576,10 @@ export default {
           card_use_rule: '满50减1',
           is_transfering: 'N'
         },
-      ]
+      ],
+
+      cardBgColor: "",
+      cardFontColor: "",
     };
   },
   created() {
@@ -596,6 +618,7 @@ export default {
       this.isShowCode = getContainerPropsValue(container, "content.isShowCode", "Y");
       this.isShowCoupon = getContainerPropsValue(container, "content.isShowCoupon", "N");
       this.bindCard = getContainerPropsValue(container,"content.bindCard","1");
+      this.cardType = getContainerPropsValue(container,"content.cardType","default");
       //'wechat_mini_program|default'
       this.entryGroupId = getContainerPropsValue(container,"content.entryGroupId","default");
       this.couponBtnRadius = getContainerPropsValue(container, "content.couponBtnRadius", 16);
@@ -610,6 +633,8 @@ export default {
       this.couponRadius = getContainerPropsValue(container, "content.couponRadius", 16);
       this.couponLeftBgColor = getContainerPropsValue(container, "content.couponLeftBgColor", "linear-gradient(180deg, #FFA852 0%, #FF5733 100%)");
       this.couponImageUrl = getContainerPropsValue(container, "content.couponImageUrl", "");
+      this.cardBgColor = getContainerPropsValue(container, "content.cardBgColor", "");
+      this.cardFontColor = getContainerPropsValue(container, "content.cardFontColor", "");
       if(this.isPreview) {
         this.tabIndex = this.isShowCoupon==='Y'?2:1;
       }
@@ -714,6 +739,7 @@ export default {
         this.$xdShowLoading({});
         //转换卡跳转
         if(this.subTabIndex===2){
+          this.$xdHideLoading();
           this.$xdUniHelper.navigateTo({
             url: `${this.changeUrl}?card_number=${item["card_number"]}`
           }, false);

package/src/components/JfbBaseCardEntry/Mock.js

@@ -58,6 +58,7 @@ module.exports = {
         "other_card_point": 0,
         "is_exchange": "N",
         "is_transfering":"N",
+        "is_login":'Y',
         "card_point_type": 1,
         "business_codes": ["cake"]
       }, {

package/src/components/JfbBaseCardEntry/XdCardNew.vue

@@ -0,0 +1,135 @@
+<!-- #小象风格 -->
+<template>
+  <view class="xd-card-new" :style="{
+    backgroundColor: cardBgColor,
+    color: cardFontColor,
+    '--alpha-color': alphaColor
+  }" @click="onClick">
+    <view class="card-top">
+      <view class="card_name">{{item.card_type_name}}</view>
+      <view class="card_number">ID：{{ item.card_number }}</view>
+    </view>
+    <view class="card-center">
+      <view><text class="_b">{{item.card_point}}</text>{{item.unit}}</view>
+      <view>
+        <xd-button type="primary" size="small"
+          :class="'is_login_' + item['is_login']"
+          :style="{
+            backgroundColor: item['is_login'] === 'Y' ?  alphaColor: mainColor,
+          }"
+          @click.stop="doLogin"
+        >
+          {{ tabIndex === 1 ? (item['is_login'] === 'Y' ? "已登录" : "登录") : "票券转换"}}
+        </xd-button>
+      </view>
+    </view>
+    <view class="card-bottom">
+      <view>有效期：{{item.end_time}}</view>
+      <view class="see_scope">查看使用范围</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton.vue"
+  import Color from "color"
+  export default {
+    // #ifdef MP-WEIXIN
+    options: { styleIsolation: 'shared' },
+    // #endif
+    components: {
+      XdButton,
+    },
+    props: {
+      item: {
+        type: Object,
+        default () {
+          return {}
+        }
+      },
+      cardBgColor: {
+        type: String,
+      },
+      cardFontColor: {
+        type: String,
+      },
+      loggedBgColor: {
+        type: String,
+      },
+      mainColor: {
+        type: String,
+      },
+      tabIndex: {
+        type: Number,
+      },
+    },
+    data(){
+      return {
+        alphaColor: "",
+      }
+    },
+    created(){
+      this.alphaColor = Color(this.mainColor).alpha(0.5).toString();
+    },
+    methods: {
+      doLogin(){
+        this.$emit('onLogin', this.item)
+      },
+      onClick(){
+        this.$emit('onClick')
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .xd-card-new{
+    background-color: #EEE;
+    margin-top: 20rpx;
+    border-radius: 10rpx;
+    padding: 20rpx;
+    .card-top{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 26rpx;
+      .card_name{
+        font-size: 24rpx;
+        font-weight: 400;
+      }
+      .card_number{
+        font-weight: 28rpx;
+        font-weight: 500;
+      }
+    }
+    .card-center{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 40rpx 0 40rpx 0;
+      font-size: 28rpx;
+      font-weight: 400;
+
+      ::v-deep .is_login_Y{
+        .xd-button{
+          background-color: var(--alpha-color) !important;
+        }
+      }
+      ._b{
+        font-size: 48rpx;
+        margin-right: 4rpx;
+        font-weight: 700;
+      }
+    }
+    .card-bottom{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 24rpx;
+      font-weight: 500;
+      .see_scope{
+        font-weight: 400;
+      }
+    }
+  }
+</style>