Skip to content

飞
飞鹤小程序
Commit 9a2a922b authored by spc's avatar spc
Browse files
Options

fixed

parent 64d491e6
Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 77 deletions
pages.json
View file @ 9a2a922b
......@@ -183,8 +183,7 @@
{
"path": "pages/XingmaLabDetailPage/XingmaLabDetailPage",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
"navigationBarTitleText": ""
}
},
{
......
pages/XingmaLabDetailPage/XingmaLabDetailPage.less
View file @ 9a2a922b
// 星妈实验室详情页面样式
.xingmalabdetailpage {
width: 750rpx;
height: 1624rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.xingmalabdetailpagebg {
// 星妈实验室详情页面样式
.xingmalabdetailpage {
width: 750rpx;
height: 1624rpx;
height: 1842rpx;
left: 0rpx;
top: 0rpx;
top: -160rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.xingmalabdetailpagetext {
width: 295rpx;
height: 31rpx;
left: 233rpx;
top: 1232rpx;
position: absolute;
font-size: 32rpx;
line-height: 31rpx;
color: rgba(29, 30, 37, 1);
text-align: center;
}
.xingmalabdetailpagebg {
width: 750rpx;
height: 1842rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.xingmalabdetailpagetext {
width: 688rpx;
min-height: 131rpx;
left: 31rpx;
top: 1232rpx;
white-space: pre-wrap;
position: absolute;
font-size: 32rpx;
line-height: 40rpx;
color: rgba(29, 30, 37, 1);
text-align: left;
word-wrap: break-word;
word-break: break-all;
}
.xingmalabdetailpagepicbg {
width: 730rpx;
......@@ -45,6 +48,7 @@
height: 914rpx;
left: 31rpx;
top: 207rpx;
border-radius: 24rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
......@@ -67,8 +71,9 @@
width: 750rpx;
height: 218rpx;
left: 0rpx;
top: 1406rpx;
position: absolute;
bottom: 0rpx;
background-color: #fff;
position: fixed;
.xingmalabdetailpagebottomconbg {
width: 750rpx;
......@@ -107,33 +112,76 @@
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border: none;
padding: 0;
margin: 0;
line-height: 1;
font-size: 0;
color: transparent;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
&::after {
border: none;
}
}
}
.xingmalabdetailpagetime {
width: 203rpx;
height: 23rpx;
left: 41rpx;
top: 1337rpx;
position: absolute;
font-size: 24rpx;
line-height: 23rpx;
color: rgba(111, 109, 103, 1);
.xingmalabdetailpagetime {
width: 203rpx;
height: 23rpx;
left: 41rpx;
top: 1400rpx;
position: absolute;
font-size: 24rpx;
line-height: 23rpx;
color: rgba(111, 109, 103, 1);
}
}
// 手机号授权按钮样式
.phone-auth-btn-cover {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
font-size: 0 !important;
color: transparent !important;
&::after {
border: none !important;
}
}
// 点赞状态样式
.xingmalabdetailpage {
.xingmalabdetailpagebottomconlikebtn {
&.liked {
filter: brightness(1.2);
transform: scale(1.1);
}
// 授权覆盖层样式
.auth-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
.auth-like-btn {
position: absolute;
width: 119rpx;
height: 44rpx;
left: 135rpx;
top: 56rpx;
}
.auth-share-btn {
position: absolute;
width: 121rpx;
height: 42rpx;
left: 498rpx;
top: 58rpx;
}
}
pages/XingmaLabDetailPage/XingmaLabDetailPage.vue
View file @ 9a2a922b
......@@ -2,32 +2,52 @@
<view class="xingmalabdetailpage modal_center">
<span class="xingmalabdetailpagebg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
<span class="xingmalabdetailpagetext">{{ detailData.content || config.texts.title }}</span>
<span class="xingmalabdetailpagetext">{{
detailData.content
|| config.texts.title }}</span>
<span class="xingmalabdetailpagetime" v-if="detailData.owner && detailData.gmtCreate">
{{ formatTime(detailData.gmtCreate) }}
</span>
<span class="xingmalabdetailpagepicbg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.picBg)})` }"></span>
<image v-if="detailData.imgUrl" :src="detailData.imgUrl" class="xingmalabdetailpagepic" mode="aspectFill" />
<span class="xingmalabdetailpagenum">{{ config.texts.collectionNumber }}{{ detailData.bizNo || collectionNumber
}}</span>
<div class="xingmalabdetailpagebottomcon">
}}</span>
<div class="xingmalabdetailpagebottomcon" v-if="detailData.state !== 1">
<span class="xingmalabdetailpagebottomconbg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConBg)})` }"></span>
<!-- 收藏按钮 -->
<span class="xingmalabdetailpagebottomconlikebtn" :class="{ liked: detailData.collection }"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConLikeBtn)})` }"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(detailData.collection ? config.images.bottomConLikeBtnSel : config.images.bottomConLikeBtn)})` }"
@click="handleLikeClick"></span>
<span class="xingmalabdetailpagebottomconsharebtn"
<!-- 分享按钮 -->
<button open-type="share" class="xingmalabdetailpagebottomconsharebtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConShareBtn)})` }"
@click="handleShareClick"></span>
@click="handleShareClick"></button>
<!-- 未登录时覆盖的授权按钮层 -->
<div v-if="homeStore && !homeStore.isLogin" class="auth-overlay">
<!-- 收藏按钮授权覆盖 -->
<button open-type="getPhoneNumber" @getphonenumber="(e) => onGetPhoneNumber(e, 'like')"
class="auth-like-btn phone-auth-btn-cover"></button>
<!-- 分享按钮授权覆盖 -->
<button open-type="getPhoneNumber" @getphonenumber="(e) => onGetPhoneNumber(e, 'share')"
class="auth-share-btn phone-auth-btn-cover"></button>
</div>
</div>
<span class="xingmalabdetailpagetime" v-if="detailData.owner && detailData.gmtCreate">
{{ formatTime(detailData.gmtCreate) }}
</span>
</view>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { xingmaLabDetailConfig, getImageUrl } from './config.js'
import { fetchRecordDetail } from '@/api/xingmaLab.js'
import { fetchRecordDetail, fetchFavoriteAdd, fetchFavoriteRemove } from '@/api/xingmaLab.js'
import { useHomeStore } from '@/stores/home.js'
import { useUserStore } from '@/stores/user.js'
// 组件名称
defineOptions({
......@@ -44,20 +64,13 @@ const detailData = ref({
nickname: '',
avatar: '',
collection: false,
bizNo: ''
bizNo: '',
state: null
})
// 配置对象
const config = xingmaLabDetailConfig
// 计算属性
const currentTime = computed(() => {
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
return `${year}-${month}-${day} 北京`
})
// 格式化时间
const formatTime = (timeStr) => {
......@@ -66,7 +79,7 @@ const formatTime = (timeStr) => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day} 北京`
return `${year}-${month}-${day} `
}
// 获取详情数据
......@@ -96,24 +109,89 @@ const fetchDetailData = async (id) => {
}
}
// 获取 stores
const homeStore = useHomeStore()
const userStore = useUserStore()
// 手机号授权回调
const onGetPhoneNumber = (e, action) => {
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
uni.showToast({
title: '请授权使用手机号',
icon: 'none',
});
return;
}
console.log('detail', e.detail, 'action:', action);
// 调用手机号授权回调
userStore.phoneCallback(e.detail).then(() => {
// 授权成功后，根据点击的按钮执行相应功能
if (action === 'like') {
handleLikeClick();
} else if (action === 'share') {
handleShareClick();
}
});
}
// 方法
const handleLikeClick = () => {
// 这里可以添加收藏/取消收藏的逻辑
uni.showToast({
title: detailData.value.collection ? '已收藏' : '收藏成功',
icon: 'success'
})
const handleLikeClick = async () => {
try {
const recordId = detailData.value.id
if (!recordId) {
uni.showToast({
title: '记录ID不存在',
icon: 'none'
})
return
}
if (detailData.value.collection) {
// 取消收藏
const result = await fetchFavoriteRemove({ relationId: recordId })
if (result.success) {
detailData.value.collection = false
uni.showToast({
title: '已取消收藏',
icon: 'none'
})
} else {
throw new Error(result.message || '取消收藏失败')
}
} else {
// 添加收藏
const result = await fetchFavoriteAdd({ relationId: recordId })
if (result.success) {
detailData.value.collection = true
uni.showToast({
title: '收藏成功',
icon: 'none'
})
} else {
throw new Error(result.message || '收藏失败')
}
}
} catch (error) {
console.error('收藏操作失败:', error)
uni.showToast({
title: error.message || '操作失败，请重试',
icon: 'none'
})
}
}
const handleShareClick = () => {
uni.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
// 使用 open-type="share" 时，点击事件可以为空
// 分享内容通过页面配置自动设置
console.log('分享按钮被点击')
}
// 生命周期
onMounted(async () => {
// 调用 home 接口获取登录状态
await homeStore.loadHomeInfo()
// 获取页面跳转参数中的 id
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
......@@ -130,6 +208,57 @@ onMounted(async () => {
})
}
})
// 页面分享配置
onShareAppMessage(() => {
const shareImage = detailData.value.imgUrl || ''
const shareContent = detailData.value.content || ''
// 截取分享文案，超出字数显示省略号
const maxLength = 50
const truncatedContent = shareContent.length > maxLength
? shareContent.substring(0, maxLength) + '...'
: shareContent
console.log('分享参数:', {
title: truncatedContent,
imageUrl: shareImage,
path: `/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=${detailData.value.id}`
})
return {
title: truncatedContent,
imageUrl: shareImage,
path: `/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=${detailData.value.id}`
}
})
onShareTimeline(() => {
const shareImage = detailData.value.imgUrl || ''
const shareContent = detailData.value.content || ''
// 截取分享文案，超出字数显示省略号
const maxLength = 50
const truncatedContent = shareContent.length > maxLength
? shareContent.substring(0, maxLength) + '...'
: shareContent
console.log('朋友圈分享参数:', {
title: truncatedContent,
imageUrl: shareImage,
path: `/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=${detailData.value.id}`
})
return {
title: truncatedContent,
imageUrl: shareImage,
path: `/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=${detailData.value.id}`
}
})
</script>
<style lang="less" scoped>
......
pages/XingmaLabDetailPage/config.js
View file @ 9a2a922b
......@@ -17,8 +17,11 @@ export const xingmaLabDetailConfig = {
// 底部容器背景
bottomConBg: `XingmaLabDetailPage/${version}/XingmaLabDetailPageBottomConBg.png`,
// 点赞按钮
// 收藏按钮
bottomConLikeBtn: `XingmaLabDetailPage/${version}/XingmaLabDetailPageBottomConLikeBtn.png`,
// 已收藏按钮
bottomConLikeBtnSel: `XingmaLabDetailPage/${version}/XingmaLabDetailPageBottomConLikeBtnSel.png`,
// 分享按钮
bottomConShareBtn: `XingmaLabDetailPage/${version}/XingmaLabDetailPageBottomConShareBtn.png`
......
pages/xingmaLab/xingmaLab.vue
View file @ 9a2a922b
......@@ -567,22 +567,32 @@ const handleBottomNavClick = (navType) => {
const handleItemClick_cangguan = (item) => {
console.log('点击了项目藏馆:', item)
// 这里可以添加跳转逻辑
uni.navigateTo({
url: '/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=' + item.id
})
}
const handleItemClick_cangpin = (item) => {
console.log('点击了项目藏品:', item)
// 这里可以添加跳转逻辑
uni.navigateTo({
url: '/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=' + item.id
})
}
const handleItemClick_shoucang = (item) => {
console.log('点击了项目收藏:', item)
// 这里可以添加跳转逻辑
uni.navigateTo({
url: '/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=' + item.id
})
}
const handlePublish = () => {
console.log('点击了发布按钮')
// 这里可以添加发布逻辑或跳转
}
// 无次数弹窗按钮点击处理
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment