2024-07-10 18:13:57 +08:00

639 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
style="background: linear-gradient( 180deg, #3056D3 0%, #F1F2F8 100%); background-size: 100% 400rpx;background-repeat: no-repeat;">
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="transparent">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<view style="width: 100%;">
<view
style="text-align: center;font-size: 34rpx;color: #FFF;letter-spacing: 1px;font-weight: bold;">
<text v-if="topShow">河南省青年企业家协会</text>
</view>
</view>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between" style="padding-top: 30rpx;">
<view class="tn-color-gray--dark"
style="padding: 6rpx;position: relative;;width: 100%;margin: 0rpx 30rpx 0 30rpx;border-radius: 100rpx;padding-left: 6rpx;background-color: rgba(255,255,255,0.3);"
@click="openUrl('/pages/index/search')">
<tn-notice-bar :list="searlist" mode="vertical" leftIconName="search" :duration="6000"
fontColor="#FFFFFF"></tn-notice-bar>
<view style="position: absolute;right: 10rpx;top: 9rpx;">
<tn-button @click="openUrl('/pages/index/search')" backgroundColor="#ffffff" fontColor="#3056D3"
shape="round" width="140rpx" height="70rpx" style="font-weight: 600;">搜索
</tn-button>
</view>
</view>
</view>
<view style="padding: 0px 30rpx;">
<swiper class="card-swiper" style="height: 320rpx;margin-top: 20rpx;" current="0" mode="dot"
:circular="true" duration="500" interval="5000" @change="cardSwiper" :autoplay="true">
<swiper-item style="border-radius: 0;padding: 0;" v-for="(item,index) in carousel_list" :key="index"
:class="cardCur==index?'cur':''">
<video :muted="true" v-if="item.type==2" id="myVideo" :src="apiImgUrl+item.image"
:controls="false" loop autoplay object-fit="contain"
style="width: 100%;border-radius: 20rpx 20rpx 0px 0px;height: 100%;"
@error="videoErrorCallback"></video>
<image v-if="item.type==1" :src="apiImgUrl+item.image" mode="scaleToFill"
style="width: 100%;height: 320rpx;border-radius: 20rpx 20rpx 0px 0px;">
</image>
</swiper-item>
</swiper>
</view>
<view style="padding:0rpx 30rpx;">
<view
style="background: linear-gradient( 90deg, #446BEB 0%, #6ADCF5 100%);border-radius: 0px 0px 20rpx 20rpx;;">
<tn-notice-bar fontColor="#FFFFFF" :list="new_top_list" leftIconType="img" mode="vertical"
:rightIcon="false" backgroundColor="transparent"></tn-notice-bar>
<!-- <tn-notice-bar fontColor="#FFFFFF" :list="new_top_list" @click="openInfo" leftIconType="img"
mode="vertical" :rightIcon="false" backgroundColor="transparent" @clickRight="openRight"
@clickLeft="openRight"></tn-notice-bar> -->
</view>
</view>
<!-- <view class="indication">
<block v-for="(item,index) in carousel_list" :key="index">
<view class="spot" :class="cardCur==index?'active':''"></view>
</block>
</view> -->
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-flex-row-center"
style="margin-top: 20rpx;padding: 0px 30rpx;">
<view @click="openUrl('/pages/index/service?type=1')"
style="position:relative;padding: 20rpx;border-radius: 16rpx;height: 280rpx;width: 100%;background: rgba(75,160,255,0.2);">
<view style="font-size: 32rpx;font-weight: 600;color: #181818;">活动报名</view>
<view style="font-size: 24rpx;margin-top: 10rpx;color: rgba(24,24,24,0.5);">Event registration</view>
<image class="no-img" src="/static/48098165.png"
style="width: 220rpx;position: absolute; right: 10rpx;bottom: 0;" mode="widthFix"></image>
</view>
<view style="width: 100%;margin-left: 20rpx">
<view @click="openUrl('/pages/index/service?type='+1)"
style=" position:relative;padding: 20rpx;border-radius: 16rpx;height: 130rpx;background: rgba(251,208,111,0.2);">
<view style="font-size: 32rpx;font-weight: 600;;color: #181818;">协会活动</view>
<view style="font-size: 24rpx;margin-top: 10rpx;color: rgba(24,24,24,0.5);">Offline events</view>
<image class="no-img" src="/static/48098164.png"
style="width: 120rpx;position: absolute; right: 10rpx;bottom: 0;" mode="widthFix"></image>
</view>
<view @click="openUrl('/pages/index/service?type='+3)"
style="position:relative;margin-top: 20rpx;padding: 20rpx;border-radius: 16rpx;height: 130rpx;background: rgba(255,151,220,0.2);">
<view style="font-size: 32rpx;font-weight: 600;;color: #181818;">品牌活动</view>
<view style="font-size: 24rpx;margin-top: 10rpx;color: rgba(24,24,24,0.5);">Brand activity</view>
<image class="no-img" src="/static/48098162.png"
style="width: 120rpx;position: absolute; right: 10rpx;bottom: 0;" mode="widthFix"></image>
</view>
</view>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-flex-row-center"
style="padding: 0px 28rpx;margin-top: 20rpx">
<view @click="openUrl('/pages/index/pizz_info?id=1')"
style="position:relative;padding: 20rpx;border-radius: 16rpx;height: 130rpx;width: 100%;background: rgba(160,151,255,0.2);">
<view style="font-size: 32rpx;font-weight: 600;;color: #181818;">协会简介</view>
<view
style="font-size: 24rpx;margin-top: 10rpx;color: rgba(24,24,24,0.5);z-index: 1;position: absolute;">
Association
introduction
</view>
<image class="no-img" src="/static/48098160.png"
style="width: 120rpx;position: absolute; right: 10rpx;bottom: 0;z-index: 0;" mode="widthFix">
</image>
</view>
<view style="width: 100%;margin-left: 20rpx">
<view @click="openUrl('/pages/packageB/news/new_list')"
style="position:relative;padding: 20rpx;border-radius: 16rpx;height: 130rpx;background: rgba(72,219,122,0.2);">
<view style="font-size: 32rpx;font-weight: 600;;color: #181818;">实时资讯</view>
<view style="font-size: 24rpx;margin-top: 10rpx;color: rgba(24,24,24,0.5);">Member map</view>
<image class="no-img" src="/static/48098163.png"
style="width: 120rpx;height: 90rpx;position: absolute; right: 10rpx;bottom: 0;" mode="widthFix">
</image>
</view>
</view>
</view>
<!-- <view style="margin:20rpx 28rpx">
<view @click="openUrl('/pages/packageA/info/policy')"
style="position:relative;padding: 20rpx;border-radius: 16rpx;height: 130rpx;background: linear-gradient(90deg, #d6eafa 0%, #d4eafe 100%);">
<view style="font-size: 32rpx">惠企政策</view>
<view style="font-size: 22rpx;margin-top: 10rpx">Corporate policies</view>
<image src="/static/3162033.png"
style="width: 90rpx;height: 90rpx;position: absolute; right: 10rpx;bottom: 0;"></image>
</view>
</view> -->
<!-- <view style="width: 92%;background-color: #ffffff;border-radius: 16rpx;margin: 20rpx auto;overflow: hidden;"> -->
<!-- <tn-list-cell>
<view class="list-icon-text">
<view class="list__left">
<view class="list__left__icon">
<image src="/static/hqzc.png" style="width: 56rpx;height: 50rpx;"></image>
</view>
<view class="list__left__icon"
style="width: 4rpx;height: 42rpx;border-radius: 56rpx;background: #d1d4d180;"></view>
<view class="list__left__text">惠企政策推送平台</view>
</view>
<view class="list__right">
<text class="tn-icon-right tn-margin-right-xs"></text>
</view>
</view>
</tn-list-cell> -->
<!-- <tn-notice-bar :list="list" @click="openInfo" leftIconType="img" mode="vertical" :rightIcon="true"
backgroundColor="#ffffff" :radius="16" @clickRight="openRight" @clickLeft="openRight"></tn-notice-bar> -->
<!-- </view> -->
<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-flex-row-center"-->
<!-- style="padding:0px 30rpx 0rpx 30rpx;text-align: center;font-size: 28rpx;">-->
<!-- <view @click="openUrl('/pages/index/tissue')"-->
<!-- style="width: 33%;background: linear-gradient(270deg, #3CBAEA, #6BC7F0);;border-radius: 16rpx;padding:25rpx 20rpx;">-->
<!-- <view>-->
<!-- <image src="/static/c3.png" style="width: 35rpx;height: 35rpx;vertical-align: middle;">-->
<!-- </image>-->
<!-- </view>-->
<!-- <view style="margin-top: 10rpx;">-->
<!-- <text style="color: #FFF;">组织架构</text>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view @click="openUrl('/pages/index/service')"-->
<!-- style="width: 33%;background: linear-gradient(270deg, #EE7E45, #EE9657);border-radius: 16rpx;padding:25rpx 20rpx;margin-left:10rpx;">-->
<!-- <view>-->
<!-- <image src="/static/c2.png" style="width: 35rpx;height: 35rpx;vertical-align: middle;">-->
<!-- </image>-->
<!-- </view>-->
<!-- <view style="margin-top: 10rpx;">-->
<!-- <text style="color: #FFF;">协会活动</text>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view @click="openUrl('/pages/index/directory')"-->
<!-- style="width: 33%;background: linear-gradient(270deg, #45B335, #89C33D);border-radius: 16rpx;padding:25rpx 20rpx;margin-left:10rpx;">-->
<!-- <view>-->
<!-- <image src="/static/c1.png" style="width: 35rpx;height: 35rpx;vertical-align: middle;">-->
<!-- </image>-->
<!-- </view>-->
<!-- <view style="margin-top: 10rpx;">-->
<!-- <text style="color: #FFF;">通讯录</text>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<view style="padding: 10rpx 28rpx 0rpx 28rpx;margin-top: 20rpx;">
<view style="background-color: #ffffff;border-radius:24rpx;width: 110%;padding-bottom: 15rpx;">
<view @click.stop="openUrl('/pages/index/service')"
class="tn-flex tn-flex-row-between tn-flex-col-center tn-flex-row-center"
style="padding: 30rpx;width: 97%;">
<view style="font-size: 32rpx;font-weight: bold;">精选活动</view>
<view style="color: #808080;">
<text>更多</text>
<text class="tn-icon-right"></text>
</view>
</view>
<scroll-view :scroll-x="true" style="padding:0rpx 30rpx;white-space: nowrap;width: 100%"
v-if="actList.length>0">
<view v-for="(item,index) in actList"
@click="openUrl('/pages/packageB/event/event_info?id='+item.id)"
style="position: relative;;display: inline-block;width: 300rpx;text-align: center;background-color: #FFF;border-radius: 20rpx;overflow: hidden;margin-right: 20rpx;">
<view>
<image :src="apiImgUrl+item.activity_image" mode="aspectFill"
style="width: 350rpx;height: 170rpx;">
</image>
</view>
<view style="padding:10rpx;font-weight: 400;min-height: 100rpx;">
<view class="tn-text-ellipsis-2" style="text-align: left;font-size: 28rpx">
<text>{{ item.activity_name }}</text>
</view>
</view>
<view style="position: absolute;top: 0rpx;left: 0rpx;">
<view v-if="item.type=='进行中'" class="my_tag" style="background-color: #13C296">
进行中
</view>
<view v-if="item.type=='未开始'" class="my_tag" style="background-color: rgb(248, 155, 59)">
预告
</view>
<view v-if="item.type=='已结束'" class="my_tag" style="background-color: #FF5159">
已结束
</view>
</view>
</view>
</scroll-view>
<view style="background-color: #ffffff;padding: 20rpx;text-align: center" v-if="actList.length==0">
暂无活动
</view>
</view>
</view>
<view style="padding:0rpx 30rpx;margin-top: 20rpx;">
<view style="background-color: #ffffff;border-radius: 20rpx 20rpx 0px 0px;padding-top: 20rpx;">
<tn-tabs :list="goryList" :isScroll="true" :activeItemStyle="{fontSize:'30rpx',fontWeight:'600'}"
activeColor="#3056D3" :current="current" name="name" @change="change" :fontSize="28"></tn-tabs>
</view>
</view>
<view style="padding:0px 30rpx;padding-bottom: 20rpx;min-height:500rpx;">
<view style="background-color: #ffffff;border-radius: 0rpx 0rpx 20rpx 20rpx;">
<view v-for="(item,index) in news_list" :class="{'rounded_corner': index === 0}">
<view class="tn-flex tn-flex-row-between" @click="openNewUrl(item)"
style="padding: 20rpx;min-height: 200rpx;">
<view style="margin-left: 20rpx;" v-if="item.news_image">
<image :src="apiImgUrl+item.news_image" mode="aspectFill"
style="width: 280rpx;height: 180rpx;border-radius: 20rpx;"></image>
</view>
<view style="position:relative;padding:0rpx 10rpx 10rpx 15rpx">
<view class="tn-text-ellipsis-2" style="font-size: 32rpx;font-weight: bold;">
{{ item.news_title }}
</view>
<view style="color: #3056D3;font-size: 26rpx;margin: 20rpx 0rpx;">#{{ item.name }}</view>
<view class="tn-flex tn-flex-row-between" style="font-size:26rpx;color: #888888;">
<view>{{ formatTime(item.showtime) }}</view>
<view>
<text class="tn-icon-eye-fill" style="vertical-align: middle;"></text>
<text style="vertical-align: middle;margin-left: 5rpx;">{{ item.news_hits }}</text>
</view>
</view>
</view>
</view>
<view v-if="news_list.length-1>index"
style="background: rgba(217, 217, 217, 0.5);width: 90%;margin: 0 auto;height: 2rpx;"></view>
</view>
</view>
</view>
<!-- <view style="height: 1rpx;background-color: #E6E6E6;width: 90%;margin: 0 auto;margin-top: 30rpx;"></view> -->
<view @click="callPhone"
style="padding-top:70rpx ;text-align: center;padding-bottom: 20rpx;font-size: 24rpx;color: rgba(153,153,153,0.5);letter-spacing: 2rpx;">
<view>技术支持洛阳灵睿网络</view>
<view>电话15503791530</view>
</view>
</view>
</template>
<script>
import {
newsGoryList,
activityList,
newsList,
associationIndex,
carouselIndex,
Mailcoent,
getArticlePolicyList
} from '@/util/api.js';
import store from '@/store/index.js'
export default {
data() {
return {
topShow: true,
new_top_list: [{
article_title: '河南省青年企业家协会走进省团校开展党史学...'
}],
list: [],
selectShow: false,
selectList: [],
topCurrent: 0,
searlist: [{
article_title: '搜索资讯'
}],
cardCur: 0,
isAndroid: true,
goryList: [],
news_list: [],
actList: [],
carousel_list: [],
current: 0,
page: 1,
size: 10,
gory_id: 0,
type: 1,
HomeTitle: '',
apiImgUrl: this.$store.state.imgUrl,
association_id: this.$store.state.Gid,
}
},
mounted() {
getApp().getUserLogin((r) => {
console.log('---Login---', r);
})
var that = this;
uni.$on('getGid', function(data) {
console.log('-----', data);
that.page = 1;
that.goryList = [];
that.news_list = [];
that.actList = [];
that.carousel_list = [];
that.getNewsGoryList();
that.getActivityList();
that.getAssociationIndex();
that.getCarouselIndex();
})
this.getNewsGoryList();
this.getActivityList();
this.getAssociationIndex();
this.getCarouselIndex();
this.getMsg();
//this.getArticlePolicyListAll();
},
methods: {
openNewUrl(item) {
//'/pages/packageB/news/new_info?id='+item.news_id
console.log(item);
if (item.wx_url == '') {
uni.navigateTo({
url: '/pages/packageB/news/new_info?id=' + item.news_id
})
} else {
uni.navigateTo({
url: '/pages/index/web?url=' + encodeURIComponent(item.wx_url),
})
}
},
callPhone() {
uni.makePhoneCall({
phoneNumber: '15503791530', // 电话号码
success: function() {
console.log('拨打电话成功');
},
fail: function() {
console.log('拨打电话失败');
}
});
},
msg() {
return this.$store.state.msgCount;
},
getArticlePolicyListAll() {
getArticlePolicyList({
cid: 22
})
.then(res => {
console.log(res);
if (res.code == 1) {
this.list = res.data.ret;
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
openInfo(d) {
uni.navigateTo({
url: '/pages/packageA/info/policy_info?id=' + d.id,
})
},
openRight() {
uni.navigateTo({
url: '/pages/packageA/info/policy',
})
},
async getMsg() {
var uid = uni.getStorageSync('uid');
const res = await Mailcoent({
member_id: uid
});
console.log(res);
if (res.code == 1) {
this.$store.commit('$tStore', {
name: 'msgCount',
value: res.data
})
} else {
this.$store.commit('$tStore', {
name: 'msgCount',
value: 0
})
}
console.log(store.state.msgCount);
},
confirm(d) {
var info = d[0];
store.commit('$tStore', {
name: 'Gid',
value: info.value
})
uni.setStorageSync('Gid', info.value);
this.association_id = info.value;
this.page = 1;
this.goryList = [];
this.news_list = [];
this.actList = [];
this.carousel_list = [];
this.getNewsGoryList();
this.getActivityList();
this.getAssociationIndex();
this.getCarouselIndex();
//this.$emit('childEvent', '修改后的数据');
},
getAssociationIndex() {
associationIndex()
.then(res => {
console.log(res);
if (res.code == 1) {
var key = res.data;
const transformedSelectList = key.map(item => ({
value: item.id,
label: item.association_name,
icon: item.association_image
}));
const foundNumber = transformedSelectList.find((element) => element.value == store.state
.Gid);
this.HomeTitle = foundNumber.label;
this.selectList = transformedSelectList;
//#ifdef MP-WEIXIN
this.$parent.childEvent(foundNumber);
//#endif
// #ifdef H5
console.log('H5');
this.$parent.$parent.$parent.$parent.childEvent(foundNumber);
// #endif
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
getCarouselIndex() {
carouselIndex({
association_id: store.state.Gid,
})
.then(res => {
console.log(res);
if (res.code == 1) {
this.carousel_list = res.data;
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
getActivityList() {
activityList({
association_id: store.state.Gid,
page: 1,
size: 10
})
.then(res => {
console.log(res);
if (res.code == 1) {
this.actList = res.data.ret;
} else {
this.actList = [];
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
getNewsGoryList() {
newsGoryList({
association_id: this.association_id
})
.then(res => {
console.log(res);
if (res.code == 1) {
var key = res.data;
// key.unshift({
// id: 0,
// name: '最新'
// });
this.goryList = key;
this.type = 0;
this.gory_id = key[0].id;
this.getNewsList();
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
getNewsList() {
newsList({
association_id: store.state.Gid,
type: this.type,
gory_id: this.gory_id,
page: this.page,
size: this.size
})
.then(res => {
console.log(res);
if (res.code == 1) {
this.news_list.push(...res.data.ret);
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
cardSwiper(d) {
this.cardCur = d.detail.current;
},
ReachScroll(d) {
var top = d.mp.detail.scrollTop;
if (top > 100) {
this.topShow = false;
} else {
this.topShow = true;
}
},
ReachBottom() {
console.log('home');
this.page = this.page + 1;
this.getNewsList();
//this.getIndex();
},
change(e) {
this.current = e;
var info = this.goryList[e];
this.gory_id = info.id;
this.type = 0;
this.page = 1;
this.news_list = [];
this.getNewsList();
},
openUrl(url) {
uni.navigateTo({
url: url
})
},
opentab() {
uni.$emit('depId', {
index: 1
})
},
videoErrorCallback(e) {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
},
formatTime(time) {
const [year, month, day] = time.split(' ')[0].split('-');
return `${year}-${month}-${day}`;
},
}
}
</script>
<style lang="scss" scoped>
.my_tag {
padding: 8rpx 15rpx;
font-size: 20rpx;
color: rgba(255, 255, 255, 1);
border-radius: 0rpx 0rpx 22rpx 0rpx;
}
.rounded_corner {
//border-radius: 16rpx 16rpx 0rpx 0rpx;
padding-top: 20rpx;
}
.list {
&__left {
display: flex;
align-items: center;
justify-content: flex-start;
&__icon,
&__image {
margin-right: 18rpx;
}
}
&__right {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
.list-icon-text,
.list-image-text {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>