Initial project commit
This commit is contained in:
@@ -0,0 +1,242 @@
|
||||
<script setup>
|
||||
import cityData from "@/utils/city-data";
|
||||
|
||||
defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
currentCity: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close", "select"]);
|
||||
|
||||
const hotCities = [
|
||||
"北京", "上海", "广州", "深圳",
|
||||
"成都", "杭州", "南京", "武汉",
|
||||
"重庆", "西安", "长沙", "厦门",
|
||||
"青岛", "大连", "苏州", "三亚",
|
||||
];
|
||||
|
||||
const handleSelect = (city) => {
|
||||
emit("select", city);
|
||||
emit("close");
|
||||
};
|
||||
|
||||
const handleMask = () => {
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view v-if="visible" class="city-picker">
|
||||
<view class="mask" @tap="handleMask" @touchmove.stop.prevent />
|
||||
<view class="panel">
|
||||
<view class="panel-header">
|
||||
<text class="panel-title">选择城市</text>
|
||||
<view class="close-btn" @tap="handleMask">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="panel-body">
|
||||
<view
|
||||
class="city-item all-city"
|
||||
:class="{ active: currentCity === '全部城市' }"
|
||||
@tap="handleSelect('全部城市')"
|
||||
>
|
||||
<text class="city-text">全部城市</text>
|
||||
</view>
|
||||
|
||||
<view class="section-label">
|
||||
<text class="section-label-text">热门城市</text>
|
||||
</view>
|
||||
|
||||
<view class="city-grid">
|
||||
<view
|
||||
v-for="c in hotCities"
|
||||
:key="c"
|
||||
class="city-tag"
|
||||
:class="{ active: currentCity === c }"
|
||||
@tap="handleSelect(c)"
|
||||
>
|
||||
<text class="tag-text">{{ c }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-label all-section">
|
||||
<text class="section-label-text">全部城市</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="province in cityData"
|
||||
:key="province.province"
|
||||
class="province-section"
|
||||
>
|
||||
<text class="province-title">{{ province.province }}</text>
|
||||
<view class="city-grid">
|
||||
<view
|
||||
v-for="c in province.cities"
|
||||
:key="`${province.province}-${c}`"
|
||||
class="city-tag"
|
||||
:class="{ active: currentCity === c || currentCity === c.replace('市', '') }"
|
||||
@tap="handleSelect(c)"
|
||||
>
|
||||
<text class="tag-text">{{ c }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.city-picker {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
border-bottom: 1rpx solid #f1f5f9;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 28rpx;
|
||||
background: #f5f6fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 26rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
height: calc(70vh - 114rpx);
|
||||
padding: 24rpx 32rpx 48rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.city-item {
|
||||
padding: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background: #f5f6fa;
|
||||
}
|
||||
|
||||
.city-item.active {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.city-text {
|
||||
font-size: 30rpx;
|
||||
color: #1e293b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.city-item.active .city-text {
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.all-section {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.section-label-text {
|
||||
font-size: 26rpx;
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.city-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.province-section {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.province-title {
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.city-tag {
|
||||
width: calc(25% - 12rpx);
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f6fa;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.city-tag.active {
|
||||
background: #6366f1;
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
font-size: 26rpx;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.city-tag.active .tag-text {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,584 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { getComments, createComment, reportComment } from "@/api/comment";
|
||||
import { resolveImageUrl } from "@/utils/image";
|
||||
|
||||
const props = defineProps({
|
||||
spotId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
isFavorited: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["toggle-favorite"]);
|
||||
|
||||
const comments = ref([]);
|
||||
const page = ref(1);
|
||||
const pageSize = 10;
|
||||
const hasMore = ref(true);
|
||||
const loading = ref(false);
|
||||
|
||||
const inputText = ref("");
|
||||
const replyTarget = ref(null);
|
||||
const sending = ref(false);
|
||||
|
||||
const showReport = ref(false);
|
||||
const reportTargetId = ref(null);
|
||||
const reportReason = ref("");
|
||||
|
||||
const inputPlaceholder = computed(() =>
|
||||
replyTarget.value ? `回复 @${replyTarget.value.nickname}` : "写下你的评论..."
|
||||
);
|
||||
|
||||
const fetchComments = async (reset = false) => {
|
||||
if (loading.value) return;
|
||||
if (!reset && !hasMore.value) return;
|
||||
loading.value = true;
|
||||
if (reset) {
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
}
|
||||
try {
|
||||
const res = await getComments(props.spotId, {
|
||||
page: page.value,
|
||||
page_size: pageSize,
|
||||
});
|
||||
const list = res.items || res.data || res || [];
|
||||
if (reset) {
|
||||
comments.value = list;
|
||||
} else {
|
||||
comments.value.push(...list);
|
||||
}
|
||||
if (list.length < pageSize) {
|
||||
hasMore.value = false;
|
||||
} else {
|
||||
page.value++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSend = async () => {
|
||||
const text = inputText.value.trim();
|
||||
if (!text || sending.value) return;
|
||||
sending.value = true;
|
||||
try {
|
||||
const data = { content: text };
|
||||
if (replyTarget.value) {
|
||||
data.parent_id = replyTarget.value.id;
|
||||
}
|
||||
await createComment(props.spotId, data);
|
||||
inputText.value = "";
|
||||
replyTarget.value = null;
|
||||
await fetchComments(true);
|
||||
uni.showToast({ title: "评论成功", icon: "none" });
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
sending.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const setReply = (comment) => {
|
||||
replyTarget.value = {
|
||||
id: comment.id,
|
||||
nickname: comment.user?.nickname || "匿名用户",
|
||||
};
|
||||
};
|
||||
|
||||
const cancelReply = () => {
|
||||
replyTarget.value = null;
|
||||
};
|
||||
|
||||
const openReport = (commentId) => {
|
||||
reportTargetId.value = commentId;
|
||||
reportReason.value = "";
|
||||
showReport.value = true;
|
||||
};
|
||||
|
||||
const goUser = (userId) => {
|
||||
if (userId) uni.navigateTo({ url: `/pages/user/index?id=${userId}` });
|
||||
};
|
||||
|
||||
const closeReport = () => {
|
||||
showReport.value = false;
|
||||
reportTargetId.value = null;
|
||||
reportReason.value = "";
|
||||
};
|
||||
|
||||
const submitReport = async () => {
|
||||
const reason = reportReason.value.trim();
|
||||
if (!reason) {
|
||||
uni.showToast({ title: "请输入举报原因", icon: "none" });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await reportComment(reportTargetId.value, { reason });
|
||||
uni.showToast({ title: "举报已提交", icon: "none" });
|
||||
closeReport();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (t) => {
|
||||
if (!t) return "";
|
||||
const d = new Date(t);
|
||||
const mm = String(d.getMonth() + 1).padStart(2, "0");
|
||||
const dd = String(d.getDate()).padStart(2, "0");
|
||||
const hh = String(d.getHours()).padStart(2, "0");
|
||||
const mi = String(d.getMinutes()).padStart(2, "0");
|
||||
return `${mm}-${dd} ${hh}:${mi}`;
|
||||
};
|
||||
|
||||
fetchComments(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="comment-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">评论</text>
|
||||
</view>
|
||||
|
||||
<view v-if="comments.length === 0 && !loading" class="empty-tip">
|
||||
<text>暂无评论，快来发表第一条吧</text>
|
||||
</view>
|
||||
|
||||
<view v-for="item in comments" :key="item.id" class="comment-card">
|
||||
<view class="comment-main">
|
||||
<view class="avatar-box" @tap="goUser(item.user?.id)">
|
||||
<image
|
||||
v-if="item.user?.avatar_url"
|
||||
class="avatar-img"
|
||||
:src="resolveImageUrl(item.user.avatar_url)"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text v-else class="avatar-text">{{ (item.user?.nickname || "匿")[0] }}</text>
|
||||
</view>
|
||||
<view class="comment-body">
|
||||
<text class="nickname" @tap="goUser(item.user?.id)">{{ item.user?.nickname || "匿名用户" }}</text>
|
||||
<text class="comment-content">{{ item.content }}</text>
|
||||
<view class="comment-footer">
|
||||
<text class="comment-time">{{ formatTime(item.created_at) }}</text>
|
||||
<text class="action-btn" @tap="setReply(item)">回复</text>
|
||||
<text class="action-btn report-btn" @tap="openReport(item.id)">举报</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="item.replies && item.replies.length" class="replies-list">
|
||||
<view v-for="reply in item.replies" :key="reply.id" class="reply-item">
|
||||
<view class="reply-avatar-box" @tap="goUser(reply.user?.id)">
|
||||
<image
|
||||
v-if="reply.user?.avatar_url"
|
||||
class="reply-avatar-img"
|
||||
:src="resolveImageUrl(reply.user.avatar_url)"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text v-else class="reply-avatar-text">{{ (reply.user?.nickname || "匿")[0] }}</text>
|
||||
</view>
|
||||
<view class="reply-body">
|
||||
<text class="reply-nickname" @tap="goUser(reply.user?.id)">{{ reply.user?.nickname || "匿名用户" }}</text>
|
||||
<text class="reply-content">{{ reply.content }}</text>
|
||||
<view class="reply-footer">
|
||||
<text class="comment-time">{{ formatTime(reply.created_at) }}</text>
|
||||
<text class="action-btn" @tap="setReply(reply)">回复</text>
|
||||
<text class="action-btn report-btn" @tap="openReport(reply.id)">举报</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="hasMore && comments.length > 0" class="load-more" @tap="fetchComments()">
|
||||
<text>{{ loading ? "加载中..." : "加载更多" }}</text>
|
||||
</view>
|
||||
|
||||
<view class="input-bar">
|
||||
<view v-if="replyTarget" class="reply-hint" @tap="cancelReply">
|
||||
<text class="reply-hint-text">回复 @{{ replyTarget.nickname }}</text>
|
||||
<text class="reply-cancel">✕</text>
|
||||
</view>
|
||||
<view class="input-row">
|
||||
<input
|
||||
class="comment-input"
|
||||
v-model="inputText"
|
||||
:placeholder="inputPlaceholder"
|
||||
confirm-type="send"
|
||||
@confirm="handleSend"
|
||||
/>
|
||||
<view class="send-btn" :class="{ disabled: !inputText.trim() }" @tap="handleSend">
|
||||
<text class="send-text">发送</text>
|
||||
</view>
|
||||
<view
|
||||
class="fav-quick-btn"
|
||||
:class="{ active: props.isFavorited }"
|
||||
@tap="emit('toggle-favorite')"
|
||||
>
|
||||
<uni-icons
|
||||
:type="props.isFavorited ? 'heart-filled' : 'heart'"
|
||||
size="18"
|
||||
:color="props.isFavorited ? '#6366f1' : '#94a3b8'"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showReport" class="report-mask" @tap.self="closeReport">
|
||||
<view class="report-popup">
|
||||
<text class="report-title">举报评论</text>
|
||||
<textarea
|
||||
class="report-textarea"
|
||||
v-model="reportReason"
|
||||
placeholder="请输入举报原因"
|
||||
:maxlength="200"
|
||||
/>
|
||||
<view class="report-actions">
|
||||
<view class="report-cancel-btn" @tap="closeReport">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
<view class="report-submit-btn" @tap="submitReport">
|
||||
<text class="report-submit-text">提交</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.comment-section {
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 60rpx 0;
|
||||
color: #94a3b8;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.comment-card {
|
||||
background: #ffffff;
|
||||
margin: 0 32rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.comment-main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
background: #e0e7ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 28rpx;
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 28rpx;
|
||||
color: #334155;
|
||||
line-height: 1.6;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.comment-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 22rpx;
|
||||
color: #6366f1;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.report-btn {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.replies-list {
|
||||
margin-left: 92rpx;
|
||||
margin-top: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid #f1f5f9;
|
||||
}
|
||||
|
||||
.reply-item {
|
||||
display: flex;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.reply-avatar-box {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 26rpx;
|
||||
background: #f1f5f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.reply-avatar-img {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
|
||||
.reply-avatar-text {
|
||||
font-size: 22rpx;
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.reply-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.reply-nickname {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.reply-content {
|
||||
font-size: 26rpx;
|
||||
color: #475569;
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.reply-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
color: #6366f1;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.input-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
padding: 16rpx 24rpx;
|
||||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.reply-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8rpx 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
background: #f1f5f9;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.reply-hint-text {
|
||||
font-size: 24rpx;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.reply-cancel {
|
||||
font-size: 24rpx;
|
||||
color: #94a3b8;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment-input {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: #f5f6fa;
|
||||
border-radius: 36rpx;
|
||||
padding: 0 28rpx;
|
||||
font-size: 28rpx;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
margin-left: 16rpx;
|
||||
background: #6366f1;
|
||||
border-radius: 36rpx;
|
||||
padding: 0 32rpx;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.send-btn.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.send-text {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fav-quick-btn {
|
||||
margin-left: 12rpx;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
background: #f5f6fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.fav-quick-btn.active {
|
||||
background: rgba(99, 102, 241, 0.12);
|
||||
}
|
||||
|
||||
.report-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: 200;
|
||||
}
|
||||
|
||||
.report-popup {
|
||||
width: 600rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.report-textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background: #f5f6fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #334155;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.report-actions {
|
||||
display: flex;
|
||||
margin-top: 32rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.report-cancel-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f6fa;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.report-submit-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #6366f1;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.report-submit-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "36rpx",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:value"]);
|
||||
|
||||
const handleTap = (star) => {
|
||||
if (props.readonly) return;
|
||||
emit("update:value", star);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="rating-star" :class="{ interactive: !readonly }">
|
||||
<text
|
||||
v-for="i in 5"
|
||||
:key="i"
|
||||
class="star"
|
||||
:class="{ filled: i <= value }"
|
||||
:style="{ fontSize: size }"
|
||||
@tap="handleTap(i)"
|
||||
>{{ i <= value ? "★" : "☆" }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rating-star {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rating-star.interactive .star {
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
|
||||
.star {
|
||||
color: #d1d5db;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.star.filled {
|
||||
color: #f59e0b;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
rows: { type: Number, default: 3 },
|
||||
avatar: { type: Boolean, default: false },
|
||||
card: { type: Boolean, default: false },
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="skeleton" :class="{ 'skeleton-card': card }">
|
||||
<view v-if="avatar" class="sk-avatar shimmer" />
|
||||
<view class="sk-body">
|
||||
<view class="sk-title shimmer" />
|
||||
<view
|
||||
v-for="i in rows"
|
||||
:key="i"
|
||||
class="sk-row shimmer"
|
||||
:style="{ width: i === rows ? '60%' : '100%' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.skeleton {
|
||||
display: flex;
|
||||
padding: 24rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.skeleton-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.sk-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
flex-shrink: 0;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
.sk-body {
|
||||
flex: 1;
|
||||
}
|
||||
.sk-title {
|
||||
height: 32rpx;
|
||||
width: 45%;
|
||||
border-radius: 6rpx;
|
||||
background: #e2e8f0;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.sk-row {
|
||||
height: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
background: #e2e8f0;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.shimmer {
|
||||
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<script setup>
|
||||
import { resolveImageUrl } from "@/utils/image";
|
||||
import { formatSpotPrice } from "@/utils/spot";
|
||||
|
||||
defineProps({
|
||||
spot: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["click"]);
|
||||
|
||||
const handleClick = () => {
|
||||
emit("click");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="spot-card" @tap="handleClick">
|
||||
<image
|
||||
v-if="spot.cover_image_url"
|
||||
class="cover"
|
||||
:src="resolveImageUrl(spot.cover_image_url)"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view v-else class="cover cover-placeholder">
|
||||
<uni-icons type="camera" size="40" color="#94a3b8" class="placeholder-icon" />
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="title">{{ spot.title }}</text>
|
||||
<view class="meta">
|
||||
<view class="city-tag">{{ spot.city || "未知城市" }}</view>
|
||||
<view
|
||||
class="price-tag"
|
||||
:class="{ free: formatSpotPrice(spot).isFree, paid: !formatSpotPrice(spot).isFree }"
|
||||
>
|
||||
{{ formatSpotPrice(spot).label }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="desc" v-if="spot.description">
|
||||
{{ spot.description }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.spot-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
background: #e2e8f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 20rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.city-tag {
|
||||
font-size: 22rpx;
|
||||
color: #6366f1;
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.price-tag.free {
|
||||
color: #16a34a;
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
}
|
||||
|
||||
.price-tag.paid {
|
||||
color: #d97706;
|
||||
background: rgba(245, 158, 11, 0.14);
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #64748b;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,75 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
tags: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
activeId: {
|
||||
type: [Number, null],
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["select"]);
|
||||
|
||||
const handleSelect = (id) => {
|
||||
emit("select", id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<scroll-view class="tag-bar" scroll-x enable-flex>
|
||||
<view
|
||||
class="tag-pill"
|
||||
:class="{ active: activeId === null }"
|
||||
@tap="handleSelect(null)"
|
||||
>
|
||||
<text class="tag-text">全部</text>
|
||||
</view>
|
||||
<view
|
||||
v-for="tag in tags"
|
||||
:key="tag.id"
|
||||
class="tag-pill"
|
||||
:class="{ active: activeId === tag.id }"
|
||||
@tap="handleSelect(tag.id)"
|
||||
>
|
||||
<text class="tag-text">{{ tag.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tag-bar {
|
||||
white-space: nowrap;
|
||||
padding: 16rpx 32rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tag-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 32rpx;
|
||||
background: #ffffff;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
border: 2rpx solid #e2e8f0;
|
||||
}
|
||||
|
||||
.tag-pill.active {
|
||||
background: #6366f1;
|
||||
border-color: #6366f1;
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
font-size: 26rpx;
|
||||
color: #475569;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tag-pill.active .tag-text {
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user