137 lines
3.6 KiB
Vue
137 lines
3.6 KiB
Vue
<template>
|
|
<div class="video-container">
|
|
<view class="back-box">
|
|
<view class="btn">
|
|
<uni-icons type="left" size="26" color="#FFFFFF" @click="navBack"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<mTikTok :video-list="state.videoList" :pause-type="1" :controls="false" @loadMore="loadMore" @change="change">
|
|
<template v-slot="data">
|
|
<view class="video-layer">
|
|
<view class="title line_1">{{ currentItem.companyName }}</view>
|
|
<view class="discription">
|
|
<text class="line_1">
|
|
{{ currentItem.jobTitle }}
|
|
</text>
|
|
<view class="seedetail" @click="nextDetail">
|
|
查看详情
|
|
<uni-icons type="right" color="#FFFFFF" size="14"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</mTikTok>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { inject, ref, reactive } from 'vue';
|
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
|
const { $api, navBack, navTo } = inject('globalFunction');
|
|
import mTikTok from '@/components/TikTok/TikTok.vue';
|
|
import useUserStore from '@/stores/useUserStore';
|
|
import { useRecommedIndexedDBStore } from '@/stores/useRecommedIndexedDBStore.js';
|
|
const recommedIndexDb = useRecommedIndexedDBStore();
|
|
const state = reactive({
|
|
videoList: [],
|
|
});
|
|
const currentItem = ref(null);
|
|
|
|
onLoad(() => {
|
|
const jobInfo = uni.getStorageSync(`job-Info`);
|
|
if (jobInfo) {
|
|
currentItem.value = jobInfo;
|
|
state.videoList.push(jobInfo);
|
|
}
|
|
getNextVideoSrc(2);
|
|
});
|
|
|
|
function nextDetail() {
|
|
const job = currentItem.value;
|
|
// 记录岗位类型，用作数据分析
|
|
if (job.jobCategory) {
|
|
const recordData = recommedIndexDb.JobParameter(job);
|
|
recommedIndexDb.addRecord(recordData);
|
|
}
|
|
console.log(job.jobId);
|
|
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
|
}
|
|
|
|
function getNextVideoSrc(num) {
|
|
let params = {
|
|
uuid: useUserStore().seesionId,
|
|
count: num || 1,
|
|
};
|
|
$api.createRequest('/app/job/littleVideo/random', params).then((resData) => {
|
|
const { data, code } = resData;
|
|
state.videoList.push(...data);
|
|
});
|
|
}
|
|
|
|
const loadMore = () => {
|
|
// 触发加载更多
|
|
console.log('加载更多');
|
|
getNextVideoSrc();
|
|
};
|
|
|
|
const change = (e) => {
|
|
currentItem.value = e.detail;
|
|
console.log('🚀 ~ file: index.vue:53 ~ change ~ data:', e);
|
|
};
|
|
</script>
|
|
<style lang="stylus" scoped>
|
|
.video-container{
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative
|
|
.back-box{
|
|
position: absolute;
|
|
left: 20rpx;
|
|
top: 20rpx
|
|
color: #FFFFFF
|
|
z-index: 2
|
|
}
|
|
}
|
|
.video-layer {
|
|
position: absolute;
|
|
left: 24rpx;
|
|
right: 24rpx;
|
|
bottom: 30rpx;
|
|
color: #fff;
|
|
.title{
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
line-height: 100%;
|
|
letter-spacing: 0%;
|
|
}
|
|
.discription{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
letter-spacing: 0%;
|
|
margin-top: 20rpx
|
|
display: flex
|
|
align-items: center
|
|
.seedetail{
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
line-height: 100%;
|
|
letter-spacing: 0%;
|
|
white-space: nowrap
|
|
padding-left: 20rpx
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|