jinjian1.1/pages/index/index.vue

472 lines
16 KiB
Vue
Raw Permalink Normal View History

2024-11-05 16:29:09 +08:00
<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>