Huanyuyuehui/pages/store/settled/step2.vue

1102 lines
32 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" style="min-height: 72rpx;">身份证正、反面及法人手持身份证清晰照片</text>
<view class="">
{{shopInfo.idCardPhoto.length}}/3
</view>
</view>
<!-- <view class="acea-row row-middle">
<text class="tips-text" style="color: #0ca6cb;">提示:上传完该项,下面几项会自动填写</text>
</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 class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(shopInfo.idCardPhoto)' v-else-if="shopInfo.idCardPhoto.length <3">
<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">
<!-- <uv-datetime-picker ref="datetimePicker" v-model="shopInfo.idCardStartTime" mode="date" @confirm="validateBtn"></uv-datetime-picker>
<text @click="handleOpen">{{shopInfo.idCardStartTime?shopInfo.idCardStartTim:'请选择日期'}}</text> -->
<picker style="width: 100%;" mode="date" :value="shopInfo.idCardStartTime" @change="handleOpen">
<view style="font-size: 30rpx;" :style="{'color': shopInfo.idCardStartTime?'':'#b2b2b2'}" class="uni-input">{{shopInfo.idCardStartTime?shopInfo.idCardStartTime:'请选择开始日期'}}</view>
</picker>
<!-- <uni-datetime-picker type="date" :clearIcon='false' :border="false" v-model="shopInfo.idCardStartTime" @change="validateBtn" /> -->
<!-- <input style="text-align: right;" placeholder="请输入" type="text" @input="validateBtn" v-model="shopInfo.idCardStartTime"> -->
</view>
</view>
<view class="acea-row row-middle">
<text class="tips-text" >请检查格式是否为x年x月x日</text>
</view>
<!-- <view class="acea-row row-middle">
<text class="tips-text-yellow" >如为长期有效,请填写:2099年01月01日</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" >
<!-- <picker mode="date" :value="shopInfo.idCardEndTime" @change="handleEndTime">
<view style="font-size: 30rpx;" class="uni-input">{{shopInfo.idCardEndTime}}</view>
</picker> -->
<picker style="width: 100%;" mode="date" :value="shopInfo.idCardEndTime" @change="handleEndTime">
<view style="font-size: 30rpx;" :style="{'color': shopInfo.idCardEndTime?'':'#b2b2b2'}" class="uni-input">{{shopInfo.idCardEndTime?shopInfo.idCardEndTime:'请选择结束日期'}}</view>
</picker>
<!-- <input style="text-align: right;" placeholder="请输入" type="text" @input="validateBtn" v-model="shopInfo.idCardEndTime"> -->
</view>
</view>
<view class="acea-row row-middle">
<text class="tips-text" >请检查格式是否为x年x月x日</text>
</view>
<view class="acea-row row-middle">
<text class="tips-text-yellow" >如为长期有效,请填写:2099年01月01日</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="">
{{shopInfo.businessLicense.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="shopInfo.businessLicense.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>
<!-- <picker mode="date" :value="shopInfo.countStartTime" @change="handleCountStartTime">
<view style="font-size: 30rpx;" class="uni-input">{{shopInfo.countStartTime}}</view>
</picker> -->
<view>
<picker style="width: 100%;" mode="date" :value="shopInfo.countStartTime" @change="handleCountStartTime">
<view style="font-size: 30rpx;" :style="{'color': shopInfo.countStartTime?'':'#b2b2b2'}" class="uni-input">{{shopInfo.countStartTime?shopInfo.countStartTime:'请选择开始日期'}}</view>
</picker>
</view>
<!-- <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 class="acea-row row-middle">
<text class="tips-text-yellow" >如为长期有效,请填写:2099年01月01日</text>
</view> -->
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name required">统一社会信用证截止日期</text>
<!-- <picker mode="date" :value="shopInfo.countEndTime" @change="handleCountEndTime">
<view style="font-size: 30rpx;" class="uni-input">{{shopInfo.countEndTime}}</view>
</picker> -->
<view>
<picker style="width: 100%;" mode="date" :value="shopInfo.countEndTime" @change="handleCountEndTime">
<view style="font-size: 30rpx;" :style="{'color': shopInfo.countEndTime?'':'#b2b2b2'}" class="uni-input">{{shopInfo.countEndTime?shopInfo.countEndTime:'请选择截止日期'}}</view>
</picker>
</view>
<!-- <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 class="acea-row row-middle">
<text class="tips-text-yellow" >如为长期有效,请填写:2099年01月01日</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" @click="changeRegion">
<input style="pointer-events:none;text-align: right;" placeholder="请选择"
type="text" readonly disabled v-model="shopInfo.registerAddress">
<view class='iconfont icon-jiantou'></view>
</view>
</view>
</view>
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<input type="text" style="text-align: right;flex:1;" placeholder="请输入详细地址" v-model="shopInfo.registerAddressDetail" @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.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="2"></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:'',
registerAddressDetail:'',
registerAddress:''
},
successful: false,
isType: false,
showProtocol: false,
mer_i_id:'',
};
},
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: {
...mapGetters(['isLogin','viewColor']),
// startDate() {
// return this.getDate('start');
// },
// endDate() {
// return this.getDate('end');
// }
},
watch:{
deep:true,
'shopInfo.idCardPhoto':{
handler:function(newVal, oldVal){
if(newVal.length==1){
this.verifyIDcard(0)
}else if(newVal.length==2){
this.verifyIDcard(1)
}
this.validateBtn()
}
},
'shopInfo.businessLicense':{
handler:function(newVal, oldVal){
this.verifyBusinessLicense();
this.validateBtn()
}
}
},
methods: {
handleOpen(e){
this.shopInfo.idCardStartTime = this.formatDate(e.detail.value)
this.validateBtn()
},
handleEndTime(e){
this.shopInfo.idCardEndTime = this.formatDate(e.detail.value)
this.validateBtn()
},
handleCountStartTime(e){
this.shopInfo.countStartTime = this.formatDate(e.detail.value)
this.validateBtn()
},
handleCountEndTime(e){
this.shopInfo.countEndTime = this.formatDate(e.detail.value)
this.validateBtn()
},
// getDate(type) {
// const date = new Date();
// let year = date.getFullYear();
// let month = date.getMonth() + 1;
// let day = date.getDate();
// if (type === 'start') {
// year = year - 60;
// } else if (type === 'end') {
// year = year + 2;
// }
// month = month > 9 ? month : '0' + month;
// day = day > 9 ? day : '0' + day;
// return `${year}-${month}-${day}`;
// },
formatDate(dateString) {
const date = new Date(dateString);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}${month}${day}`;
},
isValidDate(dateString) {
var regex = /^\d{1,4}年\d{1,2}月\d{1,2}日$/;
return regex.test(dateString);
},
getGoodsDetails(){
let {idCardPhoto,idCardName,idCardNumber,idCardStartTime,idCardEndTime,businessLicense,countId,countStartTime,countEndTime,businessScope,registerAddressDetail,registerAddress}=this.shopInfo;
let data2=uni.getStorageSync('updateShopInfo');
let idcard=data2.idcard;
let biz=data2.biz;
idCardPhoto=[idcard.image1,idcard.image2,idcard.image3],idCardName=idcard.name,idCardNumber=idcard.number,idCardStartTime=idcard.start,idCardEndTime=idcard.end,businessLicense=biz.image,countId=biz.number,countStartTime=biz.start,countEndTime=biz.end,registerAddress=biz.cityInfo,registerAddressDetail=biz.address,businessScope=biz.businessScope
this.shopInfo={idCardPhoto,idCardName,idCardNumber,idCardStartTime,idCardEndTime,businessLicense,countId,countStartTime,countEndTime,businessScope,registerAddressDetail,registerAddress};
uni.hideLoading();
this.validateBtn();
},
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)=>{
this.shopInfo.countId=res.data.result.creditno;
this.shopInfo.countStartTime=res.data.result.start;
this.shopInfo.countEndTime=res.data.result.end;
this.shopInfo.registerAddressDetail=res.data.result.regaddress;
})
},
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('');
this.validateBtn()
},
OnChangeAddress2(address){
this.shopInfo.businessAddress = address.map(v=>v.name).join('/');
},
validateBtn(){
console.log(this.shopInfo)
let data2=uni.getStorageSync('shopInfo');
let {idCardPhoto,idCardName,idCardNumber,idCardStartTime,registerAddress,idCardEndTime,businessLicense,countId,countStartTime,countEndTime,businessScope,registerAddressDetail}=this.shopInfo;
if(idCardPhoto&&idCardName&&idCardNumber&&idCardStartTime&&registerAddress&&idCardEndTime&&businessLicense&&countId&&countStartTime&&countEndTime&&registerAddressDetail){
let idcard={
image1:idCardPhoto[0],
image2:idCardPhoto[1],
image3:idCardPhoto[2],
name:idCardName,
number:idCardNumber,
start:idCardStartTime,
end:idCardEndTime,
}
let biz=data2.biz;
biz.image=businessLicense;
biz.number=countId;
biz.start=countStartTime;
biz.end=countEndTime;
biz.cityInfo=registerAddress
biz.address=registerAddressDetail;
biz.businessScope=businessScope;
data2.idcard=idcard;
uni.setStorageSync('shopInfo',data2);
this.validate=true;
}else{
this.validate=false;
}
},
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(){
if(this.shopInfo.idCardPhoto.length!=3){
uni.showToast({
icon:'none',
title: '请上传身份证正反面与手持身份证'
});
return
}else if(this.shopInfo.businessLicense.length!=1){
uni.showToast({
icon:'none',
title: '请上传营业执照'
});
return
}else if(!this.isValidDate(this.shopInfo.idCardStartTime)){
uni.showToast({
icon:'none',
title: '法人身份证有效期开始格式错误'
});
return
}else if(!this.isValidDate(this.shopInfo.idCardEndTime)){
uni.showToast({
icon:'none',
title: '法人身份证有效期结束格式错误'
});
return
}else if(!this.isValidDate(this.shopInfo.countStartTime)){
uni.showToast({
icon:'none',
title: '统一社会信用证开始日期格式错误'
});
return
}
else if(!this.isValidDate(this.shopInfo.countEndTime)){
uni.showToast({
icon:'none',
title: '统一社会信用证截止日期格式错误'
});
return
}
if(this.mer_i_id){
uni.navigateTo({
url:'/pages/store/settled/step3?mer_i_id='+this.mer_i_id
})
}else{
uni.navigateTo({
url:'/pages/store/settled/step3'
})
}
},
/**
* 上传文件
*
*/
uploadpic: function(item) {
let that = this;
console.log(item);
let params = {
url:'upload/image',
name:'file'
}
that.$util.uploadImageOne(params, function(res) {
item.push(res.data.path);
});
},
/**
* 删除图片
*
*/
DelPic: function(item,index) {
let that = this,
pic = item[index];
item.splice(index, 1);
},
// 图片预览
// 获得相册 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;
}
/deep/.uni-date-x .icon-calendar{
display: none;
}
/deep/.uni-date__x-input{
text-align: right;
color: #B2B2B2;
}
.uni-input{
font-size: 30rpx;
text-align: right;
}
.uni-input-placeholder {
color: #B2B2B2;
}
.item-name{
width: 340rpx;
// min-height: 72rpx;
}
.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 .fail-style{
// border: solid 1px red;
background-color: rgba(255, 24, 24,0.1);
animation: errorTips 1s ease-in-out;
}
@keyframes errorTips {
to{
// border: solid 1px red;
background-color: white;
}
form{
background-color: rgba(255, 24, 24,0.1);
// border: none;
}
}
.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 .tips-text-yellow{
color: #ffc315;
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;
padding-right: 20rpx;
}
.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>