Initial project commit
This commit is contained in:
@@ -0,0 +1,456 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getShootingList } from "@/api/shooting";
|
||||
|
||||
const list = ref([]);
|
||||
const page = ref(1);
|
||||
const total = ref(0);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
|
||||
const city = ref("");
|
||||
const style = ref("");
|
||||
const roleFilter = ref("");
|
||||
const isFree = ref(null);
|
||||
const showFilter = ref(false);
|
||||
|
||||
const roleOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "摄影师", value: "photographer" },
|
||||
{ label: "Coser", value: "cosplayer" },
|
||||
{ label: "不限", value: "both" },
|
||||
];
|
||||
|
||||
const roleLabels = {
|
||||
photographer: "找摄影",
|
||||
cosplayer: "找Coser",
|
||||
both: "不限",
|
||||
};
|
||||
|
||||
const statusLabels = {
|
||||
open: "招募中",
|
||||
matched: "已匹配",
|
||||
closed: "已关闭",
|
||||
};
|
||||
|
||||
const statusColors = {
|
||||
open: "#22c55e",
|
||||
matched: "#f59e0b",
|
||||
closed: "#9ca3af",
|
||||
};
|
||||
|
||||
async function fetchList(reset = false) {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
page.value = 1;
|
||||
finished.value = false;
|
||||
list.value = [];
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = { page: page.value, page_size: 20 };
|
||||
if (city.value) params.city = city.value;
|
||||
if (style.value) params.style = style.value;
|
||||
if (roleFilter.value) params.role_needed = roleFilter.value;
|
||||
if (isFree.value !== null) params.is_free = isFree.value;
|
||||
params.status = "open";
|
||||
|
||||
const res = await getShootingList(params);
|
||||
const items = res.items || [];
|
||||
if (reset) {
|
||||
list.value = items;
|
||||
} else {
|
||||
list.value.push(...items);
|
||||
}
|
||||
total.value = res.total || 0;
|
||||
if (list.value.length >= total.value) finished.value = true;
|
||||
page.value++;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function applyFilter() {
|
||||
showFilter.value = false;
|
||||
fetchList(true);
|
||||
}
|
||||
|
||||
function resetFilter() {
|
||||
city.value = "";
|
||||
style.value = "";
|
||||
roleFilter.value = "";
|
||||
isFree.value = null;
|
||||
showFilter.value = false;
|
||||
fetchList(true);
|
||||
}
|
||||
|
||||
function goDetail(id) {
|
||||
uni.navigateTo({ url: `/pages/shooting/detail?id=${id}` });
|
||||
}
|
||||
|
||||
function goCreate() {
|
||||
uni.navigateTo({ url: "/pages/shooting/create" });
|
||||
}
|
||||
|
||||
function formatDate(d) {
|
||||
if (!d) return "时间待定";
|
||||
const dt = new Date(d);
|
||||
return `${dt.getMonth() + 1}月${dt.getDate()}日`;
|
||||
}
|
||||
|
||||
function formatBudget(item) {
|
||||
if (item.is_free) return "互免";
|
||||
if (item.budget_min && item.budget_max)
|
||||
return `¥${item.budget_min}-${item.budget_max}`;
|
||||
if (item.budget_min) return `¥${item.budget_min}起`;
|
||||
if (item.budget_max) return `¥${item.budget_max}以内`;
|
||||
return "面议";
|
||||
}
|
||||
|
||||
onPullDownRefresh(async () => {
|
||||
await fetchList(true);
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (!finished.value) fetchList();
|
||||
});
|
||||
|
||||
fetchList(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="shooting-page">
|
||||
<view class="top-bar">
|
||||
<view class="bar-left">
|
||||
<text class="bar-title">约拍广场</text>
|
||||
<text class="bar-count">{{ total }}条约拍</text>
|
||||
</view>
|
||||
<view class="bar-right">
|
||||
<view class="bar-btn" @tap="showFilter = !showFilter">
|
||||
<uni-icons type="settings" size="18" color="#6366f1" />
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
<view class="bar-btn primary" @tap="goCreate">
|
||||
<uni-icons type="plusempty" size="16" color="#fff" />
|
||||
<text>发布</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showFilter" class="filter-panel">
|
||||
<view class="filter-row">
|
||||
<text class="filter-label">城市</text>
|
||||
<input
|
||||
v-model="city"
|
||||
class="filter-input"
|
||||
placeholder="输入城市"
|
||||
/>
|
||||
</view>
|
||||
<view class="filter-row">
|
||||
<text class="filter-label">风格</text>
|
||||
<input
|
||||
v-model="style"
|
||||
class="filter-input"
|
||||
placeholder="如：古风、JK、洛丽塔"
|
||||
/>
|
||||
</view>
|
||||
<view class="filter-row">
|
||||
<text class="filter-label">角色</text>
|
||||
<view class="role-tags">
|
||||
<view
|
||||
v-for="opt in roleOptions"
|
||||
:key="opt.value"
|
||||
class="role-tag"
|
||||
:class="{ active: roleFilter === opt.value }"
|
||||
@tap="roleFilter = opt.value"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-row">
|
||||
<text class="filter-label">预算</text>
|
||||
<view class="role-tags">
|
||||
<view
|
||||
class="role-tag"
|
||||
:class="{ active: isFree === null }"
|
||||
@tap="isFree = null"
|
||||
>全部</view>
|
||||
<view
|
||||
class="role-tag"
|
||||
:class="{ active: isFree === true }"
|
||||
@tap="isFree = true"
|
||||
>互免</view>
|
||||
<view
|
||||
class="role-tag"
|
||||
:class="{ active: isFree === false }"
|
||||
@tap="isFree = false"
|
||||
>付费</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-actions">
|
||||
<view class="filter-btn reset" @tap="resetFilter">重置</view>
|
||||
<view class="filter-btn apply" @tap="applyFilter">应用</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-list">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="shoot-card"
|
||||
@tap="goDetail(item.id)"
|
||||
>
|
||||
<view class="card-header">
|
||||
<view class="card-title-row">
|
||||
<text class="card-title">{{ item.title }}</text>
|
||||
<view
|
||||
class="status-tag"
|
||||
:style="{ background: statusColors[item.status] || '#9ca3af' }"
|
||||
>
|
||||
{{ statusLabels[item.status] || item.status }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-creator" v-if="item.creator">
|
||||
<text class="creator-name">{{ item.creator.nickname }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="info-item">
|
||||
<uni-icons type="location" size="14" color="#6366f1" />
|
||||
<text>{{ item.city }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<uni-icons type="calendar" size="14" color="#6366f1" />
|
||||
<text>{{ formatDate(item.shoot_date) }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.style">
|
||||
<uni-icons type="flag" size="14" color="#6366f1" />
|
||||
<text>{{ item.style }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<view class="footer-tag role-label">
|
||||
{{ roleLabels[item.role_needed] || item.role_needed }}
|
||||
</view>
|
||||
<view class="footer-tag budget-label">
|
||||
{{ formatBudget(item) }}
|
||||
</view>
|
||||
<text class="apply-count">{{ item.application_count }}人报名</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||||
<view v-else-if="finished && list.length > 0" class="loading-tip">没有更多了</view>
|
||||
<view v-else-if="!loading && list.length === 0" class="empty-tip">
|
||||
<uni-icons type="info" size="40" color="#d1d5db" />
|
||||
<text>暂无约拍信息</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.shooting-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 28rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.bar-left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.bar-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1e1e2e;
|
||||
}
|
||||
.bar-count {
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.bar-right {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.bar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #6366f1;
|
||||
background: #eef2ff;
|
||||
}
|
||||
.bar-btn.primary {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
background: #fff;
|
||||
padding: 20rpx 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.filter-label {
|
||||
width: 100rpx;
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.filter-input {
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.role-tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.role-tag {
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
.role-tag.active {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.filter-btn {
|
||||
padding: 12rpx 36rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.filter-btn.reset {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
.filter-btn.apply {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.shoot-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx;
|
||||
margin-top: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.card-header {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1e1e2e;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.card-creator {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.creator-name {
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.card-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.footer-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.role-label {
|
||||
background: #eef2ff;
|
||||
color: #6366f1;
|
||||
}
|
||||
.budget-label {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
.apply-count {
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.loading-tip {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
.empty-tip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 120rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user