ec.uniapp-master/pages/pointStore/index/index.vue

<template>
<view id="pointstore-index">

    <view class="contents">
        <view class="list">
            <view class="top">
                <view class="login" v-if="!token" @tap="jumpLogin">
                    快速登录 / 注册
                </view>
                <view class="point-info" :style="'background: ' + config.mainColor" v-else>
                    <view class="left">
                        <view>
                            当前积分
                        </view>
                        <view class="num">
                            {{point.pointValid}}
                        </view>
                    </view>
                    <view class="right">
                        <view class="record" @tap="jumpRecord">兑换记录</view>
                    </view>
                </view>
            </view>
            <view class="no-list" v-if="init">暂无可兑换商品</view>
            <view class="commodity-bottom" v-else>
                <view v-for="(item, idx) in storeList" :key="idx">
                    <view class="commodity-out" :data-id="item.id" v-for="(item, index) in storeList[idx]" :key="index" @tap="jump">
                        <view class="commodity-box">
                            <view class="commodity-img">
                                <image mode="widthFix" :src="item.img"></image>
                            </view>
                            <view class="commodity-name">
                                {{item.name}}
                            </view>
                            <view class="commodity-money">
                                <view class="money">
                                    {{item.redeem_point}}积分
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="loadingbox" :hidden="!show">
                    正在加载下一页数据
                </view>
            </view>
        </view>
    </view>
</view>
</template>
<script>
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';

export default {
  data() {
    return {
      page: 1,
      storeList: [],
      meta: '',
      show: false,
      point: {},
      token: '',
      init: false,
      config: ''
    };
  },

  onReachBottom() {
    var hasMore = this.meta.pagination.total_pages > this.meta.pagination.current_page;

    if (hasMore) {
      this.setData({
        show: true
      });
      var query = {
        is_largess: 1
      };
      var page = this.meta.pagination.current_page + 1;
      this.queryCommodityList(query, page);
    } else {
      wx.showToast({
        image: '../../../static/error.png',
        title: '再拉也没有啦'
      });
    }
  },

  onLoad() {
    // 第三方平台配置颜色
    var gbConfig = this.$cookieStorage.get('globalConfig') || '';
    this.setData({
      config: gbConfig
    });
    var token = this.$cookieStorage.get('user_token');
    this.setData({
      token: token
    });

    if (token) {
      this.queryUserPoint('default');
    }

    var query = {
      is_largess: 1
    };
    this.queryCommodityList(query);
  },

  methods: {
    jump(e) {
      var id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/pointStore/detail/detail?id=' + id
      });
    },

    jumpRecord() {
      wx.navigateTo({
        url: '/pages/pointStore/record/record'
      });
    },

    jumpLogin() {
      var url = getUrl();
      wx.navigateTo({
        url: '/pages/user/register/register?url=' + url
      });
    },

    // 商品列表
    queryCommodityList(query = {}, page = 1) {
      var params = Object.assign({}, query, {
        page
      });
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      this.$http.get({
        api: 'api/store/list',
        data: params
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            // 商品列表页赋值
            this.setData({
              [`storeList.${page - 1}`]: res.data,
              meta: res.meta
            });

            if (res.data != '') {
              this.setData({
                init: false
              });
            } else {
              this.setData({
                init: true
              });
            }
          } else {
            wx.showModal({
              title: '',
              content: res.message,
              showCancel: false
            });
          }
        } else {
          wx.showModal({
            title: '',
            content: "请求失败",
            showCancel: false
          });
        }

        this.setData({
          show: false
        });
        wx.hideLoading();
      }).catch(rej => {
        wx.showModal({
          title: '',
          content: '请求失败',
          success: res => {
            if (res.confirm) {}
          }
        });
        this.setData({
          show: false
        });
        wx.hideLoading();
      });
    },

    // 查询用户积分
    queryUserPoint(type) {
      var token = this.$cookieStorage.get('user_token');
      this.$http.get({
        api: 'api/users/point',
        header: {
          Authorization: token
        },
        data: {
          type: type
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;
          this.setData({
            point: res.data
          });
        } else {
          wx.showModal({
            content: '请求失败',
            showCancel: false
          });
        }
      });
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  },
  computed: {},
  watch: {}
};
</script>
<style rel="stylesheet/less" lang="less">
    @import "index";
</style>