rtim/pages/index/index.vue

<template>
	<!-- <page-meta :page-font-size="`${this.scaleFontSize}px`"  :root-font-size="`${this.scaleFontSize}px`"></page-meta> -->
	<view class="content">
		<image class="bg-img" v-show="template == 'homeIndex'" src="@/static/image/home/home_top_bg.png"></image>
		<image class="bg-img" v-show="template == 'watchIndex'" src="@/static/images/pages_watch/images/home_top_bg.png"></image>

		<view class="grace-page-header" :style="{ background: headerBG }">
			<image class="bg-img" v-show="template == 'watchIndex'" src="@/static/images/pages_watch/images/home_top_bg.png"></image>

			<!-- 沉浸式状态栏 -->
			<view class="content-header" id="gracePageHeader" :style="{ minHeight: headerHeight + 'px', height: headerHeight + 'px', overflow: 'hidden' }">
				<view class="content-header-l">
					<!-- <image class="address" src="@/static/image/home1/address_icon.png" mode="aspectFill"></image> -->
					<text :class="template == 'homeIndex' ? 'es-c-white' : 'es-c-33'">{{ locCity }}</text>
					<!-- <image class="arrow_down" src="@/static/image/home1/arrow_down_icon.png" mode="aspectFill"></image> -->
				</view>
				<indexSubsection ref="indexSubsection" @onChange="changeTemplate" />
				<view class="content-header-r">
					<!-- <view @click="showQidai()">
						<image src="@/static/image/home1/weixin_icon.png" mode="aspectFill"></image>
						<text>分享</text>
					</view>
					<view @click="goToMsg()">
						<image v-show="template=='homeIndex'" src="@/static/image/home1/new_icon.png" mode="aspectFill"></image>
						<image v-show="template=='watchIndex'" src="@/static/image/home/message1.png" mode="aspectFill"></image>
						<text :class="template=='homeIndex'?'es-c-white':'es-c-33'">消息</text>
					</view> -->
					<view class="x-ac" style="height: auto; display: block">
						<image v-show="template == 'homeIndex'" style="margin-right: 10px" src="@/static/image/home1/scancode.png" mode="aspectFill" @click="handleScan()"></image>
						<image v-show="template == 'homeIndex'" src="@/static/images/service_center_icon_white.png" mode="aspectFill" @click="goToWXMsg()"></image>
						<image
							v-show="template == 'watchIndex'"
							style="margin-left: 50rpx"
							src="@/static/image/my/service_center_icon.png"
							mode="aspectFill"
							@click="goToWXMsg()"
						></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 新手指引 -->
		<template v-if="template == 'homeIndex'">
			<myGuide ref="myGuide" :step="step"></myGuide>
		</template>

		<!-- homeIndex -->
		<!-- pages_watch -->
		<view v-show="template == 'homeIndex'">
			<homeIndex ref="homeIndex" />
		</view>
		
		<view v-show="template == 'watchIndex'">
			<watchIndex ref="watchIndex" />
		</view>
	</view>
</template>

<script>
import store from '@/store';
import indexSubsection from '@/components/indexSubsection/indexSubsection';
import homeIndex from './components/homeIndex.vue';
import watchIndex from './components/watchIndex.vue';
import { getLocation } from '@/api/index.js';

