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 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" :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="imageValue" fileMediatype="image" mode="grid" :limit="1" :auto-upload="false" @select="uploadImage" @delete="dropImage()" :image-styles="{
                        width:'200px',
                        height:'160px',
                        }"></uni-file-picker>
                    </view>
          </view>
        </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="imageValue1" fileMediatype="image" mode="grid" :limit="1" :auto-upload="false" @select="uploadImage1" @delete="dropImage1()" :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" >
        <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,
      imageValue:[],
	  imageValue1:[],
      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.imageValue = [{
            name: 'business_licence_number_electronic',
            extname: 'jpg',
            url: data.business_licence_number_electronic_url
          }]
        }   
		if(data.business_author_letter_url){
          this.imageValue1 = [{
            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 => {
            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})
          }
        )
      }
    }).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')
    },
    dropImage () {
      this.storeJoinin.business_licence_number_electronic = ''
      this.$forceUpdate()
    },
	dropImage1 () {
	  this.storeJoinin.business_author_letter = ''
	  this.$forceUpdate()
	},
    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) * (this.storeJoinin.store_type==0 ? 1 :.63)
          that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
          that.$forceUpdate()
      },
	  uploadImage1(event) {
	      var file = event.tempFiles[0]
	      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 :.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;
  }
</style>