2024-03-16 13:49:31 +08:00

1731 lines
41 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 class="page" :style="{'height':successful?'100vh':''}">
<!-- #ifdef MP || APP-PLUS -->
<view class="conten-top" :style="'height:'+statusBarHeight+'px'" :class="{'bar-top-bg':barBg}"
v-if="!successful">
<view class="" style="position: absolute;left: 30rpx;bottom: 15rpx;" @click="logout"><i
class="iconfont icon-xiangzuo" style="font-size: 40rpx;text-align: left;color:#fff;"></i></view>
<view class=""
style="position: absolute;bottom: 15rpx;width: 500rpx; left:50%;transform: translate(-50%);text-align: center;color:#fff;font-size: 32rpx;font-weight: bold;">
种养殖户入驻
</view>
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="header" v-if="!successful">
<view class="title-bar" :class="{'bar-top-bg':barBg}">
<view class="title-bar-icon" @click="logout">
<i class="iconfont icon-xiangzuo"></i>
</view>
<view class="title-bar-txt">
种养殖户入驻
</view>
</view>
</view>
<!-- #endif -->
<view v-if="!successful" :style="viewColor">
<form report-submit='true'>
<view class='merchantsSettled'>
<view class="merchantBgCount">
<image mode="widthFix" class="merchantBg"
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/96ec1202403151608564555.webp" alt="">
</view>
<view class="application-record" @click="jumpToList" v-if="!mer_i_id">
申请记录
<text class="iconfont icon-xiangyou"></text>
</view>
<view class='list'>
<view class="list-title">种养殖户入驻</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name">姓名</text>
<input type="text" maxlength="30" placeholder="请输入姓名" v-model="merchantData.user_name"
@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 businessBox">店铺所在地</text>
<picker mode=multiSelector @change="bindPickerChange2" :value="index2"
:range="business" range-key="name" @columnchange="pickerColumnchange">
<view class="businessBox"
:style="{'color':(business_name == '' || business_name.length == 5)?'#B2B2B2':''}"
style="width: 400rpx;word-break: keep-all;line-height: 40rpx;font-size: 32rpx;">
{{(business_name == '' || business_name.length == 5)?'请选择商圈':business_name}}
</view>
<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 businessBox">详细地址</text>
<input type="text" maxlength="30" placeholder="请输入详细地址"
v-model="merchantData.address" @input="validateBtn"
placeholder-class='placeholder' />
</view>
</view>
</view>
</view>
<view class="item no-border">
<view class='acea-row row-middle'>
<text class="item-title" style="margin-right: 20rpx;">请上传营业执照</text>
<text class="item-desc">(图片格式支持JPG、PNG、JPEG)</text>
<view class="upload">
<view v-if="business_license" class='pictrue' @click='uploadpicText'>
<image :src='business_license'></image>
</view>
<view v-else class='pictrue acea-row row-center-wrapper row-column'
@click='uploadpicText'>
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name">银行卡号</text>
<input type="number" placeholder="请输入银行卡号" v-model="merchantData.bank_code"
@input="validateBtn" placeholder-class='placeholder' />
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name">开户银行</text>
<input type="text" maxlength="30" placeholder="请输入开户银行名称"
v-model="merchantData.bank_username" @input="validateBtn"
placeholder-class='placeholder' />
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name">开户网点</text>
<input type="text" placeholder="请输入开户网点" v-model="merchantData.bank_opening"
@input="validateBtn" placeholder-class='placeholder' />
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name">持卡人</text>
<input type="text" placeholder="请输入持卡人姓名" v-model="merchantData.bank_card_username"
@input="validateBtn" placeholder-class='placeholder' />
</view>
</view>
<view class="item no-border">
<view class='acea-row row-middle'>
<text class="item-title" style="margin-right: 20rpx;">请上传银行卡正面照片</text>
<text class="item-desc">(支持JPG、PNG、JPEG)</text>
<view class="upload">
<view v-if="bank_front" class='pictrue' @click='uploadpicBack'>
<image :src='bank_front'></image>
</view>
<view v-else class='pictrue acea-row row-center-wrapper row-column'
@click='uploadpicBack'>
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
</view>
<view class="item">
<view class="acea-row row-middle">
<text class="item-name">联系电话</text>
<input type="text" placeholder="请输入手机号" v-model="merchantData.phone"
@input="validateBtn" placeholder-class='placeholder' />
</view>
</view>
<view class="item rel">
<view class="acea-row row-middle">
<text class="item-name">验证码</text>
<input type="text" placeholder="填写验证码" v-model="merchantData.yanzhengma"
@input="validateBtn" class="codeIput" placeholder-class='placeholder' />
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
@click="handleVerify">
{{ text }}
</button>
</view>
</view>
<view class="item" v-if="isShowCode">
<view class="acea-row row-middle">
<text class="item-name">验证码</text>
<input type="text" placeholder="请输入验证码" class="codeIput" v-model="codeVal"
@input="validateBtn" placeholder-class='placeholder' />
<view class="imageCode" @click="again">
<image :src="codeUrl" />
</view>
</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(0)">《入驻协议》 </button>
<button class="settleAgree" @click="getConfig(1)">《商户服务协议》 </button>
</view>
<button class='submitBtn' :class="validate === true? 'on':''" @click="formSubmit">
提交申请
</button>
</view>
</view>
</form>
<view class="settlementAgreement" v-if="showProtocol">
<view class="setAgCount" style="width: 656rpx;height: 800rpx;">
<i class="icon iconfont icon-cha" @click="showProtocol = false"></i>
<div class="title" v-if='titFlag'>{{isType ? '店铺类型说明' : '商户入驻协议'}}</div>
<div class="title" v-else></div>
<view class="content">
<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
</view>
</view>
</view>
<view class="settlementAgreement" v-if="isshow">
<view class="setAgCount" style="width: 100%;height: 100%;padding-top: 180rpx;">
<view class="" style="width: 60rpx;height: 60rpx; position: absolute;left: 30rpx; top:90rpx"
@click="recuo">
<i class="iconfont icon-xiangzuo" style="width: 60rpx;height: 60rpx;font-size: 40rpx;"></i>
</view>
<div class="title">{{detail.title}}</div>
<view style="margin: 20rpx 0;">甲方公司:{{company?company:"暂无公司信息"}}</view>
<view style="margin: 20rpx 0;">机构代码:{{organization_code?organization_code:"暂无公司信息"}}</view>
<view class="contenta" v-if="detail.mer_services_agree">
<jyf-parser :html="detail.mer_services_agree" ref="article" :tag-style="tagStyle"></jyf-parser>
</view>
<view class="contenta" v-else>
<jyf-parser :html="detail.mer_supply_agree" ref="article" :tag-style="tagStyle"></jyf-parser>
</view>
<view class="setAgCountbtn">
<view class="border"></view>
<button :class="num>0?'setAgCountbtnb':'setAgCountbtnc'" class="btn" :disabled="num!=0"
@click="agree">
<text v-if="num>0">请仔细阅读协议 {{num}}秒后可提交</text>
<text v-else>同意本协议</text>
</button>
</view>
</view>
</view>
<view class='loadingicon acea-row row-center-wrapper' v-if="loading">
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
</view>
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse">
</authorize>
<Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }"
ref="verify">
</Verify>
</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>
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
personalStore,
verify,
merClassifly,
getCategoryList,
getGoodsDetails,
updateGoodsRecord,
getStoreTypeApi,
agreeiness,
merchantLicenseIdentify
} from '@/api/store.js';
import {
getCaptcha,
getAgreementApi,
merstreet
} from "@/api/user";
import {
getStreet,
getArea,
getVillage,
getCitys
} from "@/api/article.js"
import {
mapGetters
} from "vuex";
import {
configMap
} from "@/utils";
import {
intention,
} from "@/api/product"
import parser from "@/components/jyf-parser/jyf-parser";
import authorize from '@/components/Authorize';
import Verify from '@/components/verify/verify.vue';
import {
mer_services_agree
} from "@/api/activity.js"
export default {
components: {
"jyf-parser": parser,
authorize,
Verify
},
data() {
return {
titFlag: true,
company: '',
organization_code: '',
cartId: '', //购物车id
pinkId: 0, //拼团id
couponId: 0, //优惠券id
isAuto: false, //没有授权的不会自动授权
isShowAuth: false, //是否隐藏授权
text: "获取验证码",
codeUrl: "",
disabled: false,
isAgree: false,
showProtocol: false,
isShowCode: false,
loading: false,
isshow: false,
merchantData: {
enterprise_name: "",
user_name: "",
phone: "",
classification: '',
social_credit_code: '',
company_name: '',
address: '',
invitation_code: '',
},
business_license: '', //营业执照
validate: false,
successful: false,
keyCode: "",
codeVal: "",
protocol: this.sys_intention_agree,
timer: "",
index: 0,
index1: 0,
index2: [0, 0, 0],
mer_classification: "",
nature_business: 0,
array: [{
category_name: '',
merchant_category_id: ''
}],
bindPickerChangeidx: [],
storeTypeArr: [{
type_name: '',
mer_type_id: ''
}],
StreetTyoeArr: [{
area_id: '',
street_id: '',
city_id: '',
village_id: ''
}],
mer_storeType: '',
city_id: '',
area_id: '',
street_id: '',
village_id: '',
isnm: false,
isnum: 0,
code1: '',
code2: '',
business_name: '',
business: [],
pics: [],
tagStyle: {
img: 'width:100%;display:block;'
},
mer_i_id: null, // 商户申请id
isType: false,
num: 10,
detail: {},
statusBarHeight: 0,
where: {
type: 1,
page: 1,
limit: 10
},
codenote: [],
barBg: false, //导航栏背景
bank_front: '', //申请人身份证
};
},
beforeDestroy() {
clearTimeout(this.timer)
},
computed: configMap({
sys_intention_agree: ''
}, mapGetters(['isLogin', 'viewColor', 'keyColor'])),
onLoad(options) {
if (this.isLogin) {
this.getClassfication();
this.getStoreType();
} else {
this.isAuto = true;
this.isShowAuth = true
}
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)
})
} else this.getCity()
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 45;
},
onPageScroll(e) {
if (e.scrollTop > 50) {
this.barBg = true;
} else {
this.barBg = false;
}
},
methods: {
//获取交易信息
codelist() {
intention(this.where).then(res => {
this.codenote = res.data.list
})
},
//退出
logout() {
uni.switchTab({
url: '/pages/user/index'
})
},
//关闭弹窗
recuo() {
if (this.num > 0) {
this.num = 10
this.isshow = false
} else {
this.num = 10
this.isshow = false
}
},
//拒绝
refuse() {
uni.switchTab({
url: '/pages/user/index'
})
},
countDown() {
let {
num
} = this;
num = num > 0 ? num - 1 : "0";
setTimeout(() => {
this.num = num;
if (num == '0') {
// this.launchApp()
return
}
if (this.isshow == false && this.num > 0) {
this.num = 10
return
}
this.countDown();
}, 1000);
},
//获取商户入驻申请协议
shoplist(val) {
agreeiness({
type: val
}).then(res => {
this.detail = res.data
})
},
// 获取村
getVillage(street = null) {
const self = this;
getVillage({
street_code: street
}).then(res => {
self.$set(self.business, 3, res.data);
if (self.mer_i_id && !this.business_name) {
let city = self.business[0].find(item => item.code == self.city_id)?.name;
const zero = self.business[0].findIndex(item => item.code == self.city_id);
this.index2[0] = zero;
let area = self.business[1].find(item => item.code == self.area_id)?.name;
const one = self.business[0].findIndex(item => item.code == self.area_id);
this.index2[1] = one;
let street = self.business[2].find(item => item.code == self.street_id)?.name;
const two = self.business[0].findIndex(item => item.code == self.street_id);
this.index2[2] = two;
let village = self.business[3].find(item => item.id == self.village_id)?.name;
const three = self.business[0].findIndex(item => item.code == self.village_id);
this.index2[3] = three;
this.business_name = `${city} ${area} ${street} ${village}`;
}
})
},
//获取镇
getStreet(area = null, street = null) {
const self = this;
getStreet({
area_code: area
}).then(res => {
this.business[2] = res.data;
street = street == null ? self.business[2][0].code : street;
self.getVillage(street)
})
},
//获取区
getArea(city = null, area = null, street = null) {
getArea({
city_code: city
}).then(res => {
this.business[1] = res.data;
area = area == null ? this.business[1][0].code : area;
this.getStreet(area, street)
})
},
// 获取市
getCity(city = null, area = null, street = null) {
getCitys().then(res => {
this.business[0] = res.data;
const code = this.business[0][0].code; //市 初始化
city = city == null ? code : city;
this.getArea(city, area, street);
})
},
//商圈数据变化
pickerColumnchange(e) {
if (e.detail.column === 0) { //第0列
this.getArea(this.business[0][e.detail.value].code);
this.index2[0] = e.detail.value
this.index2[1] = 0
this.index2[2] = 0
this.index2[3] = 0
} else if (e.detail.column === 1) {
this.getStreet(this.business[1][e.detail.value].code)
this.index2[1] = e.detail.value
this.index2[2] = 0
this.index2[3] = 0
} else if (e.detail.column === 2) {
this.getVillage(this.business[2][e.detail.value].code)
this.index2[2] = e.detail.value
this.index2[3] = 0
} else if (e.detail.column == 3) {
this.index2[3] = e.detail.value
}
},
getConfig(type) {
this.isType = false;
this.showProtocol = true;
if (type == 0) {
this.titFlag = true
this.protocol = this.sys_intention_agree.replace(/\*\*甲方公司\*\*/g, this.company);
} else {
this.titFlag = false
mer_services_agree().then(res => {
this.protocol = res.data.mer_services_agree.replace(/\*\*甲方公司\*\*/g, this.company);
})
}
},
// 获取历史提交数据详情
getGoodsDetails(id) {
getGoodsDetails(id).then(res => {
let resData = res.data
this.merchantData.enterprise_name = resData.mer_name
this.merchantData.user_name = resData.name
this.merchantData.phone = resData.phone
this.merchantData.social_credit_code = resData.social_credit_code
this.merchantData.company_name = resData.company_name
this.merchantData.address = resData.address
this.merchantData.invitation_code = resData.invitation_code
this.merchantData.classification = resData.merchant_category_id
this.merchantData.mer_type = resData.mer_type_id
this.city_id = resData.city_id;
this.area_id = resData.area_id
this.street_id = resData.street_id
this.village_id = resData.village_id
const bankInfo = resData.financial_bank ? JSON.parse(resData.financial_bank) : '';
this.$set(this.merchantData, 'bank_code', bankInfo.bank_code);
this.$set(this.merchantData, 'bank_username', bankInfo.bank);
this.$set(this.merchantData, 'bank_opening', bankInfo.bank_branch);
this.$set(this.merchantData, 'bank_card_username', bankInfo.name);
this.bank_front = bankInfo.bank_front[0] ? bankInfo.bank_front[0] : '';
this.business_license = resData.images[0];
resData.images.shift();
this.pics = resData.images;
this.mer_classification = this.getCategoryName(resData.merchant_category_id, this.array)
this.mer_storeType = this.getStoreTypeName(resData.mer_type_id, this.storeTypeArr)
this.business_name = '';
this.getCity(this.city_id, this.area_id, this.street_id);
if (resData.mer_type_id != 12) {
this.shoplist('mer_services_agree')
} else {
this.shoplist('mer_supply_agree')
}
uni.hideLoading();
})
},
//获取商户分类名称
getCategoryName(id, arr) {
for (let i = 0; i < arr.length; i++) {
if (arr[i].merchant_category_id === id) {
return arr[i]['category_name']
}
}
},
//获取店铺类型名称
getStoreTypeName(id, arr) {
for (let i = 0; i < arr.length; i++) {
if (arr[i].mer_type_id === id) {
return arr[i]['type_name']
}
}
},
bindPickerChange: function(e) {
let idx = e.target.value;
this.merchantData.classification = this.array[idx]['merchant_category_id']
this.mer_classification = this.array[idx]['category_name']
this.validateBtn()
},
columnchange(e) {
if (e.detail.column == 0) {
this.bindPickerChangeidx = this.array[e.detail.value].children;
}
},
bindPickerChange2: function(e) {
this.index2 = e.detail.value
this.business_name =
`${this.business[0][this.index2[0]].name} ${this.business[1][this.index2[1]].name} ${this.business[2][this.index2[2]].name} ${this.business[3][this.index2[3]].name}`
this.city_id = this.business[0][this.index2[0]].code;
this.area_id = this.business[1][this.index2[1]].code;
this.street_id = this.business[2][this.index2[2]].code
this.village_id = this.business[3][this.index2[3]].id
},
// 获取商户分类
getClassfication: function() {
merClassifly().then(res => {
this.array = res.data
}).catch(res => {
this.$util.Tips({
title: res
});
});
},
// 获取店铺类型
getStoreType: function() {
getStoreTypeApi()
.then(res => {
this.storeTypeArr = res.data
})
.catch(res => {
this.$util.Tips({
title: res
});
});
},
// 图片预览
// 获得相册 idx
getPhotoClickIdx(e) {
let _this = this;
let idx = e.currentTarget.dataset.index;
_this.imgPreview(_this.pics, idx);
},
// 图片预览
imgPreview: function(list, idx) {
// list图片 url 数组
if (list && list.length > 0) {
uni.previewImage({
current: list[idx], // 传 Number H5端出现不兼容
urls: list
});
}
},
// 授权回调
onLoadFun: function() {
this.isShowAuth = false;
},
// 授权关闭
authColse: function(e) {
this.isShowAuth = e
},
toggleTab(str) {
this.$refs[str].show();
},
// 首页
goHome() {
uni.switchTab({
url: '/pages/index/index'
});
},
again() {
this.getcaptcha()
},
/**
* 上传文件
*
*/
uploadpic: function() {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
that.pics.push(res.data.path);
that.$set(that, 'pics', that.pics);
});
},
/**
* 上传图片识别文字
*
*/
uploadpicText: function() {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
that.business_license = res.data.path;
});
},
/**
* 删除图片
*
*/
DelPic: function(index) {
let that = this,
pic = this.pics[index];
that.pics.splice(index, 1);
that.$set(that, 'pics', that.pics);
},
getCode() {
let that = this
getCodeApi()
.then(res => {
that.keyCode = res.data.key;
})
.catch(res => {
that.$util.Tips({
title: res
});
});
},
async code(data) {
let that = this;
if (!that.merchantData.phone) return that.$util.Tips({
title: '请填写手机号码'
});
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.merchantData.phone)) return that.$util.Tips({
title: '请输入正确的手机号码'
});
await verify({
phone: that.merchantData.phone,
// key: that.codeKey,
// code: that.codeVal,
type: 'intention',
captchaType: 'blockPuzzle',
captchaVerification: data.captchaVerification
})
.then(res => {
that.$util.Tips({
title: res.msg
});
that.sendCode();
})
.catch(res => {
that.$util.Tips({
title: res
});
if (res.status == 402) {
// that.getcaptcha();
}
});
},
getcaptcha() {
let that = this
getCaptcha().then(data => {
that.codeUrl = data.data.captcha; //图片路径
that.codeVal = data.data.code; //图片验证码
that.codeKey = data.data.key //图片验证码key
})
that.isShowCode = true;
},
sendCode() {
if (this.disabled) return;
this.disabled = true;
let n = 60;
this.text = "剩余 " + n + "s";
const run = setInterval(() => {
n = n - 1;
if (n < 0) {
clearInterval(run);
}
this.text = "剩余 " + n + "s";
if (this.text < "剩余 " + 0 + "s") {
this.disabled = false;
this.text = "重新获取";
}
}, 1000);
},
onConfirm(val) {
this.region = val.checkArr[0] + '-' + val.checkArr[1] + '-' + val.checkArr[2];
},
ChangeIsAgree: function(e) {
this.isAgree = !this.isAgree;
this.validateBtn();
},
//协议弹窗
showxy() {
this.isshow = true
},
uploadpicBack: function() {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
that.bank_front = res.data.path;
});
},
//提交
agree() {
let that = this;
let requestData = {
phone: that.merchantData.phone,
mer_name: that.merchantData.user_name + '的个人店铺',
name: that.merchantData.user_name,
code: that.merchantData.yanzhengma,
address: that.merchantData.address,
city_id: this.city_id,
area_id: this.area_id,
street_id: this.street_id,
village_id: this.village_id,
images: [this.business_license, ...that.pics],
financial_bank: {
// 开户信息
bank_code: this.merchantData.bank_code,
bank: this.merchantData.bank_username,
bank_branch: this.merchantData.bank_opening,
name: this.nature_business == 1 ? that.merchantData.company_name : this.merchantData
.bank_card_username,
bank_front: [this.bank_front]
}
}
that.validate = false;
if (that.mer_i_id) {
updateGoodsRecord(that.mer_i_id, requestData).then(res => {
if (res.status == 200) {
title: '提交成功',
that.loading = true;
that.timer = setTimeout(() => {
that.successful = true;
that.validate = true;
}, 1000)
}
}).catch(res => {
this.isshow = false
that.validate = true;
that.$util.Tips({
title: res
});
})
} else {
personalStore(requestData).then(data => {
if (data.status == 200) {
title: '提交成功',
that.loading = true;
this.timer = setTimeout(() => {
that.successful = true;
that.validate = true;
}, 1000)
}
}).catch(res => {
this.isshow = false
that.validate = true;
that.$util.Tips({
title: res
});
})
}
},
formSubmit() {
if (this.validateForm() && this.validate) {
return this.agree();
if (this.merchantData.mer_type == '12') return this.agree();
if (this.codenote.length == 0) {
this.isshow = true
this.countDown()
} else {
if (this.codenote[0].status == 0) {
uni.showModal({
title: '申请正在审核中,请勿重复提交'
})
} else {
this.isshow = true
this.countDown()
}
}
}
},
validateBtn: function() {
let that = this,
value = that.merchantData;
if (value.user_name && value.phone && /^1(3|4|5|7|8|9|6)\d{9}$/i.test(
value
.phone) &&
value.yanzhengma) {
if (!that.isShowCode) {
that.validate = true;
} else {
if (that.codeVal) {
that.validate = true;
} else {
that.validate = false;
}
}
} else {
that.validate = false;
}
},
validateForm: function() {
let that = this,
value = that.merchantData;
if (!value.user_name) return that.$util.Tips({
title: '请输入姓名'
});
if (!value.phone) return that.$util.Tips({
title: '请输入手机号'
});
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) return that.$util.Tips({
title: '请输入正确的手机号码'
});
if (!value.yanzhengma) return that.$util.Tips({
title: '请填写验证码'
});
if (!this.business_name) return that.$util.Tips({
title: '请选择店铺所在地'
})
if (!value.address) return that.$util.Tips({
title: '请输入详细地址'
});
if (!that.isAgree) return that.$util.Tips({
title: '请勾选并同意入驻协议'
});
if (!that.business_license) return that.$util.Tips({
title: '请上传营业执照'
});
if (!this.merchantData.bank_code) {
return that.$util.Tips({
title: '请输入银行卡号'
});
}
if (!this.merchantData.bank_username) {
return that.$util.Tips({
title: '请输入开户银行'
});
}
if (!this.merchantData.bank_opening) {
return that.$util.Tips({
title: '请输入开户网点'
});
}
if (!this.merchantData.bank_card_username) {
return that.$util.Tips({
title: '请输入持卡人姓名'
});
}
that.validate = true;
return true;
},
jumpToList() {
uni.navigateTo({
url: "/pages/store/applicationRecord/unit"
})
},
success(data) {
this.$refs.verify.hide();
this.code(data);
},
handleVerify() {
if (!this.merchantData.phone) return this.$util.Tips({
title: '请输入手机号'
});
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.merchantData.phone)) return this.$util.Tips({
title: '请输入正确的手机号码'
});
if (!this.isAgree) return this.$util.Tips({
title: '请勾选并同意入驻协议'
});
this.$refs.verify.show();
}
}
}
</script>
<style scoped lang="scss">
.page {
width: 750rpx;
height: 2594rpx;
background: linear-gradient(180deg, #40AE36 0%, #72BE53 100%);
}
.header {
height: 440rpx;
width: 100%;
text-align: center;
background-color: transparent;
background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/96ec1202403151608564555.webp);
background-position: center;
.title-bar {
position: fixed;
top: 0;
height: 88rpx;
line-height: 88rpx;
width: 100%;
z-index: 11;
.title-bar-icon {
position: absolute;
left: 30rpx;
.icon-xiangzuo {
font-size: 40rpx;
text-align: left;
color: #fff;
}
}
.title-bar-txt {
text-align: center;
color: #fff;
}
}
}
/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;
}
.conten-top {
width: 100%;
text-align: center;
background-color: transparent;
top: 0;
position: fixed;
z-index: 10;
}
.bar-top-bg {
background-color: #40AE36;
}
.uni-input-placeholder {
color: #B2B2B2;
}
.item-name {
width: 190rpx;
}
.uni-list-cell {
position: relative;
.iconfont {
font-size: 14px;
color: #7a7a7a;
position: absolute;
right: 15px;
top: 7rpx;
}
.icon-guanbi2 {
right: 35px;
}
}
.merchantBgCount {
line-height: 0;
}
.merchantsSettled {
// background-image: linear-gradient(#ff5a32 644rpx, var(--view-bntColor22) 100%);
// min-height: 1800rpx;
// position: relative;
}
.merchantsSettled .merchantBg {
width: 750rpx;
}
.merchantsSettled .list {
background-color: #fff;
border-radius: 12px;
padding: 22px 0;
margin: 0 15px;
position: absolute;
top: 400rpx;
width: calc(100% - 30px);
}
.list-title {
position: relative;
font-weight: 600;
font-size: 30rpx;
color: #40AE36;
text-align: center;
margin-bottom: 40rpx;
&::after {
content: "";
display: inline-block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 233rpx;
height: 14rpx;
background: #40AE36;
opacity: 0.36;
filter: blur(6px);
}
}
.application-record {
position: absolute;
display: flex;
align-items: center;
top: 310rpx;
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;
}
.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: 694rpx;
// height: 458px;
position: absolute;
top: 50%;
left: 50%;
padding: 28rpx;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden;
.content {
height: 740rpx;
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 {
color: #333;
font-size: 26rpx;
line-height: 22px;
text-align: justify;
text-justify: distribute-all-lines;
overflow-y: scroll;
}
.settlementAgreement .setAgCount .contenta {
color: #333;
font-size: 26rpx;
line-height: 22px;
text-align: justify;
text-justify: distribute-all-lines;
height: 75%;
overflow-y: scroll;
}
.setAgCountbtn {
display: flex;
justify-content: space-around;
position: relative;
.setAgCountbtna {
margin-top: 40rpx;
// width: 200rpx;
height: 74rpx;
text-align: center;
line-height: 74rpx;
border-radius: 46rpx 46rpx;
opacity: 1;
border: 2rpx solid #B3B3B3;
font-size: 25rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #737373;
}
.setAgCountbtnb {
margin-top: 40rpx;
padding-left: 20rpx;
padding-right: 20rpx;
height: 74rpx;
text-align: center;
line-height: 74rpx;
background: #cecece;
border-radius: 46rpx 46rpx;
opacity: 1;
font-size: 25rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
}
.setAgCountbtnc {
margin-top: 40rpx;
// width: 200rpx;
height: 74rpx;
text-align: center;
line-height: 74rpx;
background: linear-gradient(270deg, #FF6D20 0%, #F84221 100%);
border-radius: 46rpx 46rpx;
opacity: 1;
font-size: 25rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
}
.border {
position: absolute;
top: 0;
left: -28rpx;
width: 100vw;
height: 100%;
border-radius: 40rpx 40rpx 0 0;
box-shadow: 0px -5px 5px -2px rgba(0, 0, 0, 0.2);
/* 在上边框添加阴影 */
}
.btn {
width: 694rpx;
font-weight: bold;
font-size: 34rpx;
}
}
.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;
}
}
.merchantsSettled .list .items {
padding: 50rpx 0 20rpx;
border-bottom: 1px solid #eee;
position: relative;
margin: 0 20px;
.uni-list-area {
height: 50px;
display: flex;
justify-content: flex-start;
align-items: center;
.uni-list-stree {
width: 30%;
margin-left: 10px;
.mer-area {
width: 100%;
border: 1px solid #C3C3C3;
picker {
display: flex;
}
input {
width: 100%;
font-size: 30rpx;
}
}
}
}
}
</style>