This commit is contained in:
zyronon 2021-10-09 23:18:19 +08:00
parent cc3dee6466
commit b21fae2b6a
14 changed files with 166 additions and 73 deletions

View File

@ -79,7 +79,6 @@ export default {
'/message/chat-detail', '/message/chat-detail',
'/set-remark', '/set-remark',
'/me/request-update',
'/me/right-menu/look-history', '/me/right-menu/look-history',
'/me/right-menu/minor-protection/index', '/me/right-menu/minor-protection/index',
'/me/right-menu/minor-protection/detail-setting', '/me/right-menu/minor-protection/detail-setting',
@ -88,6 +87,8 @@ export default {
'/me/collect/video-collect', '/me/collect/video-collect',
'/me/collect/music-collect', '/me/collect/music-collect',
'/me/my-music', '/me/my-music',
'/me/request-update',
'/me/my-request-update',
'/login', '/login',
'/login/other', '/login/other',

View File

@ -16,6 +16,7 @@
padding: 1rem 1.8rem; padding: 1rem 1.8rem;
border-radius: .3rem; border-radius: .3rem;
font-size: 1.4rem; font-size: 1.4rem;
white-space: nowrap;
} }
.row { .row {

View File

@ -5,7 +5,7 @@
<input type="text" :placeholder="placeholder" v-model="value" > <input type="text" :placeholder="placeholder" v-model="value" >
<div class="suffix"> <div class="suffix">
<slot v-if="$slots.default"></slot> <slot v-if="$slots.default"></slot>
<img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click.stop="clear"> <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/login/close-full-gray.png" @click.stop="clear">
</div> </div>
</div> </div>
<div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">{{ showText }}</div> <div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">{{ showText }}</div>

View File

@ -2,14 +2,14 @@
<div class="Help"> <div class="Help">
<BaseHeader> <BaseHeader>
<template v-slot:center> <template v-slot:center>
<span class="f16 fb">帮助</span> <span class="f16 fb">帮助与设置</span>
</template> </template>
<template v-slot:right> <template v-slot:right>
<span class="f14">我的反馈</span> <span class="f14">我的反馈</span>
</template> </template>
</BaseHeader> </BaseHeader>
<div class="content"> <div class="content">
<iframe src="https://kf.qq.com/touch/product/wechat_app.html" /> <iframe src="https://kf.qq.com/touch/product/wechat_app.html"/>
</div> </div>
</div> </div>
</template> </template>
@ -44,7 +44,7 @@ export default {
margin-top: 6rem; margin-top: 6rem;
height: calc(100vh - 6rem); height: calc(100vh - 6rem);
iframe{ iframe {
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;

View File

@ -2,18 +2,19 @@
<div class="login"> <div class="login">
<BaseHeader mode="light" backMode="dark" backImg="close"> <BaseHeader mode="light" backMode="dark" backImg="close">
<template v-slot:right> <template v-slot:right>
<span class="f16" @click="$nav('/login/help')">帮助</span> <span class="f14" @click="$nav('/login/help')">帮助与设置</span>
</template> </template>
</BaseHeader> </BaseHeader>
<div class="content"> <Loading v-if="loading.getPhone"/>
<div v-else class="content">
<div class="desc"> <div class="desc">
<div class="title">登录看朋友内容</div> <div class="title">登录看朋友内容</div>
<div class="phone-number">138****8000</div> <div class="phone-number">138****8000</div>
<div class="sub-title">认证服务由中国移动提供</div> <div class="sub-title">认证服务由中国移动提供</div>
</div> </div>
<b-button :loading="loading" :active="false" :loadingWithText="true" @click="login"> <b-button type="primary" :loading="loading.login" :active="false" :loadingWithText="true" @click="login">
{{ loading ? '登录中' : '一键登录' }} {{ loading.login ? '登录中' : '一键登录' }}
</b-button> </b-button>
<b-button :active="false" type="white" @click="$nav('/login/other')">其他手机号码登录</b-button> <b-button :active="false" type="white" @click="$nav('/login/other')">其他手机号码登录</b-button>
@ -38,10 +39,10 @@
<div class="other-login"> <div class="other-login">
<transition name="fade"> <transition name="fade">
<div v-if="isOtherLogin" class="icons"> <div v-if="isOtherLogin" class="icons">
<img src="../../assets/img/icon/login/toutiao-round.png" alt=""> <img @click="$no" src="../../assets/img/icon/login/toutiao-round.png" alt="">
<img src="../../assets/img/icon/login/qq-round.webp" alt=""> <img @click="$no" src="../../assets/img/icon/login/qq-round.webp" alt="">
<img src="../../assets/img/icon/login/wechat-round.png" alt=""> <img @click="$no" src="../../assets/img/icon/login/wechat-round.png" alt="">
<img src="../../assets/img/icon/login/weibo-round.webp" alt=""> <img @click="$no" src="../../assets/img/icon/login/weibo-round.webp" alt="">
</div> </div>
</transition> </transition>
</div> </div>
@ -54,12 +55,14 @@
<script> <script>
import Check from "../../components/Check"; import Check from "../../components/Check";
import Tooltip from "./components/Tooltip"; import Tooltip from "./components/Tooltip";
import Loading from "../../components/Loading";
export default { export default {
name: "login", name: "login",
components: { components: {
Check, Check,
Tooltip Tooltip,
Loading
}, },
data() { data() {
return { return {
@ -67,16 +70,26 @@ export default {
isOtherLogin: false, isOtherLogin: false,
showAnim: false, showAnim: false,
showTooltip: false, showTooltip: false,
loading: false loading: {
login: false,
getPhone: false,
}
} }
}, },
computed: {}, computed: {},
created() { created() {
this.getPhone()
}, },
methods: { methods: {
async getPhone() {
this.loading.getPhone = true
await this.$sleep(1000)
this.loading.getPhone = false
},
login() { login() {
if (this.isAgree) { if (this.isAgree) {
this.loading = true this.loading.login = true
} else { } else {
if (!this.showAnim && !this.showTooltip) { if (!this.showAnim && !this.showTooltip) {
this.showAnim = true this.showAnim = true

View File

@ -2,7 +2,7 @@
<div class="other-login" id="other-login"> <div class="other-login" id="other-login">
<BaseHeader mode="light" backMode="dark" backImg="back"> <BaseHeader mode="light" backMode="dark" backImg="back">
<template v-slot:right> <template v-slot:right>
<span class="f16">帮助</span> <span class="f14" @click="$nav('/login/help')">帮助与设置</span>
</template> </template>
</BaseHeader> </BaseHeader>
<div class="content"> <div class="content">
@ -31,7 +31,7 @@
</div> </div>
</div> </div>
<b-button :loading="loading" :active="false" :disabled="phone.length < 10" @click="getCode"> <b-button type="primary" :loading="loading" :active="false" :disabled="phone.length < 10" @click="getCode">
获取短信验证码 获取短信验证码
</b-button> </b-button>
@ -47,19 +47,19 @@
height="27rem" height="27rem"
mode="white"> mode="white">
<div class="block-dialog"> <div class="block-dialog">
<div class="item"> <div class="item" @click="$no">
<img src="../../assets/img/icon/login/toutiao-round.png" alt=""> <img src="../../assets/img/icon/login/toutiao-round.png" alt="">
<span>今日头条登录</span> <span>今日头条登录</span>
</div> </div>
<div class="item"> <div class="item" @click="$no">
<img src="../../assets/img/icon/login/qq.webp" alt=""> <img src="../../assets/img/icon/login/qq.webp" alt="">
<span>QQ登录</span> <span>QQ登录</span>
</div> </div>
<div class="item"> <div class="item" @click="$no">
<img src="../../assets/img/icon/login/wechat.webp" alt=""> <img src="../../assets/img/icon/login/wechat.webp" alt="">
<span>微信登录</span> <span>微信登录</span>
</div> </div>
<div class="item"> <div class="item" @click="$no">
<img src="../../assets/img/icon/login/weibo.webp" alt=""> <img src="../../assets/img/icon/login/weibo.webp" alt="">
<span>微博登录</span> <span>微博登录</span>
</div> </div>

View File

@ -2,7 +2,7 @@
<div class="PasswordLogin"> <div class="PasswordLogin">
<BaseHeader mode="light" backMode="dark" backImg="back"> <BaseHeader mode="light" backMode="dark" backImg="back">
<template v-slot:right> <template v-slot:right>
<span class="f16">帮助</span> <span class="f14" @click="$nav('/login/help')">帮助与设置</span>
</template> </template>
</BaseHeader> </BaseHeader>
<div class="content"> <div class="content">
@ -31,7 +31,7 @@
{{ notice }} {{ notice }}
</div> </div>
<b-button :loading="loading" :active="false" :disabled="disabled" @click="login"> <b-button type="primary" :loading="loading" :active="false" :disabled="disabled" @click="login">
{{ loading ? '登录中' : '登录' }} {{ loading ? '登录中' : '登录' }}
</b-button> </b-button>

View File

@ -45,6 +45,7 @@
</div> </div>
<b-button <b-button
type="primary"
:loading="loading" :loading="loading"
:active="false" :active="false"
:loadingWithText="true" :loadingWithText="true"

View File

@ -2,7 +2,7 @@
<div class="VerificationCode"> <div class="VerificationCode">
<BaseHeader mode="light" backMode="dark" backImg="back"> <BaseHeader mode="light" backMode="dark" backImg="back">
<template v-slot:right> <template v-slot:right>
<span class="f16">帮助</span> <span class="f14" @click="$nav('/login/help')">帮助与设置</span>
</template> </template>
</BaseHeader> </BaseHeader>
<div class="content"> <div class="content">
@ -23,7 +23,7 @@
</span> </span>
</div> </div>
<b-button :loading="loading" :active="false" :disabled="code.length < 4" @click="login"> <b-button type="primary" :loading="loading" :active="false" :disabled="code.length < 4" @click="login">
{{ loading ? '登录中' : '登录' }} {{ loading ? '登录中' : '登录' }}
</b-button> </b-button>

View File

@ -383,7 +383,7 @@
.button { .button {
position: relative; position: relative;
width: 32%; width: 49%;
font-size: 1.2rem; font-size: 1.2rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -394,7 +394,7 @@
color: white; color: white;
.not-read { .not-read {
right: 1.5rem; right: 4.5rem;
position: absolute; position: absolute;
} }
} }

View File

@ -11,7 +11,7 @@
</div> </div>
<transition name="fade"> <transition name="fade">
<div class="center" v-if="floatShowName"> <div class="center" v-if="floatShowName">
<p class="name f22 mt1r mb1r">ttentau</p> <p class="name f20 mt1r mb1r">{{ userinfo.nickname }}</p>
</div> </div>
</transition> </transition>
<div class="right"> <div class="right">
@ -100,9 +100,6 @@
<div class="button" @click="$nav('/edit-userinfo')"> <div class="button" @click="$nav('/edit-userinfo')">
<span>编辑资料</span> <span>编辑资料</span>
</div> </div>
<div class="button" @click="$nav('/edit-userinfo')">
<span>主页访客</span>
</div>
<div class="button" @click="$nav('/people/find-acquaintance')"> <div class="button" @click="$nav('/people/find-acquaintance')">
<span>添加朋友</span> <span>添加朋友</span>
<div class="not-read"></div> <div class="not-read"></div>
@ -412,36 +409,6 @@ export default {
acceleration: 1.2, acceleration: 1.2,
sprint: 15, sprint: 15,
canScroll: true, canScroll: true,
localAuthor: {
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: 1,
},
"id": "93864497380",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": require('../../assets/img/icon/avatar/1.png'),
"city": "成都",
"province": '四川',
"country": "中国",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
"follower_count": 235000,
"aweme_count": 1796000,
"nickname": "我是小睿耶",
"phone": "",
"sex": "",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 1
},
videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}` videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`
} }
}, },

View File

@ -0,0 +1,92 @@
<template>
<div class="RequestUpdate" id="RequestUpdate">
<BaseHeader>
<template v-slot:center>
<span class="f16">我的求更新记录</span>
</template>
</BaseHeader>
<div class="content">
<div class="request">
<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>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
import FromBottomDialog from "../../components/dialog/FromBottomDialog";
export default {
name: "RequestUpdate",
components: {FromBottomDialog},
data() {
return {}
},
computed: {
...mapState(['friends'])
},
created() {
},
methods: {}
}
</script>
<style scoped lang="less">
@import "../../assets/less/index";
.RequestUpdate {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding: 6rem 1.5rem 6rem 1.5rem;
.request {
.list {
.item {
padding: 1rem 0;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
@width: 4.2rem;
img {
width: @width;
height: @width;
border-radius: 50%;
margin-right: 1rem;
}
}
.time{
font-size: 1.2rem;
color: @second-text-color;
}
}
}
}
}
}
</style>

View File

@ -6,7 +6,7 @@
</template> </template>
<template v-slot:right> <template v-slot:right>
<div> <div>
<img src="../../assets/img/icon/menu-gray.png" style="width: 2rem;" @click="showOption = true"> <img src="../../assets/img/icon/menu-gray.png" style="width: 2rem;" @click="isShowOption = true">
</div> </div>
</template> </template>
</BaseHeader> </BaseHeader>
@ -25,7 +25,7 @@
<img :src='$imgPreview(item.avatar)'> <img :src='$imgPreview(item.avatar)'>
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
</div> </div>
<span class="time">{{ $dateFormat(item.lastLoginTime) }}</span> <span class="time">{{ $dateFormat(item.lastLoginTime,'D') }}</span>
</div> </div>
</div> </div>
<no-more>最多展示100位粉丝的历史求更新记录</no-more> <no-more>最多展示100位粉丝的历史求更新记录</no-more>
@ -41,15 +41,15 @@
height="16rem" height="16rem"
:show-heng-gang="false" :show-heng-gang="false"
mode="white" mode="white"
v-model="showOption"> v-model="isShowOption">
<div class="l-row" @click="$no"> <div class="l-row" @click="toggleRequestUpdate">
关闭求更新提醒 {{ openRequestUpdate ? '关闭' : '开启' }}求更新提醒
</div> </div>
<div class="l-row" @click="$no"> <div class="l-row" @click="$nav('/me/my-request-update')">
我的求更新提醒 我的求更新提醒
</div> </div>
<div class="space"></div> <div class="space"></div>
<div class="l-row" @click="showOption = false"> <div class="l-row" @click="isShowOption = false">
取消 取消
</div> </div>
</from-bottom-dialog> </from-bottom-dialog>
@ -64,7 +64,8 @@ export default {
components: {FromBottomDialog}, components: {FromBottomDialog},
data() { data() {
return { return {
showOption: false isShowOption: false,
openRequestUpdate: true,
} }
}, },
computed: { computed: {
@ -72,7 +73,17 @@ export default {
}, },
created() { created() {
}, },
methods: {} methods: {
toggleRequestUpdate() {
this.openRequestUpdate = !this.openRequestUpdate
this.isShowOption = false
if (this.openRequestUpdate) {
this.$notice('提醒已开启,再次点击可关闭')
} else {
this.$notice('提醒已关闭,再次点击可开启')
}
}
}
} }
</script> </script>
@ -127,6 +138,11 @@ export default {
margin-right: 1rem; margin-right: 1rem;
} }
} }
.time{
font-size: 1.2rem;
color: @second-text-color;
}
} }
} }
} }

