CommunityApp/pages/community/community.vue

<template>
	<view class="container">
		<view class="tabs">
			<u-subsection height="90" active-color="#2f7ff5"  :list="subsectionList" :animation="false" :current="subsectionCurrent" @change="subsectionChange"></u-subsection>
			<view class="" style="height: 20rpx;"></view>
		</view>
		<view style="height: 100%;">
			<swiper style="height: 100%;" :current="subsectionCurrent"  @change="swiperChange"
				@animationfinish="animationfinish">
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;">
						<view class="bg-white " >
							<view style="margin: 0 0rpx 40rpx;">
								<image style="width: 100%;" mode="widthFix" src="http://139.9.103.171:8888/group1/M00/00/01/iwlnq1-_4mqAf_t4AAKPnq9axkQ981.png" ></image>
							</view>
							<view class="bg-white padding-top-20" style="position: relative;top:-20rpx;">
								<view class="text-bold text-lg margin-left-30 margin-bottom-sm">
									<text class="cuIcon-titles text-blue margin-right-10 "></text>
									<text>通用服务</text>
								</view>
								<view class="cu-list grid col-4 no-border " style="border-radius: 50rpx;">
									<view class="cu-item" @click="goDetail(item)" v-for="(item,index) in commonList" :key="index">
										<view class="grid-icon ">
											<image  :src="item.icon" mode="widthFix"/>
										</view>
										<view class="cu-tag bg-orange badge" v-if="item.badge>0">{{item.badge}}</view>
										<text class="text-sm ">{{item.title}}</text>
									</view>
								</view>
							</view>
							
							<view class="text-bold text-lg margin-left-30 margin-bottom-sm ">
								<text class="cuIcon-titles text-blue margin-right-10 "></text>
								<text>手机服务</text>
							</view>
							<view class="cu-list grid col-4 no-border " style="border-radius: 50rpx;">
								<view class="cu-item" @click="goDetail(item)" v-for="(item,index) in mobileList" :key="index">
									<view class="grid-icon ">
										<image  :src="item.icon" mode="widthFix"/>
									</view>
									<view class="cu-tag bg-orange badge" v-if="item.badge>0">{{item.badge}}</view>
									<text class="text-sm ">{{item.title}}</text>
								</view>
							</view>
						</view>
						<view class="bg-white padding-top-20" style="position: relative;top:-10rpx;">
							<view class="text-bold text-lg margin-left-30 margin-bottom-sm">
								<text class="cuIcon-titles text-blue margin-right-10 "></text>
								<text>宽带服务</text>
							</view>
							<view class="cu-list grid col-4 no-border " style="border-radius: 50rpx;">
								<view class="cu-item" @click="goDetail(item)" v-for="(item,index) in broadbandList" :key="index">
									<view class="grid-icon ">
										<image   :src="item.icon" mode="widthFix"/>
									</view>
									<view class="cu-tag bg-orange badge" v-if="item.badge>0">{{item.badge}}</view>
									<text class="text-sm ">{{item.title}}</text>
								</view>
							</view>
						</view>
						<view style="height: 80rpx;">
							<u-divider bgColor="#f1f1f1;"  height="80">到底了</u-divider>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;background-color: #F1F1F1;">
						<view style="height: 20rpx;"></view>
						<view style="margin: 0 20rpx;">
							<u-waterfall v-model="oldManList" ref="uWaterfall">
								<template v-slot:left="{leftList}">
									<view class="demo-warter"  v-for="(item, index) in leftList" :key="index">
										<image :src="item.image"  class="demo-image" ></image>
										<view class="time">
											<text class="padding-bottom-10">抓拍时间：</text>
											<text>{{item.time}}</text>
										</view>
										<view class="flex justify-center margin-bottom-50">
											<view class="cu-btn line-blue round df" style="width: 70%;">
												查看详情
											</view>
										</view>
									</view>
								</template>
								<template v-slot:right="{rightList}">
									<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
										<image :src="item.image"  class="demo-image" ></image>
										<view class="time">
											<text class="padding-bottom-10">抓拍时间：</text>
											<text>{{item.time}}</text>
										</view>
										<view class="flex justify-center margin-bottom-50">
											<view class="cu-btn line-blue round df" style="width: 70%;">
												查看详情
											</view>
										</view>
									</view>
									
								</template>
							</u-waterfall>
						</view>
						<!-- <oldMan></oldMan> -->
					</scroll-view>
				</swiper-item>
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;background-color: #F1F1F1;">
						<view style="height: 20rpx;"></view>
						<view style="margin: 0 20rpx;">
							<u-waterfall v-model="carList" ref="uWaterfall">
								<template v-slot:left="{leftList}">
									<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
										<image :src="item.image"  class="demo-image" ></image>
										<view class="time">
											<text class="padding-bottom-10">抓拍时间：</text>
											<text>{{item.time}}</text>
										</view>
										<view class="flex justify-center margin-bottom-50">
											<view class="cu-btn line-blue round df" style="width: 70%;">
												查看详情
											</view>
										</view>
									</view>
								</template>
								<template v-slot:right="{rightList}">
									<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
										<image :src="item.image"  class="demo-image" ></image>
										<view class="time">
											<text class="padding-bottom-10">抓拍时间：</text>
											<text>{{item.time}}</text>
										</view>
										<view class="flex justify-center margin-bottom-50">
											<view class="cu-btn line-blue round df" style="width: 70%;">
												查看详情
											</view>
										</view>
									</view>
									
								</template>
							</u-waterfall>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>

