zh_order_food_xcx/pages-my/user-info.vue

<template>
	<view class="flex-common-css bgc-f">
		<Nav title="个人资料" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css">
			<view class="user-img-box b-rad-50">
				<button class="but-box" open-type="chooseAvatar" @chooseavatar='chooseavatar'></button>
				<image class="user-img b-rad-50" :src="userInfoData.head_img" mode="aspectFill"></image>
				<image class="set-iimg" src="@/static/img/my/pen.png" mode=""></image>
			</view>
			<view class="text-align-center" v-if="userInfoData.trace_status == 0 || userInfoData.trace_status == 2">
				{{userInfoData.trace_status == 0?'头像审核中，请耐心等待':userInfoData.trace_status == 2?'上传头像违规，请重新上传':''}}
			</view>
			<view class="item-info-box box-border-box">
				<view class="item-box mb-32 flex-justify-space box-border-box">
					<view class="item-left fs-32 fc-3">
						昵称
					</view>
					<view class="item-right align-items-center" @click="goToUrl(1)">
						<view class="fc-9198A2 fs-28 mr-6">
							{{userInfoData.nickname||''}}
						</view>
						<uni-icons color="#9198A2" type="right" size="20"></uni-icons>
					</view>
				</view>
				<view class="item-box mb-32 flex-justify-space box-border-box">
					<view class="item-left fs-32 fc-3">
						性别
					</view>
					<view class="item-right align-items-center" @click="goToUrl(2)">
						<view v-if="userInfoData.sex == 0" class="fc-9198A2 fs-28 mr-6">保密</view>
						<view v-else-if="userInfoData.sex == 1" class="fc-9198A2 fs-28 mr-6">男</view>
						<view v-else class="fc-9198A2 fs-28 mr-6">女</view>
						<uni-icons color="#9198A2" type="right" size="20"></uni-icons>
					</view>
				</view>
				<view class="item-box mb-32 flex-justify-space box-border-box">
					<view class="item-left fs-32 fc-3">
						更换手机号
					</view>
					<view class="item-right align-items-center" @click="goToUrl(3)">
						<view class="fc-9198A2 fs-28 mr-6">
							{{userInfoData.phone?userInfoData.phone:'去绑定'}}
						</view>
						<uni-icons color="#9198A2" type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		userInfo,
		userUpdate
	} from '@/api/member.js'
	import tools from '@/service/tools';
	import {
		upLoadingFileOss
	} from "@/service/upLoadingFile.js";
	import {
		commonApplet
	} from "@/api/common.js"
	export default {
		data() {
			return {
				userInfoData: {
					nickname: '',
					head_img: '',
					phone: '',
					sex: '',
					msg_count: '',
				},
				setType: 0
			};
		},
		onShow() {
			this.getUserInfo();
		},
		mounted() {
			this.commonApplet()
		},
		methods: {
			chooseavatar(e) {
				this.userUpdate(e.detail.avatarUrl)
				console.log(e);
			},
			commonApplet() {
				commonApplet().then((res) => {
					if (res.code == 1) {
						this.setType = res.data
						console.log(this.setType, '______________');
						this.$forceUpdate()
					}
				})
			},
			goToUrl(type) {
				if (type === 0) {
					if (this.userInfoData.trace_status != 0) {
						uni.chooseImage({
							count: 1,
							sizeType: ["compressed", "camera"],
							sourceType: ["album", "camera"],
							success: (res) => {
								res.tempFiles.forEach((file) => {
									this.uploadingFile(file);
								})
							}
						})
					}
				} else if (type === 1) {
					// 昵称
					uni.navigateTo({
						url: '/pages-my/set-user-name'
					})
				} else if (type === 2) {
					// 性别
					uni.navigateTo({
						url: '/pages-my/set-user-sex'
					})
				} else {
					// 更换手机号
					uni.navigateTo({
						url: '/pages-my/set-user-phone'
					})
				}
			},
			uploadingFile(file) {
				upLoadingFileOss(file.path).then((res) => {
					if (res) {
						this.userUpdate(res)
					} else {
						tools.error('图片上传失败')
					}
				})
			},
			userUpdate(img) {
				userUpdate({
					head_img: img
				}).then((res) => {
					if (res.code == 1) {
						tools.success(res.msg)
						this.getUserInfo()
					} else {
						tools.error(res.msg)
					}
				})
			},
			getUserInfo() {
				userInfo().then((res) => {
					if (res.code === 1) {
						this.userInfoData = res.data;
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.user-img-box {
		width: 144rpx;
		height: 144rpx;
		position: relative;
		margin: 98rpx auto 0;
	}

	.but-box {
		width: 144rpx;
		height: 144rpx;
		position: absolute;
		left: 0;
		top: 0;
		background: transparent;
		border: none;
		border-radius: 50%;
	}

	.user-img {
		width: 100%;
		height: 100%;
	}

	.set-iimg {
		position: absolute;
		right: 10rpx;
		bottom: 2rpx;
		width: 33rpx;
		height: 33rpx;
	}

	.item-info-box {
		padding: 80rpx 0 0 32rpx;

		.item-box {
			padding: 0 32rpx 32rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
		}
	}
</style>