MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化评论弹窗

Browse Source
This commit is contained in:
zyronon 2021-08-25 17:59:30 +08:00
parent 79ee099387
commit 185af77239
15 changed files with 678 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/img/icon/QQ.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539704183989" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35475" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M918.67136 594.22848c-15.26656-37.2352-35.32928-70.4064-56.28288-96.06016 9.82016-13.0304 16.0768-32.64256 16.0768-54.58176 0-30.01088-11.6992-55.65952-28.2112-66.07616 2.5792-16.48 3.92576-33.36448 3.92576-50.56128C854.17984 146.34752 706.68032 0 524.69888 0 342.8096 0 195.29728 146.34752 195.29728 326.94912c0 17.36064 1.37728 34.40128 4.00512 51.03104-16.14976 10.70976-27.50592 36.04736-27.50592 65.6064 0 17.15072 3.82592 32.88064 10.19392 45.15584-21.12512 22.8032-41.71392 52.03968-58.58048 85.6384-46.71104 93.10848-39.7376 187.2192-10.97088 202.54592 14.75584 7.85664 53.2352-16.82432 91.0272-62.62656 6.12992 53.89696 31.6352 103.09248 70.6688 142.68672-64.66816 19.12192-107.52768 56.8704-101.78432 95.18592 7.15392 48.41728 89.03808 79.4432 182.95552 69.31072 68.7296-7.44576 124.7936-34.87872 147.1232-68.04864 5.76256 0.25984 11.56352 0.39936 17.40416 0.39936 9.36832 0 18.63552-0.3584 27.79776-1.02016 22.82112 32.79872 76.86144 60.31616 142.4064 68.68992 91.05792 11.56864 169.87392-18.18624 175.99488-66.46912 4.90112-38.49088-37.76256-77.15968-101.35808-97.15072 37.82144-38.016 63.12192-84.98304 70.65984-136.51712 33.55904 45.888 67.87072 75.2 85.81888 71.25888C942.36288 787.97312 957.5232 689.01376 918.67136 594.22848z" p-id="35476" fill="#ffffff"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/img/icon/newicon/c38.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/img/icon/newicon/c50.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 851 B

1
src/assets/img/icon/qiangjing.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702199514" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10387" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M509.866667 896a106.773333 106.773333 0 0 1-104.384 85.333333H149.184A106.688 106.688 0 0 1 42.666667 874.816V618.517333a106.752 106.752 0 0 1 85.333333-104.405333V149.482667A106.816 106.816 0 0 1 234.816 42.666667h639.701333A106.816 106.816 0 0 1 981.333333 149.482667v639.701333A106.816 106.816 0 0 1 874.517333 896H509.866667z m2.133333-85.333333h362.517333c11.861333 0 21.482667-9.6 21.482667-21.482667V149.482667C896 137.621333 886.4 128 874.517333 128H234.816C222.954667 128 213.333333 137.6 213.333333 149.482667V512h192.149334A106.688 106.688 0 0 1 512 618.517333V810.666667zM128 618.517333v256.298667c0 11.541333 9.6 21.184 21.184 21.184h256.298667c11.541333 0 21.184-9.6 21.184-21.184V618.517333c0-11.541333-9.6-21.184-21.184-21.184H149.184c-11.541333 0-21.184 9.6-21.184 21.184z" fill="#000000" p-id="10388"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

