You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1143 lines
30 KiB
1143 lines
30 KiB
<template>
|
|
<view class="detail-page">
|
|
<view class="nav" :style="{ paddingTop: statusBarTop + 'px' }">
|
|
<view class="nav-btn" @tap="back"><uni-icons type="left" size="24" color="#18372f"></uni-icons></view>
|
|
<view class="nav-title">{{isWant ? '求购详情' : '闲置详情'}}</view>
|
|
<view class="nav-btn"></view>
|
|
</view>
|
|
|
|
<scroll-view scroll-y class="content-scroll" :style="{ paddingTop: navHeight + 'px' }">
|
|
<view class="detail-loading" v-if="loading">加载中...</view>
|
|
<swiper
|
|
v-if="goods && imageList.length"
|
|
class="image-swiper"
|
|
circular
|
|
indicator-dots
|
|
:style="{ height: currentImageHeight + 'rpx' }"
|
|
@change="changeImage"
|
|
>
|
|
<swiper-item v-for="(item,index) in imageList" :key="index">
|
|
<image
|
|
:src="item"
|
|
mode="aspectFit"
|
|
:data-index="index"
|
|
@load="onImageLoad"
|
|
></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="card goods-card" v-if="goods">
|
|
<view class="price-row">
|
|
<view class="price">{{isWant ? '预算 ¥' : '¥'}}{{displayPrice}}</view>
|
|
<view class="origin" v-if="!isWant && goods.originPrice">¥{{goods.originPrice}}</view>
|
|
<view class="sale-status">{{saleStatusText}}</view>
|
|
<button class="card-share-btn" open-type="share">
|
|
<uni-icons type="redo" size="18" color="#21b886"></uni-icons>
|
|
</button>
|
|
</view>
|
|
<view class="title">{{goods.title}}</view>
|
|
<view class="meta">
|
|
<text>{{goods.createTime || ''}}</text>
|
|
<text>{{goods.browseCount || 0}}浏览</text>
|
|
<text>{{goods.regionName || '本校'}}</text>
|
|
</view>
|
|
<view class="tag-list" v-if="tagList.length || isWant">
|
|
<text v-if="isWant">求购</text>
|
|
<text v-for="item in tagList" :key="item">{{item}}</text>
|
|
</view>
|
|
<rich-text class="content rich-content" :nodes="goods.content || ''"></rich-text>
|
|
</view>
|
|
|
|
<view class="card seller-card" v-if="goods">
|
|
<image class="avatar" :src="goods.userAvatar || defaultAvatar" mode="aspectFill"></image>
|
|
<view class="seller-main">
|
|
<view class="seller-name">半径卖家<text>已实名</text></view>
|
|
<view class="online">{{goods.sellerOnlineStatus || '3天内在线'}}</view>
|
|
</view>
|
|
<view class="seller-tip">线下面交</view>
|
|
</view>
|
|
|
|
<view class="card contact-card" v-if="hasContactInfo">
|
|
<view class="section-head">
|
|
<text>联系方式</text>
|
|
</view>
|
|
<view class="contact-row" v-if="contactInfo.wechat" @tap="copyText(contactInfo.wechat, '微信号已复制')">
|
|
<view class="contact-label">微信</view>
|
|
<view class="contact-value">{{contactInfo.wechat}}</view>
|
|
<view class="contact-action">复制</view>
|
|
</view>
|
|
<view class="contact-row" v-if="contactInfo.phone" @tap="makeCall(contactInfo.phone)">
|
|
<view class="contact-label">电话</view>
|
|
<view class="contact-value">{{contactInfo.phone}}</view>
|
|
<view class="contact-action">拨打</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card comment-card" v-if="goods && !isWant">
|
|
<view class="section-head">
|
|
<text>评论 {{commentsTotal}}</text>
|
|
<view @tap="focusComment">我要评论</view>
|
|
</view>
|
|
<view class="comment-item" v-for="item in comments" :key="item.id">
|
|
<image :src="item.userAvatar || defaultAvatar" mode="aspectFill"></image>
|
|
<view class="comment-main">
|
|
<view class="comment-name">
|
|
半径同学
|
|
<text v-if="item.sellerReply">卖家</text>
|
|
</view>
|
|
<view class="comment-content">{{item.content}}</view>
|
|
<view class="reply-list" v-if="item.replies && item.replies.length">
|
|
<view class="reply-item" v-for="reply in item.replies" :key="reply.id">
|
|
<text class="reply-name">半径同学</text>
|
|
<text class="seller-badge" v-if="reply.sellerReply">卖家</text>
|
|
<text class="reply-target" v-if="reply.replyToUserName"> 回复 {{reply.replyToUserName}}</text>
|
|
<text>：{{reply.content}}</text>
|
|
<text class="reply-action" @tap="replyComment(item, reply)">回复</text>
|
|
<text class="reply-action reply-delete" v-if="reply.userId == currentUserId" @tap="deleteComment(reply)">删除</text>
|
|
</view>
|
|
</view>
|
|
<view class="comment-actions">
|
|
<text>{{item.createTime || ''}}</text>
|
|
<text @tap="likeComment(item)">赞 {{item.likeCount || 0}}</text>
|
|
<text @tap="replyComment(item, item)">回复</text>
|
|
<text @tap="reportComment(item)">举报</text>
|
|
<text v-if="item.userId == currentUserId" @tap="deleteComment(item)">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty" v-if="!comments.length">还没有评论，快来问问吧</view>
|
|
</view>
|
|
|
|
<view class="bottom-space"></view>
|
|
</scroll-view>
|
|
|
|
<uni-popup ref="commentPopup" type="center" background-color="transparent" @change="onCommentPopupChange">
|
|
<view class="comment-popup">
|
|
<view class="comment-popup-title">{{replyTarget.id ? '回复评论' : '发表评论'}}</view>
|
|
<view class="comment-popup-desc" v-if="replyTarget.id">
|
|
回复 {{replyTarget.userName || '校园同学'}}
|
|
<text @tap="cancelReply">取消回复</text>
|
|
</view>
|
|
<view class="comment-popup-desc" v-else>友善交流，评论内容会进行审核</view>
|
|
<view class="comment-popup-input">
|
|
<textarea
|
|
v-model.trim="commentText"
|
|
:placeholder="commentPlaceholder"
|
|
maxlength="200"
|
|
cursor-spacing="120"
|
|
/>
|
|
</view>
|
|
<view class="comment-popup-actions">
|
|
<view class="comment-popup-cancel" @tap="closeCommentPopup">取消</view>
|
|
<view class="comment-popup-confirm" :class="{ disabled: commentSubmitting }" @tap="submitComment">{{commentSubmitting ? '发送中' : '发送'}}</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<view class="bottom-bar" v-if="goods">
|
|
<view class="bar-action" v-if="!isWant" @tap="focusComment">
|
|
<uni-icons type="chat" size="22" color="#59706a"></uni-icons>
|
|
<text>评论</text>
|
|
</view>
|
|
<view class="bar-action" v-if="!isWant" @tap="favorite">
|
|
<uni-icons :type="goods && goods.favorited ? 'star-filled' : 'star'" size="22" :color="goods && goods.favorited ? '#ffb22d' : '#59706a'"></uni-icons>
|
|
<text>收藏 {{favoriteCountText}}</text>
|
|
</view>
|
|
<view class="bar-action" @tap="reportGoods">
|
|
<uni-icons type="flag" size="22" color="#59706a"></uni-icons>
|
|
<text>举报</text>
|
|
</view>
|
|
<view class="consult-btn" @tap="consult">{{isWant ? '我有货' : '立即咨询'}}</view>
|
|
</view>
|
|
<view class="page-like-effect" v-if="pageLikeEffects.length">
|
|
<view
|
|
class="page-like-heart"
|
|
:class="effect.className"
|
|
:style="effect.style"
|
|
v-for="effect in pageLikeEffects"
|
|
:key="effect.id"
|
|
>
|
|
<view class="page-like-heart-shape"></view>
|
|
</view>
|
|
</view>
|
|
<ie-auth-dialog />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getFishGoodsDetail,
|
|
getFishWantDetail,
|
|
toggleFishFavorite,
|
|
toggleFishLike,
|
|
addFishComment,
|
|
pageFishComments,
|
|
deleteFishComment,
|
|
submitFishComplaint,
|
|
createFishChatSession,
|
|
createFishWantChatSession
|
|
} from '@/common/fishMarketApi.js'
|
|
import { getIeProfile } from '@/common/ieApi.js'
|
|
import { ensureIeVerifiedBeforeAction } from '@/common/ieRealNameAuth.js'
|
|
import { buildHomeSharePath } from '@/utils/sharePath.js'
|
|
import IeAuthDialog from '@/package2/components/ie-auth-dialog/ie-auth-dialog.vue'
|
|
|
|
export default {
|
|
components: {
|
|
IeAuthDialog
|
|
},
|
|
data() {
|
|
return {
|
|
id: '',
|
|
detailType: 'goods',
|
|
statusBarTop: 24,
|
|
goods: null,
|
|
loading: false,
|
|
comments: [],
|
|
commentsTotal: 0,
|
|
commentText: '',
|
|
showCommentInput: false,
|
|
commentSubmitting: false,
|
|
replyTarget: {},
|
|
defaultAvatar: '',
|
|
defaultShareImage: '/static/images/img/songshu.png',
|
|
currentUserId: uni.getStorageSync('id') || '',
|
|
currentImageIndex: 0,
|
|
imageHeights: {},
|
|
likeEffectSeq: 0,
|
|
likeEffectTimers: {},
|
|
pageLikeEffects: []
|
|
}
|
|
},
|
|
computed: {
|
|
imageList() {
|
|
return this.goods && this.goods.imageList && this.goods.imageList.length ? this.goods.imageList.slice(0, 5) : []
|
|
},
|
|
isWant() {
|
|
return this.detailType == 'want'
|
|
},
|
|
displayPrice() {
|
|
return this.isWant ? (this.goods && this.goods.expectedPrice || 0) : (this.goods && this.goods.price || 0)
|
|
},
|
|
tagList() {
|
|
return this.goods && this.goods.tagList ? this.goods.tagList : []
|
|
},
|
|
saleStatusText() {
|
|
const status = this.goods ? Number(this.goods.saleStatus) : 1
|
|
if (this.isWant) return '求购中'
|
|
if (status == 2) return '已预定'
|
|
if (status == 3) return '已卖出'
|
|
return '在售'
|
|
},
|
|
contactInfo() {
|
|
if (!this.goods) return {}
|
|
const value = this.goods.contactInfo
|
|
let info = {}
|
|
if (typeof value === 'string') {
|
|
try {
|
|
info = JSON.parse(value) || {}
|
|
} catch (e) {
|
|
info = {}
|
|
}
|
|
} else if (value && typeof value === 'object') {
|
|
info = value
|
|
}
|
|
return {
|
|
wechat: info.wechat || this.goods.wechat || '',
|
|
phone: info.phone || this.goods.phone || ''
|
|
}
|
|
},
|
|
hasContactInfo() {
|
|
return !!(this.contactInfo.wechat || this.contactInfo.phone)
|
|
},
|
|
navHeight() {
|
|
return this.statusBarTop + uni.upx2px(68)
|
|
},
|
|
currentImageHeight() {
|
|
return this.imageHeights[this.currentImageIndex] || 560
|
|
},
|
|
commentPlaceholder() {
|
|
return this.replyTarget && this.replyTarget.id ? '回复 ' + (this.replyTarget.userName || '校园同学') : '写下你的评论'
|
|
},
|
|
favoriteCountText() {
|
|
return this.goods && this.goods.favoriteCount ? this.goods.favoriteCount : 0
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.id = options && options.id ? options.id : ''
|
|
this.detailType = options && options.type == 'want' ? 'want' : 'goods'
|
|
if (uni.getMenuButtonBoundingClientRect) {
|
|
const rect = uni.getMenuButtonBoundingClientRect()
|
|
this.statusBarTop = rect.top || this.statusBarTop
|
|
}
|
|
this.load()
|
|
},
|
|
onShareAppMessage() {
|
|
return this.buildShareInfo()
|
|
},
|
|
onShareTimeline() {
|
|
const info = this.buildShareInfo()
|
|
return {
|
|
title: info.title,
|
|
query: info.path.split('?')[1] || '',
|
|
imageUrl: info.imageUrl
|
|
}
|
|
},
|
|
onUnload() {
|
|
Object.keys(this.likeEffectTimers || {}).forEach(key => {
|
|
clearTimeout(this.likeEffectTimers[key])
|
|
})
|
|
this.likeEffectTimers = {}
|
|
},
|
|
methods: {
|
|
back() {
|
|
const pages = getCurrentPages ? getCurrentPages() : []
|
|
if (pages && pages.length > 1) {
|
|
uni.navigateBack()
|
|
return
|
|
}
|
|
uni.reLaunch({
|
|
url: '/pages/index/index?tabIndex=3'
|
|
})
|
|
},
|
|
load() {
|
|
if (!this.id) return
|
|
this.loading = true
|
|
const request = this.isWant ? getFishWantDetail(this.id) : getFishGoodsDetail(this.id)
|
|
request.then(res => {
|
|
this.goods = res
|
|
this.currentImageIndex = 0
|
|
this.imageHeights = {}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
if (!this.isWant) this.loadComments()
|
|
},
|
|
changeImage(e) {
|
|
this.currentImageIndex = Number(e.detail && e.detail.current) || 0
|
|
},
|
|
onImageLoad(e) {
|
|
const detail = e && e.detail ? e.detail : {}
|
|
const dataset = e && e.currentTarget ? e.currentTarget.dataset || {} : {}
|
|
const index = Number(dataset.index) || 0
|
|
const width = Number(detail.width)
|
|
const height = Number(detail.height)
|
|
if (!width || !height) return
|
|
const adaptedHeight = Math.max(360, Math.min(900, Math.round(750 * height / width)))
|
|
this.$set(this.imageHeights, index, adaptedHeight)
|
|
},
|
|
loadComments() {
|
|
pageFishComments(this.id, 1, 20).then(page => {
|
|
this.comments = page && (page.records || page.content) ? (page.records || page.content) : []
|
|
this.commentsTotal = Number(page && (page.total || page.totalElements)) || this.comments.length
|
|
uni.$emit('fishUnreadChange')
|
|
})
|
|
},
|
|
async ensureVerified(actionText) {
|
|
const profile = await getIeProfile().catch(() => null)
|
|
return ensureIeVerifiedBeforeAction({
|
|
profile: profile || {},
|
|
actionText,
|
|
authDialog: {
|
|
badge: '校园二手',
|
|
title: '实名认证',
|
|
content: '根据法律法规要求，对应流程需要调用阿里云实名认证。半径里不会存储您的实名信息。',
|
|
steps: []
|
|
},
|
|
reload: getIeProfile
|
|
})
|
|
},
|
|
async focusComment() {
|
|
if (this.isWant) return
|
|
const verified = await this.ensureVerified('在校园二手评论')
|
|
if (!verified) return
|
|
this.replyTarget = {}
|
|
this.openCommentPopup()
|
|
},
|
|
async replyComment(parent, target) {
|
|
if (this.isWant) return
|
|
const verified = await this.ensureVerified('回复校园二手评论')
|
|
if (!verified) return
|
|
this.replyTarget = {
|
|
id: target.id,
|
|
parentId: parent.parentId || parent.id,
|
|
userId: target.userId,
|
|
userName: target.userName || '校园同学'
|
|
}
|
|
this.openCommentPopup()
|
|
},
|
|
cancelReply() {
|
|
this.replyTarget = {}
|
|
},
|
|
openCommentPopup() {
|
|
this.showCommentInput = true
|
|
this.$refs.commentPopup.open('center')
|
|
},
|
|
closeCommentPopup() {
|
|
this.showCommentInput = false
|
|
uni.hideKeyboard()
|
|
this.$refs.commentPopup.close()
|
|
},
|
|
onCommentPopupChange(e) {
|
|
if (!e.show) {
|
|
this.showCommentInput = false
|
|
uni.hideKeyboard()
|
|
}
|
|
},
|
|
async submitComment() {
|
|
if (this.commentSubmitting) return
|
|
const content = String(this.commentText || '').trim()
|
|
if (!content) return
|
|
const replyTarget = { ...(this.replyTarget || {}) }
|
|
const payload = {
|
|
goodsId: this.id,
|
|
content
|
|
}
|
|
if (replyTarget && replyTarget.id) {
|
|
payload.parentId = replyTarget.parentId
|
|
payload.replyToUserId = replyTarget.userId
|
|
payload.replyToUserName = replyTarget.userName
|
|
}
|
|
this.commentSubmitting = true
|
|
this.closeCommentPopup()
|
|
addFishComment(payload).then(res => {
|
|
if (!res) {
|
|
this.commentText = content
|
|
this.replyTarget = replyTarget
|
|
this.openCommentPopup()
|
|
return
|
|
}
|
|
this.commentText = ''
|
|
this.replyTarget = {}
|
|
this.loadComments()
|
|
}).catch(() => {
|
|
this.commentText = content
|
|
this.replyTarget = replyTarget
|
|
this.openCommentPopup()
|
|
}).finally(() => {
|
|
this.commentSubmitting = false
|
|
})
|
|
},
|
|
deleteComment(item) {
|
|
uni.showModal({
|
|
title: '删除评论',
|
|
content: '确定删除这条评论吗？',
|
|
success: (res) => {
|
|
if (!res.confirm) return
|
|
deleteFishComment(item.id).then(() => this.loadComments())
|
|
}
|
|
})
|
|
},
|
|
likeComment(item) {
|
|
const shouldAnimate = !item.liked
|
|
if (shouldAnimate) {
|
|
this.playLikeEffect()
|
|
}
|
|
toggleFishLike({ commentId: item.id, likeType: 'comment' }).then(res => {
|
|
if (!res) return
|
|
this.$set(item, 'liked', !!res.liked)
|
|
item.likeCount = Number(res.count) || 0
|
|
})
|
|
},
|
|
favorite() {
|
|
if (!this.goods) return
|
|
const shouldAnimate = !this.goods.favorited
|
|
if (shouldAnimate) {
|
|
this.playLikeEffect()
|
|
}
|
|
toggleFishFavorite(this.id).then(res => {
|
|
if (!res) return
|
|
this.$set(this.goods, 'favorited', !!res.favorited)
|
|
this.$set(this.goods, 'favoriteCount', Number(res.count) || 0)
|
|
})
|
|
},
|
|
playLikeEffect() {
|
|
const burstId = Date.now() + '-' + (++this.likeEffectSeq)
|
|
const tracks = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']
|
|
const effects = tracks.map((name, index) => ({
|
|
id: burstId + '-' + index,
|
|
className: 'page-like-heart--' + name,
|
|
style: `left:${6 + ((index * 59) % 86)}%; animation-delay:${index * 95}ms;`
|
|
}))
|
|
this.pageLikeEffects = effects
|
|
const timerKey = 'page'
|
|
if (this.likeEffectTimers[timerKey]) {
|
|
clearTimeout(this.likeEffectTimers[timerKey])
|
|
}
|
|
this.likeEffectTimers[timerKey] = setTimeout(() => {
|
|
if (this.pageLikeEffects.length && String(this.pageLikeEffects[0].id).indexOf(burstId) === 0) {
|
|
this.pageLikeEffects = []
|
|
}
|
|
delete this.likeEffectTimers[timerKey]
|
|
}, 3050)
|
|
},
|
|
reportGoods() {
|
|
this.report({ complaintType: this.isWant ? 'want' : 'goods', goodsId: this.id })
|
|
},
|
|
reportComment(item) {
|
|
this.report({ complaintType: 'comment', goodsId: this.id, commentId: item.id })
|
|
},
|
|
report(base) {
|
|
uni.showModal({
|
|
title: '举报原因',
|
|
editable: true,
|
|
placeholderText: '请描述问题',
|
|
success: (res) => {
|
|
if (!res.confirm || !res.content) return
|
|
submitFishComplaint({ ...base, reason: res.content }).then(() => {
|
|
uni.showToast({ title: '已提交举报', icon: 'none' })
|
|
})
|
|
}
|
|
})
|
|
},
|
|
async consult() {
|
|
if (!this.goods) return
|
|
const verified = await this.ensureVerified(this.isWant ? '响应校园二手求购' : '咨询校园二手商品')
|
|
if (!verified) return
|
|
if (this.isWant) {
|
|
createFishWantChatSession(this.id).then(session => {
|
|
if (!session || !session.sessionId) return
|
|
uni.navigateTo({
|
|
url: `/package2/IdleTrad/chat?sessionId=${session.sessionId}&wantId=${this.id}`
|
|
})
|
|
})
|
|
return
|
|
}
|
|
createFishChatSession(this.id).then(session => {
|
|
if (!session || !session.sessionId) return
|
|
uni.navigateTo({
|
|
url: `/package2/IdleTrad/chat?sessionId=${session.sessionId}&goodsId=${this.id}`
|
|
})
|
|
})
|
|
},
|
|
share() {
|
|
// #ifdef MP-WEIXIN
|
|
uni.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
})
|
|
uni.showToast({ title: '请点击右上角分享', icon: 'none' })
|
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
|
uni.showToast({ title: '请使用右上角分享', icon: 'none' })
|
|
// #endif
|
|
},
|
|
buildShareInfo() {
|
|
const title = this.goods && this.goods.title ? this.goods.title : (this.isWant ? '校园二手求购' : '校园二手商品')
|
|
const prefix = this.isWant ? '同学正在求购：' : '校园二手好物：'
|
|
const typeQuery = this.isWant ? '&type=want' : ''
|
|
const targetPath = `/package2/IdleTrad/detail?id=${this.id || ''}${typeQuery}`
|
|
return {
|
|
title: prefix + title,
|
|
path: buildHomeSharePath(targetPath),
|
|
imageUrl: this.imageList.length ? this.imageList[0] : this.defaultShareImage
|
|
}
|
|
},
|
|
copyText(text, title) {
|
|
if (!text) return
|
|
uni.setClipboardData({
|
|
data: String(text),
|
|
success: () => {
|
|
uni.showToast({ title: title || '已复制', icon: 'none' })
|
|
}
|
|
})
|
|
},
|
|
makeCall(phone) {
|
|
if (!phone) return
|
|
uni.makePhoneCall({
|
|
phoneNumber: String(phone)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f7f9f7;
|
|
}
|
|
|
|
.detail-page {
|
|
min-height: 100vh;
|
|
color: #17362f;
|
|
background: #f7f9f7;
|
|
}
|
|
|
|
.nav {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 20;
|
|
padding-left: 24rpx;
|
|
padding-right: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
box-shadow: 0 8rpx 20rpx rgba(20, 68, 52, 0.06);
|
|
}
|
|
|
|
.nav-btn {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.content-scroll {
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.detail-loading {
|
|
padding: 120rpx 0;
|
|
color: #8a9994;
|
|
font-size: 25rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.image-swiper {
|
|
width: 100%;
|
|
background: #edf3ef;
|
|
transition: height 0.2s ease;
|
|
}
|
|
|
|
.image-swiper image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.card {
|
|
margin: 20rpx 24rpx 0;
|
|
padding: 24rpx;
|
|
border-radius: 28rpx;
|
|
background: #fff;
|
|
box-shadow: 0 10rpx 26rpx rgba(20, 60, 48, 0.05);
|
|
}
|
|
|
|
.price-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.price {
|
|
color: #ef4c3f;
|
|
font-size: 44rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.origin {
|
|
margin-left: 14rpx;
|
|
color: #aab3af;
|
|
font-size: 24rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.sale-status {
|
|
margin-left: auto;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 22rpx;
|
|
background: #e8fbf3;
|
|
color: #1aa376;
|
|
font-size: 22rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.card-share-btn {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin: 0 0 0 12rpx;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
border-radius: 24rpx;
|
|
background: #e8fbf3;
|
|
line-height: 48rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.card-share-btn::after {
|
|
border: 0;
|
|
}
|
|
|
|
.title {
|
|
margin-top: 16rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.meta {
|
|
margin-top: 14rpx;
|
|
display: flex;
|
|
gap: 22rpx;
|
|
color: #8a9692;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.tag-list {
|
|
margin-top: 18rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.tag-list text {
|
|
padding: 6rpx 14rpx;
|
|
border-radius: 16rpx;
|
|
background: #f0faf6;
|
|
color: #23a77b;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 22rpx;
|
|
color: #31443e;
|
|
font-size: 27rpx;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.rich-content {
|
|
display: block;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.rich-content ::v-deep img,
|
|
.rich-content ::v-deep image {
|
|
max-width: 100%;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.seller-card {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar,
|
|
.comment-item image {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
border-radius: 50%;
|
|
background: #edf3ef;
|
|
}
|
|
|
|
.seller-main {
|
|
flex: 1;
|
|
margin-left: 18rpx;
|
|
}
|
|
|
|
.seller-name {
|
|
font-size: 28rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.seller-name text {
|
|
margin-left: 8rpx;
|
|
color: #1aa376;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.online,
|
|
.seller-tip {
|
|
margin-top: 8rpx;
|
|
color: #8a9692;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.contact-card {
|
|
padding-bottom: 12rpx;
|
|
}
|
|
|
|
.contact-row {
|
|
min-height: 78rpx;
|
|
margin-top: 18rpx;
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 18rpx;
|
|
background: #f4f8f6;
|
|
}
|
|
|
|
.contact-label {
|
|
width: 88rpx;
|
|
color: #73827d;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.contact-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: #223b35;
|
|
font-size: 27rpx;
|
|
font-weight: 800;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.contact-action {
|
|
margin-left: 16rpx;
|
|
color: #1aa376;
|
|
font-size: 24rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.section-head view {
|
|
color: #22aa7d;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.comment-item {
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.comment-main {
|
|
flex: 1;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.comment-name {
|
|
color: #72827d;
|
|
font-size: 23rpx;
|
|
}
|
|
|
|
.comment-name text,
|
|
.seller-badge {
|
|
margin-left: 8rpx;
|
|
padding: 2rpx 8rpx;
|
|
border-radius: 10rpx;
|
|
background: #e8fbf3;
|
|
color: #1aa376;
|
|
font-size: 18rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.comment-content {
|
|
margin-top: 8rpx;
|
|
font-size: 26rpx;
|
|
line-height: 38rpx;
|
|
}
|
|
|
|
.reply-list {
|
|
margin-top: 12rpx;
|
|
padding: 14rpx 16rpx;
|
|
border-radius: 16rpx;
|
|
background: #f4f8f6;
|
|
}
|
|
|
|
.reply-item {
|
|
margin-top: 8rpx;
|
|
color: #40544e;
|
|
font-size: 23rpx;
|
|
line-height: 36rpx;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.reply-item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.reply-name {
|
|
color: #1d8f70;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.reply-target {
|
|
color: #7f8d88;
|
|
}
|
|
|
|
.reply-action {
|
|
margin-left: 14rpx;
|
|
color: #22aa7d;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.reply-delete {
|
|
color: #ef4c3f;
|
|
}
|
|
|
|
.comment-actions {
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
gap: 18rpx;
|
|
color: #9aa8a4;
|
|
font-size: 21rpx;
|
|
}
|
|
|
|
.empty {
|
|
padding: 50rpx 0;
|
|
color: #9aa8a4;
|
|
text-align: center;
|
|
}
|
|
|
|
.comment-popup {
|
|
width: 620rpx;
|
|
padding: 44rpx 36rpx 34rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 32rpx;
|
|
background: #fff;
|
|
box-shadow: 0 28rpx 70rpx rgba(0, 35, 28, 0.16);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.comment-popup-title {
|
|
color: #17362f;
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
}
|
|
|
|
.comment-popup-desc {
|
|
margin-top: 12rpx;
|
|
color: #7a8782;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.comment-popup-desc text {
|
|
margin-left: 16rpx;
|
|
color: #18a878;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.comment-popup-input {
|
|
min-height: 170rpx;
|
|
margin-top: 32rpx;
|
|
padding: 20rpx 24rpx;
|
|
border-radius: 24rpx;
|
|
background: #f3f7f5;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.comment-popup-input textarea {
|
|
width: 100%;
|
|
height: 150rpx;
|
|
min-height: 150rpx;
|
|
color: #253b35;
|
|
font-size: 28rpx;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.comment-popup-actions {
|
|
display: flex;
|
|
margin-top: 34rpx;
|
|
gap: 18rpx;
|
|
}
|
|
|
|
.comment-popup-cancel,
|
|
.comment-popup-confirm {
|
|
flex: 1;
|
|
height: 76rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 900;
|
|
line-height: 76rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.comment-popup-cancel {
|
|
background: #f3f6f4;
|
|
color: #777;
|
|
}
|
|
|
|
.comment-popup-confirm {
|
|
background: linear-gradient(135deg, #37c990, #19af7e);
|
|
color: #fff;
|
|
box-shadow: 0 12rpx 26rpx rgba(25, 175, 126, 0.18);
|
|
}
|
|
|
|
.comment-popup-confirm.disabled {
|
|
opacity: .62;
|
|
}
|
|
|
|
.bottom-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 20;
|
|
padding: 14rpx 24rpx calc(14rpx + env(safe-area-inset-bottom));
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
box-shadow: 0 -8rpx 22rpx rgba(20, 60, 48, 0.06);
|
|
}
|
|
|
|
.bar-action {
|
|
width: 92rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #59706a;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.consult-btn {
|
|
flex: 1;
|
|
height: 82rpx;
|
|
margin-left: 20rpx;
|
|
border-radius: 44rpx;
|
|
background: linear-gradient(135deg, #37c990, #19af7e);
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
line-height: 82rpx;
|
|
}
|
|
|
|
.page-like-effect {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.page-like-heart {
|
|
position: absolute;
|
|
bottom: -230rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
opacity: 0;
|
|
transform-origin: center;
|
|
animation-duration: 2600ms;
|
|
animation-timing-function: cubic-bezier(.14, .66, .22, 1);
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.page-like-heart-shape {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 72%;
|
|
height: 72%;
|
|
background: linear-gradient(135deg, rgba(255, 176, 207, .72), rgba(255, 88, 148, .36));
|
|
border-radius: 18rpx 18rpx 10rpx 18rpx;
|
|
box-shadow:
|
|
0 18rpx 42rpx rgba(255, 104, 164, .28),
|
|
inset 14rpx 18rpx 28rpx rgba(255, 255, 255, .32);
|
|
filter: blur(.2rpx);
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
|
|
.page-like-heart-shape::before,
|
|
.page-like-heart-shape::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: inherit;
|
|
box-shadow: inherit;
|
|
}
|
|
|
|
.page-like-heart-shape::before {
|
|
left: -50%;
|
|
top: 0;
|
|
}
|
|
|
|
.page-like-heart-shape::after {
|
|
left: 0;
|
|
top: -50%;
|
|
}
|
|
|
|
.page-like-heart--one { width: 154rpx; height: 154rpx; animation-name: pageHeartFloatOne; }
|
|
.page-like-heart--two { width: 112rpx; height: 112rpx; animation-name: pageHeartFloatTwo; }
|
|
.page-like-heart--three { width: 188rpx; height: 188rpx; animation-name: pageHeartFloatThree; }
|
|
.page-like-heart--four { width: 92rpx; height: 92rpx; animation-name: pageHeartFloatFour; }
|
|
.page-like-heart--five { width: 136rpx; height: 136rpx; animation-name: pageHeartFloatFive; }
|
|
.page-like-heart--six { width: 82rpx; height: 82rpx; animation-name: pageHeartFloatSix; }
|
|
.page-like-heart--seven { width: 166rpx; height: 166rpx; animation-name: pageHeartFloatSeven; }
|
|
.page-like-heart--eight { width: 104rpx; height: 104rpx; animation-name: pageHeartFloatEight; }
|
|
|
|
.page-like-heart--three .page-like-heart-shape,
|
|
.page-like-heart--seven .page-like-heart-shape {
|
|
background: linear-gradient(135deg, rgba(255, 198, 220, .66), rgba(255, 103, 158, .28));
|
|
filter: blur(1rpx);
|
|
}
|
|
|
|
.page-like-heart--four .page-like-heart-shape,
|
|
.page-like-heart--six .page-like-heart-shape,
|
|
.page-like-heart--eight .page-like-heart-shape {
|
|
background: linear-gradient(135deg, rgba(255, 211, 226, .74), rgba(255, 126, 174, .32));
|
|
}
|
|
|
|
@keyframes pageHeartFloatOne {
|
|
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.68) rotate(-8deg); }
|
|
14% { opacity: .82; transform: translate3d(-18rpx, -92rpx, 0) scale(1) rotate(5deg); }
|
|
62% { opacity: .52; transform: translate3d(-72rpx, -370rpx, 0) scale(.94) rotate(-12deg); }
|
|
100% { opacity: 0; transform: translate3d(-112rpx, -650rpx, 0) scale(.72) rotate(-22deg); }
|
|
}
|
|
|
|
@keyframes pageHeartFloatTwo {
|
|
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.62) rotate(6deg); }
|
|
16% { opacity: .7; transform: translate3d(28rpx, -112rpx, 0) scale(.92) rotate(-6deg); }
|
|
64% { opacity: .44; transform: translate3d(96rpx, -350rpx, 0) scale(.82) rotate(12deg); }
|
|
100% { opacity: 0; transform: translate3d(146rpx, -600rpx, 0) scale(.62) rotate(22deg); }
|
|
}
|
|
|
|
@keyframes pageHeartFloatThree {
|
|
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.64) rotate(-4deg); }
|
|
12% { opacity: .64; transform: translate3d(8rpx, -86rpx, 0) scale(.94) rotate(7deg); }
|
|
60% { opacity: .38; transform: translate3d(-36rpx, -420rpx, 0) scale(.78) rotate(-12deg); }
|
|
100% { opacity: 0; transform: translate3d(-68rpx, -710rpx, 0) scale(.58) rotate(-24deg); }
|
|
}
|
|
|
|
@keyframes pageHeartFloatFour {
|
|
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.58) rotate(12deg); }
|
|
18% { opacity: .68; transform: translate3d(-26rpx, -124rpx, 0) scale(.86) rotate(-6deg); }
|
|
66% { opacity: .4; transform: translate3d(-112rpx, -320rpx, 0) scale(.72) rotate(14deg); }
|
|
100% { opacity: 0; transform: translate3d(-166rpx, -560rpx, 0) scale(.54) rotate(26deg); }
|
|
}
|
|
|
|
@keyframes pageHeartFloatFive {
|
|
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.64) rotate(-10deg); }
|
|
14% { opacity: .72; transform: translate3d(34rpx, -96rpx, 0) scale(.96) rotate(6deg); }
|
|
62% { opacity: .44; transform: translate3d(68rpx, -380rpx, 0) scale(.78) rotate(-10deg); }
|
|
100% { opacity: 0; transform: translate3d(104rpx, -650rpx, 0) scale(.58) rotate(-20deg); }
|
|
}
|
|
|
|
@keyframes pageHeartFloatSix {
|
|
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.52) rotate(8deg); }
|
|
20% { opacity: .64; transform: translate3d(6rpx, -132rpx, 0) scale(.8) rotate(-8deg); }
|
|
68% { opacity: .36; transform: translate3d(44rpx, -290rpx, 0) scale(.64) rotate(12deg); }
|
|
100% { opacity: 0; transform: translate3d(70rpx, -500rpx, 0) scale(.48) rotate(22deg); }
|
|
}
|
|
|
|
@keyframes pageHeartFloatSeven {
|
|
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.62) rotate(-8deg); }
|
|
13% { opacity: .62; transform: translate3d(-28rpx, -82rpx, 0) scale(.88) rotate(6deg); }
|
|
58% { opacity: .38; transform: translate3d(-86rpx, -390rpx, 0) scale(.72) rotate(-12deg); }
|
|
100% { opacity: 0; transform: translate3d(-132rpx, -680rpx, 0) scale(.52) rotate(-22deg); }
|
|
}
|
|
|
|
@keyframes pageHeartFloatEight {
|
|
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.56) rotate(10deg); }
|
|
18% { opacity: .66; transform: translate3d(38rpx, -118rpx, 0) scale(.84) rotate(-8deg); }
|
|
64% { opacity: .4; transform: translate3d(122rpx, -338rpx, 0) scale(.68) rotate(14deg); }
|
|
100% { opacity: 0; transform: translate3d(178rpx, -580rpx, 0) scale(.5) rotate(26deg); }
|
|
}
|
|
|
|
.bottom-space {
|
|
height: 170rpx;
|
|
}
|
|
</style>
|
|
|