// #ifdef APP-PLUS
import permision1 from '@/utils/permission.js';
import { premissionCheck } from '@/js_sdk/wa-permission/permission.js';
const idCode = uni.requireNativePlugin('Ba-IdCode');
// #endif
// const idCode = uni.requireNativePlugin('Ba-IdCode')
export default {
	components: {
		indexSubsection,
		homeIndex,
		watchIndex
	},
	data() {
		return {
			template: 'homeIndex', // homeIndex:首页 ， watchIndex: 腕表页面
			option: '',
			top: 0,
			statusBarBG: 'none',
			headerHeight: 44,
			locCity: '芳华未来',
			scaleFontSize: uni.getStorageSync('fontSize'),
			step: {
				name: 'indexguide',
				guideList: [
					{
						el: '',
						tips: '上下滑动，了解芳华未来',
						next: ''
					}
					// ,{
					// 	el: '#indexguide1',
					// 	tips: '药膳、经络、疾病医学百科知识快速查询',
					// 	next: '下一步',
					// },{
					// 	el: '#indexguide2',
					// 	tips: '权威医生、药师实时在线咨询',
					// 	next: '下一步',
					// },{
					// 	el: '#indexguide3',
					// 	tips: '免费健康自测，了解自身健康情况',
					// 	next: '下一步',
					// },{
					// 	el: '#indexguide4',
					// 	childEl: ".indexguide4-child",
					// 	tips: '购买健康疗法享健康',
					// 	next: '完成',
					// },
				]
			}
		};
	},
	onPageScroll(e) {
		if (this.template == 'homeIndex') {
			this.top = e.scrollTop;
		}
	},
	computed: {
		// 计算属性的 getter
		headerBG() {
			if (this.template == 'homeIndex') {
				var top = this.top / 88;
				return 'rgba(255,92,3, ' + top + ')';
			}
		}
	},
	onLoad(option) {
		// #ifdef APP-PLUS
		if (this.$isAgreePrivacy()) {
			const guide = uni.getStorageSync(this.step.name);
			if (!!guide) {
				//permision1.checkPush();
			}
			//this.doGetLocation();
		}
		// #endif

		let that = this;
		uni.setNavigationBarTitle({
			title: that.$qconfig.appName
		});
		uni.setStorageSync('indexTemplate', 0);
		this.option = option;
		//this.scaleFontSize = store.state.timStore.fontSize;
		// this.$nextTick(()=>{
		// 	  this.$refs[this.template].initLoad(this.option)
		// })
	},
	onReady() {
		this.$refs.indexSubsection.selectorQuery();
		this.$refs[this.template].initReady();
	},
	onShow() {
		// #ifdef APP-PLUS
		if (this.$isAgreePrivacy()) {
			if (plus.runtime.channel == 'baidu') {
				let bdCmdType = uni.getStorageSync('bdCmdType');
				if (this.$isEmpty(bdCmdType)) {
					this.$registerIdCode('activate', 0, 0);
				}
			}
		}
		// #endif
		if (!this.$isLogin()) {
			uni.navigateTo({
				url: '/pages/auth/loginIndex'
			});
		} else {
			this.$updateMsgDot();
		}
		this.$nextTick(() => {
			this.$refs[this.template].initShow();
		});
	},
	methods: {
		changeTemplate(e) {
			const tem = e == 1 ? 'watchIndex' : 'homeIndex';
			if (this.template == tem) return;
			this.template = tem;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 100
			});
			this.$nextTick(() => {
				//this.$refs[this.template].initLoad(this.option)
				this.$refs[this.template].initReady();
				this.$refs[this.template].initShow();
			});
		},
		registerIdCode() {
			//注册，先注册再获取，注意APP合规性，若最终用户未同意隐私政策则不要调用
			idCode.register((res) => {
				console.log(res);
			});
		},
		async getLocation() {
			let status;
			// #ifdef APP-PLUS
			status = await this.checkPermission();
			if (status !== 1) {
				return;
			}
			// #endif
			// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
			status = await this.getSetting();
			if (status === 2) {
				this.showConfirm();
				return;
			}
			// #endif
			this.doGetLocation();
		},
		doGetLocation() {
			getLocation().then((res) => {
				this.locCity = res.city.replace(/市|区/g, '');
			});
		},
		getSetting: function () {
			return new Promise((resolve, reject) => {
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userLocation'] === undefined) {
							resolve(0);
							return;
						}
						if (res.authSetting['scope.userLocation']) {
							resolve(1);
						} else {
							resolve(2);
						}
					}
				});
			});
		},
		openSetting: function () {
			this.hideConfirm();
			uni.openSetting({
				success: (res) => {
					if (res.authSetting && res.authSetting['scope.userLocation']) {
						this.doGetLocation();
					}
				},
				fail: (err) => {}
			});
		},
		async checkPermission() {
			let status = permision1.isIOS ? await permision1.requestIOS('location') : await permision1.requestAndroid('android.permission.ACCESS_FINE_LOCATION');
			if (status === null || status === 1) {
				status = 1;
			} else if (status === 2) {
				uni.showModal({
					content: '系统定位已关闭',
					confirmText: '确定',
					showCancel: false,
					success: function (res) {}
				});
			} else if (status.code) {
				uni.showModal({
					content: status.message
				});
			} else {
				uni.showModal({
					content: '需要定位权限',
					confirmText: '设置',
					success: function (res) {
						if (res.confirm) {
							permision1.gotoAppSetting();
						}
					}
				});
			}
			return status;
		},

		showQidai() {
			uni.showToast({ title: '功能完善中,敬请期待...', icon: 'none' });
		},
		goToMsg() {
			uni.switchTab({
				url: '/pages_im/pages/conversation/conversationList/index'
			});
		},
		async goToWXMsg() {
			const url = getApp().globalData.kfurl; //企业微信客服链接
			const corpId = getApp().globalData.corpId; //企业id
			// #ifdef H5
			window.location.href = url;
			// #endif
			// #ifdef MP-WEIXIN
			wx.openCustomerServiceChat({
				extInfo: {
					url
				},
				corpId,
				success(res) {
					console.log('成功');
				},
				fail(err) {
					console.log(err, '报错');
				}
			});
			// #endif

			// #ifdef APP-PLUS
			let shares = await this.getAppShare().catch((err) => {
				throw Error(err);
			});
			shares['weixin'].openCustomerServiceChat(
				{
					corpid: corpId,
					url
				},
				(suc) => {
					console.log('客服打开成功', JSON.stringify(res));
				},
				(err) => {
					console.log('error', JSON.stringify(err));
				}
			);
			// #endif
		},
		getAppShare() {
			// #ifdef APP-PLUS
			return new Promise((re, rj) => {
				let shares = null;
				var pusher = plus.share.getServices(
					function (s) {
						shares = {};
						s.forEach((e) => (shares[e.id] = e));
						re(shares);
					},
					function (e) {
						rj(e);
					}
				);
			});
			// #endif
		},
		getIdCodes() {
			//获取设备的各种标识码
			idCode.getIdCodes((res) => {
				if (res.data) {
					//this.msgList.unshift(JSON.stringify(res.data));
					let ua = plus.navigator.getUserAgent();
					console.log('qxj ua:' + ua);
					console.log('qxj getIdCodes:' + JSON.stringify(res.data));
				}
			});
		},
		getOAID() {
			//异步获取 OAID
			idCode.getOAID((res) => {
				if (res.data) {
					//this.msgList.unshift(JSON.stringify(res.data));
					console.log('qxj getOAID:' + JSON.stringify(res.data));
				}
			});
		},
		//扫码
		async handleScan() {
			// #ifdef APP-PLUS
			
				uni.navigateTo({
					url: '/pages_watch/healthMonitoring/scanCode?typeFun=getIndexScanCode'
				});
			
			
			// #endif
			// #ifdef MP-WEIXIN
			this.checkWXCamera();
			// #endif
		},
		scanQRCode() {
			const that = this;
			uni.scanCode({
				success(res) {
					if (res.result) {
						// 扫描成功，处理二维码内容
						console.log('扫描结果：', res.result);
						const scanInfo = res.result;
						if (scanInfo && scanInfo.indexOf('https://userapp.his.cdwjyyh.com/bindcompanyuser') > -1) {
							const companyUserId = this.getUrlParam(scanInfo).companyUserId;
							console.log('扫描结果公司码：', companyUserId);
							this.$handleBindCompanyFsUser(companyUserId);
						}
					} else {
						// 扫描失败
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						});
					}
				},
				fail() {}
			});
		},
		getUrlParam(url) {
			const queryStr = url.split('?')[1];
			if (!queryStr) {
				return {};
			}
			const params = queryStr.split('&');
			const queryParams = {};
			params.forEach((param) => {
				const [key, value] = param.split('=');
				queryParams[key] = value;
			});
			return queryParams;
		},
		
	
		checkWXCamera() {
			const that = this;
			uni.getSetting({
				success(res) {
					// 判断是否拥有此权限进行拉起授权  和 重新授权功能
					if (!res.authSetting['scope.camera']) {
						// 未授权此项权限 拉起授界面
						uni.authorize({
							scope: 'scope.camera',
							success() {
								// 授权成功后 就可以执行 需要权限的  操作函数了
								// 使用已授权的功能
								that.scanQRCode();
							},
							fail(err) {
								/*
									 第一次拒绝授权后必须在 uni.authorize的fail中使用
									 uni.openSetting 才能进入设置界面打开授权按钮
									 */
								uni.showToast({
									title: '您拒绝了授权',
									icon: 'none'
								});
								// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
								uni.showModal({
									title: '是否重新授权相机功能',
									success(res) {
										if (res.confirm) {
											uni.openSetting({
												success() {
													console.log('开启权限成功');
												},
												fail() {
													console.log('开启权限失败');
												}
											});
										} else if (res.cancel) {
											console.log('拒绝开启开启权限');
										}
									}
								});
							}
						});
					} else {
						that.scanQRCode();
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@mixin u-flex($flexD, $alignI, $justifyC) {
	display: flex;
	flex-direction: $flexD;
	align-items: $alignI;
	justify-content: $justifyC;
}
.nav-bar {
	background-color: red;
	// background-image: url("@/static/image/home/home_top_bg.png");
	// background-repeat: no-repeat;
	// background-size: 100%;
	// background-color: #F4F7FA;
	// position: absolute;
	// width: 100%;
	// height: 524rpx;
}
.content {
	width: 100%;
	box-sizing: border-box;
	// overflow: hidden;
	// margin-top: var(--status-bar-height);
	// padding-top: 24rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	// background-image: url("@/static/image/home/home_top_bg.png");
	background-repeat: no-repeat;
	background-size: 100%;

	// box-sizing: border-box;
	// padding-top: calc(var(--status-bar-height) + 24rpx);
	// padding-bottom: var(--window-bottom);
	// font-family: PingFang SC, PingFang SC;
	// font-weight: 400;
	// font-size: 24rpx;
	// color: #999999;
	position: relative;
	z-index: 2;
	.bg-img {
		position: absolute;
		width: 100%;
		height: 524rpx;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
	}
	.bgConent {
		background-image: url('@/static/image/home/home_top_bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: #f4f7fa;
		position: absolute;
		width: 100%;
		height: 524rpx;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
	}
	.grace-page-header {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 98;
		border-bottom: 0px solid #ffffff;
		padding-top: calc(var(--status-bar-height));
		box-sizing: border-box;
		overflow: hidden;
	}
	.content-header {
		height: 80rpx;
		padding: 0 24rpx;
		@include u-flex(row, center, space-between);
		position: relative;
		z-index: 2;
		&-l {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #ffffff;
			line-height: 28rpx;
			@include u-flex(row, center, flex-start);
			.address {
				width: 38rpx;
				height: 38rpx;
				margin-right: 6rpx;
			}
			.arrow_down {
				width: 24rpx;
				height: 24rpx;
				margin-left: 8rpx;
			}
		}
		&-r {
			@include u-flex(row, center, flex-start);
			view {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #ffffff;
				line-height: 24rpx;
				@include u-flex(column, center, space-between);
				// width: 80rpx;
				// height: 80rpx;
				padding-top: 2rpx;
				padding-bottom: 6rpx;
			}
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
.indexSubsection {
	position: fixed;
	top: calc(var(--status-bar-height) + 24rpx);
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	height: 88rpx;
	line-height: 88rpx;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>