yicangzongtai_app_240321/pages/freeCollection/index.vue

<template>
  <view class="main">
    <navbar ref="navbar" :config="config" backColor="#666">
      <!-- <text slot="right" class="page-tip" @click="showTip()">
				<text class="tip">免费领:{{count}}次</text>
				<text class="iconfont2">&#xe66b;</text>
			</text> -->
    </navbar>
    <welfareGoods :listData="listData" @tabChange="tabChange"></welfareGoods>
    <u-loadmore :status="loadStatus" />
    <uni-popup class="tip-popup" ref="tipPopup" type="center" :mask-click="false" z-index="1000">
      <view class="content-box" style="width: 630rpx;">
        <view class="title">申领物资说明</view>
        <view class="content">
          <scroll-view scroll-y class="tip" style="width: 510rpx;max-height: 50vh;overflow-y: auto;">
            <view class="ql-editor-box">
              <jyf-parser :html="$mUtil.formatRichText(applyRule)" ref="article"></jyf-parser>
            </view>
          </scroll-view>
          <button class="btn" @click="closePopup()">知道了</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import jyfParser from "@/components/jyf-parser/jyf-parser";
  export default {
    components: {
      jyfParser
    },
    data() {
      return {
        config: {
          back: true,
          title: '激活区商品',
          color: '#1a1a1a',
          backgroundColor: [1, '#fff'],
          statusBarFontColor: 'black',
          rightSlot: true
        },
        applyRule: '',
        count: '', // 免费领次数
        pageParams: {
          page: 1,
          limit: 10,
          order_type: 1, // 1是综合（设置的顺序），2是新品，3价格，4销量
          order_mode: '',
          area_feature: 1 // 0,普通商品,1服务体系礼包,2新人惠选区,3公益申领)
        },
        hxCategoryId: null,
        listData: [],
        loadStatus: 'loadmore', //loading / nomore
      }
    },
    onShow() {
      // this.getCount();
    },
    onLoad(options) {
      if (options && options.hxCategoryId) {
        this.hxCategoryId = options.hxCategoryId
        this.$set(this.config, 'title', options.title || '商品列表');
      } else {
        this.$set(this.config, 'title', '复购区');
      }
      this.getList(true);
      this.getApplyProtocol();
      this.$refs.navbar.init();
    },
    onPullDownRefresh() {
      this.getList(true);
      this.getApplyProtocol();
      uni.stopPullDownRefresh();
    },
    methods: {
      showTip() {
        this.$refs.tipPopup.open();
      },
      closePopup() {
        this.$refs.tipPopup.close();
      },
      //物质申领协议
      getApplyProtocol() {
        return this.$http.get('/protocolConfig/info/claiming-rules')
          .then(res => {
            if (res.code == 200) {
              this.applyRule = res.data.content
            }
          })
      },
      //获取免费领次数
      // getCount(){
      // 	this.$http.get('/freebaggive/limit',{})
      // 	.then(res=>{
      // 		if (res.code == 200) {
      // 			this.count = res.data;
      // 		}
      // 	})
      // },
      // 获取列表
      getList(isRefresh, needLoading = false) {
        let that = this;
        if (!isRefresh && this.loadStatus == 'nomore') {
          return false;
        }
        this.pageParams.page = isRefresh ? 1 : this.pageParams.page + 1;
        this.listData = isRefresh ? [] : this.listData;
        if (needLoading) {
          uni.showLoading({
            title: '努力加载中...',
            mask: true
          });
        }
        this.loadStatus = 'loading';
        if (this.hxCategoryId) {
          this.pageParams.hx_category_id = this.hxCategoryId
        }
        this.$http.get('/goodsareafeature/page', this.pageParams)
          .then(res => {
            if (res.code == 200) {
              let listData = that.listData;
              listData.push(...res.page.list);
              that.listData = listData;
              that.loadStatus = that.listData.length >= res.page.totalCount ? 'nomore' : 'loadmore';
            }
          })
          .finally(() => {
            if (needLoading) {
              uni.hideLoading();
            }
          })
      },
      tabChange(tab) {
        this.pageParams = {
          ...this.pageParams,
          order_type: tab.index + 1,
          order_mode: tab.sort
        }
        this.getList(true);
      }
    },
    onReachBottom() {
      this.getList();
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    padding: 0 0 30rpx 0;

    .page-tip {
      margin-right: 30rpx;

      .tip {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #999999;
        vertical-align: middle;
        margin-right: 13rpx;
      }

      .iconfont2 {
        font-size: 45rpx;
        color: #666666;
        vertical-align: middle;
      }
    }

    .ql-editor-box {

      // 重写全局的 富文本样式，减去左右内边距（padding）
      /deep/ .ql-indent-3 {
        margin-left: calc(288rpx - 240rpx);
      }

      /deep/ .ql-indent-4 {
        margin-left: calc(384rpx - 240rpx);
      }

      /deep/ .ql-indent-5 {
        margin-left: calc(480rpx - 240rpx);
      }

      /deep/ .ql-indent-6 {
        margin-left: calc(576rpx - 240rpx);
      }

      /deep/ .ql-indent-7 {
        margin-left: calc(672rpx - 240rpx);
      }

      /deep/ .ql-indent-8 {
        margin-left: calc(768rpx - 240rpx);
      }

      /deep/ .ql-indent-4 {
        margin-left: calc(240rpx - 240rpx);
      }

      /deep/ .ql-indent-5 {
        margin-left: calc(300rpx - 240rpx);
      }
    }
  }
</style>