cbz/page_shop/pages/setting/personal.vue

<template>
	<view class="content">
		<view class="cell-group">
			<view class="hflex acenter jbetween cell" @click="chooseImg">
				<view class="left">头像</view>
				<view class="hflex acenter">
					<image :src="user.headimg" mode="aspectFill" class="avatar"></image>
					<u-icon name="arrow-right" color="#000" size="10"></u-icon>
				</view>
			</view>
			<view class="hflex acenter jbetween cell" @click="setName">
				<view class="left">昵称</view>
				<view class="hflex acenter">
					<view class="right">{{user.nickname}}</view>
					<u-icon name="arrow-right" color="#000" size="10"></u-icon>
				</view>
			</view>
			<view class="hflex acenter jbetween cell" @click="setSex">
				<view class="left">性别</view>
				<view class="hflex acenter">
					<view class="right">{{user.base_sex?user.base_sex:''}}</view>
					<u-icon name="arrow-right" color="#000" size="10"></u-icon>
				</view>
			</view>
		</view>
		<view class="cell-group">
			<view class="hflex acenter jbetween cell" @click="toReal">
				<view class="left">实名认证</view>
				<view class="hflex acenter">
					<view class="red" v-if="user.is_auth == 0"></view>
					<view class="right">{{user.is_auth?'已实名认证':'未实名认证'}}</view>
					<u-icon name="arrow-right" color="#000" size="10"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				user: {}
			}
		},
		onLoad() {
			that = this
			
		},
		onShow() {
			that.getUser() 
		},
		methods: {
			// 获取个人信息
			getUser() {
				$api.req({
					url: '/data/api.auth.Center/get',
					method: 'POST'
				}, function(res) {
					if(res.code == 1) {
						that.user = res.data
					}
				})
			},
			// 选择头像
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: $api.config.baseUrl + '/data/api.auth.Center/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								'api-token': uni.getStorageSync('token').token?uni.getStorageSync('token').token:'',
								'api-name': 'wxapp'
							},
							formData: {
								'user': 'test'
							},
							success: (res) => {
								const data = JSON.parse(res.data)
								if (data.code == 1) {
									that.user.headimg = data.data.url
									$api.req({
										url: '/data/api.auth.Center/set',
										method: 'POST',
										data:{
											headimg: that.user.headimg,
										}
									},function(res) {
										console.log(res);
										let options = {
											avatarurl: that.user.headimg,
										}
										uni.WebIM.conn.updateOwnUserInfo(options).then((res) => {
										    console.log(res)
										})
										$api.info(res.info)
									})
								}
							}
						});
					}
				});
			},
			// 修改
			setName() {
				$api.jump('/page_shop/pages/setting/bindeMail?type=username')
			},
			setSex() {
				$api.jump('/page_shop/pages/setting/bindeMail?type=sex')
			},
			// 去实名认证
			toReal() {
				if(that.user.is_auth == 1) {
					$api.jump('/page_shop/pages/setting/realname')
				} else {
					url = '/page_shop/pages/setting/webview?url=' + encodeURIComponent('https://ship.shipcc.cn/h5/#/?token=' + uni.getStorageSync('token').token)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f5f5f5;
		.cell-group {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.cell {
				box-sizing: border-box;
				padding: 36rpx 0;
				border-bottom: 1rpx solid #f5f5f5;
				.left {
					font-size: 30rpx;
					color: #222;
				}
				.right {
					padding: 0 5rpx;
					font-size: 30rpx;
					color: #444;
				}
				.red {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #fb3e32;
				}
				.avatar {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}
			}
			.button {
				font-size: 36rpx;
				color: #506dff;
				padding: 20rpx 0;
			}
		}
	}
</style>