434 lines
10 KiB
Vue
434 lines
10 KiB
Vue
<template>
|
|
<view class="index">
|
|
<view class="bg_image">
|
|
<image :src="bg_image" mode="widthFix"></image>
|
|
</view>
|
|
<view class="certification">
|
|
<form @submit="formSubmit" @reset="formReset">
|
|
<view class="certification_head">
|
|
<view class="certification_head_body">
|
|
<view class="certification_head_body_item">
|
|
<view class="icon iconfont icon-qiye"></view>
|
|
<input type="text" name="store_name" v-model="form.store_name" placeholder='请输入店铺名称' />
|
|
</view>
|
|
<view class="certification_head_body_item">
|
|
<view class="icon iconfont icon-ziyuan1"></view>
|
|
<input type="text" name="user_name" v-model="form.user_name" placeholder='请输入真实姓名' />
|
|
</view>
|
|
<view class="certification_head_body_item">
|
|
<view class="icon iconfont icon-phone"></view>
|
|
<input type="text" name="mobile" v-model="form.mobile" placeholder='请输入手机号码' />
|
|
<button type="default" v-if="sms_open == 1" :disabled="is_send" @click="getCode(form.mobile)">{{send_btn_txt}}</button>
|
|
</view>
|
|
<view class="certification_head_body_item">
|
|
<view class="icon iconfont icon-mima"></view>
|
|
<input type="text" name="password" v-model="form.password" password="true" placeholder='请输入登录密码' />
|
|
</view>
|
|
<view class="certification_head_body_item" v-if="sms_open == 1">
|
|
<view class="icon iconfont icon-yanzhengma"></view>
|
|
<input type="text" name="code" v-model="form.code" placeholder='请输入验证码' />
|
|
</view>
|
|
<picker class="" value="" @change="changeSelect($event)"
|
|
:range="classify_data_name">
|
|
<view class="certification_head_body_item d-b-c">
|
|
<view class="make-item input-box flex-1" v-if="classify_data_name_active">{{classify_data_name_active}}</view>
|
|
<view class="make-item input-box flex-1" style="color: #777777;" v-else>请选择您店铺的主营项目</view>
|
|
<view class="icon iconfont icon-jiantou" style="font-size: 24rpx;"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="certification_body">
|
|
<view class="login_index_updata_name">
|
|
<text style="color:red;">*</text>
|
|
<text style="font-size: 32rpx;font-weight: 500;color: #000000;">请上传营业执照</text>
|
|
</view>
|
|
<view class="login_index_updata_updata">
|
|
<view class="login_index_updata_updata_item2" @click="openUpload('license')">
|
|
<view class="login_index_updata_updata_item_body">
|
|
<view v-if="business_id_path!=''" class="img">
|
|
<image :src="business_id_path"></image>
|
|
</view>
|
|
<view v-if="business_id_path==''">点击上传营业执照</view>
|
|
<input style="display:none" name="business_id" v-model="form.business_id" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="login_index_btn">
|
|
<button form-type="submit" type="default">确定</button>
|
|
</view>
|
|
<Upload v-if="isupload" :isupload="isupload" :type="type" @getImgs="getImgsFunc">上传图片</Upload>
|
|
</form>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Upload from '@/components/upload/upload';
|
|
export default {
|
|
components: {
|
|
/*编辑组件*/
|
|
Upload
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
form: {
|
|
image_frontid: 0,
|
|
business_id: 0,
|
|
mobile: '',
|
|
password: ''
|
|
},
|
|
isupload: false,
|
|
type: 'frontid',
|
|
image_frontid_path: '',
|
|
business_id_path: '',
|
|
bg_image: '',
|
|
classify_data_name: '', //列表名字
|
|
classify_data_id: '', //列表id
|
|
classify_data_name_active: '', //当前选中的列表名字
|
|
classify_data_id_active: '', //当前选中的列表id
|
|
/*当前秒数*/
|
|
second: 60,
|
|
send_btn_txt: '获取验证码',
|
|
/*是否已发验证码*/
|
|
is_send: false,
|
|
sms_open: 0
|
|
}
|
|
},
|
|
created() {
|
|
this.getData();
|
|
this.get_classify();
|
|
},
|
|
methods: {
|
|
/*改变发送验证码按钮文本*/
|
|
changeMsg() {
|
|
if (this.second > 0) {
|
|
this.send_btn_txt = this.second + '秒';
|
|
this.second--;
|
|
setTimeout(this.changeMsg, 1000);
|
|
} else {
|
|
this.send_btn_txt = '获取验证码';
|
|
this.second = 60;
|
|
this.is_send = false;
|
|
}
|
|
},
|
|
/*获取数据*/
|
|
getData() {
|
|
let self = this;
|
|
self._get('user.index/detail', {
|
|
|
|
}, function(res) {
|
|
self.bg_image = res.data.setting.supplier_image;
|
|
});
|
|
},
|
|
//获取验证码
|
|
getCode(mobile) {
|
|
let self = this;
|
|
self._post('supplier.apply/sendCode', {
|
|
mobile: mobile
|
|
}, function(res) {
|
|
self.is_send = true;
|
|
self.changeMsg();
|
|
});
|
|
},
|
|
//获取分类
|
|
get_classify() {
|
|
let self = this;
|
|
self._post('supplier.apply/category', {
|
|
|
|
}, function(res) {
|
|
let list_name = [];
|
|
let list_id = [];
|
|
//合成select列表
|
|
for (var i = 0; i < res.data.list.length; i++) {
|
|
list_name.push(res.data.list[i].name);
|
|
}
|
|
//合成上传所需id数组
|
|
for (var i2 = 0; i2 < res.data.list.length; i2++) {
|
|
list_id.push(res.data.list[i2].category_id);
|
|
}
|
|
self.classify_data_name = list_name;
|
|
self.classify_data_id = list_id;
|
|
self.sms_open = res.data.sms_open;
|
|
});
|
|
},
|
|
//选择分类
|
|
select() {
|
|
let self = this;
|
|
uni.showActionSheet({
|
|
itemList: self.classify_data_name,
|
|
success: function(res) {
|
|
self.classify_data_name_active = self.classify_data_name[res.tapIndex];
|
|
self.classify_data_id_active = self.classify_data_id[res.tapIndex];
|
|
},
|
|
fail: function(res) {
|
|
|
|
}
|
|
});
|
|
},
|
|
/*提交*/
|
|
formSubmit: function(e) {
|
|
let self = this;
|
|
var formdata = e.detail.value;
|
|
formdata.business_id = self.form.business_id;
|
|
console.log(formdata)
|
|
console.log(self.form)
|
|
formdata.category_id = self.classify_data_id_active;
|
|
if (self.classify_data_name_active == '') {
|
|
uni.showToast({
|
|
title: '请填主营类别',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (formdata.store_name == '') {
|
|
uni.showToast({
|
|
title: '请输入店铺名称',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (formdata.business_id == 0) {
|
|
uni.showToast({
|
|
title: '请上传营业执照',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (formdata.user_name == '') {
|
|
uni.showToast({
|
|
title: '请输入真实姓名',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
if (formdata.mobile == '') {
|
|
uni.showToast({
|
|
title: '请输入手机号码',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (formdata.code == '' && self.sms_open == 1) {
|
|
uni.showToast({
|
|
title: '请填写验证码',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (formdata.password == '') {
|
|
uni.showToast({
|
|
title: '请填写登录密码',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
|
|
if (!reg.test(formdata.mobile)) {
|
|
uni.showToast({
|
|
title: '手机号码格式不正确',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
uni.showLoading({
|
|
title: '正在提交',
|
|
mask: true
|
|
})
|
|
self._post('supplier.apply/index', formdata, function(res) {
|
|
self.showSuccess(res.msg, function() {
|
|
self.gotoPage('/pages/shop/application_status')
|
|
}, null, function(){
|
|
uni.hideLoading();
|
|
});
|
|
});
|
|
},
|
|
/*上传*/
|
|
openUpload(e) {
|
|
this.type = e;
|
|
this.isupload = true;
|
|
},
|
|
|
|
/*获取图片*/
|
|
getImgsFunc(e) {
|
|
console.log(e)
|
|
if (e != null && e.length > 0) {
|
|
if (this.type == 'frontid') {
|
|
console.log(e[0].file_id);
|
|
this.image_frontid_path = e[0].file_path;
|
|
this.form.image_frontid = e[0].file_id;
|
|
} else if (this.type == 'license') {
|
|
console.log(e[0].file_id);
|
|
this.business_id_path = e[0].file_path;
|
|
this.form.business_id = e[0].file_id;
|
|
}
|
|
}
|
|
this.isupload = false;
|
|
},
|
|
/* 下拉框 */
|
|
changeSelect(e) {
|
|
this.classify_data_id_active = this.classify_data_id[e.detail.value];
|
|
this.classify_data_name_active = this.classify_data_name[e.detail.value];
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #FF3D19;
|
|
}
|
|
|
|
.bg_image image{
|
|
width: 100%;
|
|
}
|
|
.iconfont {
|
|
font-size: 48rpx;
|
|
}
|
|
|
|
.index {
|
|
width: 750rpx;
|
|
}
|
|
|
|
.certification {
|
|
width: 675rpx;
|
|
margin: 0 auto;
|
|
border-radius: 30rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
background-color: white;
|
|
position: absolute;
|
|
top: 260rpx;
|
|
left: 37.5rpx;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
.certification_head {
|
|
width: 100%;
|
|
}
|
|
|
|
.certification_head_body {
|
|
width: 100%;
|
|
}
|
|
|
|
.certification_head_body_item {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx !important;
|
|
}
|
|
|
|
.certification_head_body_item view {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.certification_head_body_item button {
|
|
width: 172rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
border: 1rpx #E2231A solid;
|
|
border-radius: 40rpx;
|
|
font-size: 26rpx;
|
|
color: #E2231A;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.certification_body {}
|
|
|
|
.login_index_updata_name {
|
|
margin-top: 28rpx;
|
|
margin-left: 48rpx;
|
|
}
|
|
|
|
.login_index_updata_updata {
|
|
width: 90%;
|
|
height: 360rpx;
|
|
margin: 0 auto;
|
|
margin-top: 35rpx;
|
|
}
|
|
|
|
.login_index_updata_updata_item2 {
|
|
width: 100%;
|
|
height: 360rpx;
|
|
border: 1rpx #9a9a9a dotted;
|
|
border-radius: 15rpx;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.login_index_updata_updata_item_body {
|
|
width: 150rpx;
|
|
height: 360rpx;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.img image {
|
|
width: 554rpx;
|
|
height: 360rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.login_index_btn {
|
|
position: relative;
|
|
top: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.login_index_btn button {
|
|
width: 90%;
|
|
height: 80rpx;
|
|
background-color: #F36A24;
|
|
border-radius: 50rpx;
|
|
line-height: 80rpx;
|
|
margin: 0 auto;
|
|
color: white;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.certification_rule {
|
|
position: relative;
|
|
left: 500rpx;
|
|
top: -10rpx;
|
|
}
|
|
|
|
.certification_rule text {
|
|
color: #8a8a8a;
|
|
}
|
|
|
|
.certification_rule image {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.classify_text {
|
|
color: #808080;
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
.select input {
|
|
padding-left: 60rpx;
|
|
color: #808080;
|
|
}
|
|
.make-item{
|
|
padding-left: 60rpx;
|
|
}
|
|
</style>
|