zkr/zhz-front-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Lishundong
2025-10-24 09:34:42 +08:00
commit c0e46d1ae7
282 changed files with 33820 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
pages/index/index.vue Normal file
View File

@@ -0,0 +1,284 @@
<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>