Browse Source

优化

pull/29/head
zyronon 2 years ago
parent
commit
811fd5945c
  1. 21
      src/components/UserPanel.vue
  2. 21
      src/mock/index.js
  3. 38
      src/pages/home/components/FollowSetting.vue
  4. 13
      src/pages/home/index.vue
  5. 2
      src/utils/const_var.js

21
src/components/UserPanel.vue

@ -7,9 +7,9 @@
<img class="back" src="@/assets/img/icon/next.svg" alt=""> <img class="back" src="@/assets/img/icon/next.svg" alt="">
<transition name="fade"> <transition name="fade">
<div class="float-user" v-if="state.floatFixed"> <div class="float-user" v-if="state.floatFixed">
<img v-lazy="Utils.$imgPreview(props.currentItem.user.avatar)" class="avatar"/> <img v-lazy="Utils.$imgPreview(props.currentItem.user.avatar_thumb.url_list[0])" class="avatar"/>
<img v-if="!props.currentItem.user.is_follow" src="@/assets/img/icon/add-light.png" alt="" class="add"> <img v-if="!props.currentItem.user.follow_status" src="@/assets/img/icon/add-light.png" alt="" class="add">
<span @click="followButton">{{ props.currentItem.user.is_follow ? '私信' : '关注' }}</span> <span @click="followButton">{{ props.currentItem.user.follow_status ? '私信' : '关注' }}</span>
</div> </div>
</transition> </transition>
</div> </div>
@ -166,7 +166,7 @@
<img class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt=""> <img class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
</div> </div>
<div class="videos"> <div class="videos">
<Posters v-if="state.videos.my.total !== -1" :list="state.videos.my.list"></Posters> <Posters v-if="props.currentItem.post.length" :list="props.currentItem.post"></Posters>
</div> </div>
</template> </template>
</div> </div>
@ -193,7 +193,7 @@ const props = defineProps({
default: { default: {
user: DefaultUser, user: DefaultUser,
isRequest: false, isRequest: false,
videos: [], post: [],
} }
}, },
active: { active: {
@ -286,7 +286,16 @@ watch(() => props.active,
let res = await api.user.profile() let res = await api.user.profile()
console.log('res', res) console.log('res', res)
if (res.code === 200) { if (res.code === 200) {
emit('update:currentItem', merge(props.currentItem, {user: res.data.user, isRequest: true})) res.data.post = res.data.post.map(v => {
return {
cover: v.video.cover.url_list[0],
digg_count: v.statistics.digg_count,
create_time: v.create_time
}
})
//idid
res.data.user.unique_id = props.currentItem.user.unique_id
emit('update:currentItem', merge(props.currentItem, {...res.data, isRequest: true}))
} }
} }
}) })

21
src/mock/index.js

