CommunityApp/pagesM/pages/mine_info.vue

<template>
  <view class="dt-page">
    <view class="item-margin"></view>
    <view class="comp-list-item" >
      <view class="left-item">
        <text>头像</text>
      </view>
      <view class="right-item">
        <block v-if="dataDetail.icon">
          <image class="avatar" :src="dataDetail.icon" mode="aspectFill"></image>
          <image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
        </block>
        <button v-else class="avatar-wrap" open-type="getUserInfo" @getuserinfo="tapGetUserInfo" @tap.stop="()=>false">
          <image class="avatar" src="http://139.9.103.171:1888/img/image/avatar.png" mode="aspectFill"></image>
          <image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
        </button>
      </view>
    </view>
    <view class="comp-list-item">
      <view class="left-item">
        <text>昵称</text>
      </view>
      <view class="right-item">
        <input v-model="dataDetail.username" type="text" maxlength="10" placeholder="请输入会员姓名" />
        <image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
      </view>
    </view>
    <view class="comp-list-item">
      <view class="left-item">
        <text>性别</text>
      </view>
      <picker @change="onSelectorChange" :value="index" :range="range">
        <view class="right-item">
          <text>{{range[index]}}</text>
          <image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
        </view>
      </picker>
    </view>
    <view class="comp-list-item">
      <view class="left-item">
        <text>生日</text>
      </view>
      <picker mode="date"
        :value="dataDetail.birth" 
        :end="endDate"
        @change="onDateChange" >
        <view class="right-item">
          <text>{{dataDetail.birth}}</text>
          <image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
        </view>
      </picker>
    </view>
    <view class="item-margin"></view>

    <view class="comp-list-item">
      <view class="left-item">
        <text>会员姓名</text>
      </view>
      <view class="right-item">
        <input v-model="dataDetail.name" type="text" placeholder="请输入会员姓名" />
        <image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
      </view>
    </view>
    <view class="comp-list-item">
      <view class="left-item">
        <text>身份证号码</text>
      </view>
      <view class="right-item">
        <input v-model="dataDetail.idCard" type="text" placeholder="请输入身份证" />
        <image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
      </view>
    </view>
    <!-- <view class="comp-list-item">
      <view class="left-item">
        <text>手机号码</text>
      </view>
      <view class="right-item">
        <text>{{dataDetail.phone|defaultValue('无')}}</text>
        <image class="hidden" src="http://139.9.103.171:1888/img/image/arrow.png"></image>
      </view>
    </view> -->
    
    <button @tap="tapSave" class="btn-submit" hover-class="button-hover-scale">保存</button>
  </view>
</template>
<script>
export default {
  data(){
    return {
      index:0,
      range:['男','女'],
      endDate:'',
      dataDetail:{ // 会员信息
        avatar:'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D360%2C280%2C50/sign=26cc5fe78d26cffc697fecf2df3c79a6/d0c8a786c9177f3ef680d5737fcf3bc79f3d5613.jpg',
        gender:'MALE', // FEMALE
        birth:'',
        username:'黄海贤',
        idCard:'445227188405063055',
        phone:'13666668888',
        name:'',
      },
    }
  },
  methods:{
    async tapGetUserInfo(e) {
      console.log(103, e)
      if (e.detail.errMsg == "getUserInfo:ok") {
        let userInfo = e.detail.userInfo
        let dataDetail = Object.assign({},this.dataDetail)
        dataDetail.icon = userInfo.avatarUrl
        this.dataDetail = dataDetail
      }
    },
    // tapAvator(){
    //   uni.chooseImage({
    //     count: 1,
    //     sizeType: ['original', 'compressed'],
    //     sourceType: ['album','camera'], //从相册选择
    //     success: (res)=>{
    //       this.dataDetail.avatar = res.tempFilePaths[0]
    //       console.log(JSON.stringify(res.tempFilePaths));
    //     }
    //   });
    // },
    onSelectorChange(e){
      console.log(e)
      this.index = e.target.value
    },
    onDateChange(e){
      console.log(e)
      let dataDetail = Object.assign({},this.dataDetail)
      dataDetail.birth = e.target.value
      this.dataDetail = dataDetail
    },
    // 更新信息
    async tapSave(){
      let resp = await this.$api.BCedit({
        _isShowLoading:true,
        // phone:this.dataDetail.phone,
        username:this.dataDetail.username, 
        name:this.dataDetail.name, 
        gender:this.index,
        icon:this.dataDetail.icon,
        birth:this.dataDetail.birth,
        idCard:this.dataDetail.idCard,
      })
      
      this.$dialog.success('保存成功',()=>{
        this.$util.refreshPage(['pages/mine'])
        uni.navigateBack()
      })
    },
    // 获取信息
    async getData(){
      let resp = await this.$api.BCmy({
        _isShowLoading:true
      })
      if(!resp.birth){
        resp.birth = this.$util.dateFormat(new Date(), 'yyyy-MM-dd')
        this.endDate = this.dataDetail.birth
      }
      this.index = resp.gender || 0
      this.dataDetail = resp
    },
    onLoadPage(){
	  wx.hideShareMenu();
      this.getData()
    },
  }
}
</script>

<style lang="scss" scoped>
.dt-page{
  min-height:100vh;
  background-color:#f2f2f2;
  .comp-list-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 30upx;
    color: #353535;
    font-size: 30upx;
    justify-content: space-between;
    margin-top: 0;
    height: 110upx;
    border-bottom: 2upx solid #f2f2f2;
    background: #fff;
    .left-item {
      display: flex;
      align-items: center;
      text {
        max-height: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
      }
    }
    .right-item {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width:50vw;
      height:110upx;
      
      text {
        color: #999999;
      }
      
      image {
        margin-left: 20upx;
        width: 13upx;
        height: 24upx;
      }
      .avatar-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        width:100%;
        height:100%;
        border: 0;
        background-color: transparent;
      }
      .avatar{
        width:80upx;
        height:80upx;
        border-radius:50%;
      }
    }
  }
  .item-margin{
    width:100%;
    height:10upx;
  }
  .btn-submit {
    margin:60upx auto;
    width:690upx;
    height: 90upx;
    line-height: 90upx;
    border-radius:10upx;
    background-color:$base;
  }
  .hidden{
    opacity:0;
  }
  input{
    text-align: right;
    color:#999999;
    width:100%;
  }
}
</style>