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-10-17 03:27:45 +08:00
parent 33fc9c78c0
commit 7d0bede2e7
17 changed files with 1418 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -57,6 +57,12 @@ export default {
'/message/fans',
'/message/all',
'/message/visitors',
'/message/douyin-helper',
'/message/system-notice',
'/message/task-notice',
'/message/live-notice',
'/message/money-notice',
'/message/notice-setting',
'/country-choose',
'/edit-userinfo',

0
src/assets/img/icon/components/gray-close - 副本.png → src/assets/img/icon/components/gray-close.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/assets/img/icon/message/menu-thin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/assets/img/icon/message/task.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/img/icon/msg-icon8.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/img/icon/msg-icon9.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

12
src/pages/me/RequestUpdate.vue
View File

@ -17,15 +17,16 @@
<div class="subtitle">当粉丝期待你的新作品时，会点击“求更新”提醒你</div>
</div>
<div class="request">
<div class="title">近7天收到1次求更新</div>
<div class="subtitle">上次发布作品：2020-08-01 上次开播：昨天23:12</div>
<!-- <div class="title">近7天收到1次求更新</div>-->
<!-- <div class="subtitle f12">上次发布作品：2020-08-01 上次开播：昨天23:12</div>-->
<div class="subtitle f12">历史求更新（粉丝送礼后7天未开播则退还礼物）</div>
<div class="list">
<div class="item" v-for="item in friends.all">
<div class="left">
<img :src='$imgPreview(item.avatar)'>
<span class="name">{{ item.name }}</span>
</div>
<span class="time">{{ $dateFormat(item.lastLoginTime,'D') }}</span>
<span class="time">{{ $dateFormat(item.lastLoginTime, 'D') }}</span>
</div>
</div>
<no-more>最多展示100位粉丝的历史求更新记录</no-more>
@ -116,8 +117,7 @@ export default {
.request {
.list {
margin-top: 2rem;
border-top: 1px solid #cccccc11;
margin-top: @padding-page;
.item {
padding: 1rem 0;
@ -139,7 +139,7 @@ export default {
}
}
.time{
.time {
font-size: 1.2rem;
color: @second-text-color;
}

402
src/pages/message/Message.vue
View File

@ -1,208 +1,254 @@
<template>
<div id="Message" ref="app" :class="createChatDialog?'disable-scroll':''">
<div class="header ">
<div class="title">
<p class="tac c-white ">消息</p>
<span @click="createChatDialog = true">创建群聊</span>
</div>
<div class="header">
<span style="opacity: 0;">消息</span>
<span class="f18">消息</span>
<span class="f14" @click="createChatDialog = true">创建群聊</span>
</div>
<Search class="m2r"></Search>
<div class="friends pl1r ">
<div class="friend pr1r pl1r"
@click="$nav('/message/chat')"
v-for="(item,index) in friends.all">
<div class="avatar" :class="index%2===0?'on-line':''">
<img :src="$imgPreview(item.avatar)" alt="">
<div class="content">
<Search class="m2r"></Search>
<div class="friends pl1r ">
<div class="friend pr1r pl1r"
@click="$nav('/message/chat')"
v-for="(item,index) in friends.all">
<div class="avatar" :class="index%2===0?'on-line':''">
<img :src="$imgPreview(item.avatar)" alt="">
</div>
<span>{{ item.name }}</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/icon/message/setting.png" alt="">
<span class="ml1r">状态设置</span>
</div>
<span>{{ item.name }}</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/icon/message/setting.png" alt="">
<span class="ml1r">状态设置</span>
</div>
</div>
<div class="line mt2r"></div>
<div class="line mt2r"></div>
<div class="messages ">
<!-- 粉丝-->
<div class="message" @click="$nav('/message/fans')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon1.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>粉丝</span>
<div class="messages ">
<!-- 粉丝-->
<div class="message" @click="$nav('/message/fans')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon1.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>粉丝</span>
</div>
<div class="detail">
xxx 关注了你
</div>
</div>
<div class="detail">
xxx 关注了你
<div class="right">
<back class="arrow" mode="gray" img="back" direction="right"/>
</div>
</div>
<div class="right">
<back class="arrow" mode="gray" img="back" direction="right"/>
</div>
<!-- 互动消息-->
<div class="message" @click="$nav('/message/all')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon2.png" alt="" class="head-image">
</div>
</div>
</div>
<!-- 互动消息-->
<div class="message" @click="$nav('/message/all')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon2.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>互动消息</span>
<div class="content">
<div class="left">
<div class="name">
<span>互动消息</span>
</div>
<div class="detail">
xxx 赞了你的评论
</div>
</div>
<div class="detail">
xxx 赞了你的评论
<div class="right">
<back class="arrow" mode="gray" img="back" direction="right"/>
</div>
</div>
<div class="right">
<back class="arrow" mode="gray" img="back" direction="right"/>
</div>
<!-- 抖音小助手-->
<div class="message" @click="$nav('/message/douyin-helper')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon5.webp" alt="" class="head-image">
</div>
</div>
</div>
<!-- 抖音小助手-->
<div class="message">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon5.webp" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>抖音小助手</span>
<span class="tag">官方</span>
<div class="content">
<div class="left">
<div class="name">
<span>抖音小助手</span>
<span class="tag">官方</span>
</div>
<div class="detail">
#今天谁请客呢
<div class="point"></div>
星期四
</div>
</div>
<div class="detail">
#今天谁请客呢
<div class="point"></div>
星期四
<div class="right">
<div class="not-read"></div>
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
<!-- 系统通知-->
<div class="message" @click="$nav('/message/system-notice')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon4.png" alt="" class="head-image">
</div>
</div>
</div>
<!-- 系统通知-->
<div class="message">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon4.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>系统通知</span>
<span class="tag">官方</span>
<div class="content">
<div class="left">
<div class="name">
<span>系统通知</span>
<span class="tag">官方</span>
</div>
<div class="detail">
协议修订通知
<div class="point"></div>
08-31
</div>
</div>
<div class="detail">
协议修订通知
<div class="point"></div>
08-31
<div class="right">
<div class="not-read"></div>
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
<!-- 求更新-->
<div class="message" @click="$nav('/me/request-update')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon7.webp" alt="" class="head-image">
</div>
</div>
</div>
<!-- 求更新-->
<div class="message">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon7.webp" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>求更新</span>
<span class="tag">官方</span>
<div class="content">
<div class="left">
<div class="name">
<span>求更新</span>
<span class="tag">官方</span>
</div>
<div class="detail">
你收到过1次求更新
<div class="point"></div>
10-09
</div>
</div>
<div class="detail">
你收到过1次求更新
<div class="point"></div>
10-09
<div class="right">
<div class="not-read"></div>
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
<!-- 任务通知-->
<div class="message" @click="$nav('/message/task-notice')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon6.webp" alt="" class="head-image">
</div>
</div>
</div>
<!-- 任务通知-->
<div class="message">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon6.webp" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>任务通知</span>
<span class="tag">官方</span>
<div class="content">
<div class="left">
<div class="name">
<span>任务通知</span>
<span class="tag">官方</span>
</div>
<div class="detail">
发作品得流量
<div class="point"></div>
05-26
</div>
</div>
<div class="detail">
发作品得流量
<div class="point"></div>
05-26
<div class="right">
<div class="not-read"></div>
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
<!-- 直播通知-->
<div class="message" @click="$nav('/message/live-notice')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon8.webp" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>直播通知</span>
<span class="tag">官方</span>
</div>
<div class="detail">
举报结果通知
<div class="point"></div>
05-26
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
</div>
</div>
<!-- 钱包通知-->
<div class="message" @click="$nav('/message/money-notice')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon9.webp" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>钱包通知</span>
<span class="tag">官方</span>
</div>
<div class="detail">
卡券发放提醒
<div class="point"></div>
05-26
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
</div>
</div>
</div>
<!-- 消息-->
<div class="message">
<div class="avatar on-line">
<img src="../../assets/img/icon/avatar/2.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>{{ userinfo.nickname }}</span>
<!-- 消息-->
<div class="message">
<div class="avatar on-line">
<img src="../../assets/img/icon/avatar/2.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>{{ userinfo.nickname }}</span>
</div>
<div class="detail">
哈哈哈哈哈哈
<div class="point"></div>
10-10
</div>
</div>
<div class="detail">
哈哈哈哈哈哈
<div class="point"></div>
10-10
<div class="right">
<!-- <div class="not-read"></div>-->
<!-- <img class="camera" src="../../assets/img/icon/close-white.png" alt="">-->
<!-- <img class="arrow" src="../../assets/img/icon/close-white.png" alt="">-->
<div class="badge">12</div>
</div>
</div>
<div class="right">
<!-- <div class="not-read"></div>-->
<!-- <img class="camera" src="../../assets/img/icon/close-white.png" alt="">-->
<!-- <img class="arrow" src="../../assets/img/icon/close-white.png" alt="">-->
<div class="badge">12</div>
</div>
</div>
</div>
<!-- 模板-->
<!-- <div class="message">-->
<!-- <div class="avatar on-line">-->
<!-- <img src="../../assets/img/icon/avatar/2.png" alt="" class="head-image">-->
<!-- </div>-->
<!-- <div class="content">-->
<!-- <div class="left">-->
<!-- <div class="name">-->
<!-- <span>粉丝</span>-->
<!-- <span class="tag">官方</span>-->
<!-- </div>-->
<!-- <div class="detail">-->
<!-- <img class="sent" src="../../assets/img/icon/close-white.png" alt="">-->
<!-- 已送达 ，sb，凌晨 01:15-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- &lt;!&ndash; <div class="not-read"></div>&ndash;&gt;-->
<!-- &lt;!&ndash; <img class="camera" src="../../assets/img/icon/close-white.png" alt="">&ndash;&gt;-->
<!-- &lt;!&ndash; <img class="arrow" src="../../assets/img/icon/close-white.png" alt="">&ndash;&gt;-->
<!-- <div class="badge">12</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<NoMore/>
<!-- 模板-->
<!-- <div class="message">-->
<!-- <div class="avatar on-line">-->
<!-- <img src="../../assets/img/icon/avatar/2.png" alt="" class="head-image">-->
<!-- </div>-->
<!-- <div class="content">-->
<!-- <div class="left">-->
<!-- <div class="name">-->
<!-- <span>粉丝</span>-->
<!-- <span class="tag">官方</span>-->
<!-- </div>-->
<!-- <div class="detail">-->
<!-- <img class="sent" src="../../assets/img/icon/close-white.png" alt="">-->
<!-- 已送达 ，sb，凌晨 01:15-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- &lt;!&ndash; <div class="not-read"></div>&ndash;&gt;-->
<!-- &lt;!&ndash; <img class="camera" src="../../assets/img/icon/close-white.png" alt="">&ndash;&gt;-->
<!-- &lt;!&ndash; <img class="arrow" src="../../assets/img/icon/close-white.png" alt="">&ndash;&gt;-->
<!-- <div class="badge">12</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<Footer v-bind:init-tab="4"/>
<from-bottom-dialog page-id="Message" v-model="createChatDialog">
<div class="create-chat-wrapper" v-show="!showJoinedChat">
<Search :isShowText="isShowText"
@ -639,19 +685,21 @@ export default {
}
.header {
margin-top: 2rem;
position: fixed;
width: 100vw;
background: @main-bg;
z-index: 11;
height: 6rem;
display: flex;
padding: @padding-page;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
}
.title {
font-size: 1.8rem;
position: relative;
.content {
padding-top: @header-height;
span {
font-size: 1.6rem;
position: absolute;
right: 2rem;
top: 0;
}
}
}
.friends {

156
src/pages/message/notice/DouyinHelper.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<div id="DouyinHelper">
<BaseHeader>
<template v-slot:center>
<span class="f16">抖音小助手</span>
</template>
</BaseHeader>
<div class="content" ref="content">
<NoMore/>
<div class="list">
<!--TODO　超过3行显示全文-->
<div class="item" v-for="item in list" @click="goDetail(item)">
<div class="title">{{ item.title }}
<div class="ml1r not-read" v-if="!item.read"></div>
</div>
<div class="time">{{ item.time }}</div>
<div class="content-text">{{ item.content }}</div>
<div class="look-detail">
<span>查看详情</span>
<back direction="right" scale=".6"/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {nextTick} from "vue";
export default {
name: "DouyinHelper",
components: {},
props: {
modelValue: false
},
data() {
return {
list: [
{
read: false,
title: '叮！你有一条《长津湖》观看提醒',
time: '2021-10-12 12:12',
content: '领跑国庆档，吴京、易烊千玺“京玺”兄弟共赴战场！燃爽炸裂的视觉冲击，义勇前行的坚定信念，尽在长津湖“意志之战”。点击查看详情，戳我优惠看>>'
},
{
read: false,
title: '国庆打卡美好中国',
time: '2021-10-12 12:12',
content: '山河千年，风景依旧，一幅幅大美的城市山水画在国庆舞台中徐徐展开。点击[查看详情]在拼音打卡美好中国，领跑不同城市的韵味，最高还能赢10000元旅行红包哦！'
},
{
read: false,
title: '#今天谁请客呢',
time: '2021-10-12 12:12',
content: '你还在为朋友吃饭谁请客发愁吗？快邀请朋友一起来参加花式甩单挑战，今日消费，淘特请客！还不快来拍摄互动视频？现金大奖等你来分！'
},
{
read: false,
title: '#寻找武林第一人',
time: '2021-10-12 12:12',
content: '《天涯明月刀手游》在线悬赏“武林第一人”。10月10日-10月19日内，参与挑战，生成你的专属卡面，测一测你的武林专属称号吧！天刀手游周年庆也在火热进行中，全民福利等你拿! [本活动与Apple Inc.无关]'
},
{
read: false,
title: '谁是偷偷爱你的人',
time: '2021-10-12 12:12',
content: '想知道怎么跟TA们走的更近吗？10月11日-10月16日正好有一个合适的机会，赶紧点击了解详情>>'
},
{
read: false,
title: '看美好奇妙夜，赢万元红包！',
time: '2021-10-12 12:12',
content: '今天晚上8点，2021抖音美好奇妙夜直播开启！30多位艺人、100多位创作者齐聚一堂，为你带来全方位的视听盛宴，观看直播更有机会赢万元红包大奖，更多精彩，不容错过！快来直接间看看吧！ [本活动与Apple Inc.无关]'
},
]
}
},
computed: {},
created() {
},
mounted() {
nextTick(() => {
let content = this.$refs['content']
content.scrollTo({top: content.scrollHeight - content.clientHeight})
})
},
methods: {
goDetail(item) {
item.read = true
this.$no()
}
}
}
</script>
<style scoped lang="less">
@import "@/assets/less/index";
#DouyinHelper {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding: @padding-page;
padding-top: 6rem;
height: 100vh;
overflow: auto;
box-sizing: border-box;
.list {
.item {
padding: @padding-page;
background: @second-btn-color-tran;
border-radius: .5rem;
margin-bottom: 2rem;
.title {
display: flex;
align-items: center;
font-size: 1.6rem;
margin-bottom: 1rem;
}
.time {
font-size: 1.2rem;
color: @second-text-color;
margin-bottom: 2rem;
}
.content-text {
margin-bottom: 3rem;
}
.look-detail {
border-top: 1px solid @line-color2;
padding-top: @padding-page;
color: @second-text-color;
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
}
}
</style>

128
src/pages/message/notice/LiveNotice.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<div id="TaskNotice">
<BaseHeader>
<template v-slot:center>
<span class="f16">直播通知</span>
</template>
<template v-slot:right>
<span class="f14" @click="$nav('/message/notice-setting',{ type : 'LIVE' })">通知设置</span>
</template>
</BaseHeader>
<div class="content">
<div class="list" ref="content">
<NoMore/>
<div class="item" v-for="item in list" @click="goDetail(item)">
<div class="title">{{ item.title }}
</div>
<div class="time">{{ item.time }}</div>
<div class="content-text">{{ item.content }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {nextTick} from "vue";
import Mask from "../../../components/Mask";
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
export default {
name: "SystemNotice",
components: {
FromBottomDialog
},
data() {
return {
list: [
{
title: '直播举报反馈',
time: '2021-10-12 12:12',
content: '你已提交对用户五五开直播内容的举报，我们会在12小时内进行处理，感谢你的监督'
},
{
title: '举报结果通知',
time: '2021-10-12 12:12',
content: '你举报的【五五开】的直播内容，我们将对主播进行重点观察，并进一步判定，若发现违规立刻处理，感谢你的监督'
},
]
}
},
watch: {},
computed: {},
created() {
},
mounted() {
nextTick(() => {
let content = this.$refs['content']
content.scrollTo({top: content.scrollHeight - content.clientHeight})
})
},
methods: {
goDetail(item) {
item.read = true
if (item.detail) {
this.$no()
}
}
}
}
</script>
<style scoped lang="less">
@import "@/assets/less/index";
#TaskNotice {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding-top: 6rem;
.list {
height: calc(100vh - 12rem);
overflow: auto;
box-sizing: border-box;
padding: 0 @padding-page;
.item {
padding: @padding-page;
background: @second-btn-color-tran;
border-radius: .5rem;
margin-bottom: 2rem;
.title {
display: flex;
align-items: center;
font-size: 1.6rem;
margin-bottom: 1rem;
}
.time {
font-size: 1.2rem;
color: @second-text-color;
margin-bottom: 2rem;
}
.content-text {
margin-bottom: 2rem;
}
}
}
.footer {
border-top: 1px solid @line-color;
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>

233
src/pages/message/notice/MoneyNotice.vue Normal file
View File

@ -0,0 +1,233 @@
<template>
<div id="MoneyNotice">
<BaseHeader>
<template v-slot:center>
<span class="f16">钱包通知</span>
</template>
<template v-slot:right>
<span class="f14" @click="$nav('/message/notice-setting',{ type : 'MONEY' })">通知设置</span>
</template>
</BaseHeader>
<div class="content">
<div class="list" ref="content">
<NoMore/>
<!--TODO　超过3行显示全文-->
<div class="item" v-for="item in list" @click="$no">
<div class="header">
<div class="left">
<img src="../../../assets/img/icon/msg-icon9.webp" alt="">
</div>
<div class="right">
<template v-if="item.type === 1">
<span>零钱任务</span>
</template>
<template v-if="item.type === 2">
<span>钱包任务</span>
</template>
<img @click.stop="isShowSetting = true" src="../../../assets/img/icon/menu-gray.png" alt="">
</div>
</div>
<div class="title">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
<template v-if="item.type === 1">
<div class="content-text">退款金额：￥{{ item.money }}</div>
<div class="content-text">退回方式：{{ item.toAccountType }}</div>
<div class="content-text">退款原因：{{ item.desc }}</div>
<div class="content-text">预计到账时间：{{ item.toAccountTime }}</div>
</template>
<template v-if="item.type === 2">
<div class="content-text">{{ item.desc }}</div>
</template>
<div class="look-detail">
<span>查看详情</span>
<back direction="right" scale=".6"/>
</div>
</div>
</div>
</div>
<from-bottom-dialog
page-id="MoneyNotice"
mode="white"
mask-mode="dark"
:show-heng-gang="false"
v-model="isShowSetting"
height="16rem"
>
<div class="setting-dialog">
<div class="row disabled">钱包任务</div>
<div class="row" @click="openNotice = !openNotice;isShowSetting = false">
{{ openNotice ? '关闭' : '开启' }}消息免打扰
</div>
<div class="space"></div>
<div class="row" @click="isShowSetting = false">取消</div>
</div>
</from-bottom-dialog>
</div>
</template>
<script>
import {nextTick} from "vue";
import Mask from "../../../components/Mask";
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
export default {
name: "SystemNotice",
components: {
FromBottomDialog
},
data() {
return {
isShowSetting: false,
openNotice: false,
list: [
{
type: 1,
toAccountType: '退回银行卡(工商银行3333)',
title: '红色退款发起通知',
time: '2021-10-12 12:12',
money: 0.01,
desc: '抖音红包超过24小时未被领取',
toAccountTime: '2021-10-15 12:12',
},
{
type: 2,
toAccountType: '退回银行卡(工商银行3333)',
title: '卡券发放提醒',
time: '2021-10-12 12:12',
money: 0.01,
desc: '尊敬的用户，您获得1张DUO+满赠优惠券 到期时间:2021-08-26 23:23:23',
toAccountTime: '2021-10-15 12:12',
},
]
}
},
watch: {},
computed: {},
created() {
},
mounted() {
nextTick(() => {
let content = this.$refs['content']
content.scrollTo({top: content.scrollHeight - content.clientHeight})
})
},
methods: {}
}
</script>
<style scoped lang="less">
@import "@/assets/less/index";
#MoneyNotice {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding-top: 6rem;
.list {
height: calc(100vh - 12rem);
overflow: auto;
box-sizing: border-box;
padding: 0 @padding-page;
.item {
padding: @padding-page;
background: @second-btn-color-tran;
border-radius: .5rem;
margin-bottom: 2rem;
.header {
display: flex;
align-items: center;
padding-bottom: @padding-page;
margin-bottom: @padding-page;
border-bottom: 1px solid @line-color2;
.left {
display: flex;
align-items: center;
img {
width: 2.5rem;
}
}
.right {
margin-left: 1rem;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 2rem;
}
}
}
.title {
display: flex;
align-items: center;
font-size: 1.6rem;
margin-bottom: 1rem;
}
.time {
font-size: 1.2rem;
color: @second-text-color;
margin-bottom: 2rem;
}
.content-text {
margin-bottom: .3rem;
}
.look-detail {
margin-top: 3rem;
border-top: 1px solid @line-color2;
padding-top: @padding-page;
color: @second-text-color;
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
}
.setting-dialog {
.row {
color: black !important;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid gainsboro;
&:nth-last-child(1) {
border-top: none;
}
&.disabled {
font-size: 1.2rem;
opacity: .5;
}
}
.space {
height: 1rem;
background: whitesmoke;
}
}
}
</style>

145
src/pages/message/notice/NoticeSetting.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<div id="SystemNotice">
<BaseHeader>
<template v-slot:center>
<span class="f16">通知设置</span>
</template>
</BaseHeader>
<div class="content">
<div class="title">消息免打扰</div>
<div class="sub-title">开启后，新通知将用黄点展示，不再展示未读数字</div>
<template v-if="type === 'SYSTEM'">
<div class="row">
<div class="left">系统通知</div>
<switches v-model="option" theme="bootstrap" color="success"></switches>
</div>
</template>
<template v-if="type === 'TASK'">
<div class="row">
<div class="left">运营任务</div>
<switches v-model="option1" theme="bootstrap" color="success"></switches>
</div>
<div class="row">
<div class="left">星图(任务)</div>
<switches v-model="option2" theme="bootstrap" color="success"></switches>
</div>
<div class="row">
<div class="left">成长任务</div>
<switches v-model="option3" theme="bootstrap" color="success"></switches>
</div>
<div class="row">
<div class="left">DUO来评审团</div>
<switches v-model="option4" theme="bootstrap" color="success"></switches>
</div>
<div class="row">
<div class="left">任务中心</div>
<switches v-model="option5" theme="bootstrap" color="success"></switches>
</div>
<div class="row">
<div class="left">中视频伙伴任务</div>
<switches v-model="option6" theme="bootstrap" color="success"></switches>
</div>
</template>
<template v-if="type === 'LIVE'">
<div class="row">
<div class="left">直播</div>
<switches v-model="option7" theme="bootstrap" color="success"></switches>
</div>
</template>
<template v-if="type === 'MONEY'">
<div class="row">
<div class="left">钱包服务</div>
<switches v-model="option8" theme="bootstrap" color="success"></switches>
</div>
<div class="row">
<div class="left">收入服务</div>
<switches v-model="option9" theme="bootstrap" color="success"></switches>
</div>
<div class="row">
<div class="left">零钱服务</div>
<switches v-model="option10" theme="bootstrap" color="success"></switches>
</div>
<div class="row">
<div class="left">抖币服务</div>
<switches v-model="option11" theme="bootstrap" color="success"></switches>
</div>
<div class="row">
<div class="left">卡券服务</div>
<switches v-model="option12" theme="bootstrap" color="success"></switches>
</div>
</template>
</div>
</div>
</template>
<script>
import Switches from "../components/swtich/switches";
export default {
name: "SystemNotice",
components: {Switches},
props: {
modelValue: false
},
data() {
return {
option: true,
option1: false,
option2: false,
option3: true,
option4: false,
option5: false,
option6: false,
option7: true,
option8: false,
option9: false,
option10: false,
option11: false,
option12: false,
type: 'TASK'
}
},
watch: {},
computed: {},
created() {
this.type = this.$route.query.type
},
mounted() {
},
methods: {}
}
</script>
<style scoped lang="less">
@import "@/assets/less/index";
#SystemNotice {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding-top: 6rem;
.title {
padding: @padding-page;
}
.sub-title {
padding: 0 @padding-page;
margin-bottom: 1rem;
color: @second-text-color;
font-size: 1.2rem;
}
}
}
</style>

271
src/pages/message/notice/SystemNotice.vue Normal file
View File

@ -0,0 +1,271 @@
<template>
<div id="SystemNotice">
<BaseHeader>
<template v-slot:center>
<span class="f16">系统通知</span>
</template>
<template v-slot:right>
<span class="f14" @click="$nav('/message/notice-setting',{ type : 'SYSTEM' })">通知设置</span>
</template>
</BaseHeader>
<div class="content">
<div class="list" ref="content">
<NoMore/>
<!--TODO　超过3行显示全文-->
<div class="item" v-for="item in list" @click="goDetail(item)">
<div class="title">{{ item.title }}
<div class="ml1r not-read" v-if="!item.read"></div>
</div>
<div class="time">{{ item.time }}</div>
<div class="content-text">{{ item.content }}</div>
<div class="look-detail" v-if="item.detail">
<span>查看详情</span>
<back direction="right" scale=".6"/>
</div>
</div>
</div>
<!-- TODO 子页面未做-->
<div class="hover-dialog left" v-if="isShowLeftHover">
<div class="arrow"></div>
<div class="l-row no-border" @click="$no">登录设备管理</div>
<div class="l-row" @click="$no">账号锁定</div>
<div class="l-row" @click="$no">账号解锁</div>
</div>
<div class="hover-dialog right" v-if="isShowRightHover">
<div class="arrow"></div>
<div class="l-row no-border" @click="$no">常见问题</div>
<div class="l-row" @click="$no">安全课堂</div>
</div>
<Mask mode="white" v-if="isShowMask" @click="isShowMask = false"/>
<div class="options">
<div class="option" @click="isShowLeftHover = !isShowLeftHover">
<img src="../../../assets/img/icon/message/menu-thin.png" alt="">
<span>自助工具</span>
</div>
<div class="option" @click="$no">
<span>规则中心</span>
</div>
<div class="option" @click="isShowRightHover = !isShowRightHover">
<img src="../../../assets/img/icon/message/menu-thin.png" alt="">
<span>更多帮助</span>
</div>
</div>
</div>
</div>
</template>
<script>
import {nextTick} from "vue";
import Mask from "../../../components/Mask";
export default {
name: "SystemNotice",
components: {Mask},
props: {
modelValue: false
},
data() {
return {
isShowMask: false,
isShowLeftHover: false,
isShowRightHover: false,
list: [
{
read: false,
title: '账号登录提醒',
detail: 'xxx',
time: '2021-10-12 12:12',
content: '您的抖音号4533452342于2021-02-09 07:45:23进行了登录操作。如非本人操作，账号可能被盗。建议立即修改密码，或在[设置-账号与安全-登录设备管理]中删除异常设备。参考设备：iPhone X参考地点：上海市'
},
{
read: false,
title: '账号登录提醒',
detail: 'xxx',
time: '2021-10-12 12:12',
content: '您的抖音号4533452342于2021-02-09 07:45:23进行了登录操作。如非本人操作，账号可能被盗。建议立即修改密码，或在[设置-账号与安全-登录设备管理]中删除异常设备。参考设备：iPhone X参考地点：上海市'
},
{
read: false,
title: '协议修订通知',
detail: '',
time: '2021-10-12 12:12',
content: '你好，根据业务开展的实际情况，抖音近期更新了《抖音用户服务协议》《抖音隐私政策》及《儿童/青少年使用须知》中的相关内容。你可以在“我”-“设置”页面中，查看更新后的协议全文。'
},
{
read: false,
title: '协议修订通知',
detail: '',
time: '2021-10-12 12:12',
content: '你好，根据业务开展的实际情况，抖音近期更新了《抖音用户服务协议》部分条款的表述。你可以在“我”-“设置”页面中，查看更新后的协议全文。'
},
]
}
},
watch: {
isShowLeftHover(newVal) {
if (newVal) {
this.isShowMask = true
}
},
isShowRightHover(newVal) {
if (newVal) {
this.isShowMask = true
}
},
isShowMask(newVal) {
if (!newVal) {
this.isShowLeftHover = false
this.isShowRightHover = false
}
},
},
computed: {},
created() {
},
mounted() {
nextTick(() => {
let content = this.$refs['content']
content.scrollTo({top: content.scrollHeight - content.clientHeight})
})
},
methods: {
goDetail(item) {
item.read = true
if (item.detail) {
this.$no()
}
}
}
}
</script>
<style scoped lang="less">
@import "@/assets/less/index";
#SystemNotice {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding-top: 6rem;
.list {
height: calc(100vh - 12rem);
overflow: auto;
box-sizing: border-box;
padding: 0 @padding-page;
.item {
padding: @padding-page;
background: @second-btn-color-tran;
border-radius: .5rem;
margin-bottom: 2rem;
.title {
display: flex;
align-items: center;
font-size: 1.6rem;
margin-bottom: 1rem;
}
.time {
font-size: 1.2rem;
color: @second-text-color;
margin-bottom: 2rem;
}
.content-text {
margin-bottom: 3rem;
}
.look-detail {
border-top: 1px solid @line-color2;
padding-top: @padding-page;
color: @second-text-color;
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
.options {
border-top: 1px solid @line-color;
height: 6rem;
display: flex;
align-items: center;
.option {
width: 33%;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid @line-color;
&:nth-last-child(1) {
border: none;
}
img {
width: 1rem;
height: 1.5rem;
margin-right: .4rem;
}
}
}
.hover-dialog {
z-index: 9;
position: fixed;
bottom: 8rem;
border-radius: .6rem;
background: rgba(0, 0, 0, 0.9);
font-size: 1.2rem;
&.left {
left: 0;
}
&.right {
right: 0;
}
.arrow {
width: 0;
height: 0;
border: .7rem solid transparent;
border-top: .7rem solid rgba(0, 0, 0, 0.9);
position: absolute;
right: 5rem;
bottom: -1.4rem;
}
.l-row {
width: 12rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
//padding: 1rem 2.2rem;
border-top: 1px solid #2c2c2c;
text-align: center;
&.no-border {
border: none;
}
}
}
}
}
</style>

235
src/pages/message/notice/TaskNotice.vue Normal file
View File

@ -0,0 +1,235 @@
<template>
<div id="TaskNotice">
<BaseHeader>
<template v-slot:center>
<span class="f16">任务通知</span>
</template>
<template v-slot:right>
<span class="f14" @click="$nav('/message/notice-setting',{ type : 'TASK' })">通知设置</span>
</template>
</BaseHeader>
<div class="content">
<div class="list" ref="content">
<NoMore/>
<!--TODO　超过3行显示全文-->
<div class="item" v-for="item in list" @click="goDetail(item)">
<div class="header">
<div class="left">
<img src="../../../assets/img/icon/message/task.webp" alt="">
</div>
<div class="right">
<span>成长任务</span>
<img @click.stop="isShowSetting = true" src="../../../assets/img/icon/menu-gray.png" alt="">
</div>
</div>
<div class="title">{{ item.title }}
<div class="ml1r not-read" v-if="!item.read"></div>
</div>
<div class="time">{{ item.time }}</div>
<div class="content-text">{{ item.content }}</div>
<div class="look-detail" v-if="item.detail">
<span>查看详情</span>
<back direction="right" scale=".6"/>
</div>
</div>
</div>
<div class="footer" @click="$no">查看更多任务</div>
</div>
<from-bottom-dialog
page-id="TaskNotice"
mode="white"
mask-mode="dark"
:show-heng-gang="false"
v-model="isShowSetting"
height="16rem"
>
<div class="setting-dialog">
<div class="row disabled">成长任务</div>
<div class="row" @click="openNotice = !openNotice;isShowSetting = false">
{{ openNotice ? '关闭' : '开启' }}消息免打扰
</div>
<div class="space"></div>
<div class="row" @click="isShowSetting = false">取消</div>
</div>
</from-bottom-dialog>
</div>
</template>
<script>
import {nextTick} from "vue";
import Mask from "../../../components/Mask";
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
export default {
name: "SystemNotice",
components: {
FromBottomDialog
},
data() {
return {
isShowSetting: false,
openNotice: false,
list: [
{
type: 1,
title: '发作品得流量',
detail: 'xxx',
time: '2021-10-12 12:12',
content: '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
},
{
type: 1,
title: '发作品得流量',
detail: 'xxx',
time: '2021-10-12 12:12',
content: '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
},
]
}
},
watch: {},
computed: {},
created() {
},
mounted() {
nextTick(() => {
let content = this.$refs['content']
content.scrollTo({top: content.scrollHeight - content.clientHeight})
})
},
methods: {
goDetail(item) {
item.read = true
if (item.detail) {
this.$no()
}
}
}
}
</script>
<style scoped lang="less">
@import "@/assets/less/index";
#TaskNotice {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding-top: 6rem;
.list {
height: calc(100vh - 12rem);
overflow: auto;
box-sizing: border-box;
padding: 0 @padding-page;
.item {
padding: @padding-page;
background: @second-btn-color-tran;
border-radius: .5rem;
margin-bottom: 2rem;
.header {
display: flex;
align-items: center;
padding-bottom: @padding-page;
margin-bottom: @padding-page;
border-bottom: 1px solid @line-color2;
.left {
display: flex;
align-items: center;
img {
width: 2.5rem;
}
}
.right {
margin-left: 1rem;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 2rem;
}
}
}
.title {
display: flex;
align-items: center;
font-size: 1.6rem;
margin-bottom: 1rem;
}
.time {
font-size: 1.2rem;
color: @second-text-color;
margin-bottom: 2rem;
}
.content-text {
margin-bottom: 3rem;
}
.look-detail {
border-top: 1px solid @line-color2;
padding-top: @padding-page;
color: @second-text-color;
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
.footer {
border-top: 1px solid @line-color;
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
}
}
.setting-dialog {
.row {
color: black !important;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid gainsboro;
&:nth-last-child(1) {
border-top: none;
}
&.disabled {
font-size: 1.2rem;
opacity: .5;
}
}
.space {
height: 1rem;
background: whitesmoke;
}
}
}
</style>

1
src/pages/people/components/People.vue
View File

@ -158,7 +158,6 @@ export default {
background: #353a4f;
}
.head-image {
margin-right: 1.5rem;
width: 4.5rem;

12
src/router/index.js
View File

@ -61,6 +61,12 @@ import MyRequestUpdate from "../pages/me/MyRequestUpdate";
import Fans from "../pages/message/Fans";
import AllMessage from "../pages/message/AllMessage";
import Visitors from "../pages/message/Visitors";
import DouyinHelper from "../pages/message/notice/DouyinHelper";
import SystemNotice from "../pages/message/notice/SystemNotice";
import NoticeSetting from "../pages/message/notice/NoticeSetting";
import TaskNotice from "../pages/message/notice/TaskNotice";
import LiveNotice from "../pages/message/notice/LiveNotice";
import MoneyNotice from "../pages/message/notice/MoneyNotice";
const routes = [
// {path: '', component: Music},
@ -92,6 +98,12 @@ const routes = [
{path: '/message/fans', component: Fans},
{path: '/message/all', component: AllMessage},
{path: '/message/visitors', component: Visitors},
{path: '/message/douyin-helper', component: DouyinHelper},
{path: '/message/system-notice', component: SystemNotice},
{path: '/message/task-notice', component: TaskNotice},
{path: '/message/live-notice', component: LiveNotice},
{path: '/message/money-notice', component: MoneyNotice},
{path: '/message/notice-setting', component: NoticeSetting},
{path: '/edit-userinfo', component: EditUserInfo},

2
src/store/index.js
View File

@ -51,7 +51,7 @@ const store = Vuex.createStore({
{
"id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
"avatar": require('../assets/img/icon/avatar/1.png'),
"name": "冒安志",
"name": "何以为家",
"sex": "",
"age": null,
"idCard": null,