zhishifufei_uniapp/pages/special/grade_list.vue

<template>
  
  <BaseContainer class="favorite" :fixedNav="false">
    <NavBarTitle title="我的收藏"   :height="88"/>
    <view v-if="type" ref="tabbar" class="tabbar">
      <view :class="{ on: active === 1 }" @click="tab(1)">资料</view>
      <view :class="{ on: active === 2 }" @click="tab(2)">老师</view>
      <view :class="{ on: active === 0 }" @click="tab(0)">课程</view>
    </view>
    <view v-if="makeGradeList.length" :class="{ material: active }" class="list">
			<template v-if="active < 2">
				<navigator
					v-for="(item, index) in makeGradeList"
					:key="item.id"
					:url="item.path"
					ref="box_center"
					class="list-item"
					@touchstart="drawStart"
					@touchmove="drawMove(index,$event)"
					@touchend="drawEnd(index,$event)"
					:style="{ left: activeHeaderMask === index ? '-120rpx' : '' }"
				>
					<view>
						<image mode="aspectFill" :src="item.image" alt="" />
						<!-- <view v-if="!active">{{ type == 1 ? item.types : item.type }}</view> -->
					</view>
					<view class="function-mask" :style="{visibility: activeHeaderMask === index ? 'visible' : 'hidden' }" @click.stop="activeHeaderMask = -1"></view>
					<view class="function">
						<view class="btn" @click.stop="cancelCollect(item)">取消收藏</view>
					</view>
					<view>
						<view>{{ item.title }}</view>
						<template v-if="active">
							<view :class="{ money: item.pay_type }" style="color:#23272E;">
								<template v-if="item.pay_type"> ￥<text >{{item.money}}</text> </template>
								<template v-else> 免费 </template>
							</view>
							<view>
								<view>{{ item.ficti + item.sales }}人已下载</view>
								<view class="button">去下载</view>
							</view>
						</template>
						<template v-else>
							<view v-if="item.label.length">
								<template v-for="(label, index) in item.label">
									<view v-if="index < 2" :key="index">{{ label }}</view>
								</template>
							</view>
							<view>
								<view :class="{ money: item.pay_type }">
									<template v-if="item.pay_type">
										￥<text>{{ item.is_pink ? item.pink_money : item.money }}</text>
									</template>
									<template v-else> 免费 </template>
								</view>
								<view v-if="!item.is_light && item.types !== 4">共{{ item.count }}节</view>
							</view>
						</template>
					</view>
					
				</navigator>
			</template>
			<template v-else>
				<navigator
					v-for="(item, index) in makeGradeList"
					:key="item.id"
					:url="item.path"
					ref="box_center"
					class="list-item lecturer-item"
					@touchstart="drawStart"
					@touchmove="drawMove(index,$event)"
					@touchend="drawEnd(index,$event)"
					:style="{ left: activeHeaderMask === index ? '-120rpx' : '' }"
				>
					<view>
						<image mode="aspectFill" :src="item.lecturer_head" alt="" />
						<!-- <view v-if="!active">{{ type == 1 ? item.types : item.type }}</view> -->
					</view>
					<view class="function-mask" :style="{visibility: activeHeaderMask === index ? 'visible' : 'hidden' }" @click.stop="activeHeaderMask = -1"></view>
					<view class="function">
						<view class="btn" @click.stop="cancelCollect(item)">取消收藏</view>
					</view>
					<view>
						<view class="lecturer-name">{{ item.lecturer_name }} <text v-for="(label, k) in item.label" class="label">{{ label }}</text></view>
						<template>
							<view class="lecturer-intro">{{ item.explain }}</view>
						</template>
					</view>
					
				</navigator>
			</template>
    </view>
    <view v-show="loading" class="loading">
      <text class="fa fa-spinner"></text>
    </view>
    <view v-if="loadend && gradeList.length" class="loaded">已全部加载</view>
    <view v-if="loadend && !gradeList.length">
      <image
        class="nothing"
        :src="getImgPath('/wap/first/zsff/images/no_collection.png')"
        v-if="type"
      />
      <image
        v-else
        class="nothing"
        :src="getImgPath('/wap/first/zsff/images/no_data_available.png')"
      />
    </view>
  </BaseContainer>
</template>

<script>
import { toggleCollectMaterial } from "@/api/material";
import { collectSpecial, getGradeList } from "@/api/special";
  import {
    getFollowList,
    follow
  } from "@/api/merchant";
import specialType from "@/constants/special-type";

