You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
330 lines
7.7 KiB
330 lines
7.7 KiB
<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="Number(active) === 0">
|
|
<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="activeHeaderMask = -1"></view>
|
|
<view class="function">
|
|
<view class="btn">取消收藏</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>
|
|
</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 { getGradeList } from "@/api/special";
|
|
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 ("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}`;
|
|
}
|
|
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 {
|
|
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);
|
|
uni.hideLoading();
|
|
} catch (err) {}
|
|
|
|
this.loading = false;
|
|
uni.hideLoading();
|
|
},
|
|
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[0]);
|
|
var endX = e.changedTouches[0].clientX;
|
|
let diff = endX - this.clientX;
|
|
console.log(diff);
|
|
|
|
if (Math.abs(diff) <= 60 && diff < 0) {
|
|
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;
|
|
let box_center = this.$refs.box_center[id]
|
|
if (Math.abs(diff) > 20) {
|
|
// console.log('移动',diff,id,e);
|
|
if (diff < 0) {
|
|
this.activeHeaderMask = id;
|
|
} else {
|
|
this.activeHeaderMask = -1;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</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;
|
|
.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>
|
|
|