jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseCard/JfbBaseCard.vue

@@ -1,408 +1,904 @@
 <template>
   <view
     class="jfb-base-card"
-    @click="handleSelect"
-    :class="{ editx : isEditx && active }"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-card__edit"
-      :class="{ editx : isEditx && active }"
-      v-if="isEditx && active"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
     >
       <view class="jfb-base-card__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-card__body">
-      <view class="jfb-base-card__body-cut">
-        <view class="jfb-base-card__body-cut-item" @click="handleScan"
-              :style="{background:cutIndex===1?$mainColor:'#fff',borderColor:$mainColor,color:cutIndex===1?'#fff':$mainColor}">
-          <xd-font-icon icon="iconsaoma"></xd-font-icon>
-          <view>使用扫码绑定</view>
-        </view>
-        <view class="jfb-base-card__body-cut-item" @click="handleToLink('/pages/cardbind/cardbind')"
-              :style="{background:cutIndex===2?$mainColor:'#fff',borderColor:$mainColor,color:cutIndex===2?'#fff':$mainColor}">
-          <xd-font-icon icon="iconyuechi"></xd-font-icon>
-          <view>券号密码绑定</view>
+    <view :style="{paddingTop: bindCard!=='1'?'35rpx':'55rpx'}" class="jfb-base-card__body">
+      <view v-if="bindCard==='1'" class="jfb-base-card__body-cut">
+        <template v-if="isQrCode">
+          <view
+            class="jfb-base-card__body-cut-item"
+            @click="handleScan"
+            :style="{
+              background: cutIndex === 1 ? mainColor : '#fff',
+              borderColor: mainColor,
+              color: cutIndex === 1 ? '#fff' : mainColor,
+            }"
+          >
+            <xd-font-icon
+              :style="{marginBottom: '15rpx'}"
+              size="80"
+              icon="iconsaoma"
+            ></xd-font-icon>
+            <view>使用扫码绑定</view>
+          </view>
+          <view
+            class="jfb-base-card__body-cut-item"
+            @click="handleToLink(bindUrl)"
+            :style="{
+              background: cutIndex === 2 ? mainColor : '#fff',
+              borderColor: mainColor,
+              color: cutIndex === 2 ? '#fff' : mainColor,
+            }"
+          >
+            <xd-font-icon
+							:style="{marginBottom: '15rpx'}"
+              size="80"
+              icon="iconyuechi"
+            ></xd-font-icon>
+            <view>券号密码绑定</view>
+          </view>
+        </template>
+        <template v-else>
+          <view
+            class="jfb-base-card__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>
+      <!--notice-->
+      <view class="jfb-base-card__body-line" v-if="!notice"></view>
+      <view :style="{marginTop: bindCard!=='1'?'0rpx':'30rpx'}" class="jfb-base-card__body-notice" v-if="notice">
+        <view
+          class="jfb-base-card__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__body-line"></view>
+      <view class="jfb-base-card__body-notice" v-if="noticeStatus && isPreview && notice === ''">
+        <view
+          class="jfb-base-card__body-notice-in"
+          :style="{
+            background: noticeBackgroundColor,
+            textAlign: 'center',
+            color: dangerColor,
+            fontSize: 26 + 'rpx',
+          }">该组件未配置数据，因此改模块在正式环境将不显示</view>
+      </view>
+      <!--notice end-->
       <view class="jfb-base-card__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
+          @click="tabIndex = 1"
+          :style="{
+            color: tabIndex === 1 ? '#fff' : '#B8B7BE',
+            background: tabIndex === 1 ? mainColor : '#fff',
+          }"
+        >已绑定票券</view>
+        <view
+          v-if="changeList.length > 0"
+          @click="tabIndex = 2"
+          :style="{
+            color: tabIndex === 2 ? '#fff' : '#B8B7BE',
+            background: tabIndex === 2 ? mainColor : '#fff',
+          }"
+        >可转换票券</view>
+        <view class="debuger" v-if="cardList.length === 0" @click="openDebugger(true)" style="opacity: 0">debuger</view>
       </view>
