wo123/shengqingqixie-wechat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
王创世 2024-07-10 18:13:57 +08:00
parent 1527c9b350
commit 1ea2b60e04
12 changed files with 1009 additions and 837 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
App.vue
View File

@ -144,13 +144,13 @@
// 匹配并更新已有 style 属性的 img 标签 // 匹配并更新已有 style 属性的 img 标签
html = html.replace(/(<img\b[^>]*\bstyle\s*=\s*['"])([^'"]*)(['"][^>]*>)/g, html = html.replace(/(<img\b[^>]*\bstyle\s*=\s*['"])([^'"]*)(['"][^>]*>)/g,
function(match, p1, p2, p3) { function(match, p1, p2, p3) {
return p1 + ';width: 100%;margin:0 auto;' + p3; return p1 + ';width: 100%;border-radius: 10px;margin:0 auto;' + p3;
}); });
// 匹配并添加 style 属性到没有 style 属性的 img 标签 // 匹配并添加 style 属性到没有 style 属性的 img 标签
html = html.replace(/(<img\b(?![^>]*\bstyle\s*=)[^>]*>)/g, html = html.replace(/(<img\b(?![^>]*\bstyle\s*=)[^>]*>)/g,
function(match, p1) { function(match, p1) {
return p1.replace(/\/?>$/, ' style="width: 100%;margin:0 auto;" />'); return p1.replace(/\/?>$/, ' style="width: 100%;border-radius: 10px;margin:0 auto;" />');
}); });
return html; return html;

5
pages.json
View File

