mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-29 15:00:17 +09:00
378 lines
8.4 KiB
Vue
378 lines
8.4 KiB
Vue
<template>
|
|
<view class="app-page">
|
|
<view v-if="loading != 'success'" class="loading-wrap">
|
|
<view v-if="loading == 'loading'" class="loading">
|
|
<view class="loading-icon flex flex-center"><text class="e-loading-icon iconfont icon-loading"></text></view>
|
|
<view class="loadig-text ">相册正在努力加载中啦~</view>
|
|
</view>
|
|
<tm-empty v-else icon="icon-shiliangzhinengduixiang-" color="red" label="啊偶,加载失败了呢~">
|
|
<tm-button theme="red" :shadow="0" size="m" @click="fnRefresh()">刷新试试</tm-button>
|
|
</tm-empty>
|
|
</view>
|
|
<!-- 内容区域 -->
|
|
<view v-else class="app-page-content">
|
|
<view v-if="dataList.length == 0" color="light-blue" class="content-empty flex flex-center">
|
|
<tm-empty icon="icon-shiliangzhinengduixiang-" label="相册暂时还没有数据~">
|
|
<tm-button :shadow="0" size="m" theme="light-blue" @click="fnRefresh()">刷新试试</tm-button>
|
|
</tm-empty>
|
|
</view>
|
|
<block v-else>
|
|
<swiper
|
|
class="swiper-album"
|
|
:current="swiperIndex"
|
|
:acceleration="true"
|
|
:circular="true"
|
|
:vertical="false"
|
|
:indicator-dots="false"
|
|
:autoplay="false"
|
|
@change="fnOnChange"
|
|
>
|
|
<block v-for="(item, index) in dataList" :key="index">
|
|
<swiper-item class="swiper-album-item">
|
|
<view class="scroll-wrap">
|
|
<view class="card">
|
|
<cache-image
|
|
class="card-image"
|
|
width="100%"
|
|
height="46vh"
|
|
radius="12rpx"
|
|
:url="item.image"
|
|
:fileMd5="item.image"
|
|
mode="aspectFill"
|
|
@on-click="fnOnPreview(item)"
|
|
></cache-image>
|
|
<view v-if="item.description" class="card-desc">{{ item.description }}</view>
|
|
<view v-else class="card-desc is-empty flex flex-col">
|
|
<view class="text-grey-darken-1">该照片没有记录任何信息</view>
|
|
<view class="text-size-m mt-24 text-grey-darken-1">记录一下拍照的瞬间，会更精彩哟</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
<view class="tabbar">
|
|
<view class="pre" @click="fnChange(false)">
|
|
<text class="icon"><text class="iconfont icon-arrow-left"></text></text>
|
|
<text class="text">上一张</text>
|
|
</view>
|
|
<view class="refresh" @click="fnRefresh()">
|
|
<text class="refresh-text">点击</text>
|
|
<text class="refresh-heart iconfont icon-diagnose"></text>
|
|
<text class="refresh-text">刷新</text>
|
|
</view>
|
|
<view class="next" @click="fnChange(true)">
|
|
<text class="text">下一张</text>
|
|
<text class="icon"><text class="iconfont icon-arrow-right"></text></text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import LoveConfig from '@/config/love.config.js';
|
|
import throttle from '@/utils/throttle.js';
|
|
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
|
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
|
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
|
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
|
|
|
export default {
|
|
components: {
|
|
tmButton,
|
|
tmFlotbutton,
|
|
tmTranslate,
|
|
tmEmpty
|
|
},
|
|
data() {
|
|
return {
|
|
loading: 'loading',
|
|
loveConfig: LoveConfig,
|
|
queryParams: {
|
|
size: 99,
|
|
page: 0,
|
|
sort: 'takeTime',
|
|
team: LoveConfig.albumKeyName
|
|
},
|
|
result: {},
|
|
dataList: [],
|
|
cache: {
|
|
dataList: [],
|
|
total: 0
|
|
},
|
|
swiperIndex: 0,
|
|
tabbar: {
|
|
list: []
|
|
}
|
|
};
|
|
},
|
|
|
|
onLoad() {
|
|
this.fnSetPageTitle('恋爱相册');
|
|
},
|
|
created() {
|
|
this.fnGetData();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.fnRefresh();
|
|
},
|
|
|
|
methods: {
|
|
fnRefresh() {
|
|
this.queryParams.page = 0;
|
|
this.fnGetData();
|
|
},
|
|
fnGetData() {
|
|
this.loading = 'loading';
|
|
this.$httpApi
|
|
.getPhotoListByPage(this.queryParams)
|
|
.then(res => {
|
|
if (res.status == 200) {
|
|
this.loading = 'success';
|
|
if (res.data.content.length != 0) {
|
|
const _list = res.data.content.map((item, index) => {
|
|
item['image'] = this.$utils.checkImageUrl(item.thumbnail);
|
|
item['takeTime'] = this.$tm.dayjs(item['takeTime']).format('DD/MM/YYYY');
|
|
return item;
|
|
});
|
|
this.dataList = _list;
|
|
this.swiperIndex = 0;
|
|
}
|
|
} else {
|
|
this.loading = 'error';
|
|
uni.$tm.toast('加载失败，请下拉刷新重试！');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
this.loading = 'error';
|
|
uni.$tm.toast('加载失败，请下拉刷新重试！');
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
uni.stopPullDownRefresh();
|
|
}, 200);
|
|
});
|
|
},
|
|
// 缓存数据
|
|
fnCacheDataList(dataList) {
|
|
if (this.queryParams.page == 0) {
|
|
this.cache.dataList = dataList;
|
|
} else {
|
|
this.cache.dataList = [...this.cache.dataList, ...dataList];
|
|
}
|
|
},
|
|
fnOnPreview(item) {
|
|
uni.previewImage({
|
|
current: item.image,
|
|
urls: this.dataList.map(x => x.image)
|
|
});
|
|
},
|
|
fnOnChange(e) {
|
|
this.swiperIndex = e.detail.current;
|
|
},
|
|
fnChange(isNext) {
|
|
throttle(() => {
|
|
if (isNext) {
|
|
if (this.swiperIndex == this.dataList.length - 1) {
|
|
this.swiperIndex = 0;
|
|
} else {
|
|
this.swiperIndex += 1;
|
|
}
|
|
} else {
|
|
if (this.swiperIndex == 0) {
|
|
this.swiperIndex = this.dataList.length - 1;
|
|
} else {
|
|
this.swiperIndex -= 1;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-page {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 0;
|
|
padding-bottom: 144rpx;
|
|
background: linear-gradient(
|
|
-135deg,
|
|
rgba(247, 149, 51, 0.1),
|
|
rgba(243, 112, 85, 0.1) 15%,
|
|
rgba(239, 78, 123, 0.1) 30%,
|
|
rgba(161, 102, 171, 0.1) 44%,
|
|
rgba(80, 115, 184, 0.1) 58%,
|
|
rgba(16, 152, 173, 0.1) 72%,
|
|
rgba(7, 179, 155, 0.1) 86%,
|
|
rgba(109, 186, 130, 0.1)
|
|
);
|
|
}
|
|
.app-page-content {
|
|
}
|
|
.loading-wrap {
|
|
width: 100vw;
|
|
height: 60vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
padding: 36rpx;
|
|
|
|
::v-deep {
|
|
.tm-icons {
|
|
margin-right: -20rpx;
|
|
}
|
|
}
|
|
}
|
|
.e-loading-icon {
|
|
font-size: 120rpx;
|
|
// color: #f88ca2;
|
|
color: #56bbf9;
|
|
}
|
|
|
|
.loadig-text {
|
|
margin-top: 28rpx;
|
|
font-size: 28rpx;
|
|
// color: #f88ca2;
|
|
color: #56bbf9;
|
|
}
|
|
.content-empty {
|
|
width: 100%;
|
|
height: 60vh;
|
|
}
|
|
|
|
.swiper-album {
|
|
width: 100vw;
|
|
height: calc(100vh - 24rpx - 144rpx);
|
|
}
|
|
.swiper-album-item {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
padding: 36rpx;
|
|
/* #ifdef H5 */
|
|
padding-bottom: 110rpx;
|
|
/* #endif */
|
|
/* #ifndef H5 */
|
|
padding-bottom: 60rpx;
|
|
/* #endif */
|
|
}
|
|
.scroll-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 36rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
|
}
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
// height: 65vh;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
border-radius: 12rpx;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
// box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
::v-deep {
|
|
.cache-image {
|
|
height: initial !important;
|
|
}
|
|
}
|
|
&-image {
|
|
width: 100%;
|
|
height: initial !important;
|
|
border-radius: 12rpx;
|
|
}
|
|
&-desc {
|
|
margin-top: 24rpx;
|
|
line-height: 1.6;
|
|
font-size: 30rpx;
|
|
color: rgba(26, 26, 26, 0.9);
|
|
&.is-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
.tabbar {
|
|
width: 90vw;
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 40rpx;
|
|
transform: translateX(-50%);
|
|
border-radius: 25rpx;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// background-color: rgba(0, 0, 0, 0.5);
|
|
background-color: #ffffff;
|
|
color: #333;
|
|
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
|
|
.refresh {
|
|
animation: refreshAni 6s ease-in-out infinite;
|
|
color: #56bbf9;
|
|
&-heart {
|
|
font-size: 42rpx;
|
|
color: inherit;
|
|
margin: 0 6rpx;
|
|
}
|
|
&-text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.pre {
|
|
color: #56bbf9;
|
|
transition: transform 0.1s ease-in-out;
|
|
&:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
.text {
|
|
padding-left: 12rpx;
|
|
}
|
|
}
|
|
.next {
|
|
color: #f88ca2;
|
|
transition: transform 0.1s ease-in-out;
|
|
&:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
.text {
|
|
padding-right: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
@keyframes refreshAni {
|
|
0% {
|
|
color: #f88ca2;
|
|
}
|
|
50% {
|
|
color: #56bbf9;
|
|
}
|
|
100% {
|
|
color: #f88ca2;
|
|
}
|
|
}
|
|
</style>
|