book-shop/pages-mine/pages/setting.vue

<template>
	<view class="page">
		<!-- 表单 -->
		<view class="form">
			<u-form label-position="left" :model="form" ref="form" label-width="180rpx">
				<u-form-item label="头像">
					<!--  @click="uploadAvatar" -->
					<view class="value avatarbox">
						<!-- <u-avatar style="height: 72rpx;" size="72" src="../../../static/user/1.png"></u-avatar> -->
						<button open-type="chooseAvatar" class="avatarBtn" @chooseavatar="onChooseavatar" >
							<u-avatar style="height: 72rpx;" size="72" :src="userInfo.avatar"></u-avatar>
							<!-- <u-icon :color="arrowColor" style="margin-left: 20rpx;" size="28" name="arrow-right"></u-icon> -->
						</button>
					</view>
				</u-form-item>
				<u-form-item label="昵称">
					<view class="value" @click="openUsernameModal">
						<text>{{ userInfo.nickname || '无' }}</text>
						<u-icon :color="arrowColor" style="margin-left: 20rpx;" size="28" name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="收货地址">
					<view class="value" @click="$u.route({ url: '/pages-mine/pages/address/list' })">
						<text>{{ '设置收货地址' }}</text>
						<u-icon :color="arrowColor" style="margin-left: 20rpx;" size="28" name="arrow-right"></u-icon>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<!-- 按钮 -->
		<view class="btn">
			<u-button type="primary" shape="circle" @click="logout"><text>退出登录</text></u-button>
		</view>
		
		<!-- modal -->
		<u-modal ref="showUsernameRef" v-model="showUsername" title="昵称修改" show-cancel-button :confirm-color="themeColor"  :async-close="true" @confirm="changeNickname">
			<view class="slot-content">
				<u-field label-width="60" placeholder="请输入昵称" clearable :border-bottom="false" v-model="edit.nickname" label="昵称" required></u-field>
			</view>
		</u-modal>

	</view>
</template>
<script>
import { hex_sha1 } from '@/utils/sha1.js'
import { objKeySort,naviBackEmit } from '@/utils/tools.js'
export default {
	data() {
		return {
			arrowColor: this.$appTheme.appThemeTextGrayColor,
			themeColor: this.$appTheme.appThemeColor,
			// 用户信息
			userInfo:{
				nickname: '',
				avatar: ''
			},
			edit:{
				nickname: '',
				avatar: ''
			},
			updateData:true,
			secret:'yrb1vdc2qc',
			// modal
			showUsername: false,
			// 默认回显
			
			username: '',
			signature: '',
			// 表单
			form: {},
			// 上传地址
			uploadUrl: ''
		};
	},
	onLoad(options) {
		this.getUserInfo();
	},
	methods: {
		getUserInfo(){
			this.$u.api.getUserBaseInfoAjax().then(({code,data}) => {
				console.log(data);
				if(code==1){
					this.userInfo = data;
					this.edit = {...data};
				}
			});
		},
		// 上传头像
		uploadAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success(res) {
					console.log(JSON.stringify(res.tempFilePaths));
				}
			});
		},
		
		// 修改昵称
		openUsernameModal() {
			this.showUsername = true;
		},
		// 设置微信头像
		onChooseavatar(e) {
			console.log(e);
			let that = this;
			this.edit.avatar = e.detail.avatarUrl;
			let formData = {
				target: "oss",
				type: 'image',
			}
			let sign = hex_sha1(that.secret + objKeySort(formData));
			console.log(sign);
			uni.showLoading({
				title: '头像上传中'
			})
			uni.uploadFile({
				url: this.$env.apiUrl + "/api/client/index/upload",
				filePath: e.detail.avatarUrl,
				name: 'file',
				formData:{
					...formData,
					file:e.detail.avatarUrl,
				},
				header: {
					'Content-Type': 'multipart/form-data',
					sign,
				},
				success(res) {
					let response = JSON.parse(res.data);
					if (response.code == 1) {
						that.edit.avatar = response.data.full_url;
						// uni.$u.toast('上传成功！');
						that.submit();
					}else{
						uni.$u.toast('上传失败,请稍后重试')
					}
				},
				fail(error) {
					uni.$u.toast('上传失败,请稍后重试')
					console.log(' 上传文件失败', error)
				},
			})
		},
		// 退出登录
		logout() {
			uni.showModal({
				title: '提示',
				content: '是否退出当前账号？',
				confirmColor: this.themeColor,
				success(res) {
					if (res.confirm) {
						uni.removeStorageSync('token');
						uni.navigateBack({
							delta: 1
						});
					}
				}
			});
		},
		changeNickname(){
			if (!this.edit.nickname) {
				this.$refs.showUsernameRef.clearLoading();
				uni.$u.toast('请输入昵称');
				return false; 
			}
			this.submit();
		},
		submit() {
			this.$nextTick(() => {
				// if (!this.edit.avatar && !this.edit.nickname) {
				// 	return uni.$u.toast('请设置头像和昵称')
				// }
				let param = {...this.edit}
				this.$u.api.setUserBaseInfoAjax(param).then(({code,data}) => {
					if (code == 1) {
						uni.$u.toast('设置成功');
						this.showUsername = false;
						this.userInfo = {...param};
						setTimeout(() => {
							// naviBackEmit('getUserInfo')
							uni.$emit("getUserInfo");
						}, 1000)
					}
				})
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding: 24rpx 30rpx;
	background-color: $app-theme-bg-color;
	.form {
		.value {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: $app-theme-card-gray-deep-color;
		}
	}
}
.btn {
	padding: 60rpx 0rpx;
}
.slot-content {
	padding: 30rpx;
}
.avatarbox{
	
}
.avatarBtn{
	border:none;
	background-color: transparent;
	display: inline-flex;
	align-items: center;
	padding: 0;
	margin: 0;
	width:75rpx;
	height:75rpx;
	border-radius: 50%;
}
</style>