CommunityApp/pages/community/community.vue

<template>
	<view class="container">
		<view class="tabs">
			<scroll-view scroll-x class="nav" style="background-color: #efefef;color: #5b5b5b;">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==subsectionCurrent?'text-checked':''" v-for="(item,index) in subsectionList" :key="index" @tap="subsectionChange(index)" >
						{{item.name}}
					</view>
				</view>
			</scroll-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="margin: 0 20rpx;">
							<u-waterfall v-model="oldManList" ref="uWaterfall">
								<template v-slot:left="{leftList}">
									<view @click="goElderlyDetail(item)" class="demo-warter"  v-for="(item, index) in leftList" :key="index">
										<image :src="item.image" mode="scaleToFill"  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 @click="goElderlyDetail(item)" class="demo-warter" v-for="(item, index) in rightList" :key="index">
										<image :src="item.image" mode="scaleToFill"  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-item >
					<scroll-view scroll-y style="height: 100%;background-color: #F1F1F1;">
						<view style="margin: 0 20rpx;">
							<u-waterfall v-model="carList" ref="uWaterfall">
								<template v-slot:left="{leftList}">
									<view @click="goCarDetail(item)" class="demo-warter" v-for="(item, index) in leftList" :key="index">
										<image :src="item.image"  class="demo-image" mode="scaleToFill"></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 @click="goCarDetail(item)" class="demo-warter" v-for="(item, index) in rightList" :key="index">
										<image :src="item.image"  class="demo-image" mode="scaleToFill"></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>
	var app=getApp()
	export default {
		components:{
		},
		data() {
			return {
				oldManList:[],
				carList:[],
				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/telecom/paihao.png',
						title:"营业厅排号",
						badge:0,
						type:'url',
						target:'https://pdweb.360sides.com/?qudao=ningxia'
					},
					{
						icon:'../../static/telecom/xiaohu.png',
						title:"销户服务",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/kuandai'
					},
					{
						icon:'../../static/telecom/tuiding-zengzhi.png',
						title:"增值服务退订",
						badge:0,
						type:'url',
						target:'http://im.189.cn/cw/index.html?cf=1&cid=6400'
					},
					{
						icon:'../../static/telecom/tuiding1.png',
						title:"应用功能退订",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/yy'
					}
				],
				mobileList:[
					{
						icon:'../../static/telecom/chongzhi.png',
						title:"话费充值",
						badge:0,
						type:'applet',
						target:'wxd4daf5a66b681275'
					},
					{
						icon:'../../static/telecom/liuliang.png',
						title:"流量充值",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/flowcs/index'
					},
					{
						icon:'../../static/telecom/icon21.png',
						title:"号卡精选",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hkcs/index'
					},
					{
						icon:'../../static/telecom/xiehao.png',
						title:"携号转网",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/m_lx2020xhzw/login_xhzw.do'
					},
					{
						icon:'../../static/telecom/icon25.png',
						title:"手机挂失",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/guashi.html'
					},
					{
						icon:'../../static/telecom/icon26.png',
						title:"手机补换卡",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/buhuanka'
					},
					{
						icon:'../../static/telecom/icon24.png',
						title:"彩铃功能",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/cailing'
					},
				],
				
				broadbandList:[
					{
						icon:'../../static/telecom/icon31.png',
						title:"宽带订单查询",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/x/kd_yj/order.php'
					},
					{
						icon:'../../static/telecom/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/telecom/icon33.png',
						title:"宽带升级",
						badge:0,
						type:'url',
						target:'http://hd.nxeb.cc/pages/market/html/modify.html?client=0'
					},
					{
						icon:'../../static/telecom/icon34.png',
						title:"宽带移机",
						badge:0,
						type:'url',
						target:'https://yx.nx.189.cn/x/kd_yj/'
					},
					{
						icon:'../../static/telecom/icon35.png',
						title:"宽带超市",
						badge:0,
						type:'url',
						target:'http://hd.nxeb.cc/pages/market/html/market.html?rand=1535419737668&client=0'
					}
				]
			}
		},
		onLoad(options) {
			this.fetchStaticData()
		},
		onShow() {
			if (!this.$isEmpty(getApp().globalData.subsectionCurrent)) {
				this.subsectionCurrent=getApp().globalData.subsectionCurrent
			}
		},
		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
					})
				}
			},
			goElderlyDetail(item){
				app.globalData.elderlyDetail=item
				uni.navigateTo({
					url:"./detail/elderlyDetail",
				})
			},
			goCarDetail(item){
				app.globalData.carDetail=item
				uni.navigateTo({
					url:"./detail/carDetail",
				})
			},
			fetchStaticData(){
				this.oldManList=[
					{
						name:'李爱琴',
						sex:'女',
						age:'64',
						temperature:'36.4',
						idCard:'640302195608152578',
						device:'阅海万家D区西北门',
						plotName:'阅海万家D区',
						image:'http://139.9.103.171:1888/miniofile/app/del/1607607748(1).jpg',
						time:'2020-12-05 09:31:22'
					}
					,
					{
						name:'阮启方',
						sex:'男',
						age:'66',
						temperature:'36.3',
						idCard:'640302195804232481',
						device:'阅海万家D区西北门',
						plotName:'阅海万家D区',
						image:'http://139.9.103.171:1888/miniofile/app/del/1607608168(1).jpg',
						time:'2020-11-20 15:31:22'
					}
					,
					{
						name:'李爱琴',
						sex:'女',
						age:'64',
						temperature:'36.2',
						idCard:'640302195608152578',
						device:'阅海万家D区北门',
						plotName:'阅海万家D区',
						image:'http://139.9.103.171:1888/miniofile/app/del/1607607676(1).jpg',
						time:'2020-12-10 15:31:22'
					}
					,
					{
						name:'阮启方',
						sex:'男',
						age:'66',
						temperature:'36.6',
						idCard:'640302195804232481',
						device:'阅海万家D区西北门',
						plotName:'阅海万家D区',
						image:'http://139.9.103.171:1888/miniofile/app/del/1607608107.jpg',
						time:'2020-11-20 12:32:52'
					}
				]
				this.carList=[
					
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/del/1607602946(1).jpg',
						time:'2020-12-10 12:38:26'
					},
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/del/1607602903(1).jpg',
						time:'2020-12-10 19:42:52'
					},
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/del/1607602845(1).jpg',
						time:'2020-12-05 11:32:16'
					},
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/del/cb034601a1594a248da5bef3d29fcebd.jpeg',
						time:'2020-12-05 14:46:32'
					},
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/del/1607602745(1).jpg',
						time:'2020-12-04 12:38:26'
					},
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/del/31ff5310f499d55764b24bf6c7c8083e.jpeg',
						time:'2020-12-04 18:22:52'
					},
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/del/1566433075317.jpg',
						time:'2020-12-01 11:26:32'
					},
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/del/1566433083707.jpg',
						time:'2020-12-01 16:42:52'
					},
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/1606682778(1).jpg',
						time:'2020-11-24 09:38:26'
					},
					{
						number:'宁A096L0',
						device:'粤海玩家D区西门',
						parking:'阅海万家D区西门停车场',
						image:'http://139.9.103.171:1888/miniofile/app/1606682866(1).jpg',
						time:'2020-11-24 16:42:52'
					}
					
				]
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		width: 100%;
	}
	.text-checked{
		font-weight: 800;
		background-color: #FFFFFF;
		color: #2f7ff5;
		font-size: 800;
	}
	
	.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>