created
This commit is contained in:
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<scroll-view
|
||||
class="container"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<view class="" v-if="dataType === 'template'">
|
||||
<view class="list-container">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="list-item"
|
||||
>
|
||||
<view class="" v-if="item.src !== 'not_image'">
|
||||
<view @click="select(item._id)"
|
||||
:class="{
|
||||
'select-image': selectValue === item._id,
|
||||
'item-image': true
|
||||
}">
|
||||
<cloud-image
|
||||
:src="item.src"
|
||||
mode="scaleToFill"
|
||||
width="33vw"
|
||||
height="100%"
|
||||
>
|
||||
</cloud-image>
|
||||
</view>
|
||||
<text class="item-text">{{ item.value }}</text>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<view
|
||||
@click="select(item._id)"
|
||||
:class="{
|
||||
'select-image': selectValue === item._id,
|
||||
'item-image': true
|
||||
}">
|
||||
<view style="width: 33vw;height:100%;background-color: aqua;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<text class="item-text">{{ item.value }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else-if="dataType === 'music'">
|
||||
<view class="list-container">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="list-item"
|
||||
>
|
||||
|
||||
<view class="center-con" v-if="item.src !== 'not_music'">
|
||||
<view @click="select(item._id)"
|
||||
:class="{
|
||||
'select-image': selectValue === item._id,
|
||||
'music-item': true
|
||||
}">
|
||||
<cloud-image
|
||||
:src="item.src"
|
||||
mode="scaleToFill"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
</cloud-image>
|
||||
</view>
|
||||
<text class="item-text">{{ item.value }}</text>
|
||||
</view>
|
||||
<view class="center-con" v-else>
|
||||
<view
|
||||
:class="{
|
||||
'select-image': selectValue === item._id,
|
||||
'music-item': true
|
||||
}">
|
||||
<view style="width: 100%;height:100%;background-color: aqua;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<text class="item-text">{{ item.value }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 加载状态提示 -->
|
||||
<view class="loading-tips">
|
||||
<text v-if="loading">正在加载...</text>
|
||||
<text v-if="noMore">没有更多了~</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const db = uniCloud.database();
|
||||
import cloudImage from "@/components/cloud-image.vue";
|
||||
export default {
|
||||
components: {
|
||||
cloudImage,
|
||||
},
|
||||
props: {
|
||||
// 初始数据（可选）
|
||||
dataType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 每页数量
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
currentTemplate: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
|
||||
],
|
||||
selectValue: "",
|
||||
page: 12,
|
||||
loading: false,
|
||||
noMore: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if(this.list.length === 0) {
|
||||
if (this.dataType === "template") {
|
||||
this.list = [
|
||||
{
|
||||
value: "不使用模板",
|
||||
_id: "",
|
||||
src: "not_image"
|
||||
},
|
||||
]
|
||||
} else if(this.dataType === "music") {
|
||||
this.list = [
|
||||
{
|
||||
value: "不播放音乐",
|
||||
_id: "",
|
||||
src: "not_music"
|
||||
}
|
||||
]
|
||||
} else if(this.dataType === "font") {
|
||||
|
||||
}
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
select(id) {
|
||||
this.selectValue = id;
|
||||
this.$emit('update', this.selectValue);
|
||||
},
|
||||
async loadData() {
|
||||
if (this.loading || this.noMore) return;
|
||||
|
||||
this.loading = true;
|
||||
|
||||
if (this.dataType === "template") {
|
||||
console.log(this.list)
|
||||
if (this.list.length === 1) {
|
||||
let res = await db.collection("cms-temp").get();
|
||||
console.log(res.result.data)
|
||||
let lst = [];
|
||||
for (let i = 0 ; i < res.result.data.length ; i++ ) {
|
||||
lst.push({
|
||||
value:res.result.data[i].temptele_name,
|
||||
_id: res.result.data[i]._id,
|
||||
src: res.result.data[i].temptele_src
|
||||
})
|
||||
}
|
||||
this.list.push(...lst);
|
||||
await this.select(this.list[0]._id)
|
||||
this.noMore = true
|
||||
}
|
||||
|
||||
} else if (this.dataType === "music") {
|
||||
await this.select(this.list[0]._id)
|
||||
this.noMore = true
|
||||
} else if (this.dataType === "font" ) {
|
||||
|
||||
} else {
|
||||
this.noMore = true
|
||||
}
|
||||
},
|
||||
loadMore() {
|
||||
if (!this.noMore) {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
|
||||
previewImage(current) {
|
||||
uni.previewImage({
|
||||
current,
|
||||
urls: this.list.map(item => item.image)
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
width: 33%;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 100%;
|
||||
height: 250rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f5f5f5;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
display: block;
|
||||
padding: 20rpx 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-tips {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.select-image {
|
||||
box-sizing: border-box;
|
||||
border: 10rpx solid #3399ff;
|
||||
}
|
||||
|
||||
.music-item {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user