Huanyuyuehui/pages/store/settled/index.vue

1269 lines
34 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'>2</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' style="margin-top: 40rpx;">
<view class="item">
<view class="acea-row row-middle">
<text class="item-name required">店铺名称</text>
<input type="text" style="text-align: right;" maxlength="30" placeholder="请输入"
v-model="shopInfo.shopName" @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>
<picker style="text-align: right;" @change="bindPickerChange" :value="shopInfo.mer_classification" :range="array" range-key="category_name">
<input style="pointer-events:none" placeholder="请选择店铺分类" type="text" readonly disabled v-model="shopInfo.mer_classification">
<view class='iconfont icon-jiantou'></view>
</picker>
</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>
<picker style="text-align: right;" @change="bindPickerChange" :value="shopInfo.mer_storeType" :range="storeTypeArr2" range-key="category_name">
<input style="pointer-events:none" placeholder="请选择商户分类" type="text" readonly disabled v-model="shopInfo.mer_storeType">
<view class='iconfont icon-jiantou'></view>
</picker>
</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" @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">
<text class="item-name"></text>
<input type="text" style="text-align: right;" placeholder="请输入详细地址"
v-model="shopInfo.registerAddressDetail" @input="validateBtn"
placeholder-class='placeholder' />
</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="changeRegion2">
<input style="pointer-events:none;text-align: right;" placeholder="请选择"
type="text" readonly disabled v-model="shopInfo.businessAddress">
<view class='iconfont icon-jiantou'></view>
</view>
</view>
</view>
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name"></text>
<input type="text" style="text-align: right;" placeholder="请输入详细地址"
v-model="shopInfo.businessAddressDetail" @input="validateBtn"
placeholder-class='placeholder' />
</view>
</view>
</view>
<view class='list'>
<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.EnterpriseName" @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>
<picker @change="changeEnterprise" :value="shopInfo.EnterpriseType"
:range="enterpriseArray" range-key="category_name">
<input style="pointer-events:none;text-align: right;" placeholder="请选择"
type="text" readonly disabled v-model="shopInfo.EnterpriseType">
<view class='iconfont icon-jiantou'></view>
</picker>
</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;" placeholder="请输入"
v-model="shopInfo.EnterpriseId" @input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<!-- <text class="tips-text">请填写铸源商城ZY开头会员编号</text> -->
<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;" placeholder="请输入"
v-model="shopInfo.EnterpriseJoinName" @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;" placeholder="请输入"
v-model="shopInfo.EnterprisePhone" @input="validateBtn"
placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<text class="tips-text">请填写11位手机号码</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;" placeholder="请输入" v-model="shopInfo.userId"
@input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<text class="tips-text">请填写铸源优品ID号</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;" placeholder="请输入" v-model="shopInfo.userName"
@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;" placeholder="请输入" v-model="shopInfo.userPhone"
@input="validateBtn" placeholder-class='placeholder' />
</view>
<view class="acea-row row-middle">
<text class="tips-text">请填写11位手机号码</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="down-style" @click="downTemplate">
<text class="haiyuefont haiyue-zhuyi"
style="font-size: 10px;margin: 2px;"></text>
下载模版
</view>
<view class="down-style" @click="perviewTemplate">
<text class="haiyuefont haiyue-zhuyi"
style="font-size: 10px;margin: 2px;"></text>
示例模版
</view>
<view style="font-size: 12px;margin-left: 4px;">
{{shopInfo.userPhoto.length}}/1
</view>
</view>
<view class="acea-row row-middle" style="justify-content: flex-start;">
<view class='pictrue' v-for="(item,index) in shopInfo.userPhoto" :key="index"
:data-index="index" @click="getPhotoClickIdx(shopInfo.userPhoto,index)">
<image :src='item'></image>
<text class='iconfont icon-guanbi1'
@click.stop='DelPic(shopInfo.userPhoto,index)'></text>
</view>
<view class='pictrue acea-row row-center-wrapper row-column'
@click='uploadpic(shopInfo.userPhoto)' v-if="shopInfo.userPhoto.length < 1">
<text class='iconfont icon-icon25201' style="top: 25px;left: 25px;"></text>
</view>
</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>
<picker style="text-align: right;" @change="bindPickerChange1" :value="shopInfo.mer_type" :range="storeTypeArr"
range-key="type_name">
<input style="pointer-events:none;text-align: right;" placeholder="请选择店铺类型"
type="text" disabled readonly v-model="shopInfo.mer_storeType">
<view class='iconfont icon-jiantou'></view>
</picker>
</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 ">是否惠美乡村店铺</text>
<switch :checked="shopInfo.isVeteran" style="transform:scale(0.6)"
@change="viteran" />
</view>
<view class="acea-row row-middle">
<text class="tips-text" style="color: #0ca6cb;">如果为惠美乡村店铺需上传惠美乡村红头文件</text>
</view>
</view>
</view>
</view> -->
<!-- <view class="item" v-show="shopInfo.isVeteran">
<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 style="font-size: 12px;">
{{shopInfo.isVeteranPhoto.length}}/1
</view>
</view>
<view class="acea-row row-middle" style="justify-content: flex-start;">
<view class='pictrue' v-for="(item,index) in shopInfo.isVeteranPhoto" :key="index" :data-index="index"
@click="getPhotoClickIdx(shopInfo.isVeteranPhoto,index)">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click.stop='DelPic(shopInfo.isVeteranPhoto,index)'></text>
</view>
<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(shopInfo.isVeteranPhoto)'
v-if="shopInfo.isVeteranPhoto.length < 1">
<text class='iconfont icon-icon25201' style="top: 25px;left: 25px;"></text>
</view>
</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">是否退伍军人</text>
<switch :checked="shopInfo.isFlagshipStore" style="transform:scale(0.6)"
@change="flagShipStore" />
</view>
<view class="acea-row row-middle">
<text class="tips-text" style="color: #0ca6cb;">如果为退伍军人则需要上传证件照</text>
</view>
</view>
</view>
</view>
<view class="item" v-show="shopInfo.isFlagshipStore">
<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 style="font-size: 12px;">
{{shopInfo.isFlagshipStorePhoto.length}}/1
</view>
</view>
<view class="acea-row row-middle" style="justify-content: flex-start;">
<view class='pictrue' v-for="(item,index) in shopInfo.isFlagshipStorePhoto" :key="index" :data-index="index"
@click="getPhotoClickIdx(shopInfo.isFlagshipStorePhoto,index)">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click.stop='DelPic(shopInfo.isFlagshipStorePhoto,index)'></text>
</view>
<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(shopInfo.isFlagshipStorePhoto)'
v-if="shopInfo.isFlagshipStorePhoto.length < 1">
<text class='iconfont icon-icon25201' style="top: 25px;left: 25px;"></text>
</view>
</view>
</view>
</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 {
merClassifly,
getStoreTypeApi
} from '@/api/store.js';
import {getGoodsDetails} from '@/api/store.js';
const app = getApp();
export default {
components: {
areaWindow,
},
data() {
return {
isFalse: ['是', '否'],
validate: false,
display: false,
display2: false,
shopInfo: {
shopName: '',
mer_classification:'',
classification:'',
// registerAddress: '',
// registerAddressDetail: '',
businessAddress: '',
businessAddressDetail: '',
EnterpriseType: '',
EnterpriseName: '',
EnterpriseJoinName: '',
EnterprisePhone: '',
EnterpriseId: '',
EnterpriseRooter: [],
userName: '',
userPhone: '',
userId: '',
userPhoto: [],
mer_type:'',
mer_storeType:'',
isVeteran: false,
isVeteranPhoto: [],
isFlagshipStore: false,
isFlagshipStorePhoto: [],
},
cityArray: [],
storeTypeArr2: [{
type_name: '',
mer_type_id: ''
}],
enterpriseArray: ["生产型企业", "销售型企业"],
storeTypeArr: ['旗舰店', '非旗舰店'],
array: [{
category_name: '',
merchant_category_id: ''
}],
successful: false,
isType: false,
showProtocol: false,
pics: [],
};
},
onLoad(options) {
if (this.isLogin) {
this.getClassfication();
this.getStoreType();
} else {
toLogin()
}
if (options.mer_i_id) {
this.mer_i_id = options.mer_i_id
uni.showLoading({
title: '获取数据中',
});
this.$nextTick(function() {
this.getGoodsDetails(options.mer_i_id)
})
}
},
onShow() {
console.log(1111);
},
computed: {
...mapGetters(['isLogin', 'viewColor']),
},
methods: {
// 获取历史提交数据详情
getGoodsDetails(id) {
getGoodsDetails(id).then(res => {
let arr = Object.keys(this.shopInfo)
let resData = res.data;
let com=resData.com;
let biz=resData.biz;
uni.setStorageSync('updateShopInfo',resData);
let {shopName,mer_classification,classification,businessAddress,businessAddressDetail,EnterpriseType,EnterpriseName,EnterpriseJoinName,EnterprisePhone,EnterpriseId,EnterpriseRooter,userName,userPhone,userId,userPhoto,isVeteran,isVeteranPhoto,isFlagshipStore,isFlagshipStorePhoto,mer_type,mer_storeType} = this.shopInfo;
console.log(resData);
mer_classification=this.array[resData.mer_type_id],classification=resData.mer_type_id,mer_storeType=this.storeTypeArr[resData.merchant_category_id]['type_name'],mer_type=resData.mer_type_id,EnterprisePhone=com.mobile,shopName=resData.mer_name,userPhone=resData.phone,EnterpriseName=com.name,userName=resData.name,mer_type=resData.mer_type_id,classification=resData.mer_type_id,EnterpriseType=com.type,EnterpriseName=com.name,EnterpriseJoinName=com.contact,EnterpriseId=com.number,userName=com.initiator,userPhone=com.inti_mobile,userId=com.inti_number,userPhoto=com.init_image,isVeteran=com.is_huimei,isVeteranPhoto=com.image_huimei,isFlagshipStore=com.is_soldier,isFlagshipStorePhoto=com.image_soldier,businessAddress=biz.province+'/'+biz.city,businessAddressDetail=biz.address_true;
this.shopInfo={
shopName,mer_classification,classification,businessAddress,businessAddressDetail,EnterpriseType,EnterpriseName,EnterpriseJoinName,EnterprisePhone,EnterpriseId,EnterpriseRooter,userName,userPhone,userId,userPhoto,isVeteran,isVeteranPhoto,isFlagshipStore,isFlagshipStorePhoto,mer_type,mer_storeType
}
this.validateBtn();
uni.hideLoading();
})
},
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 {
shopName,businessAddress,businessAddressDetail,EnterpriseType,EnterpriseName,EnterpriseJoinName,EnterprisePhone,EnterpriseId,userName,userPhone,userId,userPhoto,isVeteran,isVeteranPhoto,isFlagshipStore,isFlagshipStorePhoto,mer_type,mer_storeType
} = this.shopInfo;
if (shopName&&businessAddress&&businessAddressDetail&&EnterpriseType&&EnterpriseName&&EnterpriseJoinName&&EnterprisePhone&&EnterpriseId&&mer_type&&mer_storeType ) {
// if(isVeteran&&isVeteranPhoto.length==0){
// this.validate=false;
// }else
// if (isFlagshipStore&&isFlagshipStorePhoto.length==0){
// this.validate=false;
// }else{
let date2 = {
phone: EnterprisePhone,
mer_name:shopName,
name:EnterpriseJoinName,
mer_type_id:mer_type,//hjb 这里应该是设置反了
com:{
name:EnterpriseName,
type:EnterpriseType,
contact:EnterpriseJoinName,
mobile:EnterprisePhone,
number:EnterpriseId,
initiator:userName,
inti_mobile:userPhone,
inti_number:userId,
init_image:userPhoto,
is_huimei:isVeteran,
image_huimei:isVeteranPhoto,
is_soldier:isFlagshipStore,
image_soldier:isFlagshipStorePhoto,
},
biz:{
province:businessAddress.split('/')[0],
city:businessAddress.split('/')[1],
address_true:businessAddressDetail,
}
}
uni.setStorageSync('shopInfo', date2)
this.validate = true;
// }
}else{
this.validate=false;
}
},
// 获取商户分类
getClassfication() {
merClassifly()
.then(res => {
this.array = res.data
})
.catch(res => {
this.$util.Tips({
title: res
});
});
},
// 获取店铺类型
getStoreType() {
getStoreTypeApi()
.then(res => {
this.storeTypeArr = res.data
})
.catch(res => {
this.$util.Tips({
title: res
});
});
},
bindPickerChange(e) {
let idx = e.target.value
this.shopInfo.classification = this.array[idx]['merchant_category_id']
this.shopInfo.mer_classification = this.array[idx]['category_name']
this.validateBtn()
},
bindPickerChange1(e) {
let idx = e.target.value
this.shopInfo.mer_type = this.storeTypeArr[idx]['mer_type_id']
this.shopInfo.mer_storeType = this.storeTypeArr[idx]['type_name']
this.validateBtn()
},
changeEnterprise(e) {
this.shopInfo.EnterpriseType = this.enterpriseArray[e.target.value];
this.validateBtn();
},
checkPhone(phone) {
return /^1[3-9]\d{9}$/.test(phone);
},
nextStep() {
let a=this.checkPhone(this.shopInfo.userPhone);
let b=this.checkPhone(this.shopInfo.EnterprisePhone);
// if(!a){
// uni.showToast({
// icon:'none',
// title: '发起人手机号格式有误'
// });
// return
// }
if(!b){
uni.showToast({
icon:'none',
title: '企业对接人手机号格式有误'
});
return
}
// }else if(this.shopInfo.userPhoto.length!=1){
// uni.showToast({
// icon:'none',
// title: '请上传手持介绍信'
// });
// return
// }
if(this.mer_i_id){
uni.navigateTo({
url: '/pages/store/settled/step2?mer_i_id='+this.mer_i_id
})
}else{
uni.navigateTo({
url: '/pages/store/settled/step2'
})
}
},
viteran(e) {
// console.log('e: ',e);
this.shopInfo.isVeteran = e.detail.value;
this.validateBtn();
},
flagShipStore(e) {
this.shopInfo.isFlagshipStore = e.detail.value;
this.validateBtn();
},
/**
* 上传文件
*
*/
uploadpic(item) {
let that = this;
let params = {
url:'upload/image',
name:'file'
}
that.$util.uploadImageOne(params, function(res) {
item.push(res.data.path);
that.validateBtn();
// that.$set(that, 'pics', that.pics);
});
},
/**
* 删除图片
*
*/
DelPic(item, index) {
let that = this,
pic = item[index];
item.splice(index, 1);
that.validateBtn();
// 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
});
}
},
// downTemplate() {
// uni.showModal({
// title: '是否下载示例模版',
// success(res) {
// if (res.confirm) {
// location.href = 'https://plus.hwms.shop/uploads/file/letter_introduction.docx'
// } else if (res.cancel) {
// return
// }
// }
// })
// },
// perviewTemplate() {
// let url = ['https://plus.hwms.shop/uploads/file/mer_template.jpg'];
// uni.previewImage({
// current: url[0], // 传 Number H5端出现不兼容
// urls: url
// });
// },
jumpToList() {
uni.navigateTo({
url: "/pages/store/applicationRecord/index"
})
},
}
}
</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%);
display: flex;
flex-direction: column;
grid-gap: 32rpx;
padding-bottom: 40rpx;
}
.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: 122rpx;
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 .tips-text {
color: #e40000;
font-size: 20rpx;
padding: 12rpx 12rpx 0 12rpx;
}
.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;
input {
flex: 1;
}
picker {
flex: 1;
}
}
.row-middle .down-style {
color: #00aaff;
font-size: 20rpx;
}
.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>