@ -216,6 +216,11 @@
"style": { "style": {
"navigationBarTitleText": "河南省青年企业家协会" "navigationBarTitleText": "河南省青年企业家协会"
} }
}, {
"path": "news/new_list",
"style": {
"navigationBarTitleText": "河南省青年企业家协会"
}
}] }]
}], }],
"globalStyle": { "globalStyle": {

270
pages/index/directory.vue
View File

@ -1,109 +1,114 @@
<template> <template>
<view style="background-color: #EBF4F7;letter-spacing: 1rpx;" @touchmove="preventTouchMove"> <view style="background: #F1F2F8;">
<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF"> <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#ffffff">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left"> <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<!-- <view style="padding-left: 15rpx;" @click="goBack()"> <view style="width: 100%;">
<text class="tn-icon-left" style="font-size: 40rpx;"></text> <view
</view> --> style="text-align: center;font-size: 34rpx;color: #000000;letter-spacing: 1px;font-weight: bold;">
<view class="tn-margin-top" <text>通讯录</text>
style=";text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;"> </view>
<tn-tabs :list="[{name:'通讯录'}]" :current="topCurrent" activeColor="#000" :bold="false"
:fontSize="36"></tn-tabs>
</view> </view>
</view> </view>
</tn-nav-bar> </tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
<view class="justify-content-item align-content-item" style="width: 100%;">
<view class="tn-flex tn-flex-col-center"
style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 95%;background-color: #ffffff;">
<text
class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
<input v-model="serach_content" class="justify-content-item" placeholder="会员姓名/手机号" name="input"
placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
</view>
</view>
<view class="align-content-item">
<view class="justify-content-item tn-text-center">
<tn-button @click="serach_do" backgroundColor="#3668fc" shape="round" padding="20rpx 20rpx"
width="150rpx">
<text class="tn-color-white">搜 索</text>
</tn-button>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"
style="background-color: #FFF;padding-bottom: 30rpx;z-index: 200;">
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
<view class="justify-content-item align-content-item" style="width: 100%;position: relative;">
<view class="tn-flex tn-flex-col-center"
style="border-radius: 100rpx;padding: 20rpx;width: 100%;background-color:#F1F2F8;">
<text style="color: #BABDC7;"
class="tn-icon-search justify-content-item tn-padding-right-xs tn-text-lg"></text>
<input v-model="serach_content" class="justify-content-item" placeholder="请会员姓名/手机号进行搜索"
name="input" placeholder-style="color:#BABDC7"
style="width: 100%;padding-right: 200rpx;"></input>
</view>
<view style="position: absolute;right: 10rpx;top: 10rpx">
<tn-button backgroundColor="rgba(48,86,211,0.1)" shape="round" padding="20rpx 20rpx"
width="150rpx" @click="serach_do()">
<text style="color:#3056D3;font-weight: bold;">搜 索</text>
</tn-button>
</view> </view>
</view> </view>
</view> </view>
<!-- <view class="tn-flex tn-flex-col-center tn-flex-row-between" @click="selectShow= true"
style="padding: 30rpx;">
<view>
<text>{{HomeTitle}}</text>
<text class="tn-icon-down-triangle"></text>
</view>
<view>
<text>筛选</text>
</view>
</view> -->
</view> </view>
<view class="tn-classify__container"> <view :class="isFixed?'fixed':'abc'" style="width: 100%;z-index: 200;"
<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around my-page" :style="{top:isFixed?vuex_custom_bar_height+'px':'auto'}">
style="background-color: #EBF4F7;"> <view class="tn-flex tn-flex-col-center" style="padding: 30rpx;background-color: #ffffff;">
<!-- 左边容器 --> <view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
<view class="tn-classify__left-box left-width"> <text :class="openDqShow?'textThis':'textNo'">地区</text>
<view v-for="(item, index) in industry_list" :key="index" :id="`tabbar_item_${index}`" <text style="color: #BABDC7;"
style="padding-left: 20rpx;" class="tn-classify__tabbar__item tn-flex tn-flex-col-center" :class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
:class="[tabbarItemClass(index)]" @tap.stop="clickClassifyNav(index)">
<view class="tn-classify__tabbar__item__title">{{ item.industry_name }}</view>
</view>
</view> </view>
<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
<!-- 右边容器 --> <view :class="openDqShow?'textThis tn-text-ellipsis':'textNo tn-text-ellipsis'"
<scroll-view class="tn-classify__right-box" @scroll="getScroll" :scroll-top="top" scroll-y style="max-width: 120rpx;display: inline-block;vertical-align: middle;">
style="width: 72%"> {{hy_name=='全部'?'行业':hy_name}}
<block> </view>
<view class="tn-classify__content"> <text style="color: #BABDC7;vertical-align: middle;"
<!-- 分类内容子栏目 --> :class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
<view class="tn-classify__content__sub-classify__content " style="padding-bottom: 120rpx;"> </view>
<view v-for="(item,index) in list" :key="index"> <view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
<view v-if="item.neirong" <text :class="openDqShow?'textThis':'textNo'">届数</text>
style="font-weight: 300;;background-color: #EBF4F7;color:#4AA2EF;width: 100%;height: 60rpx;line-height: 60rpx;text-align: center;"> <text style="color: #BABDC7;"
{{item.position_name}} :class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
</view> </view>
<view v-if="item.neirong" v-for="(v,k) in item.neirong" <view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
@click="tn('/pages/packageA/user/my_card?id='+v.member_id)" <text :class="openDqShow?'textThis':'textNo'">组织架构</text>
class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-center tn-flex-col-center"> <text style="color: #BABDC7;"
<!-- 标题，有需要可以显示出来 --> :class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
<view style="width: 100rpx;height: 100rpx"> </view>
<image :src="apiImgUrl+v.photo_image" </view>
style="width: 100rpx;height: 100rpx;border-radius:50%;"> <view v-if="openDqShow">
</image> <view style="border-radius: 0 0 20rpx 20rpx;background-color: #ffffff;padding-bottom: 30rpx;">
</view> <scroll-view scroll-y="" style="height: 500rpx;">
<view style="margin-left: 20rpx;"> <view v-for="(item,index) in industry_list" @click="clickClassifyNav(index)"
<view style="font-size: 28rpx;"> style="padding: 20rpx 30rpx;font-size: 28rpx;">
<text>{{v.nikename}}</text> <view :class="item.id==leftId?'textThis':'textNo'">{{item.industry_name}}</view>
<text style="margin-left: 50rpx;">{{v.nation}}</text> <view v-if="index<industry_list.length-1"
</view> style="width: 100%;height: 1px;background-color: #F1F2F8;margin-top: 30rpx;"></view>
<view class="tn-text-ellipsis-2" </view>
style="font-size: 24rpx;margin-top: 10rpx;"> </scroll-view>
<text>{{v.enterprise_name==null?'':v.enterprise_name}}</text> </view>
</view> </view>
</view> </view>
</view> <view v-if="openDqShow" @click="openDqShow = false" @touchmove.stop.prevent="() => {}"
style="position: absolute;width: 100%;height:100%;background-color: rgba(0, 0,0, 0.3);z-index: 100;"></view>
<view style="padding:120rpx 30rpx 100rpx 30rpx;">
<view style="overflow: hidden;">
<view v-for="(item,index) in list" :key="index"
style="border-radius: 20rpx;margin-bottom:30rpx;background-color: #ffffff;">
<view
style="border-radius: 20rpx 20rpx 0rpx 0rpx;background: #E6E8F1;text-align: center;font-size: 34rpx;font-weight: bold;height: 110rpx;line-height: 110rpx;">
{{item.position_name}}
</view>
<view>
<view v-if="item.neirong" v-for="(v,k) in item.neirong"
@click="tn('/pages/packageA/user/my_card?id='+v.member_id)"
class="tn-flex tn-flex-center tn-flex-col-center" style="padding: 35rpx;">
<view style="width: 100rpx;height: 100rpx">
<image :src="apiImgUrl+v.photo_image"
style="width: 100rpx;height: 100rpx;border-radius:50%;">
</image>
</view>
<view style="margin-left: 20rpx;">
<view>
<text
style="font-size: 32rpx;font-weight: bold;vertical-align: middle;">{{v.nikename}}</text>
<tn-tag size="sm" padding="0px 5px" margin="0 0 0 20rpx" width="auto" shape="radius"
backgroundColor="#F1F2F8" fontColor="#888888">{{v.position_name}}</tn-tag>
</view> </view>
<view v-if="list.length==0" style="text-align: center;padding: 20rpx"> <view class="tn-text-ellipsis-2"
暂无 style="font-size: 28rpx;margin-top: 10rpx;color: #666666;">
<text>{{v.enterprise_name==null?v.work_unit:v.enterprise_name}}</text>
</view> </view>
</view> </view>
</view> </view>
</block> </view>
</scroll-view> </view>
<view v-if="showNo" style="margin-top: 30px;text-align: center">暂无数据</view>
</view> </view>
</view> </view>
<!-- <view @click="tn('/pages/index/apply_in')" style="line-height: 40rpx;text-align: center;position: fixed;bottom:15%;right: 20rpx;width: 120rpx;height: 120rpx;border-radius: 50%;background: linear-gradient(270deg, #EE7E45, #EE9657);-->
<!--box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(12,0,5,0.2);">-->
<!-- <view style="color: #fff;letter-spacing: 2rpx;padding: 20rpx;font-size: 32rpx;">申请入会-->
<!-- </view>-->
<!-- </view>-->
<tn-select :safeAreaInsetBottom="true" v-model="selectShow" mode="single" :list="selectList" <tn-select :safeAreaInsetBottom="true" v-model="selectShow" mode="single" :list="selectList"
@confirm="confirm"></tn-select> @confirm="confirm"></tn-select>
</view> </view>
@ -119,20 +124,14 @@
export default { export default {
data() { data() {
return { return {
showNo: false,
isFixed: false,
serach_content: '', serach_content: '',
list: [], list: [],
topCurrent: 0, topCurrent: 0,
tabbarIndex: 0, tabbarIndex: 0,
// 分类菜单item的信息 // 分类菜单item的信息
tabbarItemInfo: [], tabbarItemInfo: [],
// scrollView的top值
scrollViewBasicTop: 0,
// scrollView的高度
scrollViewHeight: 0,
// 左边scrollView的滚动高度
leftScrollViewTop: 0,
// 右边scrollView的滚动高度
rightScrollViewTop: 0,
// 当前选中的tabbar序号 // 当前选中的tabbar序号
currentTabbarIndex: 0, currentTabbarIndex: 0,
apiImgUrl: this.$store.state.imgUrl, apiImgUrl: this.$store.state.imgUrl,
@ -143,25 +142,9 @@
selectList: [], selectList: [],
gid: store.state.Gid, gid: store.state.Gid,
top: 0, top: 0,
} openDqShow: false,
}, selectTopNumber: 220,
computed: { hy_name: '全部',
tabbarItemClass() {
return index => {
if (index === this.currentTabbarIndex) {
return 'tn-classify__tabbar__item--active tn-bg-white'
} else {
let clazz = ''
if (this.currentTabbarIndex > 0 && index === this.currentTabbarIndex - 1) {
clazz += ' tn-classify__tabbar__item--active--prev'
}
if (this.currentTabbarIndex < this.industry_list.length && index === this.currentTabbarIndex +
1) {
clazz += ' tn-classify__tabbar__item--active--next'
}
return clazz
}
}
} }
}, },
onLoad(d) { onLoad(d) {
@ -173,9 +156,6 @@
this.getAssociationIndex(); this.getAssociationIndex();
}, },
methods: { methods: {
preventTouchMove() {
},
serach_do() { serach_do() {
this.list = []; this.list = [];
this.getAddressList(); this.getAddressList();
@ -232,7 +212,7 @@
}); });
this.industry_list.unshift({ this.industry_list.unshift({
id: 0, id: 0,
industry_name: '组织架构' industry_name: '全部'
}); });
this.leftId = res.data[0].id; this.leftId = res.data[0].id;
uni.showLoading({ uni.showLoading({
@ -260,6 +240,8 @@
console.log(res); console.log(res);
if (res.code == 1) { if (res.code == 1) {
this.list = res.data.ret; this.list = res.data.ret;
} else {
this.showNo = true;
} }
setTimeout(function() { setTimeout(function() {
uni.hideLoading(); uni.hideLoading();
@ -277,36 +259,23 @@
uni.showLoading({ uni.showLoading({
title: '加载中...' title: '加载中...'
}); });
this.isFixed = false;
this.showNo = false;
this.openDqShow = false;
this.currentTabbarIndex = index; this.currentTabbarIndex = index;
this.leftId = this.industry_list[index].id; this.leftId = this.industry_list[index].id;
this.hy_name = this.industry_list[index].industry_name;
this.list = []; this.list = [];
this.top = this.randomBetween();
this.getAddressList(); this.getAddressList();
//this.handleLeftScrollView(index)
//this.switchClassifyContent();
}, },
randomBetween() { ReachScroll(e) {
let baseRandom = Math.random() * (0.99999 - 0.00001) + 0.00001; //当距离大于20的时候吸顶
return baseRandom.toFixed(5); // if (e.detail.scrollTop > 100) {
}, this.isFixed = true;
// 点击分类后，处理scrollView滚动到居中位置
handleLeftScrollView(index) {
const tabbarItemTop = this.tabbarItemInfo[index].top - this.scrollViewBasicTop
if (tabbarItemTop > this.scrollViewHeight / 2) {
this.leftScrollViewTop = tabbarItemTop - (this.scrollViewHeight / 2) + this.tabbarItemInfo[index]
.height
} else { } else {
this.leftScrollViewTop = 0 this.isFixed = false;
} }
}, },
// 切换对应分类的数据
switchClassifyContent() {
this.rightScrollViewTop = 1
this.$nextTick(() => {
this.rightScrollViewTop = 0
})
//this.classifyContent.subClassify[0].title = this.tabbar[this.currentTabbarIndex]
},
tn(url) { tn(url) {
uni.navigateTo({ uni.navigateTo({
url: url url: url
@ -439,4 +408,21 @@
height: calc(100vh - 286rpx); height: calc(100vh - 286rpx);
padding-bottom: 100rpx; padding-bottom: 100rpx;
} }
.textThis {
color: #3056D3;
font-weight: bold;
}
.textNo {
color: #000000;
}
.fixed {
position: fixed;
}
.abc {
position: absolute;
}
</style> </style>

16
pages/index/home.vue
View File

@ -43,9 +43,11 @@
<view style="padding:0rpx 30rpx;"> <view style="padding:0rpx 30rpx;">
<view <view
style="background: linear-gradient( 90deg, #446BEB 0%, #6ADCF5 100%);border-radius: 0px 0px 20rpx 20rpx;;"> style="background: linear-gradient( 90deg, #446BEB 0%, #6ADCF5 100%);border-radius: 0px 0px 20rpx 20rpx;;">
<tn-notice-bar fontColor="#FFFFFF" :list="new_top_list" @click="openInfo" leftIconType="img" <tn-notice-bar fontColor="#FFFFFF" :list="new_top_list" leftIconType="img" mode="vertical"
mode="vertical" :rightIcon="false" backgroundColor="transparent" @clickRight="openRight" :rightIcon="false" backgroundColor="transparent"></tn-notice-bar>
@clickLeft="openRight"></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> </view>
<!-- <view class="indication"> <!-- <view class="indication">
@ -82,7 +84,7 @@
</view> </view>
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-flex-row-center" <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-flex-row-center"
style="padding: 0px 28rpx;margin-top: 20rpx"> style="padding: 0px 28rpx;margin-top: 20rpx">
<view @click="openUrl('/pages/index/pizz_info?id='+association_id)" <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);"> 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: 32rpx;font-weight: 600;;color: #181818;">协会简介</view>
<view <view
@ -95,7 +97,7 @@
</image> </image>
</view> </view>
<view style="width: 100%;margin-left: 20rpx"> <view style="width: 100%;margin-left: 20rpx">
<view @click="openUrl('/pages/index/service?type='+4)" <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);"> 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: 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> <view style="font-size: 24rpx;margin-top: 10rpx;color: rgba(24,24,24,0.5);">Member map</view>
@ -220,7 +222,7 @@
activeColor="#3056D3" :current="current" name="name" @change="change" :fontSize="28"></tn-tabs> activeColor="#3056D3" :current="current" name="name" @change="change" :fontSize="28"></tn-tabs>
</view> </view>
</view> </view>
<view style="padding:0px 30rpx;padding-bottom: 20rpx;min-height:1000rpx;"> <view style="padding:0px 30rpx;padding-bottom: 20rpx;min-height:500rpx;">
<view style="background-color: #ffffff;border-radius: 0rpx 0rpx 20rpx 20rpx;"> <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 v-for="(item,index) in news_list" :class="{'rounded_corner': index === 0}">
<view class="tn-flex tn-flex-row-between" @click="openNewUrl(item)" <view class="tn-flex tn-flex-row-between" @click="openNewUrl(item)"
@ -566,7 +568,7 @@
this.current = e; this.current = e;
var info = this.goryList[e]; var info = this.goryList[e];
this.gory_id = info.id; this.gory_id = info.id;
this.type = e === 0 ? 1 : 0; this.type = 0;
this.page = 1; this.page = 1;
this.news_list = []; this.news_list = [];
this.getNewsList(); this.getNewsList();

12
pages/index/index.vue
View File

@ -11,11 +11,10 @@
<Service ref="service"></Service> <Service ref="service"></Service>
</scroll-view> </scroll-view>
</view> --> </view> -->
<view @touchmove="preventTouchMove" v-if=" tabberPageLoadFlag[1]" <view v-if=" tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
:style="{display: currentIndex === 1 ? '' : 'none'}"> <scroll-view @scroll="directoryScroll" scroll-y enable-back-to-top :class="tabShow?'custom-tabbar-page':''">
<view :class="tabShow?'custom-tabbar-page':''">
<Directory ref="directory"></Directory> <Directory ref="directory"></Directory>
</view> </scroll-view>
</view> </view>
<!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}"> <!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower"> <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
@ -81,7 +80,7 @@
// out: true // out: true
// }, // },
{ {
title: '发现', title: '青企圈',
activeIcon: '/static/03_3.png', activeIcon: '/static/03_3.png',
inactiveIcon: '/static/03.png', inactiveIcon: '/static/03.png',
id: 2, id: 2,
@ -196,6 +195,9 @@
homeScroll(d) { homeScroll(d) {
this.$refs.home.ReachScroll(d); this.$refs.home.ReachScroll(d);
}, },
directoryScroll(d) {
this.$refs.directory.ReachScroll(d);
},
// 切换导航页面 // 切换导航页面
_switchTabbarPage(index) { _switchTabbarPage(index) {

115
pages/index/pizz.vue
View File

@ -1,118 +1,19 @@
<template> <template>
<view style="background-color: #EBF4F7;letter-spacing: 1rpx;min-height: 100vh;"> <view style="background-color: #F1F2F8;letter-spacing: 1rpx;min-height: 100vh;">
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF"> <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#ffffff">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-center"> <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<view class="tn-margin-top" style="text-align: center;"> <view style="width: 100%;">
<text>发现</text> <view
style="text-align: center;font-size: 34rpx;color: #000000;letter-spacing: 1px;font-weight: bold;">
<text>青企圈</text>
</view>
</view> </view>
</view> </view>
</tn-nav-bar> </tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" <view :style="{paddingTop: vuex_custom_bar_height + 'px'}"
style="background-color: #ffffff;padding-bottom: 10rpx;"> style="background-color: #ffffff;padding-bottom: 10rpx;">
<view style="padding:0rpx 20rpx">
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin"
style="background-color: #ffffff;">
<view class="justify-content-item align-content-item" style="width: 100%;">
<view class="tn-flex tn-flex-col-center"
style="border-radius: 100rpx;padding: 15rpx 20rpx;width: 100%;background-color:#F1F2F8;">
<text
class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
<input @confirm="onsubmit()" confirm-type="search" v-model="content"
class="justify-content-item" placeholder="请输入协会名称进行搜索" name="input"
placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
</view>
</view>
<!-- <view>
<view class="justify-content-item tn-text-center">
<tn-button backgroundColor="#3668fc" shape="round" padding="20rpx 20rpx" width="150rpx"
@click="onsubmit()">
<text class="tn-color-white">搜 索</text>
</tn-button>
</view>
</view> -->
</view>
</view>
<!-- <view class="tn-flex tn-flex-row-around tn-flex-center tn-flex-col-center" style="padding: 30rpx;">-->
<!-- <view style="color: #E15033;">-->
<!-- <text class="tn-icon-sequence-vertical" style="vertical-align: middle;"></text>-->
<!-- <text style="margin-left: 15rpx;vertical-align: middle;">全部排序</text>-->
<!-- </view>-->
<!-- <view style="height: 25rpx;width: 2rpx;background-color: #808080;"></view>-->
<!-- <view>-->
<!-- <text class="tn-icon-first" style="vertical-align: middle;"></text>-->
<!-- <text style="margin-left: 15rpx;vertical-align: middle;">人气榜</text>-->
<!-- </view>-->
<!-- <view style="height: 25rpx;width: 2rpx;background-color: #808080;"></view>-->
<!-- <view>-->
<!-- <text class="tn-icon-light" style="vertical-align: middle;"></text>-->
<!-- <text style="margin-left: 15rpx;vertical-align: middle;">最新入驻</text>-->
<!-- </view>-->
<!-- </view>-->
</view> </view>
<!-- <view class="tn-flex tn-flex-row-between tn-flex-center tn-flex-col-center" style="padding: 30rpx;">-->
<!-- <view style="text-align: center;background-color: #FFF;padding:10rpx 30rpx;width: 48%;border-radius: 5rpx;">-->
<!-- <text>省协会</text>-->
<!-- <text class="tn-icon-down-triangle"></text>-->
<!-- </view>-->
<!-- <view style="text-align: center;background-color: #FFF;padding:10rpx 30rpx;width: 48%;border-radius: 5rpx;">-->
<!-- <text>市协会</text>-->
<!-- <text class="tn-icon-down-triangle"></text>-->
<!-- </view>-->
<!-- </view>-->
<view style="padding:30rpx 30rpx 180rpx 30rpx;">
<view style="position: relative;" @click="tn('/pages/index/pizz_info?id='+item.id)">
<view class="tn-flex tn-flex-center tn-flex-col-center"
style="box-shadow: 0rpx 4rpx 25rpx 0rpx rgba(5,171,129,0.25);background: linear-gradient(to bottom,rgba(19,194,150,0.7) 0%, #13C296 100%);padding:40rpx 30rpx;border-radius: 30rpx;margin-bottom: 20rpx;">
<view>
<image :src="apiImgUrl+'/uploads/1/20240628/a78696e22b3cecbf678afbbcca617fca.png'"
style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
</view>
<view style="margin-left: 30rpx;">
<view style="color:#ffffff;font-size: 32rpx;font-weight: 600;">洛阳市总商会
</view>
<view style="font-size: 28rpx;color: rgba(255,255,255,0.6);margin-top: 15rpx;">成立时间：2021-10-01
</view>
</view>
</view>
<view
style="font-size: 20rpx;color: #09AE85;background-color: #B8EDE0;position: absolute;top: 0;right: 0;border-radius: 0px 15rpx 0px 15rpx;padding:10rpx 15rpx;">
<text style="vertical-align: middle;margin-left: 5rpx;">已认证</text>
</view>
<view class="triangle"></view>
</view>
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between"
style="color: #CCCCCC;margin: 50rpx 0rpx 40rpx 0rpx;">
<view style="border: 1rpx dashed #CCCCCC;width: 100%;"></view>
<!-- <view style="width: 500rpx;text-align: center;font-size: 24rpx;">分协会展示</view> -->
<view style="border: 1rpx dashed #CCCCCC;width: 100%;"></view>
</view>
<view v-for="(item,index) in list" style="position: relative;" @click="switchTabbar(item)">
<view class="tn-flex tn-flex-center tn-flex-col-center"
style="background-color: #ffffff;padding:40rpx 30rpx;border-radius: 30rpx;margin-bottom: 30rpx;">
<view>
<image :src="apiImgUrl+item.association_image"
style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
</view>
<view style="margin-left: 30rpx;">
<view style="font-size: 32rpx;font-weight: 600;">{{item.association_name}}
</view>
<view style="font-size: 28rpx;color: #888888;margin-top: 15rpx;">成立时间：{{item.createtime}}</view>
</view>
</view>
<view
style="font-size: 20rpx;color: #09AE85;background-color: #B8EDE0;position: absolute;top: 0;right: 0;border-radius: 0px 15rpx 0px 15rpx;padding:10rpx 15rpx;">
<text style="vertical-align: middle;margin-left: 5rpx;">已认证</text>
</view>
</view>
</view>
<!-- <view style="position: fixed;bottom: 13%;width: 100%;">-->
<!-- <view @click="tn('/pages/index/enter_in')"-->
<!-- style="margin: 0 auto;color: #fff;letter-spacing: 10rpx;line-height: 70rpx;;text-align: center;width: 70%;height: 70rpx;background: linear-gradient(270deg, #EE7E45, #EE9657);border-radius: 50rpx;">-->
<!-- 快速入驻</view>-->
<!-- </view>-->
</view> </view>
</template> </template>

2
pages/index/pizz_info.vue
View File

@ -182,7 +182,7 @@
inactiveIcon: '/static/02.png' inactiveIcon: '/static/02.png'
}, },
{ {
title: '发现', title: '青企圈',
activeIcon: '/static/03_3.png', activeIcon: '/static/03_3.png',
inactiveIcon: '/static/03.png' inactiveIcon: '/static/03.png'
}, },

5
pages/index/service.vue
View File

@ -38,8 +38,7 @@
<view v-for="(item,index) in actList"> <view v-for="(item,index) in actList">
<view @click="openUrl('/pages/packageB/event/event_info?id='+item.id)" <view @click="openUrl('/pages/packageB/event/event_info?id='+item.id)"
style="margin-bottom: 30rpx;background-color: #FFF;border-radius: 20rpx;"> style="margin-bottom: 30rpx;background-color: #FFF;border-radius: 20rpx;">
<view class="tn-flex tn-flex-row-between" @click="openNewUrl(item)" <view class="tn-flex tn-flex-row-between" style="padding:20rpx 20rpx 10rpx 10rpx;">
style="padding:20rpx 20rpx 10rpx 10rpx;">
<view style="margin-left: 10rpx;" v-if="item.activity_image"> <view style="margin-left: 10rpx;" v-if="item.activity_image">
<image :src="apiImgUrl+item.activity_image" mode="aspectFill" <image :src="apiImgUrl+item.activity_image" mode="aspectFill"
style="width: 280rpx;height: 180rpx;border-radius: 20rpx;"></image> style="width: 280rpx;height: 180rpx;border-radius: 20rpx;"></image>
@ -94,7 +93,7 @@
inactiveIcon: '/static/02.png' inactiveIcon: '/static/02.png'
}, },
{ {
title: '发现', title: '青企圈',
activeIcon: '/static/03_3.png', activeIcon: '/static/03_3.png',
inactiveIcon: '/static/03.png' inactiveIcon: '/static/03.png'
}, },

183
pages/packageA/user/my_invoice.vue
View File

@ -65,54 +65,30 @@
</tn-nav-bar> </tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content"> <view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
<view style="padding: 30rpx;"> <view style="padding: 30rpx;">
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between"> <view @click="tt_show_do" class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
<view @click="tt_show_do"> <view>
<view>{{header_id_name}}</view> <view v-if="header_id_name == ''">请选择开票信息</view>
<view v-if="header_id_name != ''">
<view style="padding: 30rpx 0rpx;">
<view>申请人：{{header_id_name.name}}</view>
<view>公司名称：{{header_id_name.unit}}</view>
<view>纳税人识别号：{{header_id_name.taxpayer_identification_number}}</view>
<view>单位地址：{{header_id_name.unit_address}}</view>
<view>单位电话：{{header_id_name.telephone}}</view>
<view>银行基本户账号：{{header_id_name.bank_basic_account_number}}</view>
<view>开户行：{{header_id_name.bank}}</view>
</view>
</view>
</view> </view>
<view> <view>
<tn-button @click="tt_add_show = true" backgroundColor="#3D7EFF" size="sm" <!-- <tn-button @click="tt_add_show = true" backgroundColor="#3D7EFF" size="sm"
fontColor="#ffffff">添加开票信息</tn-button> fontColor="#ffffff">添加开票信息</tn-button> -->
<text style="margin-left: 20rpx;" class="tn-icon-right"></text> <text style="margin-left: 20rpx;" class="tn-icon-right"></text>
</view> </view>
</view> </view>
<tn-select v-model="tt_show" mode="single" :list="tt_list" @confirm="tt_confirm"></tn-select> <!-- <tn-select v-model="tt_show" mode="single" :list="tt_list" @confirm="tt_confirm"></tn-select> -->
</view> </view>
<view v-if="tt_add_show" class="text" style="padding:20rpx 40rpx;"> <view class="text" style="padding:20rpx 40rpx;">
<view style="text-align: center;font-size: 32rpx;font-weight: 600;">添加开票信息</view>
<tn-form ref="form" :labelWidth="120">
<tn-form-item prop="name">
<tn-input placeholder="申请人" :customStyle="{width: '600rpx'}" v-model="addForm.name" />
</tn-form-item>
<tn-form-item prop="unit">
<tn-input placeholder="公司名称" :customStyle="{width: '600rpx'}" v-model="addForm.unit" />
</tn-form-item>
<tn-form-item prop="taxpayer_identification_number">
<tn-input placeholder="纳税人识别号" :customStyle="{width: '600rpx'}"
v-model="addForm.taxpayer_identification_number" />
</tn-form-item>
<tn-form-item prop="unit_address">
<tn-input placeholder="单位地址" :customStyle="{width: '600rpx'}"
v-model="addForm.unit_address" />
</tn-form-item>
<tn-form-item prop="telephone">
<tn-input placeholder="单位电话" :customStyle="{width: '600rpx'}" v-model="addForm.telephone" />
</tn-form-item>
<tn-form-item prop="bank_basic_account_number">
<tn-input placeholder="银行基本户账号" :customStyle="{width: '600rpx'}"
v-model="addForm.bank_basic_account_number" />
</tn-form-item>
<tn-form-item prop="bank">
<tn-input placeholder="开户行" :customStyle="{width: '600rpx'}" v-model="addForm.bank" />
</tn-form-item>
</tn-form>
<view style="text-align: center;margin-top: 50rpx;">
<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff"
@click="tt_add_show = false" width="40%">取消</tn-button>
<tn-button backgroundColor="#3D7EFF" height="70rpx" width="40%" fontColor="#ffffff"
style="margin-left: 30rpx;" @click="tt_add_do">提交</tn-button>
</view>
</view>
<view v-if="!tt_add_show" class="text" style="padding:20rpx 40rpx;">
<view style="text-align: center;font-size: 32rpx;font-weight: 600;">申请发票</view> <view style="text-align: center;font-size: 32rpx;font-weight: 600;">申请发票</view>
<tn-form ref="form" :labelWidth="180"> <tn-form ref="form" :labelWidth="180">
<tn-form-item prop="name" label="发票类型"> <tn-form-item prop="name" label="发票类型">
@ -211,6 +187,81 @@
</view> </view>
</view> </view>
</tn-popup> </tn-popup>
<tn-popup v-model="tt_add_show" mode="right" :safeAreaInsetBottom="true" width="100%">
<tn-nav-bar :isBack="false" backTitle="" :alpha="true" :bottomShadow="false">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<view style="padding-left: 15rpx;" @click="tt_add_show = false">
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
</view>
<view class="tn-margin-top"
style="text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
<tn-tabs :list="[{name:'选择开票信息'}]" activeColor="#000" :bold="false" :fontSize="34"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
<view v-if="!tt_add_show_add" style="padding:0rpx 30rpx 150rpx 30rpx;">
<view style="text-align:right;">
<tn-button @click="tt_add_show_add = true" backgroundColor="#3D7EFF" size="sm"
fontColor="#ffffff">添加开票信息</tn-button>
</view>
<tn-radio-group v-model="header_id" width="100%" wrap @change="radioGroupChange">
<block v-for="(item,index) in tt_list">
<tn-radio :name="item.id+''" :size="40" borderColor="#3D7EFF" activeColor="#3D7EFF">
<view style="padding: 30rpx 0rpx;margin-left: 30px;">
<view>申请人：{{item.name}}</view>
<view>公司名称：{{item.unit}}</view>
<view>纳税人识别号：{{item.taxpayer_identification_number}}</view>
<view>单位地址：{{item.unit_address}}</view>
<view>单位电话：{{item.telephone}}</view>
<view>银行基本户账号：{{item.bank_basic_account_number}}</view>
<view>开户行：{{item.bank}}</view>
</view>
</tn-radio>
</block>
</tn-radio-group>
</view>
<view style="position: fixed;bottom: 80rpx;width: 92%;margin: 0 auto;text-align: center;">
<tn-button @click="tt_add_show = false" backgroundColor="#3D7EFF" width="300rpx" height="80rpx"
fontColor="#ffffff">确定</tn-button>
</view>
<view v-if="tt_add_show_add" class="text" style="padding:20rpx 40rpx;">
<view style="text-align: center;font-size: 32rpx;font-weight: 600;">添加开票信息</view>
<tn-form ref="form" :labelWidth="120">
<tn-form-item prop="name">
<tn-input placeholder="申请人" :customStyle="{width: '600rpx'}" v-model="addForm.name" />
</tn-form-item>
<tn-form-item prop="unit">
<tn-input placeholder="公司名称" :customStyle="{width: '600rpx'}" v-model="addForm.unit" />
</tn-form-item>
<tn-form-item prop="taxpayer_identification_number">
<tn-input placeholder="纳税人识别号" :customStyle="{width: '600rpx'}"
v-model="addForm.taxpayer_identification_number" />
</tn-form-item>
<tn-form-item prop="unit_address">
<tn-input placeholder="单位地址" :customStyle="{width: '600rpx'}"
v-model="addForm.unit_address" />
</tn-form-item>
<tn-form-item prop="telephone">
<tn-input placeholder="单位电话" :customStyle="{width: '600rpx'}" v-model="addForm.telephone" />
</tn-form-item>
<tn-form-item prop="bank_basic_account_number">
<tn-input placeholder="银行基本户账号" :customStyle="{width: '600rpx'}"
v-model="addForm.bank_basic_account_number" />
</tn-form-item>
<tn-form-item prop="bank">
<tn-input placeholder="开户行" :customStyle="{width: '600rpx'}" v-model="addForm.bank" />
</tn-form-item>
</tn-form>
<view style="text-align: center;margin-top: 50rpx;">
<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff"
@click="tt_add_show_add = false" width="40%">取消</tn-button>
<tn-button backgroundColor="#3D7EFF" height="70rpx" width="40%" fontColor="#ffffff"
style="margin-left: 30rpx;" @click="tt_add_do">提交</tn-button>
</view>
</view>
</view>
</tn-popup>
</view> </view>
</template> </template>
@ -229,6 +280,7 @@
apiImgUrl: this.$store.state.imgUrl, apiImgUrl: this.$store.state.imgUrl,
addMod: false, addMod: false,
infoMod: false, infoMod: false,
tt_add_show_add: false,
addForm: { addForm: {
name: '', name: '',
taxpayer_identification_number: '', taxpayer_identification_number: '',
@ -250,8 +302,8 @@
id: 2 id: 2
} }
], ],
header_id: 0, header_id: -1,
header_id_name: '请选择开票信息', header_id_name: '',
invoice_type_name: '普票', invoice_type_name: '普票',
invoice_type: 1, invoice_type: 1,
tt_add_show: false, tt_add_show: false,
@ -276,6 +328,11 @@
this.getList(); this.getList();
}, },
methods: { methods: {
radioGroupChange(d) {
const item = this.tt_list.find(item => item.id == d);
console.log(item);
this.header_id_name = item;
},
openImg() { openImg() {
uni.previewImage({ uni.previewImage({
current: 0, current: 0,
@ -304,16 +361,17 @@
this.invoice_type = this.actionSheetList[index].id; this.invoice_type = this.actionSheetList[index].id;
}, },
tt_show_do() { tt_show_do() {
if (this.tt_list.length == 0) { this.tt_add_show = true;
uni.showToast({ // if (this.tt_list.length == 0) {
title: '请先添加开票信息', // uni.showToast({
icon: 'none', // title: '请先添加开票信息',
duration: 2000 // icon: 'none',
}); // duration: 2000
this.tt_add_show = true; // });
} else { // this.tt_add_show = true;
this.tt_show = true; // } else {
} // this.tt_show = true;
// }
}, },
kp_add_do() { kp_add_do() {
@ -353,6 +411,9 @@
this.invoice_type_name = '普票'; this.invoice_type_name = '普票';
this.invoice_type = 1; this.invoice_type = 1;
this.money = ''; this.money = '';
this.allList = [];
this.page = 1;
this.getList();
} else { } else {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@ -400,12 +461,12 @@
if (res.data == null) { if (res.data == null) {
this.tt_list = []; this.tt_list = [];
} else { } else {
var key = res.data; // var key = res.data;
const transformedSelectList = key.map(item => ({ // const transformedSelectList = key.map(item => ({
value: item.id, // value: item.id,
label: item.unit // label: item.unit
})); // }));
this.tt_list = transformedSelectList; this.tt_list = res.data;
} }
}) })
.catch(error => { .catch(error => {
@ -424,7 +485,7 @@
.then(res => { .then(res => {
console.log(res); console.log(res);
this.allList.push(...res.data.data); this.allList.push(...res.data.data);
this.count = res.data.total; this.count = res.data.count;
}) })
.catch(error => { .catch(error => {
uni.showToast({ uni.showToast({

131
pages/packageB/event/event_info.vue
View File

@ -1,22 +1,75 @@
<template> <template>
<view style="letter-spacing: 1rpx;" v-cloak> <view style="background: #F1F2F8;" v-cloak>
<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF"> <tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-between"> <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view style="padding-left: 15rpx;" @click="goBack()">
<view style="padding-left: 15rpx;" @click="goBack()"> <text class="tn-icon-left" style="font-size: 40rpx;"></text>
<text class="tn-icon-left" style="font-size: 40rpx;"></text> </view>
</view> <view style="width: 83%;font-weight: bold;">
<view class="tn-margin-top" <text>活动详情</text>
style="text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
<tn-tabs :list="[{name:'活动详情'}]" :current="topCurrent" activeColor="#000" :bold="false"
:fontSize="36"></tn-tabs>
</view>
</view> </view>
</view> </view>
</tn-nav-bar> </tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<image :src="apiImgUrl+info.activity_image" style="width: 100%;" mode="widthFix"></image> <view style="padding: 30rpx;">
<view> <image :src="apiImgUrl+info.activity_image"
style="display: block;width: 100%;border-radius: 20rpx 20rpx 0rpx 0rpx;" mode="widthFix"></image>
<view style="background-color: #ffffff;border-radius: 0rpx 0rpx 20rpx 20rpx;padding: 30rpx;">
<view style="font-size: 34rpx;font-weight: bold;">{{ info.activity_name }}</view>
<view style="font-size: 28rpx;color: #666666;margin-top: 20rpx;">
<text class="tn-icon-time"></text>
<text>{{formatTime(info.activity_end_time)}}-{{formatTime(info.activity_start_time)}}</text>
</view>
<view style="font-size: 28rpx;color: #666666;margin-top: 20rpx;">
<text class="tn-icon-location" style="vertical-align: middle;"></text>
<text>{{ info.activity_location }}</text>
</view>
</view>
<view style="margin-top: 20rpx;background-color: #ffffff;border-radius: 20rpx;padding: 30rpx;">
<view style="font-size: 34rpx;font-weight: 600;padding: 20rpx 0rpx;">活动介绍</view>
<view>
<view class="ks_html" style="line-height: 50rpx;margin-top:20rpx">
<view v-if="info.video!=null&&info.video!=''">
<video :src="apiImgUrl+info.video" style="width: 100%;border-radius: 5rpx;"></video>
</view>
<view v-html="info.activity_content"></view>
</view>
</view>
</view>
</view>
<view style="height: 80rpx;"></view>
<view
style="border-radius: 200rpx;background: #FFFFFF;position: fixed;bottom: 50rpx;right: 30rpx;padding: 30rpx 50rpx;box-shadow: 0rpx 4rpx 25rpx 0rpx rgba(48,86,211,0.15);">
<view style="text-align: center;" class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
<view>
<button hover-class="none" open-type="share">
<view style="font-size: 42rpx;">
<text class="tn-icon-send"></text>
</view>
<view style="color: #666666;">
分享
</view>
</button>
</view>
<view style="margin: 0px 40rpx;">
<view style="font-size: 42rpx;">
<text class="tn-icon-praise"></text>
</view>
<view style="color: #666666;">
点赞
</view>
</view>
<view>
<view style="font-size: 42rpx;">
<text class="tn-icon-star"></text>
</view>
<view style="color: #666666;">
收藏
</view>
</view>
</view>
</view>
<!-- <view>
<view style="padding:20rpx 30rpx;"> <view style="padding:20rpx 30rpx;">
<view style="font-size: 34rpx;font-weight: 600;">{{ info.activity_name }}</view> <view style="font-size: 34rpx;font-weight: 600;">{{ info.activity_name }}</view>
<view style="margin-top: 40rpx;"> <view style="margin-top: 40rpx;">
@ -148,18 +201,18 @@
</tn-form> </tn-form>
</view> </view>
</view> </view>
</view> </view> -->
</view> </view>
<view style="position: fixed;bottom: 30rpx; width: 100%;"> <!-- <view style="position: fixed;bottom: 30rpx; width: 100%;"> -->
<!-- <view class="tn-flex tn-flex-center tn-flex-row-center tn-flex-col-center"--> <!-- <view class="tn-flex tn-flex-center tn-flex-row-center tn-flex-col-center"-->
<!-- style="background-color: #FDF2EC;text-align: center;padding: 30rpx;">--> <!-- style="background-color: #FDF2EC;text-align: center;padding: 30rpx;">-->
<!-- <view style="font-weight: 600;">--> <!-- <view style="font-weight: 600;">-->
<!-- <text style="margin-right: 10rpx;">距报名结束剩<text style="color: #F73909;">119</text>天</text>--> <!-- <text style="margin-right: 10rpx;">距报名结束剩<text style="color: #F73909;">119</text>天</text>-->
<!-- <tn-count-down fontColor="#F73909" backgroundColor="#FDF2EC" :fontSize="30" :timestamp="86400"--> <!-- <tn-count-down fontColor="#F73909" backgroundColor="#FDF2EC" :fontSize="30" :timestamp="86400"-->
<!-- :showDays="true" :showHours="true" :showSeconds="true" :showMinutes="true"></tn-count-down>--> <!-- :showDays="true" :showHours="true" :showSeconds="true" :showMinutes="true"></tn-count-down>-->
<!-- </view>--> <!-- </view>-->
<!-- </view>--> <!-- </view>-->
<view style="text-align: center;padding:0 30rpx;" v-if="info.activity_type==1"> <!-- <view style="text-align: center;padding:0 30rpx;" v-if="info.activity_type==1">
<button class="mmy" hover-class="none" @click="application_add" v-if="info.type=='进行中'">确认报名</button> <button class="mmy" hover-class="none" @click="application_add" v-if="info.type=='进行中'">确认报名</button>
<button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='已结束'">报名已结束</button> <button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='已结束'">报名已结束</button>
<button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='未开始'">报名未开始</button> <button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='未开始'">报名未开始</button>
@ -178,8 +231,8 @@
<button class="mmy" hover-class="none" @click="peiMod=true" v-if="info.type=='进行中'">我要参加</button> <button class="mmy" hover-class="none" @click="peiMod=true" v-if="info.type=='进行中'">我要参加</button>
<button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='已结束'">报名已结束</button> <button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='已结束'">报名已结束</button>
<button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='未开始'">报名未开始</button> <button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='未开始'">报名未开始</button>
</view> </view> -->
</view> <!-- </view> -->
<tn-modal v-model="juanMod" :custom="true"> <tn-modal v-model="juanMod" :custom="true">
<view style="padding: 20rpx;text-align: center;font-size: 40rpx;">感谢您的捐助</view> <view style="padding: 20rpx;text-align: center;font-size: 40rpx;">感谢您的捐助</view>
<tn-form :labelWidth="180"> <tn-form :labelWidth="180">
@ -592,6 +645,9 @@
url: url url: url
}) })
}, },
formatTime(time) {
return time.split(" ")[0];
},
goBack() { goBack() {
if (getCurrentPages().length > 1) { if (getCurrentPages().length > 1) {
uni.navigateBack() uni.navigateBack()
@ -616,4 +672,27 @@
line-height: 80rpx; line-height: 80rpx;
font-size: 28rpx; font-size: 28rpx;
} }
button::after {
border: none;
}
button {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
padding-right: 0px;
box-sizing: border-box;
text-align: center;
text-decoration: none;
line-height: 1.35;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
background-color: transparent;
font-size: 28rpx;
width: 100%;
height: 100%;
}
</style> </style>

166
pages/packageB/news/new_list.vue Normal file
View File

@ -0,0 +1,166 @@
<template>
<view style="background: #F1F2F8;" v-cloak>
<tn-nav-bar :isBack="false" :bottomShadow="false" backTitle="" backgroundColor="#FFFFFF">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<view style="padding-left: 15rpx;" @click="goBack()">
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
</view>
<view style="width: 83%;font-weight: bold;">
<text>新闻详情</text>
</view>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view style="padding-top: 20rpx;background-color: #ffffff;">
<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:30rpx;padding-bottom: 20rpx;min-height:87vh;">
<view style="background-color: #ffffff;border-radius: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>
</template>
<script>
import {
newsGoryList,
newsList,
} from '@/util/api.js';
import store from '@/store/index.js'
export default {
data() {
return {
current: 0,
goryList: [],
news_list: [],
page: 1,
size: 10,
apiImgUrl: this.$store.state.imgUrl,
}
},
onLoad() {
this.getNewsGoryList();
},
onReachBottom() {
this.page += 1;
this.getNewsList();
},
methods: {
change(e) {
this.current = e;
var info = this.goryList[e];
this.gory_id = info.id;
this.type = e === 0 ? 1 : 0;
this.page = 1;
this.news_list = [];
this.getNewsList();
},
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
});
})
},
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
});
})
},
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),
})
}
},
goBack() {
if (getCurrentPages().length > 1) {
uni.navigateBack()
} else {
uni.redirectTo({
url: '/pages/index/index'
})
}
},
formatTime(time) {
const [year, month, day] = time.split(' ')[0].split('-');
return `${year}-${month}-${day}`;
},
}
}
</script>
<style>
</style>

881
tuniao-ui/components/tn-popup/tn-popup.vue
View File

@ -1,492 +1,463 @@
<template> <template>
<view <view v-if="visibleSync" class="tn-popup-class tn-popup" :style="[customStyle, popupStyle, { zIndex: elZIndex - 1}]"
v-if="visibleSync" hover-stop-propagation>
class="tn-popup-class tn-popup" <!-- mask -->
:style="[customStyle, popupStyle, { zIndex: elZIndex - 1}]" <view class="tn-popup__mask" :class="[{'tn-popup__mask--show': showPopup && mask}]"
hover-stop-propagation :style="{zIndex: elZIndex - 2}" @tap="maskClick" @touchmove.stop.prevent="() => {}" hover-stop-propagation>
> </view>
<!-- mask --> <!-- 弹框内容 -->
<view <view class="tn-popup__content" :class="[
class="tn-popup__mask"
:class="[{'tn-popup__mask--show': showPopup && mask}]"
:style="{zIndex: elZIndex - 2}"
@tap="maskClick"
@touchmove.stop.prevent = "() => {}"
hover-stop-propagation
></view>
<!-- 弹框内容 -->
<view
class="tn-popup__content"
:class="[
mode !== 'center' ? backgroundColorClass : '', mode !== 'center' ? backgroundColorClass : '',
safeAreaInsetBottom ? 'tn-safe-area-inset-bottom' : '', safeAreaInsetBottom ? 'tn-safe-area-inset-bottom' : '',
'tn-popup--' + mode, 'tn-popup--' + mode,
showPopup ? 'tn-popup__content--visible' : '', showPopup ? 'tn-popup__content--visible' : '',
zoom && mode === 'center' ? 'tn-popup__content__center--animation-zoom' : '' zoom && mode === 'center' ? 'tn-popup__content__center--animation-zoom' : ''
]" ]" :style="[contentStyle]" @tap="modeCenterClose" @touchmove.stop.prevent @tap.stop.prevent>
:style="[contentStyle]" <!-- 居中时候的内容 -->
@tap="modeCenterClose" <view v-if="mode === 'center'" class="tn-popup__content__center_box" :class="[backgroundColorClass]"
@touchmove.stop.prevent :style="[centerStyle]" @touchmove.stop.prevent @tap.stop.prevent>
@tap.stop.prevent <!-- 关闭按钮 -->
> <view v-if="closeBtn" class="tn-popup__close"
<!-- 居中时候的内容 --> :class="[`tn-icon-${closeBtnIcon}`, `tn-popup__close--${closeBtnPosition}`]"
<view :style="[closeBtnStyle, {zIndex: elZIndex}]" @tap="close"></view>
v-if="mode === 'center'" <scroll-view scroll-y class="tn-popup__content__scroll-view">
class="tn-popup__content__center_box" <slot></slot>
:class="[backgroundColorClass]" </scroll-view>
:style="[centerStyle]" </view>
@touchmove.stop.prevent
@tap.stop.prevent
>
<!-- 关闭按钮 -->
<view
v-if="closeBtn"
class="tn-popup__close"
:class="[`tn-icon-${closeBtnIcon}`, `tn-popup__close--${closeBtnPosition}`]"
:style="[closeBtnStyle, {zIndex: elZIndex}]"
@tap="close"
></view>
<scroll-view scroll-y class="tn-popup__content__scroll-view">
<slot></slot>
</scroll-view>
</view>
<!-- 除居中外的其他情况 --> <!-- 除居中外的其他情况 -->
<scroll-view scroll-y v-else class="tn-popup__content__scroll-view"> <scroll-view scroll-y v-else class="tn-popup__content__scroll-view">
<slot></slot> <slot></slot>
</scroll-view> </scroll-view>
<!-- 关闭按钮 --> <!-- 关闭按钮 -->
<view <view v-if="mode !== 'center' && closeBtn" class="tn-popup__close"
v-if="mode !== 'center' && closeBtn" :class="[`tn-popup__close--${closeBtnPosition}`]" :style="{zIndex: elZIndex}" @tap="close">
class="tn-popup__close" <view :class="[`tn-icon-${closeBtnIcon}`]" :style="[closeBtnStyle]"></view>
:class="[`tn-popup__close--${closeBtnPosition}`]" </view>
:style="{zIndex: elZIndex}" </view>
@tap="close" </view>
>
<view :class="[`tn-icon-${closeBtnIcon}`]" :style="[closeBtnStyle]"></view>
</view>
</view>
</view>
</template> </template>
<script> <script>
import componentsColorMixin from '../../libs/mixin/components_color.js' import componentsColorMixin from '../../libs/mixin/components_color.js'
export default { export default {
mixins: [componentsColorMixin], mixins: [componentsColorMixin],
name: 'tn-popup', name: 'tn-popup',
props: { props: {
value: { value: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 弹出方向 // 弹出方向
// left/right/top/bottom/center // left/right/top/bottom/center
mode: { mode: {
type: String, type: String,
default: 'left' default: 'left'
}, },
// 是否显示遮罩 // 是否显示遮罩
mask: { mask: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 抽屉的宽度（mode=left/right）,高度（mode=top/bottom） // 抽屉的宽度（mode=left/right）,高度（mode=top/bottom）
length: { length: {
type: [Number, String], type: [Number, String],
default: 'auto' default: 'auto'
}, },
// 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto" // 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数 // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
width: { width: {
type: String, type: String,
default: '' default: ''
}, },
// 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto" // 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数 // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
height: { height: {
type: String, type: String,
default: '' default: ''
}, },
// 是否开启动画，只在mode=center有效 // 是否开启动画，只在mode=center有效
zoom: { zoom: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
safeAreaInsetBottom: { safeAreaInsetBottom: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 是否可以通过点击遮罩进行关闭 // 是否可以通过点击遮罩进行关闭
maskCloseable: { maskCloseable: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 用户自定义样式 // 用户自定义样式
customStyle: { customStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
}, },
// 显示圆角的大小 // 显示圆角的大小
borderRadius: { borderRadius: {
type: Number, type: Number,
default: 0 default: 0
}, },
// zIndex // zIndex
zIndex: { zIndex: {
type: Number, type: Number,
default: 0 default: 0
}, },
// 是否显示关闭按钮 // 是否显示关闭按钮
closeBtn: { closeBtn: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 关闭按钮的图标 // 关闭按钮的图标
closeBtnIcon: { closeBtnIcon: {
type: String, type: String,
default: 'close' default: 'close'
}, },
// 关闭按钮显示的位置 // 关闭按钮显示的位置
// top-left/top-right/bottom-left/bottom-right // top-left/top-right/bottom-left/bottom-right
closeBtnPosition: { closeBtnPosition: {
type: String, type: String,
default: 'top-right' default: 'top-right'
}, },
// 关闭按钮图标颜色 // 关闭按钮图标颜色
closeIconColor: { closeIconColor: {
type: String, type: String,
default: '#AAAAAA' default: '#AAAAAA'
}, },
// 关闭按钮图标的大小 // 关闭按钮图标的大小
closeIconSize: { closeIconSize: {
type: Number, type: Number,
default: 30 default: 30
}, },
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效 // 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
negativeTop: { negativeTop: {
type: Number, type: Number,
default: 0 default: 0
}, },
// marginTop，在mode = top,left,right时生效，避免用户使用了自定义导航栏，组件把导航栏遮挡了 // marginTop，在mode = top,left,right时生效，避免用户使用了自定义导航栏，组件把导航栏遮挡了
marginTop: { marginTop: {
type: Number, type: Number,
default: 0 default: 0
}, },
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件 // 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
// 对v-model双向绑定多层调用造成报错不能修改props值的问题 // 对v-model双向绑定多层调用造成报错不能修改props值的问题
popup: { popup: {
type: Boolean, type: Boolean,
default: true default: true
}, },
}, },
computed: { computed: {
// 处理使用了自定义导航栏时被遮挡的问题 // 处理使用了自定义导航栏时被遮挡的问题
popupStyle() { popupStyle() {
let style = {} let style = {}
if ((this.mode === 'top' || this.mode === 'left' || this.mode === 'right') && this.marginTop) { if ((this.mode === 'top' || this.mode === 'left' || this.mode === 'right') && this.marginTop) {
style.marginTop = this.$tn.string.getLengthUnitValue(this.marginTop, 'px') style.marginTop = this.$tn.string.getLengthUnitValue(this.marginTop, 'px')
} }
return style return style
}, },
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom) // 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
contentStyle() { contentStyle() {
let style = {} let style = {}
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏 // 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
if (this.mode === 'left' || this.mode === 'right') { if (this.mode === 'left' || this.mode === 'right') {
style = { style = {
width: this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length), width: this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string
height: '100%', .getLengthUnitValue(this.length),
transform: `translate3D(${this.mode === 'left' ? '-100%' : '100%'}, 0px, 0px)` height: '100%',
} transform: `translate3D(${this.mode === 'left' ? '-100%' : '100%'}, 0px, 0px)`
} else if (this.mode === 'top' || this.mode === 'bottom') { }
style = { } else if (this.mode === 'top' || this.mode === 'bottom') {
width: '100%', style = {
height: this.height ? this.$tn.string.getLengthUnitValue(this.height) : this.$tn.string.getLengthUnitValue(this.length), width: '100%',
transform: `translate3D(0px, ${this.mode === 'top' ? '-100%': '100%'}, 0px)` height: this.height ? this.$tn.string.getLengthUnitValue(this.height) : this.$tn.string
} .getLengthUnitValue(this.length),
} transform: `translate3D(0px, ${this.mode === 'top' ? '-100%': '100%'}, 0px)`
style.zIndex = this.elZIndex }
// 如果设置了圆角的值，添加弹窗的圆角 }
if (this.borderRadius) { style.zIndex = this.elZIndex
switch(this.mode) { // 如果设置了圆角的值，添加弹窗的圆角
case 'left': if (this.borderRadius) {
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0` switch (this.mode) {
break case 'left':
case 'top': style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx` break
break case 'top':
case 'right': style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx` break
break case 'right':
case 'bottom': style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0` break
break case 'bottom':
} style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`
style.overflow = 'hidden' break
} }
style.overflow = 'hidden'
}
if (this.backgroundColorStyle && this.mode !== 'center') { if (this.backgroundColorStyle && this.mode !== 'center') {
style.backgroundColor = this.backgroundColorStyle style.backgroundColor = this.backgroundColorStyle
} }
return style return style
}, },
// 中部弹窗的样式 // 中部弹窗的样式
centerStyle() { centerStyle() {
let style = {} let style = {}
style.width = this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length) style.width = this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开 .getLengthUnitValue(this.length)
style.height = this.height ? this.$tn.string.getLengthUnitValue(this.height) : 'auto' // 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开
style.zIndex = this.elZIndex style.height = this.height ? this.$tn.string.getLengthUnitValue(this.height) : 'auto'
if (this.negativeTop) { style.zIndex = this.elZIndex
style.marginTop = `-${this.$tn.string.getLengthUnitValue(this.negativeTop)}` if (this.negativeTop) {
} style.marginTop = `-${this.$tn.string.getLengthUnitValue(this.negativeTop)}`
if (this.borderRadius) { }
style.borderRadius = `${this.borderRadius}rpx` if (this.borderRadius) {
style.overflow='hidden' style.borderRadius = `${this.borderRadius}rpx`
} style.overflow = 'hidden'
if (this.backgroundColorStyle) { }
style.backgroundColor = this.backgroundColorStyle if (this.backgroundColorStyle) {
} style.backgroundColor = this.backgroundColorStyle
return style }
}, return style
// 关闭按钮样式 },
closeBtnStyle() { // 关闭按钮样式
let style = {} closeBtnStyle() {
if (this.closeIconColor) { let style = {}
style.color = this.closeIconColor if (this.closeIconColor) {
} style.color = this.closeIconColor
if (this.closeIconSize) { }
style.fontSize = this.closeIconSize + 'rpx' if (this.closeIconSize) {
} style.fontSize = this.closeIconSize + 'rpx'
}
return style return style
}, },
elZIndex() { elZIndex() {
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
} }
}, },
data() { data() {
return { return {
timer: null, timer: null,
visibleSync: false, visibleSync: false,
showPopup: false, showPopup: false,
closeFromInner: false closeFromInner: false
} }
}, },
watch: { watch: {
value(val) { value(val) {
if (val) { if (val) {
// console.log(this.visibleSync); // console.log(this.visibleSync);
if (this.visibleSync) { if (this.visibleSync) {
this.visibleSync = false this.visibleSync = false
return return
} }
this.open() this.open()
} else if (!this.closeFromInner) { } else if (!this.closeFromInner) {
this.close() this.close()
} }
this.closeFromInner = false this.closeFromInner = false
} }
}, },
mounted() { mounted() {
// 组件渲染完成时，检查value是否为true，如果是，弹出popup // 组件渲染完成时，检查value是否为true，如果是，弹出popup
this.value && this.open() this.value && this.open()
}, },
methods: { methods: {
// 点击遮罩 // 点击遮罩
maskClick() { maskClick() {
if (!this.maskCloseable) return if (!this.maskCloseable) return
this.close() this.close()
}, },
open() { open() {
this.change('visibleSync', 'showPopup', true) this.change('visibleSync', 'showPopup', true)
}, },
// 关闭弹框 // 关闭弹框
close() { close() {
// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close // 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
// 造成@close事件触发两次 // 造成@close事件触发两次
this.closeFromInner = true this.closeFromInner = true
this.change('showPopup', 'visibleSync', false) this.change('showPopup', 'visibleSync', false)
}, },
// 中部弹出时，需要.tn-drawer-content将内容居中，此元素会铺满屏幕，点击需要关闭弹窗 // 中部弹出时，需要.tn-drawer-content将内容居中，此元素会铺满屏幕，点击需要关闭弹窗
// 让其只在mode=center时起作用 // 让其只在mode=center时起作用
modeCenterClose() { modeCenterClose() {
if (this.mode != 'center' || !this.maskCloseable) return if (this.mode != 'center' || !this.maskCloseable) return
this.close() this.close()
}, },
// 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件 // 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用 // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
change(param1, param2, status) { change(param1, param2, status) {
// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件 // 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
if (this.popup === true) { if (this.popup === true) {
this.$emit('input', status) this.$emit('input', status)
} }
this[param1] = status this[param1] = status
if (status) { if (status) {
// #ifdef H5 || MP // #ifdef H5 || MP
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this[param2] = status this[param2] = status
this.$emit(status ? 'open' : 'close') this.$emit(status ? 'open' : 'close')
clearTimeout(this.timer) clearTimeout(this.timer)
}, 10) }, 10)
// #endif // #endif
// #ifndef H5 || MP // #ifndef H5 || MP
this.$nextTick(() => { this.$nextTick(() => {
this[param2] = status this[param2] = status
this.$emit(status ? 'open' : 'close') this.$emit(status ? 'open' : 'close')
}) })
// #endif // #endif
} else { } else {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this[param2] = status this[param2] = status
this.$emit(status ? 'open' : 'close') this.$emit(status ? 'open' : 'close')
clearTimeout(this.timer) clearTimeout(this.timer)
}, 250) }, 250)
} }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tn-popup {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 29091 !important;
.tn-popup { &__content {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: fixed; position: absolute;
top: 0; transition: all 0.25s linear;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 29091 !important;
&__content { &--visible {
/* #ifndef APP-NVUE */ transform: translate3D(0px, 0px, 0px) !important;
display: block;
/* #endif */
position: absolute;
transition: all 0.25s linear;
&--visible { &.tn-popup--center {
transform: translate3D(0px, 0px, 0px) !important; transform: scale(1);
&.tn-popup--center { opacity: 1;
transform: scale(1); }
opacity: 1; }
}
}
&__center_box { &__center_box {
min-width: 100rpx; min-width: 100rpx;
min-height: 100rpx; min-height: 100rpx;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: relative; position: relative;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
&__scroll-view { &__scroll-view {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&__center--animation-zoom { &__center--animation-zoom {
transform: scale(1.15); transform: scale(1.15);
} }
} }
&__scroll_view { &__scroll_view {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&--left { &--left {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
&--right { &--right {
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
&--top { &--top {
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
background-color: #FFFFFF; }
}
&--bottom { &--bottom {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
&--center { &--center {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
bottom: 0; bottom: 0;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
opacity: 0; opacity: 0;
} }
&__close { &__close {
position: absolute; position: absolute;
&--top-left { &--top-left {
top: 30rpx; top: 30rpx;
left: 30rpx; left: 30rpx;
} }
&--top-right { &--top-right {
top: 30rpx; top: 30rpx;
right: 30rpx; right: 30rpx;
} }
&--bottom-left { &--bottom-left {
bottom: 30rpx; bottom: 30rpx;
left: 30rpx; left: 30rpx;
} }
&--bottom-right { &--bottom-right {
bottom: 30rpx; bottom: 30rpx;
right: 30rpx; right: 30rpx;
} }
} }
&__mask { &__mask {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
border: 0; border: 0;
background-color: $tn-mask-bg-color; background-color: $tn-mask-bg-color;
transition: 0.25s linear; transition: 0.25s linear;
transition-property: opacity; transition-property: opacity;
opacity: 0; opacity: 0;
&--show { &--show {
opacity: 1; opacity: 1;
} }
} }
} }
</style> </style>