jufubao-forms 1.0.0-beta1

package/src/mixins/cardListMixins.js

@@ -0,0 +1,187 @@
+'use strict';
+import {mapMutations, mapState} from "vuex";
+
+export default {
+  data() {
+    return {
+      ajaxCardList: null, //接口返回原始数据
+
+      //卡券列表
+      cardOrgList:[], //原始数据
+      cardList:null, //计算后的卡列表
+      cardPageNum: 0, //当前页面
+      cardPageLen: 10, //每页获取数据调试
+      cardComputedList:[], //当前获取的数据列表
+      cardLoading: false, //加载状态值设置
+      cardNextTop: 0, //计算到每一个节点的距离顶部Top值
+      contentStatus: false, //内容框是否已经进行过计算距离顶部Top值状态
+      hasContent: true, //是否可以进行继续加载状态
+      cardIndex: 0,
+
+      //转换按钮
+      hasChangeStatus: false,//是否有转换按钮
+
+      cardItemEntry: '//img.jufubao.cn/component/card/card_item_entry.png?v1=11',
+      cardItem: '//img.jufubao.cn/component/card/card_item.png?v1=11',
+
+      showStatus:false,
+
+    }
+  },
+  computed:{
+    ...mapState(['srollPreview'])
+  },
+  created(){
+    this.setSrollPreview({
+      pageWindowPrevStart: 0,
+      pageWindowPrevEnd: uni.getSystemInfoSync().safeArea.height,
+    });
+    this.showStatus = true;
+  },
+
+
+  methods:{
+    ...mapMutations(['setSrollPreview']),
+
+    onJfbHide(){
+      this.showStatus = false;
+    },
+
+    onJfbShow(options){
+      this.showStatus = true;
+      this.clearDefault();
+      this.onJfbLoad(options);
+    },
+
+    setCardItemShow({height , top},index){
+
+      //预览模式只获取10条
+      if(this.$configProject.isPreview) {
+        //console.log(this.cardPageLen, index, this.cardPageLen > index)
+        return this.cardPageLen > index;
+      }
+
+      //打包模式
+      let fiexd = 50;
+      let boxTop = top + height + fiexd;
+      let boxBottom = top - (fiexd);
+      let {pageWindowPrevStart, pageWindowPrevEnd} = this.srollPreview;
+
+      //console.log(height,top,pageWindowPrevStart,pageWindowPrevEnd)
+      return boxTop > pageWindowPrevStart && boxBottom < pageWindowPrevEnd;
+    },
+
+    getBoxTop(){
+      return new Promise((resolve, reject)=>{
+        const query = uni.createSelectorQuery().in(this);
+        query.select('.card-content').boundingClientRect(data=>{
+          this.cardNextTop = data.top;
+          this.contentStatus = true;
+          resolve();
+        }).exec()
+      })
+
+    },
+
+    async handleCardComputed(paddingBottom=30){
+      this.$xdShowLoading({});
+      if(this.contentStatus === false)  await this.getBoxTop();
+      this.$nextTick(()=>{
+        const query = uni.createSelectorQuery().in(this);
+        query.selectAll('.computed-box').boundingClientRect(data => {
+          let arr = data.map(item=>{
+            let card =  this.cardComputedList.filter(it=>{
+              return item.dataset.card === it.card_number;
+            })[0];
+            card['height'] = item.height;
+            card['top'] =  this.cardNextTop;
+            card['index'] = this.cardIndex;
+            this.cardNextTop =  this.cardNextTop + card['height'] +  (paddingBottom * this.$rpxNum);
+            this.cardIndex++;
+            return card
+          });
+          this.cardList = (this.cardList||[]).concat(arr);
+          this.$xdHideLoading();
+        }).exec();
+      })
+    },
+
+    handleCardInit(cardList,type,paddingBottom =30){
+      let newCardList = this.$xdUniHelper.cloneDeep(cardList);
+      let validCardList = this.getCardGroupItem(newCardList.list.filter((item) => {
+        // 判断type是否为'is_valid'
+        if (type === 'is_valid') {
+          // 如果是，则返回item.is_transfering是否不等于'Y'
+          return item[type] === 'Y' && item.is_transfering !== 'Y';
+        } else if(type === 'is_exchange') {
+          // 如果是，则返回item.is_transfering是否不等于'Y'
+          return item[type] === 'Y' && item.is_transfering !== 'Y';
+        } else {
+          // 否则，返回item[type]是否等于'Y'
+          return item[type] === 'Y';
+        }
+      }), newCardList['site_entry_settings']).map((item,index)=>{
+        item['index'] = index;
+        return item
+      });
+      console.log(validCardList,'validCardListvalidCardList');
+
+
+      this.cardOrgList = this.$xdUniHelper.cloneDeep(validCardList);
+      console.warn(`cardOrgList:${this.cardOrgList.length}`)
+      this.cardComputedList = this.$xdUniHelper.cloneDeep(this.cardOrgList).slice(this.cardPageNum,this.cardPageLen);
+      if(this.cardComputedList.length < this.cardPageLen) {
+        this.hasContent = false;
+      }
+      this.handleCardComputed(paddingBottom).then().catch();
+    },
+
+    onJfbScroll({e}){
+      if(this.showStatus) {
+        this.setSrollPreview({
+          pageWindowPrevStart: e.scrollTop,
+          pageWindowPrevEnd:e.scrollTop + uni.getSystemInfoSync().safeArea.height
+        })
+      }
+    },
+
+    onJfbReachBottom(){
+      //加载在不处理,无下一页不处理，当前也为0不处理
+      if(this.cardLoading || !this.hasContent || this.cardPageNum === 0) return;
+      this.cardLoading = true;
+      this.$xdShowLoading({});
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          this.cardLoading = false;
+          this.$xdHideLoading();
+          this.cardComputedList = this.$xdUniHelper.cloneDeep(this.cardOrgList).slice(
+            this.cardPageNum*this.cardPageLen,
+            this.cardPageNum*this.cardPageLen + this.cardPageLen
+          );
+          this.handleCardComputed().then().catch();
+          if(this.cardComputedList.length < this.cardPageLen) {
+            this.hasContent = false;
+          }
+          this.cardPageNum++;
+        },500)
+      })
+
+    },
+
+    clearDefault(){
+      this.cardOrgList = [];
+      this.cardList = null;
+      this.cardPageNum = 0;
+      this.cardComputedList = [];
+      this.cardLoading = false;
+      this.cardNextTop = 0;
+      this.contentStatus = false;
+      this.hasContent = true;
+      this.cardIndex = 0;
+      this.ajaxCardList = null;
+      //this.hasChangeStatus = false;
+    }
+  }
+}
+
+

