commit
This commit is contained in:
@jyuhsin
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<t-dropdown-menu class="top-dropdown">
|
||||
<t-dropdown-item :options="actOptions" :value="selectActId"/>
|
||||
</t-dropdown-menu>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="list-scroll-view"
|
||||
@scrolltolower="handleScrollToBottom"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refresherTriggered"
|
||||
@refresherrefresh="handleRefresh"
|
||||
refresher-background="#f2f3f5"
|
||||
>
|
||||
<view class="content-container">
|
||||
<view v-for="item in dataList">
|
||||
<view class="content-container-header">
|
||||
<view>
|
||||
<t-avatar shape="circle" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
|
||||
</view>
|
||||
<view style="margin-left: 12px">
|
||||
<view class="title">{{ item.userName }}</view>
|
||||
<view class="content">{{ item.sex }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-container-text">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
<view class="content-container-pic">
|
||||
<t-image
|
||||
v-for="p in JSON.parse(item.files)"
|
||||
v-if="item.files && item.files?.length > 0"
|
||||
class="image-container"
|
||||
:style="{ width: '72px', height: '72px', 'margin-right': '8px'}"
|
||||
fit="contain"
|
||||
@click="onView(item.files)"
|
||||
:src="p"></t-image>
|
||||
</view>
|
||||
<view class="content-container-footer">
|
||||
<view class="time">{{ moment(item.publish).format('MM-DD HH:mm') }}</view>
|
||||
<view @click="onPraise(item)">
|
||||
<t-badge :count="item.praiseCount" :offset="[-2, -2]" class="badge-item" :showZero="true">
|
||||
<t-icon :style="item.praiseCount > 0 ? 'color: red' : ''" name="thumb-up-2-filled"/>
|
||||
</t-badge>
|
||||
</view>
|
||||
</view>
|
||||
<t-divider />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-container">
|
||||
<t-loading v-if="loading" text="加载中..." layout="vertical" theme="circular" size="40rpx"/>
|
||||
<t-divider v-else-if="!hasMore && dataList.length > 0" content="没有更多数据了"/>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<t-empty
|
||||
v-if="!loading && dataList.length === 0"
|
||||
description="暂无精彩瞬间"
|
||||
/>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
<t-fab :icon="iconFunc" draggable="all" :y-bounds="[30, 20]" @click="onClick" />
|
||||
<t-image-viewer v-model:images="imagesArray" v-model:visible="imageVisible" />
|
||||
<publish-moment v-model:show="dynamicVisible" :actId="selectActId" @published="getListData"></publish-moment>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, reactive, onMounted, computed, h} from 'vue';
|
||||
import {Toast} from 'tdesign-mobile-vue';
|
||||
import {useRequest} from "@/utils/request";
|
||||
import { AddIcon } from 'tdesign-icons-vue-next';
|
||||
import PublishMoment from "@/pages/activity/dynamic/PublishMoment.vue";
|
||||
import moment from "moment";
|
||||
|
||||
const iconFunc = () => h(AddIcon, { size: '24px' });
|
||||
const request = useRequest()
|
||||
const actList = ref([])
|
||||
const imagesArray = ref([])
|
||||
const imageVisible = ref(false)
|
||||
const refresherTriggered = ref(false);
|
||||
const loading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
const dataList = ref([]);
|
||||
const content = ref(null);
|
||||
|
||||
const dynamicVisible = ref(false);
|
||||
|
||||
const actOptions = computed(() => {
|
||||
return actList.value.map(item => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.title
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const selectActId = ref(null)
|
||||
const pageForm = reactive({
|
||||
activityId: null,
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
searchKeyword: '',
|
||||
status: '' // 全部
|
||||
})
|
||||
|
||||
async function onClick() {
|
||||
dynamicVisible.value = true
|
||||
}
|
||||
async function onPraise(row) {
|
||||
request.post('/client/activity/dynamic/praise/' + row.id).then(res=>{
|
||||
if(res.code===0){
|
||||
getListData(false)
|
||||
}else{
|
||||
Toast({message: res.msg, theme: 'error'});
|
||||
}
|
||||
})
|
||||
}
|
||||
async function listMineAct() {
|
||||
try {
|
||||
const {data, code, msg} = await request.get('/client/activity/list-mine-act')
|
||||
if (code === 0) {
|
||||
actList.value = data
|
||||
if (actList.value.length) {
|
||||
selectActId.value = actList.value[0].id
|
||||
}
|
||||
} else {
|
||||
Toast.error(msg)
|
||||
}
|
||||
} catch (e) {
|
||||
Toast.error(e.message)
|
||||
}
|
||||
}
|
||||
async function onView(src) {
|
||||
console.log(src)
|
||||
imagesArray.value = src
|
||||
imageVisible.value = true
|
||||
}
|
||||
// 触底加载更多
|
||||
const handleScrollToBottom = () => {
|
||||
if (loading.value || !hasMore.value) return;
|
||||
getListData();
|
||||
};
|
||||
//下拉刷新
|
||||
const handleRefresh = () => {
|
||||
if (loading.value) {
|
||||
refresherTriggered.value = false;
|
||||
return;
|
||||
}
|
||||
refresherTriggered.value = true;
|
||||
pageForm.pageNumber = 1;
|
||||
getListData(true);
|
||||
};
|
||||
// 获取列表数据
|
||||
const getListData = async (isRefresh = false) => {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
if (isRefresh) {
|
||||
pageForm.pageNumber = 1;
|
||||
}
|
||||
// 延时1秒，模拟网络请求
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
try {
|
||||
const response = await useRequest().post('/client/activity/dynamic/list', {
|
||||
pageForm: JSON.stringify(pageForm),
|
||||
activityId: selectActId.value
|
||||
});
|
||||
if (response.code === 0) {
|
||||
const {list, totalCount} = response.data;
|
||||
if (isRefresh) {
|
||||
dataList.value = list;
|
||||
} else {
|
||||
dataList.value = [...dataList.value, ...list];
|
||||
}
|
||||
pageForm.totalCount = totalCount;
|
||||
hasMore.value = dataList.value.length < totalCount;
|
||||
pageForm.pageNumber++;
|
||||
} else {
|
||||
Toast({message: '获取列表失败', theme: 'error'});
|
||||
}
|
||||
} catch (error) {
|
||||
Toast({message: '获取列表失败', theme: 'error'});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
// 重置下拉刷新状态
|
||||
if (refresherTriggered.value) {
|
||||
refresherTriggered.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
listMineAct();
|
||||
getListData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.header {
|
||||
position: relative;
|
||||
height: 245px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.textarea {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
.list-scroll-view {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
.page-container {
|
||||
background: white;
|
||||
}
|
||||
.content-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.content-container-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
color: rgb(35, 110, 180);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.content {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.content-container-text {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.content-container-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
.t-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.time {
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
.button-group {
|
||||
background-color: var(--bg-color-demo, #fff);
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.t-button {
|
||||
height: 32px;
|
||||
flex: 1;
|
||||
|
||||
&:not(:last-child) {
|
||||
flex: 1;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-container-pic {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user