1
src/assets/img/icon/qr_code.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702255514" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12890" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M384 128c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H170.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667V170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667h213.333333m0-42.666667H170.666667C123.733333 85.333333 85.333333 123.733333 85.333333 170.666667v213.333333c0 46.933333 38.4 85.333333 85.333334 85.333333h213.333333c46.933333 0 85.333333-38.4 85.333333-85.333333V170.666667c0-46.933333-38.4-85.333333-85.333333-85.333334zM853.333333 128c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H640c-23.466667 0-42.666667-19.2-42.666667-42.666667V170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667h213.333333m0-42.666667H640c-46.933333 0-85.333333 38.4-85.333333 85.333334v213.333333c0 46.933333 38.4 85.333333 85.333333 85.333333h213.333333c46.933333 0 85.333333-38.4 85.333334-85.333333V170.666667c0-46.933333-38.4-85.333333-85.333334-85.333334zM384 597.333333c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H170.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667V640c0-23.466667 19.2-42.666667 42.666667-42.666667h213.333333m0-42.666666H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v213.333333c0 46.933333 38.4 85.333333 85.333334 85.333334h213.333333c46.933333 0 85.333333-38.4 85.333333-85.333334V640c0-46.933333-38.4-85.333333-85.333333-85.333333zM748.8 917.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333V597.333333c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333v298.666667c0 12.8-10.666667 21.333333-21.333333 21.333333zM898.133333 917.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333V597.333333c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333334 21.333333v298.666667c0 12.8-10.666667 21.333333-21.333334 21.333333zM599.466667 917.333333c-12.8 0-21.333333-8.533333-21.333334-21.333333V597.333333c0-12.8 8.533333-21.333333 21.333334-21.333333s21.333333 8.533333 21.333333 21.333333v298.666667c0 12.8-10.666667 21.333333-21.333333 21.333333z" p-id="12891"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

1
src/assets/img/icon/sq-share-qqzone-01.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539704109094" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34711" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M959.312722 404.165016c0-9.907651 0-7.187703-9.907651-7.187703h-267.524986l-39.658231-70.61836-108.965738-209.4278h-19.84293l-99.06218 209.4278-39.654138 70.61836h-310.008567v4.496408l55.912428 39.654138 156.795069 138.79409-35.58138 317.240271c0 9.907651 2.035356 9.907651 21.846564 9.907651l258.654968-158.621671 258.109546 158.621671c9.93528 0 10.177803 0 20.085454-9.907651l-49.409317-317.240271 148.683321-127.548978 59.527768-48.207955z m-653.959176 303.975153l287.340288-234.193857-267.52908-45.853327h406.245398l-247.716848 224.286206 257.621429 55.759955h-435.961187z" p-id="34712" fill="#ffffff"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1006 B

1
src/assets/img/icon/wechat.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539703648430" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29219" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M692.313043 347.269565c11.130435 0 22.26087 0 35.617391 2.226087C696.765217 204.8 540.93913 95.721739 362.852174 95.721739c-198.121739 0-360.626087 135.791304-360.626087 307.2 0 100.173913 53.426087 180.313043 144.695652 242.643478L111.304348 756.869565l126.886957-62.330435c44.521739 8.904348 82.365217 17.808696 126.886957 17.808696 11.130435 0 22.26087 0 33.391304-2.226087-6.678261-24.486957-11.130435-48.973913-11.130435-75.686957C385.113043 476.382609 520.904348 347.269565 692.313043 347.269565L692.313043 347.269565zM498.643478 249.321739c26.713043 0 44.521739 17.808696 44.521739 44.521739 0 26.713043-17.808696 44.521739-44.521739 44.521739-26.713043 0-53.426087-17.808696-53.426087-44.521739C445.217391 267.130435 471.930435 249.321739 498.643478 249.321739L498.643478 249.321739zM244.869565 340.591304c-26.713043 0-53.426087-17.808696-53.426087-44.521739 0-26.713043 26.713043-44.521739 53.426087-44.521739 26.713043 0 44.521739 17.808696 44.521739 44.521739C291.617391 322.782609 273.808696 340.591304 244.869565 340.591304L244.869565 340.591304zM244.869565 340.591304" p-id="29220" fill="#ffffff"></path><path d="M1021.773913 629.982609c0-144.695652-144.695652-262.678261-307.2-262.678261-171.408696 0-307.2 117.982609-307.2 262.678261 0 144.695652 135.791304 262.678261 307.2 262.678261 35.617391 0 71.234783-8.904348 109.078261-17.808696l97.947826 53.426087-26.713043-91.269565C968.347826 783.582609 1021.773913 710.121739 1021.773913 629.982609L1021.773913 629.982609zM616.626087 583.234783c-17.808696 0-35.617391-17.808696-35.617391-35.617391 0-17.808696 17.808696-35.617391 35.617391-35.617391 26.713043 0 44.521739 17.808696 44.521739 35.617391C661.147826 565.426087 643.33913 583.234783 616.626087 583.234783L616.626087 583.234783zM814.747826 583.234783c-17.808696 0-35.617391-17.808696-35.617391-35.617391 0-17.808696 17.808696-35.617391 35.617391-35.617391 26.713043 0 44.521739 17.808696 44.521739 35.617391C859.269565 565.426087 841.46087 583.234783 814.747826 583.234783L814.747826 583.234783zM814.747826 583.234783" p-id="29221" fill="#ffffff"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

