285 lines
8.3 KiB
Vue
285 lines
8.3 KiB
Vue
<template>
|
||
<view class="app-custom-root">
|
||
<view class="app-container">
|
||
<!-- 主体内容区域 -->
|
||
<view class="container-main">
|
||
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
|
||
<swiper-item class="swiper-item" v-for="(_, index) in 2" :key="index">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<component
|
||
:is="components[index]"
|
||
@onShowTabbar="changeShowTabbar"
|
||
:ref="(el) => handelComponentsRef(el, index)"
|
||
/>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<IndexOne
|
||
v-show="currentIndex === 0"
|
||
@onShowTabbar="changeShowTabbar"
|
||
:ref="(el) => handelComponentsRef(el, index)"
|
||
/>
|
||
<IndexTwo
|
||
v-show="currentIndex === 1"
|
||
@onShowTabbar="changeShowTabbar"
|
||
:ref="(el) => handelComponentsRef(el, index)"
|
||
/>
|
||
<!-- #endif -->
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<Tabbar v-show="showTabbar" :currentpage="0"></Tabbar>
|
||
|
||
<!-- maskFristEntry -->
|
||
<view class="maskFristEntry" v-if="maskFristEntry">
|
||
<view class="entry-content">
|
||
<text class="text1">左滑查看视频</text>
|
||
<text class="text2">快去体验吧～</text>
|
||
<view class="goExperience" @click="goExperience">去体验</view>
|
||
<view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import IndexOne from './components/index-one.vue';
|
||
import IndexTwo from './components/index-two.vue';
|
||
const loadedMap = reactive([false, false]);
|
||
const swiperRefs = [ref(null), ref(null)];
|
||
const components = [IndexOne, IndexTwo];
|
||
import { storeToRefs } from 'pinia';
|
||
import { useReadMsg } from '@/stores/useReadMsg';
|
||
const { unreadCount } = storeToRefs(useReadMsg());
|
||
const showTabbar = ref(true);
|
||
const maskFristEntry = ref(false);
|
||
|
||
onLoad(() => {
|
||
// 判断浏览器是否有 fristEntry 第一次进入
|
||
let fristEntry = uni.getStorageSync('fristEntry') === false ? false : true; // 默认未读
|
||
maskFristEntry.value = fristEntry;
|
||
// maskFristEntry.value = true;
|
||
});
|
||
|
||
onShow(() => {
|
||
// 获取消息列表
|
||
useReadMsg().fetchMessages();
|
||
});
|
||
|
||
const state = reactive({
|
||
current: 0,
|
||
all: [{}],
|
||
});
|
||
|
||
onMounted(() => {
|
||
handleTabChange(state.current);
|
||
});
|
||
|
||
const handelComponentsRef = (el, index) => {
|
||
if (el) {
|
||
swiperRefs[index].value = el;
|
||
}
|
||
};
|
||
|
||
function changeShowTabbar(val) {
|
||
showTabbar.value = val;
|
||
}
|
||
|
||
//1 查看消息类型
|
||
function changeSwiperType(e) {
|
||
const index = e.detail.current;
|
||
state.current = index;
|
||
handleTabChange(index);
|
||
}
|
||
function changeType(index) {
|
||
state.current = index;
|
||
handleTabChange(index);
|
||
}
|
||
|
||
function handleTabChange(index) {
|
||
if (!loadedMap[index]) {
|
||
swiperRefs[index].value?.loadData();
|
||
loadedMap[index] = true;
|
||
}
|
||
}
|
||
|
||
function changeSwiperMsgType(e) {
|
||
const currented = e.detail.current;
|
||
state.current = currented;
|
||
}
|
||
// mask
|
||
function closeFristEntry() {
|
||
uni.setStorageSync('fristEntry', false);
|
||
maskFristEntry.value = false;
|
||
}
|
||
|
||
function goExperience() {
|
||
closeFristEntry();
|
||
state.current = 1;
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.app-custom-root {
|
||
position: fixed;
|
||
z-index: 10;
|
||
width: 100vw;
|
||
height: calc(100% - var(--window-bottom));
|
||
overflow: hidden;
|
||
}
|
||
.app-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
width: 100%;
|
||
.container-header {
|
||
height: calc(88rpx - 14rpx);
|
||
text-align: center;
|
||
line-height: calc(88rpx - 14rpx);
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 16rpx 44rpx 36rpx 44rpx;
|
||
background: url('@/static/icon/msgTopbg.png') 0 0 no-repeat;
|
||
background-size: 100% 100%;
|
||
.header-title {
|
||
color: #000000;
|
||
font-weight: bold;
|
||
}
|
||
.header-btnLf {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
width: calc(60rpx * 3);
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #696969;
|
||
margin-right: 44rpx;
|
||
position: relative;
|
||
.btns-wd{
|
||
position: absolute
|
||
top: 2rpx;
|
||
right: 2rpx
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: #F73636;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #EEEEFF;
|
||
}
|
||
}
|
||
.active {
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
|
||
.container-main {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
background-color: #f4f4f4;
|
||
}
|
||
.main-scroll {
|
||
width: 100%
|
||
height: 100%;
|
||
}
|
||
.scrollmain{
|
||
padding: 28rpx
|
||
}
|
||
.swiper
|
||
height: 100%;
|
||
width: 100%
|
||
.list
|
||
width: 100%
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
// mask:
|
||
.maskFristEntry
|
||
position: fixed;
|
||
// right: 20rpx;
|
||
// bottom: calc(50% - 200rpx);
|
||
height: 100vh
|
||
width: 100vw
|
||
background: rgba(0,0,0,0.3)
|
||
.entry-content
|
||
display: flex;
|
||
align-items: center
|
||
position: absolute
|
||
left: 50%
|
||
top: 35%
|
||
transform: translate(-50%, -50%)
|
||
flex-direction: column
|
||
background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 480rpx
|
||
height: 584rpx
|
||
// padding-left: 80rpx
|
||
.text1
|
||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
margin-top: 370rpx
|
||
font-size: 36rpx
|
||
background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text; /* 有些浏览器兼容用 */
|
||
text-fill-color: transparent;
|
||
padding-left: 28rpx
|
||
.text2
|
||
padding-left: 28rpx
|
||
margin-top: 8rpx
|
||
font-size: 20rpx;
|
||
color: #666666;
|
||
text-align: center;
|
||
.indicateArrow
|
||
height: 76rpx
|
||
width: 68rpx
|
||
.indicatefristEntry
|
||
width: 244rpx
|
||
height: 244rpx
|
||
.goExperience
|
||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
margin-left: 28rpx
|
||
margin-top: 28rpx
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
background: linear-gradient( 180deg, #9974FD 0%, #286BFA 100%);
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 60rpx
|
||
.maskFristEntry-Close
|
||
position: absolute;
|
||
left: calc(50% - 10rpx);
|
||
bottom: -130rpx
|
||
width: 42rpx
|
||
height: 42rpx
|
||
background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||
border-radius: 50%;
|
||
.maskFristEntry-Close::before
|
||
position: absolute;
|
||
left: calc( 50% - 2rpx)
|
||
top: calc( 50% - 10rpx)
|
||
transform: rotate(45deg);
|
||
content: ''
|
||
background: #FFFFFF
|
||
width: 4rpx
|
||
height: 20rpx
|
||
.maskFristEntry-Close::after
|
||
position: absolute;
|
||
left: calc( 50% - 2rpx)
|
||
top: calc( 50% - 10rpx)
|
||
transform: rotate(-45deg);
|
||
content: ''
|
||
background: #FFFFFF
|
||
width: 4rpx
|
||
height: 20rpx
|
||
</style>
|