From 1ea2b60e04ae4e0ec5fc3c014715bca8f2760bea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=86=E9=92=B1=E8=90=BD=E5=B0=BD=E6=A7=BF=E8=8A=B1?=
 =?UTF-8?q?=E7=A8=80?= <2675540038@qq.com>
Date: Wed, 10 Jul 2024 18:13:57 +0800
Subject: [PATCH] 123

---
 App.vue                                    |   4 +-
 pages.json                                 |   5 +
 pages/index/directory.vue                  | 272 +++---
 pages/index/home.vue                       |  16 +-
 pages/index/index.vue                      |  12 +-
 pages/index/pizz.vue                       | 115 +--
 pages/index/pizz_info.vue                  |   4 +-
 pages/index/service.vue                    |   5 +-
 pages/packageA/user/my_invoice.vue         | 183 ++--
 pages/packageB/event/event_info.vue        | 133 ++-
 pages/packageB/news/new_list.vue           | 166 ++++
 tuniao-ui/components/tn-popup/tn-popup.vue | 931 ++++++++++-----------
 12 files changed, 1009 insertions(+), 837 deletions(-)
 create mode 100644 pages/packageB/news/new_list.vue

diff --git a/App.vue b/App.vue
index ce76edb..1ec3616 100644
--- a/App.vue
+++ b/App.vue
@@ -144,13 +144,13 @@
 				// 匹配并更新已有 style 属性的 img 标签
 				html = html.replace(/(<img\b[^>]*\bstyle\s*=\s*['"])([^'"]*)(['"][^>]*>)/g,
 					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 标签
 				html = html.replace(/(<img\b(?![^>]*\bstyle\s*=)[^>]*>)/g,
 					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;
diff --git a/pages.json b/pages.json
index 1daf720..385609c 100644
--- a/pages.json
+++ b/pages.json
@@ -216,6 +216,11 @@
 			"style": {
 				"navigationBarTitleText": "河南省青年企业家协会"
 			}
+		}, {
+			"path": "news/new_list",
+			"style": {
+				"navigationBarTitleText": "河南省青年企业家协会"
+			}
 		}]
 	}],
 	"globalStyle": {
diff --git a/pages/index/directory.vue b/pages/index/directory.vue
index b05fd15..6aa62a4 100644
--- a/pages/index/directory.vue
+++ b/pages/index/directory.vue
@@ -1,109 +1,114 @@
 <template>
-	<view style="background-color: #EBF4F7;letter-spacing: 1rpx;" @touchmove="preventTouchMove">
-		<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
+	<view style="background: #F1F2F8;">
+		<tn-nav-bar :isBack="false" :bottomShadow="false" 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 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:'通讯录'}]" :current="topCurrent" activeColor="#000" :bold="false"
-						:fontSize="36"></tn-tabs>
+				<view style="width: 100%;">
+					<view
+						style="text-align: center;font-size: 34rpx;color: #000000;letter-spacing: 1px;font-weight: bold;">
+						<text>通讯录</text>
+					</view>
 				</view>
 			</view>
 		</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 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 class="tn-classify__container">
-			<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around my-page"
-				style="background-color: #EBF4F7;">
-				<!-- 左边容器 -->
-				<view class="tn-classify__left-box left-width">
-					<view v-for="(item, index) in industry_list" :key="index" :id="`tabbar_item_${index}`"
-						style="padding-left: 20rpx;" class="tn-classify__tabbar__item tn-flex tn-flex-col-center"
-						:class="[tabbarItemClass(index)]" @tap.stop="clickClassifyNav(index)">
-						<view class="tn-classify__tabbar__item__title">{{ item.industry_name }}</view>
-					</view>
+		<view :class="isFixed?'fixed':'abc'" style="width: 100%;z-index: 200;"
+			:style="{top:isFixed?vuex_custom_bar_height+'px':'auto'}">
+			<view class="tn-flex tn-flex-col-center" style="padding: 30rpx;background-color: #ffffff;">
+				<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
+					<text :class="openDqShow?'textThis':'textNo'">地区</text>
+					<text style="color: #BABDC7;"
+						:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
 				</view>
-
-				<!-- 右边容器 -->
-				<scroll-view class="tn-classify__right-box" @scroll="getScroll" :scroll-top="top" scroll-y
-					style="width: 72%">
-					<block>
-						<view class="tn-classify__content">
-							<!-- 分类内容子栏目 -->
-							<view class="tn-classify__content__sub-classify__content " style="padding-bottom: 120rpx;">
-								<view v-for="(item,index) in list" :key="index">
-									<view v-if="item.neirong"
-										style="font-weight: 300;;background-color: #EBF4F7;color:#4AA2EF;width: 100%;height: 60rpx;line-height: 60rpx;text-align: center;">
-										{{item.position_name}}
-									</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-classify__content__sub-classify__content__item tn-flex tn-flex-center  tn-flex-col-center">
-										<!-- 标题，有需要可以显示出来 -->
-										<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 style="font-size: 28rpx;">
-												<text>{{v.nikename}}</text>
-												<text style="margin-left: 50rpx;">{{v.nation}}</text>
-											</view>
-											<view class="tn-text-ellipsis-2"
-												style="font-size: 24rpx;margin-top: 10rpx;">
-												<text>{{v.enterprise_name==null?'':v.enterprise_name}}</text>
-											</view>
-										</view>
-									</view>
+				<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
+					<view :class="openDqShow?'textThis tn-text-ellipsis':'textNo tn-text-ellipsis'"
+						style="max-width: 120rpx;display: inline-block;vertical-align: middle;">
+						{{hy_name=='全部'?'行业':hy_name}}
+					</view>
+					<text style="color: #BABDC7;vertical-align: middle;"
+						:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
+				</view>
+				<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
+					<text :class="openDqShow?'textThis':'textNo'">届数</text>
+					<text style="color: #BABDC7;"
+						:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
+				</view>
+				<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
+					<text :class="openDqShow?'textThis':'textNo'">组织架构</text>
+					<text style="color: #BABDC7;"
+						:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
+				</view>
+			</view>
+			<view v-if="openDqShow">
+				<view style="border-radius: 0 0 20rpx 20rpx;background-color: #ffffff;padding-bottom: 30rpx;">
+					<scroll-view scroll-y="" style="height: 500rpx;">
+						<view v-for="(item,index) in industry_list" @click="clickClassifyNav(index)"
+							style="padding: 20rpx 30rpx;font-size: 28rpx;">
+							<view :class="item.id==leftId?'textThis':'textNo'">{{item.industry_name}}</view>
+							<view v-if="index<industry_list.length-1"
+								style="width: 100%;height: 1px;background-color: #F1F2F8;margin-top: 30rpx;"></view>
+						</view>
+					</scroll-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 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>
-					</block>
-				</scroll-view>
+					</view>
+				</view>
+				<view v-if="showNo" style="margin-top: 30px;text-align: center">暂无数据</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"
 			@confirm="confirm"></tn-select>
 	</view>
