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="userName" type="nickname"  placeholder="请输入昵称">
				</view>
				<view class="onecontentboxitem flex-between" style="border-top: 1rpx dotted  #333333;">
					<view class="onecontentboxitemtext">
						手机号
					</view>
					<input class="onecontentboxiteminput" disabled v-model="userInfo.telephone" 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
		},
		onLoad() {
			this.userInfo = uni.cache.get('userInfo')
			this.userName = this.userInfo.nickName
			this.userHeadImg = this.userInfo.headImg
		},
		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: "",
				userName: ''
			};
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacitys = false
			} else {
				this.opacitys = true
			}
		},
		methods: {
			// 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.userName
				})
				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%;
					}
				}
			}

			.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>