pages/sub_tabbar/index.vue

<template>
	<view class="wrap">
		<!-- 头部导航 -->
		<u-sticky h5-nav-height="0">
			<!-- #ifndef MP-WEIXIN -->
			<view class="status_bar"></view>
			<!-- #endif -->
			<view class="wrap-header">
				<view class="img-box" @click="scan">
					<u-image src="/static/images/index/scan.png" width="40rpx" height="40rpx" mode="aspectFit"></u-image>
				</view>
				<u-search placeholder="暂无服务可查询" v-model="searchVal" :show-action="false" bg-color="#F7F7F7" margin="0 15rpx"
				 @search="search"></u-search>
				<view class="img-box" @click="toPath('/pages/sub_index/qrcode/index')">
					<u-image src="/static/images/index/money.png" width="40rpx" height="40rpx" mode="aspectFit"></u-image>
				</view>
				<view class="img-box" @click="toPath('')">
					<u-image src="/static/images/index/square.png" width="40rpx" height="40rpx" mode="aspectFit"></u-image>
				</view>
			</view>
		</u-sticky>
		<!-- bannar内容 -->
		<view class="wrap-bannar">
			<view class="wrap-bannar-title">
				<text>城市服务</text>
				<text>一键速享</text>
			</view>
			<view class="wrap-bannar-box">
				<image src="/static/images/index/bannar.png" mode="widthFix"></image>
				<view class="wrap-bannar-box-overtitle">
					<text>出行缴费</text>
					<text>自在随心</text>
				</view>
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="wrap-func">
			<u-image src="/static/images/index/bannar1.png" width="100%" mode="widthFix" border-radius="10"></u-image>
			<!-- <view class="wrap-func-item" v-for="(v,i) in funcList" :key="i" @click="toPath()">
				<u-image :src="v.src" width="70rpx" height="70rpx" mode="aspectFit"></u-image>
				<text>{{v.title}}</text>
			</view> -->
		</view>
		<!--热门活动 -->
		<view class="wrap-active">
			<text class="wrap-active-title">热门活动</text>
			<view class="wrap-active-bannar">
				<!-- <u-image src="/static/images/index/bannar01.png" width="100%" mode="widthFix"></u-image> -->
				<u-swiper :list="activeImgList" name="picid" img-mode="scaleToFill" height="170" interval="5000" duration="1500"
				 @click="activeImg"></u-swiper>
			</view>
			<view class="wrap-active-con">
				<view class="wrap-active-con-item" @click="signin">
					<u-image src="/static/images/index/mrqd.png" width="70rpx" height="70rpx"></u-image>
					<view class="wrap-active-con-item-desc">
						<text class="wrap-active-con-item-desc-title">每日签到</text>
						<text class="wrap-active-con-item-desc-desc">签到即可领积分</text>
					</view>
				</view>
				<view class="wrap-active-con-item" @click="toUrl('/pages/sub_index/activeDetails/index?id='+ activity.articleno + '&type=' + activity.code)">
					<u-image src="/static/images/index/smkhd.png" width="70rpx" height="70rpx"></u-image>
					<view class="wrap-active-con-item-desc">
						<text class="wrap-active-con-item-desc-title">{{activity.title?activity.title:''}}</text>
						<text class="wrap-active-con-item-desc-desc">{{activity.subtitle?activity.subtitle:'暂无'}}</text>
					</view>
				</view>
				<view class="wrap-active-con-item" @click="toPath('/pages/sub_tabbar/active')">
					<u-image src="/static/images/index/more.png" width="70rpx" height="70rpx"></u-image>
					<view class="wrap-active-con-item-desc">
						<text class="wrap-active-con-item-desc-title">更多活动</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 市民卡业务 -->
		<view class="wrap-service">
			<text class="wrap-service-title">市民卡业务</text>
			<view class="wrap-service-con">
				<view class="wrap-service-con-exp" @click="toUrl('/pages/sub_index/introduce/index')">
					<u-image src="/static/images/index/smkjj.png" width="100%" mode="widthFix"></u-image>
					<text class="wrap-service-con-exp-desc">市民卡简介</text>
				</view>
				<view class="wrap-service-con-box">
					<view class="wrap-service-con-box-bl">
						<u-image src="/static/images/index/bl.png" width="100%" mode="widthFix"></u-image>
						<view class="wrap-service-con-box-bl-over" @click="toPath('/pages/sub_index/getCityCard/index')">
							<text class="wrap-service-con-box-bl-over-up">办理</text>
							<text class="wrap-service-con-box-bl-over-dowm">网络快速办理</text>
						</view>
					</view>
					<view class="wrap-service-con-box-bl">
						<u-image src="/static/images/index/zx.png" width="100%" mode="widthFix"></u-image>
						<view class="wrap-service-con-box-bl-over" @click="toPath('/pages/sub_index/chat/index')">
							<text class="wrap-service-con-box-bl-over-up">咨询</text>
							<text class="wrap-service-con-box-bl-over-dowm">24小时在线咨询</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部tabbar -->
		<!-- <u-gap height="70"></u-gap> -->
		<u-tabbar :list="vuex_tabbar" :mid-button="true" active-color="#2FA8E1" inactive-color="#999999" @change="changeTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchVal: "",
				funcList: [{
					title: "物业缴费",
					src: "/static/images/index/wyjf.png"
				}, {
					title: "电费",
					src: "/static/images/index/df.png"
				}, {
					title: "加油卡充值",
					src: "/static/images/index/jykcz.png"
				}, {
					title: "宽带费",
					src: "/static/images/index/kdf.png"
				}, {
					title: "手机缴费",
					src: "/static/images/index/sjjf.png"
				}, {
					title: "固话充值",
					src: "/static/images/index/ghcz.png"
				}, {
					title: "违章查询",
					src: "/static/images/index/wzcx.png"
				}, {
					title: "全部",
					src: "/static/images/index/all.png"
				}],
				activity: [],
				activeImgList: [{
					picid: "/static/images/index/bannar01.png",
					articleno: '00000003'
				}, ]
			}
		},
		onShow() {
		},
		methods: {
			search(e) {
				uni.showToast({
					icon: "none",
					title: "搜索服务功能暂未开通",
					duration: 1500
				})
			},

			scan() {
				let that = this
				// #ifndef H5
				// 只允许通过相机扫码
				uni.scanCode({
					success: function(res) {
						let url = res.result
						uni.showToast({
							title: "扫描成功",
							icon: "none",
							duration: 800,
							complete() {
								let param = {
									url: url
								}
								that.$u.get('/v1/qrcode/auth', param).then(ret => {
									//console.log(ret.data.url)
									if (ret.data.permit) {
										if (ret.data.action == 'water') {
											setTimeout(() => {
												uni.navigateTo({
													url: "/pages/sub_index/scanView/index?url=" + ret.data.url
												})
											}, 1500)
										} else if (ret.data.action == 'dlsmkh5') {
											// #ifdef APP-PLUS
												let token = uni.getStorageSync('token')
												let wv = plus.webview.create(ret.data.url, 'webview_pay', {
													backButtonAutoControl:'close',
													additionalHttpHeaders: {
														Authorization: 'Bearer ' + token
													}
												})
												setTimeout(() => {
													wv.show()
												}, 1500)
											// #endif
											// #ifndef APP-PLUS
											uni.showToast({
												icon: "none",
												title: "只支持app端",
												duration: 1500
											})
											// #endif
										}
									} else {
										uni.showToast({
											icon: "none",
											title: "暂不支持此二维码",
											duration: 1500
										})
									}
								})
							}
						})
					}
				});
				// #endif
				// #ifdef H5
				uni.showToast({
					icon: "none",
					title: "H5不支持此功能",
					duration: 1500
				})
				// #endif
			},
			getActivityList() {
				let that = this
				let param = [{
					code: "PopularActivities", //OnlineActivities、OfflineActivities、PopularActivities
					pagesize: 1,
					pageno: 1
				}]
				that.$u.post("/i/activity", param).then(res => {
					if (res.data[0].articles.list.length > 0) {
						let list = res.data[0].articles.list[0]
						list.code = 'PopularActivities'
						that.activity = list
					}
				})
			},
			activeImg(index) {
				let that = this
				let obj = that.activeImgList[index]
				uni.navigateTo({
					url: '/pages/sub_index/activeDetails/index?id=' + obj.articleno
				})
			},
			getBannarList() {
				let that = this
				that.$u.get('i/column/banner', {}).then(res => {
					if (res.data.length > 0) {
						that.activeImgList = res.data
						//console.log(that.activeImgList)
					}
				}).catch(res => {
					//console.log(1)
				})
			},
			signin() {
				let that = this
				that.$u.post('v1/point/task/signin', {}).then(res => {
					uni.showToast({
						icon: "none",
						title: "签到成功",
						duration: 1500
					})
				})
			}
		},
		onLoad() {
			this.getBannarList()
			// #ifdef APP-PLUS
			//引入插件
			const KJJPush = uni.requireNativePlugin('KJ-JPush');
			let uid = uni.getStorageSync("uid")
			//设置Alias
			KJJPush.setAlias(uid ? uid : 'tourist', 1, result => {
				//console.log("setAlias:" + JSON.stringify(result));
			});

			// #endif

		},
		async onPullDownRefresh(){
			await this.getActivityList()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP-WEIXIN */
	.wrap-func {
		/deep/image {
			display: block;
		}
	}

	/* #endif */

	.status_bar {
		background-color: #FFFFFF;
	}

	.wrap {
		background-color: #FFFFFF;

		&-header {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 15rpx;
			background-color: #FFFFFF;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			.img-box {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 15rpx;
			}
		}

		&-bannar {
			width: 100vw;
			margin-top: 10rpx;

			&-title {
				width: 300rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;
				font-size: 35rpx;
				font-weight: bold;
				font-style: oblique;
				font-family: "PingFang-SC-Bold";
			}

			image {
				width: 100%;
			}

			&-box {
				position: relative;

				&-overtitle {
					position: absolute;
					width: 250rpx;
					background-color: #ECECEC;
					padding: 10rpx 20rpx;
					border-radius: 50rpx;
					top: 20rpx;
					left: 50%;
					transform: translate(-50%, 0);
					display: flex;
					font-size: 24rpx;
					justify-content: space-between;
					color: #808080;
					letter-spacing: 2rpx;
					font-family: "PingFang-SC-Medium";
				}
			}
		}

		&-func {
			width: 95vw;
			background-color: #FFFFFF;
			margin: -180rpx auto 0;
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			// padding: 30rpx 0;
			border-radius: 10rpx;
			box-shadow: 0 0rpx 6rpx #808080;
			position: relative;

			/deep/uni-image {
				display: block;
			}

			&-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 30rpx;

				text {
					margin-top: 10rpx;
					color: #333333;
					font-family: "PingFang-SC-Medium";
					font-size: 24rpx;
				}
			}
		}

		&-active {
			margin-top: 30rpx;
			padding: 0 2.5vw;

			&-title {
				font-family: "PingFang-SC-Medium";
				font-size: 30rpx;
				color: #333333;
			}

			&-bannar {
				margin-top: 20rpx;
			}

			&-con {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				// align-items: center;
				&-item {
					width: 32%;
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: #F7F7F7;
					padding: 50rpx 20rpx 30rpx;
					border-radius: 10rpx;

					&-desc {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 50rpx;
						width: 100%;
						text-align: center;

						&-desc {
							width: 100%;
							color: #666666;
							font-size: 20rpx;
							margin-top: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						&-title {
							width: 100%;
							font-family: "PingFang-SC-Medium";
							font-size: 26rpx;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}

		&-service {
			margin-top: 30rpx;
			padding: 0 2.5vw;

			&-title {
				font-family: "PingFang-SC-Medium";
				font-size: 30rpx;
				color: #333333;
			}

			&-con {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 20rpx;

				&-exp {
					position: relative;
					width: 50%;

					&-desc {
						position: absolute;
						top: 30rpx;
						left: 30rpx;
						font-family: "PingFang-SC-Medium";
						color: #FFFFFF;
						font-size: 36rpx;
					}
				}

				&-box {
					width: 49%;
					display: flex;
					flex-direction: column;

					&-bl {
						position: relative;
						margin-top: -10rpx;

						&-over {
							display: flex;
							flex-direction: column;
							position: absolute;
							top: 50%;
							left: 15%;
							transform: translateY(-50%);

							&-up {
								font-family: "PingFang-SC-Medium";
								font-size: 30rpx;
							}

							&-dowm {
								font-family: "PingFang-SC-Medium";
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}
			}

		}
	}
</style>