yanzong_qianduan/pages/news1/setting.vue

<template>
	<view class="setting">
		<view class="box">
			<view class="box-avter" style="padding-bottom: 24rpx;">
				<view class="name-text">
					头像
				</view>
				<image @click="chooseImage()" :src="info.avatar_url ? info.avatar_url : '/static/default-logo.png'"
					class="image_logo"></image>
			</view>
			<view class="box-avter conten-height">
				<view class="name-text">
					昵称
				</view>
				<input type="text" v-model="info.nick_name" placeholder="请输入用户昵称">
			</view>
			<view class="box-avter conten-height">
				<view class="name-text">
					性别
				</view>
				<picker style="width: 400rpx;text-align: right;" :value="genderIndex" :range="gender" :range-key="'name'"
					@change="bindPickerChange">
					<view class="lx" :style="genderIndex == -1 ? 'color:#999' : 'color:#333'">
						{{ genderIndex == -1 ? '请选择' : gender[genderIndex].name }}
						<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
					</view>
				</picker>
			</view>
			<view class="box-avter conten-height" style="border: none;">
				<view class="name-text">
					手机号
				</view>
				<input type="number" v-model="info.mobile" placeholder="请输入手机号">

				<!-- <view>
					<text>{{ info.mobile }}</text>
					<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
				</view>  -->
			</view>
		</view>
		<view class="box">
			<view class="box-avter conten-height" @click="bindPickerInvoice">
				<view class="name-text">
					发票助手
				</view>
				<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
			</view>
			<view class="box-avter conten-height">
				<view class="name-text">
					清除缓存
				</view>
				<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
			</view>
			<view class="box-avter conten-height">
				<view class="name-text">
					隐私
				</view>
				<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
			</view>
			<view class="box-avter conten-height">
				<view class="name-text">
					关于
				</view>
				<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="box" style="padding: 0	40rpx;margin-bottom: 140rpx;" @click="onOut">
			<view class="box-avter conten-height" style="border: none;">
				<view class="name-text">
					注销账号
				</view>
			</view>
		</view>
		<view class="bottomBtn">
			<button class="submitBtn" @click="sureSubmit">确认修改</button>
		</view>
		
	</view>
</template>

<script>
import * as UploadApi from '@/api/upload'
import * as userApi from '@/api/user'
export default {
	data() {
		return {
			genderIndex: -1,
			gender: [{
				name: '男',
				id: 0
			}, {
				name: '女',
				id: 1
			},],
			info: '',
			imageList: [],
			avatar_id: [],
			nick_name: ''
		};
	},
	onShow() { },
	onLoad(params) {
		console.log(uni.getStorageSync("userInfo"))
		this.info = uni.getStorageSync("userInfo")
		this.genderIndex = this.info.gender == '男' ? 0 : 1
	},
	methods: {
		sureSubmit() {
			let params = {
				nick_name: this.info.nick_name,
				avatar_id: this.avatar_id[0],
				gender: this.genderIndex == 0 ? 1 : 2
			}
			userApi.editUser(params)
				.then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 2000
						})
						uni.setStorageSync('userInfo', this.info)
					} else {
						uni.showToast({
							title: '修改失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
				.finally()
		},
		// 选择图片
		chooseImage() {
			const app = this
			app.imageList = []
			const oldImageList = app.imageList
			// 选择图片
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success({
					tempFiles
				}) {
					app.info.avatar_url = tempFiles[0].path
					app.imageList = oldImageList.concat(tempFiles)
					app.uploadFile()
				}
			});
		},

		// 上传图片
		uploadFile() {
			const app = this
			const {
				imageList
			} = app
			// 批量上传
			return new Promise((resolve, reject) => {
				if (imageList.length > 0) {
					UploadApi.image(imageList)
						.then(fileIds => {
							app.avatar_id = fileIds;
							resolve(fileIds)
						})
						.catch(reject)
				} else {
					resolve()
				}
			})
		},
		onOut() {
			uni.showModal({
				title: '您是否要注销账号？',
				content: '',
				success(o) {
					if (o.confirm) {
						uni.removeStorage('token');
						uni.removeStorage('userInfo');
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				}
			});
		},
		bindPickerInvoice() {
			uni.navigateTo({
				url: "/pages/invoice/index"
			})
		},
		bindPickerChange(e) {
			this.genderIndex = e.detail.value
		},
	}
}
</script>

<style>
page {
	width: 100%;
}

.setting {
	height: 100%;
	margin-top: 20rpx;
	padding-bottom: 50rpx;
}

.box {
	background: #FFF;
	padding: 24rpx 36rpx;
	margin-top: 20rpx;
}

.more {
	width: 28rpx;
	height: 28rpx;
}

.box-avter { 
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #f2f2f2;
}

.conten-height {
	height: 100rpx;
}

.conten-height text {
	font-size: 35rpx;
	color: #333;
}

.box-avter input {
	height: 100%;
	color: #333;
	width: 400rpx;
	text-align: right;
	font-size: 28rpx;
}

.name-text {
	font-size: 28rpx;
	color: #303030;
}

.image_logo {
	width: 114rpx;
	height: 114rpx;
	border-radius: 50%;
}
.bottomBtn{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 140upx;
	z-index: 88;
	background: #fff;
}
.submitBtn { 
	height: 88upx; 
	line-height: 88upx;
	background: #FFAAA4;
	background: #FE483B;
	border-radius: 36px; 
	font-size: 28upx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	margin: 30rpx 58rpx;
}
</style>