youngee_b_api/pages/login/userinfo.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view class="containar">
			<view class="avatarUrl">
				<view>
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
						style="width: 200rpx;height: 200rpx;padding: 0;">
						<image :src="avatarUrl" class="refreshIcon"></image>
					</button>
				</view>
			</view>
			<view class="nickname">
				<view>昵称：</view>
				<view>
					<input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
						@input="bindinput" />
				</view>
			</view>

			<button class="btn1" @click="submitForm()">保存</button>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
	import getPolicyEncode from '@/components/obs/getPolicy.js';
	import getSignature from '@/components/obs/GetSignature.js';
	export default {
		components: {
			mvBar,
			htzImageUpload,
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickName: '',
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "个人信息",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "/pages/mycenter/mycenter",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		onShow() {
			this.nickName = uni.getStorageSync('nickName');
			this.avatarUrl = uni.getStorageSync('avatarUrl');
		},
		methods: {
			bindblur(e) {
				this.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
			},
			onChooseAvatar(e) {
				// console.log("111", e)
				// return
				let {
					avatarUrl
				} = e.detail;
				this.store = 'talent_upload/avatar/' + this.guid() + '.png'
				this.imgUpload(avatarUrl);
			},
			async submitForm() {
				if (this.nickName === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入昵称'
					})
					return false;
				}
				uni.setStorageSync('avatarUrl', this.avatarUrl);
				uni.setStorageSync('nickName', this.nickName);
				// 更新数据库中昵称
				await this.$https.post('/youngee/c/t/p/update-talent-info', {
						talent_wx_nickname: this.nickName,
						avatar: this.avatarUrl
					})
					.then(res => {
						console.log(res)
					})
				uni.navigateBack()
			},
			imgUpload(tempFilePath) {
				uni.showLoading({
					title: '加载中'
				});
				let that = this
				console.log('imgUpload', tempFilePath)
				let config = {
					AccessKeyId: 'IVW21DTGIIUBBAGXKK0Y', //AK
					SecretKey: 'Y01nEQNcLOATMw7uJwrk3yOdQZ2fqLhSnXcOKVDE', //SK
					EndPoint: 'https://horastar.obs.cn-east-3.myhuaweicloud.com', //上传文件的路径
				};
				let fileName = this.store; //指定上传到OBS桶中的对象名
				let OBSPolicy = { //设定policy内容
					"expiration": "2089-12-31T12:00:00.000Z",
					"conditions": [{
							"bucket": "horastar"
						},
						{
							'key': fileName
						}
					]
				}

				let policyEncoded = getPolicyEncode(OBSPolicy); //计算policy编码值
				let signature = getSignature(policyEncoded, config.SecretKey); //计算signature 
				uni.uploadFile({
					//url: config.EndPoint,
					url: config.EndPoint,
					filePath: tempFilePath,
					name: 'file',

					formData: {
						'AccessKeyID': config.AccessKeyId,
						'policy': policyEncoded,
						'signature': signature,
						'key': fileName,
					},

					success: function(res) {
						console.log(res.statusCode); //打印响应状态码
						if (res.statusCode == '204') {
							// that.imageData.push(config.EndPoint + '/' + fileName);
							console.log('上传图片成功', res)
							let obs_url = config.EndPoint + '/' + fileName; //用你自己的 bucket 名替换星号
							console.log(obs_url)
							that.avatarUrl = obs_url
							// uni.showToast({
							// 	title: '上传成功',
							// 	icon: '成功'
							// });
						} else {
							console.log('上传图片失败', res)
							uni.showToast({
								title: '上传失败',
								icon: '失败'
							});
						}
					},
					fail: function(e) {
						console.log(e);
						uni.showToast({
							title: '上传失败22222',
							icon: '失败'
						});
					}
				})
				uni.hideLoading();
			},
			guid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);

					return v.toString(16);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn1 {
		margin: 30rpx;
		font-size: 35rpx;
		color: #000;
		background-color: #F0D232;
		border: none;
		border-radius: 0;
	}

	.containar {
		display: flex;
		flex-flow: column;
	}

	.avatarUrl {
		display: flex;
		align-items: center;
		justify-content: center;
		// justify-content: space-between;
	}

	.nickname {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 50rpx;
		margin: 30rpx 0rpx;
		border-bottom: 1rpx solid #999999;
		border-top: 1rpx solid #999999;
	}

	.refreshIcon {
		width: 200rpx;
		height: 200rpx;
	}
</style>