snapshot-wx/pages/BaseTabBar/Home.vue

<template>
	<view class="container">
		<view class="bannerBox">
			<swiper class="swiper" circular autoplay>
				<swiper-item class="swiperItem" v-for="(item, index) in bannerData" :key="index">
					<image class="swiperImg" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="contentBox">
			<view class="operateBox">
				<view class="operateItemBox" v-for="(item, index) in industryData" :key="index">
					<view class="operateItem" @tap="toWrite(item)">
						<!-- <image :src="item.cellImgUrl" class="operateItemBGImg" mode="widthFix"></image> -->
						<image src="/static/logo.png" class="operateItemBGImg" mode="widthFix"></image>
						<text class="operateItemText">{{item.txtRemarks}}</text>
					</view>
				</view>
				<!-- <view class="operateItemBox">
					<view class="operateItem" @tap="toWrite({id: '08dd2e1f-94ff-4e70-8360-8e5c33425328'})">
						<image src="/static/logo.png" class="operateItemBGImg" mode="widthFix"></image>
						<text class="operateItemText">安全隐患排查治理信息系统</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		options: {
		    styleIsolation: 'isolated'
		},
		data() {
			return {
				openID: '',
				bannerData: [],
				industryData: [],
				latitude: '',
				longitude: ''
			}
		},
		methods: {
			getData(){
				that = this;
				that.onGetData();
				that.updateData();
			},
			// 父页面更新openID
			updateData(){
				that.openID = uni.getStorageSync('userInfo').openID;
			},
			onGetData(){
				that.$admin.reqDirect({
					method: 'GET',
					url: '/api/v1/Snapshot/home'
				}).then(res => {
					that.bannerData = res.banners;
					that.industryData = res.industrys;
				}, err => {
					that.$util.msg(err);
				})
			},
			getAuthorizeInfo(fun) {
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						that.getLocationInfo(fun);
					},
					fail() { // 拒绝授权
						that.openConfirm(fun);
					}
				})
			},
			// 获取地理位置
			getLocationInfo(fun) {
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						typeof fun === 'function' && fun();
					}
				});
			},
			// 当用户第一次拒绝后再次请求授权
			openConfirm(fun) {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您当前的所在城市，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success(res) {
									if (res.authSetting['scope.userLocation']) {
										that.getLocationInfo(fun);
									} else {
										typeof fun === 'function' && fun();
									}
								}
							}); // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得你所在城市信息',
								icon: 'none',
								duration: 1000,
								success() {
									typeof fun === 'function' && fun();
								}
							})
						}
					}
				});
			},
			// 不同类型隐患上报
			toWrite(obj) {
				// let strUrl = obj.pageUrl || 'comingSoon'
				// let strUrl = 'comingSoon'
				// let strUrl = '/pagesBase/Write/ReportHiddenDanger'
				// let strUrl = '/pagesBase/Write/LivelihoodFacts'
				// let strUrl = '/pagesBase/Write/WeldingOperations'
				let strUrl = '/pagesPointsBase/Points/Index'
				// let strUrl = 'navigateToMiniProgramByAppId?appId=wxc564149bc4d892f3&path=pages/index/index&type=WeldingOperations'
				// let strUrl = 'navigateToExternalLinks?externalUrl=https://zgyjglyzpt.cn'
				if (strUrl.indexOf("navigateToMiniProgramByAppId") !== -1){
					if(!strUrl || strUrl.split('?').length != 2 || strUrl.split('?')[1].split('&').length != 3){
						that.$util.msg('跳转地址配置错误！');
					}else {
						let appId = strUrl.split('?')[1].split('&')[0].split('=')[1] || '';
						let path = strUrl.split('?')[1].split('&')[1].split('=')[1] || '';
						let type = strUrl.split('?')[1].split('&')[2].split('=')[1] || '';
						if (type == 'WeldingOperations'){
							if (!that.openID) {
								that.$util.msg("请先登录", function(){
									uni.switchTab({
										url: "/pages/Index/Mine"
									})
								});
								return;
							}
							// path += '?openId=' + that.openID;
							uni.navigateToMiniProgram({
								appId: appId,
								path: path,
								extraData: {
									'openId': that.openID
								},
								envVersion: 'release',
								fail(err) {
									that.$util.msg('您已取消打开');
								}
							})
						}else if (type == 'HomeworkReporte'){
							uni.navigateToMiniProgram({
								appId: appId,
								path: path,
								envVersion: 'release',
								fail(err) {
									that.$util.msg('您已取消打开');
								}
							})
						}
					}
				}else if (strUrl.indexOf("navigateToExternalLinks") !== -1){
					let externalUrl = strUrl.split('?')[1].split('=')[1];
					// that.getAuthorizeInfo(function(){
						uni.navigateTo({
							url: '/pages/ExternalLinks/Index?externalUrl=' + encodeURIComponent(externalUrl)
						})
					// });
				}else if (strUrl.indexOf("comingSoon") !== -1){
					that.$util.msg("功能即将上线，敬请期待！");
				}else {
					if (!that.openID) {
						that.$util.msg("请先登录", function(){
							uni.switchTab({
								url: "/pages/Index/Mine"
							})
						});
						return;
					}
					uni.navigateTo({
						url: strUrl + '?id=' + encodeURIComponent(obj.id)
					});
				}
			},
		}
	}
</script>

<style lang="less">
	.container {
		background-color: #fff;
	}

	.bannerBox {
		width: calc(100% - 40rpx);
		height: 300rpx;
		margin:  0 20rpx;
		border-radius: 20rpx;
		box-shadow: 0px 22px 10px -20px #c7c7c7;
		position: absolute;
		top: 0;
		left: 0;
	}

	.swiper {
		height: 100%;
		border-radius: 20rpx;
	}
	
	.swiperItem{
		border-radius: 20rpx;
	}

	.swiperImg {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.contentBox {
		height: calc(100vh - 330rpx);
		margin-top: 320rpx;
		padding: 10rpx 20rpx 0;
		position: relative;
		z-index: 9;
		background-color: #fff;
		overflow-y: auto;
	}
	
	.operateBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-flow: wrap;
		align-content: flex-start;
	}
	
	.operateItemBox{
		display: inline-block;
		width: calc(50% - 10rpx);
		padding-bottom: 20rpx;
	}

	.operateItem {
		display: inline-block;
		width: 100%;
		height: 100%;
		text-align: center;
		border-radius: 14rpx;
		position: relative;
	}

	.operateItemBGImg {
		width: 100%;
		height: 100%;
	}
	
	.operateItemText{
		position: absolute;
		bottom: 10%;
		left: 0rpx;
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		text-align: center;
		font-size: 22rpx;
		height: 64rpx;
		line-height: 32rpx;
		color: #777;
		white-space: pre-line;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>