luoshan_web/pages/tabbar/index/index.vue

<template>
	<view class="container">
		<view class="banner">
			<u-swiper v-if="bannerList.length != 0" :list="bannerList" height="356" mode="none" img-mode="widthFix" border-radius="0"></u-swiper>
			<u-empty v-else text="banner图为空" mode="list" style="margin: 50rpx"></u-empty>
		</view>
		<view class="mim-view">
			<text class="mim-h">时政要闻</text>
			<view class="mim-flex-wrap-space-between news">
				<view
					class="news_child"
					style="background-image: url('http://api.jczl.site.xmnk.cn//storage/default/ERhLcsxuXDi6yJE1CbIClJrMSMaWc389.png')"
					@click="goPage('gnwyw')"
				>
					<!-- <u-image src="../../../static/images/index/gwyw.png" mode="widthFix"></u-image> -->
					<view class="mim-flex-vertical" style="width: 100%; position: absolute; top: 32rpx; left: 32rpx">
						<text class="news_child_h">国内外要闻</text>
						<text class="news_child_p">新闻资讯一键查阅</text>
					</view>
				</view>
				<view
					class="news_child"
					style="margin-left: 24rpx; background-image: url('http://api.jczl.site.xmnk.cn//storage/default/BMq5AUUsErPs4hvGOp86A8t5D7dnhzzJ.png')"
					@click="goPage('lsxw')"
				>
					<!-- <u-image src=" ../../../static/images/index/lsxw.png" mode="widthFix"></u-image> -->
					<view class="mim-flex-vertical" style="width: 100%; position: absolute; top: 32rpx; left: 32rpx">
						<text class="news_child_h">罗山新闻</text>
						<text class="news_child_p">家乡大事这里都有</text>
					</view>
				</view>
			</view>
		</view>
		<view
			class="mim-view kjb"
			@click="goPage('info_quick_action')"
			style="background-image: url('http://api.jczl.site.xmnk.cn//storage/default/TKbSo6rl3muivIj5UkmHuLIkdbY2bdMo.png'); padding: 0; height: 200rpx"
		>
			<!-- <u-image src="../../../static/images/index/banner2.png" mode="widthFix"></u-image> -->
			<view class="mim-flex-vertical-center" style="position: absolute; top: 46rpx; left: 32rpx">
				<text class="kjb_h">政务服务快捷办</text>
				<text class="kjb_p">罗山政务服务网</text>
			</view>
		</view>
		<view class="mim-view">
			<text class="mim-h">社情民意直通车</text>
			<view class="train" style="background-image: url('http://api.jczl.site.xmnk.cn//storage/default/KfzvL3DdyQg435FtEKabUQDn3DRyt9IW.png')">
				<view class="mim-flex-wrap-space-between">
					<view class="mim-flex-wrap-left">
						<view class="mim_img_div mim-flex-wrap">
							<u-image src="../../../static/icon/index/file.png" width="40rpx" height="44rpx"></u-image>
						</view>
						<view class="mim-flex-vertical" style="margin-left: 24rpx">
							<view class="h">市民吹哨</view>
							<view class="p">党群连心有呼必应</view>
						</view>
					</view>
					<view v-if="mobile" class="whew mim-button" @click="goPage('wantComplaint')">我要吹哨</view>
					<button v-else class="whew_2 mim-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">我要吹哨</button>
				</view>
				<u-divider border-color="rgba(255, 255, 255, 0.6)" margin-top="24" margin-bottom="24" use-slot></u-divider>
				<view class="mim-flex-wrap-space-between">
					<view class="left mim-flex-wrap-space-between" @click="goPage('myComplaint')">
						<text>反馈列表</text>
						<u-image src="../../../static/icon/icon_right.png" width="32rpx" height="32rpx"></u-image>
					</view>
					<view class="long-string"></view>
					<view class="right mim-flex-wrap-space-between" @click="goPage('myComplaintEnd')">
						<text>满意度评价</text>
						<u-image src="../../../static/icon/icon_right.png" width="32rpx" height="32rpx"></u-image>
					</view>
				</view>
			</view>
		</view>
		<view class="mim-view">
			<text class="mim-h">品质引领在罗山</text>
			<view class="mim-flex-wrap-space-between list">
				<view class="storm mim-flex-vertical-center" @click="goPage('lsxq')">
					<u-image src="../../../static/icon/index/ls_1.png" width="56rpx" height="56rpx"></u-image>
					<text>罗山县情</text>
				</view>
				<view class="storm mim-flex-vertical-center" @click="goPage('fzdt')">
					<u-image src="../../../static/icon/index/ls_2.png" width="56rpx" height="56rpx"></u-image>
					<text>发展动态</text>
				</view>
				<view class="storm mim-flex-vertical-center" @click="goPage('yshj')">
					<u-image src="../../../static/icon/index/ls_3.png" width="56rpx" height="56rpx"></u-image>
					<text>营商环境</text>
				</view>
				<view class="storm mim-flex-vertical-center" @click="goPage('qyly')">
					<u-image src="../../../static/icon/index/ls_4.png" width="56rpx" height="56rpx"></u-image>
					<text>全域旅游</text>
				</view>
			</view>
		</view>
		<view class="mim-view">
			<view class="mim-flex-wrap-space-between" style="width: 100%">
				<text class="mim-h">公告板</text>
				<view class="mim-flex-wrap-right" @click="goPage('announcementAll')">
					<text class="look-text">查看全部</text>
					<u-image src="../../../static/icon/icon_right.png" width="32rpx" height="32rpx"></u-image>
				</view>
			</view>
			<view class="message_list">
				<view class="storm mim-flex-wrap-space-between" v-for="item in callBoard" :key="item.id">
					<view class="mim-flex-vertical" style="max-width: 60%">
						<text class="mim-multi-line msg_p">{{ item.title }}</text>
						<text class="msg_time">{{ item.created_at }}</text>
					</view>
					<view class="mim-button details" @click="goDetails(item.id)">查看详情</view>
				</view>
			</view>
		</view>
		<u-divider bg-color="#f7f7f7" fontSize="24">我是有底线的</u-divider>
		<view class="mim-view-list"></view>
		<UserPrivacy ref="privacy"></UserPrivacy>
	</view>
