登录注册、个人信息增加

pages/me/userInfo.vue

@@ -0,0 +1,179 @@
+<template>
+	<view class="container">
+		<up-cell-group>
+			<up-cell title="头像">
+				<template #value>
+					<image :src="userInfo.avatar?userInfo.avatar:'../../static/default/avatar.png'" mode="" @click="uploadImg"
+						style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
+				</template>
+			</up-cell>
+			<up-cell title="用户名">
+				<template #value>
+					<input v-model="userInfo.userName" align="right" placeholder="请输入用户名" />
+				</template>
+			</up-cell>
+			<up-cell title="手机">
+				<template #value>
+					<input :disabled="userInfo.phone?true:false" v-model="userInfo.phone" align="right" placeholder="请输入联系电话" />
+				</template>
+			</up-cell>
+		</up-cell-group>
+		<view class="save" @click="save">保存</view>
+	</view>
+</template>
+
+<script>
+	import config from '@/commons/config.js';
+	import http from '@/http/http.js';
+	export default {
+		data() {
+			return{
+				userInfo: {
+					avatar: '',
+					userName: '',
+					phone: '',
+				}
+			}
+		},
+		onLoad( options ) {
+			this.getUserInfo()
+		},
+		
+		methods: {
+			/**
+			 * 获取个人信息
+			 */
+			getUserInfo() {
+				http.request({
+					url:'app/user/selectUserById',
+				}).then(res => {
+					this.userInfo = res.data
+				})
+			},
+			
+			/**
+			 * 上次头像
+			 */
+			uploadImg() {
+				let that = this;
+				var url = null;
+				uni.showActionSheet({
+					// itemList按钮的文字接受的是数组
+					itemList: ["查看头像", "从相册选择图片"],
+					success(e) {
+						var index = e.tapIndex
+						console.log(index)
+						if (index === 0) {
+							// 用户点击了预览当前图片
+							// 可以自己实现当前头像链接的读取
+							let url = that.headImg;
+							let arr = []
+							arr.push(url)
+							uni.previewImage({
+								// 预览功能图片也必须是数组的
+								urls: arr
+							})
+						} else if (index === 1) {
+							uni.chooseImage({
+								count: 1, //默认9
+								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+								sourceType: ['album'], //从相册选择
+								success: function(res) {
+									uni.showLoading({
+										title: '上传中...'
+									});
+									uni.uploadFile({
+										url: config.baseApiUrl + 'alioss/upload',
+										filePath: res.tempFilePaths[0],
+										name: 'file',
+										success: uploadFileRes => {
+											url = JSON.parse(uploadFileRes.data);
+											console.log(url)
+											this.userInfo.avatar = url.data
+											uni.hideLoading();
+											
+										}
+									});
+								}
+							});
+						}
+					}
+				})
+			},
+			
+			/**
+			 * 保存
+			 */
+			save() {
+				if (!this.userInfo.userName) {
+					uni.showToast({
+						title: "用户名不能为空",
+						icon: "none"
+					})
+					return
+				}
+				if (!this.userInfo.phone) {
+					uni.showToast({
+						title: "手机号不能空",
+						icon: "none"
+					})
+					return
+				}
+				if (this.checkPhone(this.userInfo.phone) == false) {
+					uni.showToast({
+						title: "手机号格式不正确",
+						icon: "none"
+					})
+					return
+				}
+			
+				uni.showModal({
+					title: '温馨提示',
+					content: '确定保存信息',
+					confirmColor: '#ff7581',
+					success: e => {
+						if (e.confirm) {
+							http.request({
+								url:'app/user/updateUsers',
+								method: 'post',
+								data: {
+									userName: this.userInfo.userName,
+									avatar: this.userInfo.avatar,
+									phone: this.userInfo.phone,
+								}
+							}).then(res => {
+								uni.showToast({
+									title: '保存成功',
+									icon: "none"
+								})
+								setTimeout(function() {
+									uni.navigateBack()
+								}, 1000)
+							})
+							
+						}
+					}
+				});
+			},
+			//根据正则验证手机号是否正确包括校验长度
+			checkPhone(phone) {
+				return /^1[3456789]\d{9}$/.test(phone);
+			},
+		}
+	}
+</script>
+
+<style style="sass" scoped>
+	.save{
+		color: #FFFFFF;
+		background: #ff7581;
+		text-align: center;
+		width: 234px;
+		height: 41px;
+		font-size: 14px;
+		line-height: 41px;
+		margin: 0 auto;
+		border-radius: 20px;
+		margin-top: 78px;
+	}
+</style>