396 lines
9.0 KiB
Vue
396 lines
9.0 KiB
Vue
<template>
|
||
<view>
|
||
<tabBar :currentPage="'pages/index/index'"></tabBar>
|
||
<view class="content">
|
||
<image
|
||
src="../../static/image/home/fontree.png"
|
||
mode=""
|
||
class="logo"
|
||
></image>
|
||
</view>
|
||
<scroll-view
|
||
scroll-y
|
||
@scrolltolower="onreachBottom"
|
||
:refresher-enabled="true"
|
||
:refresher-triggered="isrefresh"
|
||
@refresherpulling="openLoading"
|
||
@refresherrefresh="onRefresh"
|
||
@refresherrestore="onRestore"
|
||
@scroll="onScroll"
|
||
:scroll-anchoring="true"
|
||
refresher-background="#699A70"
|
||
refresher-default-style="none"
|
||
:style="'height:' + listHeight + 'px;'"
|
||
:refresher-threshold="300"
|
||
class="scroll"
|
||
>
|
||
<image
|
||
src="../../static/image/home/new_line.png"
|
||
mode=""
|
||
class="line"
|
||
v-if="showPull"
|
||
></image>
|
||
<image
|
||
src="../../static/image/home/new_flower.png"
|
||
mode=""
|
||
class="flower-static"
|
||
v-if="showPull"
|
||
></image>
|
||
<view v-for="(item, index) in listData" :key="index" class="item">
|
||
<view class="box">
|
||
<!-- :style="'background: url(' + item.CoverImg + ');'" -->
|
||
<image
|
||
:src="item.CoverImg"
|
||
mode="scaleToFill"
|
||
class="img"
|
||
@click="goLink(item)"
|
||
></image>
|
||
<!-- <view class="bt-con">
|
||
<view class="name">{{ item.SeriesName }}</view>
|
||
<view class="des">{{ item.Desc }}</view>
|
||
</view> -->
|
||
<view class="description">
|
||
<view class="text">
|
||
<view class="name">{{ item.SeriesName }}</view>
|
||
<view class="des">{{ item.Desc }}</view>
|
||
</view>
|
||
<view class="line-des"></view>
|
||
<view
|
||
class="detail"
|
||
@click="goLink(item)"
|
||
:style="{
|
||
background:
|
||
item.SeriesName === '泰丰十周年' ? '#FC4947' : '#699A70',
|
||
}"
|
||
>查看详情</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<Dialog
|
||
:detail="detail"
|
||
:collectionsUID="collectionsUID"
|
||
:num="num"
|
||
:isShow="isShow"
|
||
/>
|
||
</view>
|
||
</template>
|
||
haojia
|
||
<script>
|
||
import Dialog from "./dialog/dialog.vue";
|
||
export default {
|
||
components: {
|
||
Dialog,
|
||
},
|
||
data() {
|
||
return {
|
||
title: "Hello",
|
||
fromLogin: true,
|
||
listData: [],
|
||
page: 1,
|
||
pageSize: 10,
|
||
showPull: false,
|
||
isrefresh: false,
|
||
listHeight: uni.getSystemInfoSync().windowHeight - 88 - 61,
|
||
isShow: false,
|
||
collectionsUID: "",
|
||
num: "",
|
||
detail: {},
|
||
};
|
||
},
|
||
onShow() {
|
||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||
let curRoute = routes[routes.length - 2];
|
||
},
|
||
onLoad() {
|
||
this.onreachBottom();
|
||
const collectionsUID = uni.getStorageSync("collectionsUID");
|
||
if (collectionsUID) {
|
||
this.collectionsUID = collectionsUID;
|
||
}
|
||
const num = uni.getStorageSync("num");
|
||
if (num) {
|
||
this.num = JSON.parse(num);
|
||
}
|
||
if (this.collectionsUID && this.num) {
|
||
this.collectionsDetail();
|
||
}
|
||
},
|
||
methods: {
|
||
openLoading(e) {
|
||
if (e.detail.deltaY < 0) return;
|
||
this.showPull = true;
|
||
this.isrefresh = true;
|
||
},
|
||
onRefresh(e) {
|
||
if (this._freshing) return;
|
||
this._freshing = true;
|
||
this.isrefresh = true;
|
||
setTimeout(() => {
|
||
this.getData();
|
||
}, 2000);
|
||
},
|
||
onRestore() {
|
||
this.showPull = false;
|
||
},
|
||
onreachBottom() {
|
||
this.getData();
|
||
},
|
||
onScroll() {
|
||
this.page++;
|
||
let params = {
|
||
page: this.page,
|
||
pageSize: this.pageSize,
|
||
};
|
||
uni.$u.debounce(async () => {
|
||
await this.$api.series
|
||
.list(params)
|
||
.then((res) => {
|
||
if (res.status === 0) {
|
||
if (res.data.Data) {
|
||
this.listData = [...this.listData, ...(res.data.Data || [])];
|
||
}
|
||
this.page--;
|
||
} else {
|
||
uni.showToast({
|
||
title: this.$t("load.failed"),
|
||
icon: "none",
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.showToast({
|
||
title: this.$t("load.failed"),
|
||
icon: "none",
|
||
});
|
||
});
|
||
}, 500);
|
||
},
|
||
goLink(item) {
|
||
// uni.navigateTo({
|
||
// url: '/pages/index/activity/index?detail=' + encodeURIComponent(JSON.stringify(item))
|
||
// });
|
||
console.log(1111, item);
|
||
if (item.SeriesName === "泰丰十周年") {
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/index/activeSeries/activeSeries?detail=" +
|
||
encodeURIComponent(JSON.stringify(item)),
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/index/series/series?SeriesUID=" + item.SeriesUuid,
|
||
});
|
||
}
|
||
},
|
||
async getData() {
|
||
let params = {
|
||
page: 1,
|
||
pageSize: this.pageSize,
|
||
};
|
||
await this.$api.series
|
||
.list(params)
|
||
.then((res) => {
|
||
if (res.status === 0) {
|
||
this.listData = res.data.Data;
|
||
/* } else {
|
||
this.listData = [...this.listData, ...res.data.Data || []];
|
||
} */
|
||
} else {
|
||
uni.showToast({
|
||
title: this.$t("load.failed"),
|
||
icon: "none",
|
||
});
|
||
}
|
||
this.isrefresh = false; //触发onRestore，并关闭刷新图标
|
||
this._freshing = false;
|
||
})
|
||
.catch((err) => {
|
||
console.log(1231312312, err);
|
||
uni.showToast({
|
||
title: this.$t("load.failed"),
|
||
icon: "none",
|
||
});
|
||
});
|
||
},
|
||
async collectionsDetail() {
|
||
if (uni.getStorageSync("collectionsDetail")) {
|
||
await this.$api.series
|
||
.collectionsDetail({
|
||
collectionsUID: this.collectionsUID,
|
||
num: this.num,
|
||
})
|
||
.then((res) => {
|
||
if (res.status === 0) {
|
||
this.detail = res.data;
|
||
this.isShow = true;
|
||
uni.setStorageSync("collectionsDetail", false);
|
||
} else {
|
||
this.$common.msgToast(res.msg, null, "error");
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.showToast({
|
||
title: this.$t("load.failed"),
|
||
icon: "none",
|
||
});
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: url("@/static/image/home/new_bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
background-attachment: fixed;
|
||
height: 100vh;
|
||
}
|
||
|
||
/deep/ .uni-scroll-view-refresher {
|
||
max-height: 250rpx;
|
||
}
|
||
|
||
/deep/ .uni-scroll-view {
|
||
overflow-y: auto !important;
|
||
}
|
||
|
||
.content {
|
||
height: 122rpx;
|
||
background: #ffffff;
|
||
|
||
// padding-top: 300rpx;
|
||
// border: 1px solid red;
|
||
.logo {
|
||
width: 188rpx;
|
||
height: 56rpx;
|
||
margin-top: 36rpx;
|
||
margin-left: 48rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
width: 2rpx;
|
||
height: 164rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 0;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.flower-static {
|
||
width: 43rpx;
|
||
height: 43rpx;
|
||
position: absolute;
|
||
left: 47%;
|
||
top: 167rpx;
|
||
animation: fadenum 1s infinite;
|
||
}
|
||
|
||
@keyframes fadenum {
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.item {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.box {
|
||
width: 656rpx;
|
||
height: 814rpx;
|
||
margin: 0 48rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.img {
|
||
width: 656rpx;
|
||
height: 656rpx;
|
||
}
|
||
|
||
// .bt-con {
|
||
// position: absolute;
|
||
// bottom: 0;
|
||
// width: 656rpx;
|
||
// height: 158rpx;
|
||
// background: rgba(255, 255, 255, 0.3);
|
||
|
||
// //
|
||
// .name {
|
||
// font-size: 32rpx;
|
||
// border-bottom: 1rpx solid #fff;
|
||
// margin: 28rpx 50rpx 0 50rpx;
|
||
// text-align: center;
|
||
// padding-bottom: 10rpx;
|
||
// }
|
||
|
||
// .des {
|
||
// padding-top: 10rpx;
|
||
// font-size: 20rpx;
|
||
// text-align: center;
|
||
// overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
// white-space: nowrap;
|
||
// }
|
||
// }
|
||
.description {
|
||
width: 656rpx;
|
||
height: 158rpx;
|
||
// border: 1px solid red;
|
||
box-sizing: border-box;
|
||
padding: 18px 11px 18px 11px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
border-bottom-left-radius: 8rpx;
|
||
border-bottom-right-radius: 8rpx;
|
||
|
||
.text {
|
||
flex: 1;
|
||
|
||
.name {
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
font-family: "Songti TC";
|
||
font-weight: 500;
|
||
margin-bottom: 2px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.des {
|
||
margin-right: 28rpx;
|
||
font-size: 20rpx;
|
||
color: #939393;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
|
||
.line-des {
|
||
width: 1rpx;
|
||
height: 114rpx;
|
||
background-color: #d8d8d8;
|
||
}
|
||
|
||
.detail {
|
||
background: #699a70;
|
||
padding: 12rpx 40rpx;
|
||
border-radius: 8rpx;
|
||
text-align: center;
|
||
margin-left: 19px;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|