hlm_pl_mall_h5/pages/member/sellerjoinin/Step2.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <member-base :show="false"><view class="div">
    <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>
	
    <step :options="options" :active="0"></step>
    <view  class="div label">店铺及联系人信息</view>
	
    <view class="div main-content">
      <flex-line class="field-line" :show-border="true"><text class="span field-name">{{storeJoinin.store_type==1?'店铺名称':'公司名称'}}</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="storeJoinin.company_name" /></view></flex-line>
      <view class="div" @click="onRegion('company_address')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">所在地</text><text class="span" slot="right">{{storeJoinin.company_address}}</text></flex-line></view>
      <view v-if="!storeJoinin.company_address_detail" class="div" @click="showPopup('popMap')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">详细地址</text><text class="span" slot="right">{{storeJoinin.company_address_detail}}</text></flex-line></view>
      <flex-line v-else class="field-line" :show-border="true"><text class="field-name">详细地址</text><view class="field-line-right" slot="right"><input class="field-input" v-model="storeJoinin.company_address_detail" /></view></flex-line>
      <flex-line v-if="storeJoinin.store_type==0" class="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="storeJoinin.company_registered_capital" /></view></flex-line>
      <flex-line v-if="storeJoinin.store_type==0" class="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="storeJoinin.contacts_name" /></view></flex-line>
      <flex-line class="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="storeJoinin.contacts_phone" /></view></flex-line>
      <flex-line class="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="storeJoinin.contacts_email" /></view></flex-line>

    </view>
    <view class="div label">{{storeJoinin.store_type==0?'营业执照信息（副本）':'证件信息'}}</view>
    <view class="div main-content">
		<flex-line class="field-line" v-if="storeJoinin.store_type==1" :show-border="true"><text class="span field-name">持证人姓名</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="storeJoinin.contacts_name" /></view></flex-line>
      <flex-line class="field-line" :show-border="true"><text class="span field-name">{{storeJoinin.store_type==0?'营业执照号':'证件号码'}}</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="storeJoinin.business_licence_number" /></view></flex-line>
      <view class="div" v-if="storeJoinin.store_type==0" @click="onRegion('business_licence_address')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">营业执照所在地</text><text class="span" slot="right">{{storeJoinin.business_licence_address}}</text></flex-line></view>
      <view class="div" v-if="storeJoinin.store_type==0">
      <flex-line :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="storeJoinin.business_licence_start"
            start="2000/1/1"></uni-datetime-picker>
      </view>
      </flex-line>
      </view>
      <view class="div" v-if="storeJoinin.store_type==0">
      <flex-line :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="storeJoinin.business_licence_end"
            start="2000/1/1"></uni-datetime-picker>
      </view>
      </flex-line>
      </view>
      <flex-line v-if="storeJoinin.store_type==0" class="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="storeJoinin.business_sphere" /></view></flex-line>
	  
      <flex-line class="pt-5" :show-border="true">
        <text class="span">{{storeJoinin.store_type==0?'营业执照电子版':'身份证正面'}}</text>
        <view class="div" slot="right">
          <view class="div user-avatar-wrapper">
            <view class="div user-avatar">
                <uni-file-picker 
				class="common-avatar" 
				v-model="business_licence_number_electronic_lsit" 
				fileMediatype="image" 
				mode="grid" 
				:limit="1" 
				:auto-upload="false" 
				@select="uploadSelectImg('business_licence_number_electronic', $event)"  
				@delete="dropImage('business_licence_number_electronic')"  
				:image-styles="{
                        width:'200px',
                        height:'160px',
                }"></uni-file-picker>
            </view>
          </view>
        </view>
      </flex-line>
	  
	  <flex-line class="pt-5" :show-border="true">
		<div>
	    <text class="span">{{storeJoinin.store_type==0?'企业授权书':'身份证反面'}}</text>
		  <div class="button look-button" v-if="storeJoinin.store_type==0" v-on:click="lookImage()">查看实例</div>
		</div>
	    <view class="div" slot="right">
	      <view class="div user-avatar-wrapper">
	        <view class="div user-avatar">
	            <uni-file-picker 
					class="common-avatar" 
					v-model="business_author_letter_list" 
					fileMediatype="image" 
					mode="grid" 
					:limit="1" 
					:auto-upload="false" 
					@select="uploadSelectImg('business_author_letter', $event)" 
					@delete="dropImage('business_author_letter')" 
					:image-styles="{
							width:'200px',
							height:'160px',
							}">
				</uni-file-picker>
	        </view>
	      </view>
		
	    </view>
	  </flex-line>
    </view>
    <view class="div common-btn ds-button-large mt-10"  @click="nextStep">下一步</view>

    <view class="div">
      <uni-popup background-color="#fff" ref="isshow" class="popup" >
		  <!-- <div>{{showimage}}</div> -->
        <image mode="aspectFit" class="img" :src="showimage" :style="getBannerStyle" @click="hidePopup('isshow')">
      </uni-popup>
    </view>
    <view class="div">
      <region-picker ref="picker" @onConfirm="onPickerConfirm"></region-picker>
    </view>
    <view class="div">
      <uni-popup background-color="#fff" ref="popMap" type="right" >
        <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
        <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="hidePopup('popMap')">
          </uni-nav-bar>
        </view>
        </view>
        <view class="div common-popup-content">
			<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
          <map-select ref="map_select" :longitude="storeJoinin.store_longitude" :latitude="storeJoinin.store_latitude" @setPosition="setPosition"></map-select>
			</scroll-view>
		</view>
      </view>
      </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> -->
	     <!-- <tui-picture-cropper v-if="cropperOption1.imgUrl" :width="cropperOption1.autoCropWidth" :height="cropperOption1.autoCropHeight" :imageUrl="cropperOption1.img" @ready="cropReady1" @cropper="useCrop1" @back="cropBack1"></tui-picture-cropper> -->
    </view>
  </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, mapActions } from 'vuex'
