new-mshop-view/pages/users/shareholders/mer_center.vue

<!--共创股东 - 用户共创股东中心-->
<template>
  <view>
    <view class="main-content">
      <!--顶部内容-->
      <view class="top" :style="{ 'background-image': `url(${top_icon})`}">
        <view class="top-half">
          <view class="num">{{ statistics.sum_integral_total || '0.00' }}</view>
          <view class="title">全部积分</view>
        </view>
        <view class="bottom-half">
          <view class="bottom-box">
            <view class="num">{{ statistics.sum_used_surplus || '0.00' }}</view>
            <view class="label">可用积分</view>
          </view>
          <view class="bottom-box">
            <view class="num">{{ statistics.sum_integral_use || '0.00' }}</view>
            <view class="label">已使用积分</view>
          </view>
          <view class="bottom-box">
            <view class="num">{{ statistics.sum_used_overdue || '0.00' }}</view>
            <view class="label">已过期积分</view>
          </view>
        </view>
      </view>
      <!--列表内容-->
      <view class="list-content" v-if="Object.values(list).length > 0">
        <!--标题-->
        <view class="title">商户列表</view>
        <!--列表-->
        <view class="list-box" v-for="(item,index) in list" :key="index">
          <image class="mer-image" :src="item.merchant.mer_avatar || default_mer_logo" mode="widthFix"></image>
          <view class="mer-info">
            <view class="mer_name">{{ item.merchant.mer_name || '' }}</view>
            <view class="integral">可用积分：{{ item.statistics.sum_used_surplus || '0.00' }}</view>
          </view>
          <view class="see-btn" v-if="item.statistics.sum_integral_total > 0" @click="goToPage(item)">积分详情</view>
        </view>
      </view>
      <emptyPage v-else title="暂无信息～"></emptyPage>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import emptyPage from '@/components/emptyPage.vue';
import authorize from '@/components/Authorize';
import { HTTP_REQUEST_URL } from '@/config/app.js';
import {merShareholdersIntegralStatistics, merShareholdersMerList} from "@/api/user";

export default {
  components: {
    authorize,
    emptyPage
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      top_icon: '',
      default_mer_logo: '',
      // 列表
      total: 0,
      list: [],
      page: 1,
      statistics: {},
    }
  },
  watch: {},
  onReady() {
    this.top_icon = `${HTTP_REQUEST_URL}/static/images/icon/top_half_icon.png`;
    this.default_mer_logo = `${HTTP_REQUEST_URL}/static/images/icon/default_mer_logo.png`;
  },
  onLoad(options) {
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  // 滚动到底部
  onReachBottom() {
    this.getList();
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      this.getList();
      this.getStatistics();
    },
    // 信息获取
    getList() {
      let _this = this;
      let params = {
        page: _this.page
      };
      merShareholdersMerList(params).then(res => {
        let list = res.data.list || {};
        _this.total = res.data.count || 0;
        if (Object.values(list).length > 0) {
          _this.list = _this.$util.SplitArray(list, _this.list);
          _this.$set(_this, 'list', _this.list);
          _this.page++;
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 统计信息获取
    getStatistics() {
      let _this = this;
      merShareholdersIntegralStatistics({}).then(res => {
        _this.statistics = res.data || {};
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 点击查看详情
    goToPage(item){
      uni.navigateTo({
        url: '/pages/users/shareholders/mer_integral?mer_id=' + item.mer_id
      })
    }


  }
}
</script>

<style lang="scss" scoped>
.main-content {
  width: 100vw;
  min-height: 100vh!important;
  background: #f6f6f6;// #f6f6f6

  .top{
    width: 100%;
    padding: 0 30rpx;
    background-size: 100% auto;
    background-repeat: no-repeat;

    .top-half{
      width: 100%;
      padding: 0 20rpx;
      height: 220rpx;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: center;
      .num{
        color: #ffffff;
        font-size: 50rpx;
        height: 80rpx;
        line-height: 80rpx;
      }
      .title{
        color: #ffffff;
        font-size: 30rpx;
        height: 50rpx;
        line-height: 50rpx;
      }
    }
    .bottom-half{
      width: 100%;
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 30rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      box-shadow: 0rpx 5rpx 10rpx 0rpx #f0f0f0;
      .bottom-box{
        width: calc(100% / 3);
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        .num{
          font-size: 34rpx;
          font-weight: bold;
          color: #000000;
          height: 60rpx;
          line-height: 60rpx;
        }
        .label{
          font-size: 26rpx;
          color: #383838;
          height: 50rpx;
          line-height: 50rpx;
        }
      }
    }
  }

  .list-content{
    width: 100%;
    padding: 0 30rpx;

    .title{
      width: 100%;
      padding: 0 20rpx;
      font-size: 32rpx;
      font-weight: bold;
      height: 100rpx;
      line-height: 100rpx;
    }
    .list-box{
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 30rpx 20rpx;
      width: 100%;
      box-shadow: 0rpx 0rpx 10rpx 0rpx #f0f0f0;
      margin-bottom: 30rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      .mer-image{
        width: 90rpx!important;
        height: 90rpx!important;
        border-radius: 10rpx;
      }
      .mer-info{
        width: calc(100% - 90rpx - 140rpx);
        padding: 0 20rpx;
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        .mer_name{
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 32rpx;
        }
        .integral{
          font-size: 26rpx;
          height: 40rpx;
          line-height: 40rpx;
          color: #555555;
        }
      }
      .see-btn{
        border-radius: 100rpx;
        font-size: 26rpx;
        background-color: #d20001;
        color: #f1f1f1;
        height: 45rpx;
        line-height: 45rpx;
        width: 140rpx;
        text-align: center;
      }
    }
  }
}
</style>