moxuan_takeaway_shanghu/pages/my/userinfo.vue

<template>
	<view>
		<view class="usermain">
			<view class="usermain-item">
				<view>头像</view>
				<view @click="uploadImg()">
					<image src="../../static/logo.png" v-if="avatar == null" mode="" style="width: 111rpx; height: 111rpx; border-radius: 50%"></image>
					<image v-else :src="avatar" mode="" style="width: 111rpx; height: 111rpx; border-radius: 50%"></image>
				</view>
			</view>
			<view class="usermain-item item-padding">
				<view>用户名</view>
				<view>
					<view class="cu-form-group">
						<input v-model="userName" placeholder="请输入用户名" />
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding">
				<view>年龄</view>
				<view>
					<view class="cu-form-group">
						<input v-model="age" />
					</view>
				</view>
			</view>
			<!-- <view class="usermain-item item-padding">
				<view  >姓名</view>
				<view class="cu-form-group">
					<input    v-model="realName" placeholder="请填写您的真实姓名" />
				</view>
			</view> -->

			<view class="usermain-item item-padding">
				<view>手机</view>
				<view>
					<view class="cu-form-group">
						<input v-model="phone" placeholder="请输入联系电话" />
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding">
				<view>性别</view>
				<view>
					<view class="cu-form-group">
						<u-radio-group v-model="sex">
							<u-radio shape="circle" active-color="#2FB57A" :name="1">男</u-radio>
							<u-radio shape="circle" active-color="#2FB57A" :name="2">女</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="usermain-btn" @click="messagebtn()">保存</view>
		</view>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
import configdata from '../../common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
export default {
	data() {
		return {
			phone: '',
			avatar: '../../static/logo.png',
			userName: '',
			nickName: '',
			userId: '',
			realName: '',
			weChatId: '',
			password: '',
			platform: '',
			createTime: '',
			money: '',
			jiFen: '',
			status: '',
			zhiFuBao: '',
			zhiFuBaoName: '',
			sex: 1,
			age: 0,
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth
		}
	},
	onLoad(e) {
		this.getUserInfo()
		// this.avatar = uni.getStorageSync('avatar')
	},
	methods: {
		goMyAddress() {
			uni.navigateTo({
				url: '../jifen/myaddress'
			})
		},
		uploadImg() {
			let token = uni.getStorageSync('token')

			if (!token) {
				this.goLoginInfo()
				return
			}
			let that = this
			var url = null
			uni.showActionSheet({
				// itemList按钮的文字接受的是数组
				itemList: ['查看头像', '从相册选择图片'],
				success(e) {
					var index = e.tapIndex
					if (index === 0) {
						// 用户点击了预览当前图片
						// 可以自己实现当前头像链接的读取
						let url = that.avatar
						let arr = []
						arr.push(url)
						uni.previewImage({
							// 预览功能图片也必须是数组的
							urls: arr
						})
					} else if (index === 1) {
						uni.chooseImage({
							count: 1,
							sourceType: ['album'],
							success: (res) => {
								for (let i = 0; i < res.tempFiles.length; i++) {
									//这里的id和页面中写的html代码的canvas的id要一致
									let canvasId = 'zipCanvas'
									//原图的路径
									let imagePath = res.tempFiles[i].path
									//大小限制
									let limitSize = 1024 * 2
									//初始绘画区域是画布自身的宽度也就是屏幕宽度
									let drawWidth = uni.getSystemInfoSync().windowWidth
									let that = this
									getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
										uni.showLoading({
											title: '上传中'
										})
										let token = uni.getStorageSync('shopToken')

										uni.uploadFile({
											url: that.config('APIHOST1') + '/admin/new-file/upload',
											filePath: resPath,
											header: {
												token: token
											},
											name: 'file',
											success: (uploadFileRes) => {
												url = JSON.parse(uploadFileRes.data)
												that.avatar = url.data
												uni.hideLoading()
											},
											fail: () => {
												uni.showToast({
													title: '上传失败',
													icon: 'error'
												})
											}
										})
									})
								}
							}
						})
					}
				}
			})
		},
		config: function (name) {
			var info = null
			if (name) {
				var name2 = name.split('.') //字符分割
				if (name2.length > 1) {
					info = configdata[name2[0]][name2[1]] || null
				} else {
					info = configdata[name] || null
				}
				if (info == null) {
					let web_config = cache.get('web_config')
					if (web_config) {
						if (name2.length > 1) {
							info = web_config[name2[0]][name2[1]] || null
						} else {
							info = web_config[name] || null
						}
					}
				}
			}
			return info
		},
		getUserInfo() {
			this.$Request.get('/sys/user/info').then((res) => {
				if (res.code == 0) {
					this.$queue.setData('avatar', res.user.userEntity.avatar)
					this.$queue.setData('userId', res.user.userId)
					this.$queue.setData('userName', res.user.userEntity.userName)
					this.$queue.setData('phone', res.user.userEntity.phone)
					this.$queue.setData('age', res.user.userEntity.age)
					this.sex = res.user.userEntity.sex
					this.age = res.user.userEntity.age
					this.phone = res.user.userEntity.phone
					this.avatar = res.user.userEntity.avatar
					this.userName = res.user.userEntity.userName
					if (this.userName == null) {
						this.userName = res.user.userEntity.nickName
					} else {
						this.userName = res.user.userEntity.userName
					}
				}
				uni.hideLoading()
			})
		},
		// 保存
		messagebtn() {
			let that = this
			if (!that.userName) {
				// this.$queue.showToast('用户名不能为空');
				uni.showToast({
					title: '用户名不能为空',
					icon: 'none'
				})
			} else if (!that.phone) {
				// this.$queue.showToast('用户名不能为空');
				uni.showToast({
					title: '联系电话不能为空',
					icon: 'none'
				})
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '确定保存信息',
					success: (e) => {
						if (e.confirm) {
							that.$Request
								.postJson('/shop/shopmoney/updateUser', {
									userName: that.userName,
									avatar: that.avatar,
									phone: that.phone,
									sex: that.sex,
									age: that.age
								})
								.then((res) => {
									if (res.code === 0) {
										uni.showToast({
											title: '保存成功',
											icon: 'none'
										})
										setTimeout(function () {
											uni.navigateBack()
										}, 1000)
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									}
								})
						}
					}
				})
			}
		}
	}
	// userphone(){
	// 	uni.navigateTo({
	// 		url:'/pages/my/userphone'
	// 	})
	// }
}
</script>

<style>
page {
	/* background: #1c1b20; */
}

.usermain {
	background: #ffffff;
	/* color: #fff; */
}

.usermain-item {
	display: flex;
	align-items: center;
	margin: 0 40rpx;
	padding: 10rpx 0;
	justify-content: space-between;
	border-bottom: 1rpx solid #e5e5e5;
	/* border-bottom: 2rpx solid #f2f2f2; */
}

.usermain-item.item-padding {
	/* padding: 0; */
}

.cu-form-group {
	padding: 0;
	background: #ffffff;
	text-align: right;
}

.cu-form-group input {
	background: #ffffff;
	font-size: 28rpx;
	/* color: #fff; */
}

.footer-btn {
	margin-top: 150rpx;
}

.footer-btn .usermain-btn {
	/* color: #FFFFFF; */
	background: #fcd202;
	text-align: center;
	width: 450rpx;
	height: 80rpx;
	font-size: 28rpx;
	line-height: 80rpx;
	margin: 0 auto;
	border-radius: 40rpx;
}
</style>