hlm_pl_mall_h5/pages/member/profile/ProfileSet.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="div member-information">
      <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="个人信息" class="common-header" left-icon="back" @clickLeft="goBack()">
        </uni-nav-bar>
      </view>
      </view>

      <view class="div user-avatar">
        <uni-file-picker class="common-avatar" v-model="imageValue" fileMediatype="image" mode="grid" :limit="1"
        :auto-upload="false" @select="uploadImage"></uni-file-picker>
      </view>
      <view class="div form">
		<flex-line class="menu-item field-line" :show-border="true"><text class="span field-name">用户名</text><view class="div field-line-right membername" slot="right"><text class="text">{{user.member_name}}</text></view></flex-line>
        <flex-line class="menu-item field-line" :show-border="true"><text class="span field-name">昵称</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="member_info.member_nickname" /></view></flex-line>
        <flex-line class="menu-item field-line" :show-border="true"><text class="span field-name">QQ</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="member_info.member_qq" /></view></flex-line>
        <flex-line class="menu-item field-line" :show-border="true"><text class="span field-name">旺旺</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="member_info.member_ww" /></view></flex-line>
        <view class="div">
          <flex-line class="menu-item" :is-link="true" :show-border="true">
          <text class="span line-name">出生日期</text>
          <view class="span" slot="right">
          <uni-datetime-picker class="common-datetime-picker" type="date" v-model="member_info.member_birthday"
            start="1970-1-1" :end="(new Date()).getFullYear()+'-'+((new Date()).getMonth()+1)+'-'+(new Date()).getDate()"></uni-datetime-picker>
          </view>
          </flex-line>
        </view>
        <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submitInformation">保存</view></view>

      </view>
      <tui-picture-cropper v-if="cropperOption.imgUrl" :width="cropperOption.autoCropWidth"
      :height="cropperOption.autoCropHeight" :imageUrl="cropperOption.img" @ready="cropReady" @cropper="useCrop" @back="cropBack">
    </tui-picture-cropper>
    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import tuiPictureCropper from "@/components/thorui/tui-picture-cropper/tui-picture-cropper"
import { mapState, mapMutations } from 'vuex'
import { uploadMemberAvatar, updateMemberInfo } from '../../../api/member'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    tuiPictureCropper
  },
  name:'MemberProfileSet',
  data(){
    return {
      navHeight: 0,
      imageValue:[],
      screenWidth:0,
      screenHeight:0,
      cropperOption: {
        img: '',
        canMove: false,
        autoCrop: true,
        autoCropWidth: 100,
        autoCropHeight: 100,
        maxImgSize: 500,
        outputType: 'png'
      },
      member_info: {
        member_nickname: '',
        member_qq: '',
        member_ww: '',
        member_birthday: ''
      }
    }
  },
  mounted(){

    // #ifdef  MP-WEIXIN

    this.navHeight = uni.getMenuButtonBoundingClientRect().top

    // #endif

    const res = uni.getSystemInfoSync()
    this.screenWidth = res.windowWidth
    this.screenHeight = res.windowHeight

  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      user: state => state.member.info
    })
  },
  created: function () {
    if (this.user) {
      this.member_info.member_nickname = this.user.member_nickname
      this.member_info.member_qq = this.user.member_qq
      this.member_info.member_ww = this.user.member_ww
      this.member_info.member_birthday = this.user.member_birthday
        if (this.user.member_avatar) {
          this.imageValue = [{
            name: 'member_avatar',
            extname: 'jpg',
            url: this.user.member_avatar
          }]
        }
    }
  },

  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapMutations({
      memberEdit: 'memberEdit'
    }),
      uploadImage(event) {
        var file = event.tempFiles[0]
        var that = this
          that.cropperOption.imgUrl = file.path
          that.cropperOption.autoCropWidth = uni.getSystemInfoSync().windowWidth
          that.cropperOption.autoCropHeight = uni.getSystemInfoSync().windowWidth
          that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
          that.$forceUpdate()
      },
      useCrop(res) {
        var formdata = {
          filePath: res.url,
          name: 'memberavatar'
        }
        uni.showLoading({
          title: '加载中'
        })
        uploadMemberAvatar(formdata).then(res => {
          this.user.avatar = res.result + '?' + Math.floor(Math.random() * 100)
          this.imageValue = [{
            name: 'member_avatar',
            extname: 'jpg',
            url: this.user.avatar
          }]
          this.memberEdit({
            member_avatar: this.user.avatar
          })
          this.cropperOption.imgUrl = ''
          this.$forceUpdate()
          uni.hideLoading()
        }).catch(error => {
          uni.showToast({
            icon: 'none',
            title: error.message
          })
          uni.hideLoading()
          this.cropperOption.imgUrl = ''
          this.$forceUpdate()
        })
      },
      cropReady() {
        this.cropperOption.img = this.cropperOption.imgUrl
      },
      cropBack(){
        this.cropperOption.imgUrl=''
        this.$forceUpdate()
      },
    submitInformation () {
      updateMemberInfo(this.member_info).then(res => {
        this.memberEdit(this.member_info)
        uni.showToast({icon:'none',title: res.message})
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }

  }
}
</script>
<style  lang="scss" scoped>
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
  .member-information {
    background: #fff;
    .form{padding:0 $pageSpace}
    .user-avatar {
      position: relative;
      margin: 2rem auto;
      text-align: center;
    }
    .menu-item {
    }
	.membername{
		justify-content: flex-end;
	}
  }
</style>