<template>
|
<view class="index" v-if="store_open">
|
<view class="bg_image">
|
<image :src="bg_image"></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="changeSupplierType($event)"
|
:range="supplier_type_list">
|
<view class="certification_head_body_item d-b-c">
|
<view class="make-item input-box flex-1" v-if="supplier_type_name_active">{{supplier_type_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>
|
<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 class="certification_head_body_item d-b-c">
|
<view class="icon iconfont icon-dizhi1"></view>
|
<view class="input-box flex-1">
|
<input class="f32 flex-1 p-30-0" name="location_address" type="text" placeholder-class="gray9" placeholder="请选择地址" v-model="address.location_address"
|
disabled @click="chooseLocation" />
|
</view>
|
<view class="icon iconfont icon-jiantou" style="font-size: 24rpx;"></view>
|
</view>
|
<view class="certification_head_body_item">
|
<view class="icon iconfont icon-diliweizhi"></view>
|
<textarea class="flex-1 f32 p-30-0 lh150" name="house_number" placeholder-class="grary9" :auto-height="true"
|
v-model="address.house_number" placeholder="请输入街道小区楼牌号等"></textarea>
|
</view>
|
<picker class="" value="" @change="changeArea($event)"
|
:range="area_data_name" v-if="area_data_id.length > 0">
|
<view class="certification_head_body_item d-b-c">
|
<view class="make-item input-box flex-1" v-if="area_data_name_active">{{area_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
|
},
|
onShow() {
|
/*获取个人中心数据*/
|
this.getData();
|
},
|
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
|
area_data_name: '', //列表名字
|
area_data_id: '', //列表id
|
area_data_name_active: '', //当前选中的列表名字
|
area_data_id_active: '', //当前选中的列表id
|
supplier_type_list: [], //供应商类型列表
|
supplier_type_ids: [], //供应商类型ID列表
|
supplier_type_name_active: '', //当前选中的供应商类型名称
|
supplier_type_id_active: '', //当前选中的供应商类型ID
|
classify_all_data: [], //保存所有分类数据
|
/*当前秒数*/
|
second: 60,
|
send_btn_txt: '获取验证码',
|
/*是否已发验证码*/
|
is_send: false,
|
sms_open: 0,
|
store_open:false,
|
location_address:'',
|
address:{
|
location_address:'',
|
house_number:'',
|
longitude:'',
|
latitude:'',
|
},
|
province_id: 0,
|
city_id: 0,
|
region_id: 0,
|
region:[]
|
}
|
},
|
mounted() {
|
this.get_classify();
|
this.get_area();
|
},
|
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;
|
self.store_open = res.data.store_open;
|
if(!self.store_open){
|
uni.setNavigationBarTitle({
|
title: '我的订单',
|
});
|
self.gotoPage('/pages/index/index');
|
}else{
|
uni.setNavigationBarTitle({
|
title: '店铺入驻',
|
});
|
}
|
});
|
},
|
//获取验证码
|
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) {
|
// 保存所有分类数据（新的数据结构：list是对象，key是类型ID）
|
self.classify_all_data = res.data.list || {};
|
self.sms_open = res.data.sms_open;
|
|
// 处理供应商类型列表
|
let typeList = res.data.typeList || {};
|
self.supplier_type_list = [];
|
self.supplier_type_ids = [];
|
for (let key in typeList) {
|
self.supplier_type_list.push(typeList[key]);
|
self.supplier_type_ids.push(parseInt(key));
|
}
|
|
// 如果已经选择了供应商类型，则过滤对应的分类
|
if (self.supplier_type_id_active) {
|
self.filterClassifyByType(self.supplier_type_id_active);
|
}
|
});
|
},
|
//根据供应商类型过滤分类
|
filterClassifyByType(type) {
|
let self = this;
|
let list_name = [];
|
let list_id = [];
|
let targetList = [];
|
|
// 根据新的数据结构：classify_all_data是对象，key是类型ID
|
// 需要处理type可能是字符串的情况
|
let typeKey = String(type);
|
if (self.classify_all_data && self.classify_all_data[typeKey]) {
|
targetList = self.classify_all_data[typeKey] || [];
|
}
|
|
//合成select列表
|
for (var i = 0; i < targetList.length; i++) {
|
list_name.push(targetList[i].name);
|
list_id.push(targetList[i].category_id);
|
}
|
|
self.classify_data_name = list_name;
|
self.classify_data_id = list_id;
|
|
// 清空当前选择的分类
|
self.classify_data_name_active = '';
|
self.classify_data_id_active = '';
|
},
|
//选择分类
|
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) {
|
|
}
|
});
|
},
|
//获取区域
|
get_area() {
|
let self = this;
|
self._post('supplier.apply/area', {
|
|
}, 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].area_id);
|
}
|
self.area_data_name = list_name;
|
self.area_data_id = list_id;
|
});
|
},
|
/*提交*/
|
formSubmit: function(e) {
|
let self = this;
|
var formdata = e.detail.value;
|
formdata.business_id = self.form.business_id;
|
formdata.category_id = self.classify_data_id_active;
|
formdata.area_id = self.area_data_id_active;
|
formdata.supplier_type = self.supplier_type_id_active;
|
formdata.province_id = self.province_id;
|
formdata.city_id = self.city_id;
|
formdata.region_id = self.region_id;
|
formdata.address=self.region[0]+self.region[1]+self.region[2]+self.address.location_address+self.address.house_number
|
formdata.longitude = self.address.longitude;
|
formdata.latitude = self.address.latitude;
|
if (self.classify_data_name_active == '') {
|
uni.showToast({
|
title: '请填主营类别',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (self.address.location_address == '') {
|
uni.showToast({
|
title: '请选择地址',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (self.area_data_id.length > 0 && self.area_data_id_active == '') {
|
uni.showToast({
|
title: '请选择所在区域',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (self.supplier_type_id_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;
|
},// 打开地图选择地址 by lyzflash
|
chooseLocation(n) {
|
let self=this;
|
uni.chooseLocation({
|
success: function (res) {
|
self.address.longitude=res.longitude;
|
self.address.latitude=res.latitude;
|
self.location_address=res.address;
|
self.address.house_number=res.name;
|
// 获取省市区
|
self.setLocationAddress();
|
}
|
});
|
},
|
|
// 获取掉省市区 by lyzflash
|
setLocationAddress() {
|
let self = this;
|
self._get('user.address/setLocationAddress', {
|
address: self.location_address
|
}, function(res) {
|
self.address.location_address = res.data.short_address;
|
self.province_id = res.data.cityCode[0];
|
self.city_id = res.data.cityCode[1];
|
self.region_id = res.data.cityCode[2];
|
self.region = res.data.region;
|
});
|
},
|
|
/*获取图片*/
|
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];
|
},
|
/* 下拉框 */
|
changeArea(e) {
|
this.area_data_id_active = this.area_data_id[e.detail.value];
|
this.area_data_name_active = this.area_data_name[e.detail.value];
|
},
|
/* 供应商类型选择 */
|
changeSupplierType(e) {
|
let index = parseInt(e.detail.value);
|
let typeId = this.supplier_type_ids[index];
|
this.supplier_type_id_active = typeId.toString();
|
this.supplier_type_name_active = this.supplier_type_list[index];
|
// 根据选择的供应商类型过滤分类
|
this.filterClassifyByType(this.supplier_type_id_active);
|
},
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #FF3D19;
|
}
|
|
.bg_image image{
|
width: 100%;
|
height: 1200rpx;
|
}
|
.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>
|
