364 lines
11 KiB
Vue
364 lines
11 KiB
Vue
<template>
|
||
<view class="index">
|
||
|
||
<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
|
||
<scroll-view @scroll="homeScroll" class="custom-tabbar-page" scroll-y enable-back-to-top
|
||
@scrolltolower="tabbarPageScrollLower">
|
||
<Home ref="home"></Home>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
|
||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||
<Service ref="service"></Service>
|
||
</scroll-view>
|
||
</view> -->
|
||
<!-- <view v-if=" tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
|
||
<view @scrolltolower="tabbarPageScrollLower" @scroll="directoryScroll" scroll-y enable-back-to-top
|
||
:class="tabShow?'custom-tabbar-page':''">
|
||
<Directory ref="directory"></Directory>
|
||
</view>
|
||
</view> -->
|
||
<view @touchmove="preventTouchMove" v-if=" tabberPageLoadFlag[1]"
|
||
:style="{display: currentIndex === 1 ? '' : 'none'}">
|
||
<view :class="tabShow?'custom-tabbar-page':''">
|
||
<Directory ref="directory"></Directory>
|
||
</view>
|
||
</view>
|
||
<!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
|
||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||
<Discovery ref="discovery"></Discovery>
|
||
</scroll-view>
|
||
</view> -->
|
||
<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
|
||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||
<Pizz ref="pizz"></Pizz>
|
||
</scroll-view>
|
||
</view>
|
||
<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
|
||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||
<User ref="user"></User>
|
||
</scroll-view>
|
||
</view>
|
||
<tn-popup v-model="birthShow" mode="center" height="700rpx" backgroundColor="transparent">
|
||
<view
|
||
style="width: 85vw;background-color: #ffffff;border-radius: 20rpx;padding:40rpx 30rpx 60rpx 30rpx;text-align: center;">
|
||
<image class="no-img" src="/static/birthday.png" style="width: 240rpx;" mode="widthFix"></image>
|
||
<view style="color: #FF634F;font-size: 50rpx;">生日快乐！</view>
|
||
<view style="color: #666666;font-weight: 600;margin-top: 40rpx;font-size: 30rpx;letter-spacing: 3rpx;">
|
||
亲爱的{{userInfo.nikename}}，今天是您的生日。
|
||
<br>愿您拥有美好的一天！
|
||
</view>
|
||
<view @click="closeBirth"
|
||
style="margin-top: 50rpx;font-size: 32rpx;color: #ffffff;text-align: center;width: 100%;height: 90rpx;border-radius: 90rpx;line-height: 90rpx;background: linear-gradient( 90deg, #FFC065 0%, #FF730A 100%);">
|
||
谢⠀⠀谢</view>
|
||
</view>
|
||
</tn-popup>
|
||
<tn-popup v-model="testShow" mode="center" height="700rpx" backgroundColor="transparent">
|
||
<view
|
||
style="width: 85vw;background-color: #ffffff;border-radius: 20rpx;padding:40rpx 30rpx 60rpx 30rpx;text-align: center;">
|
||
<view style="font-size: 40rpx;font-weight: 600;color: #000;">系统提示</view>
|
||
<view style="color: #000000;font-weight: 600;margin-top: 40rpx;font-size: 34rpx;letter-spacing: 3rpx;">
|
||
<view>河南省青年企业家协会</view>
|
||
<view>小程序试运营中！</view>
|
||
</view>
|
||
<view @click="closeTestShow"
|
||
style="margin-top: 50rpx;font-size: 32rpx;color: #ffffff;text-align: center;width: 100%;height: 90rpx;border-radius: 90rpx;line-height: 90rpx;background: linear-gradient( 90deg, #446BEB 0%, #6ADCF5 100%);">
|
||
确定</view>
|
||
</view>
|
||
</tn-popup>
|
||
<tn-tabbar :show="tabShow" :outHeight="140" :height="120" v-model="currentIndex" :list="tabbarList"
|
||
activeColor="#000000" inactiveColor="#AAAAAA" activeIconColor="#3377FF" inactiveIconColor="#888888"
|
||
:animation="true" :safeAreaInsetBottom="true" :thisIndex="thisIndex" @change="switchTabbar"></tn-tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Home from './home.vue'
|
||
import Service from './service.vue'
|
||
import Pizz from './pizz.vue'
|
||
import User from './user.vue'
|
||
import Directory from './directory.vue'
|
||
import {
|
||
Mailcoent
|
||
} from '@/util/api.js';
|
||
import store from '@/store/index.js'
|
||
|
||
export default {
|
||
components: {
|
||
Home,
|
||
Service,
|
||
Pizz,
|
||
User,
|
||
Directory
|
||
},
|
||
data() {
|
||
return {
|
||
// 底部tabbar菜单数据
|
||
tabbarList: [{
|
||
title: '首页',
|
||
activeIcon: '/static/01_1.png',
|
||
inactiveIcon: '/static/01.png',
|
||
id: 0,
|
||
},
|
||
{
|
||
title: '通讯录',
|
||
activeIcon: '/static/02_2.png',
|
||
inactiveIcon: '/static/02.png',
|
||
id: 1,
|
||
},
|
||
// {
|
||
// // 服务、案例、品牌、合作、发现、探索
|
||
// activeIcon: '',
|
||
// inactiveIcon: '',
|
||
// iconSize: 110,
|
||
// out: true
|
||
// },
|
||
{
|
||
title: '青企圈',
|
||
activeIcon: '/static/03_3.png',
|
||
inactiveIcon: '/static/03.png',
|
||
id: 2,
|
||
},
|
||
{
|
||
title: '个人中心',
|
||
activeIcon: '/static/04_4.png',
|
||
inactiveIcon: '/static/04.png',
|
||
id: 3,
|
||
}
|
||
],
|
||
thisIndex: 0,
|
||
// tabbar当前被选中的序号
|
||
currentIndex: 0,
|
||
// 自定义底栏对应页面的加载情况
|
||
tabberPageLoadFlag: [],
|
||
apiImgUrl: this.$store.state.imgUrl,
|
||
icon: '',
|
||
name: '',
|
||
tabShow: true,
|
||
birthShow: false,
|
||
userInfo: {},
|
||
testShow: false
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
console.log(options);
|
||
if (typeof(options.id) != 'undefined') {
|
||
uni.setStorageSync('recommendation_id', options.id);
|
||
}
|
||
const index = Number(options.index || 0)
|
||
// 根据底部tabbar菜单列表设置对应页面的加载情况
|
||
this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
|
||
return index === tabbar_index
|
||
})
|
||
this.switchTabbar(index)
|
||
var that = this;
|
||
uni.$on('depId', function(data) {
|
||
that.switchTabbar(data.index);
|
||
})
|
||
uni.$on('showTab', function(data) {
|
||
var index = data.index;
|
||
that.tabShow = index;
|
||
})
|
||
if (typeof(options.scene) != 'undefined') {
|
||
let decodedParams = decodeURIComponent(options.scene);
|
||
var searchParams = this.parseQuery(decodedParams);
|
||
store.commit('$tStore', {
|
||
name: 'Gid',
|
||
value: searchParams.gid
|
||
})
|
||
uni.setStorageSync('Gid', searchParams.gid);
|
||
}
|
||
var userInfo = uni.getStorageSync('userInfo');
|
||
if (userInfo) {
|
||
this.userInfo = userInfo;
|
||
} else {
|
||
this.birthShow = false;
|
||
}
|
||
|
||
if (uni.getStorageSync('birthDay')) {
|
||
this.birthShow = false;
|
||
if (!this.isSameMonthDay(userInfo.birth_time)) {
|
||
uni.removeStorageSync('birthDay');
|
||
}
|
||
} else {
|
||
if (this.isSameMonthDay(userInfo.birth_time)) {
|
||
this.birthShow = true;
|
||
}
|
||
}
|
||
|
||
},
|
||
mounted() {
|
||
//this.wxshare();
|
||
},
|
||
onShareAppMessage: async function(data) {
|
||
console.log(data);
|
||
if (data.from == 'button') {
|
||
var info = data.target.dataset.item;
|
||
return {
|
||
title: info.title,
|
||
path: '/pages/packageB/paper/paper_info?id=' + info.id,
|
||
imageUrl: this.icon,
|
||
}
|
||
} else {
|
||
return {
|
||
title: this.name,
|
||
path: '/pages/index/index?gid=' + store.state.Gid,
|
||
imageUrl: this.icon,
|
||
}
|
||
}
|
||
|
||
},
|
||
onShareTimeline: async function(data) { // 分享到朋友圈
|
||
if (data.from == 'button') {
|
||
var info = data.target.dataset.item;
|
||
return {
|
||
title: info.title,
|
||
path: '/pages/packageB/paper/paper_info?id=' + info.id,
|
||
imageUrl: this.icon,
|
||
}
|
||
} else {
|
||
return {
|
||
title: this.name,
|
||
path: '/pages/index/index?gid=' + store.state.Gid,
|
||
imageUrl: this.icon,
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
closeTestShow() {
|
||
this.testShow = false;
|
||
},
|
||
closeBirth() {
|
||
var userInfo = uni.getStorageSync('userInfo');
|
||
uni.setStorageSync('birthDay', userInfo.birth_time);
|
||
this.birthShow = false;
|
||
},
|
||
isSameMonthDay(dateString) {
|
||
// 解析日期字符串
|
||
const dateParts = dateString.split('-');
|
||
if (dateParts.length !== 3) {
|
||
throw new Error('Invalid date format. Expected format: YYYY-MM-DD');
|
||
}
|
||
const birthMonth = parseInt(dateParts[1], 10);
|
||
const birthDay = parseInt(dateParts[2], 10);
|
||
|
||
// 获取当前日期的月份和日期
|
||
const currentDate = new Date();
|
||
const currentMonth = currentDate.getMonth() + 1; // getMonth() 返回的是0-11，所以加1
|
||
const currentDay = currentDate.getDate();
|
||
|
||
// 比较月份和日期
|
||
return currentMonth === birthMonth && currentDay === birthDay;
|
||
},
|
||
parseQuery(queryStr) {
|
||
let params = {};
|
||
queryStr.split('&').forEach(param => {
|
||
let [key, value] = param.split('=');
|
||
params[key] = decodeURIComponent(value);
|
||
});
|
||
return params;
|
||
},
|
||
childEvent(data) {
|
||
console.log(123);
|
||
console.log(data);
|
||
this.icon = this.apiImgUrl + data.icon;
|
||
this.name = data.label;
|
||
},
|
||
wxshare() {
|
||
this.$wxshare({
|
||
url: 'http://ysh.0rui.cn/#/pages/index/index',
|
||
data: {
|
||
url: window.location.href.split("#")[0],
|
||
},
|
||
share_data: {
|
||
title: '智慧云商协',
|
||
desc: '智慧云商协',
|
||
imgUrl: 'http://ysh.0rui.cn/static/ser.png',
|
||
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
|
||
}
|
||
})
|
||
},
|
||
// 切换导航
|
||
switchTabbar(index) {
|
||
this._switchTabbarPage(index)
|
||
},
|
||
|
||
|
||
// 瀑布流导航页面滚动到底部
|
||
tabbarPageScrollLower(e) {
|
||
console.log(123);
|
||
if (this.currentIndex === 0) {
|
||
this.$refs.home.ReachBottom();
|
||
}
|
||
if (this.currentIndex === 1) {
|
||
this.$refs.directory.ReachBottom();
|
||
}
|
||
if (this.currentIndex === 2) {
|
||
this.$refs.pizz.ReachBottom();
|
||
}
|
||
// if (this.currentIndex === 1) {
|
||
// this.$refs.service.ReachBottom();
|
||
// }
|
||
},
|
||
homeScroll(d) {
|
||
this.$refs.home.ReachScroll(d);
|
||
},
|
||
directoryScroll(d) {
|
||
this.$refs.directory.ReachScroll(d);
|
||
},
|
||
|
||
// 切换导航页面
|
||
_switchTabbarPage(index) {
|
||
|
||
const selectPageFlag = this.tabberPageLoadFlag[index]
|
||
this.thisIndex = this.tabbarList[index].id;
|
||
if (selectPageFlag === undefined) {
|
||
return
|
||
}
|
||
if (selectPageFlag === false) {
|
||
this.tabberPageLoadFlag[index] = true
|
||
}
|
||
this.currentIndex = index
|
||
if (index === 1) {
|
||
setTimeout(() => {
|
||
this.$refs.directory.onload();
|
||
}, 100)
|
||
}
|
||
if (index === 2) {
|
||
setTimeout(() => {
|
||
this.$refs.pizz.onload();
|
||
}, 100)
|
||
}
|
||
if (index === 3) {
|
||
setTimeout(() => {
|
||
this.$refs.user.onload();
|
||
}, 100)
|
||
}
|
||
// if (index === 2) {
|
||
// setTimeout(() => {
|
||
// this.$refs.discovery.getNewInfo();
|
||
// }, 100)
|
||
// }
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
background: #F1F2F8;
|
||
|
||
.custom-tabbar-page {
|
||
width: 100%;
|
||
height: calc(100vh - 110rpx);
|
||
box-sizing: border-box;
|
||
padding-bottom: 0rpx;
|
||
padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
|
||
}
|
||
}
|
||
</style> |