pillow_customize_app/pages/pages_zhentou/homePage/homePage.vue

<template>
	<view>
		<view class="img_box">
			<image class="img" mode="widthFix" :src="bgSrc"></image>
			<!-- <img class="img" src="../../../static/image/bag.jpg" mode=""></img> -->
		</view>
		<view class="per_box">
			<view class="my_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="line"></view>
			<view class="service_box" @click="turnShouhou">
				<view class="image_box">
					<image class="img" src="../../../static/image/icon-contact.png" mode=""></image>
				</view>
				<view class="per_txt">
					客服
				</view>
			</view>
			
		</view>
		<view class="bottom_box">
			<!-- <button class="btn" @click="addForm">填写报名单（其他渠道已购买）</button> -->
			<button v-if="!hasPhone" open-type="getPhoneNumber" class="btn"
				@getphonenumber="getPhoneNumber">立即定制</button>
			<button v-else class="btn" @click="clickCustom">立即定制</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				phone: '',
				hasPhone: false,
				bgSrc: '', //背景图片
			}
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userInfo = JSON.parse(userInfo);
				// console.log('home',userInfo)
				if(this.userInfo.phone) {
					this.phone = this.userInfo.phone;
					this.hasPhone = true;
				}
			}
			//商品信息
			if (this.bgSrc == '') {
				this.queryGoodsInfo();
			}
		},
		methods: {
			//商品信息
			queryGoodsInfo() {
				uni.request({
					url: getApp().globalData.baseUrl + '/blade-system/dict-biz/get-goods-info',
					method: 'GET',
					success: (res) => {
						if (JSON.stringify(res.data.data) !== '{}') {
							this.bgSrc = res.data.data.imgPath;
						} else {
							this.bgSrc = getApp().globalData.imgPrefix + 'bag.jpg';
						}
					}
				})
			},
			// 点击定制
			clickCustom() {
				console.log('点击定制');
				uni.navigateTo({
					url: '/pages/pages_zhentou/order/confirmOrder'
				})
			},
			// 跳转到我的页面
			turnMyPage() {
				uni.navigateTo({
					url: "/pages/pages_zhentou/myPage/myPage"
				})
			},
			// 跳转到售后页面
			turnShouhou() {
				uni.navigateTo({
					url: "/pages/pages_zhentou/contact/contact"
				})
			},
			// 填写表单
			addForm() {
				uni.switchTab({
					url: '/pages/pages_zhentou/form/form'
				});
			},
			//获取手机号
			getPhoneNumber(e) {
				if(e.detail.errMsg == 'getPhoneNumber:fail user deny'){
					return;
				}
				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'
							})
						}
					},
					fail: function(res) {
						// 获取手机号码失败
						if (res.errMsg == 'getPhoneNumber:fail user deny') {
							// 用户取消授权
							uni.showToast({
								title: '您未授权获取手机号码',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//存储用户信息
			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));
							//登录
							this.doLogin(1);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//登录
			doLogin(type) {
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				uni.request({
					url: getApp().globalData.baseUrl + '/blade-auth/getToken',
					method: 'POST',
					data: {
						openId: getApp().globalData.openId,
						username: this.userInfo.username,
						phone: this.phone
					},
					header: {
						'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0'
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.setStorageSync('token', res.data.data.access_token);
							if(type == 1) {
								this.clickCustom();
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img_box {
		padding-bottom: 180rpx;

		.img {
			width: 100%;
		}
	}

	.per_box {
		width: 70rpx;
		height: 242rpx;
		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;
		
		.line{
			width: 43rpx;
			height: 2rpx;
			background: #000;
			margin: 16rpx 0;
		}
		
		.my_box{
			width: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.image_box {
				width: 44rpx;
				height: 44rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.service_box{
			width: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.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>