|
|
@@ -1,186 +1,211 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <!-- <view class="top">
|
|
|
- 普及培训
|
|
|
- </view> -->
|
|
|
- <swiper class="swiper-box" duration="300" @change="changeTab">
|
|
|
- <swiper-item class="tab-content">
|
|
|
- <scroll-view class="list-scroll-content" scroll-y >
|
|
|
- <!-- 空白页 -->
|
|
|
- <empty v-if="loadingType === true && list.length === 0"></empty>
|
|
|
- <!-- 订单列表 -->
|
|
|
- <view class="order-item" @click="ToDetail(item)" v-for="(item, index) in list" :key="index">
|
|
|
- <view class="list-cell">
|
|
|
- <image class="image" :src="item.img"></image>
|
|
|
- <view class="list-tpl">{{ item.title }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
-import empty from '@/components/empty';
|
|
|
-import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
-import { myTrainingList } from '@/api/index.js';
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- uniLoadMore,
|
|
|
- empty,
|
|
|
- uniPopup
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- page: 1, //当前页数
|
|
|
- limit: 6, //每次信息条数
|
|
|
- list: [],
|
|
|
- loadingType: 'more', //加载更多状态
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- console.log(22)
|
|
|
- this.loadData();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //获取订单列表
|
|
|
- loadData(type) {
|
|
|
- //这里是将订单挂载到tab列表下
|
|
|
- let obj = this;
|
|
|
- if (type != 'refresh') {
|
|
|
- console.log(obj.loadingType, '456');
|
|
|
- //没有更多数据直接跳出方法
|
|
|
- if (obj.loadingType === 'nomore') {
|
|
|
- return;
|
|
|
- } else {
|
|
|
- // 设置当前为数据载入中
|
|
|
- obj.loadingType = 'loading';
|
|
|
- }
|
|
|
- } else {
|
|
|
- //当重新加载数据时更新状态为可继续添加数据
|
|
|
- obj.loadingType = 'more';
|
|
|
- }
|
|
|
- myTrainingList({})
|
|
|
- .then(data => {
|
|
|
- if (type === 'refresh') {
|
|
|
- obj.list = [];
|
|
|
- }
|
|
|
- let arr = data.data
|
|
|
- obj.list = obj.list.concat(arr);
|
|
|
- //判断是否还有下一页，有是more 没有是nomore
|
|
|
- if (obj.limit == arr.length) {
|
|
|
- obj.page++;
|
|
|
- obj.loadingType = 'more';
|
|
|
- } else {
|
|
|
- obj.loadingType = 'nomore';
|
|
|
- }
|
|
|
- // 判断是否为刷新数据
|
|
|
- if (type === 'refresh') {
|
|
|
- console.log('refresh');
|
|
|
- // 判断是否为点击搜索按钮跳转加载
|
|
|
- if (obj.loading == 1) {
|
|
|
- uni.hideLoading();
|
|
|
- } else {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- obj.loadingType = 'nomore';
|
|
|
- uni.hideLoading();
|
|
|
- });
|
|
|
- },
|
|
|
- //跳转到详情
|
|
|
- ToDetail(e) {
|
|
|
- let type = e.type;
|
|
|
- let id = e.id;
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/form/certificates?type=' + type+'&id='+id
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- background: #F2F2F2;
|
|
|
- height: 100%;
|
|
|
- padding-bottom: 25rpx;
|
|
|
-}
|
|
|
-.container {
|
|
|
- height: 100%;
|
|
|
- .top{
|
|
|
- background-color: #FFFFFF;
|
|
|
- height: 88rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .swiper-box {
|
|
|
- height:100%;
|
|
|
- .list-scroll-content {
|
|
|
- height:100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.scroll-list {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- background-color: #ffffff;
|
|
|
- font-size: 32rpx;
|
|
|
- .scoll-box {
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- margin: 0rpx 38rpx;
|
|
|
- padding: 15rpx 0rpx;
|
|
|
- .scoll-img {
|
|
|
- width: 130rpx;
|
|
|
- height: 85rpx;
|
|
|
- border-radius: 100%;
|
|
|
- image {
|
|
|
- width: 85rpx;
|
|
|
- height: 100%;
|
|
|
- border-radius: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .scoll-name {
|
|
|
- padding-top: 15rpx;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- color: #ef3d28;
|
|
|
- border-bottom: 6rpx solid #ef3d28;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.order-item {
|
|
|
- width: 100%;
|
|
|
- padding: 0rpx 25rpx;
|
|
|
- padding-top: 25rpx !important;
|
|
|
- .list-cell {
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- width: 100%;
|
|
|
- box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 300rpx;
|
|
|
- border-top-left-radius: 25rpx;
|
|
|
- border-top-right-radius: 25rpx;
|
|
|
- }
|
|
|
- .list-tpl {
|
|
|
- padding: 25rpx 25rpx;
|
|
|
- padding-bottom: 35rpx !important;
|
|
|
- font-size: 34rpx;
|
|
|
- color: #222222;
|
|
|
- font-weight:500;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- <view class="top">
|
|
|
+ 普及培训
|
|
|
+ </view> -->
|
|
|
+ <swiper class="swiper-box" duration="300" @change="changeTab">
|
|
|
+ <swiper-item class="tab-content">
|
|
|
+ <scroll-view class="list-scroll-content" scroll-y>
|
|
|
+ <!-- 空白页 -->
|
|
|
+ <empty v-if="loadingType === true && list.length === 0"></empty>
|
|
|
+ <!-- 订单列表 -->
|
|
|
+ <view class="order-item" @click="ToDetail(item)" v-for="(item, index) in list" :key="index">
|
|
|
+ <view class="list-cell">
|
|
|
+ <image class="image" :src="baseURL + item.training.image"></image>
|
|
|
+ <view class="list-tpl">{{ item.training.title }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ {{ item.training.title }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
+ import empty from '@/components/empty';
|
|
|
+ import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
+ import {
|
|
|
+ myTrainingList
|
|
|
+ } from '@/api/index.js';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ uniLoadMore,
|
|
|
+ empty,
|
|
|
+ uniPopup
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 6, //每次信息条数
|
|
|
+ list: [],
|
|
|
+ loadingType: 'more', //加载更多状态
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ console.log(22)
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['baseURL'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取订单列表
|
|
|
+ loadData(type) {
|
|
|
+ //这里是将订单挂载到tab列表下
|
|
|
+ let obj = this;
|
|
|
+ if (type != 'refresh') {
|
|
|
+ console.log(obj.loadingType, '456');
|
|
|
+ //没有更多数据直接跳出方法
|
|
|
+ if (obj.loadingType === 'nomore') {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ // 设置当前为数据载入中
|
|
|
+ obj.loadingType = 'loading';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ //当重新加载数据时更新状态为可继续添加数据
|
|
|
+ obj.loadingType = 'more';
|
|
|
+ }
|
|
|
+ myTrainingList({})
|
|
|
+ .then(data => {
|
|
|
+ if (type === 'refresh') {
|
|
|
+ obj.list = [];
|
|
|
+ }
|
|
|
+ let arr = data.data
|
|
|
+ obj.list = obj.list.concat(arr);
|
|
|
+ //判断是否还有下一页，有是more 没有是nomore
|
|
|
+ if (obj.limit == arr.length) {
|
|
|
+ obj.page++;
|
|
|
+ obj.loadingType = 'more';
|
|
|
+ } else {
|
|
|
+ obj.loadingType = 'nomore';
|
|
|
+ }
|
|
|
+ // 判断是否为刷新数据
|
|
|
+ if (type === 'refresh') {
|
|
|
+ console.log('refresh');
|
|
|
+ // 判断是否为点击搜索按钮跳转加载
|
|
|
+ if (obj.loading == 1) {
|
|
|
+ uni.hideLoading();
|
|
|
+ } else {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ obj.loadingType = 'nomore';
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //跳转到详情
|
|
|
+ ToDetail(e) {
|
|
|
+ let type = e.type;
|
|
|
+ let id = e.id;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/form/certificates?type=' + type + '&id=' + id
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ background: #F2F2F2;
|
|
|
+ height: 100%;
|
|
|
+ padding-bottom: 25rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-box {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .list-scroll-content {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-list {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ background-color: #ffffff;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ .scoll-box {
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0rpx 38rpx;
|
|
|
+ padding: 15rpx 0rpx;
|
|
|
+
|
|
|
+ .scoll-img {
|
|
|
+ width: 130rpx;
|
|
|
+ height: 85rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 85rpx;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scoll-name {
|
|
|
+ padding-top: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #ef3d28;
|
|
|
+ border-bottom: 6rpx solid #ef3d28;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-item {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0rpx 25rpx;
|
|
|
+ padding-top: 25rpx !important;
|
|
|
+
|
|
|
+ .list-cell {
|
|
|
+ // background-color: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+ box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ border-top-left-radius: 25rpx;
|
|
|
+ border-top-right-radius: 25rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-tpl {
|
|
|
+ padding: 25rpx 25rpx;
|
|
|
+ padding-bottom: 35rpx !important;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #222222;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
