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" @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" 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: {},
				hasUserInfo: false,
				canIUseGetUserProfile: false,
				phone: '',
				hasPhone: false,
				bgSrc: '', //背景图片
			}
		},
		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;
			}
			//商品信息
			if (this.bgSrc == '') {
				this.queryGoodsInfo();
			}
		},
		methods: {
			//商品信息
			queryGoodsInfo() {
				uni.request({
					url: 'http://192.168.1.106:80/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.request({
					url: getApp().globalData.baseUrl + '/blade-desk/order/save',
					method: 'POST',
					data: {
						buyerId: this.userInfo.id,
						buyerName: this.userInfo.username,
						buyerPhone: this.phone
					},
					header: {
						'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 200) {
							console.log('下单成功');
							uni.navigateTo({
								url: '/pages/pages_zhentou/order/order'
							})
						} else if (res.data.code == 401) {
							this.doLogin();
						} else if (res.data.code == 1001) {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								success: (res2) => {
									if (res2.confirm) {
										uni.navigateTo({
											url: '/pages/pages_zhentou/order/order'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			// 跳转到我的页面
			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;
						if (this.phone) {
							//如果手机号存在直接调取保存
							this.doSave();
						}
					},
					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'
							})
						}
					},
					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();
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//登录
			doLogin() {
				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);
						} 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: 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>