import Step from '../../Step'
import RegionPicker from '../../RegionPicker'
import MapSelect from '../../MapSelect'
import { getStoreJoinin, uploadInfoFile, saveStoreJoinin2 } from '../../../api/seller'
import { getPointByAddress } from '../../../util/bmap'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    Step,
    RegionPicker,
    MapSelect,
    tuiPictureCropper
  },
  data(){
    return {
      navHeight: 0,
	   business_author_letter_list:[],
      business_licence_number_electronic_lsit:[],
      screenWidth:0,
      screenHeight:0,
   //    cropperOption: {
   //      img: '',
   //      canMove: false,
   //      autoCrop: true,
   //      autoCropWidth: 100,
   //      autoCropHeight: 50,
   //      maxImgSize: 500,
   //      outputType: 'png'
   //    },
	  // cropperOption1: {
	  //   img: '',
	  //   canMove: false,
	  //   autoCrop: true,
	  //   autoCropWidth: 100,
	  //   autoCropHeight: 50,
	  //   maxImgSize: 500,
	  //   outputType: 'png'
	  // },
      options: [{ title: '公司资质' }, { title: '财务资质' }, { title: '店铺信息' }, { title: '合同签订' }],
      showimage: '',
      selectData: '',
      regionName: '',
      dataName: ''
    }
  },
  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({
      storeJoinin1: state => state.member.storeJoinin1,
      storeJoinin0: state => state.member.storeJoinin0,
      storeJoininType: state => state.member.storeJoininType,
      config: state => state.config.config
    }),
    storeJoinin:function(){
      var data
      if(this.storeJoininType==1){
        data = this.storeJoinin1
      }else{
        data = this.storeJoinin0
      }
      if(data.business_licence_number_electronic_url){
          this.business_licence_number_electronic_list = [{
            name: 'business_licence_number_electronic',
            extname: 'jpg',
            url: data.business_licence_number_electronic_url
          }]
        }   
		if(data.business_author_letter_url){
          this.business_author_letter_list = [{
            name: 'business_author_letter',
            extname: 'jpg',
            url: data.business_author_letter_url
          }]
        }
		
		
      return data
    },
    getBannerStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = width
      let itemHeight = height
      return "max-width:"+itemWidth +"px;max-height:"+itemHeight +"px"
    }
  },
  created: function () {
    getStoreJoinin().then(res => {
      var store_joinin = res.result.store_joinin
      if (store_joinin) {
        if (store_joinin.joinin_state == 11 || store_joinin.joinin_state == 20 || store_joinin.joinin_state == 31) {
          uni.redirectTo({url:'/pages/member/sellerjoinin/Step5'})
          return
        }
        if (store_joinin.joinin_state == 40) {
          uni.showToast({icon:'none',title: '您的店铺已开通'})
          return
        }

        this.sellerJoininSave({ storeJoinin: store_joinin })

        this.fetchConfig({}).then(
          response => {
			  console.log('this.config' , this.config)
            if (this.config.store_joinin_open == 2 || this.config.store_joinin_open == 3) {
              if (this.config.store_joinin_open == 3) {
                this.storeJoinin['store_type'] = 1
              }
              if (this.config.store_joinin_open == 2) {
                this.storeJoinin['store_type'] = 0
              }
              this.$forceUpdate()
            }
          },
          error => {
            uni.showToast({icon:'none',title: error.message})
          }
        )
		console.log('this.storeJoinin' ,this.storeJoinin)
		
      }
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
  },

  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    ...mapMutations({
      memberPoint: 'memberPoint',
      sellerJoininSave: 'sellerJoininSave'
    }),
    nextStep () {
      saveStoreJoinin2(this.storeJoinin).then(res => {
        this.sellerJoininSave({ storeJoinin: this.storeJoinin })
        uni.navigateTo({url:'/pages/member/sellerjoinin/Step3'})
      }).catch(error => {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    setPosition (lat, lng, name) {
      this.hidePopup('popMap')
      this.storeJoinin.company_address_detail = name
      this.storeJoinin.store_longitude = lng
      this.storeJoinin.store_latitude = lat
      this.$forceUpdate()
    },
    onPickerConfirm (values) {
      if (this.regionName == 'company_address') {
        this.storeJoinin.company_address = this.getRegionStr(values)
        this.storeJoinin.company_province_id = values[values.length - 1].area_id
      }
      if (this.regionName == 'business_licence_address') {
        this.storeJoinin.business_licence_address = this.getRegionStr(values)
      }
      this.selectCity(values.length > 1 ? values[1].area_name : values[0].area_name)
      this.$forceUpdate()
    },
    onRegion (name) {
      this.regionName = name
      this.$refs.picker.show()
    },
    getRegionStr (values) {
      let title = ''
      for (let i = 0; i < values.length; i++) {
        const element = values[i]
        if (i !== 0) {
          title = title + ' ' + element.area_name
        } else {
          title = title + element.area_name
        }
      }
      return title
    },
    openImage (src) {
      this.showimage = src
      this.showPopup('isshow')
    },
	lookImage (){
		const  images = ['https://www.cctc365.com/uploads/home/store/p9ynd6H.png']
		uni.previewImage({
			current: 0,     // 当前显示图片的索引值
			urls: images,    // 需要预览的图片列表，photoList要求必须是数组
			loop:false,    
		})
	},
    dropImage (type) {
	  this.storeJoinin[type] =  this.storeJoinin[type + '_url']  = ''
	  // 缓存也要清除下
      this.$forceUpdate()
    },
	// dropImage1 () {
	//   this.storeJoinin.business_author_letter = ''
	//   this.$forceUpdate()
	// },
    // uploadImage(type,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) * (this.storeJoinin.store_type==0 ? 1 :.63)
    //       that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
    //       that.$forceUpdate()
    // },
	uploadSelectImg(type,event){
		const that = this
		const  file = event.tempFiles[0]
		const  formdata = {
		  filePath: file.path,
		  name: 'file'
		}
		uni.showLoading({
		  title: '上传中....'
		})
		uploadInfoFile(formdata).then(res => {
		  that.storeJoinin[type] = res.result.path
		  that.storeJoinin[type + '_url'] = res.result.url
		  
		that[type + '_list'] = [{
		    name: type,
		    extname: 'jpg',
		    url: that.storeJoinin[type + '_url']
		  }]
		  // this.cropperOption.imgUrl = ''
		  that.$forceUpdate()
		  uni.hideLoading()
		}).catch(function(error) {
		  uni.showToast({
		    icon: 'none',
		    title: error.message
		  })
		  uni.hideLoading()
		  // this.cropperOption.imgUrl = ''
		  that.$forceUpdate()
		})
	},
	
	  
	  
	  
	  // uploadImage1(event) {
	  //     var file = event.tempFiles[0]
		 //  console.log('这是我上传的图片',file)
	  //     var that = this
	  //       that.cropperOption1.imgUrl = file.path
	  //       that.cropperOption1.autoCropWidth = uni.getSystemInfoSync().windowWidth
	  //       that.cropperOption1.autoCropHeight = uni.getSystemInfoSync().windowWidth * (this.storeJoinin.store_type==0 ? 1.6 :.63)
	  //       that.cropperOption1.maxImgSize =uni.getSystemInfoSync().windowHeight -40
	  //       that.$forceUpdate()
	  //   },
      // useCrop(res) {
      //   var formdata = {
      //     filePath: res.url,
      //     name: 'file'
      //   }
      //   uni.showLoading({
      //     title: '加载中'
      //   })
      //   uploadInfoFile(formdata).then(res => {
      //     this.storeJoinin.business_licence_number_electronic = res.result.path
      //     this.storeJoinin.business_licence_number_electronic_url = res.result.url
      //     this.imageValue = [{
      //       name: 'business_licence_number_electronic',
      //       extname: 'jpg',
      //       url: this.storeJoinin.business_licence_number_electronic_url
      //     }]
      //     this.cropperOption.imgUrl = ''
      //     this.$forceUpdate()
      //     uni.hideLoading()
      //   }).catch(function(error) {
      //     uni.showToast({
      //       icon: 'none',
      //       title: error.message
      //     })
      //     uni.hideLoading()
      //     this.cropperOption.imgUrl = ''
      //     this.$forceUpdate()
      //   })
      // },
	  
	  // useCrop1(res) {
	  //   var formdata = {
	  //     filePath: res.url,
	  //     name: 'file'
	  //   }
	  //   uni.showLoading({
	  //     title: '加载中'
	  //   })
	  //   uploadInfoFile(formdata).then(res => {
	  //     this.storeJoinin.business_author_letter = res.result.path
	  //     this.storeJoinin.business_author_letter_url = res.result.url
	  //     this.imageValue1 = [{
	  //       name: 'business_author_letter',
	  //       extname: 'jpg',
	  //       url: this.storeJoinin.business_author_letter_url
	  //     }]
	  //     this.cropperOption1.imgUrl = ''
	  //     this.$forceUpdate()
	  //     uni.hideLoading()
	  //   }).catch(function(error) {
	  //     uni.showToast({
	  //       icon: 'none',
	  //       title: error.message
	  //     })
	  //     uni.hideLoading()
	  //     this.cropperOption1.imgUrl = ''
	  //     this.$forceUpdate()
	  //   })
	  // },
      // cropReady() {
      //   this.cropperOption.img = this.cropperOption.imgUrl
      // },
	  // cropReady1() {
	  //   this.cropperOption1.img = this.cropperOption1.imgUrl
	  // },
      //cropBack(){
      //   this.cropperOption.imgUrl=''
      //   this.$forceUpdate()
      // },
	 //  cropBack1(){
	 // this.cropperOption1.imgUrl=''
	 //    this.$forceUpdate()
	 //  },
    selectCity (city_name) {
      getPointByAddress(city_name).then(res => {
        if (res.result.location) {
          var lng = res.result.location.lng
          var lat = res.result.location.lat
          if (this.regionName == 'company_address') {
            this.storeJoinin.store_latitude = lat
            this.storeJoinin.store_longitude = lng
          }
          if (this.regionName == 'business_licence_address') {

          }

          this.memberPoint({ point: { lng: lng, lat: lat, address: res.result.sematic_description, cityCode: res.result.cityCode, cityName: city_name } })
          this.$forceUpdate()
        } else {
          uni.showToast({icon:'none',title: '无法获取城市位置'})
        }
      }).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;}
    }
  .main-content{background: #fff;padding:0 $pageSpace}
  .container {
    background: #fff;
  }
  .label {
    padding: .5rem;
    font-size:$h2;
    background: #eee;
  }
  .look-button{
	  margin-top:.5rem; ;
	  color: #999;
	  font-weight: 400;
  }
</style>