mp_exhibitor_miniprog/pages/user/info-edit.vue

<template>
  <page-layout class="user-info-edit">
    <nav-bar title="个人信息" @init="onInitNavbar"></nav-bar>
    <u-scroll-view>
      <form @submit="onSubmit">
        <van-cell-group>
          <van-cell title="头像" class="user-avatar-cell van-cell--clickable">
            <view class="right-icon" slot="right-icon">
              <button class="btn-choose" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
              <view class="user-avator">
                <image v-if="avatar" :src="avatar" mode="aspectFill" />
                <image v-else src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132" mode="aspectFill" />
              </view>
              <van-button type="primary" plain>点击修改</van-button>
            </view>
          </van-cell>
          <van-field required type="nickname" name="nickname" :value="nick_name" placeholder="请输入呢称" :border="false" label="呢称" clearable @change="(e) => onFieldChange('nick_name', e)" />
          <van-field :value="company_name" placeholder="请输入公司" :border="false" label="公司" clearable  @change="(e) => onFieldChange('company_name', e)" />
          <van-field :value="title" placeholder="请输入职业" :border="false" label="职业" clearable @change="(e) => onFieldChange('title', e)" />
        </van-cell-group>
        <view class="user-info-submit">
          <van-button type="primary" form-type="submit" :loading="saveLoading" size="large">保存</van-button>
        </view>
      </form>
    </u-scroll-view>
  </page-layout>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UScrollView from '@/components/common/u-scroll-view'
	import VanCellGroup from '@/wxcomponents/vant/cell-group/index'
	import VanCell from '@/wxcomponents/vant/cell/index'
	import VanField from '@/wxcomponents/vant/field/index'
	import { updateInfo, uploadFile } from '@/api/user'
  import PageLayout from "@/components/layout/page-layout";

	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
      PageLayout,
			NavBar,
			UScrollView,
			VanCellGroup,
			VanCell,
			VanField
		},
		computed: {
		},
		data() {
			return {
				redirectUrl: '',
				avatar: '',
				nick_name: '',
				title: '',
				company_name: '',
				saveLoading: false
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.avatar) {
				this.avatar = decodeURIComponent(options.avatar)
			} else {
				this.avatar = ''
			}
			if (options.redirect) {
				this.redirectUrl = decodeURIComponent(options.redirect)
			} else {
				this.redirectUrl = ''
			}
		},
		created() {
			this.checkAuth('/pages/user/info-edit')
		},
		onShow() {
			this.$store.dispatch('getInfo').then(res => {
				this.nick_name = res.data.nick_name
				this.company_name = res.data.company_name
				this.title = res.data.title
				if (!this.avatar) {
					this.avatar = res.data.avatar
				}
			})
		},
		methods: {
			onChooseAvatar(e) {
				this.avatar = e.detail.avatarUrl
			},
			onSubmit(e) {
				this.saveLoading = true
				if (this.avatar.indexOf('http://tmp') === 0 || this.avatar.indexOf('wxfile') === 0) {
					uploadFile({
						filePath: this.avatar,
					}).then(res => {
						console.log("上传微信头像：", res)
						if (res.data) {
							this.avatar = res.data.url
							this.doUpdateInfo()
						}
					}).then(error => {
						this.saveLoading = false
					})
				} else {
					this.doUpdateInfo()
				}
			},
			onFieldChange(field, value) {
				this[field] = value
			},
			doUpdateInfo() {
				if (!this.nick_name) {
					this.showToast('请填写呢称')
					return
				}
				updateInfo({
					avatar: this.avatar,
					nick_name: this.nick_name,
					title: this.title,
					company_name: this.company_name
				}).then(() => {
					this.$store.dispatch('getInfo')
					this.saveLoading = false
					this.showSuccessToast('保存成功', () => {
						if (this.redirectUrl) {
							this.redirectTo(this.redirectUrl)
						} else {
							const pages = getCurrentPages()
							if (pages.length > 1) {
								const parentPagePath = pages[pages.length - 2].$page.fullPath
								if (parentPagePath === '/pages/user/info') {
									uni.navigateBack()
									return
								}
							}
							this.redirectTo('/pages/user/index')
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-info-edit{
		.right-icon{
			position: relative;
      button::after {
        content: unset;
      }
			.btn-choose{
				position: absolute;
				background-color: transparent;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 2;
			}
		}
		.user-info-submit{
			width: 400rpx;
			margin: 60rpx auto 0 auto;
		}
		.van-cell__title{
			max-width: 180rpx!important;
			min-width: 180rpx!important;
			margin-right: 24rpx!important;
		}
		.user-avatar-cell{
			.van-cell__title{
				flex: unset;
			}
			.right-icon{
				display: flex;
				justify-content: space-between;
				flex: 1;
			}
		}
		.user-avator{
			@include display-flex-center;
			width: 111rpx;
			height: 111rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 13rpx;
			.icon{
				color: #ffffff;
				opacity: 0.67;
				font-size: 70rpx;
			}
		}
	}
</style>