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.
290 lines
6.8 KiB
290 lines
6.8 KiB
<template>
|
|
|
|
<BaseContainer class="thematic-promotion">
|
|
<NavBar title="专题推广" />
|
|
<view class="goodsClass">
|
|
<view class="header" style="height: 100rpx; padding-top: 0;">
|
|
<view class="wrapper" id="wrapper">
|
|
<view class="scroller">
|
|
<scroll-view scroll-x>
|
|
<view class="grade-cate-list flex" @click="handleSetGrade">
|
|
<view
|
|
class="grade-item"
|
|
v-for="item in gradeList"
|
|
:key="item.id"
|
|
:data-id="item.id"
|
|
:class="{ cur: item.id == where.grade_id }"
|
|
>
|
|
<text :data-id="item.id">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="swiper-details"
|
|
v-for="item in specialList"
|
|
:key="item.id"
|
|
ref="list"
|
|
v-if="item.list.length"
|
|
>
|
|
<view class="title line1 acea-row row-middle" v-text="item.name"></view>
|
|
<view class="video-listn">
|
|
<view class="item acea-row" v-for="(val, idx) of item.list" :key="idx">
|
|
<view class="pictrue">
|
|
<image mode="aspectFill" :src="val.image" />
|
|
</view>
|
|
<view class="text acea-row row-between row-column">
|
|
<view class="name line1" v-text="val.title"></view>
|
|
<view class="num acea-row row-middle">
|
|
<view class="money">
|
|
¥<text>{{ val.money }}</text>
|
|
</view>
|
|
<view class="earn" v-if="val.spread_money > 0">
|
|
赚¥{{ val.spread_money }}
|
|
</view>
|
|
</view>
|
|
<!-- #ifndef MP-KUAISHOU -->
|
|
<navigator
|
|
class="toPromote acea-row row-center-wrapper"
|
|
:url="`/pages/spread/poster_special?special_id=${val.id}&is_light=${val.is_light}`"
|
|
>去推广</navigator
|
|
>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-KUAISHOU -->
|
|
<navigator
|
|
class="toPromote acea-row row-center-wrapper"
|
|
:url="`/pages/special/details?id=${val.id}`"
|
|
>去推广</navigator
|
|
>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="loadend && where.page > 2" class="loaded">已全部加载</view>
|
|
<view v-if="!specialList.length && !loading">
|
|
<image
|
|
mode="aspectFill"
|
|
class="nothing"
|
|
:src="getImgPath('/wap/first/zsff/images/no_data_available.png')"
|
|
/>
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSpecialSpread, getSpreadGradeList } from "@/api/spread";
|
|
export default {
|
|
data() {
|
|
return {
|
|
gradeList: [{ name: "全部", id: 0 }],
|
|
where: {
|
|
grade_id: 0,
|
|
page: 1,
|
|
limit: 10,
|
|
},
|
|
specialList: [],
|
|
loadend: false,
|
|
loading: false,
|
|
};
|
|
},
|
|
watch: {
|
|
"where.grade_id"(n) {
|
|
this.loadend = false;
|
|
this.where.page = 1;
|
|
this.$set(this, "specialList", []);
|
|
this.getSpecialSpread();
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.get_grade_list();
|
|
this.getSpecialSpread();
|
|
},
|
|
onReactBottom() {
|
|
this.getSpecialSpread();
|
|
},
|
|
methods: {
|
|
handleSetGrade(e) {
|
|
const { id } = e.target.dataset;
|
|
if (id === undefined) return;
|
|
this.where.grade_id = Number(id);
|
|
},
|
|
get_grade_list() {
|
|
getSpreadGradeList().then(({ data: list }) => {
|
|
let gradeList = this.$util.SplitArray(list, this.gradeList);
|
|
this.$set(this, "gradeList", gradeList);
|
|
});
|
|
},
|
|
async getSpecialSpread() {
|
|
if (this.loading || this.loaded) return;
|
|
this.loading = true;
|
|
|
|
uni.showLoading({ mask: true });
|
|
|
|
try {
|
|
const { data } = await getSpecialSpread(this.where);
|
|
uni.hideLoading();
|
|
let list = data.data;
|
|
let specialList = this.$util.SplitArray(list, this.specialList);
|
|
this.loadend = list.length < this.where.limit;
|
|
this.where.page = data.page;
|
|
this.$set(this, "specialList", specialList);
|
|
} catch (err) {
|
|
uni.hideLoading();
|
|
this.$util.showMsg(err);
|
|
}
|
|
|
|
this.loading = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@/static/style/good.scss";
|
|
|
|
</style>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.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: 30%;
|
|
left: 50%;
|
|
width: 414rpx;
|
|
height: 336rpx;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.thematic-promotion nav {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
height: 97rpx;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.thematic-promotion nav .item {
|
|
height: 100%;
|
|
line-height: 92rpx;
|
|
}
|
|
|
|
.thematic-promotion nav .item.ont {
|
|
color: #509efb;
|
|
}
|
|
|
|
.thematic-promotion nav .on {
|
|
width: 30rpx;
|
|
height: 5rpx;
|
|
background-color: #157dfa;
|
|
border-radius: 15rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details + .swiper-details {
|
|
margin-top: 14rpx;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .title {
|
|
height: 98rpx;
|
|
padding-right: 20rpx;
|
|
padding-left: 20rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .video-listn {
|
|
border-top: 1px solid #f5f5f5;
|
|
padding: 26rpx 20rpx;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .video-listn .item {
|
|
position: relative;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .video-listn .item ~.item {
|
|
margin-top: 26rpx;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .video-listn .item .text {
|
|
position: relative;
|
|
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .video-listn .item .text .name {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .video-listn .item .text .num {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
color: #ff6b00;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .video-listn .item .text .num .money text {
|
|
font-size: 32rpx;
|
|
line-height: 45rpx;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .video-listn .item .text .num .earn {
|
|
font-size: 48rpx;
|
|
color: #ff6b00;
|
|
height: 64rpx;
|
|
padding: 0 22rpx;
|
|
border: 1px solid #ff6b00;
|
|
border-radius: 100rpx;
|
|
margin-left: 14rpx;
|
|
|
|
transform: scale(0.5);
|
|
line-height: 64rpx;
|
|
|
|
transform-origin: 0 50%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.thematic-promotion .swiper-details .video-listn .item .toPromote {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 140rpx;
|
|
height: 50rpx;
|
|
border-radius: 25rpx;
|
|
background-color: #2c8eff;
|
|
font-size: 24rpx;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
|