@@ -119,20 +124,14 @@
 	export default {
 		data() {
 			return {
+				showNo: false,
+				isFixed: false,
 				serach_content: '',
 				list: [],
 				topCurrent: 0,
 				tabbarIndex: 0,
 				// 分类菜单item的信息
 				tabbarItemInfo: [],
-				// scrollView的top值
-				scrollViewBasicTop: 0,
-				// scrollView的高度
-				scrollViewHeight: 0,
-				// 左边scrollView的滚动高度
-				leftScrollViewTop: 0,
-				// 右边scrollView的滚动高度
-				rightScrollViewTop: 0,
 				// 当前选中的tabbar序号
 				currentTabbarIndex: 0,
 				apiImgUrl: this.$store.state.imgUrl,
@@ -143,25 +142,9 @@
 				selectList: [],
 				gid: store.state.Gid,
 				top: 0,
-			}
-		},
-		computed: {
-			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
-					}
-				}
+				openDqShow: false,
+				selectTopNumber: 220,
+				hy_name: '全部',
 			}
 		},
 		onLoad(d) {
@@ -173,9 +156,6 @@
 			this.getAssociationIndex();
 		},
 		methods: {
-			preventTouchMove() {
-
-			},
 			serach_do() {
 				this.list = [];
 				this.getAddressList();
@@ -232,7 +212,7 @@
 							});
 							this.industry_list.unshift({
 								id: 0,
-								industry_name: '组织架构'
+								industry_name: '全部'
 							});
 							this.leftId = res.data[0].id;
 							uni.showLoading({
@@ -260,6 +240,8 @@
 						console.log(res);
 						if (res.code == 1) {
 							this.list = res.data.ret;
+						} else {
+							this.showNo = true;
 						}
 						setTimeout(function() {
 							uni.hideLoading();
@@ -277,36 +259,23 @@
 				uni.showLoading({
 					title: '加载中...'
 				});
+				this.isFixed = false;
+				this.showNo = false;
+				this.openDqShow = false;
 				this.currentTabbarIndex = index;
 				this.leftId = this.industry_list[index].id;
+				this.hy_name = this.industry_list[index].industry_name;
 				this.list = [];
-				this.top = this.randomBetween();
 				this.getAddressList();
-				//this.handleLeftScrollView(index)
-				//this.switchClassifyContent();
 			},
-			randomBetween() {
-				let baseRandom = Math.random() * (0.99999 - 0.00001) + 0.00001;
-				return baseRandom.toFixed(5); //
-			},
-			// 点击分类后，处理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
+			ReachScroll(e) {
+				//当距离大于20的时候吸顶
+				if (e.detail.scrollTop > 100) {
+					this.isFixed = true;
 				} 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) {
 				uni.navigateTo({
 					url: url
@@ -439,4 +408,21 @@
 		height: calc(100vh - 286rpx);
 		padding-bottom: 100rpx;
 	}
-</style>
+
+	.textThis {
+		color: #3056D3;
+		font-weight: bold;
+	}
+
+	.textNo {
+		color: #000000;
+	}
+
+	.fixed {
+		position: fixed;
+	}
+
+	.abc {
+		position: absolute;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/index/home.vue b/pages/index/home.vue
index f9011fc..44e092a 100644
--- a/pages/index/home.vue
+++ b/pages/index/home.vue
@@ -43,9 +43,11 @@
 			<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" @click="openInfo" leftIconType="img"
-						mode="vertical" :rightIcon="false" backgroundColor="transparent" @clickRight="openRight"
-						@clickLeft="openRight"></tn-notice-bar>
+					<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">
@@ -82,7 +84,7 @@
 		</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='+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);">
 				<view style="font-size: 32rpx;font-weight: 600;;color: #181818;">协会简介</view>
 				<view
@@ -95,7 +97,7 @@
 				</image>
 			</view>
 			<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);">
 					<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>
@@ -220,7 +222,7 @@
 					activeColor="#3056D3" :current="current" name="name" @change="change" :fontSize="28"></tn-tabs>
 			</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 v-for="(item,index) in news_list" :class="{'rounded_corner': index === 0}">
 					<view class="tn-flex tn-flex-row-between" @click="openNewUrl(item)"
@@ -566,7 +568,7 @@
 				this.current = e;
 				var info = this.goryList[e];
 				this.gory_id = info.id;
-				this.type = e === 0 ? 1 : 0;
+				this.type = 0;
 				this.page = 1;
 				this.news_list = [];
 				this.getNewsList();
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 6694084..c01a43d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -11,11 +11,10 @@
 				<Service ref="service"></Service>
 			</scroll-view>
 		</view> -->
-		<view @touchmove="preventTouchMove" v-if=" tabberPageLoadFlag[1]"
-			:style="{display: currentIndex === 1 ? '' : 'none'}">
-			<view :class="tabShow?'custom-tabbar-page':''">
+		<view v-if=" tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
+			<scroll-view @scroll="directoryScroll" scroll-y enable-back-to-top :class="tabShow?'custom-tabbar-page':''">
 				<Directory ref="directory"></Directory>
-			</view>
+			</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">
@@ -81,7 +80,7 @@
 					// 	out: true
 					// },
 					{
-						title: '发现',
+						title: '青企圈',
 						activeIcon: '/static/03_3.png',
 						inactiveIcon: '/static/03.png',
 						id: 2,
@@ -196,6 +195,9 @@
 			homeScroll(d) {
 				this.$refs.home.ReachScroll(d);
 			},
+			directoryScroll(d) {
+				this.$refs.directory.ReachScroll(d);
+			},
 
 			// 切换导航页面
 			_switchTabbarPage(index) {
diff --git a/pages/index/pizz.vue b/pages/index/pizz.vue
index 59d3fa8..fb4f6e0 100644
--- a/pages/index/pizz.vue
+++ b/pages/index/pizz.vue
@@ -1,118 +1,19 @@
 <template>
-	<view style="background-color: #EBF4F7;letter-spacing: 1rpx;min-height: 100vh;">
-		<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="tn-margin-top" style="text-align: center;">
-					<text>发现</text>
+	<view style="background-color: #F1F2F8;letter-spacing: 1rpx;min-height: 100vh;">
+		<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#ffffff">
+			<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: #000000;letter-spacing: 1px;font-weight: bold;">
+						<text>青企圈</text>
+					</view>
 				</view>
 			</view>
 		</tn-nav-bar>
 		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"
 			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 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>
 </template>
 
diff --git a/pages/index/pizz_info.vue b/pages/index/pizz_info.vue
index 5b61d6b..19d5146 100644
--- a/pages/index/pizz_info.vue
+++ b/pages/index/pizz_info.vue
@@ -182,7 +182,7 @@
 						inactiveIcon: '/static/02.png'
 					},
 					{
-						title: '发现',
+						title: '青企圈',
 						activeIcon: '/static/03_3.png',
 						inactiveIcon: '/static/03.png'
 					},
@@ -374,4 +374,4 @@
 
 <style>
 
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/index/service.vue b/pages/index/service.vue
index 33b2980..a189a1d 100644
--- a/pages/index/service.vue
+++ b/pages/index/service.vue
@@ -38,8 +38,7 @@
 				<view v-for="(item,index) in actList">
 					<view @click="openUrl('/pages/packageB/event/event_info?id='+item.id)"
 						style="margin-bottom: 30rpx;background-color: #FFF;border-radius: 20rpx;">
-						<view class="tn-flex tn-flex-row-between" @click="openNewUrl(item)"
-							style="padding:20rpx 20rpx 10rpx 10rpx;">
+						<view class="tn-flex tn-flex-row-between" style="padding:20rpx 20rpx 10rpx 10rpx;">
 							<view style="margin-left: 10rpx;" v-if="item.activity_image">
 								<image :src="apiImgUrl+item.activity_image" mode="aspectFill"
 									style="width: 280rpx;height: 180rpx;border-radius: 20rpx;"></image>
@@ -94,7 +93,7 @@
 						inactiveIcon: '/static/02.png'
 					},
 					{
-						title: '发现',
+						title: '青企圈',
 						activeIcon: '/static/03_3.png',
 						inactiveIcon: '/static/03.png'
 					},
diff --git a/pages/packageA/user/my_invoice.vue b/pages/packageA/user/my_invoice.vue
index 1987ff9..fd19a8e 100644
--- a/pages/packageA/user/my_invoice.vue
+++ b/pages/packageA/user/my_invoice.vue
@@ -65,54 +65,30 @@
 			</tn-nav-bar>
 			<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
 				<view style="padding: 30rpx;">
-					<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
-						<view @click="tt_show_do">
-							<view>{{header_id_name}}</view>
+					<view @click="tt_show_do" class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
+						<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>
-							<tn-button @click="tt_add_show = true" backgroundColor="#3D7EFF" size="sm"
-								fontColor="#ffffff">添加开票信息</tn-button>
+							<!-- <tn-button @click="tt_add_show = true" backgroundColor="#3D7EFF" size="sm"
+								fontColor="#ffffff">添加开票信息</tn-button> -->
 							<text style="margin-left: 20rpx;" class="tn-icon-right"></text>
 						</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 v-if="tt_add_show" 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 class="text" style="padding:20rpx 40rpx;">
 					<view style="text-align: center;font-size: 32rpx;font-weight: 600;">申请发票</view>
 					<tn-form ref="form" :labelWidth="180">
 						<tn-form-item prop="name" label="发票类型">
@@ -211,6 +187,81 @@
 				</view>
 			</view>
 		</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>
 </template>
 
@@ -229,6 +280,7 @@
 				apiImgUrl: this.$store.state.imgUrl,
 				addMod: false,
 				infoMod: false,
+				tt_add_show_add: false,
 				addForm: {
 					name: '',
 					taxpayer_identification_number: '',
@@ -250,8 +302,8 @@
 						id: 2
 					}
 				],
-				header_id: 0,
-				header_id_name: '请选择开票信息',
+				header_id: -1,
+				header_id_name: '',
 				invoice_type_name: '普票',
 				invoice_type: 1,
 				tt_add_show: false,
@@ -276,6 +328,11 @@
 			this.getList();
 		},
 		methods: {
+			radioGroupChange(d) {
+				const item = this.tt_list.find(item => item.id == d);
+				console.log(item);
+				this.header_id_name = item;
+			},
 			openImg() {
 				uni.previewImage({
 					current: 0,
@@ -304,16 +361,17 @@
 				this.invoice_type = this.actionSheetList[index].id;
 			},
 			tt_show_do() {
-				if (this.tt_list.length == 0) {
-					uni.showToast({
-						title: '请先添加开票信息',
-						icon: 'none',
-						duration: 2000
-					});
-					this.tt_add_show = true;
-				} else {
-					this.tt_show = true;
-				}
+				this.tt_add_show = true;
+				// if (this.tt_list.length == 0) {
+				// 	uni.showToast({
+				// 		title: '请先添加开票信息',
+				// 		icon: 'none',
+				// 		duration: 2000
+				// 	});
+				// 	this.tt_add_show = true;
+				// } else {
+				// 	this.tt_show = true;
+				// }
 
 			},
 			kp_add_do() {
@@ -353,6 +411,9 @@
 							this.invoice_type_name = '普票';
 							this.invoice_type = 1;
 							this.money = '';
+							this.allList = [];
+							this.page = 1;
+							this.getList();
 						} else {
 							uni.showModal({
 								title: '提示',
@@ -400,12 +461,12 @@
 						if (res.data == null) {
 							this.tt_list = [];
 						} else {
-							var key = res.data;
-							const transformedSelectList = key.map(item => ({
-								value: item.id,
-								label: item.unit
-							}));
-							this.tt_list = transformedSelectList;
+							// var key = res.data;
+							// const transformedSelectList = key.map(item => ({
+							// 	value: item.id,
+							// 	label: item.unit
+							// }));
+							this.tt_list = res.data;
 						}
 					})
 					.catch(error => {
@@ -424,7 +485,7 @@
 					.then(res => {
 						console.log(res);
 						this.allList.push(...res.data.data);
-						this.count = res.data.total;
+						this.count = res.data.count;
 					})
 					.catch(error => {
 						uni.showToast({
diff --git a/pages/packageB/event/event_info.vue b/pages/packageB/event/event_info.vue
index e83ac31..286db76 100644
--- a/pages/packageB/event/event_info.vue
+++ b/pages/packageB/event/event_info.vue
@@ -1,22 +1,75 @@
 <template>
-	<view style="letter-spacing: 1rpx;" v-cloak>
+	<view style="background: #F1F2F8;" v-cloak>
 		<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="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 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:'活动详情'}]" :current="topCurrent" activeColor="#000" :bold="false"
-							:fontSize="36"></tn-tabs>
-					</view>
+			<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'}">
-			<image :src="apiImgUrl+info.activity_image" style="width: 100%;" mode="widthFix"></image>
-			<view>
+			<view style="padding: 30rpx;">
+				<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="font-size: 34rpx;font-weight: 600;">{{ info.activity_name }}</view>
 					<view style="margin-top: 40rpx;">
@@ -148,18 +201,18 @@
 						</tn-form>
 					</view>
 				</view>
-			</view>
+			</view> -->
 		</view>
-		<view style="position: fixed;bottom: 30rpx; width: 100%;">
-			<!--			<view class="tn-flex tn-flex-center tn-flex-row-center tn-flex-col-center"-->
-			<!--				style="background-color: #FDF2EC;text-align: center;padding: 30rpx;">-->
-			<!--				<view style="font-weight: 600;">-->
-			<!--					<text style="margin-right: 10rpx;">距报名结束剩<text style="color: #F73909;">119</text>天</text>-->
-			<!--					<tn-count-down fontColor="#F73909" backgroundColor="#FDF2EC" :fontSize="30" :timestamp="86400"-->
-			<!--						:showDays="true" :showHours="true" :showSeconds="true" :showMinutes="true"></tn-count-down>-->
-			<!--				</view>-->
-			<!--			</view>-->
-			<view style="text-align: center;padding:0 30rpx;" v-if="info.activity_type==1">
+		<!-- <view style="position: fixed;bottom: 30rpx; width: 100%;"> -->
+		<!--			<view class="tn-flex tn-flex-center tn-flex-row-center tn-flex-col-center"-->
+		<!--				style="background-color: #FDF2EC;text-align: center;padding: 30rpx;">-->
+		<!--				<view style="font-weight: 600;">-->
+		<!--					<text style="margin-right: 10rpx;">距报名结束剩<text style="color: #F73909;">119</text>天</text>-->
+		<!--					<tn-count-down fontColor="#F73909" backgroundColor="#FDF2EC" :fontSize="30" :timestamp="86400"-->
+		<!--						:showDays="true" :showHours="true" :showSeconds="true" :showMinutes="true"></tn-count-down>-->
+		<!--				</view>-->
+		<!--			</view>-->
+		<!-- <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" :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" :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">
 			<view style="padding: 20rpx;text-align: center;font-size: 40rpx;">感谢您的捐助</view>
 			<tn-form :labelWidth="180">
@@ -592,6 +645,9 @@
 					url: url
 				})
 			},
+			formatTime(time) {
+				return time.split(" ")[0];
+			},
 			goBack() {
 				if (getCurrentPages().length > 1) {
 					uni.navigateBack()
@@ -616,4 +672,27 @@
 		line-height: 80rpx;
 		font-size: 28rpx;
 	}
-</style>
+
+	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>
\ No newline at end of file
diff --git a/pages/packageB/news/new_list.vue b/pages/packageB/news/new_list.vue
new file mode 100644
index 0000000..e149459
--- /dev/null
+++ b/pages/packageB/news/new_list.vue
@@ -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>
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-popup/tn-popup.vue b/tuniao-ui/components/tn-popup/tn-popup.vue
index ddbb83e..f8925fc 100644
--- a/tuniao-ui/components/tn-popup/tn-popup.vue
+++ b/tuniao-ui/components/tn-popup/tn-popup.vue
@@ -1,492 +1,463 @@
 <template>
-  <view
-    v-if="visibleSync"
-    class="tn-popup-class tn-popup"
-    :style="[customStyle, popupStyle, { zIndex: elZIndex - 1}]"
-    hover-stop-propagation
-  >
-    <!-- mask -->
-    <view
-      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="[
+	<view v-if="visibleSync" class="tn-popup-class tn-popup" :style="[customStyle, popupStyle, { zIndex: elZIndex - 1}]"
+		hover-stop-propagation>
+		<!-- mask -->
+		<view 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 : '',
         safeAreaInsetBottom ? 'tn-safe-area-inset-bottom' : '',
         'tn-popup--' + mode,
         showPopup ? 'tn-popup__content--visible' : '',
         zoom && mode === 'center' ? 'tn-popup__content__center--animation-zoom' : ''
-      ]"
-      :style="[contentStyle]"
-      @tap="modeCenterClose"
-      @touchmove.stop.prevent
-      @tap.stop.prevent
-    >
-      <!-- 居中时候的内容 -->
-      <view
-        v-if="mode === 'center'"
-        class="tn-popup__content__center_box"
-        :class="[backgroundColorClass]"
-        :style="[centerStyle]"
-        @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">
-        <slot></slot>
-      </scroll-view>
-      <!-- 关闭按钮 -->
-      <view
-        v-if="mode !== 'center' && closeBtn"
-        class="tn-popup__close"
-        :class="[`tn-popup__close--${closeBtnPosition}`]"
-        :style="{zIndex: elZIndex}"
-        @tap="close"
-      >
-        <view :class="[`tn-icon-${closeBtnIcon}`]" :style="[closeBtnStyle]"></view>
-      </view>
-    </view>
-  </view>
+      ]" :style="[contentStyle]" @tap="modeCenterClose" @touchmove.stop.prevent @tap.stop.prevent>
+			<!-- 居中时候的内容 -->
+			<view v-if="mode === 'center'" class="tn-popup__content__center_box" :class="[backgroundColorClass]"
+				:style="[centerStyle]" @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">
+				<slot></slot>
+			</scroll-view>
+			<!-- 关闭按钮 -->
+			<view v-if="mode !== 'center' && closeBtn" class="tn-popup__close"
+				:class="[`tn-popup__close--${closeBtnPosition}`]" :style="{zIndex: elZIndex}" @tap="close">
+				<view :class="[`tn-icon-${closeBtnIcon}`]" :style="[closeBtnStyle]"></view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-  import componentsColorMixin from '../../libs/mixin/components_color.js'
-  export default {
-    mixins: [componentsColorMixin],
-    name: 'tn-popup',
-    props: {
-      value: {
-      	type: Boolean,
-      	default: false
-      },
-      // 弹出方向
-      // left/right/top/bottom/center
-      mode: {
-        type: String,
-        default: 'left'
-      },
-      // 是否显示遮罩
-      mask: {
-        type: Boolean,
-        default: true
-      },
-      // 抽屉的宽度（mode=left/right）,高度（mode=top/bottom）
-      length: {
-        type: [Number, String],
-        default: 'auto'
-      },
-      // 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
-      // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
-      width: {
-      	type: String,
-      	default: ''
-      },
-      // 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
-      // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
-      height: {
-      	type: String,
-      	default: ''
-      },
-      // 是否开启动画，只在mode=center有效
-      zoom: {
-        type: Boolean,
-        default: true
-      },
-      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
-      safeAreaInsetBottom: {
-      	type: Boolean,
-      	default: false
-      },
-      // 是否可以通过点击遮罩进行关闭
-      maskCloseable: {
-      	type: Boolean,
-      	default: true
-      },
-      // 用户自定义样式
-      customStyle: {
-      	type: Object,
-      	default() {
-      		return {}
-      	}
-      },
-      // 显示圆角的大小
-      borderRadius: {
-        type: Number,
-        default: 0
-      },
-      // zIndex
-      zIndex: {
-        type: Number,
-        default: 0
-      },
-      // 是否显示关闭按钮
-      closeBtn: {
-        type: Boolean,
-        default: false
-      },
-      // 关闭按钮的图标
-      closeBtnIcon: {
-        type: String,
-        default: 'close'
-      },
-      // 关闭按钮显示的位置
-      // top-left/top-right/bottom-left/bottom-right
-      closeBtnPosition: {
-        type: String,
-        default: 'top-right'
-      },
-      // 关闭按钮图标颜色
-      closeIconColor: {
-        type: String,
-        default: '#AAAAAA'
-      },
-      // 关闭按钮图标的大小
-      closeIconSize: {
-        type: Number,
-        default: 30
-      },
-      // 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
-      negativeTop: {
-      	type: Number,
-      	default: 0
-      },
-      // marginTop，在mode = top,left,right时生效，避免用户使用了自定义导航栏，组件把导航栏遮挡了
-      marginTop: {
-        type: Number,
-        default: 0
-      },
-      // 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
-      // 对v-model双向绑定多层调用造成报错不能修改props值的问题
-      popup: {
-      	type: Boolean,
-      	default: true
-      },
-    },
-    computed: {
-      // 处理使用了自定义导航栏时被遮挡的问题
-      popupStyle() {
-        let style = {}
-        if ((this.mode === 'top' || this.mode === 'left' || this.mode === 'right') && this.marginTop) {
-          style.marginTop = this.$tn.string.getLengthUnitValue(this.marginTop, 'px')
-        }
-        
-        return style
-      },
-      // 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
-      contentStyle() {
-        let style = {}
-        // 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
-        if (this.mode === 'left' || this.mode === 'right') {
-          style = {
-            width: this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length),
-            height: '100%',
-            transform: `translate3D(${this.mode === 'left' ? '-100%' : '100%'}, 0px, 0px)`
-          }
-        } else if (this.mode === 'top' || this.mode === 'bottom') {
-          style = {
-            width: '100%',
-            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) {
-          switch(this.mode) {
-            case 'left':
-              style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`
-              break
-            case 'top':
-              style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`
-              break
-            case 'right':
-              style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`
-              break
-            case 'bottom':
-              style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`
-              break
-          }
-          style.overflow = 'hidden'
-        }
-        
-        if (this.backgroundColorStyle && this.mode !== 'center') {
-          style.backgroundColor = this.backgroundColorStyle
-        }
-        
-        return style
-      },
-      // 中部弹窗的样式
-      centerStyle() {
-        let style = {}
-        style.width = this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length)
-        // 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开
-        style.height = this.height ? this.$tn.string.getLengthUnitValue(this.height) : 'auto'
-        style.zIndex = this.elZIndex
-        if (this.negativeTop) {
-          style.marginTop = `-${this.$tn.string.getLengthUnitValue(this.negativeTop)}`
-        }
-        if (this.borderRadius) {
-          style.borderRadius = `${this.borderRadius}rpx`
-          style.overflow='hidden'
-        }
-        if (this.backgroundColorStyle) {
-          style.backgroundColor = this.backgroundColorStyle
-        }
-        return style
-      },
-      // 关闭按钮样式
-      closeBtnStyle() {
-        let style = {}
-        if (this.closeIconColor) {
-          style.color = this.closeIconColor
-        }
-        if (this.closeIconSize) {
-          style.fontSize = this.closeIconSize + 'rpx'
-        }
-        
-        return style
-      },
-      elZIndex() {
-        return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
-      }
-    },
-    data() {
-      return {
-        timer: null,
-        visibleSync: false,
-        showPopup: false,
-        closeFromInner: false
-      }
-    },
-    watch: {
-      value(val) {
-        if (val) {
-          // console.log(this.visibleSync);
-          if (this.visibleSync) {
-            this.visibleSync = false
-            return
-          }
-          this.open()
-        } else if (!this.closeFromInner) {
-          this.close()
-        }
-        this.closeFromInner = false
-      }
-    },
-    mounted() {
-      // 组件渲染完成时，检查value是否为true，如果是，弹出popup
-      this.value && this.open()
-    },
-    methods: {
-      // 点击遮罩
-      maskClick() {
-        if (!this.maskCloseable) return
-        this.close()
-      },
-      open() {
-        this.change('visibleSync', 'showPopup', true)
-      },
-      // 关闭弹框
-      close() {
-        // 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
-        // 造成@close事件触发两次
-        this.closeFromInner = true
-        this.change('showPopup', 'visibleSync', false)
-      },
-      // 中部弹出时，需要.tn-drawer-content将内容居中，此元素会铺满屏幕，点击需要关闭弹窗
-      // 让其只在mode=center时起作用 
-      modeCenterClose() {
-        if (this.mode != 'center' || !this.maskCloseable) return
-        this.close()
-      },
-      // 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
-      // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
-      change(param1, param2, status) {
-        // 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
-        if (this.popup === true) {
-          this.$emit('input', status)
-        }
-        this[param1] = status
-        if (status) {
-          // #ifdef H5 || MP
-          this.timer = setTimeout(() => {
-            this[param2] = status
-            this.$emit(status ? 'open' : 'close')
-            clearTimeout(this.timer)
-          }, 10)
-          // #endif
-          // #ifndef H5 || MP
-          this.$nextTick(() => {
-            this[param2] = status
-            this.$emit(status ? 'open' : 'close')
-          })
-          // #endif
-        } else {
-          this.timer = setTimeout(() => {
-            this[param2] = status
-            this.$emit(status ? 'open' : 'close')
-            clearTimeout(this.timer)
-          }, 250)
-        }
-      }
-    }
-  }
+	import componentsColorMixin from '../../libs/mixin/components_color.js'
+	export default {
+		mixins: [componentsColorMixin],
+		name: 'tn-popup',
+		props: {
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 弹出方向
+			// left/right/top/bottom/center
+			mode: {
+				type: String,
+				default: 'left'
+			},
+			// 是否显示遮罩
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			// 抽屉的宽度（mode=left/right）,高度（mode=top/bottom）
+			length: {
+				type: [Number, String],
+				default: 'auto'
+			},
+			// 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
+			// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+			width: {
+				type: String,
+				default: ''
+			},
+			// 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
+			// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+			height: {
+				type: String,
+				default: ''
+			},
+			// 是否开启动画，只在mode=center有效
+			zoom: {
+				type: Boolean,
+				default: true
+			},
+			// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+			safeAreaInsetBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 是否可以通过点击遮罩进行关闭
+			maskCloseable: {
+				type: Boolean,
+				default: true
+			},
+			// 用户自定义样式
+			customStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 显示圆角的大小
+			borderRadius: {
+				type: Number,
+				default: 0
+			},
+			// zIndex
+			zIndex: {
+				type: Number,
+				default: 0
+			},
+			// 是否显示关闭按钮
+			closeBtn: {
+				type: Boolean,
+				default: false
+			},
+			// 关闭按钮的图标
+			closeBtnIcon: {
+				type: String,
+				default: 'close'
+			},
+			// 关闭按钮显示的位置
+			// top-left/top-right/bottom-left/bottom-right
+			closeBtnPosition: {
+				type: String,
+				default: 'top-right'
+			},
+			// 关闭按钮图标颜色
+			closeIconColor: {
+				type: String,
+				default: '#AAAAAA'
+			},
+			// 关闭按钮图标的大小
+			closeIconSize: {
+				type: Number,
+				default: 30
+			},
+			// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
+			negativeTop: {
+				type: Number,
+				default: 0
+			},
+			// marginTop，在mode = top,left,right时生效，避免用户使用了自定义导航栏，组件把导航栏遮挡了
+			marginTop: {
+				type: Number,
+				default: 0
+			},
+			// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
+			// 对v-model双向绑定多层调用造成报错不能修改props值的问题
+			popup: {
+				type: Boolean,
+				default: true
+			},
+		},
+		computed: {
+			// 处理使用了自定义导航栏时被遮挡的问题
+			popupStyle() {
+				let style = {}
+				if ((this.mode === 'top' || this.mode === 'left' || this.mode === 'right') && this.marginTop) {
+					style.marginTop = this.$tn.string.getLengthUnitValue(this.marginTop, 'px')
+				}
+
+				return style
+			},
+			// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
+			contentStyle() {
+				let style = {}
+				// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
+				if (this.mode === 'left' || this.mode === 'right') {
+					style = {
+						width: this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string
+							.getLengthUnitValue(this.length),
+						height: '100%',
+						transform: `translate3D(${this.mode === 'left' ? '-100%' : '100%'}, 0px, 0px)`
+					}
+				} else if (this.mode === 'top' || this.mode === 'bottom') {
+					style = {
+						width: '100%',
+						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) {
+					switch (this.mode) {
+						case 'left':
+							style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`
+							break
+						case 'top':
+							style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`
+							break
+						case 'right':
+							style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`
+							break
+						case 'bottom':
+							style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`
+							break
+					}
+					style.overflow = 'hidden'
+				}
+
+				if (this.backgroundColorStyle && this.mode !== 'center') {
+					style.backgroundColor = this.backgroundColorStyle
+				}
+
+				return style
+			},
+			// 中部弹窗的样式
+			centerStyle() {
+				let style = {}
+				style.width = this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string
+					.getLengthUnitValue(this.length)
+				// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开
+				style.height = this.height ? this.$tn.string.getLengthUnitValue(this.height) : 'auto'
+				style.zIndex = this.elZIndex
+				if (this.negativeTop) {
+					style.marginTop = `-${this.$tn.string.getLengthUnitValue(this.negativeTop)}`
+				}
+				if (this.borderRadius) {
+					style.borderRadius = `${this.borderRadius}rpx`
+					style.overflow = 'hidden'
+				}
+				if (this.backgroundColorStyle) {
+					style.backgroundColor = this.backgroundColorStyle
+				}
+				return style
+			},
+			// 关闭按钮样式
+			closeBtnStyle() {
+				let style = {}
+				if (this.closeIconColor) {
+					style.color = this.closeIconColor
+				}
+				if (this.closeIconSize) {
+					style.fontSize = this.closeIconSize + 'rpx'
+				}
+
+				return style
+			},
+			elZIndex() {
+				return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
+			}
+		},
+		data() {
+			return {
+				timer: null,
+				visibleSync: false,
+				showPopup: false,
+				closeFromInner: false
+			}
+		},
+		watch: {
+			value(val) {
+				if (val) {
+					// console.log(this.visibleSync);
+					if (this.visibleSync) {
+						this.visibleSync = false
+						return
+					}
+					this.open()
+				} else if (!this.closeFromInner) {
+					this.close()
+				}
+				this.closeFromInner = false
+			}
+		},
+		mounted() {
+			// 组件渲染完成时，检查value是否为true，如果是，弹出popup
+			this.value && this.open()
+		},
+		methods: {
+			// 点击遮罩
+			maskClick() {
+				if (!this.maskCloseable) return
+				this.close()
+			},
+			open() {
+				this.change('visibleSync', 'showPopup', true)
+			},
+			// 关闭弹框
+			close() {
+				// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
+				// 造成@close事件触发两次
+				this.closeFromInner = true
+				this.change('showPopup', 'visibleSync', false)
+			},
+			// 中部弹出时，需要.tn-drawer-content将内容居中，此元素会铺满屏幕，点击需要关闭弹窗
+			// 让其只在mode=center时起作用 
+			modeCenterClose() {
+				if (this.mode != 'center' || !this.maskCloseable) return
+				this.close()
+			},
+			// 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
+			// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
+			change(param1, param2, status) {
+				// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
+				if (this.popup === true) {
+					this.$emit('input', status)
+				}
+				this[param1] = status
+				if (status) {
+					// #ifdef H5 || MP
+					this.timer = setTimeout(() => {
+						this[param2] = status
+						this.$emit(status ? 'open' : 'close')
+						clearTimeout(this.timer)
+					}, 10)
+					// #endif
+					// #ifndef H5 || MP
+					this.$nextTick(() => {
+						this[param2] = status
+						this.$emit(status ? 'open' : 'close')
+					})
+					// #endif
+				} else {
+					this.timer = setTimeout(() => {
+						this[param2] = status
+						this.$emit(status ? 'open' : 'close')
+						clearTimeout(this.timer)
+					}, 250)
+				}
+			}
+		}
+	}
 </script>
 
 <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;
-    
-    &__content {
-      /* #ifndef APP-NVUE */
-      display: block;
-      /* #endif */
-      position: absolute;
-      transition: all 0.25s linear;
-      
-      &--visible {
-        transform: translate3D(0px, 0px, 0px) !important;
-        &.tn-popup--center {
-          transform: scale(1);
-          opacity: 1;
-        }
-      }
-      
-      &__center_box {
-        min-width: 100rpx;
-        min-height: 100rpx;
-        /* #ifndef APP-NVUE */
-        display: block;
-        /* #endif */
-        position: relative;
-        background-color: #FFFFFF;
-      }
-      
-      &__scroll-view {
-        width: 100%;
-        height: 100%;
-      }
-      
-      &__center--animation-zoom {
-        transform: scale(1.15);
-      }
-    }
-    
-    &__scroll_view {
-      width: 100%;
-      height: 100%;
-    }
-    
-    &--left {
-      top: 0;
-      bottom: 0;
-      left: 0;
-      background-color: #FFFFFF;
-    }
-    
-    &--right {
-      top: 0;
-      bottom: 0;
-      right: 0;
-      background-color: #FFFFFF;
-    }
-    
-    &--top {
-      left: 0;
-      right: 0;
-      top: 0;
-      background-color: #FFFFFF;
-    }
-    
-    &--bottom {
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: #FFFFFF;
-    }
-    
-    &--center {
-      display: flex;
-      flex-direction: column;
-      bottom: 0;
-      top: 0;
-      left: 0;
-      right: 0;
-      justify-content: center;
-      align-items: center;
-      opacity: 0;
-    }
-    
-    &__close {
-      position: absolute;
-      
-      &--top-left {
-        top: 30rpx;
-        left: 30rpx;
-      }
-      
-      &--top-right {
-        top: 30rpx;
-        right: 30rpx;
-      }
-      
-      &--bottom-left {
-        bottom: 30rpx;
-        left: 30rpx;
-      }
-      
-      &--bottom-right {
-        bottom: 30rpx;
-        right: 30rpx;
-      }
-    }
-    
-    &__mask {
-      width: 100%;
-      height: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      border: 0;
-      background-color: $tn-mask-bg-color;
-      transition: 0.25s linear;
-      transition-property: opacity;
-      opacity: 0;
-      
-      &--show {
-        opacity: 1;
-      }
-    }
-  }
-</style>
+	.tn-popup {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: hidden;
+		z-index: 29091 !important;
+
+		&__content {
+			/* #ifndef APP-NVUE */
+			display: block;
+			/* #endif */
+			position: absolute;
+			transition: all 0.25s linear;
+
+			&--visible {
+				transform: translate3D(0px, 0px, 0px) !important;
+
+				&.tn-popup--center {
+					transform: scale(1);
+					opacity: 1;
+				}
+			}
+
+			&__center_box {
+				min-width: 100rpx;
+				min-height: 100rpx;
+				/* #ifndef APP-NVUE */
+				display: block;
+				/* #endif */
+				position: relative;
+				background-color: #FFFFFF;
+			}
+
+			&__scroll-view {
+				width: 100%;
+				height: 100%;
+			}
+
+			&__center--animation-zoom {
+				transform: scale(1.15);
+			}
+		}
+
+		&__scroll_view {
+			width: 100%;
+			height: 100%;
+		}
+
+		&--left {
+			top: 0;
+			bottom: 0;
+			left: 0;
+			background-color: #FFFFFF;
+		}
+
+		&--right {
+			top: 0;
+			bottom: 0;
+			right: 0;
+			background-color: #FFFFFF;
+		}
+
+		&--top {
+			left: 0;
+			right: 0;
+			top: 0;
+		}
+
+		&--bottom {
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background-color: #FFFFFF;
+		}
+
+		&--center {
+			display: flex;
+			flex-direction: column;
+			bottom: 0;
+			top: 0;
+			left: 0;
+			right: 0;
+			justify-content: center;
+			align-items: center;
+			opacity: 0;
+		}
+
+		&__close {
+			position: absolute;
+
+			&--top-left {
+				top: 30rpx;
+				left: 30rpx;
+			}
+
+			&--top-right {
+				top: 30rpx;
+				right: 30rpx;
+			}
+
+			&--bottom-left {
+				bottom: 30rpx;
+				left: 30rpx;
+			}
+
+			&--bottom-right {
+				bottom: 30rpx;
+				right: 30rpx;
+			}
+		}
+
+		&__mask {
+			width: 100%;
+			height: 100%;
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			border: 0;
+			background-color: $tn-mask-bg-color;
+			transition: 0.25s linear;
+			transition-property: opacity;
+			opacity: 0;
+
+			&--show {
+				opacity: 1;
+			}
+		}
+	}
+</style>
\ No newline at end of file