export default {
  data() {
    return {
      loadend: false,
      loading: false,
      active: 0,
      type: 1,
      gradeList: [],
      min: 2,
      page: 1,
      limit: 10,
      count: 0,
			activeHeaderMask: -1,
    };
  },
  computed: {
    makeGradeList() {
      return this.gradeList.map((value) => {
        if (this.type) {
          value.types = specialType[value.type];
        }
				if (this.active < 2) {
					if ("is_light" in value) {
						if (value.is_light) {
							value.path = `/pages/special/single_details?id=${value.s_id}`;
						} else {
							value.path = `/pages/special/details?id=${value.s_id}`;
						}
					} else {
						value.path = `/pages/special/data_details?id=${value.id}`;
					}
				} else {
					value.path = `/pages/merchant/teacher_detail?id=${value.id}`;
				}
        return value;
      });
    },
  },
  watch: {
    active() {
      this.$set(this, "gradeList", []);
      this.page = 1;
      this.loadend = false;
      this.getGradeList();
    },
  },
  onLoad({ type = 1 }) {
    this.type = type;
    if (type == 1) {
      this.active = 1;
    }
    this.getGradeList();
  },
  onReachBottom() {
    this.getGradeList();
  },
  methods: {
    // 获取课程
    async getGradeList() {
      if (this.loading || this.loadend) return;
      this.loading = true;

      uni.showLoading({ mask: true });
			try {
				if (this.active < 2) {
					const { data } = await getGradeList(this.active, this.page, this.limit);
					const { list, page } = data;
					this.gradeList.push.apply(this.gradeList, list);
					this.loadend = list.length < this.limit;
					this.page = page;
					this.$set(this, "gradeList", this.gradeList);
				} else {
					const { data } = await getFollowList({
						page: this.page++,
						limit: this.limit
					});
					data.forEach(function (item) {
					  item.label = JSON.parse(item.label);
					});
					this.gradeList.push.apply(this.gradeList, data);
					this.loadend = data.length < this.limit;
					this.$set(this, "gradeList", this.gradeList);
					console.log(data);
				}
				uni.hideLoading();
			} catch (err) {}
			this.loading = false;
    },
    tab(active) {
      if (this.loading) return;
      this.active = active;
      this.gradeList = [];
      this.page = 1;
      this.loadend = false;
      this.getGradeList();
    },
		// 开始触摸
		drawStart(e) {
			console.log('触摸',e);
			this.clientX = e.changedTouches[0].clientX
		},
		// 触摸过程
		drawMove(id, e) {
			console.log('过程',e.changedTouches);
			var endX = e.changedTouches[0].clientX;
			let diff = endX - this.clientX;
			console.log(diff);

			if (Math.abs(diff) <= 60 && diff < 0) {
				console.log(this.$refs.box_center);
				let box_center = this.$refs.box_center[id]
				// console.log(diff);
				box_center.$el.style.left = diff + 'px'
			}

		},
		// 结束触摸
		drawEnd(id, e) {
			console.log('结束',e.changedTouches[0]);
			var endX = e.changedTouches[0].clientX;
			let diff = endX - this.clientX;
			if (Math.abs(diff) > 20) {
				// console.log('移动',diff,id,e);
				if (diff < 0) {
					this.activeHeaderMask = id;
				} else {
					this.activeHeaderMask = -1;
				}
			}
		},
		cancelCollect(item) {
			if (this.active === 1) {
				toggleCollectMaterial(item.id).then(() => {
					this.$util.showMsg("取消收藏成功");
					this.$set(this, "gradeList", []);
					this.page = 1;
					this.loadend = false;
					this.activeHeaderMask = -1;
					this.getGradeList();
				});
			} else if (this.active === 2) {
				follow({
					mer_id: item.mer_id,
					is_follow: 0
				}).then(() => {
					this.$util.showMsg("取消收藏成功");
					this.$set(this, "gradeList", []);
					this.page = 1;
					this.loadend = false;
					this.activeHeaderMask = -1;
					this.getGradeList();
				})
			} else {
				collectSpecial(item.id)
					.then(() => {
						this.$util.showMsg("取消收藏成功");
						this.$set(this, "gradeList", []);
						this.page = 1;
						this.loadend = false;
						this.activeHeaderMask = -1;
						this.getGradeList();
					})
					.catch((err) => {
						console.log(err);
					});
			}
		},
  },
};
</script>

<style lang="scss">
@import "@/static/style/favorite.scss";
page{
  background: #F7F8F9;

}

</style>

<style scoped lang="scss">
.favorite {
	::v-deep .nav-box {
		background: #fff;
	}
	.tabbar {
		position: relative;
    width: 100%;
    margin-top: calc(88rpx + var(--safe-top));
    border-radius: 24rpx;
    z-index: 999;
    background: #fff;
    border-bottom:none;
	}
}

.list {
  // padding-top: calc(88rpx + var(--safe-top) + 90rpx) !important;
    width: 690rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    border-radius: 24rpx;
    z-index: 999;
		overflow-x: hidden;
		.list-item {
			position: relative;
			background: #ffffff;
			&.lecturer-item {
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
				.lecturer-name {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 14rpx;
					.label {
						height: 39rpx;
						background: #FFEDE9;
						border-radius: 6rpx;
						padding: 0 14rpx;
						display: flex;
						align-items: center;
						color: #FF4B33;
						font-size: 22rpx;
						margin-left: 12rpx;
					}
				}
				.lecturer-intro {
					color: #999999!important;
					font-size: 24rpx!important;
					font-weight: normal!important;
					max-height: 60rpx;
					line-height: 30rpx;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
			.function-mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 10;
				visibility: hidden;
			}
			.function {
				width: 120rpx;
				height: 100%;
				background: #F8473E;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				right: -120rpx;
				.btn {
					width: 30rpx;
					white-space: pre-wrap;
					overflow: auto;
					font-size: 28rpx;
					color: #fff;
					line-height: 36rpx;
				}
			}
		}
}
.money{
  width: 134rpx;
height: 48rpx;
font-size: 36rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #23272E;
line-height: 48rpx;
}

.mask .box {
  position: relative;
}

.mask .box .iconfont {
  color: #ffffff;
  font-size: 40rpx;
  left: 50%;
  margin-left: -20rpx;
  bottom: 30rpx;
}

.public_list .item .text {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}

.loading {
  font-size: 40rpx;
  text-align: center;
  color: #999999;
}

.loaded {
  font-size: 28rpx;
  line-height: 72rpx;
  text-align: center;
  color: #999999;
}

.nothing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 414rpx;
  height: 336rpx;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.button{
  width: 120rpx;
height: 56rpx;
background: #1D8DFF;
border-radius: 28rpx;
text-align: center;
line-height: 56rpx;
color: #ffffff;
}
</style>