聊天页面
This commit is contained in:
zyronon
parent
e2ed29ce66
commit
03c52acd80
@ -56,10 +56,13 @@ export default {
|
||||
'/service-protocol',
|
||||
'/address-list',
|
||||
'/video-detail',
|
||||
'/my-card',
|
||||
'/scan',
|
||||
'/face-to-face',
|
||||
'/chat',
|
||||
'/chat-detail',
|
||||
'/set-remark',
|
||||
'/me/right-menu/look-history',
|
||||
'',
|
||||
];
|
||||
const toDepth = routeDeep.indexOf(to.path)
|
||||
|
||||
@ -7,4 +7,8 @@ $line-color: rgb(37, 45, 66);
|
||||
|
||||
|
||||
$primary-btn-color: rgb(252, 47, 86);
|
||||
$disable-primary-btn-color: rgba(252, 47, 86, .5);
|
||||
$disable-primary-btn-color: rgba(252, 47, 86, .5);
|
||||
|
||||
.second-text-color {
|
||||
color: $second-text-color;
|
||||
}
|
||||
@ -9,15 +9,16 @@
|
||||
@after-leave="afterLeave"
|
||||
:css="false"
|
||||
>
|
||||
<div ref="dialog" class="FromBottomDialog"
|
||||
<div ref="dialog"
|
||||
class="FromBottomDialog"
|
||||
v-if="modelValue"
|
||||
:class="mode"
|
||||
:class="[mode,showHengGang ? '' : 'no-heng-gang']"
|
||||
:style="{'max-height':height}"
|
||||
@touchstart="start"
|
||||
@touchmove="move"
|
||||
@touchend="end"
|
||||
>
|
||||
<div class="heng-gang" :class="mode">
|
||||
<div class="heng-gang" :class="mode" v-if="showHengGang">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
@ -39,14 +40,18 @@ export default {
|
||||
// default: 'light'
|
||||
// default: 'white'
|
||||
},
|
||||
maskMode:{
|
||||
type: String,
|
||||
default: 'dark'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '70vh'
|
||||
},
|
||||
useMask: {
|
||||
showHengGang: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
@ -61,7 +66,7 @@ export default {
|
||||
document.body.style.position = 'static'
|
||||
document.documentElement.scrollTop = this.scroll
|
||||
}
|
||||
this.$store.commit('setMaskDialog', {state: newVal, mode: this.mode})
|
||||
this.$store.commit('setMaskDialog', {state: newVal, mode: this.maskMode})
|
||||
},
|
||||
maskDialog(newVal) {
|
||||
if (!newVal) {
|
||||
@ -95,6 +100,7 @@ export default {
|
||||
}, 0)
|
||||
setTimeout(() => {
|
||||
this.$setCss(el, 'transition-duration', `0ms`)
|
||||
this.$setCss(el, 'transform', `none`)
|
||||
done()
|
||||
}, 200)
|
||||
},
|
||||
@ -151,7 +157,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../assets/scss/index";
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.FromBottomDialog {
|
||||
z-index: 9;
|
||||
@ -175,6 +181,10 @@ export default {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&.no-heng-gang {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.heng-gang {
|
||||
border-radius: .5rem .5rem 0 0;
|
||||
z-index: 3;
|
||||
@ -18,6 +18,7 @@ import SlideRowList from "./components/slide/SlideRowList";
|
||||
import SlideColumnList from "./components/slide/SlideColumnList";
|
||||
import Mask from "./components/Mask";
|
||||
import NoMore from "./components/NoMore";
|
||||
import Indicator from "./components/Indicator";
|
||||
|
||||
const mixin = {
|
||||
methods: {
|
||||
@ -32,6 +33,7 @@ app.component('SlideList', SlideList)
|
||||
app.component('SlideRowList', SlideRowList)
|
||||
app.component('SlideColumnList', SlideColumnList)
|
||||
app.component('SlideItem', SlideItem)
|
||||
app.component('Indicator', Indicator)
|
||||
app.component('Video1', Video)
|
||||
app.component('Footer', Footer)
|
||||
app.component('Mask', Mask)
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
<div class="number mb10p">
|
||||
<span class="mr5p">私密账号</span>
|
||||
<span>抖音号：605128307</span>
|
||||
<img src="../../assets/img/icon/qr_code.svg" alt="" @click.stop="$nav('/MyCard')">
|
||||
<img src="../../assets/img/icon/qr_code.svg" alt="" @click.stop="$nav('/my-card')">
|
||||
</div>
|
||||
<div class="signature f12 mb10p">
|
||||
<span>填写个性签名更容易获得别人关注哦</span>
|
||||
@ -95,7 +95,7 @@
|
||||
<SlideItem style="min-width: 70vw; overflow:auto;">
|
||||
<transition name="fade">
|
||||
<div class="ul" v-if="!isMoreFunction">
|
||||
<div class="li" @click="$nav('MyCard')">
|
||||
<div class="li" @click="$nav('/my-card')">
|
||||
<img src="../../assets/img/icon/card-gray.png" alt="">
|
||||
<span>我的订单</span>
|
||||
</div>
|
||||
@ -105,17 +105,13 @@
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="li" @click="$nav('MyCard')">
|
||||
<img src="../../assets/img/icon/card-gray.png" alt="">
|
||||
<span>我的收藏</span>
|
||||
</div>
|
||||
<div class="li" @click="$nav('MyCard')">
|
||||
<div class="li" @click="$nav('/me/right-menu/look-history')">
|
||||
<img src="../../assets/img/icon/card-gray.png" alt="">
|
||||
<span>观看历史</span>
|
||||
</div>
|
||||
<div class="li" @click="$nav('MyCard')">
|
||||
<div class="li" @click="$nav('/my-card')">
|
||||
<img src="../../assets/img/icon/card-gray.png" alt="">
|
||||
<span>我的动态</span>
|
||||
<span>我的二维码</span>
|
||||
</div>
|
||||
<div class="li" @click="$nav('MyCard')">
|
||||
<img src="../../assets/img/icon/card-gray.png" alt="">
|
||||
@ -159,14 +155,14 @@
|
||||
|
||||
<div class="function" @click="$nav('MyCollect')">
|
||||
<img src="../../assets/img/icon/collect-gray.png" alt="">
|
||||
<span>我的收藏</span>
|
||||
<span>视频彩铃</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">拓展功能</div>
|
||||
<div class="functions">
|
||||
<div class="function" @click="$nav('MyCard')">
|
||||
<img src="../../assets/img/icon/card-gray.png" alt="">
|
||||
<span>我的二维码</span>
|
||||
<span>我的动态</span>
|
||||
</div>
|
||||
<div class="function">
|
||||
<img src="../../assets/img/icon/order-gray.png" alt="">
|
||||
@ -187,7 +183,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div class="button-ctn">
|
||||
<div class="button" v-if="!isMoreFunction" @click="isMoreFunction = true">
|
||||
<img src="../../assets/img/icon/card-gray.png" alt="">
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
<template>
|
||||
<div id='MyCard'>
|
||||
<BaseHeader>
|
||||
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="15320" width="32" height="32">
|
||||
<path
|
||||
d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z"
|
||||
fill="#8a8a8a" p-id="15321">
|
||||
</path>
|
||||
</svg>
|
||||
<template v-slot:center>
|
||||
<span class="f16">我的抖音码</span>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<div class="card">
|
||||
@ -26,9 +21,9 @@
|
||||
<img src="../../assets/img/icon/download.png" alt="">
|
||||
<span>保存到相册</span>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="btn" @click="$nav('/scan')">
|
||||
<img src="../../assets/img/icon/scan.png" alt="">
|
||||
<span>保存到相册</span>
|
||||
<span>扫一扫</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,26 +46,32 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
#MyCard {
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 1.4rem;
|
||||
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
padding-top: $header-height;
|
||||
|
||||
.card {
|
||||
margin: 10px 20px;
|
||||
margin: 3rem;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
border-radius: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.logo-ctn {
|
||||
margin: 20px 0;
|
||||
width: 50vw;
|
||||
height: 50vw;
|
||||
margin: 2rem 0;
|
||||
width: 40vw;
|
||||
background-image: url("/@/assets/img/icon/logo-bg.png");
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
@ -79,19 +80,20 @@ export default {
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin-top: 60px;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 6rem;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 20px 0;
|
||||
margin: 2rem 0;
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
@ -99,6 +101,7 @@ export default {
|
||||
}
|
||||
|
||||
.notice-two {
|
||||
font-size: 1.2rem;
|
||||
color: white;
|
||||
opacity: .4;
|
||||
text-align: center;
|
||||
@ -106,7 +109,7 @@ export default {
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
bottom: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
@ -118,8 +121,8 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
margin-bottom: 10px;
|
||||
width: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,6 +79,7 @@
|
||||
v-model="dialog.shareToFriend"
|
||||
height="50vh"
|
||||
mode="light"
|
||||
mask-mode="light"
|
||||
>
|
||||
<div class="share-dialog">
|
||||
<div class="collection" @click="dialog.shareToFriend = false">
|
||||
@ -107,6 +108,7 @@
|
||||
v-model="dialog.permissionDialog"
|
||||
height="40vh"
|
||||
mode="white"
|
||||
mask-mode="white"
|
||||
>
|
||||
<div class="permission-dialog">
|
||||
<div class="setting" @click="dialog.permissionDialog = false">
|
||||
@ -163,7 +165,7 @@ import mp43 from "../../assets/video/3.mp4";
|
||||
import mp44 from "../../assets/video/4.mp4";
|
||||
import mp45 from "../../assets/video/5.mp4";
|
||||
import Search from "../../components/Search";
|
||||
import FromBottomDialog from "../../components/FromBottomDialog";
|
||||
import FromBottomDialog from "../../components/dialog/FromBottomDialog";
|
||||
|
||||
export default {
|
||||
name: "VideoDetail",
|
||||
|
||||
72
src/pages/me/rightMenu/LookHistory.vue
Normal file
72
src/pages/me/rightMenu/LookHistory.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="lookHistory">
|
||||
<BaseHeader>
|
||||
<template v-slot:center>
|
||||
<span class="f16">观看历史</span>
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<span class="second-text-color f13" @click="clear">清空</span>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<Indicator
|
||||
style="width: calc(100vw - 2rem); margin-left: 1rem;"
|
||||
tabStyleWidth="50%"
|
||||
:tabTexts="['熟人列表','发现熟人']"
|
||||
v-model:active-index="currentSlideItemIndex">
|
||||
</Indicator>
|
||||
<SlideRowList v-model:active-index="currentSlideItemIndex" style="height: calc(100vh - 6rem);">
|
||||
<SlideItem class="tab1">
|
||||
<Posters></Posters>
|
||||
<NoMore></NoMore>
|
||||
</SlideItem>
|
||||
<SlideItem class="tab2">
|
||||
</SlideItem>
|
||||
</SlideRowList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Posters from "../../../components/Posters";
|
||||
|
||||
export default {
|
||||
name: "lookHistory",
|
||||
components: {
|
||||
Posters
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentSlideItemIndex: 0
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
this.$showConfirmDialog('确定清空？',()=>{
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.lookHistory {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -56,7 +56,7 @@ import {mapState} from 'vuex'
|
||||
import enums from '../../../utils/enums'
|
||||
import {inject} from "vue";
|
||||
import MobileSelect from "mobile-select";
|
||||
import ConfirmDialog from "../../../components/ConfirmDialog";
|
||||
import ConfirmDialog from "../../../components/dialog/ConfirmDialog";
|
||||
import Loading from "../../../components/Loading";
|
||||
|
||||
//TODO 年份选择器没做
|
||||
|
||||
@ -155,6 +155,8 @@ export default {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@ -18,7 +18,8 @@
|
||||
<div class="notice">我的名字</div>
|
||||
<div class="input-ctn" style="margin-bottom: 1rem;">
|
||||
<input type="text" v-model="localUserinfo.name" placeholder="记得填写名字哦">
|
||||
<img class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.name = ''">
|
||||
<img v-if="localUserinfo.name"
|
||||
class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.name = ''">
|
||||
</div>
|
||||
<div class="num">{{ localUserinfo.name.length }}/20</div>
|
||||
</div>
|
||||
@ -26,7 +27,9 @@
|
||||
<div class="notice">我的抖音号</div>
|
||||
<div class="input-ctn" style="margin-bottom: 1rem;">
|
||||
<input type="text" v-model="localUserinfo.account">
|
||||
<img class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.account = ''">
|
||||
<img
|
||||
v-if="localUserinfo.account"
|
||||
class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.account = ''">
|
||||
</div>
|
||||
<div class="num">最多16个字，只允许包含字母、数字、下划线和点，30天内仅能修改一次</div>
|
||||
</div>
|
||||
|
||||
@ -22,19 +22,20 @@
|
||||
<switches v-model="top" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" @click="$nav('/set-remark')">
|
||||
<div class="left">设备备注</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/img/icon/back.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO 没做 -->
|
||||
<div class="row">
|
||||
<div class="left">举报</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/img/icon/back.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" @click="blockDialog = true">
|
||||
<div class="left">拉黑</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/img/icon/back.png" alt="">
|
||||
@ -42,30 +43,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<from-bottom-dialog
|
||||
v-model="blockDialog"
|
||||
:show-heng-gang="false"
|
||||
height="20rem"
|
||||
mode="white">
|
||||
<div class="block-dialog">
|
||||
<div class="notice">
|
||||
拉黑后，对方将无法搜索到你，也不能再给你发私信
|
||||
</div>
|
||||
<div class="row">确认拉黑</div>
|
||||
<div class="row">不让 TA 看</div>
|
||||
<div class="space"></div>
|
||||
<div class="row" @click="blockDialog = false">取消</div>
|
||||
</div>
|
||||
</from-bottom-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Switches from './components/swtich/switches';
|
||||
import People from "../people/components/People";
|
||||
import FromBottomDialog from "../../components/dialog/FromBottomDialog";
|
||||
|
||||
export default {
|
||||
name: "ChatDetail",
|
||||
components: {
|
||||
Switches,
|
||||
People
|
||||
People,
|
||||
FromBottomDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
noMessage: false,
|
||||
top: false,
|
||||
blockDialog: false,
|
||||
list: [
|
||||
{
|
||||
type: 1,
|
||||
name:'A'
|
||||
name: 'A'
|
||||
},
|
||||
{
|
||||
type: 6,
|
||||
name:'多人聊天'
|
||||
name: '多人聊天'
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -92,6 +111,7 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
@ -108,16 +128,11 @@ export default {
|
||||
.row {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 4rem;
|
||||
|
||||
&:active {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.right {
|
||||
img {
|
||||
height: 2rem;
|
||||
@ -126,5 +141,36 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-dialog {
|
||||
color: black;
|
||||
|
||||
.notice {
|
||||
color: $second-text-color;
|
||||
font-size: 1.2rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid gainsboro;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 1rem;
|
||||
background: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -181,7 +181,7 @@
|
||||
<script>
|
||||
import Footer from '../../components/Footer.vue'
|
||||
import Search from "../../components/Search";
|
||||
import FromBottomDialog from '../../components/FromBottomDialog'
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
|
||||
export default {
|
||||
name: "Message",
|
||||
@ -292,7 +292,6 @@ export default {
|
||||
color: white;
|
||||
|
||||
.create-chat-wrapper {
|
||||
margin-top: 2.4rem;
|
||||
padding-bottom: 6rem;
|
||||
|
||||
.joined-chat {
|
||||
@ -457,7 +456,6 @@ export default {
|
||||
}
|
||||
|
||||
.joined-chat-wrapper {
|
||||
margin-top: 2.4rem;
|
||||
|
||||
.nav {
|
||||
padding: 2rem;
|
||||
|
||||
121
src/pages/message/SetRemark.vue
Normal file
121
src/pages/message/SetRemark.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="edit-item">
|
||||
<BaseHeader @back="back">
|
||||
<template v-slot:center>
|
||||
<span class="f16">修改备注名</span>
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<div>
|
||||
<span class="f16" :class="isChanged?'save-yes':'save-no'" @click="save">保存</span>
|
||||
</div>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
|
||||
<div class="content">
|
||||
<div class="notice">备注名</div>
|
||||
<div class="input-ctn" style="margin-bottom: 1rem;">
|
||||
<input type="text" v-model="remark" placeholder="请输入备注名">
|
||||
<img v-if="remark.length" class="close" src="../../assets/img/icon/close.svg" alt="" @click="remark = ''">
|
||||
</div>
|
||||
<div class="num">{{ remark.length }}/20</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "SetRemark",
|
||||
data() {
|
||||
return {
|
||||
remark: '',
|
||||
oldRemark: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isChanged() {
|
||||
return this.remark !== this.oldRemark;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
if (this.isChanged) {
|
||||
this.$showConfirmDialog('是否保存修改', this.save, this.$back)
|
||||
} else {
|
||||
this.$back()
|
||||
}
|
||||
},
|
||||
async save() {
|
||||
if (!this.isChanged) return
|
||||
this.$showLoading()
|
||||
// this.$store.commit('setUserinfo', this.remark)
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.$back()
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.edit-item {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
|
||||
.save-yes {
|
||||
color: $primary-btn-color;
|
||||
}
|
||||
|
||||
.save-no {
|
||||
color: $disable-primary-btn-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2rem;
|
||||
padding-top: 7rem;
|
||||
|
||||
.notice, .num {
|
||||
font-size: 1.2rem;
|
||||
color: $second-text-color;
|
||||
}
|
||||
|
||||
.input-ctn {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $line-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
margin: .5rem 0;
|
||||
color: white;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: $second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 1.5rem;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -53,10 +53,6 @@
|
||||
</SlideRowList>
|
||||
|
||||
|
||||
<transition name="fade">
|
||||
<Mask v-if="maskDialog" @click="maskDialog = false"></Mask>
|
||||
</transition>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="findAddressListDialog" class="find-address-list-dialog" @click="findAddressListDialog = false">
|
||||
<div class="body">
|
||||
@ -77,7 +73,7 @@
|
||||
</transition>
|
||||
|
||||
<transition name="from-bottom">
|
||||
<div class="more-option-dialog" v-if="moreOptionDialog">
|
||||
<div class="more-option-dialog" v-if="false">
|
||||
<div class="row" @click="outWebImgAccountDialog = true;moreOptionDialog = false">
|
||||
<span>站外好友口令</span>
|
||||
</div>
|
||||
@ -94,6 +90,28 @@
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<from-bottom-dialog
|
||||
v-model="moreOptionDialog"
|
||||
:show-heng-gang="false"
|
||||
height="20rem"
|
||||
mode="white">
|
||||
<div class="more-option-dialog">
|
||||
<div class="row" @click="outWebImgAccountDialog = true;moreOptionDialog = false">
|
||||
<span>站外好友口令</span>
|
||||
</div>
|
||||
<div class="row" @click="$nav('/scan')">
|
||||
<span>扫一扫加好友</span>
|
||||
</div>
|
||||
<div class="row" style="border-bottom: none;" @click="$nav('/face-to-face')">
|
||||
<span>面对面加好友</span>
|
||||
</div>
|
||||
<div class="space"></div>
|
||||
<div class="row" @click="moreOptionDialog = false">
|
||||
取消
|
||||
</div>
|
||||
</div>
|
||||
</from-bottom-dialog>
|
||||
|
||||
<transition name="fade">
|
||||
<div class="out-web-img-account-dialog" v-if="outWebImgAccountDialog">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="img-account">
|
||||
@ -123,13 +141,15 @@
|
||||
import People from './components/People'
|
||||
import Search from '../../components/Search'
|
||||
import Indicator from '../../components/Indicator'
|
||||
import FromBottomDialog from "../../components/dialog/FromBottomDialog";
|
||||
|
||||
export default {
|
||||
name: "FindAcquaintance",
|
||||
components: {
|
||||
People,
|
||||
Search,
|
||||
Indicator
|
||||
Indicator,
|
||||
FromBottomDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -388,15 +408,7 @@ export default {
|
||||
}
|
||||
|
||||
.more-option-dialog {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px 5px 0 0;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.space {
|
||||
height: 1rem;
|
||||
@ -404,16 +416,16 @@ export default {
|
||||
}
|
||||
|
||||
.row {
|
||||
font-size: 1.6rem;
|
||||
height: 5rem;
|
||||
color: black;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
padding: 1.8rem;
|
||||
width: 100%;
|
||||
//border-bottom: 1px solid ghostwhite;
|
||||
border-bottom: 1px solid gainsboro;
|
||||
text-align: center;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -29,6 +29,8 @@ import Scan from "../pages/people/Scan";
|
||||
import FaceToFace from "../pages/people/FaceToFace";
|
||||
import Chat from "../pages/message/Chat";
|
||||
import ChatDetail from "../pages/message/ChatDetail";
|
||||
import SetRemark from "../pages/message/SetRemark";
|
||||
import LookHistory from "../pages/me/rightMenu/LookHistory";
|
||||
|
||||
const routes = [
|
||||
// {path: '', component: Music},
|
||||
@ -62,6 +64,8 @@ const routes = [
|
||||
{path: '/face-to-face', component: FaceToFace},
|
||||
{path: '/chat', component: Chat},
|
||||
{path: '/chat-detail', component: ChatDetail},
|
||||
{path: '/set-remark', component: SetRemark},
|
||||
{path: '/me/right-menu/look-history', component: LookHistory},
|
||||
]
|
||||
|
||||
export default VueRouter.createRouter({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as Vue from "vue";
|
||||
import SelectDialog from "../components/SelectDialog";
|
||||
import ConfirmDialog from "../components/ConfirmDialog";
|
||||
import SelectDialog from "../components/dialog/SelectDialog";
|
||||
import ConfirmDialog from "../components/dialog/ConfirmDialog";
|
||||
import Loading from "../components/Loading";
|
||||
|
||||
export default {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user