472 lines
16 KiB
Vue
472 lines
16 KiB
Vue
<template>
|
||
<view class="wrap">
|
||
<u--form :model="applyInfo" ref="uForm" error-type="message">
|
||
<u-form-item prop="shop_type" label-position="left" label="商户类型" label-width="190">
|
||
<view class="" @click="uinp">
|
||
<u--input placeholder="点击选择" type="text" disabled :placeholder-style="placeholderStyle"
|
||
v-model="applyInfo.shop_type"></u--input>
|
||
</view>
|
||
<u-action-sheet @close="close" @select="select" :closeOnClickOverlay="false" cancelText="取消"
|
||
:actions="ysDict.shop_type()" :show="show" round='20' :title="title"></u-action-sheet>
|
||
</u-form-item>
|
||
<u-form-item label="所属行业类型" label-width="190" right-icon="arrow-right" prop="industry">
|
||
<!-- <u--input placeholder="点击查询 接口返" :placeholder-style="placeholderStyle" v-model="applyInfo.industry"
|
||
type="text"></u--input> -->
|
||
<view class="" @click="uinp">
|
||
<u--input placeholder="点击选择" type="text" disabled :placeholder-style="placeholderStyle"
|
||
v-model="applyInfo.industry"></u--input>
|
||
</view>
|
||
<u-action-sheet @close="close" @select="select" :closeOnClickOverlay="false" cancelText="取消"
|
||
:actions="ysDict.shop_type()" :show="show" round='20' :title="title"></u-action-sheet>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="店铺名称" label-width="190" prop="shop_name">
|
||
<u--input v-model="applyInfo.shop_name" :placeholder="mercNameFormat" type="text" placeholder="请输入店铺名称"
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<u-form-item label="门头照片" label-width="190" prop='door_photo'>
|
||
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" width="160"
|
||
height="160" :maxCount="1"></u-upload>
|
||
</u-form-item>
|
||
<u-form-item label="内部照片" label-width="190" prop='interior_photo'>
|
||
<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" width="160"
|
||
height="160" :maxCount="1"></u-upload>
|
||
</u-form-item>
|
||
<u-form-item label="营业执照" prop="license" label-width="190">
|
||
<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" width="160"
|
||
height="160" :maxCount="1"></u-upload>
|
||
</u-form-item>
|
||
<u-form-item label="统一社会信用代码" label-width="190" prop="uscc">
|
||
<u--input v-model="applyInfo.uscc" placeholder='请输入统一社会信用代码号' type="text"
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<u-form-item label="营业执照名称" label-width="190" prop="license_name">
|
||
<u--input v-model="applyInfo.license_name" type="text" :placeholder="mercNameFormat"
|
||
placeholder='请输入营业执照名称' :placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
|
||
<u-form-item label="营业执照有效日期" label-width="250" prop="license_validity">
|
||
<u--input v-model="applyInfo.license_validity" type="text" placeholder='请输入营业执照有效日期'
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<u-form-item label="商户营业地区" label-width="190" right-icon="arrow-right" prop="area">
|
||
<u--input placeholder="点击选择" v-model="applyInfo.area" type="text" disabled @click="toSelAdr"
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<!-- 营业执照上的地址 -->
|
||
<u-form-item label="营业执照地址" label-width="190" prop="license_address">
|
||
<u-input v-model="applyInfo.license_address" type="text" placeholder='请输入营业详细地址'
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<!-- 店铺地址 -->
|
||
<u-form-item label="营业地址" label-width="190" prop="address">
|
||
<u-input v-model="applyInfo.address" placeholder='请输入店铺地址' type="text"
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<u-form-item label="法人身份证正面" prop="idcard_front" label-width="190">
|
||
<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" width="160"
|
||
height="160" :maxCount="1"></u-upload>
|
||
</u-form-item>
|
||
<u-form-item label="法人身份证反面" prop="idcard_back" label-width="190">
|
||
<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" width="160"
|
||
height="160" :maxCount="1"></u-upload>
|
||
</u-form-item>
|
||
<u-form-item label="法人姓名" label-width="190" prop="name">
|
||
<u--input v-model="applyInfo.name" type="text" placeholder='请输入法人姓名'
|
||
:placeholder-style="placeholderStyle"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="法人证件号" label-width="190" prop="id_umber">
|
||
<u--input v-model="applyInfo.id_umber" type="text" placeholder='请输入法人证件号'
|
||
:placeholder-style="placeholderStyle"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="法人手机号" label-width="190" prop="phone">
|
||
<u--input v-model="applyInfo.phone" type="text" placeholder='请输入手机号'
|
||
:placeholder-style="placeholderStyle"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="法人邮箱" label-width="190" prop="email">
|
||
<u--input v-model="applyInfo.email" type="text" placeholder='请输入邮箱号'
|
||
:placeholder-style="placeholderStyle"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="是否法人结算" label-width="190" prop="isCrpSett">
|
||
<u-switch v-model="isCrpSett" size='40'></u-switch>
|
||
</u-form-item>
|
||
<!-- 非法人专属-->
|
||
<u-form-item label="结算户名" label-width="190" prop="settlement_name" v-if="!isCrpSett">
|
||
<u--input v-model="applyInfo.settlement_name" placeholder='请输入结算户名'
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<!--非法人专属-->
|
||
<u-form-item label="银行预留手机号" label-width="250" prop="bank_phone" v-if="!isCrpSett">
|
||
<u--input v-model="applyInfo.bank_phone" placeholder='请输入银行预留手机号' type="text"
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<!-- 非法人专属-->
|
||
<u-form-item v-if="!isCrpSett" label="开户人证件号" label-width="190" prop="account_number">
|
||
<u--input v-model="applyInfo.account_number" placeholder='请输入开户人证件号' type="text"
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<!-- 非法人专属 -->
|
||
<u-form-item label="结算账户正面(卡号面)" label-width="250" prop="fbank_copy">
|
||
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" width="160"
|
||
height="160" :maxCount="1"></u-upload>
|
||
</u-form-item>
|
||
</u-form-item>
|
||
<u-form-item label="结算账户反面" label-width="250" prop="bbank_copy">
|
||
<u-upload :fileList="fileList7" @afterRead="afterRead" @delete="deletePic" name="7" width="160"
|
||
height="160" :maxCount="1"></u-upload>
|
||
</u-form-item>
|
||
<u-form-item label="结算账号" label-width="190" prop="bank_number">
|
||
<u--input v-model="applyInfo.bank_number" placeholder='请输入结算账号址'
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
|
||
<u-form-item label="开户支行" label-width="190" right-icon="arrow-right" prop="account_bank">
|
||
<u--input placeholder="请输入开户支行" v-model="applyInfo.account_bank" type="text" @click="toSelBank(0)"
|
||
:placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
<u-form-item label="费率（%）" label-width="190">
|
||
<u--input type="text" v-model="applyInfo.rates" placeholder='费率（%）'
|
||
:placeholder-style="placeholderStyle"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="设备编号" label-width="190" prop="equipment_no">
|
||
<u-row gutter="16">
|
||
<u-col span="11">
|
||
<u-input style="width: 200px;" placeholder="请输入音箱设备上的条码" v-model="applyInfo.equipment_no"
|
||
type="text" :placeholder-style="placeholderStyle" />
|
||
</u-col>
|
||
<u-col span="1">
|
||
<u-icon name="scan" color="#2979ff" size="60" @click="scancodeDevice"></u-icon>
|
||
</u-col>
|
||
</u-row>
|
||
</u-form-item>
|
||
<u-form-item label="客户经理" label-width="190">
|
||
<u--input v-model="applyInfo.manager" placeholder='请输入客户经理' :placeholder-style="placeholderStyle" />
|
||
</u-form-item>
|
||
</u--form>
|
||
<!-- 协议 -->
|
||
<view class="agreement">
|
||
<view class="agreement-text">
|
||
<u-checkbox-group size='35' iconSize='25' v-model="check_agreement" placement="column"
|
||
@change="check_agreement_Change">
|
||
<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
|
||
:label="item.name" :name="item.name" labelSize='30'>
|
||
</u-checkbox>
|
||
</u-checkbox-group>
|
||
<u-tag v-for="(value,index) in agreement_list" :text="value.title+'、'" :index=index
|
||
border-color="#ffffff" mode="plain" :show="!agreement_show" @click="agreement_Click" />
|
||
</view>
|
||
</view>
|
||
<!-- 签名 -->
|
||
<view v-show="show_sign">
|
||
<view>商户签名</view>
|
||
<signInput ref="sign" canvasId="oneDrowCanvas" canvasIds="oneRotateCanvas" :header="{}"
|
||
:action="post_url+ 'upload_file'" @signToUrl="merchSign"></signInput>
|
||
<view>经理签名</view>
|
||
<signInput ref="sign" canvasId="twoDrowCanvas" canvasIds="twoRotateCanvas" :header="{}"
|
||
:action="post_url+ 'upload_file'" @signToUrl="managerSign"></signInput>
|
||
</view>
|
||
<!-- 协议内容 -->
|
||
<u-popup v-model="agreement_show" mode="center" width="100%" height="100%" :closeable="true"
|
||
close-icon-color="#FF0000">
|
||
<u-parse :html="agreement_content" class="u-padding-20"></u-parse>
|
||
</u-popup>
|
||
<!-- 提交 -->
|
||
<u-button class="subBtn" @click="applySubmit">提交</u-button>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import ysDict from '@/pages/index/dictDatas.js'
|
||
import signInput from "@/pages/index/am-sign-input.vue"
|
||
import {
|
||
getBase64Image
|
||
} from '@/utils/imgtobase.js'
|
||
import {
|
||
get_agreement,
|
||
uploadInfoToYs,
|
||
modifyInfoToYs,
|
||
uploadImgsToYs,
|
||
auditInfoToYs,
|
||
signToYs
|
||
} from '@/utils/api.js'
|
||
export default {
|
||
components: {
|
||
signInput
|
||
},
|
||
data() {
|
||
return {
|
||
checkboxList1: [{
|
||
name: '代表同意',
|
||
disabled: false
|
||
}],
|
||
title: '商户类型',
|
||
show: false, //商户类型
|
||
ysDict: [],
|
||
check_agreement: [],
|
||
show_sign: false, //显示签名
|
||
agreement_list: [],
|
||
fileList1: [], //图片
|
||
fileList2: [], //图片
|
||
fileList3: [], //图片
|
||
fileList4: [], //图片
|
||
fileList5: [], //图片
|
||
fileList6: [], //图片
|
||
fileList7: [], //图片
|
||
applyInfo: {
|
||
//基本信息
|
||
shop_name: '', //商户名称
|
||
shop_type: '', //商户类型
|
||
industry: '', //所属行业类型
|
||
email: '', //联系人邮箱
|
||
manager: '', //客户经理，推广人姓名
|
||
//图片信息
|
||
door_photo: '', //门头照片
|
||
interior_photo: "", //内部照片
|
||
license: "", //营业执照
|
||
id_card: { //身份证 json的转字符串
|
||
front_img: '', //正面照片
|
||
back_img: "", //反面照片
|
||
},
|
||
bank_card: { //银行卡 json的转字符串
|
||
front_img: '', //正面照片
|
||
back_img: "", //反面照片
|
||
},
|
||
//法人信息
|
||
id_umber: '', //法人证件号
|
||
name: '', //法人姓名
|
||
phone: '', //法人手机号
|
||
//结算信息
|
||
is_legal: '', //是否非法人结算,Y是 N否，默认否
|
||
settlement_name: '', //结算户名
|
||
bank_number: '', //结算账号
|
||
account_bank: '', //开户支行
|
||
bank_phone: '', //银行预留手机号,非法人结算必填
|
||
account_number: '', //开开户证件号,非法人结算必填
|
||
//营业信息
|
||
uscc: '', //营业执照号
|
||
license_name: '', //营业执照名称
|
||
license_validity: '', //营业执照有效期
|
||
area: '', //省市区
|
||
license_address: '', //营业详细地址
|
||
address: '', //真是店铺地址
|
||
equipment_no: '', //机器条码
|
||
rates: '' //费率
|
||
},
|
||
isCrpSett: true, //是否法人结算
|
||
post_url: "",
|
||
idcard_front: {
|
||
'type': 'idcard',
|
||
'id_card_side': 'front'
|
||
}, //身份证正面
|
||
idcard_back: {
|
||
'type': 'idcard',
|
||
'id_card_side': 'back'
|
||
}, //身份证反面
|
||
license_copy: {
|
||
'type': 'business_license'
|
||
}, //营业执照
|
||
merch_sign: '', //商家签名图片
|
||
manager_sign: '', //经理签名图片
|
||
agreement_content: '', //协议内容
|
||
agreement_show: false, //显示协议内容
|
||
sigUrl: '',
|
||
mercNameFormat: '',
|
||
placeholderStyle: 'font-size:22rpx;color:#c0c4cc;'
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
this.post_url = getApp().globalData.baidu_sdk_url
|
||
this.ysDict = ysDict
|
||
// this.busOpenTypes = ysDict.busOpenTypes()
|
||
var curUser = uni.getStorageSync('user_info')
|
||
},
|
||
watch: {
|
||
//监听法人结算值
|
||
isCrpSett: {
|
||
handler: function(n, o) {
|
||
console.log(n)
|
||
this.applyInfo.is_legal = n ? 'N' : 'Y'
|
||
},
|
||
immediate: true
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
// 删除图片
|
||
deletePic(event) {
|
||
this[`fileList${event.name}`].splice(event.index, 1)
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
let lists = [].concat(event.file)
|
||
// let fileListLen = this[`fileList${event.name}`].length
|
||
lists.map((item) => {
|
||
getBase64Image(item.file).then((dataURL) => {
|
||
console.log('data:image/jpeg;base64,' + dataURL); //这就是转换成功后的base64格式的图片
|
||
});
|
||
this[`fileList${event.name}`].push({
|
||
...item,
|
||
// status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
})
|
||
|
||
// for (let i = 0; i < lists.length; i++) {
|
||
// const result = await this.uploadFilePromise(lists[i].url)
|
||
// let item = this[`fileList${event.name}`][fileListLen]
|
||
// this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||
// status: 'success',
|
||
// message: '',
|
||
// url: result
|
||
// }))
|
||
// fileListLen++
|
||
// }
|
||
},
|
||
uploadFilePromise(url) {
|
||
return new Promise((resolve, reject) => {
|
||
let a = uni.uploadFile({
|
||
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
||
filePath: url,
|
||
name: 'file',
|
||
formData: {
|
||
user: 'test'
|
||
},
|
||
success: (res) => {
|
||
setTimeout(() => {
|
||
resolve(res.data.data)
|
||
}, 1000)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
check_agreement_Change(e) { // 勾选版权协议
|
||
if (e.length > 0) {
|
||
this.applyInfo.agreement = true;
|
||
this.show_sign = true
|
||
} else {
|
||
this.show_sign = false
|
||
}
|
||
},
|
||
agreement_Click(index) { //协议内容弹窗
|
||
this.agreement_content = this.agreement_list[index].content
|
||
this.agreement_show = true
|
||
},
|
||
//商户类型
|
||
uinp() {
|
||
this.show = true
|
||
},
|
||
close() {
|
||
this.show = false
|
||
},
|
||
select(e) {
|
||
this.applyInfo.shop_type = e.name
|
||
this.close()
|
||
},
|
||
//扫设备码
|
||
scancodeDevice(e) {
|
||
let that = this;
|
||
// 只允许通过相机扫码
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
success: function(res) {
|
||
console.log('条码类型：' + res.scanType);
|
||
console.log('条码内容：' + res.result);
|
||
that.applyInfo.equipment_no = res.result
|
||
}
|
||
});
|
||
},
|
||
|
||
//获取协议
|
||
get_agreement() {
|
||
get_agreement().then(res => {
|
||
if (res.code === "200") {
|
||
var res_list = res.data
|
||
|
||
for (var i = 0; i < res_list.length; i++) {
|
||
|
||
res_list[i].content = res_list[i].content.replace(/seal/g,
|
||
"<img src='static/gongzhang.png' width='100px' />");
|
||
res_list[i].content = res_list[i].content.replace(/legal/g,
|
||
"<img src='static/legal.png' width='100px' />");
|
||
}
|
||
this.agreement_list = res_list
|
||
}
|
||
})
|
||
},
|
||
//商户签名
|
||
merchSign(e) {
|
||
if (e.statusCode === 200) {
|
||
var result = JSON.parse(e.data);
|
||
this.merch_sign = "data:image/png;base64," + result.data.img_base64
|
||
} else {
|
||
this.$u.toast("签名异常 请联系管理处理")
|
||
}
|
||
},
|
||
|
||
//经理签名
|
||
managerSign(e) {
|
||
if (e.statusCode === 200) {
|
||
var result = JSON.parse(e.data);
|
||
this.manager_sign = "data:image/png;base64," + result.data.img_base64
|
||
} else {
|
||
this.$u.toast("签名异常 请联系管理处理")
|
||
}
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wrap {
|
||
padding: 0 30rpx 30rpx;
|
||
|
||
.u-size-default {
|
||
padding: 0rpx
|
||
}
|
||
|
||
.signature .inputs .explain {
|
||
width: 200rpx;
|
||
}
|
||
|
||
.button-line {
|
||
transform: rotate(90deg);
|
||
position: fixed;
|
||
bottom: 170rpx;
|
||
left: -100rpx;
|
||
width: 340rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
z-index: 999;
|
||
}
|
||
}
|
||
|
||
.agreement {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 40rpx 0;
|
||
|
||
.agreement-text {
|
||
padding-left: 8rpx;
|
||
color: $u-tips-color;
|
||
}
|
||
}
|
||
|
||
.subBtn {
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.clollC {
|
||
padding-left: 20rpx;
|
||
width: 630rpx;
|
||
}
|
||
|
||
.feeItme {
|
||
padding-left: 30rpx;
|
||
}
|
||
</style> |