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="per_box" @click="turnMyPage">
			<view class="image_box">
				<image class="img" src="../../../static/image/person.png" mode=""></image>
			</view>
			<view class="per_txt">
				我的
			</view>
		</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('点击定制');
			},
			// 跳转到我的页面
			turnMyPage(){
				uni.navigateTo({
					url:"/pages/pages_zhentou/myPage/myPage"
				})
			},
			// 填写表单
			addForm() {
				// console.log('跳转页面')
				// uni.navigateTo({
				// 	url: '/pages/pages_zhentou//form/form'
				// });
				uni.switchTab({
					url: '/pages/pages_zhentou/form/form'
				});
			},
			//用户信息
			getUserProfile() {
				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);
							this.doSave();
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//存储用户信息
			doSave() {
				uni.request({
					url: getApp().globalData.baseUrl + '/weChatUser/save',
					method: 'POST',
					data: {
						openId: getApp().globalData.openId,
						username: this.userInfo.nickName,
						phone: this.phone,
						avatar: this.userInfo.avatarUrl
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.setStorageSync('userInfo', JSON.stringify(res.data.data));
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.img_box {
		padding-bottom: 180rpx;
		.img {
			width: 100%;
		}
	}
	
	.per_box{
		width: 70rpx;
		height: 118rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		position: fixed;
		top: 30rpx;
		right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		
		.image_box{
			width: 44rpx;
			height: 44rpx;
			
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.per_txt{
			margin-top: 10rpx;
			color: #333;
			font-size: 24rpx;
		}
	}

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


		.btn {
			width: 690rpx;
			height: 90rpx;
			background: #D73232;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
			
			// &:first-child {
			// 	background: #E9B332;
			// 	margin-bottom: 40rpx;
			// 	display: flex;
			// 	flex-direction: column;
				
			// 	.form_txt{
			// 		height: 50rpx;
			// 		font-size: 28rpx;
			// 		display: flex;
			// 		align-items: center;
			// 	}
			// 	.form_txt1{
			// 		height: 30rpx;
			// 		display: flex;
			// 		align-items: center;
			// 	}
			// }
		}
	}
</style>