1054425342@qq.com
2 months ago
21 changed files with 6352 additions and 1857 deletions
@ -0,0 +1,52 @@ |
|||||
|
import QQMapWX from '@/libs/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'; |
||||
|
//获取位置信息
|
||||
|
async function getLocationInfo() { |
||||
|
return new Promise((resolve) => { |
||||
|
//位置信息默认数据
|
||||
|
let location = { |
||||
|
longitude: 0, |
||||
|
latitude: 0, |
||||
|
province: '', |
||||
|
city: '', |
||||
|
area: '', |
||||
|
street: '', |
||||
|
address: '', |
||||
|
}; |
||||
|
uni.getLocation({ |
||||
|
type: 'gcj02', |
||||
|
success(res) { |
||||
|
location.longitude = res.longitude; |
||||
|
location.latitude = res.latitude; |
||||
|
// 腾讯地图Api
|
||||
|
const qqmapsdk = new QQMapWX({ |
||||
|
key: 'X5YBZ-ES6K3-Q6E3P-RUVXH-2R5ZQ-ERBFG', //这里填写自己申请的key
|
||||
|
}); |
||||
|
qqmapsdk.reverseGeocoder({ |
||||
|
location, |
||||
|
success(response) { |
||||
|
console.log(response) |
||||
|
let info = response.result; |
||||
|
location.province = info.address_component.province; |
||||
|
location.cityCode = info.ad_info.city_code.slice(3); |
||||
|
location.city = info.address_component.city; |
||||
|
location.area = info.address_component.district; |
||||
|
location.street = info.address_component.street; |
||||
|
location.address = info.address; |
||||
|
resolve(location); |
||||
|
}, |
||||
|
fail(e){ |
||||
|
console.log(e,'地址信息报错') |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
fail(err) { |
||||
|
console.log(err); |
||||
|
resolve(location); |
||||
|
}, |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
//导出
|
||||
|
module.exports = { |
||||
|
getLocationInfo, |
||||
|
}; |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,631 @@ |
|||||
|
<template> |
||||
|
<view class="note-detail-container"> |
||||
|
<!-- 笔记内容区域 --> |
||||
|
<view class="content-scroll" > |
||||
|
<!-- 作者信息 --> |
||||
|
<view class="author-section"> |
||||
|
<image |
||||
|
class="author-avatar" |
||||
|
:src="noteDetail.user.avatar" |
||||
|
mode="aspectFill" |
||||
|
/> |
||||
|
<view class="author-info"> |
||||
|
<text class="author-name">{{ noteDetail.user.name }}</text> |
||||
|
<text class="publish-time">{{ |
||||
|
formatTime(noteDetail.createTime) |
||||
|
}}</text> |
||||
|
</view> |
||||
|
<button |
||||
|
class="follow-btn" |
||||
|
:class="{ followed: noteDetail.user.isFollowed }" |
||||
|
@click="toggleFollow" |
||||
|
> |
||||
|
{{ noteDetail.user.isFollowed ? "已关注" : "+ 关注" }} |
||||
|
</button> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 笔记标题 --> |
||||
|
<view class="note-title"> |
||||
|
{{ noteDetail.title }} |
||||
|
</view> |
||||
|
|
||||
|
<!-- 笔记主图 --> |
||||
|
<view class="note-image-container" v-if="noteDetail.image"> |
||||
|
<image |
||||
|
class="note-image" |
||||
|
:src="noteDetail.image" |
||||
|
mode="aspectFill" |
||||
|
@click="previewImage(noteDetail.image)" |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 笔记内容 --> |
||||
|
<view class="note-content"> |
||||
|
<text class="content-text">{{ noteDetail.content }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 标签 --> |
||||
|
<view |
||||
|
class="tags-section" |
||||
|
v-if="noteDetail.tags && noteDetail.tags.length" |
||||
|
> |
||||
|
<view class="tag-item" v-for="tag in noteDetail.tags" :key="tag"> |
||||
|
#{{ tag }} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 互动数据 --> |
||||
|
<view class="interaction-section"> |
||||
|
<view class="interaction-item" @click="toggleLike"> |
||||
|
<text class="interaction-icon" :class="{ liked: noteDetail.isLiked }" |
||||
|
>♥</text |
||||
|
> |
||||
|
<text class="interaction-text">{{ noteDetail.likes }}</text> |
||||
|
</view> |
||||
|
<view class="interaction-item" @click="toggleCollect"> |
||||
|
<text |
||||
|
class="interaction-icon" |
||||
|
:class="{ collected: noteDetail.isCollected }" |
||||
|
>★</text |
||||
|
> |
||||
|
<text class="interaction-text">{{ noteDetail.collects }}</text> |
||||
|
</view> |
||||
|
<view class="interaction-item" @click="showShareMenu"> |
||||
|
<text class="interaction-icon">↗</text> |
||||
|
<text class="interaction-text">分享</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 评论区域 --> |
||||
|
<view class="comments-section"> |
||||
|
<view class="comments-header"> |
||||
|
<text class="comments-title" |
||||
|
>评论 ({{ noteDetail.comments.length }})</text |
||||
|
> |
||||
|
</view> |
||||
|
|
||||
|
<view |
||||
|
class="comment-item" |
||||
|
v-for="comment in noteDetail.comments" |
||||
|
:key="comment.id" |
||||
|
> |
||||
|
<image |
||||
|
class="comment-avatar" |
||||
|
:src="comment.user.avatar" |
||||
|
mode="aspectFill" |
||||
|
/> |
||||
|
<view class="comment-content"> |
||||
|
<view class="comment-header"> |
||||
|
<text class="comment-user">{{ comment.user.name }}</text> |
||||
|
<text class="comment-time">{{ |
||||
|
formatTime(comment.createTime) |
||||
|
}}</text> |
||||
|
</view> |
||||
|
<text class="comment-text">{{ comment.content }}</text> |
||||
|
<view class="comment-actions"> |
||||
|
<view class="comment-like" @click="toggleCommentLike(comment)"> |
||||
|
<text class="like-icon" :class="{ liked: comment.isLiked }" |
||||
|
>♥</text |
||||
|
> |
||||
|
<text class="like-count">{{ comment.likes }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部占位 --> |
||||
|
<view class="bottom-placeholder"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部评论输入框 --> |
||||
|
<view class="comment-input-section"> |
||||
|
<input |
||||
|
class="comment-input" |
||||
|
v-model="commentText" |
||||
|
placeholder="写下你的想法..." |
||||
|
@confirm="submitComment" |
||||
|
/> |
||||
|
<button |
||||
|
class="send-btn" |
||||
|
@click="submitComment" |
||||
|
:disabled="!commentText.trim()" |
||||
|
> |
||||
|
发送 |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import headerVue from "@/components/header.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "NoteDetail", |
||||
|
components: { |
||||
|
headerVue, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
noteId: "", |
||||
|
commentText: "", |
||||
|
noteDetail: { |
||||
|
id: "", |
||||
|
title: "", |
||||
|
content: "", |
||||
|
image: "", |
||||
|
tags: [], |
||||
|
likes: 0, |
||||
|
collects: 0, |
||||
|
isLiked: false, |
||||
|
isCollected: false, |
||||
|
createTime: "", |
||||
|
user: { |
||||
|
id: "", |
||||
|
name: "", |
||||
|
avatar: "", |
||||
|
isFollowed: false, |
||||
|
}, |
||||
|
comments: [], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
if (options.id) { |
||||
|
this.noteId = options.id; |
||||
|
this.loadNoteDetail(); |
||||
|
} else { |
||||
|
this.loadMockData(); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 加载笔记详情 |
||||
|
async loadNoteDetail() { |
||||
|
try { |
||||
|
uni.showLoading({ title: "加载中..." }); |
||||
|
// 模拟API调用 |
||||
|
const res = await this.getNoteDetail(this.noteId); |
||||
|
this.noteDetail = res.data; |
||||
|
} catch (error) { |
||||
|
console.error("加载笔记详情失败:", error); |
||||
|
uni.showToast({ |
||||
|
title: "加载失败", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
} finally { |
||||
|
uni.hideLoading(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载模拟数据 |
||||
|
loadMockData() { |
||||
|
this.noteDetail = { |
||||
|
id: "mock001", |
||||
|
title: "这里是用户发布内容的标题", |
||||
|
content: |
||||
|
"这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容", |
||||
|
image: "https://picsum.photos/800/600", |
||||
|
tags: ["时间力", "阅读体验"], |
||||
|
likes: 128, |
||||
|
collects: 64, |
||||
|
isLiked: false, |
||||
|
isCollected: false, |
||||
|
createTime: "2024-01-15 14:30:00", |
||||
|
user: { |
||||
|
id: "user001", |
||||
|
name: "杨璐摄影", |
||||
|
avatar: |
||||
|
"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=100", |
||||
|
isFollowed: false, |
||||
|
}, |
||||
|
comments: [ |
||||
|
{ |
||||
|
id: "comment001", |
||||
|
content: "很棒的分享，学到了很多！", |
||||
|
likes: 5, |
||||
|
isLiked: false, |
||||
|
createTime: "2024-01-15 15:00:00", |
||||
|
user: { |
||||
|
id: "user002", |
||||
|
name: "读书爱好者", |
||||
|
avatar: |
||||
|
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
id: "comment002", |
||||
|
content: "感谢分享，很有启发性的内容", |
||||
|
likes: 3, |
||||
|
isLiked: false, |
||||
|
createTime: "2024-01-15 16:20:00", |
||||
|
user: { |
||||
|
id: "user003", |
||||
|
name: "时间管理达人", |
||||
|
avatar: |
||||
|
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
// 预览图片 |
||||
|
previewImage(imageUrl) { |
||||
|
uni.previewImage({ |
||||
|
urls: [imageUrl], |
||||
|
current: imageUrl, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 切换关注状态 |
||||
|
toggleFollow() { |
||||
|
this.noteDetail.user.isFollowed = !this.noteDetail.user.isFollowed; |
||||
|
uni.showToast({ |
||||
|
title: this.noteDetail.user.isFollowed ? "已关注" : "取消关注", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 切换点赞状态 |
||||
|
toggleLike() { |
||||
|
this.noteDetail.isLiked = !this.noteDetail.isLiked; |
||||
|
this.noteDetail.likes += this.noteDetail.isLiked ? 1 : -1; |
||||
|
}, |
||||
|
|
||||
|
// 切换收藏状态 |
||||
|
toggleCollect() { |
||||
|
this.noteDetail.isCollected = !this.noteDetail.isCollected; |
||||
|
this.noteDetail.collects += this.noteDetail.isCollected ? 1 : -1; |
||||
|
}, |
||||
|
|
||||
|
// 显示分享菜单 |
||||
|
showShareMenu() { |
||||
|
uni.share({ |
||||
|
provider: "weixin", |
||||
|
scene: "WXSceneSession", |
||||
|
type: 0, |
||||
|
href: `https://example.com/notes/${this.noteDetail.id}`, |
||||
|
title: this.noteDetail.title, |
||||
|
summary: this.noteDetail.content.substring(0, 100), |
||||
|
imageUrl: this.noteDetail.image, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 切换评论点赞 |
||||
|
toggleCommentLike(comment) { |
||||
|
comment.isLiked = !comment.isLiked; |
||||
|
comment.likes += comment.isLiked ? 1 : -1; |
||||
|
}, |
||||
|
|
||||
|
// 提交评论 |
||||
|
async submitComment() { |
||||
|
if (!this.commentText.trim()) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const newComment = { |
||||
|
id: "comment" + Date.now(), |
||||
|
content: this.commentText, |
||||
|
likes: 0, |
||||
|
isLiked: false, |
||||
|
createTime: new Date().toISOString(), |
||||
|
user: { |
||||
|
id: "current_user", |
||||
|
name: "当前用户", |
||||
|
avatar: |
||||
|
"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=100", |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
this.noteDetail.comments.unshift(newComment); |
||||
|
this.commentText = ""; |
||||
|
|
||||
|
uni.showToast({ |
||||
|
title: "评论成功", |
||||
|
icon: "success", |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 格式化时间 |
||||
|
formatTime(timeString) { |
||||
|
const time = new Date(timeString); |
||||
|
const now = new Date(); |
||||
|
const diff = now.getTime() - time.getTime(); |
||||
|
|
||||
|
if (diff < 60 * 1000) { |
||||
|
return "刚刚"; |
||||
|
} else if (diff < 60 * 60 * 1000) { |
||||
|
return Math.floor(diff / (60 * 1000)) + "分钟前"; |
||||
|
} else if (diff < 24 * 60 * 60 * 1000) { |
||||
|
return Math.floor(diff / (60 * 60 * 1000)) + "小时前"; |
||||
|
} else { |
||||
|
return time.toLocaleDateString(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 模拟API - 获取笔记详情 |
||||
|
async getNoteDetail(noteId) { |
||||
|
return new Promise((resolve) => { |
||||
|
setTimeout(() => { |
||||
|
this.loadMockData(); |
||||
|
resolve({ |
||||
|
code: 200, |
||||
|
data: this.noteDetail, |
||||
|
}); |
||||
|
}, 500); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.note-detail-container { |
||||
|
min-height: 100vh; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.content-scroll { |
||||
|
flex: 1; |
||||
|
padding: 0 32rpx; |
||||
|
} |
||||
|
|
||||
|
// 作者信息 |
||||
|
.author-section { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 32rpx 0; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
|
||||
|
.author-avatar { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
margin-right: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.author-info { |
||||
|
flex: 1; |
||||
|
|
||||
|
.author-name { |
||||
|
display: block; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.publish-time { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.follow-btn { |
||||
|
border-radius: 30rpx; |
||||
|
font-size: 24rpx; |
||||
|
border: 2rpx solid #ff4757; |
||||
|
background: transparent; |
||||
|
color: #ff4757; |
||||
|
font-weight: 600; |
||||
|
|
||||
|
&.followed { |
||||
|
background: #ff4757; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 笔记标题 |
||||
|
.note-title { |
||||
|
font-size: 40rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
line-height: 1.4; |
||||
|
margin: 32rpx 0; |
||||
|
} |
||||
|
|
||||
|
// 笔记图片 |
||||
|
.note-image-container { |
||||
|
margin: 32rpx 0; |
||||
|
|
||||
|
.note-image { |
||||
|
width: 100%; |
||||
|
max-height: 800rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 笔记内容 |
||||
|
.note-content { |
||||
|
margin: 32rpx 0; |
||||
|
|
||||
|
.content-text { |
||||
|
font-size: 32rpx; |
||||
|
line-height: 1.6; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 标签 |
||||
|
.tags-section { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16rpx; |
||||
|
margin: 32rpx 0; |
||||
|
|
||||
|
.tag-item { |
||||
|
padding: 12rpx 24rpx; |
||||
|
background: #f8f9fa; |
||||
|
border-radius: 32rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 互动区域 |
||||
|
.interaction-section { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 48rpx; |
||||
|
padding: 32rpx 0; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
|
||||
|
.interaction-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.interaction-icon { |
||||
|
font-size: 32rpx; |
||||
|
color: #999; |
||||
|
transition: color 0.3s; |
||||
|
|
||||
|
&.liked { |
||||
|
color: #ff4757; |
||||
|
} |
||||
|
|
||||
|
&.collected { |
||||
|
color: #ffd700; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.interaction-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 评论区域 |
||||
|
.comments-section { |
||||
|
margin: 32rpx 0; |
||||
|
|
||||
|
.comments-header { |
||||
|
margin-bottom: 32rpx; |
||||
|
|
||||
|
.comments-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-item { |
||||
|
display: flex; |
||||
|
margin-bottom: 32rpx; |
||||
|
|
||||
|
.comment-avatar { |
||||
|
width: 64rpx; |
||||
|
height: 64rpx; |
||||
|
border-radius: 32rpx; |
||||
|
margin-right: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.comment-content { |
||||
|
flex: 1; |
||||
|
|
||||
|
.comment-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12rpx; |
||||
|
|
||||
|
.comment-user { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.comment-time { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-text { |
||||
|
font-size: 30rpx; |
||||
|
line-height: 1.5; |
||||
|
color: #333; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.comment-actions { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.comment-like { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.like-icon { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
|
||||
|
&.liked { |
||||
|
color: #ff4757; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.like-count { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 底部评论输入 |
||||
|
.comment-input-section { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 24rpx 32rpx; |
||||
|
background: #fff; |
||||
|
border-top: 1rpx solid #f0f0f0; |
||||
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 999; |
||||
|
.comment-input { |
||||
|
flex: 1; |
||||
|
height: 80rpx; |
||||
|
background: #f8f9fa; |
||||
|
border-radius: 40rpx; |
||||
|
padding: 0 32rpx; |
||||
|
font-size: 28rpx; |
||||
|
border: none; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.send-btn { |
||||
|
width: 120rpx; |
||||
|
height: 60rpx; |
||||
|
line-height: 60rpx; |
||||
|
background: #ff4757; |
||||
|
color: #fff; |
||||
|
border-radius: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
border: none; |
||||
|
font-weight: 600; |
||||
|
|
||||
|
&:disabled { |
||||
|
background: #ccc; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom-placeholder { |
||||
|
height: 130rpx; |
||||
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
||||
|
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom)); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,445 @@ |
|||||
|
<template> |
||||
|
<view class="publish-container"> |
||||
|
<!-- 内容区域 --> |
||||
|
<view class="content-scroll"> |
||||
|
<!-- 图片区域 --> |
||||
|
<view class="image-section"> |
||||
|
<view class="image-grid"> |
||||
|
<!-- 已选图片 --> |
||||
|
<view |
||||
|
class="image-item" |
||||
|
v-for="(image, index) in selectedImages" |
||||
|
:key="index" |
||||
|
> |
||||
|
<image class="image-preview" :src="image" mode="aspectFill" /> |
||||
|
<view class="image-delete" @click="removeImage(index)"> |
||||
|
<text class="delete-icon">×</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 添加图片按钮 --> |
||||
|
<view |
||||
|
class="add-image-btn" |
||||
|
@click="chooseImage" |
||||
|
v-if="selectedImages.length < 9" |
||||
|
> |
||||
|
<text class="add-icon">+</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 标题区域 --> |
||||
|
<view class="title-section"> |
||||
|
<textarea |
||||
|
class="title-input" |
||||
|
v-model="noteForm.title" |
||||
|
placeholder="请输入标题..." |
||||
|
maxlength="100" |
||||
|
auto-height |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 详情区域 --> |
||||
|
<view class="content-section"> |
||||
|
<textarea |
||||
|
class="content-input" |
||||
|
v-model="noteForm.content" |
||||
|
placeholder="分享你的想法..." |
||||
|
maxlength="2000" |
||||
|
auto-height |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 快速标签区域 --> |
||||
|
<view class="quick-tags-section"> |
||||
|
<view class="quick-tags-list"> |
||||
|
<view |
||||
|
class="quick-tag-item" |
||||
|
v-for="tag in quickTags" |
||||
|
:key="tag" |
||||
|
@click="insertQuickTag(tag)" |
||||
|
> |
||||
|
#{{ tag }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 已添加标签 --> |
||||
|
<view class="selected-tags-section" v-if="noteForm.tags.length"> |
||||
|
<view class="selected-tags-list"> |
||||
|
<view |
||||
|
class="selected-tag-item" |
||||
|
v-for="(tag, index) in noteForm.tags" |
||||
|
:key="index" |
||||
|
@click="removeTag(index)" |
||||
|
> |
||||
|
<text class="tag-text">#{{ tag }}</text> |
||||
|
<text class="tag-close">×</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部占位 --> |
||||
|
<view class="bottom-placeholder"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部发布按钮 --> |
||||
|
<view class="bottom-publish"> |
||||
|
<button class="publish-btn" @click="publishNote" :disabled="!canPublish"> |
||||
|
发布笔记 |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "PublishNote", |
||||
|
data() { |
||||
|
return { |
||||
|
selectedImages: [], |
||||
|
noteForm: { |
||||
|
title: "", |
||||
|
content: "", |
||||
|
tags: [], |
||||
|
images: [], |
||||
|
}, |
||||
|
quickTags: [ |
||||
|
"阅读体验", |
||||
|
"时间力", |
||||
|
"读书笔记", |
||||
|
"生活感悟", |
||||
|
"学习心得", |
||||
|
"思考", |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
canPublish() { |
||||
|
return ( |
||||
|
this.noteForm.title.trim() || |
||||
|
this.noteForm.content.trim() || |
||||
|
this.selectedImages.length > 0 |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
// 返回上一页 |
||||
|
goBack() { |
||||
|
if (this.canPublish) { |
||||
|
uni.showModal({ |
||||
|
title: "确认退出", |
||||
|
content: "退出后内容将不会保存，确定要退出吗？", |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
uni.navigateBack(); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
uni.navigateBack(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 选择图片 |
||||
|
chooseImage() { |
||||
|
const remainingCount = 9 - this.selectedImages.length; |
||||
|
uni.chooseImage({ |
||||
|
count: remainingCount, |
||||
|
sizeType: ["original", "compressed"], |
||||
|
sourceType: ["album", "camera"], |
||||
|
success: (res) => { |
||||
|
this.selectedImages.push(...res.tempFilePaths); |
||||
|
this.noteForm.images = [...this.selectedImages]; |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.error("选择图片失败:", err); |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 移除图片 |
||||
|
removeImage(index) { |
||||
|
this.selectedImages.splice(index, 1); |
||||
|
this.noteForm.images = [...this.selectedImages]; |
||||
|
}, |
||||
|
|
||||
|
// 插入快速标签 |
||||
|
insertQuickTag(tag) { |
||||
|
if (!this.noteForm.tags.includes(tag)) { |
||||
|
this.noteForm.tags.push(tag); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 移除标签 |
||||
|
removeTag(index) { |
||||
|
this.noteForm.tags.splice(index, 1); |
||||
|
}, |
||||
|
|
||||
|
// 发布笔记 |
||||
|
async publishNote() { |
||||
|
if (!this.canPublish) { |
||||
|
uni.showToast({ |
||||
|
title: "请添加内容", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
uni.showLoading({ title: "发布中..." }); |
||||
|
|
||||
|
// 模拟发布API调用 |
||||
|
await this.submitNote(this.noteForm); |
||||
|
|
||||
|
uni.hideLoading(); |
||||
|
uni.showToast({ |
||||
|
title: "发布成功", |
||||
|
icon: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
|
||||
|
// 延迟跳转，让用户看到成功提示 |
||||
|
setTimeout(() => { |
||||
|
uni.navigateBack(); |
||||
|
}, 1500); |
||||
|
} catch (error) { |
||||
|
uni.hideLoading(); |
||||
|
uni.showToast({ |
||||
|
title: "发布失败，请重试", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 提交笔记（模拟API） |
||||
|
async submitNote(noteData) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
setTimeout(() => { |
||||
|
console.log("发布笔记数据:", noteData); |
||||
|
resolve({ |
||||
|
code: 200, |
||||
|
message: "发布成功", |
||||
|
data: { |
||||
|
id: "note_" + Date.now(), |
||||
|
...noteData, |
||||
|
}, |
||||
|
}); |
||||
|
}, 1500); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.publish-container { |
||||
|
min-height: 100vh; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
// 内容区域 |
||||
|
.content-scroll { |
||||
|
flex: 1; |
||||
|
padding: 0 30rpx; |
||||
|
width: 690rpx; |
||||
|
} |
||||
|
|
||||
|
// 图片区域 |
||||
|
.image-section { |
||||
|
margin: 32rpx 0; |
||||
|
padding-bottom: 32rpx; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
|
||||
|
.image-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.image-item { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
aspect-ratio: 1; |
||||
|
border-radius: 16rpx; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.image-preview { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.image-delete { |
||||
|
position: absolute; |
||||
|
top: 8rpx; |
||||
|
right: 8rpx; |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
background: rgba(0, 0, 0, 0.6); |
||||
|
border-radius: 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.delete-icon { |
||||
|
font-size: 32rpx; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.add-image-btn { |
||||
|
width: 100%; |
||||
|
aspect-ratio: 1; |
||||
|
border: 2rpx dashed #ddd; |
||||
|
border-radius: 16rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background: #fafafa; |
||||
|
|
||||
|
.add-icon { |
||||
|
font-size: 48rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 标题区域 |
||||
|
.title-section { |
||||
|
margin: 32rpx 0; |
||||
|
padding-bottom: 32rpx; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
|
||||
|
.title-input { |
||||
|
width: 100%; |
||||
|
min-height: 60rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 600; |
||||
|
line-height: 1.4; |
||||
|
color: #333; |
||||
|
border: none; |
||||
|
padding: 0; |
||||
|
resize: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 详情区域 |
||||
|
.content-section { |
||||
|
margin: 32rpx 0; |
||||
|
padding-bottom: 32rpx; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
|
||||
|
.content-input { |
||||
|
width: 100%; |
||||
|
min-height: 300rpx; |
||||
|
font-size: 32rpx; |
||||
|
line-height: 1.6; |
||||
|
color: #333; |
||||
|
border: none; |
||||
|
padding: 0; |
||||
|
resize: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 快速标签区域 |
||||
|
.quick-tags-section { |
||||
|
margin: 24rpx 0; |
||||
|
|
||||
|
.quick-tags-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16rpx; |
||||
|
|
||||
|
.quick-tag-item { |
||||
|
padding: 16rpx 24rpx; |
||||
|
background: #f8f9fa; |
||||
|
border: 1rpx solid #e0e0e0; |
||||
|
border-radius: 32rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:active { |
||||
|
background: #e9ecef; |
||||
|
transform: scale(0.96); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 已选标签区域 |
||||
|
.selected-tags-section { |
||||
|
margin: 24rpx 0; |
||||
|
padding-top: 24rpx; |
||||
|
border-top: 1rpx solid #f0f0f0; |
||||
|
|
||||
|
.selected-tags-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16rpx; |
||||
|
|
||||
|
.selected-tag-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
padding: 12rpx 20rpx; |
||||
|
background: #ff4757; |
||||
|
border-radius: 32rpx; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.tag-text { |
||||
|
font-size: 26rpx; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.tag-close { |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
opacity: 0.8; |
||||
|
margin-left: 8rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 底部发布按钮 |
||||
|
.bottom-publish { |
||||
|
padding: 24rpx 32rpx; |
||||
|
background: #fff; |
||||
|
border-top: 1rpx solid #f0f0f0; |
||||
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 100; |
||||
|
.publish-btn { |
||||
|
width: 100%; |
||||
|
height: 88rpx; |
||||
|
background: #ff4757; |
||||
|
color: #fff; |
||||
|
border-radius: 44rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
border: none; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:disabled { |
||||
|
background: #ccc; |
||||
|
} |
||||
|
|
||||
|
&:not(:disabled):active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom-placeholder { |
||||
|
height: 140rpx; |
||||
|
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom)); |
||||
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,339 @@ |
|||||
|
<template> |
||||
|
<view class="memorial-detail"> |
||||
|
<!-- 主图区域 --> |
||||
|
<view class="main-image-section"> |
||||
|
<image |
||||
|
:src="showImg(detailInfo.image)" |
||||
|
mode="aspectFill" |
||||
|
class="main-image" |
||||
|
@click="previewMainImage" |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 数字资产信息卡片 --> |
||||
|
<view class="asset-info-card"> |
||||
|
<view class="card-header"> |
||||
|
<text class="asset-title">{{ detailInfo.title }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">发行数量：</text> |
||||
|
<text class="info-value">{{ detailInfo.totalSupply }}份</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="divider"></view> |
||||
|
|
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">数字资产所有方：</text> |
||||
|
<text class="info-value">{{ detailInfo.owner }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">数字资产权利方：</text> |
||||
|
<text class="info-value">{{ detailInfo.rightHolder }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">数字资产所有方：</text> |
||||
|
<text class="info-value">{{ detailInfo.assetOwner }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 收藏信息 --> |
||||
|
<view class="collection-info"> |
||||
|
<view class="collection-header">— 收藏信息 —</view> |
||||
|
<view class="collector-info"> |
||||
|
<text class="collector-label">收藏者</text> |
||||
|
<text class="collector-name">{{ detailInfo.collector }}</text> |
||||
|
<text class="collection-number">编号</text> |
||||
|
<text class="collection-code">{{ detailInfo.collectionCode }}</text> |
||||
|
<text class="collection-time-label">收藏时间</text> |
||||
|
<text class="collection-time">{{ detailInfo.collectionTime }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 认证信息卡片 --> |
||||
|
<view class="cert-info-card"> |
||||
|
<view class="cert-header">— 认证信息 —</view> |
||||
|
|
||||
|
<view class="cert-row"> |
||||
|
<text class="cert-label">权证码</text> |
||||
|
<text class="cert-value">{{ detailInfo.certificateCode }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="cert-row"> |
||||
|
<text class="cert-label">合约地址</text> |
||||
|
<text class="cert-value">{{ detailInfo.contractAddress }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="cert-row"> |
||||
|
<text class="cert-label">交易HASH</text> |
||||
|
<text class="cert-value">{{ detailInfo.transactionHash }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="cert-row"> |
||||
|
<text class="cert-label">钱包地址</text> |
||||
|
<text class="cert-value">{{ detailInfo.walletAddress }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 藏品详情卡片 --> |
||||
|
<view class="product-detail-card"> |
||||
|
<view class="product-header">— 藏品详情 —</view> |
||||
|
<view class="product-content"> |
||||
|
<!-- 这里可以放置藏品的详细描述内容 --> |
||||
|
<text class="product-description">{{ detailInfo.description }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "MemorialDetail", |
||||
|
data() { |
||||
|
return { |
||||
|
detailInfo: { |
||||
|
id: "", |
||||
|
title: "这里是数字资产的名称", |
||||
|
totalSupply: "2000", |
||||
|
owner: "XXX博物馆", |
||||
|
rightHolder: "江苏大运河公司", |
||||
|
assetOwner: "江苏大运河公司", |
||||
|
collector: "XXX用户", |
||||
|
collectionCode: "#001-0050/1000", |
||||
|
collectionTime: "2025-085-04 15:20:20", |
||||
|
certificateCode: "SUA-DA-01-20250729A123456-001-0050/1000-v1", |
||||
|
contractAddress: "0xd4efaba236f7c110fe85fcbcde5489a7a3c71ec3", |
||||
|
transactionHash: "0xd412da236f7c110fe81ewl5fcbcde5489a7a3c7", |
||||
|
walletAddress: "0x8df5d733a0dd127022f7740be4f9c10ec8a23b", |
||||
|
image: "/uploads/20250729/42fe2364167c2342076c4e094df3d288.png", |
||||
|
description: "这里是藏品的详细描述信息...", |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
// 获取传入的参数 |
||||
|
if (options.id) { |
||||
|
this.loadDetailInfo(options.id); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 加载详情信息 |
||||
|
async loadDetailInfo(id) { |
||||
|
try { |
||||
|
// 这里应该调用实际的API获取详情数据 |
||||
|
// const response = await this.getMemorialDetail(id); |
||||
|
// this.detailInfo = response.data; |
||||
|
|
||||
|
// 模拟数据加载 |
||||
|
console.log("加载纪念册详情，ID:", id); |
||||
|
} catch (error) { |
||||
|
console.error("加载详情失败:", error); |
||||
|
uni.showToast({ |
||||
|
title: "加载失败", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 预览主图 |
||||
|
previewMainImage() { |
||||
|
const imageUrl = this.showImg(this.detailInfo.image); |
||||
|
uni.previewImage({ |
||||
|
urls: [imageUrl], |
||||
|
current: imageUrl, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 图片路径处理 |
||||
|
showImg(img) { |
||||
|
if (!img) return ""; |
||||
|
if (img.startsWith("http")) { |
||||
|
return img; |
||||
|
} |
||||
|
const NEWAPIURL = "https://epic.js-dyyj.com"; |
||||
|
return `${NEWAPIURL}${img}`; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.memorial-detail { |
||||
|
min-height: 100vh; |
||||
|
background: #f8f9fa; |
||||
|
padding-bottom: env(safe-area-inset-bottom); |
||||
|
} |
||||
|
|
||||
|
// 主图区域 |
||||
|
.main-image-section { |
||||
|
width: 100%; |
||||
|
height: 600rpx; |
||||
|
background: #f0f0f0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.main-image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 通用卡片样式 |
||||
|
.asset-info-card, |
||||
|
.cert-info-card, |
||||
|
.product-detail-card { |
||||
|
margin: 20rpx; |
||||
|
background: white; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 32rpx; |
||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
// 数字资产信息卡片 |
||||
|
.asset-info-card { |
||||
|
.card-header { |
||||
|
margin-bottom: 32rpx; |
||||
|
|
||||
|
.asset-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
margin-bottom: 20rpx; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.info-label { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
margin-right: 16rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.divider { |
||||
|
height: 1rpx; |
||||
|
background: #e0e0e0; |
||||
|
margin: 24rpx 0; |
||||
|
} |
||||
|
|
||||
|
// 收藏信息 |
||||
|
.collection-info { |
||||
|
margin-top: 40rpx; |
||||
|
padding: 32rpx; |
||||
|
background: #f8f9fa; |
||||
|
border-radius: 12rpx; |
||||
|
border: 2rpx solid #e0e0e0; |
||||
|
|
||||
|
.collection-header { |
||||
|
text-align: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 24rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.collector-info { |
||||
|
display: grid; |
||||
|
grid-template-columns: auto auto; |
||||
|
gap: 16rpx 24rpx; |
||||
|
text-align: center; |
||||
|
|
||||
|
.collector-label, |
||||
|
.collection-number, |
||||
|
.collection-time-label { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.collector-name, |
||||
|
.collection-code, |
||||
|
.collection-time { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.collection-code { |
||||
|
font-family: "Courier New", monospace; |
||||
|
} |
||||
|
|
||||
|
.collection-time { |
||||
|
font-family: "Courier New", monospace; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 认证信息卡片 |
||||
|
.cert-info-card { |
||||
|
.cert-header { |
||||
|
text-align: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 32rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.cert-row { |
||||
|
margin-bottom: 24rpx; |
||||
|
padding-bottom: 20rpx; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
padding-bottom: 0; |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.cert-label { |
||||
|
display: block; |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.cert-value { |
||||
|
display: block; |
||||
|
font-size: 24rpx; |
||||
|
color: #333; |
||||
|
font-family: "Courier New", monospace; |
||||
|
word-break: break-all; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 藏品详情卡片 |
||||
|
.product-detail-card { |
||||
|
.product-header { |
||||
|
text-align: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 32rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.product-content { |
||||
|
.product-description { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,219 @@ |
|||||
|
<template> |
||||
|
<view class="memorial-album"> |
||||
|
<!-- 纪念册网格 --> |
||||
|
<view class="memorial-grid"> |
||||
|
<view |
||||
|
class="memorial-item" |
||||
|
v-for="(item, index) in memorialItems" |
||||
|
:key="index" |
||||
|
@click="goToDetail(item)" |
||||
|
> |
||||
|
<view class="memorial-card"> |
||||
|
<image |
||||
|
:src="showImg(item.image)" |
||||
|
mode="aspectFill" |
||||
|
class="memorial-image" |
||||
|
/> |
||||
|
<view class="memorial-info"> |
||||
|
<text class="memorial-title">{{ item.title }}</text> |
||||
|
<text class="memorial-code">{{ item.code }}</text> |
||||
|
<text class="memorial-status">{{ item.status }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "MemorialAlbum", |
||||
|
data() { |
||||
|
return { |
||||
|
memorialItems: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: "香在苏州｜世界美食之都", |
||||
|
code: "#001-0050/1000", |
||||
|
status: "XXX博物馆", |
||||
|
image: "/uploads/20250729/42fe2364167c2342076c4e094df3d288.png", |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: "香在苏州｜世界美食之都", |
||||
|
code: "#001-0050/1000", |
||||
|
status: "XXX博物馆", |
||||
|
image: "/uploads/20250729/105755e9b2e570e46b96d54ed61abe51.png", |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
title: "香在苏州｜世界美食之都", |
||||
|
code: "#001-0050/1000", |
||||
|
status: "XXX博物馆", |
||||
|
image: "/uploads/20250729/105755e9b2e570e46b96d54ed61abe51.png", |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
title: "香在苏州｜世界美食之都", |
||||
|
code: "#001-0050/1000", |
||||
|
status: "XXX博物馆", |
||||
|
image: "/uploads/20250729/42fe2364167c2342076c4e094df3d288.png", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
// 返回上一页 |
||||
|
goBack() { |
||||
|
uni.navigateBack(); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到详情页面 |
||||
|
goToDetail(item) { |
||||
|
uni.navigateTo({ |
||||
|
url: `/subPackages/memorialAlbum/detail?id=${item.id}`, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 图片预览 |
||||
|
previewImage(imagePath) { |
||||
|
const imageUrl = this.showImg(imagePath); |
||||
|
uni.previewImage({ |
||||
|
urls: [imageUrl], |
||||
|
current: imageUrl, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 图片路径处理 |
||||
|
showImg(img) { |
||||
|
if (!img) return ""; |
||||
|
if (img.startsWith("http")) { |
||||
|
return img; |
||||
|
} |
||||
|
// 这里需要根据你的项目实际情况调整API地址 |
||||
|
const NEWAPIURL = "https://epic.js-dyyj.com"; |
||||
|
return `${NEWAPIURL}${img}`; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.memorial-album { |
||||
|
min-height: 100vh; |
||||
|
background: #f8f9fa; |
||||
|
padding-bottom: env(safe-area-inset-bottom); |
||||
|
} |
||||
|
|
||||
|
// 顶部导航 |
||||
|
.nav-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 20rpx 30rpx; |
||||
|
background: white; |
||||
|
border-bottom: 1rpx solid #eee; |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
|
||||
|
.nav-back { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.nav-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.nav-placeholder { |
||||
|
width: 60rpx; |
||||
|
} |
||||
|
|
||||
|
// 纪念册网格 |
||||
|
.memorial-grid { |
||||
|
padding: 30rpx; |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.memorial-item { |
||||
|
background: white; |
||||
|
border-radius: 16rpx; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
||||
|
transition: transform 0.2s ease; |
||||
|
|
||||
|
&:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.memorial-card { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.memorial-image { |
||||
|
width: 100% !important; |
||||
|
height: 460rpx !important; |
||||
|
background: #f5f5f5; |
||||
|
display: block; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.memorial-info { |
||||
|
padding: 28rpx 24rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.memorial-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
line-height: 1.4; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 1; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.memorial-code { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
font-family: "Courier New", monospace; |
||||
|
} |
||||
|
|
||||
|
.memorial-status { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
// 响应式处理 |
||||
|
@media screen and (max-width: 400px) { |
||||
|
.memorial-grid { |
||||
|
padding: 20rpx; |
||||
|
gap: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.memorial-image { |
||||
|
height: 460rpx !important; // 保持较高的高度，即使在小屏幕上 |
||||
|
} |
||||
|
|
||||
|
.memorial-info { |
||||
|
padding: 24rpx 20rpx; |
||||
|
} |
||||
|
|
||||
|
.memorial-title { |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,772 @@ |
|||||
|
<template> |
||||
|
<view class="confirm-container"> |
||||
|
<scroll-view class="content-scroll" scroll-y> |
||||
|
<!-- 收货地址 --> |
||||
|
<view class="address-section"> |
||||
|
<!-- 有地址时显示 --> |
||||
|
<view class="section-header" @click="selectAddress" v-if="address.name"> |
||||
|
<view class="address-info"> |
||||
|
<view class="user-info"> |
||||
|
<text class="username">{{ address.name }}</text> |
||||
|
<text class="phone">{{ formatPhone(address.phone) }}</text> |
||||
|
<text class="default-tag" v-if="address.isDefault">默认地址</text> |
||||
|
</view> |
||||
|
<view class="address-detail"> |
||||
|
<text>{{ address.fullAddress }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uni-icons type="right" size="16" color="#c0c4cc" /> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 没有地址时显示 --> |
||||
|
<view class="empty-address" @click="selectAddress" v-else> |
||||
|
<view class="empty-address-content"> |
||||
|
<uni-icons type="location" size="24" color="#c0c4cc" /> |
||||
|
<view class="empty-address-text"> |
||||
|
<text class="empty-title">请选择收货地址</text> |
||||
|
<text class="empty-tip">点击添加收货地址信息</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uni-icons type="right" size="16" color="#c0c4cc" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 预约日期 --> |
||||
|
<view class="date-section"> |
||||
|
<view class="section-title"> |
||||
|
<text>预约日期</text> |
||||
|
<text class="required">*</text> |
||||
|
</view> |
||||
|
<view class="date-picker-container"> |
||||
|
<uni-datetime-picker |
||||
|
v-model="selectedDate" |
||||
|
type="date" |
||||
|
:clear-icon="false" |
||||
|
placeholder="请选择预约日期" |
||||
|
@change="onDateChange" |
||||
|
> |
||||
|
<view class="date-input"> |
||||
|
<text class="date-text" :class="{ placeholder: !selectedDate }"> |
||||
|
{{ selectedDate || "请选择预约日期" }} |
||||
|
</text> |
||||
|
<uni-icons type="calendar" size="18" color="#c0c4cc" /> |
||||
|
</view> |
||||
|
</uni-datetime-picker> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 商品信息 --> |
||||
|
<view class="goods-section"> |
||||
|
<view class="section-title"> |
||||
|
<text>IP资产供应商：{{ supplier || "苏州XXX博物馆" }}</text> |
||||
|
</view> |
||||
|
<view class="goods-card" v-for="item in 4"> |
||||
|
<image |
||||
|
class="goods-image" |
||||
|
:src="goodsInfo.image || '/static/image/goods-default.jpg'" |
||||
|
mode="aspectFill" |
||||
|
/> |
||||
|
<view class="goods-info"> |
||||
|
<text class="goods-name">{{ |
||||
|
goodsInfo.name || "食在苏州 | 世界美食之都巡礼+实物探真" |
||||
|
}}</text> |
||||
|
<text class="goods-desc">{{ |
||||
|
goodsInfo.desc || "商品规格信息描述" |
||||
|
}}</text> |
||||
|
<text class="goods-price">¥{{ goodsInfo.price || "699.00" }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 履约方式 --> |
||||
|
<!-- <view class="delivery-section"> |
||||
|
<view class="section-row" @click="selectDeliveryMethod"> |
||||
|
<text class="section-label">履约方式</text> |
||||
|
<view class="section-value"> |
||||
|
<text :class="{ placeholder: !deliveryMethod }"> |
||||
|
{{ deliveryMethod || "预约发货+到店核销 >" }} |
||||
|
</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> --> |
||||
|
|
||||
|
<!-- 备注 --> |
||||
|
<view class="note-section"> |
||||
|
<view class="section-row"> |
||||
|
<text class="section-label">备注</text> |
||||
|
<view class="note-input"> |
||||
|
<input |
||||
|
v-model="note" |
||||
|
placeholder="选填" |
||||
|
placeholder-class="placeholder" |
||||
|
maxlength="200" |
||||
|
/> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 费用明细 --> |
||||
|
<view class="cost-section"> |
||||
|
<view class="cost-item"> |
||||
|
<text class="cost-label">商品金额</text> |
||||
|
<text class="cost-value">¥{{ goodsInfo.price || "699.00" }}</text> |
||||
|
</view> |
||||
|
<view class="cost-item"> |
||||
|
<text class="cost-label">运费</text> |
||||
|
<text class="cost-value">{{ shipping || "预约发货时计算" }}</text> |
||||
|
</view> |
||||
|
<view class="cost-item"> |
||||
|
<text class="cost-label">优惠券</text> |
||||
|
<text class="cost-value coupon">{{ coupon || "无可用 >" }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="submit-section-content" style="height: 230rpx"> </view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<!-- 底部提交区域 --> |
||||
|
<view |
||||
|
class=" " |
||||
|
style="position: fixed; width: 100%; bottom: 0; z-index: 98" |
||||
|
> |
||||
|
<view class="submit-section"> |
||||
|
<view class="total-price"> |
||||
|
<text class="total-amount">¥{{ totalAmount || "699.00" }}</text> |
||||
|
</view> |
||||
|
<button class="submit-btn" @click="submitOrder">提交订单</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
// 收货地址信息 |
||||
|
address: { |
||||
|
name: "", |
||||
|
phone: "", |
||||
|
fullAddress: "", |
||||
|
isDefault: false, |
||||
|
}, |
||||
|
// 选中的日期 |
||||
|
selectedDate: "", |
||||
|
// 商品信息 |
||||
|
goodsInfo: { |
||||
|
id: "", |
||||
|
name: "", |
||||
|
desc: "", |
||||
|
price: "", |
||||
|
image: "", |
||||
|
}, |
||||
|
// 供应商 |
||||
|
supplier: "", |
||||
|
// 履约方式 |
||||
|
deliveryMethod: "", |
||||
|
// 备注 |
||||
|
note: "", |
||||
|
// 运费 |
||||
|
shipping: "", |
||||
|
// 优惠券 |
||||
|
coupon: "", |
||||
|
// 总金额 |
||||
|
totalAmount: "", |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
onLoad(options) { |
||||
|
// 接收页面参数 |
||||
|
if (options.goodsId) { |
||||
|
this.loadGoodsInfo(options.goodsId); |
||||
|
} |
||||
|
if (options.goodsName) { |
||||
|
this.goodsInfo.name = decodeURIComponent(options.goodsName); |
||||
|
} |
||||
|
this.loadDefaultAddress(); |
||||
|
|
||||
|
// 监听地址选择事件 |
||||
|
uni.$on("addressSelected", this.handleAddressSelected); |
||||
|
}, |
||||
|
|
||||
|
onShow() { |
||||
|
// 从地址选择页面返回时，优先检查用户选择的地址 |
||||
|
const hasSelectedAddress = this.checkSelectedAddress(); |
||||
|
// 如果没有选择地址且当前也没有地址，才加载默认地址 |
||||
|
if (!hasSelectedAddress && !this.address.id) { |
||||
|
this.loadDefaultAddress(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onUnload() { |
||||
|
// 移除事件监听 |
||||
|
uni.$off("addressSelected", this.handleAddressSelected); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 返回上一页 |
||||
|
goBack() { |
||||
|
uni.navigateBack(); |
||||
|
}, |
||||
|
|
||||
|
// 处理地址选择事件 |
||||
|
handleAddressSelected(data) { |
||||
|
if (data.fromPage === "orderConfirm") { |
||||
|
this.updateAddressInfo(data.address); |
||||
|
console.log("地址已更新:", this.address); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 更新地址信息的统一方法 |
||||
|
updateAddressInfo(addressData) { |
||||
|
this.address = { |
||||
|
id: addressData.id, |
||||
|
name: addressData.name, |
||||
|
phone: addressData.tel, |
||||
|
fullAddress: addressData.address || this.getFullAddress(addressData), |
||||
|
isDefault: addressData.is_default == 1, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
// 检查storage中的选中地址 |
||||
|
checkSelectedAddress() { |
||||
|
try { |
||||
|
const selectedAddress = uni.getStorageSync("selectedAddress"); |
||||
|
if (selectedAddress) { |
||||
|
this.updateAddressInfo(selectedAddress); |
||||
|
// 清除storage |
||||
|
uni.removeStorageSync("selectedAddress"); |
||||
|
return true; // 表示找到了选中的地址 |
||||
|
} |
||||
|
return false; |
||||
|
} catch (error) { |
||||
|
console.error("读取选中地址失败:", error); |
||||
|
return false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取完整地址 |
||||
|
getFullAddress(addressData) { |
||||
|
const province = addressData.province_text || ""; |
||||
|
const city = addressData.city_text || ""; |
||||
|
const district = addressData.district_text || ""; |
||||
|
const detail = addressData.detail_addr || ""; |
||||
|
return `${province}${city}${district}${detail}`; |
||||
|
}, |
||||
|
|
||||
|
// 格式化手机号 |
||||
|
formatPhone(phone) { |
||||
|
if (!phone) return ""; |
||||
|
return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2"); |
||||
|
}, |
||||
|
|
||||
|
// 选择收货地址 |
||||
|
selectAddress() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/subPackages/user/travelerList?from=orderConfirm", |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 日期变化回调 |
||||
|
onDateChange(date) { |
||||
|
this.selectedDate = date; |
||||
|
console.log("选择的日期:", date); |
||||
|
}, |
||||
|
|
||||
|
// 选择履约方式 |
||||
|
selectDeliveryMethod() { |
||||
|
const itemList = ["预约发货+到店核销", "预约发货+快递配送", "到店自提"]; |
||||
|
|
||||
|
uni.showActionSheet({ |
||||
|
itemList: itemList, |
||||
|
success: (res) => { |
||||
|
this.deliveryMethod = itemList[res.tapIndex]; |
||||
|
console.log("选择的履约方式:", this.deliveryMethod); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.log("取消选择履约方式"); |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 加载商品信息 |
||||
|
async loadGoodsInfo(goodsId) { |
||||
|
try { |
||||
|
// 这里调用实际的API接口获取商品详情 |
||||
|
const goodsData = await this.getGoodsDetail(goodsId); |
||||
|
this.goodsInfo = goodsData; |
||||
|
this.supplier = goodsData.supplier; |
||||
|
this.totalAmount = goodsData.price; |
||||
|
} catch (error) { |
||||
|
console.error("加载商品信息失败:", error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载默认地址 |
||||
|
async loadDefaultAddress() { |
||||
|
try { |
||||
|
// 这里调用实际的API接口获取默认地址 |
||||
|
const addressData = await this.getDefaultAddress(); |
||||
|
if (addressData && !this.address.id) { |
||||
|
// 只有当前没有地址时才设置默认地址 |
||||
|
this.updateAddressInfo(addressData); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error("加载默认地址失败:", error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 提交订单 |
||||
|
async submitOrder() { |
||||
|
// 验证必填项 |
||||
|
if (!this.selectedDate) { |
||||
|
uni.showToast({ |
||||
|
title: "请选择预约日期", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!this.deliveryMethod) { |
||||
|
uni.showToast({ |
||||
|
title: "请选择履约方式", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!this.address.name) { |
||||
|
uni.showToast({ |
||||
|
title: "请选择收货地址", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
uni.showLoading({ |
||||
|
title: "提交中...", |
||||
|
}); |
||||
|
|
||||
|
const orderData = { |
||||
|
goodsId: this.goodsInfo.id, |
||||
|
addressId: this.address.id, |
||||
|
deliveryDate: this.selectedDate, |
||||
|
deliveryMethod: this.deliveryMethod, |
||||
|
note: this.note, |
||||
|
totalAmount: this.totalAmount, |
||||
|
}; |
||||
|
|
||||
|
const result = await this.createOrder(orderData); |
||||
|
|
||||
|
uni.hideLoading(); |
||||
|
|
||||
|
if (result.success) { |
||||
|
uni.showToast({ |
||||
|
title: "订单提交成功", |
||||
|
icon: "success", |
||||
|
}); |
||||
|
|
||||
|
// 跳转到订单详情或订单列表 |
||||
|
setTimeout(() => { |
||||
|
uni.redirectTo({ |
||||
|
url: "/subPackages/orderQy/detail?orderId=" + result.orderId, |
||||
|
}); |
||||
|
}, 1500); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
uni.hideLoading(); |
||||
|
console.error("提交订单失败:", error); |
||||
|
uni.showToast({ |
||||
|
title: "提交失败，请重试", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// API接口 - 获取商品详情 |
||||
|
async getGoodsDetail(goodsId) { |
||||
|
// 模拟API数据 |
||||
|
return new Promise((resolve) => { |
||||
|
setTimeout(() => { |
||||
|
resolve({ |
||||
|
id: goodsId, |
||||
|
name: "食在苏州 | 世界美食之都巡礼+实物探真", |
||||
|
desc: "商品规格信息描述", |
||||
|
price: "699.00", |
||||
|
image: "/static/image/goods-sample.jpg", |
||||
|
supplier: "苏州XXX博物馆", |
||||
|
}); |
||||
|
}, 500); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// API接口 - 获取默认地址 |
||||
|
async getDefaultAddress() { |
||||
|
// 模拟API数据 |
||||
|
return new Promise((resolve) => { |
||||
|
setTimeout(() => { |
||||
|
resolve({ |
||||
|
id: 1, |
||||
|
name: "XX先生", |
||||
|
tel: "18312341234", |
||||
|
address: "江苏省苏州市姑苏区XXXXXX", |
||||
|
province_text: "江苏省", |
||||
|
city_text: "苏州市", |
||||
|
district_text: "姑苏区", |
||||
|
detail_addr: "XXXXXX", |
||||
|
is_default: 1, |
||||
|
}); |
||||
|
}, 500); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// API接口 - 创建订单 |
||||
|
async createOrder(orderData) { |
||||
|
// 模拟API调用 |
||||
|
return new Promise((resolve) => { |
||||
|
setTimeout(() => { |
||||
|
resolve({ |
||||
|
success: true, |
||||
|
orderId: "EQ" + Date.now(), |
||||
|
}); |
||||
|
}, 1000); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
// 主题色彩变量 |
||||
|
$primary-color: #667eea; |
||||
|
$secondary-color: #f8f9fa; |
||||
|
$text-primary: #2d3748; |
||||
|
$text-secondary: #718096; |
||||
|
$text-muted: #a0aec0; |
||||
|
$border-color: #e2e8f0; |
||||
|
$success-color: #48bb78; |
||||
|
$warning-color: #ed8936; |
||||
|
$danger-color: #f56565; |
||||
|
$bg-light: #f7fafc; |
||||
|
|
||||
|
.confirm-container { |
||||
|
height: 100vh; |
||||
|
background-color: $bg-light; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.content-scroll { |
||||
|
flex: 1; |
||||
|
padding: 20rpx; |
||||
|
width: 710rpx; |
||||
|
} |
||||
|
|
||||
|
// 通用section样式 |
||||
|
.section-header, |
||||
|
.section-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 24rpx 30rpx; |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 16rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 28rpx; |
||||
|
color: $text-primary; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 16rpx; |
||||
|
|
||||
|
.required { |
||||
|
color: $danger-color; |
||||
|
margin-left: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 收货地址 |
||||
|
.address-section { |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.address-info { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.user-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12rpx; |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.username { |
||||
|
font-size: 28rpx; |
||||
|
color: $text-primary; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.phone { |
||||
|
font-size: 24rpx; |
||||
|
color: $text-secondary; |
||||
|
} |
||||
|
|
||||
|
.default-tag { |
||||
|
font-size: 20rpx; |
||||
|
color: $primary-color; |
||||
|
background-color: rgba(102, 126, 234, 0.1); |
||||
|
padding: 4rpx 12rpx; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.address-detail { |
||||
|
font-size: 26rpx; |
||||
|
color: $text-secondary; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
// 空地址状态 |
||||
|
.empty-address { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 24rpx 30rpx; |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 16rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
border: 2rpx dashed $border-color; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:active { |
||||
|
background-color: rgba(102, 126, 234, 0.02); |
||||
|
border-color: $primary-color; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.empty-address-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-address-text { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 6rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-title { |
||||
|
font-size: 28rpx; |
||||
|
color: $text-primary; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.empty-tip { |
||||
|
font-size: 24rpx; |
||||
|
color: $text-muted; |
||||
|
} |
||||
|
|
||||
|
// 预约日期 |
||||
|
.date-section { |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.date-picker-container { |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 24rpx 30rpx; |
||||
|
} |
||||
|
|
||||
|
.date-input { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.date-text { |
||||
|
font-size: 28rpx; |
||||
|
color: $text-primary; |
||||
|
|
||||
|
&.placeholder { |
||||
|
color: $text-muted; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 商品信息 |
||||
|
.goods-section { |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-card { |
||||
|
display: flex; |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 24rpx; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-image { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 12rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.goods-info { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-name { |
||||
|
font-size: 26rpx; |
||||
|
color: $text-primary; |
||||
|
font-weight: 600; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.goods-desc { |
||||
|
font-size: 24rpx; |
||||
|
color: $text-secondary; |
||||
|
line-height: 1.3; |
||||
|
} |
||||
|
|
||||
|
.goods-price { |
||||
|
font-size: 32rpx; |
||||
|
color: $danger-color; |
||||
|
font-weight: 600; |
||||
|
margin-top: auto; |
||||
|
} |
||||
|
|
||||
|
// 履约方式 |
||||
|
.delivery-section { |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.section-label { |
||||
|
font-size: 28rpx; |
||||
|
color: $text-primary; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.section-value { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
text { |
||||
|
font-size: 26rpx; |
||||
|
color: $text-primary; |
||||
|
|
||||
|
&.placeholder { |
||||
|
color: $text-muted; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 备注 |
||||
|
.note-section { |
||||
|
margin-bottom: 24rpx; |
||||
|
|
||||
|
.section-row { |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.note-input { |
||||
|
flex: 1; |
||||
|
margin-left: 40rpx; |
||||
|
|
||||
|
input { |
||||
|
font-size: 26rpx; |
||||
|
color: $text-primary; |
||||
|
text-align: right; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.placeholder { |
||||
|
color: $text-muted; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 费用明细 |
||||
|
.cost-section { |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 24rpx 30rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.cost-item { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 16rpx 0; |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
border-bottom: 1px solid $border-color; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cost-label { |
||||
|
font-size: 26rpx; |
||||
|
color: $text-primary; |
||||
|
} |
||||
|
|
||||
|
.cost-value { |
||||
|
font-size: 26rpx; |
||||
|
color: $text-primary; |
||||
|
|
||||
|
&.coupon { |
||||
|
color: $text-muted; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 底部提交区域 |
||||
|
.submit-section { |
||||
|
flex-shrink: 0; // 防止被压缩 |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 24rpx 30rpx; |
||||
|
background-color: #ffffff; |
||||
|
border-top: 1px solid $border-color; |
||||
|
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04); |
||||
|
|
||||
|
// 添加安全区域适配 |
||||
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
||||
|
} |
||||
|
|
||||
|
.submit-section-content { |
||||
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
||||
|
} |
||||
|
|
||||
|
.total-price { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.total-amount { |
||||
|
font-size: 36rpx; |
||||
|
color: $danger-color; |
||||
|
font-weight: 600; |
||||
|
font-family: "SF Mono", "Monaco", "Cascadia Code", monospace; |
||||
|
} |
||||
|
|
||||
|
.submit-btn { |
||||
|
background-color: $text-primary; |
||||
|
color: #ffffff; |
||||
|
border: none; |
||||
|
border-radius: 32rpx; |
||||
|
padding: 4rpx 48rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:active { |
||||
|
transform: scale(0.95); |
||||
|
background-color: rgba(45, 55, 72, 0.8); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue