pillow_customize_app/pages/pages_zhentou/homePage/homePage.vue

<template>
	<view>
		<view class="img_box">
			<image class="img" mode="widthFix" src="../../../static/image/bag.jpg"></image>
			<!-- <img class="img" src="../../../static/image/bag.jpg" mode=""></img> -->
		</view>
		<view class="bottom_box">
			<button class="btn" @click="addForm">填写报名单（其他渠道已购买）</button>
			<button class="btn" v-if="!hasUserInfo &&canIUseGetUserProfile" @click="getUserProfile">定制</button>
			<button v-else-if="!hasPhone" class="btn" @getphonenumber="getphonenumber">定制</button>
			<button v-else class="btn" @click="clickCustom">定制</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				hasUserInfo: false,
				canIUseGetUserProfile: false,
				phone: '',
				hasPhone: false
			}
		},
		onShow() {
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true;
			}
			let phone = uni.getStorageSync('phone');
			let userInfo = uni.getStorageSync('userInfo');
			if (phone) {
				this.phone = phone;
				this.hasPhone = true;
			}
			if (userInfo) {
				this.userInfo = JSON.parse(userInfo);
				this.hasUserInfo = true;
			}
		},
		methods: {
			// 点击定制
			clickCustom() {
				console.log('点击定制')
			},
			// 填写表单
			addForm() {
				// console.log('跳转页面')
				// uni.navigateTo({
				// 	url: '/pages/pages_zhentou//form/form'
				// });
				uni.switchTab({
					url: '/pages/pages_zhentou/form/form'
				});
			},
			//用户信息
			getUserProfile() {
				console.log('getuserinfo')
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '获取微信用户的昵称和头像',
					success: (res) => {
						console.log(res)
						this.userInfo = res.userInfo;
						this.hasUserInfo = true;
						uni.setStorageSync('userInfo', JSON.stringify(res.userInfo));
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//获取手机号
			getPhoneNumber(e) {
				console.log(e)
				uni.request({
					url: getApp().globalData.baseUrl + '/app/phone', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						code: e.detail.code
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.phone = res.data.data;
							this.hasPhone = true;
							uni.setStorageSync('phone', res.data.data);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.img_box {
		.img {
			width: 100%;
		}
	}

	.bottom_box {
		width: 100%;
		height: 280rpx;
		background: #fff;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;


		.btn {
			width: 85%;
			height: 80rpx;
			background-color: rgb(245, 19, 19);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

			&:first-child {
				background-color: rgb(164, 173, 179);
				margin-bottom: 40rpx;
			}
		}
	}
</style>