View File

@ -57,6 +57,7 @@ import MusicCollect from "../pages/me/collect/MusicCollect";
import VideoCollect from "../pages/me/collect/VideoCollect"; import VideoCollect from "../pages/me/collect/VideoCollect";
import MyMusic from "../pages/me/MyMusic"; import MyMusic from "../pages/me/MyMusic";
import FollowAndFans from "../pages/people/FollowAndFans"; import FollowAndFans from "../pages/people/FollowAndFans";
import MyRequestUpdate from "../pages/me/MyRequestUpdate";
const routes = [ const routes = [
// {path: '', component: Music}, // {path: '', component: Music},
@ -83,8 +84,6 @@ const routes = [
{path: '/message/joined-group-chat', component: JoinedGroupChat}, {path: '/message/joined-group-chat', component: JoinedGroupChat},
{path: '/message/chat', component: Chat}, {path: '/message/chat', component: Chat},
{path: '/message/chat-detail', component: ChatDetail}, {path: '/message/chat-detail', component: ChatDetail},
{path: '/me', component: Me},
{path: '/me/request-update', component: RequestUpdate},
{path: '/edit-userinfo', component: EditUserInfo}, {path: '/edit-userinfo', component: EditUserInfo},
{path: '/edit-userinfo-item', component: EditUserInfoItem}, {path: '/edit-userinfo-item', component: EditUserInfoItem},
{path: '/country-choose', component: countryChoose}, {path: '/country-choose', component: countryChoose},
@ -109,6 +108,7 @@ const routes = [
{path: '/face-to-face', component: FaceToFace}, {path: '/face-to-face', component: FaceToFace},
{path: '/set-remark', component: SetRemark}, {path: '/set-remark', component: SetRemark},
{path: '/me', component: Me},
{path: '/me/right-menu/look-history', component: LookHistory}, {path: '/me/right-menu/look-history', component: LookHistory},
{path: '/me/right-menu/minor-protection/index', component: MinorProtectionIndex}, {path: '/me/right-menu/minor-protection/index', component: MinorProtectionIndex},
{path: '/me/right-menu/minor-protection/detail-setting', component: MinorProtectionDetailSetting}, {path: '/me/right-menu/minor-protection/detail-setting', component: MinorProtectionDetailSetting},
@ -117,6 +117,8 @@ const routes = [
{path: '/me/collect/music-collect', component: MusicCollect}, {path: '/me/collect/music-collect', component: MusicCollect},
{path: '/me/collect/video-collect', component: VideoCollect}, {path: '/me/collect/video-collect', component: VideoCollect},
{path: '/me/my-music', component: MyMusic}, {path: '/me/my-music', component: MyMusic},
{path: '/me/request-update', component: RequestUpdate},
{path: '/me/my-request-update', component: MyRequestUpdate},
{path: '/login', component: Login}, {path: '/login', component: Login},
{path: '/login/other', component: OtherLogin}, {path: '/login/other', component: OtherLogin},