Initial project commit
This commit is contained in:
@@ -0,0 +1,331 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { createShooting, updateShooting, getShootingDetail } from "@/api/shooting";
|
||||
|
||||
const isEdit = ref(false);
|
||||
const editId = ref(0);
|
||||
const submitting = ref(false);
|
||||
|
||||
const form = ref({
|
||||
title: "",
|
||||
city: "",
|
||||
description: "",
|
||||
style: "",
|
||||
shoot_date: "",
|
||||
is_free: false,
|
||||
budget_min: "",
|
||||
budget_max: "",
|
||||
role_needed: "photographer",
|
||||
max_applicants: 1,
|
||||
contact_info: "",
|
||||
});
|
||||
|
||||
const roleOptions = [
|
||||
{ label: "摄影师", value: "photographer" },
|
||||
{ label: "Coser", value: "cosplayer" },
|
||||
{ label: "不限", value: "both" },
|
||||
];
|
||||
|
||||
const roleIndex = computed({
|
||||
get() {
|
||||
return roleOptions.findIndex((o) => o.value === form.value.role_needed);
|
||||
},
|
||||
set(idx) {
|
||||
form.value.role_needed = roleOptions[idx].value;
|
||||
},
|
||||
});
|
||||
|
||||
function onDateChange(e) {
|
||||
form.value.shoot_date = e.detail.value;
|
||||
}
|
||||
|
||||
function validate() {
|
||||
if (!form.value.title.trim()) {
|
||||
uni.showToast({ title: "请输入标题", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
if (!form.value.city.trim()) {
|
||||
uni.showToast({ title: "请输入城市", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
if (!form.value.is_free) {
|
||||
const min = Number(form.value.budget_min);
|
||||
const max = Number(form.value.budget_max);
|
||||
if (min && max && min > max) {
|
||||
uni.showToast({ title: "最低预算不能高于最高预算", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!validate()) return;
|
||||
submitting.value = true;
|
||||
|
||||
const data = {
|
||||
title: form.value.title.trim(),
|
||||
city: form.value.city.trim(),
|
||||
description: form.value.description.trim() || null,
|
||||
style: form.value.style.trim() || null,
|
||||
is_free: form.value.is_free,
|
||||
role_needed: form.value.role_needed,
|
||||
max_applicants: Number(form.value.max_applicants) || 1,
|
||||
contact_info: form.value.contact_info.trim() || null,
|
||||
};
|
||||
|
||||
if (form.value.shoot_date) {
|
||||
data.shoot_date = new Date(form.value.shoot_date).toISOString();
|
||||
}
|
||||
if (!form.value.is_free) {
|
||||
data.budget_min = form.value.budget_min ? Number(form.value.budget_min) : null;
|
||||
data.budget_max = form.value.budget_max ? Number(form.value.budget_max) : null;
|
||||
}
|
||||
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await updateShooting(editId.value, data);
|
||||
uni.showToast({ title: "更新成功", icon: "success" });
|
||||
} else {
|
||||
await createShooting(data);
|
||||
uni.showToast({ title: "发布成功，等待审核", icon: "success" });
|
||||
}
|
||||
setTimeout(() => uni.navigateBack(), 1200);
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "提交失败", icon: "none" });
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadForEdit(id) {
|
||||
try {
|
||||
const d = await getShootingDetail(id);
|
||||
form.value.title = d.title || "";
|
||||
form.value.city = d.city || "";
|
||||
form.value.description = d.description || "";
|
||||
form.value.style = d.style || "";
|
||||
form.value.is_free = d.is_free || false;
|
||||
form.value.budget_min = d.budget_min ? String(d.budget_min) : "";
|
||||
form.value.budget_max = d.budget_max ? String(d.budget_max) : "";
|
||||
form.value.role_needed = d.role_needed || "photographer";
|
||||
form.value.max_applicants = d.max_applicants || 1;
|
||||
form.value.contact_info = d.contact_info || "";
|
||||
if (d.shoot_date) {
|
||||
form.value.shoot_date = d.shoot_date.substring(0, 10);
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: "加载失败", icon: "none" });
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((query) => {
|
||||
if (query.id) {
|
||||
isEdit.value = true;
|
||||
editId.value = Number(query.id);
|
||||
uni.setNavigationBarTitle({ title: "编辑约拍" });
|
||||
loadForEdit(editId.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="create-page">
|
||||
<view class="form-card">
|
||||
<view class="form-row">
|
||||
<text class="form-label required">标题</text>
|
||||
<input
|
||||
v-model="form.title"
|
||||
class="form-input"
|
||||
placeholder="如：上海外滩约拍"
|
||||
:maxlength="100"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label required">城市</text>
|
||||
<input
|
||||
v-model="form.city"
|
||||
class="form-input"
|
||||
placeholder="如：上海"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">风格</text>
|
||||
<input
|
||||
v-model="form.style"
|
||||
class="form-input"
|
||||
placeholder="如：古风、JK、日系清新"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">拍摄日期</text>
|
||||
<picker mode="date" :value="form.shoot_date" @change="onDateChange">
|
||||
<view class="form-input picker-display">
|
||||
{{ form.shoot_date || "选择日期（可选）" }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">需要角色</text>
|
||||
<picker
|
||||
:range="roleOptions"
|
||||
range-key="label"
|
||||
:value="roleIndex"
|
||||
@change="roleIndex = $event.detail.value"
|
||||
>
|
||||
<view class="form-input picker-display">
|
||||
{{ roleOptions[roleIndex]?.label || "选择" }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">招募人数</text>
|
||||
<input
|
||||
v-model="form.max_applicants"
|
||||
class="form-input"
|
||||
type="number"
|
||||
placeholder="默认1人"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-row switch-row">
|
||||
<text class="form-label">互免约拍</text>
|
||||
<switch :checked="form.is_free" @change="form.is_free = $event.detail.value" color="#6366f1" />
|
||||
</view>
|
||||
|
||||
<template v-if="!form.is_free">
|
||||
<view class="form-row">
|
||||
<text class="form-label">预算下限</text>
|
||||
<input
|
||||
v-model="form.budget_min"
|
||||
class="form-input"
|
||||
type="digit"
|
||||
placeholder="最低价格（选填）"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">预算上限</text>
|
||||
<input
|
||||
v-model="form.budget_max"
|
||||
class="form-input"
|
||||
type="digit"
|
||||
placeholder="最高价格（选填）"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">联系方式</text>
|
||||
<input
|
||||
v-model="form.contact_info"
|
||||
class="form-input"
|
||||
placeholder="微信/QQ/手机号（仅对方可见）"
|
||||
:maxlength="100"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">详细描述</text>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
class="form-textarea"
|
||||
placeholder="描述拍摄需求、时间安排等"
|
||||
:maxlength="2000"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="submit-row">
|
||||
<view
|
||||
class="submit-btn"
|
||||
:class="{ disabled: submitting }"
|
||||
@tap="handleSubmit"
|
||||
>
|
||||
{{ submitting ? "提交中..." : isEdit ? "保存修改" : "发布约拍" }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.create-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
.form-card {
|
||||
background: #fff;
|
||||
margin: 16rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
}
|
||||
.form-row {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.form-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.switch-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.form-label {
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
.form-label.required::before {
|
||||
content: "* ";
|
||||
color: #ef4444;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 72rpx;
|
||||
}
|
||||
.picker-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #374151;
|
||||
}
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.submit-row {
|
||||
padding: 20rpx 28rpx;
|
||||
}
|
||||
.submit-btn {
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.submit-btn.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,572 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import {
|
||||
getShootingDetail,
|
||||
applyToShooting,
|
||||
withdrawApplication,
|
||||
closeShooting,
|
||||
getApplications,
|
||||
acceptApplication,
|
||||
rejectApplication,
|
||||
} from "@/api/shooting";
|
||||
|
||||
const detail = ref(null);
|
||||
const loading = ref(true);
|
||||
const requestId = ref(0);
|
||||
const applyMsg = ref("");
|
||||
const showApplyModal = ref(false);
|
||||
const applications = ref([]);
|
||||
const showApplications = ref(false);
|
||||
const isOwner = ref(false);
|
||||
|
||||
const roleLabels = {
|
||||
photographer: "摄影师",
|
||||
cosplayer: "Coser",
|
||||
both: "不限",
|
||||
};
|
||||
const statusLabels = {
|
||||
open: "招募中",
|
||||
matched: "已匹配",
|
||||
closed: "已关闭",
|
||||
};
|
||||
const statusColors = {
|
||||
open: "#22c55e",
|
||||
matched: "#f59e0b",
|
||||
closed: "#9ca3af",
|
||||
};
|
||||
const appStatusLabels = {
|
||||
pending: "待处理",
|
||||
accepted: "已接受",
|
||||
rejected: "已拒绝",
|
||||
};
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getShootingDetail(requestId.value);
|
||||
detail.value = res;
|
||||
const userStr = uni.getStorageSync("userInfo");
|
||||
if (userStr) {
|
||||
try {
|
||||
const u = typeof userStr === "string" ? JSON.parse(userStr) : userStr;
|
||||
isOwner.value = u.id === res.creator?.id;
|
||||
} catch {}
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: "加载失败", icon: "none" });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadApplications() {
|
||||
try {
|
||||
const res = await getApplications(requestId.value);
|
||||
applications.value = Array.isArray(res) ? res : res.items || [];
|
||||
showApplications.value = true;
|
||||
} catch (e) {
|
||||
uni.showToast({ title: "无权查看报名列表", icon: "none" });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleApply() {
|
||||
try {
|
||||
await applyToShooting(requestId.value, { message: applyMsg.value });
|
||||
uni.showToast({ title: "报名成功", icon: "success" });
|
||||
showApplyModal.value = false;
|
||||
applyMsg.value = "";
|
||||
await loadDetail();
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "报名失败", icon: "none" });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleWithdraw() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定撤回报名？",
|
||||
success: async (r) => {
|
||||
if (!r.confirm) return;
|
||||
try {
|
||||
await withdrawApplication(requestId.value);
|
||||
uni.showToast({ title: "已撤回", icon: "success" });
|
||||
await loadDetail();
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "操作失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function handleClose() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定关闭这条约拍？关闭后将不再接受报名。",
|
||||
success: async (r) => {
|
||||
if (!r.confirm) return;
|
||||
try {
|
||||
await closeShooting(requestId.value);
|
||||
uni.showToast({ title: "已关闭", icon: "success" });
|
||||
await loadDetail();
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "操作失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function handleAccept(appId) {
|
||||
try {
|
||||
await acceptApplication(requestId.value, appId);
|
||||
uni.showToast({ title: "已接受", icon: "success" });
|
||||
await loadApplications();
|
||||
await loadDetail();
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "操作失败", icon: "none" });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleReject(appId) {
|
||||
try {
|
||||
await rejectApplication(requestId.value, appId);
|
||||
uni.showToast({ title: "已拒绝", icon: "success" });
|
||||
await loadApplications();
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "操作失败", icon: "none" });
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(d) {
|
||||
if (!d) return "时间待定";
|
||||
const dt = new Date(d);
|
||||
return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, "0")}-${String(dt.getDate()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function formatBudget(item) {
|
||||
if (!item) return "";
|
||||
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 "面议";
|
||||
}
|
||||
|
||||
const canApply = computed(() => {
|
||||
if (!detail.value) return false;
|
||||
return detail.value.status === "open" && !detail.value.has_applied && !isOwner.value;
|
||||
});
|
||||
|
||||
onLoad((query) => {
|
||||
requestId.value = Number(query.id);
|
||||
loadDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="detail-page">
|
||||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||||
<template v-else-if="detail">
|
||||
<view class="header-card">
|
||||
<view class="title-row">
|
||||
<text class="title">{{ detail.title }}</text>
|
||||
<view
|
||||
class="status-tag"
|
||||
:style="{ background: statusColors[detail.status] || '#9ca3af' }"
|
||||
>
|
||||
{{ statusLabels[detail.status] || detail.status }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="creator-row" v-if="detail.creator">
|
||||
<text class="creator-nick">{{ detail.creator.nickname }}</text>
|
||||
<text class="create-time">{{ formatDate(detail.created_at) }} 发布</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">城市</text>
|
||||
<text class="info-value">{{ detail.city }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">拍摄时间</text>
|
||||
<text class="info-value">{{ formatDate(detail.shoot_date) }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="detail.style">
|
||||
<text class="info-label">风格</text>
|
||||
<text class="info-value">{{ detail.style }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">需要角色</text>
|
||||
<text class="info-value">{{ roleLabels[detail.role_needed] || detail.role_needed }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">预算</text>
|
||||
<text class="info-value">{{ formatBudget(detail) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">招募人数</text>
|
||||
<text class="info-value">{{ detail.max_applicants }}人</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="detail.application_count !== undefined">
|
||||
<text class="info-label">已报名</text>
|
||||
<text class="info-value">{{ detail.application_count }}人</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="isOwner && detail.contact_info">
|
||||
<text class="info-label">联系方式</text>
|
||||
<text class="info-value">{{ detail.contact_info }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="detail.description" class="desc-card">
|
||||
<text class="desc-title">详细描述</text>
|
||||
<text class="desc-text">{{ detail.description }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="detail.reject_reason" class="reject-card">
|
||||
<uni-icons type="info" size="16" color="#ef4444" />
|
||||
<text class="reject-text">驳回原因：{{ detail.reject_reason }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Applications panel for owner -->
|
||||
<view v-if="isOwner" class="app-section">
|
||||
<view class="app-header" @tap="loadApplications">
|
||||
<text class="app-title">报名列表</text>
|
||||
<uni-icons type="right" size="16" color="#6366f1" />
|
||||
</view>
|
||||
<view v-if="showApplications" class="app-list">
|
||||
<view v-if="applications.length === 0" class="app-empty">暂无报名</view>
|
||||
<view
|
||||
v-for="app in applications"
|
||||
:key="app.id"
|
||||
class="app-item"
|
||||
>
|
||||
<view class="app-info">
|
||||
<text class="app-name">{{ app.applicant?.nickname || "匿名" }}</text>
|
||||
<text class="app-msg" v-if="app.message">{{ app.message }}</text>
|
||||
<text class="app-status" :class="app.status">{{ appStatusLabels[app.status] || app.status }}</text>
|
||||
</view>
|
||||
<view v-if="app.status === 'pending'" class="app-actions">
|
||||
<view class="action-btn accept" @tap="handleAccept(app.id)">接受</view>
|
||||
<view class="action-btn reject" @tap="handleReject(app.id)">拒绝</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Bottom actions -->
|
||||
<view class="bottom-bar">
|
||||
<template v-if="isOwner">
|
||||
<view
|
||||
v-if="detail.status === 'open'"
|
||||
class="btn btn-close"
|
||||
@tap="handleClose"
|
||||
>关闭约拍</view>
|
||||
<view
|
||||
class="btn btn-edit"
|
||||
@tap="uni.navigateTo({ url: `/pages/shooting/create?id=${detail.id}` })"
|
||||
v-if="detail.status !== 'closed'"
|
||||
>编辑</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-if="canApply" class="btn btn-apply" @tap="showApplyModal = true">
|
||||
我要报名
|
||||
</view>
|
||||
<view
|
||||
v-else-if="detail.has_applied"
|
||||
class="btn btn-withdraw"
|
||||
@tap="handleWithdraw"
|
||||
>撤回报名</view>
|
||||
<view v-else class="btn btn-disabled">
|
||||
{{ detail.status === 'closed' ? '已关闭' : '已报名' }}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- Apply modal -->
|
||||
<view v-if="showApplyModal" class="modal-mask" @tap="showApplyModal = false">
|
||||
<view class="modal-content" @tap.stop>
|
||||
<text class="modal-title">报名约拍</text>
|
||||
<textarea
|
||||
v-model="applyMsg"
|
||||
class="modal-textarea"
|
||||
placeholder="留言给发布者（选填）"
|
||||
:maxlength="500"
|
||||
/>
|
||||
<view class="modal-actions">
|
||||
<view class="modal-btn cancel" @tap="showApplyModal = false">取消</view>
|
||||
<view class="modal-btn confirm" @tap="handleApply">确认报名</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
.loading-tip {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.header-card,
|
||||
.info-card,
|
||||
.desc-card,
|
||||
.reject-card,
|
||||
.app-section {
|
||||
background: #fff;
|
||||
margin: 16rpx 20rpx 0;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1e1e2e;
|
||||
flex: 1;
|
||||
}
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.creator-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.creator-nick {
|
||||
font-size: 26rpx;
|
||||
color: #6366f1;
|
||||
}
|
||||
.create-time {
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14rpx 0;
|
||||
border-bottom: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.info-label {
|
||||
width: 160rpx;
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.desc-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1e1e2e;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.desc-text {
|
||||
font-size: 26rpx;
|
||||
color: #4b5563;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.reject-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8rpx;
|
||||
background: #fef2f2;
|
||||
}
|
||||
.reject-text {
|
||||
font-size: 26rpx;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.app-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1e1e2e;
|
||||
}
|
||||
.app-list {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.app-empty {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.app-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
border-top: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.app-info {
|
||||
flex: 1;
|
||||
}
|
||||
.app-name {
|
||||
font-size: 28rpx;
|
||||
color: #1e1e2e;
|
||||
font-weight: 500;
|
||||
}
|
||||
.app-msg {
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.app-status {
|
||||
font-size: 22rpx;
|
||||
display: inline-block;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.app-status.pending { color: #f59e0b; }
|
||||
.app-status.accepted { color: #22c55e; }
|
||||
.app-status.rejected { color: #ef4444; }
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.action-btn {
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.action-btn.accept {
|
||||
background: #22c55e;
|
||||
color: #fff;
|
||||
}
|
||||
.action-btn.reject {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx 28rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 22rpx 0;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-apply {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-withdraw {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
.btn-close {
|
||||
background: #fee2e2;
|
||||
color: #ef4444;
|
||||
}
|
||||
.btn-edit {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-disabled {
|
||||
background: #e5e7eb;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
.modal-content {
|
||||
width: 600rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1e1e2e;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.modal-textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx;
|
||||
font-size: 26rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.modal-btn.cancel {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
.modal-btn.confirm {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,340 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getMyShootings, getMyApplications } from "@/api/shooting";
|
||||
|
||||
const tab = ref("published");
|
||||
const publishedList = ref([]);
|
||||
const appliedList = ref([]);
|
||||
const publishedPage = ref(1);
|
||||
const appliedPage = ref(1);
|
||||
const publishedTotal = ref(0);
|
||||
const appliedTotal = ref(0);
|
||||
const publishedFinished = ref(false);
|
||||
const appliedFinished = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
const roleLabels = {
|
||||
photographer: "找摄影",
|
||||
cosplayer: "找Coser",
|
||||
both: "不限",
|
||||
};
|
||||
const statusLabels = {
|
||||
open: "招募中",
|
||||
matched: "已匹配",
|
||||
closed: "已关闭",
|
||||
};
|
||||
const statusColors = {
|
||||
open: "#22c55e",
|
||||
matched: "#f59e0b",
|
||||
closed: "#9ca3af",
|
||||
};
|
||||
const auditLabels = {
|
||||
pending: "待审核",
|
||||
approved: "已通过",
|
||||
rejected: "已驳回",
|
||||
};
|
||||
const auditColors = {
|
||||
pending: "#f59e0b",
|
||||
approved: "#22c55e",
|
||||
rejected: "#ef4444",
|
||||
};
|
||||
const appStatusLabels = {
|
||||
pending: "待处理",
|
||||
accepted: "已接受",
|
||||
rejected: "已拒绝",
|
||||
};
|
||||
const appStatusColors = {
|
||||
pending: "#f59e0b",
|
||||
accepted: "#22c55e",
|
||||
rejected: "#ef4444",
|
||||
};
|
||||
|
||||
async function fetchPublished(reset = false) {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
publishedPage.value = 1;
|
||||
publishedFinished.value = false;
|
||||
publishedList.value = [];
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getMyShootings({
|
||||
page: publishedPage.value,
|
||||
page_size: 20,
|
||||
});
|
||||
const items = res.items || [];
|
||||
if (reset) {
|
||||
publishedList.value = items;
|
||||
} else {
|
||||
publishedList.value.push(...items);
|
||||
}
|
||||
publishedTotal.value = res.total || 0;
|
||||
if (publishedList.value.length >= publishedTotal.value)
|
||||
publishedFinished.value = true;
|
||||
publishedPage.value++;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchApplied(reset = false) {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
appliedPage.value = 1;
|
||||
appliedFinished.value = false;
|
||||
appliedList.value = [];
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getMyApplications({
|
||||
page: appliedPage.value,
|
||||
page_size: 20,
|
||||
});
|
||||
const items = res.items || [];
|
||||
if (reset) {
|
||||
appliedList.value = items;
|
||||
} else {
|
||||
appliedList.value.push(...items);
|
||||
}
|
||||
appliedTotal.value = res.total || 0;
|
||||
if (appliedList.value.length >= appliedTotal.value)
|
||||
appliedFinished.value = true;
|
||||
appliedPage.value++;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function switchTab(t) {
|
||||
tab.value = t;
|
||||
if (t === "published" && publishedList.value.length === 0) fetchPublished(true);
|
||||
if (t === "applied" && appliedList.value.length === 0) fetchApplied(true);
|
||||
}
|
||||
|
||||
function goDetail(id) {
|
||||
uni.navigateTo({ url: `/pages/shooting/detail?id=${id}` });
|
||||
}
|
||||
|
||||
function formatDate(d) {
|
||||
if (!d) return "";
|
||||
const dt = new Date(d);
|
||||
return `${dt.getMonth() + 1}月${dt.getDate()}日`;
|
||||
}
|
||||
|
||||
onPullDownRefresh(async () => {
|
||||
if (tab.value === "published") await fetchPublished(true);
|
||||
else await fetchApplied(true);
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (tab.value === "published" && !publishedFinished.value) fetchPublished();
|
||||
if (tab.value === "applied" && !appliedFinished.value) fetchApplied();
|
||||
});
|
||||
|
||||
fetchPublished(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="mine-shooting-page">
|
||||
<view class="tabs">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: tab === 'published' }"
|
||||
@tap="switchTab('published')"
|
||||
>
|
||||
我发布的
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: tab === 'applied' }"
|
||||
@tap="switchTab('applied')"
|
||||
>
|
||||
我报名的
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Published list -->
|
||||
<view v-if="tab === 'published'" class="card-list">
|
||||
<view
|
||||
v-for="item in publishedList"
|
||||
:key="item.id"
|
||||
class="shoot-card"
|
||||
@tap="goDetail(item.id)"
|
||||
>
|
||||
<view class="card-title-row">
|
||||
<text class="card-title">{{ item.title }}</text>
|
||||
<view class="dual-tags">
|
||||
<view
|
||||
class="mini-tag"
|
||||
:style="{ background: auditColors[item.audit_status] || '#9ca3af' }"
|
||||
>{{ auditLabels[item.audit_status] || item.audit_status }}</view>
|
||||
<view
|
||||
class="mini-tag"
|
||||
:style="{ background: statusColors[item.status] || '#9ca3af' }"
|
||||
>{{ statusLabels[item.status] || item.status }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-sub">
|
||||
<text>{{ item.city }}</text>
|
||||
<text v-if="item.style"> · {{ item.style }}</text>
|
||||
<text> · {{ roleLabels[item.role_needed] || item.role_needed }}</text>
|
||||
</view>
|
||||
<view class="card-bottom">
|
||||
<text class="card-date">{{ formatDate(item.created_at) }}</text>
|
||||
<text class="apply-count">{{ item.application_count }}人报名</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||||
<view v-else-if="publishedFinished && publishedList.length" class="loading-tip">没有更多了</view>
|
||||
<view v-else-if="!loading && !publishedList.length" class="empty-tip">
|
||||
<uni-icons type="info" size="40" color="#d1d5db" />
|
||||
<text>还没有发布约拍</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Applied list -->
|
||||
<view v-if="tab === 'applied'" class="card-list">
|
||||
<view
|
||||
v-for="app in appliedList"
|
||||
:key="app.id"
|
||||
class="shoot-card"
|
||||
@tap="goDetail(app.request_id)"
|
||||
>
|
||||
<view class="card-title-row">
|
||||
<text class="card-title">约拍 #{{ app.request_id }}</text>
|
||||
<view
|
||||
class="mini-tag"
|
||||
:style="{ background: appStatusColors[app.status] || '#9ca3af' }"
|
||||
>{{ appStatusLabels[app.status] || app.status }}</view>
|
||||
</view>
|
||||
<view class="card-sub" v-if="app.message">
|
||||
<text>留言：{{ app.message }}</text>
|
||||
</view>
|
||||
<view class="card-bottom">
|
||||
<text class="card-date">{{ formatDate(app.created_at) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||||
<view v-else-if="appliedFinished && appliedList.length" class="loading-tip">没有更多了</view>
|
||||
<view v-else-if="!loading && !appliedList.length" class="empty-tip">
|
||||
<uni-icons type="info" size="40" color="#d1d5db" />
|
||||
<text>还没有报名约拍</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mine-shooting-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #6b7280;
|
||||
position: relative;
|
||||
}
|
||||
.tab-item.active {
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tab-item.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
bottom: 0;
|
||||
height: 4rpx;
|
||||
background: #6366f1;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.shoot-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
margin-top: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1e1e2e;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dual-tags {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.mini-tag {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.card-sub {
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.card-date {
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.apply-count {
|
||||
font-size: 22rpx;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.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