-      <view class="jfb-base-card__body-tips" :style="{color:$mainColor}" v-if="tabIndex===2">
-        *目前仅支持电影票兑换券进行转换
+      <view
+        class="jfb-base-card__body-tips"
+        :style="{ color: warningColor }"
+        v-if="tabIndex === 2"
+			>* 目前仅支持电影票兑换券进行转换</view>
+      <view v-if="loadingCardList">
+        <xd-card-v2-skelton v-for="i in 3" :key="i"></xd-card-v2-skelton>
       </view>
-      <view class="jfb-base-card__body-card">
-        <view v-for="(item,index) in showList" :key="index" @click="handleBindLogin(item)"
-              class="jfb-base-card__body-card-item">
-          <view class="jfb-base-card__body-card-item-left">
-            <xd-font-icon size="55" icon="iconyouhuiquan"></xd-font-icon>
-            <view>{{tabIndex===1?'登录':'转换'}}</view>
-          </view>
-          <view class="jfb-base-card__body-card-item-right">
-            <view class="jfb-base-card__body-card-item-right-top">
-              <view>
-                <xd-font-icon icon="iconkaquan" size="30" style="margin-right: 10rpx"></xd-font-icon>
-                <view>{{item.card_type_name}}</view>
+      <template v-else>
+        <view
+          v-if="tabIndex === 2 || tabIndex === 1"
+          class="jfb-base-card__body-card"
+        >
+          <template v-if="cardLayout === '1'">
+            <view
+              v-for="(item, index) in showList"
+              :key="index"
+              @click="handleBindLogin(item)"
+              class="jfb-base-card__body-card-item"
+              :style="{
+                backgroundColor:(item['is_login'] === 'Y'? mainBorderColor : '#fff'),
+                border:`1px solid ${item['is_login'] === 'Y'? mainSubBorderColor:'#eeeeee'}`
+              }"
+            >
+              <view class="jfb-base-card__body-card-item-left">
+                <xd-font-icon
+                  size="100"
+                  :color="mainColor"
+                  :icon="item['is_login'] === 'Y'?'iconkaquandengluchenggong':'iconyouhuiquan1-011'"
+                ></xd-font-icon>
+                <view
+                  class="login_style"
+                  :style="{
+                    backgroundColor:item['is_login'] === 'Y'?mainBorderColor:(login_text_bg_color||'#fff'),
+                    fontSize: login_text_size + 'rpx',
+                    color:item['is_login'] === 'Y'?mainColor:login_text_color,
+                    borderRadius: login_text_radius + 'rpx'
+                  }"
+                >{{ tabIndex === 1 ? (item['is_login'] === 'Y'? logged_name : login_name) : "转换" }}</view>
               </view>
-              <view>
-                <view>ID:{{item.card_number}}</view>
-                <view>有效期至:{{item.end_time}}</view>
-              </view>
-            </view>
-            <view class="jfb-base-card__body-card-item-right-bottom">
-              <view class="jfb-base-card__body-card-item-right-bottom-info">
-                <view class="jfb-base-card__body-card-item-right-bottom-info-residue">
-                  剩余点数：{{item.card_point}}
+              <view
+                class="jfb-base-card__body-card-item-right"
+                :style="{borderColor: item['is_login'] === 'Y'? mainSubBorderColor:'#eeeeee'}"
+              >
+                <view
+                  class="jfb-base-card__body-card-item-right-top"
+                  :style="{borderColor: item['is_login'] === 'Y'? mainSubBorderColor:'#eeeeee'}"
+                >
+                  <view>
+                    <xd-font-icon
+                      icon="iconkaquan"
+                      size="38"
+                      :style="{marginRight: '18rpx'}"
+                      :color="mainColor"
+                    ></xd-font-icon>
+                    <view>{{ item.card_type_name }}</view>
+                  </view>
+                  <view>
+                    <view>{{ item.card_number }}{{showIndex?(':' + index):''}}</view>
+                    <view>有效期至：{{ item.end_time }}</view>
+                  </view>
                 </view>
