h5-uniapp/pages/my/person/index.vue

<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.mine.introduce.title"></myNav>
		<view class="width-100b">
			<view class="width-100b height-96" style="border-top: 1rpx solid rgba(220, 220, 220, 0.1);">
				<view @click="Mshow=true" class="width-690 margin-0-auto height-96 flex align-center justify-between">
					<text class="font-32 bold-font">{{i18n.mine.introduce.avatar}}</text>
					<view class="flex align-center justify-end">
						<image class="width-60 height-60 radiu-50b margin-r-10" :src="avatar" mode=""></image>
						<i class="cuIcon-right font-24"></i>
					</view>
				</view>
			</view>
			<view class="width-100b height-96 margin-c-1" style="border-top: 1rpx solid rgba(220, 220, 220, 0.1);">
				<view @click="router.push('/pages/my/person/udataName')" class="width-690 margin-0-auto height-96 flex align-center justify-between">
					<text class="font-32 bold-font">{{i18n.mine.introduce.nickname}}</text>
					<view class="line-height-96">
						<text class="font-32 bold-font margin-r-10">{{nickname}}</text>
						<i class="cuIcon-right font-24"></i>
					</view>
				</view>
			</view>
			<view v-if="email" class="width-100b height-96" style="border-top: 1rpx solid rgba(220, 220, 220, 0.1);">
				<view class="width-690 margin-0-auto height-96 flex align-center justify-between">
					<text class="font-32 bold-font">{{i18n.mine.safety.email}}</text>
					<view class="line-height-96">
						<text class="font-32 numbold-font">{{email}}</text>
					</view>
				</view>
			</view>
			<view v-if="mobile" class="width-100b height-96" style="border-top: 1rpx solid rgba(220, 220, 220, 0.1);">
				<view class="width-690 margin-0-auto height-96 flex align-center justify-between">
					<text class="font-32 bold-font">{{i18n.mine.safety.phone}}</text>
					<view class="line-height-96">
						<text class="font-32 numbold-font">{{mobile}}</text>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 更多弹窗 -->
		<u-popup style="z-index: 5000;" mode="bottom" v-model="Mshow">
			<view class="padding-w-75 padding-c-50" :style="'background-color: '+theme.bg">
				<view @click="updataImg('album')" :style="'background-color: '+theme.fu_bg+';color:'+theme.text"
				class="height-96 radiu-10 flex align-center justify-center font-30 bold-font margin-b-18">{{i18n.mine.introduce.album}}</view>
				<view @click="updataImg('camera')" :style="'background-color: '+theme.fu_bg+';color:'+theme.text"
				class="height-96 radiu-10 flex align-center justify-center font-30 bold-font margin-b-48">{{i18n.mine.introduce.camera}}</view>
				<view @click="Mshow=false" :style="'background-color: '+theme.fu_bg+';color:'+theme.fu_text"
				 class="height-96 radiu-10 flex align-center justify-center font-30 bold-font ">{{i18n.mine.introduce.cancel}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: '',
				avatar: '',
				mobile:'',
				email:'',
				
				Mshow: false,
				theme:''
			}
		},
		computed: {
		    i18n() {
		        return this.$t('message');
		    }
		},
		onShow() {
			this.init()
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			}else{
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			init(){
				this.post('/my/get_userinfo').then((res) => {
					// console.log('用户信息',res);
					if (res.code == 1) {
						this.avatar = res.data.avatar
						this.nickname = res.data.nickname
						this.email = res.data.email
						this.mobile = res.data.mobile
					}
				})
			},
			// 更换头像
			updataImg(type) {
				let self = this
				uni.chooseImage({
					count: 1,
					sourceType:[type],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.avatar = tempFilePaths[0]
						uni.showLoading({
							title: this.i18n.mine.introduce.loading,
							mask:true
						})
						uni.uploadFile({
							url: self.upload + '/publics/image_upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token: uni.getStorageSync('token')
							},
							success: (res) => {
								// console.log(res)
								let data = JSON.parse(res.data)
								if (data.code == 1) {
									// console.log(data)
									var avatarUrl = {
										avatar: data.data.url
									}
									// console.log(avatarUrl)
									this.post('/my/profile', avatarUrl).then(res1 => {
										// console.log(res1)
										uni.hideLoading()
										this.Mshow = false
										if (res1.code == 1) {
											this.tos(res1.msg)
										}
									})
								}
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
</style>