NCZY/WAI_Project_UNIX
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加帖子详情模板

Browse Source
This commit is contained in:
icssoa
2025-10-16 18:29:18 +08:00
parent b7e0b36f92
commit c84772aaa1
3 changed files with 414 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages.json
View File

@@ -504,6 +504,12 @@
{
"root": "pages/template",
"pages": [
{
"path": "post/detail",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "shop/goods-category",
"style": {
@@ -570,11 +576,5 @@
}
]
},
"easycom": {
"autoscan": true,
"custom": {
"^ui-(.*)": "@/components/ui/$1/ui-$1.uvue"
}
},
"uniIdRouter": {}
}

9
pages/index/template.uvue
View File

@@ -41,6 +41,15 @@ type Item = {
};
const list = computed<Item[]>(() => [
{
label: t("社交"),
children: [
{
label: t("帖子详情"),
path: "/pages/template/post/detail"
}
]
},
{
label: t("商城"),
children: [

399
pages/template/post/detail.uvue Normal file
View File

@@ -0,0 +1,399 @@
<template>
<cl-page>
<cl-sticky>
<cl-topbar fixed safe-area-top :height="isMp() ? null : 100">
<view class="flex flex-row items-center w-full pl-[72rpx] pr-3">
<cl-avatar
rounded
:size="60"
src="https://unix.cool-js.com/images/demo/avatar.jpg"
></cl-avatar>
<cl-text :pt="{ className: 'mx-3' }">神仙都没用</cl-text>
<cl-button
text
border
size="small"
rounded
:pt="{ className: parseClass(['!px-3', [!isMp(), 'ml-auto']]) }"
>立即关注</cl-button
>
</view>
</cl-topbar>
</cl-sticky>
<view class="banner">
<cl-banner
height="1000rpx"
:list="bannerList"
:pt="{
className: '!rounded-none',
image: {
className: '!rounded-none'
}
}"
></cl-banner>
</view>
<view class="bg-white dark:bg-surface-800 mb-3">
<view
class="p-4 border border-solid border-b-surface-200 dark:border-b-surface-600 border-t-0 border-l-0 border-r-0"
>
<cl-text bold :pt="{ className: 'mb-2 text-lg' }">❄️ 雪地旅行商务团价格表</cl-text>
<cl-text :pt="{ className: 'mb-3' }">
对于不想做攻略的小伙伴来说定制团真的是最佳选择。雪地自驾没有经验的真心不建议。费用清晰明了。预算很准确，收费很合理。</cl-text
>
<view class="flex-row mb-4">
<view
class="flex-row items-center border border-solid border-surface-300 dark:border-surface-600 rounded-lg px-3 py-1 pl-2"
>
<cl-icon name="map-pin-2-line" :size="30"></cl-icon>
<cl-text :pt="{ className: 'text-sm ml-1' }"
>哈尔滨 · 圣 · 索菲亚教堂</cl-text
>
</view>
</view>
<cl-text :pt="{ className: 'text-sm' }" color="info">编辑于 2天前</cl-text>
</view>
<!-- 评论 -->
<view class="p-4">
<cl-text :pt="{ className: 'mb-4 text-sm' }">共 10 条评论</cl-text>
<!-- 评论输入框 -->
<view class="flex-row reply items-center mb-5" @tap="openReply()">
<cl-avatar
:size="68"
rounded
:pt="{ className: 'mr-2' }"
src="https://unix.cool-js.com/images/demo/avatar.jpg"
></cl-avatar>
<view
class="h-[69rpx] flex-1 flex-row items-center bg-surface-100 dark:bg-surface-700 rounded-full px-4"
>
<cl-text color="info" :pt="{ className: 'text-sm flex-1' }"
>说点什么...</cl-text
>
<cl-icon name="user-smile-line" :size="40"></cl-icon>
<cl-icon
name="image-circle-line"
:pt="{ className: 'ml-2' }"
:size="40"
></cl-icon>
</view>
</view>
<view class="list">
<view class="flex-row mb-6" v-for="item in commentList" :key="item.id">
<cl-avatar :size="68" rounded :src="item.avatar"></cl-avatar>
<view class="ml-3 flex-1">
<!-- 评论者信息 -->
<view class="flex-row items-center mb-1">
<cl-text :pt="{ className: 'text-sm' }" color="info">{{
item.name
}}</cl-text>
<cl-tag
plain
rounded
:pt="{
className: '!px-1 !py-[2rpx] ml-2',
text: { className: '!text-xs' }
}"
v-if="item.isAuthor"
>作者</cl-tag
>
</view>
<!-- 评论内容 -->
<cl-text :pt="{ className: 'mb-1' }">{{ item.content }}</cl-text>
<view class="flex-row items-center">
<!-- 评论时间 -->
<cl-text :pt="{ className: 'text-sm' }" color="info">
{{ item.time }}
</cl-text>
<cl-text
color="info"
:pt="{ className: 'text-sm ml-3' }"
@tap="openReply()"
>回复</cl-text
>
</view>
<!-- 回复列表 -->
<view class="flex-row mt-3" v-for="reply in item.reply" :key="reply.id">
<cl-avatar :size="50" rounded :src="reply.avatar"> </cl-avatar>
<view class="ml-3 flex-1">
<view class="flex-row items-center mb-1">
<cl-text :pt="{ className: 'text-sm' }" color="info">{{
reply.name
}}</cl-text>
<cl-tag
plain
rounded
:pt="{
className: '!px-1 !py-[2rpx] ml-2',
text: { className: '!text-xs' }
}"
v-if="reply.isAuthor"
>作者</cl-tag
>
</view>
<cl-text :pt="{ className: 'mb-1' }">{{
reply.content
}}</cl-text>
<view class="flex-row items-center mb-1">
<cl-text :pt="{ className: 'text-sm' }" color="info">
{{ reply.time }}
</cl-text>
<cl-text
color="info"
:pt="{ className: 'text-sm ml-3' }"
@tap="openReply()"
>回复</cl-text
>
</view>
<cl-text color="info" :pt="{ className: 'text-sm' }"
>展开 1 条回复</cl-text
>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<cl-footer>
<view class="flex-row">
<view
class="flex-row items-center bg-surface-100 dark:bg-surface-700 rounded-full px-3 py-2 mr-6 w-[260rpx] h-[68rpx]"
@tap="openReply"
>
<cl-icon name="edit-line" color="info" :size="32"></cl-icon>
<cl-text color="info" :pt="{ className: 'text-sm ml-2' }">说点什么...</cl-text>
</view>
<view class="flex flex-row flex-1 justify-end">
<view class="flex-row justify-center items-center mr-6">
<cl-icon name="heart-line" :size="40"></cl-icon>
<cl-text :pt="{ className: 'ml-2 text-sm' }">700</cl-text>
</view>
<view class="flex-row justify-center items-center">
<cl-icon name="chat-3-line" :size="40"></cl-icon>
<cl-text :pt="{ className: 'ml-2 text-sm' }">59</cl-text>
</view>
</view>
</view>
</cl-footer>
<!-- 回复弹窗 -->
<cl-popup v-model="replyVisible" direction="bottom" ref="replyPopupRef">
<view class="p-4 pt-0">
<view class="bg-surface-100 dark:bg-surface-800 rounded-2xl p-[8rpx] h-[168rpx]">
<cl-textarea
placeholder="说点什么..."
:border="false"
:pt="{
className: parseClass(['!bg-transparent'])
}"
autofocus
v-if="isApp() ? true : replyPopupRef?.isOpened == true"
></cl-textarea>
</view>
<view class="flex-row items-center mt-3 pl-2">
<cl-icon
name="image-circle-line"
:pt="{ className: 'mr-4' }"
:size="44"
></cl-icon>
<cl-icon
name="user-smile-line"
:pt="{ className: 'mr-4' }"
:size="44"
></cl-icon>
<cl-button :pt="{ className: 'ml-auto !px-4' }" rounded>发送</cl-button>
</view>
</view>
</cl-popup>
</cl-page>
</template>
<script lang="ts" setup>
import { isApp, isMp, parseClass } from "@/cool";
import { ref } from "vue";
const bannerList = ref<string[]>([
"https://uni-docs.cool-js.com/demo/pages/demo/static/bg1.png",
"https://uni-docs.cool-js.com/demo/pages/demo/static/bg2.png",
"https://uni-docs.cool-js.com/demo/pages/demo/static/bg3.png"
]);
type Comment = {
id: number;
avatar: string;
name: string;
content: string;
time: string;
isAuthor: boolean;
order: number;
reply: Comment[];
};
const commentList = ref<Comment[]>([
{
id: 1,
avatar: "https://unix.cool-js.com/images/demo/avatar-1.jpg",
name: "李明",
content: "导游讲解很专业，风景绝美，是一次难忘的旅行体验！",
time: "2024-06-20 10:15",
isAuthor: false,
order: 1,
reply: []
},
{
id: 2,
avatar: "https://unix.cool-js.com/images/demo/avatar-2.jpg",
name: "小芳",
content: "酒店干净卫生，位置也很方便，强烈推荐给大家！",
time: "2024-06-20 11:08",
isAuthor: false,
order: 2,
reply: [
{
id: 201,
avatar: "https://unix.cool-js.com/images/demo/avatar.jpg",
name: "神仙都没用",
content: "感谢您的推荐，欢迎再次光临哦~",
time: "2024-06-20 12:00",
isAuthor: true,
order: 1,
reply: []
}
]
},
{
id: 3,
avatar: "https://unix.cool-js.com/images/demo/avatar-3.jpg",
name: "王科",
content: "行程安排合理，吃住都很满意，导游态度超级好。",
time: "2024-06-19 09:22",
isAuthor: false,
order: 3,
reply: []
},
{
id: 4,
avatar: "https://unix.cool-js.com/images/demo/avatar-4.jpg",
name: "艳艳",
content: "第一次带父母出游，家人都开心，下次还会选择这里~",
time: "2024-06-18 15:40",
isAuthor: false,
order: 4,
reply: []
},
{
id: 5,
avatar: "https://unix.cool-js.com/images/demo/avatar-5.jpg",
name: "孙强",
content: "车程舒适，时间安排紧凑但不赶，非常不错，非常棒！",
time: "2024-06-17 17:05",
isAuthor: false,
order: 5,
reply: [
{
id: 501,
avatar: "https://unix.cool-js.com/images/demo/avatar.jpg",
name: "神仙都没用",
content: "您的好评就是我们最大的动力，谢谢支持~",
time: "2024-06-17 17:45",
isAuthor: true,
order: 1,
reply: []
}
]
},
{
id: 6,
avatar: "https://unix.cool-js.com/images/demo/avatar-6.jpg",
name: "导游小陈",
content: "很高兴大家玩的开心，有问题随时联系我们。",
time: "2024-06-17 18:20",
isAuthor: false,
order: 6,
reply: []
},
{
id: 7,
avatar: "https://unix.cool-js.com/images/demo/avatar-7.jpg",
name: "Grace",
content: "风景如画，照片拍了一堆，朋友都夸赞说好美！",
time: "2024-06-16 14:10",
isAuthor: false,
order: 7,
reply: []
},
{
id: 8,
avatar: "https://unix.cool-js.com/images/demo/avatar-8.jpg",
name: "阿伟",
content: "活动内容丰富，小朋友特别喜欢，下次会再来~",
time: "2024-06-15 19:28",
isAuthor: false,
order: 8,
reply: []
},
{
id: 9,
avatar: "https://unix.cool-js.com/images/demo/avatar-9.jpg",
name: "小虎",
content: "天气晴朗，安排贴心，吃到了很多特色美食，值了！",
time: "2024-06-14 13:52",
isAuthor: false,
order: 9,
reply: []
},
{
id: 10,
avatar: "https://unix.cool-js.com/images/demo/avatar-10.jpg",
name: "Julia",
content: "贴心的讲解和服务，体验很棒，感谢本次旅行团队！",
time: "2024-06-13 16:34",
isAuthor: false,
order: 10,
reply: []
}
]);
const replyPopupRef = ref<ClPopupComponentPublicInstance | null>(null);
const replyVisible = ref(false);
function openReply() {
replyVisible.value = true;
}
function closeReply() {
replyVisible.value = false;
}
</script>
<style lang="scss" scoped></style>