Huanyuyuehui/pages/store/settled/step3.vue

951 lines
24 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view v-if="!successful" :style="viewColor" @click="hiddenSerachList">
<form report-submit='true'>
<view class='merchantsSettled'>
<!-- <view class="merchantBgCount">
<image mode="widthFix" class="merchantBg" :src="domain+'/static/diy/merchantBg'+keyColor+'.jpg'" alt="">
</view> -->
<view class='nav'>
<view class='progress acea-row row-between-wrapper'>
<view class='iconfont t-color'></view>
<view class='line'></view>
<view class='iconfont t-color'></view>
<view class='line'></view>
<view class='iconfont t-color'></view>
</view>
<view class='navCon acea-row row-between-wrapper'>
<view class="on">基本信息</view>
<view >企业资料文件</view>
<view >结算信息</view>
</view>
</view>
<!-- <view class="application-record" @click="jumpToList">
申请记录
<text class="iconfont icon-xiangyou"></text>
</view> -->
<view class='list'>
<view class="item">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-db acea-row row-middle">
<text class="item-name required" style="width: 560rpx;">开户许可证(或基本存款账户信息)</text>
<view class="">
{{shopInfo.bankCardImg.length}}/1
</view>
</view>
<!-- <view class="acea-row row-middle">
<text class="tips-text" style="color: #0ca6cb;">提示:上传完该项,下面几项会自动填写</text>
</view> -->
<view class="acea-row row-middle" style="justify-content: flex-start;">
<view class='pictrue' v-for="(item,index) in shopInfo.bankCardImg" :key="index" :data-index="index" @click="getPhotoClickIdx(shopInfo.bankCardImg,index)">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click.stop='DelPic(shopInfo.bankCardImg,index)'></text>
</view>
<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(shopInfo.bankCardImg)' v-if="shopInfo.bankCardImg.length < 1">
<text class='iconfont icon-icon25201' style="left: 25px;top: 25px;"></text>
<!-- <view>银行卡正面</view> -->
</view>
</view>
</view>
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name required">结算公户户名</text>
<input type="text" style="text-align: right;flex:1;" placeholder="请输入" v-model="shopInfo.bankCardUserName" @input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle" v-if="shopInfo.bankCardUserName">
<text class="tips-text" >提示:请核验信息是否正确</text>
</view>
<view class="acea-row row-middle" v-else>
<text class="tips-text" >提示:(公户户名需手动填写)</text>
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name required">结算公户卡号</text>
<input type="text" style="text-align: right;flex:1;" placeholder="请输入" v-model="shopInfo.bankCard" @input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<text class="tips-text" >提示:请核验信息是否正确</text>
</view>
</view>
<view class="item">
<view>
<view class="item-name required" style="width: 220rpx;margin-bottom: 20rpx;">支行名称</view>
<!-- <input type="text" style="text-align: right;flex:1;" maxlength="30" @mousedown="searchBranch" placeholder="请输入" v-model="shopInfo.bankBranchName" @input="validateBtn" placeholder-class='placeholder' />
<view class="search-list" v-show="searchFlag">
<view class="search-tips" v-for="(item,index) in searchList" @click="selectSearch(item)">
<text>{{item.lname}}</text>
<text style="color: #999;font-size: 10px;">{{item.addr}}</text>
</view>
</view> -->
<superwei-combox :candidates="candidatesList" :isJSON="true" keyName="name_child" placeholder="请选择或输入"
v-model="shopInfo.bankBranchName" @input="bankInput" @select="bankSelect"></superwei-combox>
</view>
<view class="acea-row row-middle">
<text class="tips-text" >提示:请填写完整的支行名称(如:中国农业银行天津迎宾支行)</text>
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name required" >银行名称</text>
<input :disabled="true" type="text" style="text-align: right;flex:1;" maxlength="30" placeholder="请输入" v-model="shopInfo.bankName" @input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<text class="tips-text" >提示:请核验信息是否正确</text>
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name required" >联行号</text>
<input :disabled="true" type="text" style="text-align: right;flex:1;" maxlength="30" placeholder="请输入" v-model="shopInfo.CNAPS" @input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<text class="tips-text" >提示:请核验信息是否正确</text>
</view>
</view>
<!-- <view class="item no-border">
<checkbox-group @change='ChangeIsAgree'>
<checkbox class="checkbox" :checked="isAgree ? true : false" />已阅读并同意</checkbox-group>
<button class="settleAgree" @click="getConfig">《入驻协议》</button>
</view> -->
<button class='submitBtn' :disabled="!validate" :class="validate === true ? 'on':''" @click="nextStep">下一步</button>
</view>
</view>
</form>
<view class="settlementAgreement" v-if="showProtocol">
<view class="setAgCount">
<i class="icon iconfont icon-cha" @click="showProtocol = false"></i>
<div class="title">{{isType ? '店铺类型说明' : '商户入驻协议'}}</div>
<view class="content">
<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
<!-- <view v-html="protocol"></view> -->
</view>
</view>
</view>
<areaWindow ref="areaWindow" :display="display" :address="[]"
@submit="OnChangeAddress" @changeClose="changeClose" :cityShow="1"></areaWindow>
<areaWindow ref="areaWindow2" :display="display2" :address="[]"
@submit="OnChangeAddress2" @changeClose="changeClose2" :cityShow="1"></areaWindow>
<view class='loadingicon acea-row row-center-wrapper' v-if="loading">
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
</view>
</view>
<view class="settledSuccessMain" v-else :style="viewColor">
<view class="settledSuccessful">
<image class="image" src="../static/images/settledSuccessful.svg" alt="">
<view class="title">恭喜您的资料提交成功</view>
<view class="info">预计15个工作日内审核完毕平台客服会及时与您联系</view>
<view class="goHome" hover-class="none" @click="goHome">
返回首页
</view>
</view>
</view>
</template>
<script>
import areaWindow from '@/components/areaWindow';
import { mapGetters } from "vuex";
import parser from "@/components/jyf-parser/jyf-parser";
import { toLogin } from '@/libs/login.js';
import {queryBankCard,queryCNAPS,getAgreementApi} from '@/api/user.js';
import { configMap,throttle } from "@/utils";
import {updateGoodsRecord,create,getGoodsDetails,getIntentionBank} from '@/api/store.js';
import superweiCombox from '../component/superwei-combox.vue'
const app = getApp();
export default {
components: {
areaWindow,
superweiCombox
},
data() {
return {
validate: false,
display: false,
display2: false,
shopInfo:{
bankCardImg:[],
bankCardUserName:'',
bankCard:'',
bankName:'',
bankBranchName:'',
CNAPS:'',
bankProvince:'',
bankCity:'',
},
successful: false,
isType: false,
showProtocol: false,
isAgree:false,
searchFlag:false,
searchList:[],
pics:[],
protocol: this.sys_intention_agree,
tagStyle: {
img: 'width:100%;display:block;'
},
candidatesList:[],
dataInfo:{},
mer_i_id:'',
loading:false,
successful:false,
validate:false,
};
},
onLoad(options) {
if (this.isLogin) {
} else {
toLogin()
}
if (options.mer_i_id) {
this.mer_i_id = options.mer_i_id
uni.showLoading({
title: '获取数据中',
});
this.$nextTick(function() {
this.getGoodsDetails()
})
}
},
onShow() {},
computed: configMap({sys_intention_agree:''},mapGetters(['isLogin','viewColor'])),
watch:{
deep:true,
'shopInfo.bankCardImg':{
handler:function(newVal, oldVal){
this.verifyBankCard()
this.validateBtn()
}
},
'shopInfo.bankBranchName':{
handler:function(newVal, oldVal){
}
},
},
methods: {
bankInput(e) {
getIntentionBank({name:e}).then((res)=>{
this.candidatesList = res.data
console.log(res.data);
})
},
bankSelect(e) {
this.shopInfo.bankName = e.name
this.shopInfo.CNAPS = e.code
this.validateBtn()
},
goHome(){
uni.navigateTo({
url:'/pages/store/settled/index'
})
},
getGoodsDetails(){
let {bankCardImg,bankCardUserName,bankCard,bankName,bankBranchName,CNAPS}=this.shopInfo;
let data2=uni.getStorageSync('updateShopInfo');
this.shopInfo=data2.bank;
uni.hideLoading();
this.validateBtn();
},
searchBranch(){
let val=this.shopInfo;
if(val.bankCard&&val.bankName){
throttle(()=>{
let data1={
bankcard:val.bankCard,
bank:val.bankName,
province:val.bankProvince,
city:val.bankCity,
keyword:val.bankBranchName,
}
queryCNAPS(data1).then((res)=>{
let d=res.data.result.data;
if(d.record.length){
this.searchFlag=true;
this.searchList=d.record;
}
})
},2000)
}
},
getConfig() {
this.showProtocol = true;
// 获取配置
this.protocol = this.sys_intention_agree
},
verifyBankCard(){
queryBankCard({image:this.shopInfo.bankCardImg[0]}).then((res)=>{
if(res){
let b=res.data.result;
this.shopInfo.bankCard=b.bankcard;
this.shopInfo.bankName=b.bankname;
}
})
},
getAgreement() {
let that = this
that.showProtocol = true;
that.isType = true
getAgreementApi('sys_intention_agree').then(res => {
that.protocol = res.data.sys_merchant_type
})
},
changeRegion(){
this.display = true;
},
// 关闭地址弹窗;
changeClose() {
this.display = false;
},
changeRegion2(){
this.display2 = true;
},
// 关闭地址弹窗;
changeClose2() {
this.display2 = false;
},
OnChangeAddress(address){
this.shopInfo.registerAddress = address.map(v=>v.name).join('/');
},
OnChangeAddress2(address){
this.shopInfo.businessAddress = address.map(v=>v.name).join('/');
},
validateBtn(){
let data2=uni.getStorageSync('shopInfo')
let {bankCardImg,bankCardUserName,bankCard,bankName,bankBranchName,CNAPS}=this.shopInfo;
if(bankCardImg&&bankCardUserName&&bankCard&&bankName&&bankBranchName&&CNAPS){
this.validate=true;
let bank={bankCardImg,bankCardUserName,bankCard,bankName,bankBranchName,CNAPS}
data2.bank=bank;
this.dataInfo=data2;
}
},
changeBusiness(e){
this.shopInfo.EnterpriseIndustry=this.businessArray[e.target.value];
this.validateBtn();
},
changeEnterprise(e){
this.shopInfo.EnterpriseType=this.enterpriseArray[e.target.value];
this.validateBtn();
},
changeStore(e){
this.shopInfo.shopType=this.storeTypeArr[e.target.value];
this.validateBtn();
},
nextStep(){
let that=this;
if (that.mer_i_id) {
updateGoodsRecord(that.mer_i_id, that.dataInfo).then(res => {
if (res.status == 200) {
title: '提交成功',
that.loading = true;
that.timer = setTimeout(() => {
that.successful = true;
that.validate = true;
}, 1000)
}
}).catch(res => {
that.validate = true;
that.$util.Tips({
title: res
});
})
} else {
create(that.dataInfo).then(data => {
if (data.status == 200) {
title: '提交成功',
that.loading = true;
this.timer = setTimeout(() => {
that.successful = true;
that.validate = true;
}, 1000)
}
}).catch(res => {
that.validate = true;
that.$util.Tips({
title: res
});
})
}
},
/**
* 上传文件
*
*/
uploadpic(item) {
let that = this;
let params = {
url:'upload/image',
name:'file'
}
that.$util.uploadImageOne(params, function(res) {
item.push(res.data.path);
// that.$set(that, 'pics', that.pics);
});
},
/**
* 删除图片
*
*/
DelPic(item,index) {
let that = this,
pic = item[index];
item.splice(index, 1);
// that.$set(that, 'pics', that.pics);
},
// 图片预览
// 获得相册 idx
getPhotoClickIdx(item,index) {
let _this = this;
let idx = index;
_this.imgPreview(item, idx);
},
// 图片预览
imgPreview(list, idx) {
// list图片 url 数组
if (list && list.length > 0) {
uni.previewImage({
current: list[idx], // 传 Number H5端出现不兼容
urls: list
});
}
},
ChangeIsAgree(e) {
this.isAgree = !this.isAgree;
this.validateBtn();
},
selectSearch(i){
this.shopInfo.bankBranchName=i.lname;
this.shopInfo.CNAPS=i.bankCode;
this.hiddenSerachList();
},
hiddenSerachList(){
this.searchFlag=false;
},
}
}
</script>
<style scoped lang="scss">
.required{
position: relative;
display: flex;
width: 28rpx;
height: 28rpx;
&::before{
display: block;
content: '*';
color: red;
line-height: 48rpx;
}
}
/deep/checkbox .uni-checkbox-input.uni-checkbox-input-checked,
/deep/checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border: 1px solid var(--view-theme)!important;
background-color: var(--view-theme)!important;
color: #fff!important;
}
.uni-input-placeholder {
color: #B2B2B2;
}
.item-name{
width: 340rpx;
}
.uni-list-cell {
position: relative;
.iconfont {
font-size: 14px;
color: #7a7a7a;
position: absolute;
right: -16px;
top: 7rpx;
}
.icon-guanbi2{
right: 35px;
}
}
.merchantBgCount{
line-height: 0;
}
.merchantsSettled {
// background-image: linear-gradient(var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
height: 100vh;
display: flex;
flex-direction: column;
grid-gap: 32rpx;
}
.merchantsSettled .nav {
// background-color: #fff;
font-size: 26rpx;
color: #282828;
padding: 25rpx 0;
}
.merchantsSettled .nav .navCon {
padding: 0 86rpx;
text-align: center;
view{
text-align: center;
}
}
.merchantsSettled .nav .progress {
padding: 0 120rpx;
margin-top: 10rpx;
}
.merchantsSettled .nav .progress .line {
width: 160rpx;
height:8rpx;
background-color: #d1e1fb;
border-radius: 4rpx;
}
.merchantsSettled .nav .progress .iconfont {
font-size: 25rpx;
color: white;
margin-top: -2rpx;
width: 36rpx;
height: 36rpx;
text-align: center;
border-radius: 50%;
background-color: #5d6371;
&.t-color{
background-color: #0294f8;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
box-shadow:0rpx 0rpx 8rpx 8rpx #b9e1fe;
}
}
.merchantsSettled .merchantBg {
width: 750rpx;
width: 100%;
}
.merchantsSettled .list {
background-color: #fff;
border-radius: 12px;
padding-bottom: 22px;
margin: 0 15px;
// position: absolute;
// top: 160rpx;
width: calc(100% - 30px);
}
.application-record {
position: absolute;
display: flex;
align-items: center;
top: 162rpx;
right: 0;
color: #fff;
font-size: 22rpx;
background-color: rgba(0, 0, 0, 0.3);
padding: 8rpx 18rpx;
border-radius: 20px 0px 0px 20px;
}
.merchantsSettled .list .item {
padding: 50rpx 0 20rpx;
border-bottom: 1px solid #eee;
position: relative;
margin: 0 20px;
&.no-border {
border-bottom: none;
padding-left: 0;
padding-right: 0;
}
.item-title {
color: #666666;
font-size: 28rpx;
display: block;
}
.item-desc {
color: #B2B2B2;
font-size: 22rpx;
display: block;
margin-top: 9rpx;
line-height: 36rpx;
}
}
.acea-row,.upload {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.upload {
margin-top: 20rpx;
}
.acea-row.row-middle {
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding-left: 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
}
.search-list{
width: 100%;
position: absolute;
top: -48rpx;
background-color: white;
z-index: 1000;
border-radius: 12rpx;
padding: 12rpx;
border: solid 1px #999;
overflow: scroll;
height: 400rpx;
.search-tips{
padding: 8rpx 0;
display: flex;
flex-direction: column;
text{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #666;
}
}
}
.acea-row .tips-text{
color: #e40000;
font-size:20rpx;
padding: 12rpx 12rpx 0 12rpx;
}
.acea-row.row-column {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.acea-row.row-center-wrapper {
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.merchantsSettled .list .item .pictrue {
width: 130rpx;
height: 130rpx;
margin: 24rpx 22rpx 0 0;
position: relative;
font-size: 11px;
color: #bbb;
&:nth-child(4n) {
margin-right: 0;
}
&:nth-last-child(1) {
border: 0.5px solid #ddd;
box-sizing: border-box;
}
uni-image,
image {
width: 100%;
height: 100%;
border-radius: 1px;
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
}
}
.icon-guanbi1 {
font-size: 33rpx;
position: absolute;
top: -10px;
right: -10px;
}
}
.uni-list-cell-db{
position: relative;
}
.wenhao{
width: 34rpx;
height: 34rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
border-radius: 50%;
background: #E3E3E3;
color: #ffffff!important;
margin-left: 4rpx;
position: absolute;
left: 122rpx;
}
.merchantsSettled .list .item .imageCode {
position: absolute;
top: 7px;
right: 0;
}
.merchantsSettled .list .item .icon {
font-size: 40rpx;
color: #b4b1b4;
}
.merchantsSettled .list .item input {
// width: 400rpx;
font-size: 30rpx;
}
.merchantsSettled .list .item .placeholder {
color: #b2b2b2;
}
.merchantsSettled .default {
padding: 0 30rpx;
height: 90rpx;
background-color: #fff;
margin-top: 23rpx;
}
.merchantsSettled .default checkbox {
margin-right: 15rpx;
}
.merchantsSettled .acea-row uni-image {
width: 20px;
height: 20px;
display: block;
}
.merchantsSettled .list .item .codeIput {
width: 125px;
}
.uni-input-input {
display: block;
height: 100%;
background: none;
color: inherit;
opacity: 1;
-webkit-text-fill-color: currentcolor;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
text-align: inherit;
text-indent: inherit;
text-transform: inherit;
text-shadow: inherit;
}
.merchantsSettled .list .item .code {
position: absolute;
width: 93px;
line-height: 27px;
border: 1px solid var(--view-theme);
border-radius: 15px;
color: var(--view-theme);
text-align: center;
bottom: 8px;
right: 0;
font-size: 12px;
}
.merchantsSettled .list .item .code.on {
background-color: #bbb;
color: #fff;
border-color: #bbb;
}
.merchantsSettled .submitBtn {
width: 588rpx;
margin: 0 auto;
height: 86rpx;
border-radius: 25px;
text-align: center;
line-height: 86rpx;
font-size: 15px;
color: #fff;
background: #E3E3E3;
margin-top: 25px;
pointer-events: none;
}
.merchantsSettled .submitBtn.on {
background: var(--view-theme);
pointer-events: all;
}
uni-checkbox-group,
.settleAgree {
display: inline-block;
font-size: 24rpx;
}
uni-checkbox-group {
color: #b2b2b2;
}
.settleAgree {
color: var(--view-theme);
position: relative;
top: 2px;
left: 8px;
}
.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
width: 30rpx;
height: 30rpx;
border: 2rpx solid #C3C3C3;
border-radius: 15px;
}
.settlementAgreement {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
z-index: 10;
}
.settlementAgreement .setAgCount {
background: #fff;
width: 656rpx;
height: 458px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 12rpx;
-webkit-border-radius: 12rpx;
padding: 52rpx;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden;
.content {
height: 900rpx;
overflow-y: scroll;
/deep/ p {
font-size: 13px;
line-height: 22px;
}
/deep/ img {
max-width: 100%;
}
}
}
.settlementAgreement .setAgCount .icon {
font-size: 42rpx;
color: #b4b1b4;
position: absolute;
top: 15rpx;
right: 15rpx;
}
.settlementAgreement .setAgCount .title {
color: #333;
font-size: 32rpx;
text-align: center;
font-weight: bold;
}
.settlementAgreement .setAgCount .content {
margin-top: 32rpx;
color: #333;
font-size: 26rpx;
line-height: 22px;
text-align: justify;
text-justify: distribute-all-lines;
height: 756rpx;
overflow-y: scroll;
}
.settledSuccessMain {
height: 100vh;
display: flex;
flex-direction: column;
background: #fff;
}
.settledSuccessful {
flex: 1;
width: 100%;
padding: 0 56px;
height: auto;
background: #fff;
text-align: center;
}
.settledSuccessful .image {
width: 189px;
height: 157px;
margin-top: 66px;
}
.settledSuccessful .title {
color: #333333;
font-size: 16px;
font-weight: bold;
margin-top: 35px;
}
.settledSuccessful .info {
color: #A0A0A0;
font-size: 13px;
margin-top: 12px;
}
.settledSuccessful .goHome {
margin: 60px auto 0;
line-height: 43px;
color: #282828;
font-size: 15px;
border: 1px solid #B4B4B4;
border-radius: 60px;
}
/deep/ uni-checkbox .uni-checkbox-input {
width: 15px;
height: 15px;
position: relative;
}
/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
font-size: 14px;
}
.loadingicon {
height: 100vh;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.icon-xiangyou {
font-size: 22rpx;
}
// #ifdef MP
checkbox-group {
display: inline-block;
}
// #endif
.setAgCount{
/deep/ table{
border: 1px solid #DDD;
border-bottom: none;
border-right: none;
}
/deep/ td, th {
padding: 5rpx 10rpx;
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
}
}
</style>