hs_hzl_uniapp_ml/pages/user/settings/swiper-page.vue

<template>
	<view class="updateStyle">
		<view>
			<view>
				<view>
					<u--text text="设置头像" size="20"></u--text>
					<u--text style="padding: 10px;" color="#b9b9b9" text="请上传正方形图片" size="12"></u--text>
				</view>
				<view class="uploadImgView">
					<u-upload :fileList="fileList" @afterRead="afterRead" name="1" :maxCount="1" width='100'
						height='100' deletable uploadText="请上传正方形图片" :capture="['album']">
						<image :src="this.$BASE_URL + defaultAvatarSrc" style="width:100px;height:100px;">
						</image>
					</u-upload>
				</view>
				<!-- <view class="subBotton">
					<u-button text="保存"></u-button>
				</view> -->
			</view>
		</view>
		<view class="xgPwdStyle">
			<view>
				<view>
					<u--text text="修改密码" size="20"></u--text>
				</view>
				<view style="margin-top: 20px;">
					<u--input class="pwdInput" placeholder="旧密码" type="password" v-model="from.oldPassword"
						:maxlength="8" border="surround"></u--input>
					<u--input class="pwdInput" placeholder="新密码" type="password" v-model="from.newPassword"
						:maxlength="8" border="surround"></u--input>
					<u--input class="pwdInput" placeholder="确认新密码" type="password" v-model="newPassword1" :maxlength="8"
						border="surround">
					</u--input>
				</view>
				<view class="subBotton">
					<u-button color="rgb(55,186,189)" text="修改" @click="doUpdatePwd()"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import subscription from '../../../pageA/msg/subscription.vue'
	export default {
		components: {
			subscription
		},
		data() {
			return {
				scrollable: true,
				fileList: [],
				from: {
					oldPassword: '',
					newPassword: ''
				},
				newPassword1: '',
				defaultAvatarSrc: ''
			}
		},
		created() {
			//console.log("create")
			this.defaultAvatarSrc = uni.getStorageSync('userInfo').avatar
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					let item = this.fileList[0]
					this.fileList.splice(0, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
				}
				//console.log(this.fileList)
				uni.getImageInfo({
					src: lists[0].url,
					success: (res) => {
						//console.log(res, "获取图片信息")
						uni.showToast({
							duration: 1500,
							icon: 'checkmark',
							title: '头像已更新'
						});
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.showToast({
						duration: 1500,
						icon: 'none',
						title: this.$BASE_URL
					});
					let a = uni.uploadFile({
						url: this.$BASE_URL + '/system/user/profile/avatar',
						filePath: url,
						name: 'avatarfile',
						header: {
							Authorization: "Bearer " + uni.getStorageSync('token')
						},
						success: (res) => {
							resolve(res.imgUrl)
						}
					});
				})
			},
			async doUpdatePwd() {
				if (this.from.newPassword.length < 6) {
					uni.showToast({
						duration: 1500,
						icon: 'none',
						title: '新密码至少需要 6 位数'
					});
					return;
				}
				if (!this.from.newPassword === this.newPassword1) {
					uni.showToast({
						duration: 1500,
						icon: 'none',
						title: '2 次新密码不一致'
					});
					return;
				}
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/system/user/profile/updatePwd?oldPassword=' + this.from.oldPassword +
						"&newPassword=" + this.from.newPassword,
					method: 'put'
				});
				if (res.code === 200) {
					uni.showToast({
						duration: 1500,
						icon: 'checkmark',
						title: '密码已更新'
					});
					this.from = {}
					this.newPassword1 = ''
				}else{
					uni.showToast({
						duration: 1500,
						icon: 'none',
						title: res.msg
					});
				}
				uni.hideLoading()
			}
		}
	}
</script>

<style scoped>
	.uploadImgView {
		padding-top: 10px;
		margin: 0 auto;
		background-color: #efefef;
		padding: 10px;
		border-radius: 10px;
		width: 100px;
		height: 100px;
	}

	.updateStyle {
		padding: 20px;
	}

	.xgPwdStyle {
		margin-top: 30px;
	}

	.pwdInput {
		margin-bottom: 20px;
		width: 100%;
	}

	.subBotton {
		padding-top: 30px;
		margin: 0 auto;
		width: 150px;
	}
</style>