-                <view class="jfb-base-card__body-card-item-right-bottom-info-deduction">
-                  购买其他物品可抵：{{item.other_card_point}}
+                <view class="jfb-base-card__body-card-item-right-bottom">
+                  <view class="jfb-base-card__body-card-item-right-bottom-info">
+                    <view class="jfb-base-card__body-card-item-right-bottom-info-residue">剩余{{ item.unit }}数：{{ item.card_point }}{{ item.unit }}</view>
+                    <view
+                      v-if="item.other_card_point && item.card_point_type !== 1"
+                      class="jfb-base-card__body-card-item-right-bottom-info-deduction"
+                    >购买其他物品可抵：{{ item.other_card_point }}</view>
+                  </view>
+                  <view @click.stop="toDetail(item)" :style="lookStyle">{{look_name}}</view>
                 </view>
               </view>
-              <view @click.stop="toDetail(item)" :style="{background:$mainColor}">查看</view>
             </view>
-          </view>
+          </template>
+          <template v-else>
+            <xd-card-v2
+              :login-name="login_name"
+              :logged-name="logged_name"
+              :look-name="look_name"
+              v-for="(item, index) in showList"
+              :mainColor="mainColor"
+              :key="index"
+              :cardInfo="item"
+              :tabIndex="tabIndex"
+              :lookStyle="lookStyle"
+              :login-style="loginStyle"
+              @toDetail="toDetail(item)"
+              @bindLogin="handleBindLogin(item)">
+            </xd-card-v2>
+          </template>
         </view>
+      </template>
+      <view v-if="showDisabled==='Y'" @click="handleToDisabled" class="jfb-base-card__body-disabled">
+        已失效票券>>>
       </view>
-      <view class="jfb-base-card__body-disabled">
-        失效票券
-      </view>
-      <view class="jfb-base-card__body-card">
-        <view v-for="(item,index) in disableList" :key="index" class="jfb-base-card__body-card-item">
-          <view class="jfb-base-card__body-card-item-left">
-            <xd-font-icon color="#F0F0F0" size="55" icon="iconyouhuiquan"></xd-font-icon>
-            <view>{{tabIndex===1?'登录':'转换'}}</view>
-          </view>
-          <view class="jfb-base-card__body-card-item-right">
-            <view class="jfb-base-card__body-card-item-right-top">
-              <view>
-                <xd-font-icon color="#B8B7BE" icon="iconkaquan" size="30" style="margin-right: 10rpx"></xd-font-icon>
-                <view>{{item.card_type_name}}</view>
-              </view>
-              <view>
-                <view>ID:{{item.card_number}}</view>
-                <view>有效期至:{{item.end_time}}</view>
-              </view>
-            </view>
-            <view class="jfb-base-card__body-card-item-right-bottom">
-              <view class="jfb-base-card__body-card-item-right-bottom-info">
-                <view class="jfb-base-card__body-card-item-right-bottom-info-residue">
-                  剩余点数：{{item.card_point}}
-                </view>
-                <view class="jfb-base-card__body-card-item-right-bottom-info-deduction">
-                  购买其他物品可抵：{{item.other_card_point}}
-                </view>
-              </view>
-              <view :style="{background:'#E5E5E5'}">查看</view>
-            </view>
-          </view>
+    </view>
+      <view class="jfb-base-card__body-dialog" v-if="dialogEvent">
+        <view class="jfb-base-card__body-dialog-content">
+          <image
+            class="jfb-base-card__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__body-dialog-content-close"
+            @click="dialogEvent = false"
+          ></xd-font-icon>
         </view>
       </view>
     </view>
