zyronon
4 years ago
7 changed files with 445 additions and 24 deletions
@ -0,0 +1,352 @@
@@ -0,0 +1,352 @@
|
||||
<template> |
||||
<div class="Me"> |
||||
<SlideRowList style="width: 100vw;" v-model:active-index="baseActiveIndex"> |
||||
<SlideItem> |
||||
<div class="scroll" |
||||
ref="scroll" |
||||
@touchstart="touchStart($event)" |
||||
@touchmove="touchMove($event)" |
||||
@touchend="touchEnd($event)"> |
||||
<div ref="desc" class="desc"> |
||||
<div style="height: 380px;"></div> |
||||
</div> |
||||
<div ref="content" class="test " :class="isFixed?'fixed':''" style="margin-bottom: 60px;"> |
||||
<Indicator |
||||
name="videoList" |
||||
:fixed="indicatorFixed" |
||||
tabStyleWidth="25%" |
||||
:tabTexts="['作品','私密','喜欢','收藏']" |
||||
v-model:active-index="contentIndex"> |
||||
</Indicator> |
||||
<SlideRowList |
||||
name="videoList" |
||||
:indicator-fixed="indicatorFixed" |
||||
v-model:active-index="contentIndex"> |
||||
<SlideItem style="overflow: auto;height: 100vh;"> |
||||
<div ref="tab-content1"> |
||||
<Posters :list="25"></Posters> |
||||
<div class="no-more">暂时没有更多了</div> |
||||
</div> |
||||
</SlideItem> |
||||
<SlideItem> |
||||
<div ref="tab-content2"> |
||||
<Posters :list="5"></Posters> |
||||
<div class="no-more">暂时没有更多了</div> |
||||
</div> |
||||
</SlideItem> |
||||
<SlideItem> |
||||
<div ref="tab-content3"> |
||||
<Posters :list="5"></Posters> |
||||
<div class="no-more">暂时没有更多了</div> |
||||
</div> |
||||
</SlideItem> |
||||
<SlideItem> |
||||
<div ref="tab-content3"> |
||||
<Posters :list="5"></Posters> |
||||
<div class="no-more">暂时没有更多了</div> |
||||
</div> |
||||
</SlideItem> |
||||
</SlideRowList> |
||||
</div> |
||||
</div> |
||||
<Footer v-bind:init-tab="5"/> |
||||
</SlideItem> |
||||
<SlideItem style="min-width: 70vw; overflow:auto;"> |
||||
<transition name="fade"> |
||||
<div class="ul" v-if="!isMoreFunction"> |
||||
<div class="li" @click="$nav('/my-card')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/shopping.png" alt=""> |
||||
<span>我的订单</span> |
||||
</div> |
||||
<div class="li" @click="$nav('MyCard')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/wallet.png" alt=""> |
||||
<span>钱包</span> |
||||
</div> |
||||
<div class="line"></div> |
||||
|
||||
<div class="li" @click="$nav('/me/right-menu/look-history')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/clock.png" alt=""> |
||||
<span>观看历史</span> |
||||
</div> |
||||
<div class="li" @click="$nav('/my-card')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/qrcode.png" alt=""> |
||||
<span>我的二维码</span> |
||||
</div> |
||||
<div class="li" @click="$nav('')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/workbench.png" alt=""> |
||||
<span>创作者服务中心</span> |
||||
</div> |
||||
|
||||
<div class="line"></div> |
||||
|
||||
<div class="li" @click="$nav('MyCard')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png" alt=""> |
||||
<span>小程序</span> |
||||
</div> |
||||
<div class="li" @click="$nav('MyCard')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/gongyi.png" alt=""> |
||||
<span>抖音公益</span> |
||||
</div> |
||||
<div class="li" @click="$nav('/me/right-menu/minor-protection/index')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/umbrella.png" alt=""> |
||||
<span>未成年保护工具</span> |
||||
</div> |
||||
<div class="li" @click="$nav('MyCard')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/headset.png" alt=""> |
||||
<span>我的客服</span> |
||||
</div> |
||||
<div class="li" @click="$nav('/me/right-menu/setting')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/setting-one.png" alt=""> |
||||
<span>设置</span> |
||||
</div> |
||||
</div> |
||||
<div v-else class="more-function"> |
||||
<div class="title">生活服务</div> |
||||
<div class="functions"> |
||||
<div class="function"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/quan.png" alt=""> |
||||
<span>卡券</span> |
||||
</div> |
||||
<div class="function"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/sd-card.png" alt=""> |
||||
<span>免流量</span> |
||||
</div> |
||||
<div class="function" @click="$nav('MyCollect')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png" alt=""> |
||||
<span>视频彩铃</span> |
||||
</div> |
||||
</div> |
||||
<div class="title">拓展功能</div> |
||||
<div class="functions"> |
||||
<div class="function" @click="$nav('MyCard')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/sun-one.png" alt=""> |
||||
<span>我的动态</span> |
||||
</div> |
||||
<div class="function"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/download.png" alt=""> |
||||
<span>我的缓存</span> |
||||
</div> |
||||
<div class="function" @click="$nav('MyCard')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/hot.png" alt=""> |
||||
<span>上热门</span> |
||||
</div> |
||||
<div class="function" @click="$nav('MyCollect')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/shop.png" alt=""> |
||||
<span>小店随心推</span> |
||||
</div> |
||||
<div class="function" @click="$nav('MyCollect')"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/yuandi.png" alt=""> |
||||
<span>投教园地</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</transition> |
||||
<div class="button-ctn"> |
||||
<div class="button" v-if="!isMoreFunction" @click="isMoreFunction = true"> |
||||
<img src="../../assets/img/icon/newicon/left_menu/more.png" alt=""> |
||||
<span>更多功能</span> |
||||
</div> |
||||
<div class="button" v-if="isMoreFunction" @click="isMoreFunction = false"> |
||||
<span>返回</span> |
||||
</div> |
||||
</div> |
||||
</SlideItem> |
||||
</SlideRowList> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Posters from '../../components/Posters' |
||||
import Footer from "../../components/Footer"; |
||||
import Indicator from '../../components/Indicator' |
||||
|
||||
export default { |
||||
name: "Me", |
||||
components: {Posters, Footer, Indicator}, |
||||
data() { |
||||
return { |
||||
isFixed: false, |
||||
serviceEl: {}, |
||||
serviceHeight: 0, |
||||
contentIndex: 0, |
||||
baseActiveIndex: 0, |
||||
desc: null, |
||||
tabContents: [], |
||||
indicatorHeight: 42, |
||||
indicatorFixed: false, |
||||
refs: { |
||||
header: null, |
||||
headerHeight: 0, |
||||
}, |
||||
isMoreFunction: false, |
||||
startLocationY: 0, |
||||
moveYDistance: 0, |
||||
} |
||||
}, |
||||
computed: { |
||||
bodyHeight() { |
||||
return this.$store.state.bodyHeight |
||||
}, |
||||
}, |
||||
mounted() { |
||||
}, |
||||
methods: { |
||||
touchStart(e) { |
||||
this.startLocationY = e.touches[0].pageY |
||||
}, |
||||
touchMove(e) { |
||||
let distance = this.moveYDistance + e.touches[0].pageY - this.startLocationY |
||||
console.log(distance) |
||||
if (this.indicatorFixed && Math.abs(distance) > 380) { |
||||
|
||||
} else { |
||||
|
||||
} |
||||
this.indicatorFixed = Math.abs(distance) > 380 |
||||
this.$refs.scroll.style.transform = `translate3d(0,${distance}px,0)` |
||||
}, |
||||
touchEnd(e) { |
||||
this.moveYDistance = this.moveYDistance + e.changedTouches[0].pageY - this.startLocationY |
||||
console.log('end', this.moveYDistance) |
||||
this.indicatorFixed = Math.abs(this.moveYDistance) > 380 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang='scss'> |
||||
@import "../../assets/scss/index"; |
||||
|
||||
.fade-enter-active, |
||||
.fade-leave-active { |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.fade-enter-from, |
||||
.fade-leave-to { |
||||
transform: translateY(10px); |
||||
opacity: 0; |
||||
} |
||||
|
||||
.Me { |
||||
background: $main-bg; |
||||
height: 100%; |
||||
width: 100%; |
||||
|
||||
.no-more { |
||||
font-size: 1.4rem; |
||||
padding: 10px; |
||||
color: gray; |
||||
text-align: center; |
||||
} |
||||
|
||||
.ul { |
||||
font-size: 1.4rem; |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
padding: 0; |
||||
margin: 0; |
||||
position: absolute; |
||||
color: white; |
||||
background: $main-bg; |
||||
|
||||
.line { |
||||
height: 1px; |
||||
background: #cccccc; |
||||
opacity: .1; |
||||
margin: 5px 20px; |
||||
} |
||||
|
||||
.li { |
||||
box-sizing: border-box; |
||||
background: $main-bg; |
||||
width: 100%; |
||||
padding: 1rem 2rem; |
||||
list-style: none; |
||||
display: flex; |
||||
align-items: center; |
||||
line-height: 4rem; |
||||
|
||||
&:nth-last-child(1) { |
||||
margin-bottom: 90px; |
||||
} |
||||
|
||||
&:active { |
||||
background: #454b65; |
||||
} |
||||
|
||||
img { |
||||
height: 20px; |
||||
width: 20px; |
||||
margin-right: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.more-function { |
||||
box-sizing: border-box; |
||||
font-size: 1.2rem; |
||||
width: 100%; |
||||
position: absolute; |
||||
background: $main-bg; |
||||
|
||||
.title { |
||||
padding: 2rem 0 1rem 2rem; |
||||
color: gray; |
||||
} |
||||
|
||||
.functions { |
||||
display: grid; |
||||
grid-template-columns: 33.33% 33.33% 33.33%; |
||||
|
||||
color: white; |
||||
|
||||
.function { |
||||
margin: 15px 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
img { |
||||
border-radius: 50%; |
||||
background: $second-btn-color-tran; |
||||
padding: .6rem; |
||||
height: 1.6rem; |
||||
margin-bottom: 15px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.button-ctn { |
||||
font-size: 1.4rem; |
||||
z-index: 99999; |
||||
width: 70vw; |
||||
position: absolute; |
||||
bottom: 0; |
||||
background: $main-bg; |
||||
|
||||
.button { |
||||
box-sizing: border-box; |
||||
width: calc(100% - 4rem); |
||||
background: $second-btn-color; |
||||
margin: 2rem; |
||||
height: 4.5rem; |
||||
border-radius: 3px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: white; |
||||
|
||||
img { |
||||
height: 25px; |
||||
width: 25px; |
||||
margin-right: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue