145 lines
3.0 KiB
Vue
145 lines
3.0 KiB
Vue
<template>
|
|
<view class="index">
|
|
<view class="indexontents flex-between">
|
|
<view class="onecontent_item flex-colum-start" v-for="(item,index) in list" :key="index" @click="previewImage(index,list)">
|
|
<image class="onecontent_itemimage" :src="item" mode="aspectFill" ></image>
|
|
<!-- <text class="onecontent_itemtext">{{list.title}}</text>
|
|
<view class="onecontent_item_absolute flex-start">
|
|
<u-icon name="photo" color="#fff" size="18"></u-icon>
|
|
<text class="onecontent_item_absolute_text">
|
|
{{item.count}}
|
|
</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
|
<image :src="bgnothave" mode="aspectFill">
|
|
</image>
|
|
</view>
|
|
<u-loadmore :status="form.status" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgnothave:uni.getStorageSync('bgnothave'),
|
|
list: [],
|
|
is_end: false,
|
|
form: {
|
|
page: 1,
|
|
status: 'loadmore',
|
|
},
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.indexworksdetail(e.id)
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
//预览图片
|
|
previewImage(imgIndex, urls) {
|
|
console.log(urls)
|
|
uni.previewImage({
|
|
current: imgIndex,
|
|
urls: urls,
|
|
success:(res)=>{
|
|
console.log(res)
|
|
}
|
|
});
|
|
},
|
|
async indexworksdetail(e) {
|
|
let res = await this.api.indexworksdetail({
|
|
id: e
|
|
})
|
|
if (res.album.length == 0) {
|
|
this.is_end = true
|
|
this.form.status = 'nomore'
|
|
return false;
|
|
} else {
|
|
this.form.status = 'loading';
|
|
this.form.page = ++this.form.page;
|
|
setTimeout(() => {
|
|
this.list = [...this.list, ...res.album];
|
|
if (res.album.length == 10) {
|
|
this.form.status = 'loading';
|
|
} else {
|
|
this.is_end = true;
|
|
this.form.status = 'nomore';
|
|
}
|
|
}, 500)
|
|
|
|
}
|
|
console.log(this.list)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #F9F9F9;
|
|
}
|
|
|
|
.index {
|
|
padding: 12rpx 28rpx;
|
|
|
|
.indexontents {
|
|
width: 100%;
|
|
|
|
.onecontent_item {
|
|
position: relative;
|
|
width: 49%;
|
|
margin-top: 20rpx;
|
|
|
|
.onecontent_itemimage {
|
|
width: 332rpx;
|
|
height: 346rpx;
|
|
}
|
|
|
|
.onecontent_itemtext {
|
|
margin-top: 8rpx;
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.onecontent_item_absolute {
|
|
padding: 8rpx 24rpx;
|
|
position: absolute;
|
|
top: 290rpx;
|
|
right: 16rpx;
|
|
background: rgba(45, 42, 42, 0.35);
|
|
border-radius: 28rpx;
|
|
|
|
.onecontent_item_absolute_text {
|
|
margin-left: 10rpx;
|
|
font-size: 16rpx;
|
|
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.flex-colum_image {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
|
|
text {
|
|
margin-top: 30rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Bold, PingFang SC;
|
|
font-weight: bold;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
</style> |