410 lines
9.3 KiB
Vue
410 lines
9.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="header">
|
||
<view class="title">企业认证</view>
|
||
<view class="subtitle">请如实填写认证信息，快速审核开店</view>
|
||
</view>
|
||
<view class="white-box">
|
||
<view class="inputs logo">
|
||
<label>企业LOGO</label>
|
||
<image class="logo-cover" :src="logo.showpath || require('@/static/icons/add-icon.png')"
|
||
@click="updImg('logo')" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="inputs">
|
||
<label>企业名称</label>
|
||
<input type="text" v-model="name" placeholder="输入企业名称" />
|
||
</view>
|
||
<view class="inputs">
|
||
<label>企业行业</label>
|
||
<picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title"
|
||
@change="changePicker" data-type="industry">
|
||
<view class="picker-text nowrap">
|
||
{{industry[industryIndex].title}}
|
||
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="inputs">
|
||
<label>经营类目</label>
|
||
<view class="picker-text nowrap" @click="opnePopup">
|
||
<block v-if="categorys.length > 0">
|
||
<text class="text-item" v-for="(item, index) in category" :key="index"
|
||
v-if="item.check">{{item.name}}</text>
|
||
</block>
|
||
<block v-else>选择经营类目</block>
|
||
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="inputs" v-if="is_range">
|
||
<label>经营范围</label>
|
||
<textarea :auto-height='true' v-model="range" placeholder="输入经营范围" />
|
||
</view>
|
||
<view class="inputs">
|
||
<label>法人姓名</label>
|
||
<input type="text" v-model="corporate" placeholder="输入法人姓名" />
|
||
</view>
|
||
<view class="inputs">
|
||
<label>法人身份证</label>
|
||
<input type="text" v-model="identity" placeholder="输入法人身份证" />
|
||
</view>
|
||
<view class="inputs">
|
||
<label>机构代码</label>
|
||
<input type="text" v-model="org" placeholder="输入企业组织机构代码" />
|
||
</view>
|
||
<view class="inputs logo">
|
||
<label>营业执照</label>
|
||
<image class="license-cover" :src="license.showpath || require('@/static/icons/add-icon.png')"
|
||
@click="updImg('license')" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="btns">
|
||
<button type="default" size="default" @click="submitApplies">提交认证</button>
|
||
</view>
|
||
</view>
|
||
<!-- 经营类目 -->
|
||
<uni-popup ref="categoryPopup">
|
||
<view class="category-popup">
|
||
<view class="header">
|
||
<view class="title">经营类目</view>
|
||
<view class="subtitle">请选择经营类目</view>
|
||
</view>
|
||
<view class="category-flex">
|
||
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in category"
|
||
:key="index" @click="item.check = !item.check">{{item.name}}</view>
|
||
</view>
|
||
<view class="btns">
|
||
<button type="default" size="default" @click="affirmCategory">确定</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
appliesCreate,
|
||
applies,
|
||
appliesInfo,
|
||
appliesCategory
|
||
} from '@/apis/interfaces/company'
|
||
import {
|
||
uploads
|
||
} from '@/apis/interfaces/uploading'
|
||
export default {
|
||
data() {
|
||
return {
|
||
formType: "",
|
||
name: "",
|
||
corporate: "",
|
||
identity: "",
|
||
org: "",
|
||
logo: {
|
||
showpath: '',
|
||
path: ''
|
||
},
|
||
license: {
|
||
showpath: '',
|
||
path: ''
|
||
},
|
||
industry: [],
|
||
industryIndex: 0,
|
||
reason: '',
|
||
category: [],
|
||
categorys: [],
|
||
range: "",
|
||
is_range: false,
|
||
};
|
||
},
|
||
created() {
|
||
// 读取配置信息
|
||
appliesCreate().then(res => {
|
||
this.industry = res.industries
|
||
this.formType = this.$Route.query.form_type
|
||
this.is_range = res.is_range
|
||
if (this.formType === 'put') {
|
||
appliesInfo().then(formValue => {
|
||
for (let val of formValue.categories) {
|
||
if (val.check) {
|
||
this.categorys.push(val.category_id)
|
||
}
|
||
}
|
||
this.range = formValue.range
|
||
this.name = formValue.name
|
||
this.industryIndex = this.industry.findIndex(val => val.industry_id === formValue
|
||
.industry.industry_id)
|
||
this.category = formValue.categories
|
||
this.corporate = formValue.certification.name
|
||
this.identity = formValue.certification.idcard
|
||
this.org = formValue.certification.code
|
||
this.logo = formValue.cover
|
||
this.license = formValue.certification.license
|
||
}).catch(valueErr => {
|
||
uni.showToast({
|
||
title: valueErr.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
} else {
|
||
this.getAppliesCategory(res.industries[0].industry_id)
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
methods: {
|
||
// 选择经营类目
|
||
opnePopup() {
|
||
this.$refs.categoryPopup.open('bottom')
|
||
},
|
||
// 确认选择类目
|
||
affirmCategory() {
|
||
this.categorys = []
|
||
for (let val of this.category) {
|
||
if (val.check) {
|
||
this.categorys.push(val.category_id)
|
||
}
|
||
}
|
||
this.$refs.categoryPopup.close()
|
||
},
|
||
// 提交信息
|
||
submitApplies() {
|
||
let method = this.formType === 'put' ? 'PUT' : 'POST'
|
||
applies({
|
||
name: this.name,
|
||
cover: this.logo.path,
|
||
license: this.license.path,
|
||
user_name: this.corporate,
|
||
id_card: this.identity,
|
||
code: this.org,
|
||
industry_id: this.industry[this.industryIndex].industry_id,
|
||
categories: this.categorys,
|
||
range: this.range
|
||
}, method).then(res => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您的企业认证信息已提交，审核需3-7个工作日，请耐心等待',
|
||
showCancel: false,
|
||
confirmText: '确认',
|
||
success: resModal => {
|
||
this.$Router.back()
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 选择器
|
||
changePicker(e) {
|
||
this.industryIndex = e.detail.value
|
||
this.getAppliesCategory(this.industry[e.detail.value].industry_id)
|
||
},
|
||
|
||
// 获取经营类目
|
||
getAppliesCategory(id) {
|
||
appliesCategory({
|
||
industry: id,
|
||
}).then(res => {
|
||
this.category = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 上传图片
|
||
updImg(type) {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: path => {
|
||
uploads([{
|
||
uri: path.tempFilePaths[0]
|
||
}]).then(res => {
|
||
this[type] = {
|
||
showpath: res.url[0],
|
||
path: res.path[0]
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 内容
|
||
.content {
|
||
overflow: hidden;
|
||
.header {
|
||
padding: $padding * 2 0;
|
||
box-sizing: border-box;
|
||
@extend .vertical;
|
||
.title {
|
||
text-align: center;
|
||
font-size: $title-size + 14;
|
||
font-weight: bold;
|
||
line-height: 90rpx;
|
||
}
|
||
.subtitle {
|
||
font-size: $title-size-m;
|
||
color: $text-gray;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.white-box {
|
||
background-color: white;
|
||
border-radius: $radius $radius 0 0;
|
||
min-height: 85vh;
|
||
padding: $padding $padding * 2 $padding * 2;
|
||
box-sizing: border-box;
|
||
.inputs {
|
||
position: relative;
|
||
margin-top: $margin;
|
||
background: white;
|
||
border-bottom: solid 1rpx $border-color;
|
||
padding-left: 200rpx;
|
||
line-height: 90rpx;
|
||
min-height: 90rpx;
|
||
label {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 200rpx;
|
||
font-size: $title-size;
|
||
}
|
||
input {
|
||
width: 100%;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: $title-size;
|
||
}
|
||
textarea{
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
line-height: 50rpx;
|
||
font-size: $title-size;
|
||
}
|
||
.picker-text {
|
||
position: relative;
|
||
padding-right: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: $title-size;
|
||
.picker-icon {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.text-item {
|
||
margin-left: 10rpx;
|
||
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.logo {
|
||
height: $padding + 98;
|
||
padding-bottom: $padding;
|
||
|
||
.logo-cover {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
background: $border-color-lg;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.license-cover {
|
||
@extend .logo-cover;
|
||
border-radius: 0;
|
||
width: 131rpx;
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
padding-top: $padding * 2;
|
||
|
||
button {
|
||
background: $mian-color;
|
||
border-radius: 0;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: $title-size;
|
||
color: white;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 经营类目
|
||
.category-popup {
|
||
background: #F5F5F5;
|
||
padding: 0 $padding * 2 $padding * 2 $padding * 2;
|
||
|
||
.header {
|
||
padding-bottom: $padding;
|
||
}
|
||
|
||
.category-flex {
|
||
margin: 0 -10rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.category-flex-item {
|
||
margin: 10rpx;
|
||
background: white;
|
||
width: calc(33.33% - 20rpx);
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
font-size: $title-size-m;
|
||
@extend .nowrap;
|
||
|
||
&.show {
|
||
color: white;
|
||
background-color: $mian-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
padding-top: $padding * 2;
|
||
|
||
button {
|
||
background: $mian-color;
|
||
border-radius: 0;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: $title-size;
|
||
color: white;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|