MiniPrograms/subpkg/guide/guide.vue

<template>
	<view class="children-container">
		<!-- 标题 -->
		<view class="tips">
			<view class="title">欢迎您的使用</view>
			<view style="font-weight: bold;font-size: 36rpx;color: #b0b0b1;margin-left: 40rpx;margin-top: 20rpx;">
				醍摩豆家长助您孩子成长</view>
			<view class="detail-image"></view>
			<button class="detail-button" plain="true" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">获取您的孩子信息</button>
		</view>

		<!-- 动画 -->
		<view class="ocean"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	//引入解密工具
	import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js";

	export default {
		computed: {
			...mapState('m_parent', ['token'])
		},
		data() {
			return {
			};
		},
		methods: {
			...mapMutations('m_parent', ['updateParentDetail']),

			//获取用户手机号
			async getPhoneNumber(e) {
				if (e.detail.errMsg !== "getPhoneNumber:ok") {
					//用户决绝授权  
					return uni.$showMsg('拒绝授权获取不到您的孩子信息!')
				} else {
					if (this.token) {
						let proof = await new WXBizDataCrypt('wx5705da8747c77cfe', this.token.session_key)
						let numData = await proof.decryptData(e.detail.encryptedData, e.detail.iv)
						console.log(numData.phoneNumber)
						// const parentDetailData = await uni.$http.post('',numData.phoneNumber)
						this.updateParentDetail({
							phoneNumber: '17882237075',
							name: '家长姓名',
							childrenList: [{
								avatar: '/static/default-icons/boy.png',
								name: '张三',
								classid: '0301',
								class: '三年级一班',
								tmdid: 'tmdid01',
								schoolname: '研发学校'
							}, {
								avatar: '/static/default-icons/girl.png',
								name: '张梅',
								classid: '0504',
								class: '五年级四班',
								tmdid: 'tmdid03',
								schoolname: '研发学校'
							}, ]
						})
						uni.navigateTo({
							url:'/subpkg/childrenlist/childrenlist'
						})
					}
				}
			},


		}
	}
</script>

<style lang="scss">
	@import '@/subpkg/common/ocean.scss';

	.children-container {
		display: flex;
		flex-direction: column;

		.tips {
			width: 100%;
			display: flex;
			flex-direction: column;
			z-index: 99;

			.title {
				padding-top: 200rpx;
				padding-left: 40rpx;
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
				color: #4169E1;
				// background-clip: text; //裁剪成文字的前景色
				// color: transparent; //文字颜色变成透明
			}

			.detail-image {
				margin-top: 80rpx;
				margin-bottom: 20rpx;
				width: 100%;
				height: 500rpx;
				background: $guide-back-base64;
				background-size: cover; //背景图片自适应
			}

			.detail-button {
				line-height: 100rpx;
				height: 100rpx;
				width: 80%;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				border-radius: 100rpx;
				position: relative;
				margin: 100rpx auto; //relative相对定位居中
				border: none;
				background: linear-gradient(to right, #506AE7, #87CEFA);

			}
		}
	}
</style>