hlm_pl_mall_h5/pages/member/auth/Auth.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="div member-auth">
      <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 form main-content">
          <view class="div form-wrapper">
              <flex-line v-if="user.member_auth_state!=1 && user.member_auth_state!=3" class="field-line menu-item" :show-border="true"><text class="span field-name">真实姓名：</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="realname" /></view></flex-line>
              <flex-line v-else :show-border="true"><text class="span line-name">真实姓名：</text><text class="span" slot="right">{{realname}}</text></flex-line>
              <flex-line v-if="user.member_auth_state!=1 && user.member_auth_state!=3" class="field-line menu-item" :show-border="true"><text class="span field-name">身份证号：</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="idcard" /></view></flex-line>
              <flex-line v-else :show-border="true"><text class="span line-name">身份证号：</text><text class="span" slot="right">{{idcard}}</text></flex-line>
          </view>

        <view class="div idcard-wrapper pt-10">
            <view class="div title">手持身份证照片</view>
            <view class="div idcard-item">
                <view class="div img">
                    <view class="div user-avatar">
                      <uni-file-picker
                        class="common-avatar"
                        v-model="imageValue['member_idcard_image1']"
                        fileMediatype="image"
                        mode="grid"
                        :readonly="user.member_auth_state==1 || user.member_auth_state==3"
                        :limit="1"
                        :auto-upload="false"
                        :image-styles="{
                        width:'200px',
                        height:'160px',
                        }"
                        @select="uploadSelectImg('member_idcard_image1',$event)"
                        @delete="dropImage('member_idcard_image1')"
                      >
                      </uni-file-picker>
                    </view>
                </view>

            </view>
            <view class="div title">身份证正面照片</view>
            <view class="div idcard-item">
                <view class="div img">
                    <view class="div user-avatar">
                      <uni-file-picker
                            class="common-avatar"
                            v-model="imageValue['member_idcard_image2']"
                            fileMediatype="image"
                            mode="grid"
                            :readonly="user.member_auth_state==1 || user.member_auth_state==3"
                            :limit="1"
                            :auto-upload="false"
                            :image-styles="{
                            width:'200px',
                            height:'160px',
                            }"
                            @select="uploadSelectImg('member_idcard_image2',$event)"
                            @delete="dropImage('member_idcard_image2',$event)"
                          >
                          </uni-file-picker>
                    </view>
                </view>
            </view>
            <view class="div title">身份证反面照片</view>
            <view class="div idcard-item">
                <view class="div img">
                    <view class="div user-avatar">
                      <uni-file-picker
                            class="common-avatar"
                            v-model="imageValue['member_idcard_image3']"
                            fileMediatype="image"
                            mode="grid"
                            :readonly="user.member_auth_state==1 || user.member_auth_state==3"
                            :limit="1"
                            :auto-upload="false"
                            :image-styles="{
                            width:'200px',
                            height:'160px',
                            }"
                            @select="uploadSelectImg('member_idcard_image3',$event)"
                            @delete="dropImage('member_idcard_image3' ,$event)"
                          >
                          </uni-file-picker>
                    </view>
                </view>

            </view>
        </view>
        <view class="div pb-10 pt-10">
            <view class="div common-btn ds-button-large" @click="submitInformation" v-if="user.member_auth_state!=1 && user.member_auth_state!=3">保存</view>
        </view>
      </view>
      <uni-popup background-color="#fff" ref="isshow" class="popup" >
        <image mode="aspectFit" class="img" :src="showimage" :style="getBannerStyle" @click="hidePopup('isshow')">
      </uni-popup>
       <!-- <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>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</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 { uploadAuth, dropAuth, updateMemberAuth } from '../../../api/member'
