jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -0,0 +1,1471 @@
+<template>
+  <view
+    class="jfb-base-card-entry"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-card-entry__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-card-entry__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view :style="{paddingTop: bindCard!=='1'?'35rpx':'55rpx'}" class="jfb-base-card-entry__body">
+      <view v-if="bindCard==='1'" class="jfb-base-card-entry__body-cut">
+        <template v-if="isQrCode">
+          <view
+            class="jfb-base-card-entry__body-cut-item"
+            @click="handleScan"
+            :style="{
+              background: cutIndex === 1 ? mainColor : '#fff',
+              borderColor: mainColor,
+              color: cutIndex === 1 ? '#fff' : mainColor,
+            }"
+          >
+            <view>扫码绑定</view>
+            <xd-font-icon
+              :style="{marginLeft: '20rpx'}"
+              size="45"
+              icon="iconsaoma"
+            ></xd-font-icon>
+
+          </view>
+          <view
+            class="jfb-base-card-entry__body-cut-item"
+            @click="handleToLink(bindUrl)"
+            :style="{
+              background: cutIndex === 2 ? mainColor : '#fff',
+              borderColor: mainColor,
+              color: cutIndex === 2 ? '#fff' : mainColor,
+            }"
+          >
+            <view>密码绑定</view>
+            <xd-font-icon
+              :style="{marginLeft: '20rpx'}"
+              size="45"
+              icon="iconyuechi"
+            ></xd-font-icon>
+
+          </view>
+        </template>
+        <template v-else>
+          <view
+            class="jfb-base-card-entry__body-cut-item one"
+            @click="handleToLink(bindUrl)"
+            :style="{
+              background: cutIndex === 2 ? mainColor : '#fff',
+              borderColor: mainColor,
+              color: cutIndex === 2 ? '#fff' : mainColor,
+            }"
+          >
+            <xd-font-icon size="40" icon="iconyuechi"></xd-font-icon>
+            <view>券号密码绑定</view>
+          </view>
+        </template>
+      </view>
+      <view class="jfb-base-card-entry__body-line" v-if="!notice"></view>
+      <view :style="{marginTop: bindCard!=='1'?'0rpx':'30rpx'}" class="jfb-base-card-entry__body-notice" v-if="notice">
+        <view
+          class="jfb-base-card-entry__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-card-entry__body-notice" v-if="noticeStatus && isPreview && notice === ''">
+        <view
+          class="jfb-base-card-entry__body-notice-in"
+          :style="{
+          background: noticeBackgroundColor,
+          textAlign: 'center',
+          color: dangerColor,
+          fontSize: 26 + 'rpx',
+        }"
+        >该组件未配置数据，因此改模块在正式环境将不显示</view>
+      </view>
+      <view class="jfb-base-card-entry__body-tab">
+        <view
+          @click="tabIndex = 1"
+          :style="{
+            color: tabIndex === 1 ? '#fff' : '#B8B7BE',
+            background: tabIndex === 1 ? mainColor : '#fff',
+          }"
+        >已绑定票券</view>
+        <view
+          @click="tabIndex = 2"
+          :style="{
+            color: tabIndex === 2 ? '#fff' : '#B8B7BE',
+            background: tabIndex === 2 ? mainColor : '#fff',
+          }"
+        >优惠券</view>
+      </view>
+      <view class="jfb-base-card-entry__body-sub-tab" v-if="tabIndex === 1">
+        <view :style="{
+          color: subTabIndex === 1 ? mainColor : '#fff',
+          background: subTabIndex === 1 ? noticeBackgroundColor : '#DDDDDD',
+        }" @click="subTabIndex=1" class="jfb-base-card-entry__body-sub-tab-item">可用票券</view>
+        <view v-if="isChange === 'Y'" :style="{
+          color: subTabIndex === 2 ? mainColor : '#fff',
+          background: subTabIndex === 2 ? noticeBackgroundColor : '#DDDDDD',
+        }" @click="subTabIndex=2" class="jfb-base-card-entry__body-sub-tab-item">可转票券</view>
+        <view v-if="isTransfering === 'Y'" :style="{
+          color: subTabIndex === 3 ? mainColor : '#fff',
+          background: subTabIndex === 3 ? noticeBackgroundColor : '#DDDDDD',
+        }" @click="subTabIndex=3" class="jfb-base-card-entry__body-sub-tab-item">赠送中</view>
+      </view>
+      <view
+        class="jfb-base-card-entry__body-tips"
+        :style="{ color: warningColor }"
+        v-if="subTabIndex === 2&&tabIndex === 1"
+      >* 目前仅支持电影票兑换券进行转换</view>
+      <view class="card-content">
+        <view v-if="loadingCardList" class="jfb-base-card-entry__body-card skeleton-card">
+          <view v-for="i in 3" class="card-list" :key="i">
+            <view class="card-list-warp">
+              <view class="card-list__title"><view> </view></view>
+              <view class="card-list__content"> </view>
+              <view class="card-list__date"> </view>
+              <view class="card-list__yue"> </view>
+              <view class="card-list__entrys">
+                <view class="card-list__entrys-title">
+                  <view></view>
+                  <view></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="ii in 5" :key="ii">
+                        <view></view>
+                        <view></view>
+                        <view></view>
+                      </view>
+                    </view>
+                  </scroll-view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <template v-else>
+          <view
+            v-if="tabIndex === 1 && (cardList && cardList.length > 0)"
+            class="jfb-base-card-entry__body-card"
+          >
+            <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>
+                      <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">
+                      <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__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>
+                    </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>
+                    <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>
+                        </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>
+                </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>
+            </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">
+            <CusCouponItem v-for="(item, i) in couponList" :key="i"
+              style="margin-bottom:20rpx"
+              :couponRadius="couponRadius"
+              :couponImageUrl="couponImageUrl"
+              :couponTitleBgColor="couponTitleBgColor"
+              :couponUseBtnPadding="couponUseBtnPadding"
+              :couponBtnRadius="couponBtnRadius"
+              :couponBtnTextStyle="couponBtnTextStyle"
+              :couponLeftBgColor="couponLeftBgColor"
+              :item="item"
+              :mainColor="mainColor"
+              @useCoupon="handleBindLogin(item,item['entries'][0])"
+              @toDetail="toDetail(item)"
+            ></CusCouponItem>
+          </view>
+          <view v-else>
+            暂无数据
+          </view>
+          </view>
+          <view v-else-if="cardList !== null && cardList.length === 0">
+            <view class="jfb-base-card-entry__body-empty">
+              <view class="jfb-base-card-entry__body-empty-wrap">
+                <image :src="emptyBg"></image>
+                暂无票券
+              </view>
+            </view>
+          </view>
+        </template>
+
+        <view
+          v-if="showDisabled==='Y'"
+          @click="handleToDisabled"
+          class="jfb-base-card-entry__body-disabled"
+        >已失效票券>>></view>
+      </view>
+      <view class="jfb-base-card-entry__body-dialog" v-if="dialogEvent">
+        <view class="jfb-base-card-entry__body-dialog-content">
+          <image
+            class="jfb-base-card-entry__body-dialog-content-img"
+            alt=""
+            :src="popup"
+          ></image>
+          <xd-font-icon
+            icon="icondanchuangguanbi_xian"
+            width="52"
+            height="52"
+            size="26"
+            color="#fff"
+            class="jfb-base-card-entry-entry__body-dialog-content-close"
+            @click="dialogEvent = false"
+          ></xd-font-icon>
+        </view>
+      </view>
+      <view class="computed-height" >
+        <view
+          v-for="(item,index) in cardComputedList"
+          :data-card="item.card_number"
+          class="card-list computed-box"
+          :key="item.card_number"
+          :style="{
+            background: item['theme']['color'],
+            backgroundSize: '100%'
+          }"
+        >
+          <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
+            <view class="card-list__title"><view>{{item['card_type_name']}}</view></view>
+            <div class="card-list__content">
+              <view>
+                <text>券号：</text>
+                <text>{{item.card_number}}</text>
+              </view>
+              <view @click.stop="toDetail(item)" v-if="0">
+                <view>
+                  <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
+                </view>
+                <view>点击查看</view>
+              </view>
+            </div>
+            <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.entries.length === 1">
+                <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">暂无支持服务列表</view>
+              <view class="card-list__entrys" v-if="item.entries.length > 1">
+                <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 v-if="!force" 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>
+                  </scroll-view>
+                </view>
+              </view>
+            </template>
+            <view class="card-list__entry" v-else>
+              <view
+                @click.stop="handleBindLogin(item,item['entries'][0])"
+                :style="{color: item['theme']['color']}"
+              >票券转换</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+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";
+import extsMixins from "@/mixins/extsMixins";
+import colorCardMixins from "@/mixins/colorCardMixins";
+import cardListMixins from "@/mixins/cardListMixins";
+import { mapState, mapActions } from "vuex";
+import { getContainerPropsValue, isWechat,isQrCode } from "@/utils/xd.base";
+import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
+import { Base64 } from "js-base64";
+import CusCouponItem from "@/components/CusCouponItem/CusCouponItem";
+import getServiceUrl from "@/common/getServiceUrl";
+import {parsePath} from "@/utils/linkUrl";
+const Color = require("color");
+
+export default {
+  name: "JfbBaseCardEntry",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdNoticeBar,
+    XdCardV2,
+    CusCouponItem,
+    XdCardNew,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseCardEntryMixin, colorCardMixins, cardListMixins],
+  computed: {
+    ...mapState({
+      jwxSDK: (state) => state.jwxSDK,
+      jfbAuthorize: (state) => state.jfbAuthorize,
+    }),
+    emptyBg() {
+        return this.getNoData();
+    },
+  },
+  filters:{
+    cutstr(val){
+      if(typeof val.entry_name === 'string') return val.entry_name.slice(0,4);
+      return ''
+    }
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+    tabIndex(){
+      this.clearDefault();
+      this.cardPageNum = 0;
+      this.onJfbLoad(this.options);
+    },
+    subTabIndex() {
+      this.clearDefault();
+      this.cardPageNum = 0;
+      this.onJfbLoad(this.options);
+    }
+  },
+  data() {
+    return {
+      options:{},
+      inCallbackUrlOrg:'',//是否带有回调地址
+      isChange:'N',
+      isTransfering:'N',
+
+      //提示文案
+      noticeBackgroundColor: "",
+      notice: "",
+      isPreview: false,
+      noticeStatus: false,
+      loadingCardList: true,
+      entryGroupId: '',//加载入口数据组别
+
+      cutIndex: 1,
+      tabIndex: 1,
+      isBack: null, //是否使用返回键
+      inCallback: null, //内部跳转地址
+      isShowCode: 'Y',
+      bindCard: '1',
+
+
+      //页面跳转地址
+      login_name:'',//登录文案
+      changeUrl: "",
+      bindUrl: "",
+      detailUrl: "",
+      confirmUrl: "",
+      //allEntryPath: "", //综合福利入口页
+      disabledUrl: "",
+      //cardLayout: "1",  //票券布局
+      showDisabled: 'Y',
+      showCardList: false,
+      showIndex:false,
+      isQrCode: false,
+      cardType: 'default',
+
+      //活动
+      dialogEvent: false,
+      popup: "https://img.zcool.cn/community/01784158abe781a801219c77e981ee.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
+      subTabIndex: 1,
+      force: false, //是否强制卡登录
+      give_url: '',
+      couponList: [],
+      isShowCoupon: 'N',
+      couponBtnRadius: 16,
+      couponLeftBgColor: "",
+      couponTitleBgColor: "",
+      couponBtnTextStyle: {}, //优惠券包登录按钮文字背景色设置
+      couponUseBtnPadding: {},
+      couponImageUrl: "",
+      testCouponList: [
+         {
+          card_number: '10001000001168',
+          card_point: 5000,
+          card_type: '0',
+          card_type_name: '满50减50',
+          unit: '点',
+          end_time: '2024-11-23',
+          is_valid: 'Y',
+          main_business_code_name: '',
+          other_card_point: 0,
+          is_exchange: 'N',
+          card_point_type: 1,
+          business_codes: [
+            'cake',
+            'movie',
+            'video',
+            'market',
+            'book'
+          ],
+          is_login: 'N',
+          consume_type: '2',
+          card_use_rule: '满50减1',
+          is_transfering: 'N'
+        },
+      ],
+
+      cardBgColor: "",
+      cardFontColor: "",
+    };
+  },
+  created() {
+    this.init(this.container);
+    this.noticeBackgroundColor = Color(this.warningColor).alpha(0.2).toString();
+    this.isPreview = this.$configProject.isPreview;
+    this.isQrCode = isQrCode(this);
+
+    //#ifdef H5
+    if (!this.$configProject.isPreview) {
+      jfbRootExec("getH5WxAuthorize", {
+        vm: this,
+        data: {site_id: "wx_pub"},
+      })
+        .then()
+        .catch(error=>{
+          this.$xdAlert({
+            content: error,
+          });
+        })
+    }
+    // #endif
+
+  },
+  methods: {
+
+    init(container){
+      this.cardLayout = getContainerPropsValue(container,"content.cardLayout","1");
+      this.changeUrl = getContainerPropsValue(container,"content.change_url",{value: ""}).value;
+      this.disabledUrl = getContainerPropsValue(container,"content.disabled_url",{value: ""}).value;
+      this.bindUrl = getContainerPropsValue(container,"content.bind_url",{value: ""}).value;
+      this.detailUrl = getContainerPropsValue(container,"content.detail_url",{value: ""}).value;
+      this.confirmUrl = getContainerPropsValue(container,"content.confirm_url",{value: ""}).value;
+      this.give_url = getContainerPropsValue(container,"content.give_url",{value: ""}).value;
+      this.login_name = getContainerPropsValue(container, "content.login_name", "登录");
+      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);
+      this.couponUseBtnPadding = getContainerPropsValue(container, "content.couponUseBtnPadding", {top: 20, left: 20, right: 20, bottom: 20});
+      this.couponBtnTextStyle = getContainerPropsValue(container, "content.couponBtnTextStyle", {
+        color: '#fff',
+        bgColor: '#ff5722',
+        fontSize: '30rpx',
+        fontWeight: 'normal'
+      });
+      this.couponTitleBgColor = getContainerPropsValue(container, "content.couponTitleBgColor", 'rgba(255, 87, 51, 0.1)');
+      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;
+      }
+    },
+
+    handleToLink(path) {
+      if (this.$configProject['isPreview']) return
+      path = this.getUrlCallback(path)
+      this.$xdUniHelper.navigateTo({
+        url: path,
+      });
+    },
+
+    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) {
+            this.notice = res.list[0].content;
+            this.noticeStatus = true;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+
+    /**
+     * @description 扫码绑定
+     */
+    handleScan() {
+      try {
+        //#ifdef H5
+        if (this.jwxSDK !== null) {
+          this.jwxSDK.scanQRCode({
+            needResult: 1,
+            scanType: ["qrCode"],
+            success: (res) => {
+              let path = this.getUrlCallback(`${this.confirmUrl}?qrcode=${encodeURIComponent(res.resultStr)}`)
+              this.$xdUniHelper.navigateTo({
+                url:path,
+              });
+            },
+            fail: (error) => {
+              if (typeof error === 'string') error = {error: error}
+              if (window['jwxJfbSDKParams']) error = Object.assign(error, window['jwxJfbSDKParams'])
+              this.$xdLog.setARMSError(error)
+            }
+          });
+        }
+        //#endif
+        //#ifdef MP-WEIXIN
+        uni.scanCode({
+          scanType: ["qrCode"],
+          success: (res) => {
+            let path = this.getUrlCallback(`${this.confirmUrl}?qrcode=${encodeURIComponent(res.result)}`)
+            this.$xdUniHelper.navigateTo({
+              url:path,
+            });
+          },
+          fail: (error) => {
+            this.$xdLog.setARMSError(error)
+          },
+        });
+        //#endif
+      } catch (err) {
+        this.$xdLog.setARMSError(err)
+      }
+    },
+
+    handleToDisabled() {
+      this.$xdUniHelper.navigateTo({
+        url: `${this.disabledUrl}`,
+      });
+    },
+
+    checkTabStatus(res){
+      this.$xdUniHelper.cloneDeep(res.list).filter(item=>item.is_valid === 'Y').map(item=>{
+        if(item.is_transfering === 'Y') this.isTransfering = 'Y'
+        if(item.is_exchange === 'Y') this.isChange = 'Y'
+      });
+    },
+
+    /**
+     * @description 已绑定卡登录
+     * @param item
+     * @param entry
+     */
+    handleBindLogin(item , entry) {
+      //卡券登录
+      if (this.tabIndex === 1 || this.tabIndex === 2) {
+        if (item["is_valid"] !== "Y") {
+          return;
+        }
+
+        this.$xdShowLoading({});
+        //转换卡跳转
+        if(this.subTabIndex===2){
+          this.$xdHideLoading();
+          this.$xdUniHelper.navigateTo({
+            url: `${this.changeUrl}?card_number=${item["card_number"]}`
+          }, false);
+          return
+        }
+
+        jfbRootExec("loginEntryCardBind", {
+          vm: this,
+          data: { card_number: item["card_number"] },
+        })
+          .then((res) => {
+            this.$xdHideLoading();
+
+            //#ifdef MP-WEIXIN
+            if (this.jfbAuthorize !== null) {
+              this.jfbAuthorize.setCardToken(res);
+              this.handleClick(entry);
+              return
+            }
+            //#endif
+            if (this.$configProject.isPreview) {
+              console.log("handleBindLogin", "预览模式不跳转", this.inCallback);
+            }
+            else {
+              this.handleClick(entry);
+            }
+          })
+          .catch((res) => {
+            this.$xdHideLoading();
+          });
+      }
+    },
+
+
+    getCardPath(custom_redirect_data = {}){
+      //#ifdef H5
+      return null;
+      //#endif
+      //#ifdef MP-WEIXIN
+      const dir = custom_redirect_data.dir;
+      const actDir = this.projectAttr['deploy_dir'];
+      if(custom_redirect_data.appType === 'wxmp') {
+        if(dir === actDir) {
+          return {
+            cardPath:  custom_redirect_data.path,
+            cardSelf: 'wxmp',
+          };
+        }
+        else return null;
+      }
+      else if(custom_redirect_data.appType === 'h5'){
+        return {
+          cardPath: custom_redirect_data.site_url,
+          cardSelf: 'h5',
+        };
+      }
+      else return null;
+      //#endif
+    },
+
+    handleClick(entry){
+      if (this.$configProject['isPreview']) return;
+
+      //登陆成功，有回调地址返回回调地址
+      if(this.inCallbackUrlOrg) {
+        this.$xdUniHelper.redirectTo({
+          url:this.inCallback
+        }, false);
+        return;
+      }
+
+      const {dir, path, host, appType} = entry['redirect_data'];
+      let regHttp = /^(\/\/|http:\/\/|https:\/\/).+$/;
+      let regSp = /(-apiuri\/v)/;
+
+      if(!appType) entry.redirect_data.appType = 'h5';
+      let nsp = Base64.encodeURI(JSON.stringify({business_code: entry['business_code']}));
+
+      //外站配置地址
+      if(entry.redirect_type === 'URL') {
+        if(regHttp.test(entry.redirect_data['path']) || regSp.test(entry.redirect_data['path'])) {
+          let urlPath = entry.redirect_data['path'];
+          if(urlPath.indexOf('?') === -1) urlPath = `${urlPath}?x-common=${nsp}&vs=${new Date().getTime()}`;
+          else urlPath = `${urlPath}&x-common=${nsp}&vs=${new Date().getTime()}`;
+          this.$xdUniHelper.redirectTo({
+            url:urlPath
+          }, false)
+        }
+        else {
+          console.error(`配置错误：${entry.redirect_data['path']}`);
+          throw new Error(`配置错误：${entry.redirect_data['path']}`)
+        }
+        return
+      }
+
+      //站内应用处理
+      let jumpUrl = path;
+      let cardPathStr = '';
+      const {deploy_dir} = this.projectAttr;
+      if(host === this.projectAttr.host && deploy_dir !== dir){
+        jumpUrl = `//${host}/${dir}${path}`;
+        //#ifdef MP-WEIXIN
+        jumpUrl = `https:${jumpUrl}`;
+        //#endif
+      }
+
+
+      //#ifdef MP-WEIXIN
+      //获取自定义卡券登录地址(微信小程序跳转到H5平台起作用)
+      if(entry.redirect_data.appType === 'h5') {
+        const custom_redirect_data = this.$xdUniHelper.checkVarType(entry['custom_redirect_data']) === 'object'?entry['custom_redirect_data']:{};
+        const cardPathObject = this.getCardPath(custom_redirect_data);
+        if(cardPathObject !== null) {
+          const {cardPath, cardSelf} =cardPathObject
+          if(cardPath) cardPathStr = `&card-login=${encodeURIComponent(cardPath)}&cardSelf=${cardSelf}`
+        }
+      }
+      //#endif
+
+      jumpUrl = `${jumpUrl}?x-common=${nsp}&vs=${new Date().getTime()}${cardPathStr}`;
+      console.warn(`entry.path:${jumpUrl}`);
+      if(regHttp.test(jumpUrl)) this.$xdUniHelper.redirectTo({url:jumpUrl}, false)
+      else this.$xdUniHelper.navigateTo({url:jumpUrl}, false)
+    },
+
+    toDetail(item, out=true) {
+      if (this.$configProject['isPreview']) return
+      if(this.subTabIndex===3) {
+        this.$xdUniHelper.navigateTo({
+          url: `${this.give_url}?card_number=${item["card_number"]}`,
+        }, false);
+      } else {
+        this.$xdUniHelper.navigateTo({
+          url: `${this.detailUrl}?card_number=${item["card_number"]}`,
+        }, false);
+      }
+    },
+
+    onJfbLoad(options) {
+      if(options['x-test'] === 'jfb-console') this.showIndex = true;
+      this.options = options;
+      let { inCallback } = options;
+      this.force = !!inCallback;
+      if(!inCallback) this.$storage.remove("inCallback"); //作为入口
+      else {
+        this.$storage.set("inCallback", inCallback);
+        try{
+          inCallback = Base64.decode(inCallback);
+          if(options.inCallback) {
+            this.inCallbackUrlOrg = options.inCallback;
+          }
+        }catch (e){
+          inCallback = null;
+        }
+      }
+
+      //登录成功调整地址优先级
+      this.inCallback = inCallback || this.allEntryPath || this.settings.index;
+      this.getContent();
+      if(this.tabIndex===1) {
+        this.getCardList(options);
+      } else {
+        this.getCouponList(options);
+      }
+    },
+
+    getCouponList(options) {
+      let params = {is_all: 'Y', is_show_entry_settings: 'Y', show_type: 'coupon'};
+      if(options['jfb_business_code']) {
+        params['card_business_code'] = options['jfb_business_code'];
+      }
+      if(this.entryGroupId) params['group_id'] = this.entryGroupId;
+      this.$xdShowLoading({});
+      jfbRootExec("getListEntryCardBind", {
+        vm: this,
+        data: params
+      }).then(res=>{
+        this.loadingCardList = false;
+          this.showDisabled = res.is_show_invalid_card_entrance;
+          if(this.isPreview) {
+            res.list = this.testCouponList
+          }
+          //过滤入口配置
+          res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
+          let newCardList = this.$xdUniHelper.cloneDeep(res.list);
+          this.couponList = this.getCardGroupItem(newCardList, res['site_entry_settings']);
+          console.log(this.couponList,'this.couponList');
+
+          this.$xdHideLoading({});
+
+      }) .catch(() => this.$xdHideLoading());
+
+    },
+
+    getCardList(options) {
+      let params = {is_all: 'Y', is_show_entry_settings: 'Y', show_type: 'normal'};
+      if(options['jfb_business_code']) {
+        params['card_business_code'] = options['jfb_business_code'];
+      }
+      if(this.entryGroupId) params['group_id'] = this.entryGroupId;
+      this.$xdShowLoading({});
+      jfbRootExec("getListEntryCardBind", {
+        vm: this,
+        data: params
+      })
+        .then((res) => {
+          this.loadingCardList = false;
+          this.showDisabled = res.is_show_invalid_card_entrance;
+          res.list = res.list.map((item) => {
+            return {
+              ...item,
+              card_point: this.$xdUniHelper.divisionFloatNumber(
+                item.card_point,
+                100
+              ),
+              other_card_point: this.$xdUniHelper.divisionFloatNumber(
+                item.other_card_point,
+                100
+              ),
+            };
+          });
+
+          this.checkTabStatus(res);
+
+          //过滤入口配置
+          res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
+
+          this.ajaxCardList =  res;
+          this.hasChangeStatus = this.getCardGroupItem(this.ajaxCardList.list.filter((item) => {
+            return item["is_exchange"] === "Y";
+          }), res['site_entry_settings']).length > 0;
+          let type = ""
+          if(this.subTabIndex === 1) {
+            type = 'is_valid'
+          } else if(this.subTabIndex === 2) {
+            type = 'is_exchange'
+          } else {
+            type = 'is_transfering'
+          }
+          console.log(this.ajaxCardList, type, 'this.ajaxCardList, type');
+
+          this.handleCardInit(this.ajaxCardList, type);
+          this.cardPageNum = 1;
+          this.$xdHideLoading();
+
+        })
+        .catch(() => this.$xdHideLoading());
+    },
+
+    onJfbUpdate(data) {
+      this.getContent();
+    },
+
+    onJfbBack(options) {
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseCardEntryLess.less";
+
+.jfb-base-card-entry {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+
+  &__body {
+    padding: unit(30, rpx) unit(26, rpx);
+    color: #333;
+
+    &-empty {
+      color: #888;
+      font-size: unit(24,rpx);
+      height: 60vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &-wrap {
+        display: flex;
+        flex-direction: column;
+
+        & > image {
+          width: unit(460,rpx);
+          height: unit(400,rpx);
+        }
+      }
+
+      & > view {
+        text-align: center;
+      }
+    }
+
+    &-dialog {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      z-index: 9999;
+      background: rgba(0, 0, 0, 0.4);
+
+      &-content {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        &-close {
+          margin-top: unit(20, rpx);
+          width: unit(52 / @scale, rpx);
+          height: unit(52 / @scale, rpx);
+          border: unit(5, rpx) solid #fff;
+          border-radius: 50%;
+          overflow: hidden;
+        }
+
+        &-img {
+          width: unit(680, rpx);
+          height: 80%;
+          border-radius: unit(20, rpx);
+        }
+      }
+    }
+
+    &-line {
+      height: 1px;
+      background: #eee;
+      overflow: hidden;
+      margin: unit(30, rpx) unit(-35, rpx) 0 unit(-35, rpx);
+    }
+
+    &-cut {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+
+      &-item {
+        border: unit(6, rpx) solid;
+        font-size: unit(36, rpx);
+        color: #fe7a63ff;
+        border-radius: unit(16, rpx);
+        width: unit(330, rpx);
+        height: unit(94, rpx);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+
+      }
+    }
+
+    &-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;
+      }
+
+    }
+
+    &-sub-tab {
+      display: flex;
+      align-items: center;
+      margin-bottom: 32rpx;
+
+      &-item {
+        font-size: 28rpx;
+        padding: 8rpx 16rpx;
+        border-radius: 8rpx;
+        margin-right: 24rpx
+      }
+    }
+
+    &-tab {
+      display: flex;
+      align-items: center;
+      font-size: unit(28, rpx);
+      margin-bottom: unit(30, rpx);
+      margin-top: unit(30, rpx);
+
+      & > view {
+        // width: unit(214, rpx);
+        // height: unit(60, rpx);
+        padding: unit(5, rpx) unit(22, rpx);
+        text-align: center;
+        line-height: unit(60, rpx);
+        margin-right: unit(30, rpx);
+        border-radius: unit(60, rpx);
+      }
+    }
+
+    &-tips {
+      font-size: unit(20, rpx);
+      margin-bottom: unit(30, rpx);
+    }
+
+    &-disabled {
+      font-size: unit(28, rpx);
+      color: #b8b7be;
+      margin-bottom: unit(30, rpx);
+      padding-top: unit(30, rpx);
+    }
+  }
+}
+
+.card-list {
+  overflow: hidden;
+  border-radius: unit(16, rpx);
+  margin-bottom: unit(30, rpx);
+  .skeleton-card &{
+    background: #F6F6F6;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+
+  &__title {
+    height: unit(56, rpx);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    & > view {
+      padding: 0 unit(40, rpx);
+      font-size: unit(24, rpx);
+      line-height: unit(56, rpx);
+      background: rgba(102, 102, 102, 0.4);
+      color: #fff;
+      border-radius: 0 0 unit(16, rpx) 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .skeleton-card &{
+        .skeleton-item(120rpx, 50rpx, 0 0 16rpx 0, #EEEEEE);
+      }
+
+      & > view:nth-child(2) {
+        height: 36rpx;
+        line-height: 36rpx;
+        background-color: rgb(41, 203, 151);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 30rpx;
+        padding: 0 20rpx;
+        border-radius: 8rpx;
+
+        & > text:nth-child(1) {
+          width: 10rpx;
+          height: 10rpx;
+          border-radius: 50%;
+          background-color: #fff;
+          margin-right: 10rpx;
+        }
+
+        & > text:nth-child(2) {
+          font-size: 24rpx;
+        }
+      }
+
+    }
+
+  }
+
+  &__content {
+    padding: unit(10, rpx) unit(40, rpx) 0;
+    height: unit(86, rpx);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .skeleton-card &{
+      .skeleton-item(500rpx, 40rpx, 20rpx, #EEEEEE);
+      margin: 20rpx 40rpx;
+    }
+
+    & > view:first-child {
+      font-size: unit(36, rpx);
+      line-height: unit(86, rpx);
+      color: #fff;
+      font-weight: 700;
+    }
+
+    & > view:nth-child(2) {
+      font-size: unit(24, rpx);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-flow: wrap;
+      flex-direction: column;
+      color: #fff;
+    }
+  }
+
+  &__date {
+    padding: 0 unit(40, rpx);
+    font-size: unit(28, rpx);
+    line-height: unit(32, rpx);
+    color: #fff;
+    .skeleton-card &{
+      .skeleton-item(300rpx, 40rpx, 20rpx, #EEEEEE);
+      margin-left: 40rpx;
+    }
+  }
+
+  &__yue {
+    padding: unit(10, rpx) unit(40, rpx) 0;
+    font-size: unit(28, rpx);
+    line-height: unit(32, rpx);
+    color: #fff;
+    .skeleton-card &{
+      .skeleton-item(300rpx, 28rpx, 20rpx, #EEEEEE);
+      margin-top: 8rpx;
+      margin-left: 40rpx;
+    }
+
+    & > text:nth-child(2) {
+      font-weight: 700;
+    }
+  }
+
+  &__other {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: unit(20, rpx) unit(40, rpx) 0;
+    margin-top: unit(0, rpx);
+
+    & > view {
+      border-radius:unit(8, rpx);
+      background: rgba(255, 255, 255, 0.2);
+      height: unit(48, rpx);
+      line-height: unit(48, rpx);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-weight: 400;
+      font-size: unit(24, rpx);
+      padding: 0 unit(20, rpx);
+      color: #fff;
+    }
+
+
+  }
+
+  &__nodata {
+    padding: unit(20, rpx) unit(40, rpx) 0;
+    margin-top: unit(0, rpx);
+    color: #fff;
+    font-size: unit(28, rpx);
+  }
+
+  &__entry {
+    padding: unit(20, rpx) unit(40, rpx) 0;
+    & > view {
+      line-height: unit(64, rpx);
+      text-align: center;
+      font-size: unit(26, rpx);
+      border-radius: unit(32, rpx);
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+      font-weight: 500;
+    }
+  }
+
+  &__entrys {
+    margin: unit(20, rpx) unit(20, rpx) 0;
+    padding: unit(30, rpx);
+    border-radius: unit(16, rpx);
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+
+    &-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+
+      & > view:first-child {
+        font-size: unit(28, rpx);
+        font-weight: 500;
+        flex: 1;
+
+        .skeleton-card &{
+          .skeleton-item(100rpx, 28rpx);
+        }
+      }
+
+      & > view:nth-child(2) {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-shrink: 0;
+        font-size: unit(20, rpx);
+        color: #999;
+      }
+    }
+
+    &-scroll {
+
+    }
+
+    &-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-flow: nowrap;
+      margin-left: unit(-14, rpx);
+      padding-top: unit(20, rpx);
+
+      & > view {
+        width: unit(120, rpx);
+        margin-right: unit(10, rpx);
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: unit(10,rpx);
+
+        & > view:first-child {
+          width: unit(76, rpx);
+          height: unit(76, rpx);
+          overflow: hidden;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .skeleton-card &{
+            .skeleton-item(76rpx, 76rpx, 50%);
+          }
+
+          & > image {
+            height: 100%;
+            width: 100%;
+          }
+        }
+
+        & > view:nth-child(2) {
+          margin-top: unit(10, rpx);
+          font-size: unit(24, rpx);
+          line-height: unit(36, rpx);
+          margin-bottom: unit(10, rpx);
+
+          .skeleton-card &{
+            .skeleton-item(50rpx, 20rpx);
+          }
+        }
+
+        & > view:nth-child(3) {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-shrink: 0;
+          font-size: unit(20, rpx);
+          color: #999;
+          .skeleton-card &{
+            .skeleton-item(70rpx, 20rpx);
+          }
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+      }
+
+
+    }
+  }
+
+
+  &-warp {
+    min-height: unit(310, rpx);
+    position: relative;
+    border-radius: unit(16, rpx);
+    background-size: 100%;
+    padding-bottom: unit(20, rpx);
+  }
+}
+
+.coupon_list{
+  ::v-deep .xd-coupon_item{
+    margin: var(--card-list-margin) 0;
+  }
+}
+.no_more_card{
+  text-align: center;
+  padding: 20rpx 0;
+  color: #CCCCCC;
+  font-size: 28rpx;
+}
+
+.computed-height {
+  position: fixed;
+  top:-999999px;
+  width: 100%;
+  z-index: 99999;
+}
+
+.card-content-empty {
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: top center;
+
+  & > image {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>