Huanyuyuehui/pages/store/settled/step2.vue

878 lines
22 KiB
Vue
Raw 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">
<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'>3</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">身份证正反面上传</text>
<view class="">
{{pics.length}}/2
</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.idCardPhoto" :key="index" :data-index="index" @click="getPhotoClickIdx(shopInfo.idCardPhoto,index)">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click.stop='DelPic(shopInfo.idCardPhoto,index)'></text>
</view>
<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(shopInfo.idCardPhoto)' v-if="shopInfo.idCardPhoto.length < 1">
<text class='iconfont icon-icon25201' style="left: 25px;top: 10px;"></text>
<view>身份证正面</view>
</view>
<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(shopInfo.idCardPhoto)' v-else-if="shopInfo.idCardPhoto.length <2">
<text class='iconfont icon-icon25201' style="left: 25px;top: 10px;"></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;" maxlength="30" placeholder="请输入" v-model="shopInfo.idCardName" @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 type="text" style="text-align: right;flex:1;" placeholder="请输入" v-model="shopInfo.idCardNumber" @input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<text class="tips-text" >提示:请核验信息是否正确</text>
</view>
</view>
<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">法人身份证有效期开始</text>
<view class="acea-row row-middle">
<input style="text-align: right;" placeholder="请输入" type="text" v-model="shopInfo.idCardStartTime">
</view>
</view>
<view class="acea-row row-middle">
<text class="tips-text" >请检查格式是否为20190101</text>
</view>
</view>
</view>
</view>
<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">法人身份证有效期结束</text>
<view class="acea-row row-middle" >
<input style="text-align: right;" placeholder="请输入" type="text" v-model="shopInfo.idCardEndTime">
</view>
</view>
<view class="acea-row row-middle">
<text class="tips-text" >请检查格式是否为20190101</text>
</view>
</view>
</view>
</view>
</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">营业执照</text>
<view class="">
{{pics.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.businessLicense" :key="index" :data-index="index" @click="getPhotoClickIdx(shopInfo.businessLicense,index)">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click.stop='DelPic(shopInfo.businessLicense,index)'></text>
</view>
<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(shopInfo.businessLicense)' v-if="pics.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.countId" @input="validateBtn" placeholder-class='placeholder' />
</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.countStartTime" @input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<text class="tips-text" >请检查格式是否为x年x月x日</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.countEndTime" @input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<text class="tips-text" >请检查格式是否为x年x月x日</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.businessScope" @input="validateBtn" placeholder-class='placeholder' />
</view>
</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>
</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 {queryIdCard,queryCheck} from '@/api/user.js'
const app = getApp();
export default {
components: {
areaWindow,
},
data() {
return {
validate: false,
display: false,
display2: false,
shopInfo:{
idCardPhoto:[],
idCardName:'',
idCardNumber:'',
idCardStartTime:'',
idCardEndTime:'',
businessLicense:[],
countId:'',
countStartTime:'',
countEndTime:'',
businessScope:'',
},
successful: false,
isType: false,
showProtocol: false,
pics:[],
};
},
onLoad(options) {
if (this.isLogin) {
} else {
toLogin()
}
},
onShow() {},
computed: {
...mapGetters(['isLogin','viewColor']),
addressText(){
return this.shopInfo.registerAddress.map(v=>v.name).join('/');
}
},
watch:{
deep:true,
'shopInfo.idCardPhoto':{
handler:function(newVal, oldVal){
if(newVal.length==1){
this.verifyIDcard(0)
}else if(newVal.length==2){
this.verifyIDcard(1)
}
}
},
'shopInfo.businessLicense':{
handler:function(newVal, oldVal){
this.verifyBusinessLicense();
}
}
},
methods: {
verifyIDcard(index){
let img={image:this.shopInfo.idCardPhoto[index],type:index+2};
queryIdCard(img).then((res)=>{
if(res.status==200){
let i=res.data.result;
if(index==0){
this.shopInfo.idCardName=i.name;
this.shopInfo.idCardNumber=i.number;
}else if(index==1){
this.shopInfo.idCardStartTime=i.startdate;
this.shopInfo.idCardEndTime=i.enddate;
}
}
})
},
verifyBusinessLicense(){
queryCheck({image:this.shopInfo.businessLicense[0]}).then((res)=>{
console.log('res: ',res);
this.shopInfo.countId=res.data.result.creditno;
this.shopInfo.countStartTime=res.data.result.startdate;
this.shopInfo.countEndTime=res.data.result.enddate;
})
},
getAgreement() {
let that = this
that.showProtocol = true;
that.isType = true
getAgreementApi('sys_merchant_type').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 {idCardPhoto,
idCardName,
idCardNumber,
idCardStartTime,
idCardEndTime,
businessLicense,
countId,
countStartTime,
countEndTime,
businessScope,}=this.shopInfo;
if(idCardPhoto&&
idCardName&&
idCardNumber&&
idCardStartTime&&
idCardEndTime&&
businessLicense&&
countId&&
countStartTime&&
countEndTime&&
businessScope){
this.validate=true;
}
},
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(){
uni.navigateTo({
url:'/pages/store/settled/step3'
})
},
/**
* 上传文件
*
*/
uploadpic: function(item) {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
item.push(res.data.path);
// that.$set(that, 'pics', that.pics);
});
},
/**
* 删除图片
*
*/
DelPic: function(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: function(list, idx) {
// list图片 url 数组
if (list && list.length > 0) {
uni.previewImage({
current: list[idx], // 传 Number H5端出现不兼容
urls: list
});
}
},
}
}
</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: 125vh;
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;
}
.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>