</template>

<script>
import { wechatAppId } from '@/common/settings.js';
import UserPrivacy from '@/components/userPrivacy/userPrivacy.vue';
export default {
	components: {
		UserPrivacy
	},
	data() {
		return {
			statusBarHeight: '',
			navHeight: '',
			bannerList: [],
			callBoard: [],
			mobile: ''
		};
	},
	onShow() {
		wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
			console.log('触发本次事件的接口是：' + eventInfo.referrer);
			this.$refs.privacy.getPrivacySettingFn();
			resolve({ event: 'disagree' });
		});
		const that = this.$u;
		const _this = this;
		const token = uni.getStorageSync('token');
		if (!token) {
			wx.login({
				success(res) {
					if (res.code) {
						that.post('/base/auth/mini-program-login', {
							code: res.code,
							appid: wechatAppId
						}).then((res) => {
							console.log(res);
							if (res.status === 'success') {
								uni.setStorageSync('token', res.data.token);
								_this.homeDataFn();
								_this.getUserInfoFn();
							}
						});
					}
				}
			});
		} else {
			this.homeDataFn();
			this.getUserInfoFn();
		}
	},
	methods: {
		goPage(e) {
			switch (e) {
				case 'wantComplaint': //我要投诉页面
					this.$u.route('/pages/tabbar/user/myComplaint/wantComplaint', {
						phone: this.mobile
					});
					break;
				case 'myComplaint': //投诉列表
					this.$u.route('/pages/tabbar/user/myComplaint/myComplaint');
					break;
				case 'myComplaintEnd': //投诉列表（满意度评价，待评价）
					this.$u.route('/pages/tabbar/user/myComplaint/myComplaint', {
						current: '3'
					});
					break;
				case 'lsxw': //罗山新闻
					this.$u.route('/pages/tabbar/index/announcementAll', {
						type: '2'
					});
					break;
				case 'lsxq': //罗山县情
					this.$u.route('/pages/tabbar/index/announcementAll', {
						type: '3'
					});
					break;
				case 'fzdt': //发展动态
					this.$u.route('/pages/tabbar/index/announcementAll', {
						type: '4'
					});
					break;
				case 'yshj': //营商环境
					this.$u.route('/pages/tabbar/index/announcementAll', {
						type: '5'
					});
					break;
				case 'qyly': //全域旅游
					this.$u.route('/pages/tabbar/index/announcementAll', {
						type: '6'
					});
					break;
				case 'announcementAll': //全部公告
					this.$u.route('/pages/tabbar/index/announcementAll', {
						type: '7'
					});
					break;
				case 'info_quick_action': //跳转快捷办
					// wx.navigateToMiniProgram({
					// 	appId: 'wxf5cb6ba192bc783f'
					// 	// path: 'page/index/index',
					// 	// envVersion: 'develop',
					// 	// success(res) {
					// 	// 	// 打开成功
					// 	// }
					// })
					uni.navigateTo({
						url: '/pages/tabbar/index/webview'
					});
					break;
				case 'gnwyw': //国内外要闻
					this.$u.route('/pages/tabbar/index/announcementAll', {
						type: '1'
					});
					break;
				default:
					console.log('Unknown fruit');
					break;
			}
		},
		//查看详情
		goDetails(e) {
			this.$u.route('/pages/detailPage/detailPage', {
				id: e,
				type: 7
			});
		},
		//获取用户手机号
		getPhoneNumber(res) {
			const encryptedData = res.detail.encryptedData;
			const iv = res.detail.iv;
			if (iv && encryptedData) {
				this.$u
					.post('/base/auth/mini-bind-mobile', {
						encryptedData: encryptedData,
						iv: iv
					})
					.then((res) => {
						console.log(res);
						this.getUserInfoAgainFn();
					});
			}
		},

		//获取主页信息
		async homeDataFn() {
			const res = await this.$u.api.homeData();
			if (res.status === 'success') {
				const data = res.data;
				this.bannerList = data.bannersS;
				this.callBoard = data.informationsS;
			}
		},
		//获取用户信息
		async getUserInfoFn() {
			const res = await this.$u.api.getUserInfo();
			this.mobile = res.data.mobile;
		},
		//绑定完成手机号调用
		async getUserInfoAgainFn() {
			const res = await this.$u.api.getUserInfo();
			this.mobile = res.data.mobile;
			if (this.mobile) {
				this.$u.route('/pages/tabbar/user/myComplaint/wantComplaint', {
					phone: this.mobile
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;

	.container {
		.banner {
			width: 100%;
		}

		.mim-view {
			.mim-h {
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #333333;
			}

			.news {
				margin-top: 24rpx;

				view {
					width: 50%;
					position: relative;
				}

				&_child {
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					box-sizing: border-box;
					height: 144rpx;

					&_h {
						font-size: 32rpx;
						font-weight: bold;
						line-height: 32rpx;
						letter-spacing: 0em;
						color: #ffffff;
					}

					&_p {
						font-size: 20rpx;
						font-weight: normal;
						line-height: 20rpx;
						letter-spacing: 0em;
						margin-top: 20rpx;
						color: #ffffff;
					}
				}
			}

			.mim-h-p {
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #333333;
			}

			.bg-image {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: -1;
				top: 0;
				left: 0;
			}

			.train {
				margin-top: 24rpx;
				padding: 24rpx;
				height: 212rpx;
				border-radius: 16px;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				// background-color: #999999;
			}

			.mim_img_div {
				width: 84rpx;
				height: 84rpx;
				opacity: 1;
				background: #ffffff;
				border-radius: 50%;
			}

			.h {
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3d3d3d;
			}

			.p {
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
			}

			.whew {
				width: 144rpx;
				height: 48rpx;
				border-radius: 24rpx;
				opacity: 1;
				background: #ffffff;
				box-sizing: border-box;
				border: 2rpx solid #de2e27;
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #de2e27;
			}

			.whew_2 {
				width: 144rpx;
				height: 48rpx;
				border-radius: 24rpx;
				opacity: 1;
				background: #ffffff;
				box-sizing: border-box;
				border: 2rpx solid #de2e27;
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #de2e27;
				padding: 0;
				margin-right: 0;
			}

			.left,
			.right {
				position: relative;
				width: 50%;

				text {
					font-size: 24rpx;
					font-weight: normal;
					line-height: 24rpx;
					letter-spacing: 0em;
					color: #333333;
				}
			}

			.long-string {
				width: 2rpx;
				height: 24rpx;
				background-color: rgba(255, 255, 255, 0.6);
				margin: 0 12rpx;
			}

			.kjb {
				&_h {
					font-size: 16px;
					font-weight: bold;
					letter-spacing: 0em;
					color: #333333;
				}

				&_p {
					display: inline-block;
					font-size: 12px;
					font-weight: normal;
					letter-spacing: 0.08em;
					color: #de2e27;
					background: #ffffff;
					box-sizing: border-box;
					border: 1px solid #de2e27;
					padding: 3px 10px;
					border-radius: 12px;
					margin-top: 20rpx;
				}
			}

			.list {
				.storm {
					margin-top: 44rpx;
					padding: 0 16rpx;

					text {
						font-size: 24rpx;
						font-weight: normal;
						letter-spacing: 0em;
						margin-top: 12rpx;
						color: #333333;
					}
				}
			}

			.look-text {
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
				margin-right: 4rpx;
			}

			.message_list {
				.storm {
					padding: 24rpx 0;
					border-bottom: 2rpx solid #eee;

					.msg_p {
						font-size: 30rpx;
						font-weight: normal;
						line-height: 36rpx;
						letter-spacing: 0em;
						color: #333333;
					}

					.msg_time {
						font-size: 24rpx;
						font-weight: normal;
						line-height: 24rpx;
						letter-spacing: 0em;
						color: #999999;
						margin-top: 32rpx;
					}

					&:last-child {
						border-bottom: none;
						padding-bottom: 0;
					}
				}

				.details {
					width: 176rpx;
					height: 64rpx;
					margin-left: 30rpx;
				}
			}
		}
	}
}
</style>