zyronon
1 year ago
4 changed files with 490 additions and 70 deletions
@ -0,0 +1,360 @@
@@ -0,0 +1,360 @@
|
||||
<template> |
||||
<div class="goods-detail base-page1"> |
||||
<header> |
||||
<Icon |
||||
@click="$back()" |
||||
icon="material-symbols-light:arrow-back-ios-new"/> |
||||
<div class="option" @click="nav('/home/search')"> |
||||
<Icon icon="jam:search"/> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="slide-imgs"> |
||||
<SlideHorizontal v-model:index="state.index"> |
||||
<SlideItem v-for="item in state.detail.note_card?.image_list"> |
||||
<img :src="_checkImgUrl(item.info_list?.[0]?.url)" alt=""> |
||||
</SlideItem> |
||||
</SlideHorizontal> |
||||
|
||||
<div class="indicator-bar" v-if="state.detail.note_card?.image_list?.length > 1"> |
||||
<div class="indicator" |
||||
:class="[i <= state.index+1 && 'active']" |
||||
v-for="i in state.detail.note_card?.image_list?.length"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<div class="shop"> |
||||
<header> |
||||
<img class="avatar" :src="_checkImgUrl(state.detail.note_card?.user?.avatar)"/> |
||||
<div class="right"> |
||||
<div class="name">{{ state.detail.note_card.user.nick_name }}</div> |
||||
<div class="r">关注</div> |
||||
</div> |
||||
</header> |
||||
<div class="desc"> |
||||
{{ state.detail.note_card?.display_title }} |
||||
</div> |
||||
<div class="date">{{ state.detail.note_card.createTime }}</div> |
||||
</div> |
||||
|
||||
<div class="card comments"> |
||||
<header> |
||||
<span class="l">评论 {{ state.detail.note_card.comment_list.length }}</span> |
||||
<div class="r"> |
||||
<span>查看全部</span> |
||||
<Icon class="arrow" icon="mingcute:right-line"/> |
||||
</div> |
||||
</header> |
||||
<div class="comment" v-for="i in state.detail.note_card.comment_list.slice(0,2)"> |
||||
<img src="https://cdn.seovx.com/?mom=302" alt="" class="avatar"> |
||||
<span> |
||||
{{ i.name }}：{{ i.text }} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="toolbar"> |
||||
<div class="input-wrap"> |
||||
说点什么... |
||||
</div> |
||||
<div class="options"> |
||||
<div class="option"> |
||||
<Icon icon="solar:heart-linear"/> |
||||
<div class="text">{{ state.detail.note_card?.interact_info?.liked_count }}</div> |
||||
</div> |
||||
<div class="option"> |
||||
<Icon icon="mage:message-dots-round" class="icon"/> |
||||
<div class="text">{{ state.detail.note_card.comment_list.length }}</div> |
||||
</div> |
||||
<div class="option"> |
||||
<Icon icon="mage:star"/> |
||||
<div class="text">{{ state.detail.note_card?.interact_info?.collect_count }}</div> |
||||
</div> |
||||
<div class="option"> |
||||
<Icon icon="ph:share-fat-light"/> |
||||
<div class="text">{{ state.detail.note_card?.interact_info?.share_count }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import SlideHorizontal from "@/components/slide/SlideHorizontal.vue"; |
||||
import SlideItem from "@/components/slide/SlideItem.vue"; |
||||
import {onMounted, reactive} from "vue"; |
||||
import {useNav} from "@/utils/hooks/useNav"; |
||||
import {Icon} from "@iconify/vue"; |
||||
import {useBaseStore} from "@/store/pinia"; |
||||
import {_checkImgUrl, cloneDeep} from "@/utils"; |
||||
import Mock from 'mockjs' |
||||
|
||||
const nav = useNav() |
||||
const store = useBaseStore() |
||||
|
||||
defineOptions({ |
||||
name: 'Album-Detail' |
||||
}) |
||||
|
||||
const state = reactive({ |
||||
detail: { |
||||
"id": "", |
||||
"note_card": { |
||||
"interact_info": {}, |
||||
"cover": {}, |
||||
"image_list": [], |
||||
"display_title": "", |
||||
"user": {}, |
||||
comment_list: [], |
||||
createTime: '' |
||||
} |
||||
}, |
||||
index: 0, |
||||
}) |
||||
|
||||
onMounted(() => { |
||||
state.detail = cloneDeep(store.routeData) |
||||
let data = Mock.mock({ |
||||
'comment_list|3-50': [{ |
||||
name: '@cname', |
||||
text: '@cparagraph(3)' |
||||
}] |
||||
}) |
||||
state.detail.note_card.comment_list = data.comment_list |
||||
state.detail.note_card.createTime = Mock.Random.date('MM-dd') |
||||
state.detail.note_card.interact_info.collect_count = Mock.Random.integer(60, 3000) |
||||
state.detail.note_card.interact_info.share_count = Mock.Random.integer(60, 3000) |
||||
console.log('sta', state.detail) |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "@/assets/less/index.less"; |
||||
|
||||
.goods-detail { |
||||
background: var(--color-message); |
||||
color: white; |
||||
font-size: 14rem; |
||||
@c: #a2a2a2; |
||||
@c2: #c0c0c0; |
||||
@red: rgb(248, 38, 74); |
||||
|
||||
& > header { |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100vw; |
||||
z-index: 9; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 15rem; |
||||
box-sizing: border-box; |
||||
|
||||
svg { |
||||
font-size: 20rem; |
||||
background: rgba(176, 176, 176, 0.4); |
||||
padding: 5rem; |
||||
color: white; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
|
||||
.slide-imgs { |
||||
position: relative; |
||||
height: 55vh; |
||||
|
||||
img { |
||||
height: 100%; |
||||
width: 100%; |
||||
object-fit: cover; |
||||
touch-action: none; |
||||
} |
||||
|
||||
.indicator-bar { |
||||
position: absolute; |
||||
bottom: 5rem; |
||||
left: 3vw; |
||||
width: 94vw; |
||||
display: flex; |
||||
gap: 5rem; |
||||
|
||||
.indicator { |
||||
background: rgba(162, 160, 160, 0.5); |
||||
height: 3rem; |
||||
flex: 1; |
||||
border-radius: 2rem; |
||||
} |
||||
|
||||
.active { |
||||
background: rgba(250, 246, 246, 0.58); |
||||
} |
||||
} |
||||
|
||||
.index { |
||||
font-size: 12rem; |
||||
position: absolute; |
||||
padding: 3rem 10rem; |
||||
border-radius: 15rem; |
||||
background: rgba(91, 89, 89, 0.5); |
||||
right: 10rem; |
||||
bottom: 30rem; |
||||
color: white; |
||||
} |
||||
} |
||||
|
||||
.card { |
||||
margin-top: 15rem; |
||||
border-radius: 10rem; |
||||
padding: 10rem 15rem; |
||||
background: black; |
||||
} |
||||
|
||||
.arrow { |
||||
font-size: 16rem; |
||||
} |
||||
|
||||
.content { |
||||
padding: 15rem; |
||||
padding-bottom: 10vh; |
||||
border-radius: 16rem 16rem 0 0; |
||||
|
||||
.comments { |
||||
& > header { |
||||
margin-bottom: 16rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.l { |
||||
font-size: 15rem; |
||||
} |
||||
|
||||
.r { |
||||
color: gray; |
||||
font-size: 12rem; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
} |
||||
|
||||
.comment { |
||||
margin-bottom: 16rem; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 5rem; |
||||
|
||||
span { |
||||
display: inline-block; |
||||
white-space: nowrap; |
||||
flex: 1; |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
img { |
||||
border-radius: 50%; |
||||
width: 20rem; |
||||
height: 20rem; |
||||
} |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.shop { |
||||
& > header { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10rem; |
||||
|
||||
img { |
||||
width: 36rem; |
||||
height: 36rem; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.right { |
||||
flex: 1; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.name { |
||||
font-size: 16rem; |
||||
} |
||||
|
||||
.r { |
||||
border-radius: 4rem; |
||||
padding: 6rem 16rem; |
||||
background: var(--primary-btn-color); |
||||
font-size: 12rem; |
||||
color: white; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.desc { |
||||
margin-top: 10rem; |
||||
} |
||||
|
||||
.date { |
||||
font-size: 12rem; |
||||
margin-top: 10rem; |
||||
color: gray; |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.toolbar { |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: 100vw; |
||||
left: 0; |
||||
background: var(--color-message); |
||||
border-top: 1px solid rgba(white, .1); |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 8rem 10rem; |
||||
padding-right: 0; |
||||
box-sizing: border-box; |
||||
gap: 6rem; |
||||
|
||||
.input-wrap { |
||||
width: 110rem; |
||||
padding-left: 15rem; |
||||
height: 34rem; |
||||
border-radius: 30rem; |
||||
background: var(--second-btn-color-tran); |
||||
color: gray; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.options { |
||||
flex: 1; |
||||
display: flex; |
||||
|
||||
.option { |
||||
flex: 1; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
font-size: 13rem; |
||||
color: white; |
||||
|
||||
svg { |
||||
font-size: 24rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue