zyronon
2 years ago
11 changed files with 471 additions and 170 deletions
@ -0,0 +1,241 @@
@@ -0,0 +1,241 @@
|
||||
<template> |
||||
<SlideItem id="slide0"> |
||||
<div class="sub-type" |
||||
:class="state.subTypeIsTop?'top':''" |
||||
ref="subTypeRef"> |
||||
<div class="local"> |
||||
<div class="card" @touchmove.capture="stop"> |
||||
<div class="nav-item"> |
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>美食</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>休闲娱乐</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>游玩</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>丽人/美发</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>住宿</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>游玩</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>丽人/美发</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>住宿</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="sub-type-notice" |
||||
v-if="state.subType===-1 && !state.subTypeVisible" |
||||
@click="showSubType">附近吃喝玩乐 |
||||
</div> |
||||
<SlideList |
||||
:style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}" |
||||
:api="api.videos.recommended" |
||||
@touchstart="pageClick" |
||||
html-id="slide0-list" |
||||
/> |
||||
</SlideItem> |
||||
</template> |
||||
|
||||
<script setup lang="jsx"> |
||||
import SlideItem from '@/components/slide/SlideItem.vue' |
||||
import {onMounted, onUnmounted, reactive, ref, watch} from "vue"; |
||||
import bus, {EVENT_KEY} from "@/utils/bus"; |
||||
import Utils from "@/utils"; |
||||
import api from "@/api"; |
||||
import Loading from "@/components/Loading.vue"; |
||||
import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender"; |
||||
import SlideList from './SlideList.vue'; |
||||
|
||||
const props = defineProps({ |
||||
cbs: { |
||||
type: Object, |
||||
default() { |
||||
return {} |
||||
} |
||||
}, |
||||
active: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}) |
||||
const emit = defineEmits([ |
||||
'update:item', |
||||
'goUserInfo', |
||||
'showComments', |
||||
'showShare', |
||||
'goMusic', |
||||
]) |
||||
|
||||
function stop(e) { |
||||
e.stopPropagation() |
||||
} |
||||
|
||||
const p = { |
||||
onShowComments() { |
||||
console.log('onShowComments') |
||||
} |
||||
} |
||||
|
||||
watch( |
||||
() => props.active, |
||||
(newVal, oldVal) => { |
||||
console.log('newVal', newVal, 'oldVal', oldVal) |
||||
if (newVal === false) { |
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { |
||||
baseIndex: 0, |
||||
navIndex: 0, |
||||
itemIndex: state.index, |
||||
type: EVENT_KEY.ITEM_STOP |
||||
}) |
||||
} else { |
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { |
||||
baseIndex: 0, |
||||
navIndex: 0, |
||||
itemIndex: state.index, |
||||
type: EVENT_KEY.ITEM_PLAY |
||||
}) |
||||
} |
||||
}) |
||||
const render = useSlideListItemRender({...props.cbs, ...p}) |
||||
const subTypeRef = ref(null) |
||||
const listRef = ref(null) |
||||
const state = reactive({ |
||||
loading: false, |
||||
index: 0, |
||||
subType: -1, |
||||
subTypeVisible: false, |
||||
subTypeHeight: '0', |
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType. |
||||
subTypeIsTop: false, |
||||
}) |
||||
|
||||
|
||||
function showSubType(e) { |
||||
Utils.$stopPropagation(e) |
||||
console.log('subTypeRef',) |
||||
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px' |
||||
state.subTypeVisible = true |
||||
setTimeout(() => state.subTypeIsTop = true, 300) |
||||
bus.emit(EVENT_KEY.OPEN_SUB_TYPE,) |
||||
} |
||||
|
||||
function pageClick(e) { |
||||
// console.log('pageClick') |
||||
if (state.subTypeVisible) { |
||||
state.subTypeIsTop = state.subTypeVisible = false |
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE,) |
||||
Utils.$stopPropagation(e) |
||||
} |
||||
} |
||||
|
||||
function dislike() { |
||||
listRef.value.dislike(state.list[1]) |
||||
state.list[state.index] = state.list[1] |
||||
Utils.$notice('操作成功，将减少此类视频的推荐') |
||||
} |
||||
|
||||
function end() { |
||||
// this.$notice('暂时没有更多了') |
||||
} |
||||
|
||||
|
||||
onMounted(() => { |
||||
// getData() |
||||
}) |
||||
onUnmounted(() => { |
||||
}) |
||||
|
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "@/assets/less/index"; |
||||
|
||||
#slide0 { |
||||
position: relative; |
||||
|
||||
.sub-type { |
||||
width: 100%; |
||||
position: fixed; |
||||
top: 0; |
||||
|
||||
&.top { |
||||
z-index: 2; |
||||
} |
||||
|
||||
.local { |
||||
transition: all .3s; |
||||
font-size: 14rem; |
||||
color: gray; |
||||
background: #f9f9f9; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.card { |
||||
margin: 20rem; |
||||
margin-top: @header-height; |
||||
padding: 20rem; |
||||
border-radius: 8rem; |
||||
width: 100%; |
||||
background: white; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
justify-content: space-between; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.nav-item { |
||||
@width: 35rem; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
flex-shrink: 0; |
||||
width: 17vw; |
||||
|
||||
img { |
||||
width: @width; |
||||
height: @width; |
||||
margin-bottom: 5rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.sub-type-notice { |
||||
position: fixed; |
||||
background: rgba(black, .4); |
||||
top: 100rem; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
padding: 3rem 12rem; |
||||
border-radius: 10rem; |
||||
z-index: 3; |
||||
font-size: 12rem; |
||||
color: white; |
||||
} |
||||
|
||||
#slide0-infinite { |
||||
z-index: 1; |
||||
margin-top: 0; |
||||
transition: all .3s; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,155 @@
@@ -0,0 +1,155 @@
|
||||
<template> |
||||
<Loading v-if="state.loading && state.list.length === 0"/> |
||||
<SlideVerticalInfinite |
||||
ref="listRef" |
||||
v-love="htmlId" |
||||
name="main" |
||||
:id="htmlId" |
||||
v-model:index="state.index" |
||||
:render="render" |
||||
:list="state.list" |
||||
:position="{ |
||||
baseIndex:0, |
||||
navIndex:0, |
||||
}" |
||||
@loadMore="loadMore" |
||||
@refresh="() => getData(true)" |
||||
/> |
||||
</template> |
||||
|
||||
<script setup lang="jsx"> |
||||
import SlideVerticalInfinite from '@/components/slide/SlideVerticalInfinite.vue' |
||||
import {onMounted, onUnmounted, reactive, ref, watch} from "vue"; |
||||
import bus, {EVENT_KEY} from "@/utils/bus"; |
||||
import Utils from "@/utils"; |
||||
import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender"; |
||||
import Loading from "@/components/Loading.vue"; |
||||
|
||||
const props = defineProps({ |
||||
cbs: { |
||||
type: Object, |
||||
default() { |
||||
return {} |
||||
} |
||||
}, |
||||
active: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
api: { |
||||
type: Function, |
||||
default: void 0 |
||||
}, |
||||
htmlId: { |
||||
type: String, |
||||
default: 'guid' |
||||
} |
||||
}) |
||||
const emit = defineEmits([ |
||||
'update:item', |
||||
'goUserInfo', |
||||
'showComments', |
||||
'showShare', |
||||
'goMusic', |
||||
]) |
||||
|
||||
function stop(e) { |
||||
e.stopPropagation() |
||||
} |
||||
|
||||
const p = { |
||||
onShowComments() { |
||||
console.log('onShowComments') |
||||
} |
||||
} |
||||
|
||||
watch( |
||||
() => props.active, |
||||
(newVal, oldVal) => { |
||||
console.log('newVal', newVal, 'oldVal', oldVal) |
||||
if (newVal === false) { |
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { |
||||
baseIndex: 0, |
||||
navIndex: 0, |
||||
itemIndex: state.index, |
||||
type: EVENT_KEY.ITEM_STOP |
||||
}) |
||||
} else { |
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { |
||||
baseIndex: 0, |
||||
navIndex: 0, |
||||
itemIndex: state.index, |
||||
type: EVENT_KEY.ITEM_PLAY |
||||
}) |
||||
} |
||||
}) |
||||
const render = useSlideListItemRender({...props.cbs, ...p}) |
||||
const subTypeRef = ref(null) |
||||
const listRef = ref(null) |
||||
const state = reactive({ |
||||
loading: false, |
||||
index: 0, |
||||
list: [ |
||||
// { |
||||
// type: 'user', |
||||
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}` |
||||
// }, |
||||
], |
||||
totalSize: 0, |
||||
pageSize: 10, |
||||
pageNo: 0, |
||||
}) |
||||
|
||||
function loadMore() { |
||||
if (!state.loading) { |
||||
state.pageNo++ |
||||
getData() |
||||
} |
||||
} |
||||
|
||||
async function getData(refresh = false) { |
||||
if (state.loading) return |
||||
state.loading = true |
||||
let res = await props.api({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize}) |
||||
console.log('getSlide0Data-', 'refresh', refresh, res) |
||||
state.loading = false |
||||
if (res.code === 200) { |
||||
state.totalSize = res.data.total |
||||
if (refresh) { |
||||
state.list = [] |
||||
} |
||||
state.list = state.list.concat(res.data.list) |
||||
} else { |
||||
state.pageNo-- |
||||
} |
||||
} |
||||
|
||||
function dislike() { |
||||
listRef.value.dislike(state.list[1]) |
||||
state.list[state.index] = state.list[1] |
||||
Utils.$notice('操作成功，将减少此类视频的推荐') |
||||
} |
||||
|
||||
function end() { |
||||
// this.$notice('暂时没有更多了') |
||||
} |
||||
|
||||
function click(htmlId) { |
||||
if (htmlId !== props.htmlId) return |
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { |
||||
baseIndex: 0, |
||||
navIndex: 0, |
||||
itemIndex: state.index, |
||||
type: EVENT_KEY.ITEM_TOGGLE |
||||
}) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
// getData() |
||||
getData() |
||||
bus.on(EVENT_KEY.SINGLE_CLICK, click) |
||||
}) |
||||
onUnmounted(() => { |
||||
bus.off(EVENT_KEY.SINGLE_CLICK, click) |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,32 @@
@@ -0,0 +1,32 @@
|
||||
import SlideAlbum from "@/components/slide/SlideAlbum.vue"; |
||||
import SlideUser from "@/components/slide/SlideUser.vue"; |
||||
import BVideo from "@/components/slide/BVideo.vue"; |
||||
|
||||
export function useSlideListItemRender(props) { |
||||
return function render(item, itemIndex, play, position) { |
||||
// console.log('item', item) |
||||
let node |
||||
if (item.type === 'img') { |
||||
node = <img src={item.src} style="height:100%;"/> |
||||
} |
||||
if (item.type === 'imgs') { |
||||
node = <SlideAlbum/> |
||||
} |
||||
if (item.type === 'user') { |
||||
node = <SlideUser {...props}/> |
||||
} |
||||
if (item.type === 'send-video') { |
||||
node = <video src={item.src} style="height:100%;"/> |
||||
} |
||||
// onGoUserInfo={() => cb('onGoUserInfo')} |
||||
if (item.type === 'recommend-video') { |
||||
node = <BVideo |
||||
isPlay={play} |
||||
item={item} |
||||
position={{...position, itemIndex}} |
||||
{...props} |
||||
/> |
||||
} |
||||
return node |
||||
} |
||||
} |
||||
Loading…
Reference in new issue