123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- <template>
- <view class="content">
- <scroll-view scroll-y class="scroll-box" @scrolltolower="handleLoadMore" :refresher-enabled="true"
- :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white" @refresherrefresh="onRefresh"
- @refresherrestore="onRestore">
- <view class="census-box">
- <view class="census-text">{{censusInfo.time}}</view>
- <view class="census-text">新增学员:<text>{{censusInfo.newCount}}</text></view>
- </view>
- <u-card :show-head="false" :show-foot="false" margin="10px 15px" borderRadius="40" v-for="(item, index) in tableList"
- :key="index" class="card-box">
- <view slot="body" class="card-content">
- <view class="student-info">
- <view class="info-name">{{item.studentName}}</view>
- <view class="info-type" :class="item.status == 1 ? 'info-type-active' : ''">{{item.status == 0 ? '未报名' : '已报名'}}</view>
- <view class="info-name" style="clear: left;">{{item.parentName}}</view>
- <view class="info-phone">{{item.parentPhone}}</view>
- </view>
- <u-image width="28px" height="28px" :src="item.type == 1 ? iconPath1 : iconPath2"></u-image>
- </view>
- </u-card>
- <u-divider v-if="isOver" bg-color="transparent" :style="{paddingTop : tableList.length == 0 ? '10px' : ''}">没有更多了</u-divider>
- </scroll-view>
- <u-top-tips ref="uTips"></u-top-tips>
- </view>
- </template>
- <script>
- import {
- mapGetters
- } from 'vuex'
- const NET = require('@/utils/request')
- const API = require('@/config/api')
- export default {
- computed: {
- ...mapGetters([
- 'mainColor'
- ])
- },
- data() {
- return {
- censusInfo: {
- time: '',
- newCount: '',
- },
- iconPath1: API.getServerImg + 'weibaoming.png',
- iconPath2: API.getServerImg + 'xianshangkehu.png',
- triggered: false,
- isOver: false,
- pageIndex: 1,
- tableList: [],
- }
- },
- onLoad() {
- this.getCensusData()
- this.getTableList()
- },
- onReady() {},
- methods: {
- // 获取新增统计数据
- getCensusData() {
- NET.request(API.getCensusInfo, {}, 'POST').then(res => {
- this.censusInfo = res.data
- }).catch(error => {
- this.$refs.uTips.show({
- title: error.message,
- type: 'warning',
- })
- })
- },
- // 下拉刷新
- onRefresh() {
- this.triggered = true
- this.isOver = false
- this.pageIndex = 1
- this.tableList = []
- this.getTableList()
- this.getCensusData()
- },
- // 重置下拉刷新状态
- onRestore() {
- this.triggered = 'restore'
- this.triggered = false
- },
- // 懒加载
- handleLoadMore() {
- if (!this.isOver) {
- this.pageIndex++
- this.getTableList()
- }
- },
- // 获取列表数据
- getTableList() {
- NET.request(API.getCensusList, {
- page: this.pageIndex,
- size: 10,
- }, 'POST').then(res => {
- this.triggered = false
- this.tableList = this.tableList.concat(res.data.row)
- this.isOver = res.data.row.length != 10
- }).catch(error => {
- this.triggered = false
- this.$refs.uTips.show({
- title: error.message,
- type: 'warning',
- })
- })
- }
- },
- }
- </script>
- <style>
- page {
- width: 100%;
- height: 100%;
- background-color: #f7f7f7;
- }
- </style>
- <style lang="scss" scoped>
- @import "@/static/css/themes.scss";
- .content {
- width: 100%;
- float: left;
- .census-box {
- display: flex;
- padding: 5px 15px;
- background-color: #fff;
- .census-text {
- flex: 1;
- font-size: 12px;
- line-height: 20px;
- color: #999999;
- text-align: center;
- }
- text {
- color: $mainColor;
- }
- }
- .scroll-box {
- width: 100%;
- height: 100vh;
- .card-box {
- .card-content {
- display: flex;
- align-items: center;
- .student-info {
- flex: 1;
- .info-name {
- width: 64px;
- float: left;
- line-height: 28px;
- font-size: 14px;
- font-weight: bold;
- }
- .info-type {
- padding: 0 10px;
- margin-top: 3px;
- border-radius: 20px;
- float: left;
- line-height: 20px;
- font-size: 10px;
- color: #FFFFFF;
- background-color: #999999;
- }
- .info-type-active {
- background-color: $mainColor;
- }
- .info-phone {
- width: calc(100% - 64px);
- float: left;
- line-height: 28px;
- font-size: 12px;
- color: #999999;
- }
- }
- }
- }
- }
- }
- </style>
|