cashier_weapp/pages/user/information.vue

<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
		<view class="onecontent">
			<view :style="[{'padding-top':HeighT.customBar +44+'px'}]"></view>
			<view class="onecontentbox">
				<!-- <button open-type="chooseAvatar" @chooseavatar="uploadImg">
					<image class="onecontentboximage" :src="userHeadImg" mode=""></image>
				</button> -->
				<!-- <image class="onecontentboximage" :src="userHeadImg" mode="" @click="uploadImg"></image> -->
				<button type="default" class="btn" open-type="chooseAvatar" @chooseavatar="uploadImg">
					<view class="" :style="'background-image:url('+userHeadImg+');'"
						style="width: 180rxp;height: 180rpx; background-position: center;"></view>
				</button>


				<view class="onecontentboxitem flex-between">
					<view class="onecontentboxitemtext">
						昵称
					</view>
					<input class="onecontentboxiteminput" v-model="nickName" type="nickname" @blur="bindblur"
						placeholder="请输入昵称" @input="bindinput" />

				</view>
				<view class="onecontentboxitem flex-between" style="border-top: 1rpx dotted  #333333;">
					<view class="onecontentboxitemtext">
						手机号
					</view>
					<button class="onecontentboxiteminput buttonstyle"
						style="background-color: #fff;border: none;!important" open-type="getPhoneNumber"
						@getphonenumber="getPhone">{{phonetitle}} </button>
					<!-- <input class="onecontentboxiteminput" disabled v-model="phonetitle" type="text"
						placeholder="请输入手机号"> -->
				</view>
			</view>
			<view class="onecontentboxitemnamber" @click="sumbit">
				保存
			</view>
		</view>

	</view>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},

		data() {
			return {
				titlename: '完善信息',
				opacity: false,
				form: {
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					other: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore',
				},
				userInfo: uni.cache.get('userInfo'),
				userHeadImg: "",
				nickName: '',
				phonetitle: ""
			};
		},
		onLoad() {
			this.userInfo = uni.cache.get('userInfo')
			this.nickName = this.userInfo.nickName
			this.userHeadImg = this.userInfo.headImg
			this.phonetitle = this.userInfo.telephone ? this.userInfo.telephone : '请授权手机号'
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacitys = false
			} else {
				this.opacitys = true
			}
		},
		methods: {
			async getPhone(d) {
				if (d.detail.iv) {
					uni.login({
						provider: 'weixin',
						success: async (data) => {
							console.log(data)
							let res = await this.api.userwxlogins({
								code: data.code,
								encryptedData: d.detail.encryptedData,
								iv: d.detail.iv,
							})
							this.phonetitle = res.data
						}
					})
				}
			},
			bindblur(e) {
				console.log(e, 11)
				this.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				console.log(e, 22)
				this.nickName = e.detail.value; // 获取微信昵称
			},
			// uploadImg() {
			// 	let _this = this
			// 	uni.chooseImage({
			// 		crop: {
			// 			width: 200,
			// 			height: 200
			// 		},
			// 		success: (chooseImageRes) => {
			// 			const tempFilePaths = chooseImageRes.tempFilePaths;
			// 			uni.uploadFile({
			// 				url: uni.conf.baseUrl + '/common/upload',
			// 				filePath: tempFilePaths[0],
			// 				header: {
			// 					environment: 'app',
			// 					type: 'android',
			// 					version: '1.7.3',
			// 				},
			// 				name: "file",
			// 				formData: {
			// 					file: chooseImageRes.tempFiles[0],
			// 				},
			// 				success: (uploadFileRes) => {
			// 					let {
			// 						data
			// 					} = JSON.parse(uploadFileRes.data)
			// 					this.userHeadImg = data
			// 				},
			// 			});
			// 		},
			// 	})
			// },
			uploadImg(e) {
				const {
					avatarUrl
				} = e.detail
				console.log(e)
				console.log(e.detail)
				// this.userHeadImg = avatarUrl
				uni.uploadFile({
					url: 'https://wxcashiertest.sxczgkj.cn/cashierService/common/upload',
					// url: uni.conf.baseUrl + '/common/upload',

					filePath: avatarUrl,
					header: {
						environment: 'app',
						type: 'android',
						version: '1.7.3',
					},
					name: "file",
					formData: {
						file: avatarUrl,
					},
					success: (uploadFileRes) => {
						let {
							data
						} = JSON.parse(uploadFileRes.data)
						this.userHeadImg = data
					},
				});
			},
			async sumbit() {
				let res = await this.api.upUserInfo({
					headImg: this.userHeadImg,
					nickName: this.nickName,
					telephone: this.phonetitle == '请授权手机号' ? '' : this.phonetitle
				})
				if (res.code == 0) {
					uni.navigateBack()
				}
			}
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
	};
</script>

<style scoped lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		.onecontent {
			padding: 0 28rpx;
			width: 100%;
			height: 446rpx;
			background: linear-gradient(180deg, #FFD158 0%, #F9F9F9 100%);

			.onecontentbox {
				position: relative;
				margin-top: 116rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 75rpx 32rpx 0rpx 32rpx;

				.onecontentboximage {
					position: absolute;
					left: 50%;
					top: -60rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					transform: translateX(-50%);
				}

				.onecontentboxitem {
					padding: 24rpx 0;

					.onecontentboxitemtext {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}

					.onecontentboxiteminput {
						text-align: right;
						flex: auto;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						height: 100%;
					}

					.buttonstyle {
						.buttonstyle:after {
							border: none;
						}
					}
				}
			}

			.onecontentboxitemnamber {
				margin-top: 84rpx;
				text-align: center;
				width: 100%;
				padding: 20rpx 0;
				background: #FFD158;
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
			}
		}
	}

	.btn {
		width: 180rpx;
		height: 180rpx;
		border-radius: 100%;
		padding: 0;

		>view {
			border-radius: 100%;
		}
	}
</style>
<style>
	.buttonstyle:after {
		border: none;
	}
</style>