1
src/assets/scss/color.less
View File

@ -5,7 +5,6 @@
@second-btn-color-tran: rgba(58, 58, 70, .4);
@line-color: rgb(37, 45, 66);
@primary-btn-color: rgb(252, 47, 86);
@disable-primary-btn-color: rgba(252, 47, 86, .5);

34
src/components/AutoInput.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="edit" contenteditable @input="changeText">{{ innerText }}</div>
<div ref="input"
:placeholder="placeholder"
class="auto-input"
contenteditable
@input="changeText">{{ innerText }}
</div>
</template>
<script>
@ -7,6 +12,13 @@ export default {
name: "AutoInput",
props: {
modelValue: String,
placeholder: {
type: String,
default: '留下你的精彩评论吧'
}
},
mounted() {
// this.$refs.input.setAttribute("placeholder", "改变")
},
data: function () {
return {
@ -21,27 +33,27 @@ export default {
}
</script>
<style scoped>
.edit {
<style scoped lang="less">
.auto-input {
width: 100%;
max-height: 70px;
background: #eee;
max-height: 7rem;
overflow-y: scroll;
padding: 8px 10px;
border-radius: 30px;
padding: 0 .5rem;
outline: none;
}
.edit::-webkit-scrollbar {
.auto-input::-webkit-scrollbar {
width: 0 !important
}
.edit:empty::before {
content: "留下你的精彩评论吧";
.auto-input:empty::before {
/*content: "留下你的精彩评论吧";*/
content: attr(placeholder);
color: #999999;
}
.edit:focus::before {
.auto-input:focus::before {
content: none;
}
</style>

472
src/components/Comment.vue
View File

@ -1,59 +1,244 @@
<template>
<transition name="comment">
<div class="comment f14" v-if="isCommenting">
<div class="title mt1r">
<p>2.7w条评论</p>
<back mode="dark" img="close" direction="right" @click.stop="$emit('update:is-commenting',false)"/>
</div>
<div class="items">
<div class="item pl1r pr1r mb1r oh"
v-for="item in 2"
>
<div class="content pull-left ">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">@ttentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
<div class="time mt10p">10-02</div>
<div class="comment" v-if="isCommenting">
<div class="wrapper">
<div class="title">
<p>2.7w条评论</p>
<back mode="dark" img="close" direction="right" @click.stop="$emit('update:is-commenting',false)"/>
</div>
<div class="items">
<div class="item" v-for="item in comments">
<div class="main" v-longpress="e => showOptions(item)">
<div class="content">
<img :src="item.avatar" alt="" class="head-image">
<div class="comment-container">
<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>
</div>
</div>
<div class="love" @click="loved(item)">
<img v-if="item.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>{{ $likeNum(item.loveNum) }}</span>
</div>
</div>
<div class="replies">
<div class="reply" v-for="child in item.children">
<div class="content" v-longpress="e => showOptions(child)">
<img :src="child.avatar" alt="" class="head-image">
<div class="comment-container">
<div class="name">
{{ child.name }}
<div class="reply-user" v-if="child.replay"></div>
{{ child.replay }}
</div>
<div class="detail">{{ child.text }}</div>
<div class="time-wrapper">
<div class="time">{{ $time(child.time) }}</div>
<div class="reply-text">回复</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>{{ $likeNum(child.loveNum) }}</span>
</div>
</div>
<div class="more">
<div class="gang"></div>
<span>展开更多回复</span>
<div class="arrow"></div>
</div>
</div>
</div>
<div class="love pull-right">
<img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
<p class="no-more">暂时没有更多了</p>
</div>
</div>
<Mask v-if="isInput"></Mask>
<div class="input-toolbar">
<div class="call-friend">
<div class="friend" v-for="item in friends" @click="item.select = !item.select">
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="item.avatar" alt="">
<span>{{ item.name }}</span>
<img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
</div>
</div>
<p class="no-more">暂时没有更多了</p>
</div>
<div class="input-comment">
<AutoInput v-model="commit"></AutoInput>
<div class="options">
<img src="../assets/img/icon/add.svg" alt="" @click="call">
<img src="../assets/img/icon/add.svg" alt="">
<img src="../assets/img/icon/add.svg" alt="">
<div class="toolbar">
<div class="input-wrapper">
<AutoInput v-model="commit"></AutoInput>
<div class="right">
<img src="../assets/img/icon/message/call.png" alt="" class="camera">
<img src="../assets/img/icon/message/emoji-black.png" alt="">
</div>
</div>
<img v-if="commit" src="../assets/img/icon/message/up.png" alt="">
</div>
</div>
<ConfirmDialog
title="私信给"
ok-text="发送"
v-model:visible="showPrivateChat"
>
<div class="private-chat">
</div>
</ConfirmDialog>
</div>
</transition>
</template>
<script>
import AutoInput from "./AutoInput";
import ConfirmDialog from "./dialog/ConfirmDialog";
import {mapState} from "vuex";
export default {
name: "Comment",
components: {AutoInput},
components: {AutoInput, ConfirmDialog},
props: ['isCommenting'],
computed: {
...mapState(['friends'])
},
data() {
return {
commit: ''
commit: '',
comments: [
{
id: '1',
avatar: require('../assets/img/icon/avatar/1.png'),
name: '彭雨晏',
text: '这到底是怎么了？艺人一个接一个的出事',
loveNum: 57000,
isLoved: false,
time: '2021-08-24 20:10',
children: [
{
id: '10',
avatar: require('../assets/img/icon/avatar/2.png'),
name: 'sugar少吃一点',
replay: '',
text: '要么之前吴京说了一句话对一个小女孩说，以后别来娱乐圈',
loveNum: 9174,
isLoved: false,
time: '2021-08-24 20:25',
},
{
id: '11',
avatar: require('../assets/img/icon/avatar/3.png'),
name: '我不吃晚饭了',
replay: 'sugar少吃一点',
text: '@nana max',
loveNum: 695,
isLoved: false,
time: '2021-08-24 20:29',
},
{
id: '12',
avatar: require('../assets/img/icon/avatar/4.png'),
name: '我劝你善良',
replay: 'sugar少吃一点',
text: '对对 我也刷到过这个视频',
loveNum: 1253,
isLoved: false,
time: '2021-08-24 20:59',
},
]
},
{
id: '2',
avatar: require('../assets/img/icon/avatar/4.png'),
name: '成都旅行',
text: '开车回来4个小时，爬山两小时，如果当天天气好，你一定会喜欢上这里，是真的美！一日游',
loveNum: 27,
isLoved: false,
time: '2021-08-24 20:33',
children: [
{
id: '20',
avatar: require('../assets/img/icon/avatar/4.png'),
name: '成都旅行',
replay: '',
text: '甘海子，汶川转经楼村',
loveNum: 32,
isLoved: false,
time: '2021-08-24 20:34',
},
{
id: '21',
avatar: require('../assets/img/icon/avatar/5.png'),
name: 'August',
replay: '成都旅行',
text: '@NickyOO @AW%',
loveNum: 0,
isLoved: false,
time: '2021-08-25 03:29',
},
{
id: '22',
avatar: require('../assets/img/icon/avatar/6.png'),
name: '用户121342411',
replay: '成都旅行',
text: '自己可以开私家车进去不',
loveNum: 1,
isLoved: false,
time: '2021-08-25 07:29',
},
]
}
],
options: [
{id: 1, name: '私信回复'},
{id: 2, name: '复制'},
{id: 3, name: '搜一搜'},
{id: 4, name: '举报'},
],
selectRow: {},
showPrivateChat: false,
isInput: true
}
},
methods: {
loved(row) {
if (row.isLoved) {
row.loveNum--
} else {
row.loveNum++
}
row.isLoved = !row.isLoved
},
showOptions(row) {
this.$showSelectDialog(this.options, e => {
if (e.id === 1) {
this.selectRow = row
this.showPrivateChat = true
}
})
},
// showComment() {
// 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 = date
return str
},
call() {
console.log(this.commit)
}
@ -62,28 +247,31 @@ export default {
</script>
<style lang="less" scoped>
@import "../assets/scss/index";
.comment {
position: fixed;
/*top: 200px;*/
height: 70vh;
width: 100%;
bottom: 0;
background: #fff;
z-index: 5;
border-radius: 10px 10px 0 0;
border-radius: 1rem 1rem 0 0;
.title {
position: relative;
margin: 1.5rem 0;
p {
font-size: 1.2rem;
text-align: center;
}
img {
width: 15px;
height: 15px;
width: 1.3rem;
height: 1.3rem;
position: absolute;
right: 20px;
right: 2rem;
top: 0;
}
}
@ -93,37 +281,125 @@ export default {
height: 60vh;
.item {
.head-image {
width: 40px;
border-radius: 50%;
float: left;
}
.content {
float: left;
width: 85%;
.main {
padding: .5rem 0;
display: flex;
.head-image {
width: 15%;
&:active {
background: #53535321;
}
.comment-container {
width: 80%;
.head-image {
margin-left: 1.5rem;
margin-right: 1rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
}
}
.time {
color: gray;
.replies {
padding-left: 5.5rem;
.reply {
padding: .5rem 0 .5rem .5rem;
display: flex;
&:active {
background: #53535321;
}
.head-image {
margin-right: 1rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
}
}
.more {
margin: .5rem;
display: flex;
align-items: center;
color: @second-text-color;
.gang {
background: #d5d5d5;
width: 2rem;
margin-right: 1rem;
height: 1px;
}
.arrow {
margin-left: .5rem;
margin-top: .8rem;
width: 0;
height: 0;
border: .5rem solid transparent;
border-top: .6rem solid @second-text-color;
}
}
}
.content {
display: flex;
flex: 1;
font-size: 1.4rem;
.comment-container {
width: 85%;
.name {
color: @second-text-color;
margin-bottom: .5rem;
display: flex;
align-items: center;
.reply-user {
margin-left: .5rem;
width: 0;
height: 0;
border: .5rem solid transparent;
border-left: .6rem solid gray;
}
}
.detail {
margin-bottom: .5rem;
}
.time-wrapper {
display: flex;
.time {
color: #c4c3c3;
margin-right: 1.5rem;
}
.reply-text {
color: @second-text-color;
}
}
}
}
.love {
color: @second-text-color;
text-align: center;
width: 3rem;
padding-right: 1rem;
.love-image {
width: 30px;
width: 2.5rem;
border-radius: 50%;
}
span {
transform: translateY(-.5rem);
}
}
}
@ -134,23 +410,95 @@ export default {
}
}
.input-comment {
padding: 10px;
border-top: 1px solid #e2e1e1;
display: flex;
align-items: center;
.options {
@normal-bg-color: rgb(35, 38, 47);
@chat-bg-color: rgb(105, 143, 244);
.input-toolbar {
border-radius: 1rem 1rem 0 0;
background: white;
position: fixed;
width: 100vw;
bottom: 0;
z-index: 3;
padding-top: 3rem;
@space-width: 1.8rem;
@icon-width: 4.8rem;
.call-friend {
overflow-x: scroll;
display: flex;
padding-right: @space-width;
.friend {
width: @icon-width;
position: relative;
margin-left: @space-width;
margin-bottom: @space-width;
font-size: 1rem;
display: flex;
flex-direction: column;
align-items: center;
.avatar {
width: @icon-width;
height: @icon-width;
border-radius: 50%;
}
span {
margin-top: .5rem;
text-align: center;
width: @icon-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.checked {
position: absolute;
top: @icon-width - 1.5;
right: -2px;
width: 2rem;
height: 2rem;
border-radius: 50%;
}
}
}
.toolbar {
@icon-width: 2.5rem;
display: flex;
align-items: center;
padding: 1rem 1.5rem;
border-top: 1px solid #e2e1e1;
.input-wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: .5rem 1rem;
background: #eee;
border-radius: 2rem;
.right {
display: flex;
align-items: center;
}
.auto-input {
width: calc(100vw - 18rem);
}
}
img {
width: 20px;
height: 20px;
margin: 0 5px;
&:nth-last-child(1) {
margin-right: 0;
}
width: @icon-width;
height: @icon-width;
border-radius: 50%;
margin-left: 1.5rem;
}
}
}

11
src/components/Share.vue
View File

@ -6,9 +6,9 @@
<back mode="light" img="close" direction="right" @click="closeShare"></back>
</div>
<div class="friends ">
<div class="friend " v-for="item in 10">
<img src="../assets/img/icon/head-image.jpeg" alt="">
<span>ttenu</span>
<div class="friend " v-for="item in friends">
<img :src="item.avatar" alt="">
<span>{{ item.name }}</span>
</div>
<div class="more">
<back mode="light" direction="right"></back>
@ -101,9 +101,14 @@
</template>
<script>
import {mapState} from "vuex";
export default {
name: "Share",
props: ['isSharing'],
computed: {
...mapState(['friends'])
},
methods: {
closeShare() {
this.$emit("update:is-sharing", false)

17
src/components/dialog/ConfirmDialog.vue
View File

@ -1,13 +1,14 @@
<template>
<div class="ConfirmDialog " @click="$emit('dismiss')">
<div class="ConfirmDialog " @click="$emit('dismiss')" v-if="visible">
<div class="content" @click.stop="stop">
<div class="body">
<div class="title" v-if="title">{{ title }}</div>
<div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div>
</div>
<slot></slot>
<div class="footer">
<div class="cancel" :class="cancelTextColor" @click.stop="$emit('cancel')">{{ cancelText }}</div>
<div class="ok" @click.stop="$emit('ok')">{{ okText }}</div>
<div class="cancel" :class="cancelTextColor" @click.stop="cancel">{{ cancelText }}</div>
<div class="ok" @click.stop="ok">{{ okText }}</div>
</div>
</div>
</div>
@ -18,7 +19,7 @@ export default {
props: {
visible: {
type: Boolean,
default: false
default: true
},
title: {
type: String,
@ -62,6 +63,14 @@ export default {
},
methods: {
stop() {
},
ok() {
this.$emit('ok')
this.$emit('update:visible', false)
},
cancel() {
this.$emit('cancel')
this.$emit('update:visible', false)
}
}
}

169
src/store/index.js
View File

@ -23,7 +23,172 @@ const store = Vuex.createStore({
education: null,
displayType: enums.DISPLAY_TYPE.ALL,
}
}
},
friends: [
{
avatar: require('../assets/img/icon/avatar/1.png'),
name: '倒影着稚嫩的少年',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/2.png'),
name: '冒安志',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/3.png'),
name: '凌依晨',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/4.png'),
name: '蔡傲安',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/5.png'),
name: '甫韦茹',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/6.png'),
name: '马佳婉清',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/7.png'),
name: '富察昕昕',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/8.png'),
name: '章昊苍',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/9.png'),
name: '买易槐',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/10.png'),
name: '阎韶丽',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/11.png'),
name: '倒影着稚嫩的少年',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/12.png'),
name: '思念一直在',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/13.png'),
name: '幸福泡泡',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/14.png'),
name: '原味青春',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/15.png'),
name: '℉阳光下的小情绪',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/16.png'),
name: '看，熟悉旳风景',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/17.png'),
name: '心若向阳无谓伤悲',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/18.png'),
name: '蓝天下的迷彩?',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/19.png'),
name: '◇、_保持微笑ゞ',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/20.png'),
name: '浅唱↘我们的歌',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/21.png'),
name: 'dear°学会微笑',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/22.png'),
name: '〤伱的微笑',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/23.png'),
name: '一只喵的旅行。',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/24.png'),
name: '为你锁住心',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/25.png'),
name: '一起走过的日子°',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/26.png'),
name: '‘心’之天空',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
{
avatar: require('../assets/img/icon/avatar/27.png'),
name: '好◇°我会Yi直在●',
lastLoginTime: '2021-08-25 12:12:12',
select:false
},
]
},
mutations: {
setUserinfo(store, val) {
@ -31,7 +196,7 @@ const store = Vuex.createStore({
},
setMaskDialog(store, val) {
store.maskDialog = val.state
if (val.mode){
if (val.mode) {
store.maskDialogMode = val.mode
}
}

5
src/utils/global-methods.js
View File

@ -232,10 +232,11 @@ export default {
return Config.filePreview + url
},
$likeNum(num) {
if (num < 1000) {
if (!num) return
if (num < 10000) {
return num
} else {
return parseInt(num / 10000) + 'w'
return (num / 10000).toFixed(1) + 'w'
}
},
$getTransform(el) {

57
src/utils/mixin.js
View File

@ -23,13 +23,13 @@ export default {
SlideColumnVirtualList,
SlideItem,
Indicator,
'Video1':Video,
'Video1': Video,
Footer,
Mask,
NoMore,
Back,
Loading,
'b-button':BaseButton
'b-button': BaseButton
},
data() {
return {
@ -38,5 +38,56 @@ export default {
},
methods: {
...globalMethods
}
},
directives: {
longpress: {
beforeMount: function (el, binding, vNode) {
// 确保提供的表达式是函数
if (typeof binding.value !== 'function') {
// 获取组件名称
const compName = vNode.context.name;
// 将警告传递给控制台
let warn = `[longpress:] provided expression '${binding.expression}' is not afunction, but has to be `;
if (compName) {
warn += `Found in component '${compName}' `
}
console.warn(warn);
}
// 定义变量
let pressTimer = null;
// 定义函数处理程序
// 创建计时器（ 1秒后执行函数 ）
let start = (e) => {
if (e.type === 'click' && e.button !== 0) {
return;
}
if (pressTimer === null) {
pressTimer = setTimeout(() => {
// 执行函数
handler();
}, 500)
}
}
// 取消计时器
let cancel = (e) => {
// 检查计时器是否有值
if (pressTimer !== null) {
clearTimeout(pressTimer);
pressTimer = null;
}
}
// 运行函数
const handler = (e) => {
// 执行传递给指令的方法
binding.value(e)
};
// 添加事件监听器
el.addEventListener("touchstart", start);
// 取消计时器
el.addEventListener("click", cancel);
el.addEventListener("touchend", cancel);
el.addEventListener("touchcancel", cancel);
}
}
},
}