136 lines
3.1 KiB
Plaintext
136 lines
3.1 KiB
Plaintext
<template>
|
|
<cl-page>
|
|
<cl-topbar title="我的认养" />
|
|
|
|
<scroll-view scroll-y class="content">
|
|
<view class="adoption-list">
|
|
<view v-for="item in adoptionList" :key="item.id" class="adoption-card" @click="goDetail(item.id)">
|
|
<image class="adoption-image" :src="item.projectImage != null ? item.projectImage : '/static/images/farm.png'" mode="aspectFill" />
|
|
<view class="adoption-info">
|
|
<text class="adoption-name">{{ item.projectName }}</text>
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" :style="{ width: item.progress + '%' }"></view>
|
|
</view>
|
|
<view class="adoption-meta">
|
|
<text class="date">{{ item.startTime }} - {{ item.endTime }}</text>
|
|
<text class="status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<cl-empty v-if="adoptionList.length === 0" text="暂无认养记录" />
|
|
</scroll-view>
|
|
</cl-page>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { router, useCool } from '@/cool';
|
|
|
|
const { service } = useCool();
|
|
const statusBarHeight = ref(0);
|
|
|
|
const adoptionList = ref<any[]>([]);
|
|
|
|
function getStatusClass(status: number) {
|
|
return { active: status === 1, completed: status === 2, cancelled: status === 3 };
|
|
}
|
|
|
|
function getStatusText(status: number): string {
|
|
const texts: Record<number, string> = { 1: '进行中', 2: '已完成', 3: '已取消' };
|
|
const text = texts[status];
|
|
return text != null ? text : '未知';
|
|
}
|
|
|
|
async function loadAdoptions() {
|
|
try {
|
|
const res = await service.nongchuang.adoption.myProjects();
|
|
if (res != null) {
|
|
const data = res as UTSJSONObject;
|
|
const list = data.getArray<any>("list");
|
|
adoptionList.value = list != null ? list : (res as any[]);
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({ title: '加载失败', icon: 'none' });
|
|
adoptionList.value = [];
|
|
}
|
|
}
|
|
|
|
function goDetail(id: number) {
|
|
router.push({ path: '/pages/adoption/detail', query: { id } });
|
|
}
|
|
|
|
onMounted(() => {
|
|
const info = uni.getWindowInfo();
|
|
statusBarHeight.value = info.statusBarHeight + 10;
|
|
loadAdoptions();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
flex: 1;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.adoption-card {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.adoption-image {
|
|
width: 160rpx;
|
|
height: 120rpx;
|
|
border-radius: 12rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.adoption-info {
|
|
flex: 1;
|
|
|
|
.adoption-name {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 8rpx;
|
|
background: #f0f0f0;
|
|
border-radius: 4rpx;
|
|
margin: 16rpx 0;
|
|
overflow: hidden;
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: #52c41a;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
|
|
.adoption-meta {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
.date {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.status {
|
|
font-size: 24rpx;
|
|
|
|
&.active { color: #52c41a; }
|
|
&.completed { color: #8c8c8c; }
|
|
&.cancelled { color: #ff4d4f; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|