</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				oldManList:[
					{
						image:'http://139.9.103.171:1888/miniofile/app/old1.jpg',
						time:'2020-11-02 15:31:22'
					},
					{
						image:'http://139.9.103.171:1888/miniofile/app/c3a3a7d714e74b749a88ecefabfd86d.jpg',
						time:'2020-11-22 09:51:56'
					}
				],
				carList:[
					{
						image:'http://139.9.103.171:1888/miniofile/app/1606682778(1).jpg',
						time:'2020-11-04 12:38:26'
					},
					{
						image:'http://139.9.103.171:1888/miniofile/app/1606682866(1).jpg',
						time:'2020-11-13 19:42:52'
					}
				],
				
				tanList: [ {
					name: '老人关爱'
				}, {
					name: '车辆关爱'
				}],
				tabCurrent:0,
				subsectionCurrent: 0,
				subsectionList: [
					{
						name: '通讯服务'
					}, 
					{
						name: '老人关爱'
					},
					{
						name: '车辆关爱'
					},
				],
				// 卡片列表
				cardList:[
					{
						title:'热门活动',
						subTiltle:'优惠多多',
						type:'url',
						target:'https://yx.nx.189.cn/u/public/index.php/index/index/rmhd.html'
					},
					{
						title:'充值交费',
						subTiltle:'用于充值交费',
						type:'url',
						target:'https://mp.weixin.qq.com/s/oGB5l9lZCQHHJJuXT0umRw'
					},
					{
						title:'宽带预约',
						subTiltle:'用于宽带预约',
						type:'url',
						target:'https://wap.nx.189.cn/pages/market/html/market.html'
					},
					{
						title:'充30减2',
						subTiltle:'手机充值满减活动',
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/dyq/index'
					},
					{
						title:'抽话费',
						subTiltle:'用于抽话费',
						type:'url',
						target:'https://pms.189.cn/cljy-web/static/chfchf/chfchf_zc_index.html?shopid=2000118600000002&cmpid=dp-002&number=undefined'
					},
					{
						title:'流量超市',
						subTiltle:'用于充值流量',
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/flowcs/index'
					},
					
					
					
				],
				commonList:[
					// {
					// 	icon:'../../static/test/icon3.png',
					// 	title:"话费账单",
					// 	badge:0,
					// 	type:'url',
					// 	target:'https://yx.nx.189.cn/u/public/index.php/index/index/historyold'
					// },
					{
						icon:'../../static/test/paihao.png',
						title:"营业厅排号",
						badge:0,
						type:'url',
						target:'https://pdweb.360sides.com/?qudao=ningxia'
					},
					{
						icon:'../../static/test/xiaohu.png',
						title:"销户服务",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/kuandai'
					},
					{
						icon:'../../static/test/tuiding-zengzhi.png',
						title:"增值服务退订",
						badge:0,
						type:'url',
						target:'http://im.189.cn/cw/index.html?cf=1&cid=6400'
					},
					{
						icon:'../../static/test/tuiding1.png',
						title:"应用功能退订",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/yy'
					}
				],
				mobileList:[
					{
						icon:'../../static/test/chongzhi.png',
						title:"话费充值",
						badge:0,
						type:'applet',
						target:'wxd4daf5a66b681275'
					},
					{
						icon:'../../static/test/liuliang.png',
						title:"流量充值",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/flowcs/index'
					},
					{
						icon:'../../static/test/icon21.png',
						title:"号卡精选",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hkcs/index'
					},
					{
						icon:'../../static/test/xiehao.png',
						title:"携号转网",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/m_lx2020xhzw/login_xhzw.do'
					},
					{
						icon:'../../static/test/icon25.png',
						title:"手机挂失",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/guashi.html'
					},
					{
						icon:'../../static/test/icon26.png',
						title:"手机补换卡",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/buhuanka'
					},
					{
						icon:'../../static/test/icon24.png',
						title:"彩铃功能",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/cailing'
					},
				],
				
				broadbandList:[
					{
						icon:'../../static/test/icon31.png',
						title:"宽带订单查询",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/x/kd_yj/order.php'
					},
					{
						icon:'../../static/test/icon32.png',
						title:"宽带自助排障",
						badge:0,
						type:'url',
						target:'https://x.189.cn/tykf-services/sso?channel=NX_WEIXIN_Soo&reqMode=5&reqParam=hK8dQ%2F1J63ieVlPpE55UzGkn6hYdnMN25CW93bWD%2FTnwiQ2lOVtZ3E3higHv+%2BXd4tUIpuOnSY%2BVYTLziitWtYd2sArB68J422bltp46KFKLbr%2Fpx6l2JOKRI+a6OaIxCk'
					},
					{
						icon:'../../static/test/icon33.png',
						title:"宽带升级",
						badge:0,
						type:'url',
						target:'http://hd.nxeb.cc/pages/market/html/modify.html?client=0'
					},
					{
						icon:'../../static/test/icon34.png',
						title:"宽带移机",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/x/kd_yj/'
					},
					{
						icon:'../../static/test/icon35.png',
						title:"宽带超市",
						badge:0,
						type:'url',
						target:'http://hd.nxeb.cc/pages/market/html/market.html?rand=1535419737668&client=0'
					}
				]
			}
		},
		methods: {
			subsectionChange(index) {
				this.subsectionCurrent = index
			},
			tabChange(index){
				this.tabCurrent=index
			},
			swiperChange(e) {
			  this.subsectionCurrent = e.detail.current
			},
			animationfinish({detail: { current }}) {
				this.swiperCurrent = current;
				this.subsectionCurrent = current;
			},
			goDetail(item){
				if (this.$isEmpty(item.type)) {
					uni.showToast({
						title:"即将推出",
						icon:"none"
					})
					return
				}
				if (item.type=='applet') {
					//小程序跳转
					uni.navigateToMiniProgram({
					  appId: item.target,
					  path: 'pages/index/index'
					})
				}else{
					//h5跳转
					uni.navigateTo({
						url:"../webview/webview?url="+item.target
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		width: 100%;
	}
	.container {
		  height: calc(100vh);
		  background-color: #F6F6F6;
		  padding: 90rpx 0rpx 0rpx;
		 .tabs {
			 height: 90rpx;
		    position: fixed;
		    top: 0rpx;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 3;
		  }
	}
	view{
		box-sizing: border-box;
	}
	
	.top1{
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		top: -30rpx;
		.card{
			border-radius: 20rpx;
		}
	}
	
	.grid-icon{
		image{
			width: 56rpx;height: 56rpx;
		}
	}
	
	.scroll-view {
		height: 150rpx;
		white-space: nowrap;
		width: 100%;
		position: relative;
		top: -30rpx;
	}
	.scroll-view-item {
		color: #FFFFFF;
		background-image: linear-gradient(to right, #2f7ff5, #2f7ff5);
		display: inline-block;
		text-align: left;
		padding: 20rpx 40rpx;
		margin:0 8rpx;
		width:24%;
		border-radius: 12rpx;
	}
	.scroll-view-item:first-child{
		margin-left: 30rpx;
	}
	.scroll-view-item:last-child{
		margin-right: 30rpx;
	}
	
		.demo-warter {
			height: 580rpx;
			margin: 20rpx 8rpx;
			background-color: #ffffff;
			position: relative;
			border-top-right-radius: 12rpx;
			border-top-left-radius: 12rpx;
			.time{
				display: flex;flex-direction: column;
				padding-left: 20rpx;
				padding-bottom: 40rpx;
			}
		}
		
		.demo-image {
			border-top-right-radius: 12rpx;
			border-top-left-radius: 12rpx;
			height: 360rpx;
			padding-bottom: 10rpx;
			width: 100%;
		}
</style>