xiangqin/pages/profile/set.vue

<template>
	<view class="userinfo">
		<view class="item-box u-flex u-col-center u-row-between">
			<text class="text1">头像</text>
			<view class="" >
				<image :src="userInfo.headimg" mode="" @tap="changeHeadImg"></image>
			</view>
		</view>
		<view class="item-box u-flex u-col-center u-row-between">
			<text class="text1" style="flex: 1;">昵称</text>
			<view class=" u-flex" @click="show=true">
				{{userInfo.nickname}}<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="item-box u-flex u-col-center u-row-between"  >
			<text class="text1" style="flex: 1;">会员号</text>
			<view class=" u-flex">
				{{userInfo.vip_number}}
			</view>
		</view>
		<!-- <view class="item-box u-flex u-col-center u-row-between" @click="tobangding" v-show="!userInfo.phone">
			<text class="text1" style="flex: 1;">手机号</text>
			<view class=" u-flex">
				去绑定<u-icon name="arrow-right"></u-icon>
			</view>
		</view> -->
		<!-- <view class="item-box u-flex u-col-center u-row-between"  @click="tochange" v-show="userInfo.phone">
			<text class="text1" style="flex: 1;">手机号</text>
			<view class=" u-flex" style="color: #888888;">
				{{userInfo.phone}}<u-icon name="arrow-right"></u-icon>
			</view>
		</view> -->
		<view class="item-box u-flex u-col-center u-row-between" @click="tosuqiu">
			<text class="text1" style="flex: 1;">个人诉求</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="item-box u-flex u-col-center u-row-between">
			<text class="text1" style="flex: 1;" @click="tozhuxiao">账号注销</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<u-popup :show="show" @close="show=false" mode="center" :round="40">
					<view style="width: 650rpx;
		background: #FFFFFF;
		border-radius: 20rpx;padding: 80rpx 86rpx;color: #222;box-sizing: border-box;" class="u-flex-col">
						
						<view class="" style="margin: 0 auto 50rpx;border-radius: 5rpx;border: 2rpx solid #A890FE;padding: 10rpx 20rpx;">
							<input type="text" placeholder="请输入新昵称" v-model="newName">
						</view>
						<u-button text="确认修改" shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)"
							@click="submit"></u-button>
					</view>
				</u-popup>
		<!-- <view class="save" @tap="storage">
			保存
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newName:'',
				show:false,
				userInfo: {},
				ossdata: {}
			}
		},
		onLoad(option) {
			// this.getOssData()
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			submit(){
				if(!this.newName){
					this.$u.toast('请输入新昵称')
					return
				}
				uni.$u.http.post('/api/user/user_nickname',{nickname:this.newName}).then(res => {
					if(res.code==1){
						this.$u.toast(res.msg)
						this.newName=''
						this.show=false
						this.getInfo()
				
					}
				})
			},
			getInfo(){
				uni.$u.http.post('/api/user/userinfo').then(res => {
					if(res.code==1){
						this.userInfo=res.data

					}
				})
			},
			tochange(){
				uni.navigateTo({
					url:'./changephone'
				})
			},
			tobangding(){
				uni.navigateTo({
					url:'./bangding'
				})
			},
			tozhuxiao(){
				uni.navigateTo({
					url:'./zhuxiao'
				})
			},
			tosuqiu(){
				uni.navigateTo({
					url:'./suqiu'
				})
			},
			storage(){
				this.request({
					url:'/api/Member/edit_member_info',
					methods:'POST',
					data:{
						headimg:this.userInfo.headImg,
						name:this.userInfo.nickName,
						phone:this.userInfo.phone
					}
				}).then(res=>{
					if(res.code==1){
						this.$u.toast(res.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
			changeHeadImg() {
				var that=this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$url+'/api/Publics/uploadLocality', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							
							success: (uploadFileRes) => {
								var url=JSON.parse(uploadFileRes.data).data.url
								uni.$u.http.post('/api/user/user_headimg',{headimg:url}).then(res => {
									if(res.code==1){
										this.getInfo()
								
									}
								})
							}
						});
					}
				});
				// uni.chooseImage({

				// 	count: 1,

				// 	success: (img) => {

				// 		var key = "image/" + new Date().getTime() + Math.floor(Math.random() * 150) + '.png'

				// 		uni.uploadFile({

				// 			url: this.ossdata.host, //输入你的bucketname.endpoint

				// 			filePath: img.tempFilePaths[0],

				// 			name: 'file',

				// 			formData: {

				// 				key: key,

				// 				policy: this.ossdata.policy, // 输入你获取的的policy

				// 				OSSAccessKeyId: this.ossdata.OSSAccessKeyId, // 输入你的AccessKeyId

				// 				success_action_status: '200', // 让服务端返回200,不然，默认会返回204

				// 				signature: this.ossdata.Signature, // 输入你获取的的signature

				// 			},

				// 			success: (res) => {
				// 				if (res.statusCode == 200) {
				// 					this.userInfo.headImg = this.ossdata.host + '/' + key
				// 				}

				// 			},

				// 			fail: (err) => {

				// 				console.log(err);

				// 			}

				// 		})

				// 	}

				// })
			},
			getOssData() {
				this.request({
					url: '/api/Upload/getSignedUrl'
				}).then(res => {
					this.ossdata = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.userinfo {
		min-height: 100vh;
		background-color: rgba(248, 248, 248, 1);

		.save {
			width: 660rpx;
			height: 96rpx;
			background: #D85340;
			opacity: 1;
			border-radius: 16rpx;
			margin: 108rpx auto;
			text-align: center;
			line-height: 96rpx;
			font-size: 34rpx;
			font-family: SF Pro;
			font-weight: 500;
			color: #FFFFFF;
		}

		.item-box {
			background-color: #fff;
			padding: 30rpx 36rpx;

			.text1 {
				font-size: 28rpx;
				font-family: SF Pro;
				font-weight: 500;
				color: #333333;
			}

			image {
				width: 116rpx;
				height: 116rpx;
				border-radius: 100rpx;
			}

			input {
				flex: 1;
				text-align: right;
			}
		}
	}
</style>