package/src/mixins/colorCardMixins.js

@@ -0,0 +1,122 @@
+'use strict';
+import {mapActions, mapMutations} from 'vuex';
+import storage from "@/common/storage";
+import getServiceUrl from "@/common/getServiceUrl";
+
+export default {
+  data() {
+    return {
+      colorObj : {},
+    }
+  },
+
+  created(){
+    this.colorObj = this.$colorConfig || getApp().globalData.$colorConfig;
+  },
+
+  methods: {
+    stringToNumber(str) {
+      let result = 0;
+      let len = str.length;
+      for (let i = 0; i < len; i++) {
+        result = result + str.charCodeAt(i) + i;
+      }
+      return result;
+    },
+    getCardThemes(name , disabled='N') {
+      let colorLen = this.colorObj.cardThemesColor.length;
+      let imgLen =  this.colorObj.cardThemesImage.length;
+      let colorIndex = this.stringToNumber(name) % colorLen;
+      let imgIndex = this.stringToNumber(name) % imgLen;
+      return {
+        color: disabled === 'N' ?  this.colorObj.cardThemesColor[colorIndex]: this.getDisabledColor(),
+        image:  this.colorObj.cardThemesImage[imgIndex],
+      }
+    },
+    getEntry(codes = [], allEntry = []) {
+      //无支持业务线或者未配置业务入口
+      if (codes.length === 0 || allEntry.length === 0) return [];
+
+      let support = [];
+      codes.map(bus => {
+        allEntry.map(it => {
+          it['image_url'] = getServiceUrl(it['image_url'])
+          if (bus === it['business_code']) {
+            support.push(it);
+          }
+        })
+      });
+      return support
+    },
+
+    filterNotSupportEntry(allEntry){
+      let isH5FilterEntryList = [];
+      let isMpFilterEntryList = [];
+      allEntry =  allEntry.map(item=>{
+        try {
+          if(!item.redirect_data) item.redirect_data = null;
+          else {
+            item.redirect_data = JSON.parse(item.redirect_data);
+            item.redirect_data.appType = item.redirect_data.appType || 'h5';
+          }
+        }catch (e){
+          item.redirect_data = null
+        }
+        return item;
+      })
+        .filter(item=>{
+          //地址不存在
+          if(!item.redirect_data) return false
+
+          //#ifdef H5
+          //在H5平台应用中不可跳转到微信小程序应用
+          if(item.redirect_data.appType === 'wxmp'){
+            isH5FilterEntryList.push(item)
+          }
+          return item.redirect_data.appType !== 'wxmp';
+          //#endif
+
+          //#ifdef MP-WEIXIN
+          const dir = item['redirect_data'].dir;
+          const actDir = this.projectAttr['deploy_dir'];
+          if(item.redirect_data.appType === 'wxmp') {
+            if(dir !== actDir) isMpFilterEntryList.push(item)
+            return dir === actDir;
+          }
+          return true
+          //#endif
+
+        });
+
+      //#ifdef MP-WEIXIN
+      console.warn(`微信小程序端被过滤的入口列表：${JSON.stringify(isMpFilterEntryList.map(item=> `${item.redirect_data.appType}:${item.entry_name}:${item.redirect_data['frontPath']}`),null,2)}`)
+      //#endif
+      //#ifdef H5
+      console.warn(`H5端被过滤的入口列表：${JSON.stringify(isH5FilterEntryList.map(item=> `${item.redirect_data.appType}:${item.entry_name}:${item.redirect_data['frontPath']}`),null,2)}`)
+      //#endif
+      console.warn(`福利入口链接列表:${JSON.stringify(allEntry.map(item=> `${item.redirect_data.appType}:${item.redirect_data.appType === 'h5'?(item.redirect_data['site_url'] || item.redirect_data['path']) :item.redirect_data['path']}`),null,2)}`);
+
+      return allEntry
+    },
+
+    getCardGroupItem(list, allEntry, disabled='N') {
+      list.map(item => {
+        //设置卡片样式
+        item['theme'] = this.getCardThemes(item['card_type_name'], disabled);
+        item['entries'] = this.getEntry(item['business_codes'], allEntry)
+      });
+      return list
+    },
+
+    getDisabledColor(){
+      return  this.colorObj.disableColor
+    },
+    getMergBg(disabled = 'Y'){
+      return disabled === 'Y' ?  this.colorObj['mergIcon'][1]
+        :  this.colorObj['mergIcon'][0]
+    },
+    getNoData(){
+      return this.colorObj.nodata
+    }
+  }
+}