优化uploader页面
This commit is contained in:
zyronon
parent
c00c5edc82
commit
753bf2fc1b
@ -7,6 +7,10 @@
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in .3s;
|
||||
}
|
||||
|
||||
@ -73,8 +73,8 @@ export default {
|
||||
'/my-card',
|
||||
'/scan',
|
||||
'/face-to-face',
|
||||
'/chat',
|
||||
'/chat-detail',
|
||||
'/message/chat',
|
||||
'/message/chat-detail',
|
||||
'/set-remark',
|
||||
'/me/request-update',
|
||||
'/me/right-menu/look-history',
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('getFriends')
|
||||
// this.$store.dispatch('getFriends')
|
||||
try {
|
||||
navigator.control.gesture(false);
|
||||
} catch (e) {
|
||||
|
||||
@ -31,6 +31,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:active {
|
||||
background: @active-main-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
@ -39,9 +45,6 @@
|
||||
border-bottom: 1px solid @line-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: @active-main-bg;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
@ -100,15 +100,12 @@
|
||||
<img v-if="comment" src="../assets/img/icon/message/up.png" @click="send">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
title="私信给"
|
||||
ok-text="发送"
|
||||
v-model:visible="showPrivateChat"
|
||||
>
|
||||
<div class="private-chat">
|
||||
|
||||
</div>
|
||||
<Search mode="light" v-model="test" :isShowSearchIcon="false"/>
|
||||
</ConfirmDialog>
|
||||
</div>
|
||||
</from-bottom-dialog>
|
||||
@ -120,6 +117,7 @@ import ConfirmDialog from "./dialog/ConfirmDialog";
|
||||
import {mapState} from "vuex";
|
||||
import FromBottomDialog from "./dialog/FromBottomDialog";
|
||||
import Loading from "./Loading";
|
||||
import Search from "./Search";
|
||||
|
||||
export default {
|
||||
name: "Comment",
|
||||
@ -127,7 +125,8 @@ export default {
|
||||
AutoInput,
|
||||
ConfirmDialog,
|
||||
FromBottomDialog,
|
||||
Loading
|
||||
Loading,
|
||||
Search
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
@ -151,6 +150,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
comment: '',
|
||||
test: '',
|
||||
comments: [],
|
||||
options: [
|
||||
{id: 1, name: '私信回复'},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="search-ctn">
|
||||
<div class="search-ctn" :class="mode">
|
||||
<div class="search">
|
||||
<img class="search-icon" src="../assets/img/icon/search-gray.png" alt="">
|
||||
<img v-if="isShowSearchIcon" class="search-icon" src="../assets/img/icon/search-gray.png" alt="">
|
||||
<input type="text" :placeholder="placeholder" v-model="value">
|
||||
<div class="suffix">
|
||||
<slot v-if="$slots.default"></slot>
|
||||
@ -32,9 +32,17 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showText:{
|
||||
type:String,
|
||||
default:'搜索'
|
||||
isShowSearchIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showText: {
|
||||
type: String,
|
||||
default: '搜索'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -67,6 +75,22 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.dark {
|
||||
.search {
|
||||
background: @second-btn-color-tran;
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
.search {
|
||||
background: whitesmoke;
|
||||
|
||||
input {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin-left: 2rem;
|
||||
font-size: 1.6rem;
|
||||
@ -78,7 +102,6 @@ export default {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 3.6rem;
|
||||
background: @second-btn-color-tran;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -86,7 +109,7 @@ export default {
|
||||
.search-icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin: 0 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -96,7 +119,7 @@ export default {
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
padding: 0 0 0 1rem;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
|
||||
@ -195,10 +195,6 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
@import "../assets/scss/index";
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
|
||||
.share {
|
||||
width: 100%;
|
||||
background: black;
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
<div class="body">
|
||||
<div class="title" v-if="title">{{ title }}</div>
|
||||
<div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<div class="footer">
|
||||
<div class="cancel" :class="cancelTextColor" @click.stop="cancel">{{ cancelText }}</div>
|
||||
<div class="ok" @click.stop="ok">{{ okText }}</div>
|
||||
|
||||
@ -44,7 +44,7 @@ export default {
|
||||
//触摸，是否可以滑动
|
||||
touchMoved: {
|
||||
type: Boolean,
|
||||
default:true
|
||||
default: true
|
||||
},
|
||||
maskMode: {
|
||||
type: String,
|
||||
@ -69,8 +69,10 @@ export default {
|
||||
if (newVal) {
|
||||
if (this.pageId) {
|
||||
let page = document.getElementById(this.pageId)
|
||||
this.pagePosition = this.$getCss2(page, 'position')
|
||||
page.style.position = 'absolute'
|
||||
} else {
|
||||
this.pagePosition = this.$getCss2(app.children[0], 'position')
|
||||
app.children[0].style.position = 'absolute'
|
||||
}
|
||||
this.scroll = document.documentElement.scrollTop
|
||||
@ -79,9 +81,9 @@ export default {
|
||||
} else {
|
||||
if (this.pageId) {
|
||||
let page = document.getElementById(this.pageId)
|
||||
page.style.position = 'fixed'
|
||||
page.style.position = this.pagePosition || 'fixed'
|
||||
} else {
|
||||
app.children[1].style.position = 'fixed'
|
||||
app.children[1].style.position = this.pagePosition || 'fixed'
|
||||
}
|
||||
document.body.style.position = 'static'
|
||||
document.documentElement.scrollTop = this.scroll
|
||||
@ -100,6 +102,7 @@ export default {
|
||||
startLocationY: 0,
|
||||
moveYDistance: 0,
|
||||
startTime: 0,
|
||||
pagePosition: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -143,13 +146,13 @@ export default {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
start(e) {
|
||||
if (!this.touchMoved)return;
|
||||
if (!this.touchMoved) return;
|
||||
if (this.$refs.dialog.scrollTop !== 0) return
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
this.startTime = Date.now()
|
||||
},
|
||||
move(e) {
|
||||
if (!this.touchMoved)return;
|
||||
if (!this.touchMoved) return;
|
||||
if (this.$refs.dialog.scrollTop !== 0) return
|
||||
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
||||
if (this.moveYDistance > 0) {
|
||||
@ -157,7 +160,7 @@ export default {
|
||||
}
|
||||
},
|
||||
end(e) {
|
||||
if (!this.touchMoved)return;
|
||||
if (!this.touchMoved) return;
|
||||
//点击
|
||||
if (Date.now() - this.startTime < 150) return
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
export default {
|
||||
// baseUrl: 'http://192.168.0.105/index.php/v1',
|
||||
// filePreview:'http://192.168.0.105/static/uploads/',
|
||||
baseUrl: 'http://192.168.10.164//index.php/v1',
|
||||
filePreview:'http://192.168.10.164/static/uploads/'
|
||||
baseUrl: 'http://192.168.0.103/index.php/v1',
|
||||
filePreview:'http://192.168.0.103/static/uploads/',
|
||||
// baseUrl: 'http://192.168.10.164//index.php/v1',
|
||||
// filePreview:'http://192.168.10.164/static/uploads/'
|
||||
// baseUrl: 'http://localhost//index.php/v1',
|
||||
// filePreview:'http://localhost/static/uploads/'
|
||||
}
|
||||
@ -6,39 +6,33 @@
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<div class="my-buttons">
|
||||
<div class="follow-display">
|
||||
<div class="follow-wrapper" :class="isFollowed ? 'follow-wrapper-followed' : ''">
|
||||
<div class="no-follow" @click="isFollowed = true">
|
||||
<img src="../assets/img/icon/add-white.png" alt="">
|
||||
<span>关注</span>
|
||||
</div>
|
||||
<div class="followed">
|
||||
<div class="l-button" @click="isFollowed = false">
|
||||
<span>已关注</span>
|
||||
<img src="../assets/img/icon/arrow-up-white.png" alt="">
|
||||
</div>
|
||||
<div class="l-button">
|
||||
<span>私信</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" @click="isFollowed = !isFollowed">
|
||||
<img src="../assets/img/icon/arrow-up-white.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
title="设置备注名"
|
||||
ok-text="确认"
|
||||
v-model:visible="showFollowSetting"
|
||||
>
|
||||
<Search mode="light" v-model="t" :isShowSearchIcon="false"/>
|
||||
</ConfirmDialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import ConfirmDialog from "../components/dialog/ConfirmDialog";
|
||||
import Search from "../components/Search";
|
||||
|
||||
export default {
|
||||
name: "Test",
|
||||
components: {
|
||||
ConfirmDialog,
|
||||
Search
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
isFollowed: true
|
||||
showFollowSetting: true,
|
||||
switches1: true,
|
||||
t: ''
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -51,6 +45,7 @@ export default {
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
|
||||
.Test {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -62,103 +57,12 @@ export default {
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.my-buttons {
|
||||
margin-top: 2rem;
|
||||
overflow: hidden;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
@width: 3.6rem;
|
||||
|
||||
.follow-display {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.follow-wrapper {
|
||||
width: 200%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
transition: all .3s ease;
|
||||
|
||||
&.follow-wrapper-followed {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
.no-follow {
|
||||
width: calc(100% - 0.5rem);
|
||||
color: white;
|
||||
border-radius: .2rem;
|
||||
background: @primary-btn-color;
|
||||
height: @width;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: .5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.followed {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.l-button {
|
||||
color: white;
|
||||
border-radius: .2rem;
|
||||
background: @second-btn-color;
|
||||
height: @width;
|
||||
width: 50%;
|
||||
margin-right: .5rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.option {
|
||||
position: relative;
|
||||
width: @width;
|
||||
height: @width;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: .2rem;
|
||||
background: @second-btn-color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
@width: 1.6rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
.private-chat {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div id="home-index">
|
||||
<SlideRowList
|
||||
name="baseSlide"
|
||||
:canMove="canMove"
|
||||
v-model:active-index="baseActiveIndex">
|
||||
<SlideItem>
|
||||
<SlideRowList
|
||||
@ -105,7 +106,12 @@
|
||||
<Footer v-bind:init-tab="1"/>
|
||||
</SlideItem>
|
||||
<SlideItem style="font-size: 40px;overflow:auto;">
|
||||
<Uploader/>
|
||||
<Uploader
|
||||
@toggleCanMove="e => this.canMove = e"
|
||||
@back="baseActiveIndex = 0"
|
||||
@showFollowSetting="showFollowSetting = true"
|
||||
@showFollowSetting2="showFollowSetting2 = true"
|
||||
/>
|
||||
</SlideItem>
|
||||
</SlideRowList>
|
||||
|
||||
@ -126,9 +132,10 @@
|
||||
@share2Webo="shareType = 8"
|
||||
@download="shareType = 9"
|
||||
/>
|
||||
|
||||
<PlayFeedback v-model="showPlayFeedback"/>
|
||||
|
||||
<DouyinCode v-model="showDouyinCode"></DouyinCode>
|
||||
<DouyinCode v-model="showDouyinCode"/>
|
||||
|
||||
<Duoshan v-model="showShareDuoshan"/>
|
||||
|
||||
@ -136,6 +143,26 @@
|
||||
:videoId="videos[videoActiveIndex]?.id"
|
||||
:canDownload="videos[videoActiveIndex]?.canDownload"
|
||||
/>
|
||||
|
||||
<FollowSetting
|
||||
@showChangeNote="delayShowDialog( e => this.showChangeNote = true)"
|
||||
@showBlockDialog="delayShowDialog(e => this.showBlockDialog = true)"
|
||||
@showShare="delayShowDialog( e => this.isSharing = true)"
|
||||
v-model="showFollowSetting"/>
|
||||
|
||||
|
||||
<FollowSetting2
|
||||
v-model="showFollowSetting2"/>
|
||||
|
||||
<BlockDialog v-model="showBlockDialog"/>
|
||||
|
||||
<ConfirmDialog
|
||||
title="设置备注名"
|
||||
ok-text="确认"
|
||||
v-model:visible="showChangeNote"
|
||||
>
|
||||
<Search mode="light" v-model="test" :isShowSearchIcon="false"/>
|
||||
</ConfirmDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -161,6 +188,11 @@ import Duoshan from "./components/Duoshan";
|
||||
import ShareTo from "./components/ShareTo";
|
||||
import DouyinCode from "../../components/DouyinCode";
|
||||
import Uploader from "../me/Uploader";
|
||||
import FollowSetting from "./components/FollowSetting";
|
||||
import BlockDialog from "../message/components/BlockDialog";
|
||||
import Search from "../../components/Search";
|
||||
import ConfirmDialog from "../../components/dialog/ConfirmDialog";
|
||||
import FollowSetting2 from "./components/FollowSetting2";
|
||||
|
||||
export default {
|
||||
name: "HomeIndex",
|
||||
@ -175,7 +207,12 @@ export default {
|
||||
PlayFeedback,
|
||||
Duoshan,
|
||||
ShareTo,
|
||||
DouyinCode
|
||||
DouyinCode,
|
||||
FollowSetting,
|
||||
FollowSetting2,
|
||||
BlockDialog,
|
||||
Search,
|
||||
ConfirmDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -393,6 +430,7 @@ export default {
|
||||
],
|
||||
isCommenting: false,
|
||||
isSharing: false,
|
||||
canMove: true,
|
||||
|
||||
shareType: -1,
|
||||
|
||||
@ -401,6 +439,13 @@ export default {
|
||||
showShareDialog: false,
|
||||
showShare2WeChatZone: false,
|
||||
showDouyinCode: false,
|
||||
showFollowSetting: false,
|
||||
showFollowSetting2: false,
|
||||
showBlockDialog: false,
|
||||
showChangeNote: false,
|
||||
|
||||
test: '',
|
||||
|
||||
|
||||
videoActiveIndex: 0,
|
||||
baseActiveIndex: 0,
|
||||
@ -454,6 +499,11 @@ export default {
|
||||
this.width = document.body.clientWidth
|
||||
},
|
||||
methods: {
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 500)
|
||||
},
|
||||
dislike() {
|
||||
this.$notice('操作成功，将减少此类视频的推荐')
|
||||
},
|
||||
@ -474,7 +524,7 @@ export default {
|
||||
}
|
||||
},
|
||||
t(e) {
|
||||
console.log(e)
|
||||
console.log('ttttt', e)
|
||||
},
|
||||
end() {
|
||||
this.$notice('暂时没有更多了')
|
||||
|
||||
184
src/pages/home/components/FollowSetting.vue
Normal file
184
src/pages/home/components/FollowSetting.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
v-model="modelValue"
|
||||
:show-heng-gang="false"
|
||||
maskMode="dark"
|
||||
@cancel="cancel()"
|
||||
height="33rem"
|
||||
mode="light">
|
||||
<div class="follow-setting-dialog">
|
||||
<div class="dialog-header">
|
||||
<div class="title-wrapper">
|
||||
<span class="title">成都验证码</span>
|
||||
<span class="subtitle">私信给朋友</span>
|
||||
</div>
|
||||
<back mode="dark" img="close" direction="right" @click="cancel()"></back>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="option" @click="cancel(e => $emit('showShare'))">
|
||||
<img src="../../../assets/img/icon/components/follow/share.png" alt="">
|
||||
<span>分享主页</span>
|
||||
</div>
|
||||
<div class="option" @click="cancel(e => $nav('/message/chat'))">
|
||||
<img src="../../../assets/img/icon/components/follow/private-chat.png" alt="">
|
||||
<span>发私信</span>
|
||||
</div>
|
||||
<div class="option" @click="cancel(e => $nav('/home/report'))">
|
||||
<img src="../../../assets/img/icon/components/follow/report.png" alt="">
|
||||
<span>举报</span>
|
||||
</div>
|
||||
<div class="option" @click="cancel(e => $emit('showBlockDialog'))">
|
||||
<img src="../../../assets/img/icon/components/follow/forbid.png" alt="">
|
||||
<span>拉黑</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-rows">
|
||||
<div class="l-row" @click="cancel(e => $emit('showChangeNote'))">
|
||||
<div class="left">设置备注名</div>
|
||||
<div class="right">
|
||||
<img src="../../../assets/img/icon/components/follow/write.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row">
|
||||
<div class="left">在关注列表中置顶</div>
|
||||
<div class="right">
|
||||
<switches v-model="switches1" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row">
|
||||
<div class="left">不让TA看</div>
|
||||
<div class="right">
|
||||
<switches v-model="switches1" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</from-bottom-dialog>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
|
||||
import Switches from "../../message/components/swtich/switches";
|
||||
|
||||
export default {
|
||||
name: "FollowSetting",
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches
|
||||
},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switches1: false,
|
||||
switches2: false,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
cancel(cb) {
|
||||
this.$emit('update:modelValue', false)
|
||||
cb && cb()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.follow-setting-dialog {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.dialog-header {
|
||||
color: rgb(81, 81, 89);
|
||||
font-size: 1.4rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: .5rem;
|
||||
color: @second-text-color;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
padding: .6rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(187, 187, 194, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.option {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
background: white;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 23%;
|
||||
font-size: 1.2rem;
|
||||
border-radius: .8rem;
|
||||
|
||||
img {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: 1rem;
|
||||
@width: 2rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-rows {
|
||||
margin-top: 2rem;
|
||||
|
||||
.l-row {
|
||||
height: 4.5rem;
|
||||
padding: 0 2rem;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
||||
|
||||
&:nth-child(1) {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
167
src/pages/home/components/FollowSetting2.vue
Normal file
167
src/pages/home/components/FollowSetting2.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
v-model="modelValue"
|
||||
:show-heng-gang="false"
|
||||
maskMode="dark"
|
||||
@cancel="cancel()"
|
||||
height="33rem"
|
||||
mode="light">
|
||||
<div class="follow-setting-dialog">
|
||||
<div class="dialog-header">
|
||||
<div class="title-wrapper">
|
||||
<span class="title">成都验证码</span>
|
||||
<span class="subtitle">私信给朋友</span>
|
||||
</div>
|
||||
<back mode="dark" img="close" direction="right" @click="cancel()"></back>
|
||||
</div>
|
||||
<div class="l-rows">
|
||||
|
||||
<div class="l-row">
|
||||
<div class="left">不让TA看</div>
|
||||
<div class="right">
|
||||
<switches v-model="switches1" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row">
|
||||
<div class="left">在关注列表中置顶</div>
|
||||
<div class="right">
|
||||
<switches v-model="switches1" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row" @click="cancel(e => $emit('cancelFollow'))">
|
||||
<div class="left">取消关注</div>
|
||||
<div class="right">
|
||||
<img src="../../../assets/img/icon/components/follow/reduce.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</from-bottom-dialog>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
|
||||
import Switches from "../../message/components/swtich/switches";
|
||||
|
||||
export default {
|
||||
name: "FollowSetting",
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches
|
||||
},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switches1: false,
|
||||
switches2: false,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
cancel(cb) {
|
||||
this.$emit('update:modelValue', false)
|
||||
cb && cb()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.follow-setting-dialog {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.dialog-header {
|
||||
color: rgb(81, 81, 89);
|
||||
font-size: 1.4rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: .5rem;
|
||||
color: @second-text-color;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
padding: .6rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(187, 187, 194, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.option {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
background: white;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 23%;
|
||||
font-size: 1.2rem;
|
||||
border-radius: .8rem;
|
||||
|
||||
img {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: 1rem;
|
||||
@width: 2rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-rows {
|
||||
margin-top: 2rem;
|
||||
|
||||
.l-row {
|
||||
height: 4.5rem;
|
||||
padding: 0 2rem;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
||||
|
||||
&:nth-child(1) {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -246,7 +246,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.desc {
|
||||
header {
|
||||
color: white;
|
||||
@ -261,8 +260,10 @@
|
||||
}
|
||||
|
||||
.detail {
|
||||
transform: translateY(-1rem);
|
||||
background: @main-bg;
|
||||
padding: 0 2rem .5rem 2rem;
|
||||
padding: 0 2rem 0 2rem;
|
||||
border-radius: 1rem 1rem 0 0 ;
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
|
||||
@ -11,11 +11,22 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.recommend-enter-active,
|
||||
.recommend-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.recommend-enter-from,
|
||||
.recommend-leave-to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.FromBottomDialog {
|
||||
left: inherit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.Uploader {
|
||||
#Uploader {
|
||||
position: fixed;
|
||||
background: @main-bg;
|
||||
height: 100%;
|
||||
@ -210,6 +221,9 @@
|
||||
transition: all .2s;
|
||||
|
||||
.center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -222,24 +236,54 @@
|
||||
}
|
||||
|
||||
.left {
|
||||
font-size: 1.2rem;
|
||||
height: 2.6rem;
|
||||
display: flex;
|
||||
padding-right: 1.3rem;
|
||||
padding-left: .5rem;
|
||||
align-items: center;
|
||||
border-radius: 2rem;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
|
||||
img {
|
||||
transform: rotate(180deg);
|
||||
border-radius: 50%;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
padding: .6rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
color: white;
|
||||
position: absolute;
|
||||
font-size: 1.2rem;
|
||||
padding: .3rem 1.2rem;
|
||||
border-radius: .2rem;
|
||||
right: 6rem;
|
||||
background: @primary-btn-color;
|
||||
|
||||
&.followed {
|
||||
background: @second-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.right {
|
||||
img {
|
||||
margin-left: 2rem;
|
||||
display: flex;
|
||||
color: white;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.request {
|
||||
font-size: 1.2rem;
|
||||
height: 2.6rem;
|
||||
display: flex;
|
||||
padding-right: 1.3rem;
|
||||
padding-left: .5rem;
|
||||
align-items: center;
|
||||
border-radius: 2rem;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
|
||||
img {
|
||||
padding: .6rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-left: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
padding: .6rem;
|
||||
@ -262,8 +306,13 @@
|
||||
}
|
||||
|
||||
.detail {
|
||||
transform: translateY(-1rem);
|
||||
background: @main-bg;
|
||||
padding: 0 2rem .5rem 2rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
|
||||
.detail-wrapper {
|
||||
padding: 0 2rem 0 2rem;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
@ -361,6 +410,40 @@
|
||||
}
|
||||
}
|
||||
|
||||
.other {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.item {
|
||||
margin-right: 2.5rem;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
margin-right: .8rem;
|
||||
border-radius: .4rem;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .8rem;
|
||||
height: 2.2rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
.top {
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-buttons {
|
||||
margin-top: 2rem;
|
||||
overflow: hidden;
|
||||
@ -428,7 +511,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -443,9 +525,16 @@
|
||||
border-radius: .2rem;
|
||||
background: @second-btn-color;
|
||||
color: white;
|
||||
|
||||
&.option-recommend {
|
||||
img {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
transform: rotate(180deg);
|
||||
@width: 1.6rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
@ -453,35 +542,92 @@
|
||||
|
||||
}
|
||||
|
||||
.other {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
.recommend {
|
||||
transition: all .3s ease;
|
||||
height: 22rem;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
.item {
|
||||
margin-right: 2.5rem;
|
||||
.title {
|
||||
padding: 0 2rem 0 2rem;
|
||||
font-size: 1.2rem;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: .8rem;
|
||||
border-radius: .4rem;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .8rem;
|
||||
height: 2.2rem;
|
||||
margin-left: .3rem;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
.friends {
|
||||
padding-left: 2rem;
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
|
||||
.friend {
|
||||
position: relative;
|
||||
background: @second-btn-color-tran;
|
||||
margin-right: 1rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
@width: 10rem;
|
||||
border-radius: 50%;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
color: @second-text-color;
|
||||
.name {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: .5rem;
|
||||
font-size: 1.2rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 1rem;
|
||||
width: 15rem;
|
||||
height: 2.6rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: .2rem;
|
||||
right: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
.notice {
|
||||
width: 10rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,27 @@
|
||||
<template>
|
||||
<div class="Uploader">
|
||||
<div id="Uploader">
|
||||
<div ref="float" class="float" :class="floatFixed?'fixed':''">
|
||||
<div class="left" style="opacity: 0;">
|
||||
<div class="left" @click="$emit('back')">
|
||||
<img src="../../assets/img/icon/next.svg" alt="">
|
||||
<span>切换账号</span>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div class="center" v-if="floatShowName">
|
||||
<p class="name f22 mt1r mb1r">ttentau</p>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div class="follow-btn" :class="{followed:isFollowed}" v-if="floatFixed" @click="followButton">
|
||||
{{ isFollowed ? '私信' : '关注' }}
|
||||
</div>
|
||||
</transition>
|
||||
<div class="right">
|
||||
<img @click="$nav('/me/request-update')"
|
||||
:style="floatFixed?'opacity: 0;':''"
|
||||
src="../../assets/img/icon/me/finger-right.png" alt="">
|
||||
<img src="../../assets/img/icon/me/menu.png" alt="" @click.stop="baseActiveIndex = 1">
|
||||
<transition name="fade">
|
||||
<div class="request" v-if="!floatFixed">
|
||||
<img @click="$nav('/me/request-update')" src="../../assets/img/icon/me/finger-right.png" alt="">
|
||||
<span>求更新</span>
|
||||
</div>
|
||||
</transition>
|
||||
<img class="menu" src="../../assets/img/icon/more.svg" alt="" @click.stop="$emit('showFollowSetting')">
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll"
|
||||
@ -25,88 +32,125 @@
|
||||
<div ref="desc" class="desc">
|
||||
<header ref="header" @click="previewImg = require('../../assets/img/header-bg.png')"></header>
|
||||
<div class="detail">
|
||||
<div class="head">
|
||||
<img src="../../assets/img/icon/avatar/2.png" class="head-image"
|
||||
@click="previewImg = require('../../assets/img/icon/avatar/2.png')">
|
||||
<div class="heat">
|
||||
<div class="text">
|
||||
<span>获赞</span>
|
||||
<span class="num">18</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<span>粉丝</span>
|
||||
<span class="num">62</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<span>关注</span>
|
||||
<span class="num">8</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="description">
|
||||
<p class="name f22 mt1r mb1r">ttentau</p>
|
||||
<div class="number mb1r">
|
||||
<span class="mr1r">私密账号</span>
|
||||
<span>抖音号：605128307</span>
|
||||
<img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
|
||||
</div>
|
||||
<div class="signature f12">
|
||||
<span class="text">{{ userinfo.desc }}</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<div class="age item" v-if="userinfo.birthday">
|
||||
<img v-if="userinfo.sex === '女'" src="../../assets/img/icon/me/woman.png" alt="">
|
||||
<img v-if="userinfo.sex === '男'" src="../../assets/img/icon/me/man.png" alt="">
|
||||
<span>{{ filterAge(userinfo.birthday) }}岁</span>
|
||||
</div>
|
||||
<div class="item" v-if="userinfo.location">
|
||||
{{ userinfo.location }}
|
||||
</div>
|
||||
<div class="item" v-if="userinfo.school.name">
|
||||
{{ userinfo.school.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="other">
|
||||
<div class="item">
|
||||
<img src="../../assets/img/icon/me/shopping-cart-white.png" alt="">
|
||||
<div class="right">
|
||||
<div class="top">抖音商城</div>
|
||||
<div class="bottom">发现超值好物</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="../../assets/img/icon/me/music-white.png" alt="">
|
||||
<div class="right">
|
||||
<div class="top">我的音乐</div>
|
||||
<div class="bottom">已收藏20首</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-buttons">
|
||||
<div class="follow-display">
|
||||
<div class="follow-wrapper" :class="isFollowed ? 'follow-wrapper-followed' : ''">
|
||||
<div class="no-follow" @click="isFollowed = true">
|
||||
<img src="../../assets/img/icon/add-white.png" alt="">
|
||||
<div class="detail-wrapper">
|
||||
<div class="head">
|
||||
<img src="../../assets/img/icon/avatar/2.png" class="head-image"
|
||||
@click="previewImg = require('../../assets/img/icon/avatar/2.png')">
|
||||
<div class="heat">
|
||||
<div class="text">
|
||||
<span>获赞</span>
|
||||
<span class="num">18</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<span>粉丝</span>
|
||||
<span class="num">62</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<span>关注</span>
|
||||
<span class="num">8</span>
|
||||
</div>
|
||||
<div class="followed">
|
||||
<div class="l-button" @click="isFollowed = false">
|
||||
<span>已关注</span>
|
||||
<img src="../../assets/img/icon/arrow-up-white.png" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="description">
|
||||
<p class="name f22 mt1r mb1r">ttentau</p>
|
||||
<div class="number mb1r">
|
||||
<span class="mr1r">私密账号</span>
|
||||
<span>抖音号：605128307</span>
|
||||
<img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
|
||||
</div>
|
||||
<div class="signature f12">
|
||||
<span class="text">{{ userinfo.desc }}</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<div class="age item" v-if="userinfo.birthday">
|
||||
<img v-if="userinfo.sex === '女'" src="../../assets/img/icon/me/woman.png" alt="">
|
||||
<img v-if="userinfo.sex === '男'" src="../../assets/img/icon/me/man.png" alt="">
|
||||
<span>{{ filterAge(userinfo.birthday) }}岁</span>
|
||||
</div>
|
||||
<div class="item" v-if="userinfo.location">
|
||||
{{ userinfo.location }}
|
||||
</div>
|
||||
<div class="item" v-if="userinfo.school.name">
|
||||
{{ userinfo.school.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="other">
|
||||
<div class="item">
|
||||
<img src="../../assets/img/icon/me/shopping-cart-white.png" alt="">
|
||||
<div class="right">
|
||||
<div class="top">抖音商城</div>
|
||||
<div class="bottom">发现超值好物</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="../../assets/img/icon/me/music-white.png" alt="">
|
||||
<div class="right">
|
||||
<div class="top">我的音乐</div>
|
||||
<div class="bottom">已收藏20首</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-buttons">
|
||||
<div class="follow-display">
|
||||
<div class="follow-wrapper" :class="isFollowed ? 'follow-wrapper-followed' : ''">
|
||||
<div class="no-follow" @click="isFollowed = true">
|
||||
<img src="../../assets/img/icon/add-white.png" alt="">
|
||||
<span>关注</span>
|
||||
</div>
|
||||
<div class="l-button">
|
||||
<span>私信</span>
|
||||
<div class="followed">
|
||||
<div class="l-button" @click="$emit('showFollowSetting2')">
|
||||
<span>已关注</span>
|
||||
<img src="../../assets/img/icon/arrow-up-white.png" alt="">
|
||||
</div>
|
||||
<div class="l-button" @click="$nav('/message/chat')">
|
||||
<span>私信</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option"
|
||||
:class="isShowRecommend?'option-recommend':''"
|
||||
@click="toggleRecommend">
|
||||
<img src="../../assets/img/icon/arrow-up-white.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="recommend">
|
||||
<div class="recommend" v-if="isShowRecommend">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<span>你可能感兴趣</span>
|
||||
<img src="../../assets/img/icon/about-gray.png">
|
||||
</div>
|
||||
<div class="right" @click="$nav('/find-acquaintance')">
|
||||
<span>查看更多</span>
|
||||
<back direction="right"></back>
|
||||
</div>
|
||||
</div>
|
||||
<div class="friends"
|
||||
@touchstart="friendsTouchStart"
|
||||
@touchend="friendsTouchEnd">
|
||||
<div class="friend" v-for="item in friends.all">
|
||||
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="tips">可能感兴趣的人</span>
|
||||
<b-button type="primary">关注</b-button>
|
||||
<div class="close">
|
||||
<back img="close" scale=".6"></back>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more" @click="$nav('/find-acquaintance')">
|
||||
<div class="notice">
|
||||
<div>点击查看</div>
|
||||
<div>更多好友</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" @click="isFollowed = !isFollowed">
|
||||
<img src="../../assets/img/icon/arrow-up-white.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<Indicator
|
||||
@ -149,6 +193,7 @@
|
||||
<img class="download" src="../../assets/img/icon/components/video/download.png" alt="" @click.stop="$no">
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -157,13 +202,15 @@ import Indicator from '../../components/Indicator'
|
||||
import {nextTick} from 'vue'
|
||||
import {mapState} from "vuex";
|
||||
import bus from "../../utils/bus";
|
||||
import FromBottomDialog from "../../components/dialog/FromBottomDialog";
|
||||
|
||||
export default {
|
||||
name: "Me",
|
||||
components: {Posters, Indicator},
|
||||
components: {FromBottomDialog, Posters, Indicator},
|
||||
data() {
|
||||
return {
|
||||
isFollowed: false,
|
||||
isShowRecommend: false,
|
||||
previewImg: '',
|
||||
contentIndex: 0,
|
||||
baseActiveIndex: 0,
|
||||
@ -172,6 +219,7 @@ export default {
|
||||
floatShowName: false,
|
||||
isScroll: false,
|
||||
isMoreFunction: false,
|
||||
showFollowSetting: false,
|
||||
refs: {
|
||||
header: null,
|
||||
headerHeight: 0,
|
||||
@ -226,6 +274,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['friends']),
|
||||
bodyHeight() {
|
||||
return this.$store.state.bodyHeight
|
||||
},
|
||||
@ -263,6 +312,22 @@ export default {
|
||||
bus.on('baseSlide-end', () => this.canScroll = true)
|
||||
},
|
||||
methods: {
|
||||
toggleRecommend() {
|
||||
this.isShowRecommend = !this.isShowRecommend
|
||||
},
|
||||
friendsTouchStart() {
|
||||
this.$emit('toggleCanMove', false)
|
||||
},
|
||||
friendsTouchEnd() {
|
||||
this.$emit('toggleCanMove', true)
|
||||
},
|
||||
followButton() {
|
||||
if (this.isFollowed) {
|
||||
this.$nav('/message/chat')
|
||||
} else {
|
||||
this.isFollowed = true
|
||||
}
|
||||
},
|
||||
setLoadingFalse() {
|
||||
this.loadings.loading0 = false
|
||||
this.loadings.loading1 = false
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<img style="transform: scale(1.1)" src="../../assets/img/icon/message/video-white.png" alt="">
|
||||
<img src="../../assets/img/icon/menu-white.png" alt="" @click="$nav('/chat-detail')">
|
||||
<img src="../../assets/img/icon/menu-white.png" alt="" @click="$nav('/message/chat-detail')">
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-wrapper" :class="isExpand ? 'expand' : ''">
|
||||
@ -397,6 +397,7 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.header {
|
||||
z-index: 2;
|
||||
|
||||
@ -43,34 +43,22 @@
|
||||
</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 red">确认拉黑</div>
|
||||
<div class="row">不让 TA 看</div>
|
||||
<div class="space"></div>
|
||||
<div class="row" @click="blockDialog = false">取消</div>
|
||||
</div>
|
||||
</from-bottom-dialog>
|
||||
<BlockDialog v-model="blockDialog"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Switches from './components/swtich/switches';
|
||||
import People from "../people/components/People";
|
||||
import FromBottomDialog from "../../components/dialog/FromBottomDialog";
|
||||
import BlockDialog from "./components/BlockDialog";
|
||||
|
||||
export default {
|
||||
name: "ChatDetail",
|
||||
components: {
|
||||
Switches,
|
||||
People,
|
||||
FromBottomDialog
|
||||
FromBottomDialog,
|
||||
BlockDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -142,39 +130,6 @@ 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;
|
||||
}
|
||||
|
||||
&.red{
|
||||
color: @primary-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 1rem;
|
||||
background: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="line mb2r"></div>
|
||||
<div class="friends pl1r ">
|
||||
<div class="friend pr1r pl1r"
|
||||
@click="$nav('/chat')"
|
||||
@click="$nav('/message/chat')"
|
||||
v-for="item in 10">
|
||||
<div class="avatar on-line">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="">
|
||||
|
||||
81
src/pages/message/components/BlockDialog.vue
Normal file
81
src/pages/message/components/BlockDialog.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
v-model="modelValue"
|
||||
:show-heng-gang="false"
|
||||
height="20rem"
|
||||
@cancel='cancel'
|
||||
mode="white">
|
||||
<div class="block-dialog">
|
||||
<div class="notice">
|
||||
拉黑后，对方将无法搜索到你，也不能再给你发私信
|
||||
</div>
|
||||
<div class="row red">确认拉黑</div>
|
||||
<div class="row">不让 TA 看</div>
|
||||
<div class="space"></div>
|
||||
<div class="row" @click="cancel">取消</div>
|
||||
</div>
|
||||
</from-bottom-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
|
||||
|
||||
export default {
|
||||
name: "BlockDialog",
|
||||
components: {
|
||||
FromBottomDialog
|
||||
},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('update:modelValue', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: @primary-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 1rem;
|
||||
background: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -91,4 +91,4 @@ export default {
|
||||
|
||||
</script>
|
||||
|
||||
<!--<style src="./switches.less" lang="less"></style>-->
|
||||
<style src="./switches.less" lang="less"></style>
|
||||
|
||||
@ -64,6 +64,8 @@ const routes = [
|
||||
{path: '/message', component: Message},
|
||||
{path: '/message/share-to-friend', component: Share2Friend},
|
||||
{path: '/message/joined-group-chat', component: JoinedGroupChat},
|
||||
{path: '/message/chat', component: Chat},
|
||||
{path: '/message/chat-detail', component: ChatDetail},
|
||||
{path: '/me', component: Me},
|
||||
{path: '/me/request-update', component: RequestUpdate},
|
||||
{path: '/edit-userinfo', component: EditUserInfo},
|
||||
@ -86,8 +88,6 @@ const routes = [
|
||||
{path: '/address-list', component: AddressList},
|
||||
{path: '/scan', component: Scan},
|
||||
{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},
|
||||
{path: '/me/right-menu/minor-protection/index', component: MinorProtectionIndex},
|
||||
|
||||
1134
src/store/index.js
1134
src/store/index.js
File diff suppressed because it is too large
Load Diff
@ -6,6 +6,7 @@ import Loading from "../components/Loading";
|
||||
import Config from '../config'
|
||||
import NoticeDialog from "../components/dialog/NoticeDialog";
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
$showLoading() {
|
||||
const app = Vue.createApp({
|
||||
@ -140,7 +141,7 @@ export default {
|
||||
document.body.removeChild(div)
|
||||
}, 1000)
|
||||
},
|
||||
$no(){
|
||||
$no() {
|
||||
this.$notice('未实现')
|
||||
},
|
||||
$back() {
|
||||
@ -169,6 +170,24 @@ export default {
|
||||
// return reg.test(val) ? parseFloat(val) : val
|
||||
return parseFloat(val)
|
||||
},
|
||||
$getCss2(curEle, attr) {
|
||||
let val = null, reg = null
|
||||
if ("getComputedStyle" in window) {
|
||||
val = window.getComputedStyle(curEle, null)[attr]
|
||||
} else { //ie6~8不支持上面属性
|
||||
//不兼容
|
||||
if (attr === "opacity") {
|
||||
val = curEle.currentStyle["filter"] //'alpha(opacity=12,345)'
|
||||
reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i
|
||||
val = reg.test(val) ? reg.exec(val)[1] / 100 : 1
|
||||
} else {
|
||||
val = curEle.currentStyle[attr]
|
||||
}
|
||||
}
|
||||
// reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
|
||||
// return reg.test(val) ? parseFloat(val) : val
|
||||
return val
|
||||
},
|
||||
$setCss(el, key, value) {
|
||||
// console.log(value)
|
||||
if (key === 'transform') {
|
||||
@ -232,7 +251,8 @@ export default {
|
||||
}
|
||||
},
|
||||
$imgPreview(url) {
|
||||
if (url.includes('http')){
|
||||
if (!url) return
|
||||
if (url.includes('http')) {
|
||||
return url
|
||||
}
|
||||
return Config.filePreview + url
|
||||
@ -275,8 +295,8 @@ export default {
|
||||
|
||||
$dateFormat(val, type) {
|
||||
if (!val) return
|
||||
if (val.length === 10){
|
||||
val+='000'
|
||||
if (val.length === 10) {
|
||||
val += '000'
|
||||
}
|
||||
if (typeof val === 'string' && (val.length === 10 || val.length === 13)) {
|
||||
val = Number(val)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user