-  </view>
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import XdButton from "@/components/XdButton/XdButton";
-  import {jfbRootExec} from "@/utils/xd.event";
-  import JfbBaseCardMixin from "./JfbBaseCardMixin";
-  import {mapState, mapActions} from 'vuex'
-
-  export default {
-    name: "JfbBaseCard",
-    components: {
-      XdFontIcon,
-      XdButton
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import XdCardV2 from "@/components/XdCardV2/XdCardV2";
+import XdCardV2Skelton from "@/components/XdCardV2/XdCardV2Skeleton"
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseCardMixin from "./JfbBaseCardMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import openDebuggerMixins from "@/mixins/openDebuggerMixins";
+import { mapState, mapActions } from "vuex";
+import { getContainerPropsValue, isWechat,isQrCode } from "@/utils/xd.base";
+import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
+import { Base64 } from "js-base64";
+const Color = require("color");
+
+export default {
+  name: "JfbBaseCard",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdNoticeBar,
+    XdCardV2,
+    XdCardV2Skelton
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseCardMixin,openDebuggerMixins],
+  computed: {
+    ...mapState({
+      jwxSDK: (state) => state.jwxSDK,
+      jfbAuthorize: (state) => state.jfbAuthorize,
+    }),
+
+
+
+    //布局2特殊样式，布局1在行内样式
+    loginStyle(){
+      let style = { backgroundColor: '#FFFFFF'};
+      if(this.login_text_size) style['fontSize'] = this.login_text_size + 'rpx';
+      if(this.login_text_color) style['color'] = this.login_text_color;
+      if(this.login_text_bg_color) style['backgroundColor'] = this.login_text_bg_color;
+      if(this.login_text_radius) style['borderRadius'] = this.login_text_radius + 'rpx'
+      if(this.cardLayout === '2') return style;
+      return  this.styleObjectToString(style);
     },
-    mixins: [
-      JfbBaseCardMixin
-    ],
-    computed: {
-      ...mapState({
-        jwxSDK: state => state.jwxSDK
+
+    lookStyle(){
+      let style = { backgroundColor: this.cardLayout === '2'? '' : this.mainColor};
+      if(this.look_text_size) style['fontSize'] = this.look_text_size + 'rpx';
+      if(this.look_text_color) style['color'] = this.look_text_color;
+      if(this.look_text_bg_color) style['backgroundColor'] = this.look_text_bg_color;
+      if(this.look_text_radius) style['borderRadius'] = this.look_text_radius + 'rpx';
+      if(this.cardLayout === '2') return style;
+      return this.styleObjectToString(style);
+    }
+  },
+  watch: {
+    tabIndex(newVal) {
+      let data = [];
+      if (newVal === 1) {
+        this.showList = this.getPageCardContent(this.cardList);
+        data = this.$xdUniHelper.cloneDeep(this.cardList)
+      } else {
+        this.showList =  this.getPageCardContent(this.changeList);
+        data = this.$xdUniHelper.cloneDeep(this.changeList)
+      }
+      this.$nextTick(()=>{
+        this.hasContent = data.length > this.pagesLimit;
+        this.offsetIndex = 1;
       })
+
     },
-    watch: {
-      tabIndex(newVal, oldVal) {
-        if (newVal === 1) {
-          this.showList = this.cardList
-        } else {
-          this.showList = this.changeList
-        }
-      }
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
     },
-    data() {
-      return {
-        cutIndex: 1,
-        tabIndex: 1,
-        isBack: null, //是否使用返回键
-        cardList: [],
-        showList: [],
-        changeList: [],        disableList: [],
-        inCallback: null, //内部跳转地址
-      }
+  },
+  data() {
+    return {
+      options: {},
+      inCallbackUrlOrg:'',//是否带有回调地址
+      mainBorderColor:'',
+      mainSubBorderColor:'',
+
+      //提示文案
+      noticeBackgroundColor: "",
+      notice: "",
+      isPreview: false,
+      noticeStatus: false,
+
+      isQrCode: true,
+      cutIndex: 1,
+      tabIndex: 1,
+      offsetIndex:0,//第几页
+      pagesLimit:20,//每页显示条数
+      cardSrcollLoading: false,//滚动获取数据中
+      hasContent:true, //是否有下一页
+      isBack: null, //是否使用返回键
+      cardList: [], //可用卡卡列表
+      showList: [], //当前显示卡列表
+      changeList: [], //可转化卡列表
+      disableList: [], //不可用卡列表
+      inCallback: null, //内部跳转地址
+      loadingCardList: true,
+      showIndex: false,
+
+      //页面跳转地址
+      logged_name: '',
+      login_name:'',//登录文案
+      changeUrl: "",
+      bindUrl: "",
+      detailUrl: "",
+      confirmUrl: "",
+      allEntryPath: "", //综合福利入口页
+      disabledUrl: "",
+      cardLayout: "1",  //票券布局
+      bindCard: '1',
+
+      //样式
+      look_name:'',
+      login_text_size: "",
+      login_text_color: "",
+      login_text_bg_color: "",
+      login_text_radius: "",
+      look_text_size: "",
+      look_text_color: "",
+      look_text_bg_color: "",
+      look_text_radius: "",
+
+      showDisabled: 'Y',
+
+      dialogEvent: false,
+      // is_show_change: 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",
+    };
+  },
+  created() {
+    this.init(this.container);
+    this.noticeBackgroundColor = Color(this.warningColor).alpha(0.2).toString();
+    this.mainBorderColor = Color(this.mainColor).alpha(0.05).toString();
+    this.mainSubBorderColor = Color(this.mainColor).alpha(0.1).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(res => {
+          console.log(0)
+        })
+        .catch(error=>{
+          this.$xdAlert({
+            content: error,
+          });
+        })
+    }
+    // #endif
+
+  },
+  methods: {
+    init(container){
+      //设置
+      this.cardLayout = getContainerPropsValue(container,"content.cardLayout","1");
+      this.bindCard = getContainerPropsValue(container,"content.bindCard","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.allEntryPath = getContainerPropsValue(container,"content.allEntryPath",{value: ""}).value;
+
+      //登录样式
+      this.login_name = getContainerPropsValue(container, "content.login_name", "登录");
+      this.login_text_size = getContainerPropsValue(container, 'content.login_text_size', 28);
+      this.login_text_color = getContainerPropsValue(container, 'content.login_text_color', this.cardLayout==='2'? '#fff':'#333');
+      this.login_text_bg_color = getContainerPropsValue(container, 'content.login_text_bg_color', this.cardLayout === '2'? this.mainColor:'');
+      this.login_text_radius = getContainerPropsValue(container, 'content.login_text_radius', '20');
+      this.logged_name = getContainerPropsValue(container, 'content.logged_name', '已登录');
+
+
+      //查看样式
+      this.look_name = getContainerPropsValue(container, 'content.look_name', '查看');
+      this.look_text_size = getContainerPropsValue(container, 'content.look_text_size', 24);
+      this.look_text_color = getContainerPropsValue(container, 'content.look_text_color', this.cardLayout==='2'? '#333':'#fff');
+      this.look_text_bg_color = getContainerPropsValue(container, 'content.look_text_bg_color', this.cardLayout === '2'? '' :this.mainColor);
+      this.look_text_radius = getContainerPropsValue(container, 'content.look_text_radius', '20');
     },
-    created() {
-      let {inCallback} = this.$route.query;
-      if (inCallback) inCallback = decodeURIComponent(inCallback);
-      this.inCallback = inCallback || this.settings.index;
+
+    handleToLink(path) {
+      path = this.getUrlCallback(path);
+      this.$xdUniHelper.navigateTo({
+        url: path,
+      });
     },
-    methods: {
-      handleToLink(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) {
+            if(res.list && res.list.length > 0) {
+              this.notice = this.$xdUniHelper.filterHtml(res.list[0].content);
+            }
+            this.noticeStatus = true;
+          }
         })
-      },
-
-      /**
-       * @description 扫码绑定
-       */
-      handleScan() {
-        console.log(getApp().globalData, 'pageAtrr')
-        jfbRootExec('getH5WxAuthorize', {
+        .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}`,
+      });
+    },
+
+    /**
+     * @description 已绑定卡登录
+     * @param item
+     */
+    handleBindLogin(item) {
+      if (this.tabIndex === 1) {
+
+        //无效卡
+        if (item["is_valid"] !== "Y") {
+          console.log(
+            item,
+            item["is_valid"],
+            item["is_valid"] !== "Y",
+            "itemitem"
+          );
+          return;
+        }
+        this.$xdShowLoading({});
+        jfbRootExec("loginCardBind", {
           vm: this,
-          data: {url: window.location.href, partner_id: 161, site_id: 'wx_pub'}
-        }).then(res => {
-          if (this.jwxSDK !== null) {
-            console.log(this.jwxSDK, 'this.jwxSDK')
-            //todo
-          }
+          data: { card_number: item["card_number"] },
         })
-      },
-      /**
-       * @description 已绑定卡登录
-       * @param item
-       */
-      handleBindLogin(item) {
-        if (this.tabIndex === 1) {
-          console.log('bindCardLogin', this.inCallback)
-
-          //无效卡
-          if (item['is_valid'] !== 'Y') {
-            console.log(item, item['is_valid'], item['is_valide'] !== 'Y', 'itemitem')
-            return
-          }
-          this.$xdShowLoading({});
-          jfbRootExec('loginCardBind', {
-            vm: this,
-            data: {card_number: item['card_number']}
-          }).then(res => {
+          .then((res) => {
+            console.log(res);
             this.$xdHideLoading();
-            this.$xdUniHelper.redirectTo({
-              url: this.inCallback
-            });
+            //#ifdef MP-WEIXIN
+            if (this.jfbAuthorize !== null) {
+              this.jfbAuthorize.setCardToken(res);
+              // this.jfbAuthorize.setToken("card", res["card_token"], {
+              //   expires: res["card_expire_in"] / 60 / 60,
+              // });
+            }
+            //#endif
+
+            if (this.$configProject.isPreview) {
+              console.log("handleBindLogin", "预览模式不跳转", this.inCallback);
+            } else {
+              this.$xdUniHelper.redirectTo({
+                url: this.inCallback,
+              });
+            }
           })
-            .catch(res => {
-              this.$xdHideLoading();
-            })
-        } else {
-          this.$xdUniHelper.navigateTo({
-            url: `/pages/change/change?card_number=${item['card_number']}`
-          }, false);
+          .catch((res) => {
+            this.$xdHideLoading();
+          });
+      } else {
+        this.$xdUniHelper.navigateTo(
+          {
+            url: `${this.changeUrl}?card_number=${item["card_number"]}`,
+          },
+          false
+        );
+      }
+    },
+    toDetail(item) {
+      this.$xdUniHelper.navigateTo(
+        {
+          url: `${this.detailUrl}?card_number=${item["card_number"]}`,
+        },
+        false
+      );
+    },
+
+    onJfbLoad(options) {
+      this.options = options;
+      if(options['x-test'] === 'jfb-console') this.showIndex = true;
+      let { inCallback } = options;
+      if(!inCallback) this.$storage.remove("inCallback"); //作为入口
+      else {
+        this.$storage.set("inCallback", inCallback);
+        try{
+          inCallback = Base64.decode(inCallback);
+          this.inCallbackUrlOrg = options.inCallback;
+        }catch (e){
+          inCallback = null;
         }
+      }
 
-      },
-      toDetail(item) {
-        this.$xdUniHelper.navigateTo({
-          url: `/pages/carddetail/carddetail?card_number=${item['card_number']}`
-        }, false);
-      },
-      onJfbLoad(options) {
-        console.log(this.jwxSDK, '000000')
-        jfbRootExec('getListCardBind', {
-          vm: this,
-          data: {}
-        }).then((res) => {
-          this.cardList = res.list.filter((item) => {
-            if (item['is_valide'] !== 'N' && item['card_point'] !== 0) {
-              return true
-            }
-            return false
+      //登录成功调整地址优先级
+      this.inCallback = inCallback || this.allEntryPath || this.settings.index;
+      this.getContent();
+
+      this.getCardList(options);
+    },
+
+    getCardList(options) {
+      let params = {is_all: 'Y'};
+      if(options['jfb_business_code']) {
+        params['card_business_code'] = options['jfb_business_code'];
+      }
+      this.$xdShowLoading({});
+      jfbRootExec("getListCardBind", {
+        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.cardList = res.list.filter((item,index) => {
+            return item["is_valid"] === "Y";
+          }).map((item,index)=>{
+            item['index'] = index;
+            return item
+          });
+          console.warn(`cardList:${this.cardList.length}`)
           this.disableList = res.list.filter((item) => {
-            if (item['is_valide'] === 'N' || item['card_point'] === 0) {
-              return true
-            }
-            return false
+            return item["is_valid"] === "N";
           });
-          this.changeList = this.cardList.filter(item => {
-            if (item['is_exchange'] === 'Y') {
-              return true
-            }
-            return false
+          console.warn(`disableList:${this.disableList.length}`)
+          this.changeList = this.cardList.filter((item) => {
+            return item["is_exchange"] === "Y";
           })
+          console.warn(`changeList:${this.changeList.length}`)
+          this.showList = this.getPageCardContent(this.cardList);
+          if(this.hasContent) this.offsetIndex++;
+          this.$xdHideLoading();
+        })
+        .catch(() => this.$xdHideLoading());
+    },
 
-          this.showList = this.cardList
-        }).catch()
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
-      },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
-      },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
-      },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
-      },
-    }
-  }
+    getPageCardContent(orgData){
+      let newData = this.$xdUniHelper.cloneDeep(orgData);
+      return newData.slice(0,this.pagesLimit);
+    },
+
+    onJfbShow(options) {
+      this.offsetIndex = 0;
+      this.hasContent = true;
+      this.tabIndex = 1;
+      this.disableList = [];
+      this.changeList=[];
+      this.showList = [];
+      this.onJfbLoad(options);
+    },
+
+    onJfbReachBottom(){
+      //加载在不处理,无下一页不处理，当前也为0不处理
+      if(this.cardSrcollLoading || !this.hasContent || this.offsetIndex === 0) return;
+      this.cardSrcollLoading = true;
+      this.$xdShowLoading({});
+      let data = [];
+      if(this.tabIndex === 1) data = this.$xdUniHelper.cloneDeep(this.cardList);
+      if(this.tabIndex === 2) data = this.$xdUniHelper.cloneDeep(this.changeList);
+      setTimeout(()=>{
+        this.$xdHideLoading();
+        let cardComputedList = data.slice(
+          this.offsetIndex*this.pagesLimit,
+          this.offsetIndex*this.pagesLimit + this.pagesLimit
+        );
+        if(cardComputedList.length < this.pagesLimit) {
+          this.hasContent = false;
+        }
+        this.showList = (this.showList||[]).concat(cardComputedList);
+        this.cardSrcollLoading = false;
+        this.offsetIndex++;
+      },500)
+    },
+
+    onJfbUpdate(data) {
+      this.getContent();
+    },
 
+    onJfbBack(options) {
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-  @import "./JfbBaseCardLess.less";
+@import "./JfbBaseCardLess.less";
+
+.jfb-base-card {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
 
-  .jfb-base-card {
-    border: 1px dashed rgba(0, 0, 0, 0);
-    box-sizing: border-box;
+  &__body {
+    padding: unit(55, rpx) unit(35, rpx);
+    color: #333;
 
-    &__body {
-      padding: unit(55, rpx) unit(35, rpx);
+    &-dialog {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      z-index: 9999;
+      background: rgba(0, 0, 0, 0.4);
 
-      &-cut {
+      &-content {
         display: flex;
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
         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(308, rpx);
-          height: unit(182, rpx);
-          display: flex;
-          flex-direction: column;
+
+        &-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);
+        }
+      }
+    }
+
+    &-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(308, rpx);
+        height: unit(182, rpx);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &.one {
+          width: 100%;
+          flex-direction: row;
+          height: unit(100, rpx);
           align-items: center;
           justify-content: center;
+
+          & > view {
+            font-size: unit(36, rpx);
+            margin-left: unit(10, rpx);
+          }
         }
       }
+    }
 
-      &-line {
-        width: 100%;
-        height: unit(4, rpx);
-        background: #F9F9F9;
-        margin: unit(50, rpx) 0;
-      }
+    &-line {
+      width: 120%;
+      height: 1px;
+      background: #eee;
+      margin: unit(60, rpx) unit(-35, rpx) 0 unit(-35, rpx);
+    }
 
-      &-tab {
+    &-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;
-        font-size: unit(28, rpx);
-        margin-bottom: unit(46, rpx);
-
-        & > view {
-          width: unit(214, rpx);
-          height: unit(60, rpx);
-          text-align: center;
-          line-height: unit(60, rpx);
-          margin-right: unit(50, rpx);
-          border-radius: unit(30, rpx);
-        }
       }
 
-      &-tips {
-        font-size: unit(20, rpx);
-        margin-bottom: unit(46, rpx);
+    }
+
+    &-tab {
+      display: flex;
+      align-items: center;
+      font-size: unit(28, rpx);
+      margin-bottom: unit(46, rpx);
+      margin-top: unit(46, 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(46, rpx);
+    }
+
+    &-card {
+      &-item {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        border: unit(2, rpx) solid #eeeeee;
+        border-radius: unit(20, rpx);
+        margin-bottom: unit(30, rpx);
+        background: #fff;
 
-      &-card {
-        &-item {
+        &-left {
+          width: unit(200, rpx);
           display: flex;
+          flex-direction: column;
           align-items: center;
-          justify-content: flex-start;
-          border: unit(2, rpx) solid #EEEEEEFF;
-          border-radius: unit(20, rpx);
-          margin-bottom: unit(30, rpx);
-
-          &-left {
-            width: unit(200, rpx);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            font-size: unit(24, rpx);
+          justify-content: center;
+          font-size: unit(24, rpx);
+          .login_style{
+            min-width: 80rpx;
+            padding: 4rpx 16rpx;
+            text-align: center;
           }
+        }
 
-          &-right {
-            flex: 1;
-            border-left: unit(2, rpx) solid #EEEEEEFF;
+        &-right {
+          flex: 1;
+          border-left: unit(2, rpx) solid #eeeeee;
 
-            &-top {
-              border-bottom: unit(2, rpx) solid #EEEEEEFF;
-              padding: unit(30, rpx);
+          &-top {
+            border-bottom: unit(2, rpx) solid #eeeeee;
+            padding: unit(30, rpx) unit(20, rpx);
 
-              & > view:nth-child(1) {
-                display: flex;
-                font-size: unit(28, rpx);
-                margin-bottom: unit(20, rpx);
-              }
+            & > view:nth-child(1) {
+              display: flex;
+              font-size: unit(28, rpx);
+              margin-bottom: unit(18, rpx);
+            }
 
-              & > view:nth-child(2) {
-                /*display: flex;*/
-                /*align-items: center;*/
-                font-size: unit(18, rpx);
-                color: #777777;
+            & > view:nth-child(2) {
+              font-size: unit(24, rpx);
+              color: #666;
 
-                & > view:nth-child(1) {
-                  margin-right: unit(30, rpx);
-                }
+              & > view:nth-child(1) {
+                margin-right: unit(30, rpx);
               }
             }
+          }
 
-            &-bottom {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              padding: unit(30, rpx);
-
-              &-info {
-                &-residue {
-                  font-size: unit(24, rpx);
-                  margin-bottom: unit(8, rpx);
-                }
-
-                &-deduction {
-                  font-size: unit(18, rpx);
-                  color: #777777;
-                }
+          &-bottom {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: unit(20, rpx) unit(20, rpx);
+
+            &-info {
+              &-residue {
+                font-size: unit(24, rpx);
+                margin-bottom: unit(8, rpx);
               }
 
-              & > view:nth-child(2) {
-                width: unit(80, rpx);
-                height: unit(40, rpx);
-                border-radius: unit(20, rpx);
-                font-size: unit(22, rpx);
-                color: #fff;
-                text-align: center;
-                line-height: unit(40, rpx);
+              &-deduction {
+                font-size: unit(24, rpx);
+                color: #666;
               }
             }
-          }
 
+            & > view:nth-child(2) {
+              min-width: unit(80, rpx);
+              height: unit(40, rpx);
+              border-radius: unit(40, rpx);
+              font-size: unit(22, rpx);
+              color: #fff;
+              text-align: center;
+              line-height: unit(40, rpx);
+              padding: unit(4, rpx) unit(16, rpx);
+            }
+          }
         }
       }
+    }
 
-      &-disabled {
-        font-size: unit(28, rpx);
-        color: #B8B7BE;
-        margin-bottom: unit(30, rpx);
-      }
+    &-disabled {
+      font-size: unit(28, rpx);
+      color: #b8b7be;
+      margin-bottom: unit(30, rpx);
     }
   }
+}
 </style>