@ -2,6 +2,7 @@ import Mock from 'mockjs'
import globalMethods from '../utils' import globalMethods from '../utils'
import resource from "../assets/data/resource.js"; import resource from "../assets/data/resource.js";
import users from '@/assets/data/users.json' import users from '@/assets/data/users.json'
import post from '@/assets/data/post.json'
import {sample, shuffle} from "lodash"; import {sample, shuffle} from "lodash";
function getParams(options) { function getParams(options) {
@ -28,13 +29,12 @@ let allRecommendVideos = resource.videos.map(v => {
}) })
for (let i = 0; i < 50; i++) { for (let i = 0; i < 50; i++) {
allRecommendVideos = allRecommendVideos.concat( allRecommendVideos = allRecommendVideos.concat(shuffle(resource.videos)
shuffle(resource.videos) .slice(0, 10)
.slice(0, 10) .map(v => {
.map(v => { v.type = 'recommend-video'
v.type = 'recommend-video' return v
return v }))
}))
} }
Mock.mock(/recommended/, options => { Mock.mock(/recommended/, options => {
let page = getPage(options) let page = getPage(options)
@ -151,13 +151,16 @@ Mock.mock(/user\/friends/, options => {
Mock.mock(/user\/profile\/other/, options => { Mock.mock(/user\/profile\/other/, options => {
return Mock.mock({ return Mock.mock({
// data: sample(users), code: 200, msg: '', // data: sample(users), code: 200, msg: '',
data: users[0], code: 200, msg: '', data: {
user: users[0].user,
post: post
}, code: 200, msg: '',
}) })
}) })
Mock.mock(/aweme\/post/, options => { Mock.mock(/aweme\/post/, options => {
return Mock.mock({ return Mock.mock({
// data: sample(users), code: 200, msg: '', // data: sample(users), code: 200, msg: '',
data: users[0], code: 200, msg: '', data: post, code: 200, msg: '',
}) })
}) })

38
src/pages/home/components/FollowSetting.vue

@ -6,13 +6,13 @@
:show-heng-gang="false" :show-heng-gang="false"
maskMode="dark" maskMode="dark"
@cancel="cancel()" @cancel="cancel()"
height="330rem" height="480rem"
mode="light"> mode="light">
<div class="follow-setting-dialog"> <div class="follow-setting-dialog">
<div class="dialog-header"> <div class="dialog-header">
<div class="title-wrapper"> <div class="title-wrapper">
<span class="title">成都验证码</span> <span class="title">{{ currentItem.user.nickname }}</span>
<span class="subtitle">私信给朋友</span> <span class="subtitle">抖音号{{ currentItem.user.short_id }}</span>
</div> </div>
<dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back> <dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
</div> </div>
@ -35,12 +35,24 @@
</div> </div>
</div> </div>
<div class="l-rows"> <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" @click="cancel(e => $emit('showChangeNote'))"> <div class="l-row" @click="cancel(e => $emit('showChangeNote'))">
<div class="left">设置备注名</div> <div class="left">设置备注名</div>
<div class="right"> <div class="right">
<img src="../../../assets/img/icon/components/follow/write.png" alt=""> <img src="../../../assets/img/icon/components/follow/write.png" alt="">
</div> </div>
</div> </div>
<div class="l-row">
<div class="left">设置更新和开播通知</div>
<div class="right">
<dy-back mode="dark" direction="right" @click="cancel()"></dy-back>
</div>
</div>
<div class="l-row"> <div class="l-row">
<div class="left">在关注列表中置顶</div> <div class="left">在关注列表中置顶</div>
<div class="right"> <div class="right">
@ -53,14 +65,20 @@
<switches v-model="switches1" theme="bootstrap" color="success"></switches> <switches v-model="switches1" theme="bootstrap" color="success"></switches>
</div> </div>
</div> </div>
<div class="l-row " @click="cancel(e => $emit('cancelFollow'))">
<div class="left" style="color: red;">取消关注</div>
<div class="right">
<img src="../../../assets/img/icon/components/follow/reduce.png" alt="">
</div>
</div>
</div> </div>
</div> </div>
</from-bottom-dialog> </from-bottom-dialog>
</template> </template>
<script> <script>
import FromBottomDialog from "../../../components/dialog/FromBottomDialog"; import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
import Switches from "../../message/components/swtich/switches"; import Switches from "../../message/components/swtich/switches";
import {DefaultUser} from "@/utils/const_var";
export default { export default {
name: "FollowSetting", name: "FollowSetting",
@ -69,6 +87,14 @@ export default {
Switches Switches
}, },
props: { props: {
currentItem: {
type: Object,
default: {
user: DefaultUser,
isRequest: false,
post: [],
}
},
modelValue: false modelValue: false
}, },
data() { data() {
@ -166,11 +192,11 @@ export default {
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid rgba(222, 222, 222, 0.42); border-bottom: 1px solid rgba(222, 222, 222, 0.42);
&:nth-child(1) { &:first-child {
border-radius: 10rem 10rem 0 0; border-radius: 10rem 10rem 0 0;
} }
&:nth-child(3) { &:last-child {
border-bottom: none; border-bottom: none;
border-radius: 0 0 10rem 10rem; border-radius: 0 0 10rem 10rem;
} }

13
src/pages/home/index.vue

@ -1,5 +1,5 @@
<template> <template>
<div class="test-slide-wrapper"> <div class="test-slide-wrapper" id="home-index">
<SlideHorizontal v-model:index="state.baseIndex"> <SlideHorizontal v-model:index="state.baseIndex">
<SlideItem> <SlideItem>
<IndicatorHome <IndicatorHome
@ -11,10 +11,9 @@
<div class="slide-content"> <div class="slide-content">
<SlideHorizontal class="first-horizontal-item" <SlideHorizontal class="first-horizontal-item"
name="main" name="main"
id="home-index"
:change-active-index-use-anim="false" :change-active-index-use-anim="false"
v-model:index="state.navIndex"> v-model:index="state.navIndex">
<Slide0 :cbs="p" :active="state.navIndex === 0 && state.baseIndex === 0"/> <Slide0 :active="state.navIndex === 0 && state.baseIndex === 0"/>
<SlideItem> <SlideItem>
<Community/> <Community/>
</SlideItem> </SlideItem>
@ -32,7 +31,6 @@
ref="uploader" ref="uploader"
v-model:currentItem="state.currentItem" v-model:currentItem="state.currentItem"
:active="state.baseIndex === 1" :active="state.baseIndex === 1"
:author="state.recommendList[state.itemIndex]?.author"
@toggleCanMove="e => state.canMove = e" @toggleCanMove="e => state.canMove = e"
@back="state.baseIndex = 0" @back="state.baseIndex = 0"
@showFollowSetting="state.showFollowSetting = true" @showFollowSetting="state.showFollowSetting = true"
@ -72,6 +70,7 @@
/> />
<FollowSetting <FollowSetting
v-model:currentItem="state.currentItem"
@showChangeNote="delayShowDialog( e => state.showChangeNote = true)" @showChangeNote="delayShowDialog( e => state.showChangeNote = true)"
@showBlockDialog="delayShowDialog(e => state.showBlockDialog = true)" @showBlockDialog="delayShowDialog(e => state.showBlockDialog = true)"
@showShare="delayShowDialog( e => state.isSharing = true)" @showShare="delayShowDialog( e => state.isSharing = true)"
@ -165,7 +164,8 @@ const state = reactive({
fullScreen: false, fullScreen: false,
currentItem: { currentItem: {
user: DefaultUser, user: DefaultUser,
videos: [], isRequest: false,
post: [],
} }
}) })
@ -185,7 +185,8 @@ function setCurrentItem(item) {
nickname: item.author.nickname, nickname: item.author.nickname,
unique_id: item.author.unique_id, unique_id: item.author.unique_id,
}, },
videos: [], isRequest: false,
post: [],
} }
} }
console.log('item', item) console.log('item', item)

2
src/utils/const_var.js

@ -44,7 +44,9 @@ export const SlideItemPlayStatus = {
} }
export const DefaultUser = { export const DefaultUser = {
nickname: '',
unique_id: '', unique_id: '',
short_id: '',
signature: '',//签名 signature: '',//签名
mplatform_followers_count: '',//粉丝 mplatform_followers_count: '',//粉丝
following_count: '',//关注 following_count: '',//关注

Loading…
Cancel
Save