Browse Source

完善细节

pull/29/head
zyronon 2 years ago
parent
commit
78ea1cc5d8
  1. 122
      src/components/Comment.vue
  2. 2
      src/components/dialog/FromBottomDialog.vue
  3. 6
      src/components/slide/ItemToolbar.vue
  4. 8
      src/pages/home/components/IndicatorHome.vue
  5. 24
      src/utils/index.jsx

122
src/components/Comment.vue

@ -28,18 +28,20 @@ @@ -28,18 +28,20 @@
<div class="name">{{ item.name }}</div>
<div class="detail">{{ item.text }}</div>
<div class="time-wrapper">
<div class="time">{{ $time(item.time) }}</div>
<div class="reply-text">回复</div>
<div class="left">
<div class="time">{{ $time(item.time) }} · 上海</div>
<div class="reply-text">回复</div>
</div>
<div class="love" @click="loved(item)">
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
class="love-image">
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt=""
class="love-image">
<span>{{ formatNumber(item.loveNum) }}</span>
</div>
</div>
</div>
</div>
<div class="love" @click="loved(item)">
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
class="love-image">
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt=""
class="love-image">
<span>{{ formatNumber(item.loveNum) }}</span>
</div>
</div>
<div class="replies">
<div class="reply" v-for="child in item.children">
@ -54,17 +56,20 @@ @@ -54,17 +56,20 @@
</div>
<div class="detail">{{ child.text }}</div>
<div class="time-wrapper">
<div class="time">{{ $time(child.time) }}</div>
<div class="reply-text">回复</div>
<div class="left">
<div class="time">{{ $time(item.time) }} · 上海</div>
<div class="reply-text">回复</div>
</div>
<div class="love" @click="loved(item)">
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
class="love-image">
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt=""
class="love-image">
<span>{{ formatNumber(item.loveNum) }}</span>
</div>
</div>
</div>
</div>
<div class="love" @click="loved(child)">
<img v-if="child.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
class="love-image">
<img v-else src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
<span>{{ formatNumber(child.loveNum) }}</span>
</div>
</div>
<div class="more">
<div class="gang"></div>
@ -176,6 +181,9 @@ export default { @@ -176,6 +181,9 @@ export default {
isCall: false,
}
},
mounted() {
this.getData()
},
methods: {
send() {
this.comments.push({
@ -211,7 +219,7 @@ export default { @@ -211,7 +219,7 @@ export default {
text: '要么之前吴京说了一句话对一个小女孩说,以后别来娱乐圈',
loveNum: 9174,
isLoved: false,
time: '2021-08-24 20:25',
time: '2022-08-24 20:25',
},
{
id: '11',
@ -221,7 +229,7 @@ export default { @@ -221,7 +229,7 @@ export default {
text: '@nana max',
loveNum: 695,
isLoved: false,
time: '2021-08-24 20:29',
time: '2023-01-24 20:29',
},
{
id: '12',
@ -231,7 +239,7 @@ export default { @@ -231,7 +239,7 @@ export default {
text: '对对 我也刷到过这个视频',
loveNum: 1253,
isLoved: false,
time: '2021-08-24 20:59',
time: '2023-02-23 20:59',
},
]
},
@ -311,19 +319,6 @@ export default { @@ -311,19 +319,6 @@ export default {
// this.isCommenting = !this.isCommenting;
// console.log(666)
// }
$time(time) {
let date = new Date(time)
let now = new Date()
let day = now.getDate() - date.getDate()
let str = ''
if (day === 0) {
let hour = now.getHours() - date.getHours()
str = ` ${hour}小时前`
} else if (day === 1) str = `昨天${date.getHours()}:${date.getMinutes()}`
else if (day === 2) str = `前天${date.getHours()}:${date.getMinutes()}`
else str = time
return str
},
call() {
console.log(this.commit)
}
@ -359,21 +354,27 @@ export default { @@ -359,21 +354,27 @@ export default {
}
.comment {
width: 100%;
width: 100vw;
height: v-bind(height);
background: #fff;
z-index: 5;
border-radius: 10rem 10rem 0 0;
.wrapper {
width: 100%;
position: relative;
padding-top: 40rem;
padding-bottom: 60rem;
}
.items {
width: 100%;
.item {
width: 100%;
.main {
width: 100%;
padding: 5rem 0;
display: flex;
@ -435,12 +436,14 @@ export default { @@ -435,12 +436,14 @@ export default {
}
.content {
width: 100%;
display: flex;
flex: 1;
font-size: 14rem;
.comment-container {
width: 85%;
flex: 1;
margin-right: 20rem;
.name {
color: @second-text-color;
@ -465,35 +468,40 @@ export default { @@ -465,35 +468,40 @@ export default {
.time-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12rem;
.left {
display: flex;
.time {
color: #c4c3c3;
margin-right: 10rem;
}
.time {
color: #c4c3c3;
margin-right: 15rem;
.reply-text {
color: @second-text-color;
}
}
.reply-text {
.love {
color: @second-text-color;
display: flex;
align-items: center;
.love-image {
width: 18rem;
border-radius: 50%;
}
span {
font-size: 10rem;
word-break: keep-all;
}
}
}
}
}
.love {
color: @second-text-color;
text-align: center;
width: 30rem;
padding-right: 10rem;
.love-image {
width: 25rem;
border-radius: 50%;
}
span {
font-size: 10rem;
transform: translateY(-5rem);
}
}
}
}

2
src/components/dialog/FromBottomDialog.vue

@ -193,7 +193,7 @@ export default { @@ -193,7 +193,7 @@ export default {
z-index: 9;
position: fixed;
width: 100%;
overflow: auto;
overflow-y: auto;
padding-top: 24rem;
bottom: 0;
left: 0;

6
src/components/slide/ItemToolbar.vue

@ -75,12 +75,12 @@ function showComments() { @@ -75,12 +75,12 @@ function showComments() {
<span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
</div>
<!--TODO -->
<div class="message mb2r" @click.stop="showComments">
<img v-if="item.isCollect" src="@/assets/img/icon/components/video/star-full.png" alt="" class="message-image">
<div class="message mb2r" @click.stop="Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)">
<img v-if="props.item.isCollect" src="@/assets/img/icon/components/video/star-full.png" alt="" class="message-image">
<img v-else src="@/assets/img/icon/components/video/star.png" alt="" class="message-image">
<span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
</div>
<div v-if="!isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
<div v-if="!props.isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
<span>{{ Utils.formatNumber(props.item.share_count) }}</span>
</div>

8
src/pages/home/components/IndicatorHome.vue

@ -205,14 +205,6 @@ export default { @@ -205,14 +205,6 @@ export default {
transition: all .3s;
font-weight: bold;
&.isLight {
.tab{
&.active {
color: black!important;
}
}
}
.notice {
opacity: 0;
top: 0;

24
src/utils/index.jsx

@ -324,6 +324,30 @@ export default { @@ -324,6 +324,30 @@ export default {
return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
},
$time(time) {
let date = new dayjs(time)
let now = new dayjs()
let d = now.valueOf() - date.valueOf()
let str = ''
if (d < 1000 * 60) {
str = '刚刚'
} else if (d < 1000 * 60 * 60) {
str = `${(d / (1000 * 60)).toFixed()}分钟前`
} else if (d < 1000 * 60 * 60 * 24) {
str = `${(d / (1000 * 60 * 60)).toFixed()}小时前`
} else if (d < 1000 * 60 * 60 * 24 * 2) {
str = '1天前'
} else if (d < 1000 * 60 * 60 * 24 * 3) {
str = '2天前'
} else if (d < 1000 * 60 * 60 * 24 * 4) {
str = '3天前'
} else if (date.isSame(now, 'year')) {
str = dayjs(time).format('MM-DD')
} else {
str = dayjs(time).format('YYYY-MM-DD')
}
return str
},
$duration(v) {
if (!v) return '00:00'
let m = Math.floor(v / 60)

Loading…
Cancel
Save