import flexLine from '../../flexLine'
export default {
  name:'MemberProfileSet',
  data(){
    return {
      navHeight: 0,
      imageValue:{},
      dialog:{},
      screenWidth:0,
      screenHeight:0,
      cropperOption: {
        img: '',
        canMove: false,
        autoCrop: true,
        autoCropWidth: 100,
        autoCropHeight: 100,
        maxImgSize: 500,
        outputType: 'png'
      },
      cropType: '',
      if_confirm: false,
      showimage: '',
      realname: '',
      idcard: '',
      member_ww: ''
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    const res = uni.getSystemInfoSync()
    this.screenWidth = res.windowWidth
    this.screenHeight = res.windowHeight
  },
  components:{
    TitleHeader,
    MemberBase,
    flexLine
    // tuiPictureCropper
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      user: state => state.member.info
    }),
    getBannerStyle: function () {
      var width = this.screenWidth
      var height = this.screenHeight
      let itemWidth = width
      let itemHeight = height
      return "max-width:"+itemWidth +"px;max-height:"+itemHeight +"px"
    }
  },
  created: function () {
    if (this.user) {
      this.realname = this.user.member_truename
      this.idcard = this.user.member_idcard
        if(this.user.member_idcard_image1_url){
          this.imageValue['member_idcard_image1']=[{
            name:'member_idcard_image1',
            extname:'jpg',
            url:this.user.member_idcard_image1_url
          }]
        }
        if(this.user.member_idcard_image2_url){
          this.imageValue['member_idcard_image2']=[{
            name:'member_idcard_image2',
            extname:'jpg',
            url:this.user.member_idcard_image2_url
          }]
        }
        if(this.user.member_idcard_image3_url){
          this.imageValue['member_idcard_image3']=[{
            name:'member_idcard_image3',
            extname:'jpg',
            url:this.user.member_idcard_image3_url
          }]
        }
    }
  },

  methods:{
    closeDialog(){
    },
    confirmDialog(value){
      switch(this.dialog.condition){
        case 1:
          this.confirmSumit()
          break
        case 2:
          dropAuth(this.dialog.data).then(res => {
            this.user[this.dialog.data + '_url'] = ''
            var temp = {}
            temp[this.dialog.data + '_url'] = ''
            this.memberEdit(temp)
          }).catch(function (error) {
            uni.showToast({icon:'none',title: error.message})
          })
          break
      }
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapMutations({
       memberEdit: 'memberEdit',
	   memberUpdate: 'memberUpdate',
    }),
    submitInformation () {
      // if (!this.if_confirm) {
      //   this.confirmSumit()
      //   return
      // }
	  const  that = this
	  uni.showModal({
	  	title: '提示',
	  	content: '请仔细核对信息，确认上传后除非管理员审核否则无法再次上传',
	  	success: function (res) {
	  		if (res.confirm) {
	  			  that.confirmSumit()
	  		} else if (res.cancel) {
	  			console.log('用户点击取消');
	  		}
	  	}
	  });
      // this.dialog={condition:1,content:'请仔细核对信息，确认上传后除非管理员审核否则无法再次上传'}
      // this.$refs.confirm.open()
    },
    confirmSumit () {
      updateMemberAuth(this.realname, this.idcard, true).then(res => {
          this.memberEdit({ member_truename: this.realname, member_idcard: this.idcard, member_auth_state: 1 })
          uni.showToast({icon:'none',title: res.message})
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    openImage (src) {
      this.showimage = src
      this.showPopup('isshow')
    },
    dropImage (id ,e) {
		
		  // this.dialog={condition:1,content:'请仔细核对信息，确认上传后除非管理员审核否则无法再次上传'}
		  //  this.$refs.confirm.open()
      // this.dialog={condition:2, content:'确定要删除该图片吗？', data:id}
	  dropAuth(id).then(res => {
	    this.user[this.dialog.data + '_url'] = ''
	    var temp = {}
	    temp[id + '_url'] = ''
	    this.memberEdit(temp)
	  }).catch(function (error) {
	    uni.showToast({icon:'none',title: error.message})
	  })
	  
      

    },
    // useCrop (res) {
    //     let index = this.cropType
    //     var formdata={
    //       filePath:res.url,
    //       name:index,
    //       id:index
    //     }

    //     uploadAuth(formdata).then(res => {
    //       this.user[index + '_url'] = res.result.file_path
    //       this.imageValue[index]=[{
    //         name:index,
    //         extname:'jpg',
    //         url:res.result.file_path
    //       }]
    //       var temp = {}
    //       temp[index + '_url'] = res.result.file_path
    //       this.memberEdit(temp)
    //       this.cropperOption.imgUrl=''
    //       this.$forceUpdate()
    //       uni.hideLoading()
    //     }).catch(function (error) {
    //       uni.showToast({icon:'none',title: error.message})
    //       uni.hideLoading()
    //       this.cropperOption.imgUrl=''
    //       this.$forceUpdate()
    //     })
    //   },
    //   cropReady(){
    //     this.cropperOption.img = this.cropperOption.imgUrl
    //   },
    //   cropBack(){
		  // console.log('this.cropperOptio' , this.cropperOption)
    //     this.cropperOption.imgUrl=''
    //     this.$forceUpdate()
    //   },
	  // 直接上传
	  uploadSelectImg(index, event){
		 const file = event.tempFiles[0]
		  const  formdata = {
		    filePath:file.path,
		    name:index,
		    id:index
		  }
		  uploadAuth(formdata).then(res => {
		    this.user[index + '_url'] = res.result.file_path
		    this.imageValue[index]=[{
		      name:index,
		      extname:'jpg',
		      url:res.result.file_path
		    }]
		    var temp = {}
		    temp[index + '_url'] = res.result.file_path
		    this.memberEdit(temp)
		    this.cropperOption.imgUrl=''
		    this.$forceUpdate()
		    uni.hideLoading()
		  }).catch(function (error) {
		    uni.showToast({icon:'none',title: error.message})
		    uni.hideLoading()
		    this.cropperOption.imgUrl=''
		    this.$forceUpdate()
		  })
	  },
	  
  //   uploadInformPic (index, event) {
  //       let that = this
  //       this.cropType = index
		// if(index === 'member_idcard_image1'){ // 直接上传
		// this.uploadSelectImg(index, event)
			
		// }else{
		
		// let file = event.tempFiles[0]
		//   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()	
		// }
  //     }
  }
}
</script>
<style  lang="scss" scoped>
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .ds-button-large{margin:0 $pageSpace}
  .member-auth {
    background: #fff;
	  .main-content{padding:  0 $pageSpace;box-sizing: border-box;}
      .form{
          .form-wrapper{
              position: relative;
              box-shadow: 0px 4px 4px #f7f7f7;
              z-index: 2;
          }
          .title{
              font-size:$subFontSize;
              font-weight: 700;
          }
      }
    .idcard-wrapper{
        .idcard-item{
            background: #fff;
            padding: 1rem 0;
            .del-btn{
                    position: absolute;
                    font-size: 1.5rem;
                    top: -.75rem;
                    right: -.75rem;
            }

        }
    }
  }

</style>
<style lang="scss">
  .member-auth .mint-cell-title{flex:unset;width:7rem}
  .member-auth .mint-cell-value{flex:1}
</style>