hlm_pl_mall_h5/pages/member/sellerjoinin/Step5.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="div container">
        <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="3"></step>
        <view class="div" v-if="storeJoinin.joinin_state==20 || storeJoinin.joinin_state==31">
            <view v-if="storeJoinin.joinin_state==31 || storeJoinin.joinin_state==11" class="div notice">{{title}}:{{message}}</view>
            <view v-if="storeJoinin.joinin_state!=11" class="div content">
                <view class="div" @click="showPopup('showDetail')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">申请信息</text></flex-line></view>
                <flex-line :show-border="true"><text class="span line-name">应付金额</text><text class="span" slot="right">{{storeJoinin.paying_amount}}元</text></flex-line>
                <flex-line :show-border="true">
                    <text class="span">支付方式</text>
                    <view slot="right">
          <radio-group @change="radioChange">
            <label v-for="(item, index) in paymentTypeOption" :key="index">
              <radio :value="item.value" :checked="paymentType==item.value" />
              <text>{{item.label}}</text>
            </label>
          </radio-group>
                    </view>
                </flex-line>
                <flex-line v-if="paymentType=='1'" class="pt-5" :show-border="true">
                    <text class="span">付款凭证</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 v-if="paymentType=='1'" 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.paying_money_certificate_explain" /></view></flex-line>
                <view v-if="paymentType=='1'" class="payment-notice" @click="onAgreement()">不清楚平台收款账号？</view>
            </view>
            <view class="div common-btn ds-button-large mt-10"  @click="nextStep">提交</view>
        </view>
        <view class="div main-content" v-else>
            <image mode="aspectFit" class="img center-image" :src="sellerjoininwait" />
            <view class="div big-title">{{title}}</view>
            <view class="div desc">{{message}}</view>
        </view>
        <view class="div">
            <uni-popup background-color="#fff" ref="showDetail" 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('showDetail')">
                    </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">
                    <view class="div label">公司及联系人信息</view>
                    <view class="div content">
                        <flex-line :show-border="true"><text class="span line-name">{{storeJoinin.store_type==1?'店铺名称':'公司名称'}}</text><text class="span" slot="right">{{storeJoinin.company_name}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">所在地</text><text class="span" slot="right">{{storeJoinin.company_address}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">详细地址</text><text class="span" slot="right">{{storeJoinin.company_address_detail}}</text></flex-line>
                        <flex-line v-if="storeJoinin.store_type==0" :show-border="true"><text class="span line-name">注册资金</text><text class="span" slot="right">{{storeJoinin.company_registered_capital}}万元</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">联系人姓名</text><text class="span" slot="right">{{storeJoinin.contacts_name}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">联系人电话</text><text class="span" slot="right">{{storeJoinin.contacts_phone}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">电子邮箱</text><text class="span" slot="right">{{storeJoinin.contacts_email}}</text></flex-line>
                    </view>
                    <view class="div label">营业执照信息（副本）</view>
                    <view class="div content">
                        <flex-line :show-border="true"><text class="span line-name">营业执照号</text><text class="span" slot="right">{{storeJoinin.business_licence_number}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">营业执照所在地</text><text class="span" slot="right">{{storeJoinin.business_licence_address}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">有效期起始</text><text class="span" slot="right">{{storeJoinin.business_licence_start}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">有效期结束</text><text class="span" slot="right">{{storeJoinin.business_licence_end}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">经营范围</text><text class="span" slot="right">{{storeJoinin.business_sphere}}</text></flex-line>
                        <flex-line class="pt-5" :show-border="true">
                            <text class="span">营业执照电子版</text>
                            <view class="div" slot="right">
                                <view class="div user-avatar-wrapper">
                                    <view class="div user-avatar">
                                        <image mode="aspectFit" class="img" :src="storeJoinin.paying_money_certificate_url" @click="openImage(storeJoinin.paying_money_certificate_url)">
                                    </view>
                                </view>
                            </view>
                        </flex-line>
                    </view>
                    <view class="div" v-if="storeJoinin.store_type==0">
                        <view class="div label">开户银行信息</view>
                        <view class="div content">
                            <flex-line :show-border="true"><text class="span line-name">银行开户名</text><text class="span" slot="right">{{storeJoinin.bank_account_name}}</text></flex-line>
                            <flex-line :show-border="true"><text class="span line-name">公司银行账号</text><text class="span" slot="right">{{storeJoinin.bank_account_number}}</text></flex-line>
                            <flex-line :show-border="true"><text class="span line-name">银行支行名称</text><text class="span" slot="right">{{storeJoinin.bank_name}}</text></flex-line>
                            <flex-line :show-border="true"><text class="span line-name">银行所在地</text><text class="span" slot="right">{{storeJoinin.bank_address}}</text></flex-line>
                        </view>
                        <view class="div label">结算账号信息</view>
                        <view class="div content">
                            <flex-line :show-border="true"><text class="span line-name">银行开户名</text><text class="span" slot="right">{{storeJoinin.settlement_bank_account_name}}</text></flex-line>
                            <flex-line :show-border="true"><text class="span line-name">公司银行账号</text><text class="span" slot="right">{{storeJoinin.settlement_bank_account_number}}</text></flex-line>
                            <flex-line :show-border="true"><text class="span line-name">银行支行名称</text><text class="span" slot="right">{{storeJoinin.settlement_bank_name}}</text></flex-line>
                            <flex-line :show-border="true"><text class="span line-name">银行所在地</text><text class="span" slot="right">{{storeJoinin.settlement_bank_address}}</text></flex-line>
                        </view>
                    </view>
                    <view class="div" v-else>
                        <view class="div label">结算账号信息</view>
                        <view class="div content">
                            <flex-line :show-border="true"><text class="span line-name">支付宝姓名</text><text class="span" slot="right">{{storeJoinin.settlement_bank_account_name}}</text></flex-line>
                            <flex-line :show-border="true"><text class="span line-name">支付宝账号</text><text class="span" slot="right">{{storeJoinin.settlement_bank_account_number}}</text></flex-line>
                        </view>
                    </view>
                    <view class="div content">
                        <flex-line :show-border="true"><text class="span line-name">商家账号</text><text class="span" slot="right">{{storeJoinin.seller_name}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">店铺名称</text><text class="span" slot="right">{{storeJoinin.store_name}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">店铺等级</text><text class="span" slot="right">{{storeJoinin.storegrade_name}}</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">开店时长</text><text class="span" slot="right">{{storeJoinin.joinin_year}}年</text></flex-line>
                        <flex-line :show-border="true"><text class="span line-name">店铺分类</text><text class="span" slot="right">{{storeJoinin.storeclass_name}}</text></flex-line>
                        <view class="div" @click="showPopup('showGoodsClass')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">经营类目</text></flex-line></view>
                    </view>
					</scroll-view>
                </view>
            </view>
            </uni-popup>
            <uni-popup background-color="#fff" ref="showGoodsClass" 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('showGoodsClass')">
                    </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">
                    <view class="div content">
                        <view class="div" v-for="(goods_class,index) in storeJoinin.store_class_names" :key="index">
                            <flex-line :show-border="true"><text class="span line-name">{{goods_class}}</text><text class="span" slot="right">{{storeJoinin.store_class_commis_rates[index]}}%</text></flex-line>
                        </view>
                    </view>
					</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>
        </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></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 Step from '../../Step'
import { env } from '../../../static/config'
import { getStoreJoinin, saveStoreJoinin5, uploadInfoFile } from '../../../api/seller'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    Step,
    tuiPictureCropper
  },
  data(){
    return {
        paymentType:'0',
        paymentTypeOption: [
            {
                label: '在线支付',
                value: '0'
            },
            {
                label: '线下支付',
                value: '1'
            }
        ],
      navHeight: 0,
      imageValue:[],
      screenWidth:0,
      screenHeight:0,
      cropperOption: {
        img: '',
        canMove: false,
        autoCrop: true,
        autoCropWidth: 100,
        autoCropHeight: 100,
        maxImgSize: 500,
        outputType: 'png'
      },
      options: [{ title: '公司资质' }, { title: '财务资质' }, { title: '店铺信息' }, { title: '合同签订' }],
      showimage: '',
      message: '',
      title: '',
	  sellerjoininwait:env.SITE_URL + "/uploads/home/h5/sellerjoinin_wait.png"
    }
  },
  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,
    }),
    storeJoinin:function(){
      var data
      if(this.storeJoininType==1){
        data = this.storeJoinin1
      }else{
        data = this.storeJoinin0
      }
      if(data.paying_money_certificate_url){
          this.imageValue = [{
            name: 'paying_money_certificate',
            extname: 'jpg',
            url: data.paying_money_certificate_url
          }]
        }
      return data
    },
    getBannerStyle: function () {
      let itemWidth = this.screenWidth
      let itemHeight = this.screenHeight
      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 == 40) {
          uni.showToast({icon:'none',title: '您的店铺已开通'})
          return
        }
        this.sellerJoininSave({ storeJoinin: store_joinin })
        if (store_joinin.joinin_state == 10) {
          this.message = '感谢您在本平台申请商家入驻'
          this.title = '正在审核中'
        } else if (store_joinin.joinin_state == 11) {
          this.title = '付款审核中'
          this.message = '请等待管理员审核打款'
        } else {
          // if (store_joinin.joinin_state == 20) {
          //   this.title = '初审成功'
          //   this.message = '应付金额' + store_joinin.paying_amount + '元'
          // } else {
          if (store_joinin.joinin_state == 30) {
            this.title = '初审失败'
          }
          if (store_joinin.joinin_state == 31) {
            this.title = '付款审核失败'
          }
          this.message = store_joinin.joinin_message
          // }
        }
      }
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
  },

  methods:{
    radioChange(e){
      this.paymentType=e.detail.value
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapMutations({
      sellerJoininSave: 'sellerJoininSave'
    }),
    nextStep () {
      if(this.paymentType=='1'){
      saveStoreJoinin5(this.storeJoinin).then(res => {
        this.sellerJoininSave({ storeJoinin: this.storeJoinin })
        this.storeJoinin.joinin_state = 11
        this.title = '付款审核中'
        this.message = '请等待管理员审核打款'
      }).catch(error => {
        uni.showToast({icon:'none',title: error.message})
      })
        }else{
          uni.navigateTo({url:'/pages/member/buy/pay?pay_type=sj_pay'})
        }
    },
    openImage (src) {
      this.showimage = src
      this.showPopup('isshow')
    },
    dropImage () {
      this.storeJoinin.paying_money_certificate = ''
    },
    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: 'file'
        }
        uni.showLoading({
          title: '加载中'
        })
        uploadInfoFile(formdata).then(res => {
          this.storeJoinin.paying_money_certificate = res.result.path
          this.storeJoinin.paying_money_certificate_url = res.result.url
          this.imageValue = [{
            name: 'paying_money_certificate',
            extname: 'jpg',
            url: this.storeJoinin.paying_money_certificate_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()
        })
      },
      cropReady() {
        this.cropperOption.img = this.cropperOption.imgUrl
      },
      cropBack(){
        this.cropperOption.imgUrl=''
        this.$forceUpdate()
      },
      onAgreement () {
          uni.navigateTo({ url: '/pages/home/article/Document?type=open_store'})
      },
  }
}
</script>
<style  lang="scss" scoped>
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .content{background: #fff;padding:0 $pageSpace}
    .container {
        background: #fff;
    }
    .label {
        padding: .5rem;
        font-size:$subFontSize;
        background: #eee;
    }
    .notice{font-size:$subFontSize;padding:.5rem;background:#FCF8E3;color:#C09853;line-height: 1.65rem;}
    .center-image{width: 300rpx;height: 217rpx;}
    .main-content{text-align: center;padding:2rem}
    .big-title{margin-top:2rem;margin-bottom: 1rem;}
    .desc{font-size:$h2;color:#666}

        .payment-notice{
            font-size:$fontSize;
            color:$primaryColor;
            padding:1rem 0;
            text-align: right;
        }
</style>