522 lines
15 KiB
Vue
522 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<view class="settledApply">
|
|||
|
|
<form report-submit='true'>
|
|||
|
|
<view class="settled-wrapper">
|
|||
|
|
<view class="set-item">
|
|||
|
|
<view class="title">商户名称</view>
|
|||
|
|
<input class="input-box" type="text" maxlength="30" placeholder="请输入商户名称" v-model="formData.mer_name"
|
|||
|
|
placeholder-class='placeholder' />
|
|||
|
|
</view>
|
|||
|
|
<view class="set-item">
|
|||
|
|
<view class="title">真实姓名</view>
|
|||
|
|
<input class="input-box" type="text" maxlength="30" placeholder="请输入真实姓名" v-model="formData.name"
|
|||
|
|
placeholder-class='placeholder' />
|
|||
|
|
</view>
|
|||
|
|
<view class="set-item">
|
|||
|
|
<view class="title">联系电话</view>
|
|||
|
|
<input class="input-box" type="text" maxlength="30" placeholder="请输入联系电话" v-model="formData.phone"
|
|||
|
|
placeholder-class='placeholder' />
|
|||
|
|
</view>
|
|||
|
|
<view class="set-item">
|
|||
|
|
<view class="title">验证码</view>
|
|||
|
|
<view class="input-box">
|
|||
|
|
<input type="text" maxlength="30" placeholder="请输入验证码" v-model="formData.code"
|
|||
|
|
placeholder-class='placeholder' />
|
|||
|
|
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="handleVerify">
|
|||
|
|
{{ text }}
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="set-item">
|
|||
|
|
<view class="title">店铺分类</view>
|
|||
|
|
<view class="input-box flex_a_c_j_sb" @click="pickerIsShow('class')">
|
|||
|
|
<input type="text" maxlength="30" placeholder="请选择店铺分类" disabled v-model="mer_classification"
|
|||
|
|
placeholder-class='placeholder' />
|
|||
|
|
<view class="iconfont icon-xialazhankai"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="set-item">
|
|||
|
|
<view class="title">店铺类型</view>
|
|||
|
|
<view class="input-box flex_a_c_j_sb" @click="pickerIsShow('type')">
|
|||
|
|
<input type="text" maxlength="30" placeholder="请选择店铺类型" disabled v-model="mer_storeType"
|
|||
|
|
placeholder-class='placeholder' />
|
|||
|
|
<view class="iconfont icon-xialazhankai"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="set-item">
|
|||
|
|
<view class="title">店铺所在地</view>
|
|||
|
|
<view class="input-box flex_a_c_j_sb" @click="pickerIsShow('site')">
|
|||
|
|
<input type="text" maxlength="30" placeholder="请选择商圈" disabled v-model="site_name"
|
|||
|
|
placeholder-class='placeholder' />
|
|||
|
|
<view class="iconfont icon-xialazhankai"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="set-item">
|
|||
|
|
<view class="title">是否农贸市场</view>
|
|||
|
|
<view class="input-box no-border">
|
|||
|
|
<u-switch v-model="isOpenFair" @change="switchcChange"></u-switch>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="set-item">
|
|||
|
|
<text class="item-title">请上传营业执照及行业相关资质证明图片</text>
|
|||
|
|
<text class="item-desc">(图片最多可上传10张,图片格式支持JPG、PNG、JPEG)</text>
|
|||
|
|
<view class="upload">
|
|||
|
|
<view class='pictrue' v-for="(item,index) in pics" :key="index" :data-index="index"
|
|||
|
|
@click="getPhotoClickIdx">
|
|||
|
|
<image :src='item'></image>
|
|||
|
|
<text class='iconfont icon-guanbi1' @click.stop='DelPic(index)'></text>
|
|||
|
|
</view>
|
|||
|
|
<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic' v-if="pics.length < 10">
|
|||
|
|
<text class='iconfont icon-icon25201'></text>
|
|||
|
|
<view>上传图片</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="set-item no-border flex">
|
|||
|
|
<checkbox-group @change='ChangeIsAgree'>
|
|||
|
|
<checkbox class="checkbox" :checked="isAgree ? true : false" />已阅读并同意
|
|||
|
|
</checkbox-group>
|
|||
|
|
<button class="settleAgree" @click="getConfig">《入驻协议》</button>
|
|||
|
|
</view>
|
|||
|
|
<button class='submitBtn on-submit' @click="formSubmit">提交申请</button>
|
|||
|
|
</view>
|
|||
|
|
</form>
|
|||
|
|
<Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }" ref="verify">
|
|||
|
|
</Verify>
|
|||
|
|
<u-picker :defaultIndex="[0,0]" :show="pickerShow" @change="changeHandler" @confirm="confirm" :columns="columns"
|
|||
|
|
:keyName="keyName" ref="uPicker" @cancel="pickerShow = false"></u-picker>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
create,
|
|||
|
|
verify,
|
|||
|
|
merClassifly,
|
|||
|
|
getGoodsDetails,
|
|||
|
|
updateGoodsRecord,
|
|||
|
|
getStoreTypeApi
|
|||
|
|
} from '@/api/store.js';
|
|||
|
|
import { getArea, getStreet } from '@/api/article.js';
|
|||
|
|
import Verify from '@/components/verify/verify.vue';
|
|||
|
|
import { Toast } from '@/libs/uniApi';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
Verify
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formData: {
|
|||
|
|
mer_name: '',
|
|||
|
|
name: '',
|
|||
|
|
phone: '',
|
|||
|
|
code: '',
|
|||
|
|
merchant_category_id: '',
|
|||
|
|
mer_type_id: '',
|
|||
|
|
site: '',
|
|||
|
|
images: []
|
|||
|
|
},
|
|||
|
|
disabled: false,
|
|||
|
|
timer: "",
|
|||
|
|
text: "获取验证码",
|
|||
|
|
pickerShow: false,
|
|||
|
|
keyName: '',
|
|||
|
|
columns: [],
|
|||
|
|
mer_classification: '', // 商户分类
|
|||
|
|
mer_storeType: '', // 店铺类型
|
|||
|
|
site_name: '', // 店铺所在地
|
|||
|
|
isOpenFair: false, // 是否农贸市场
|
|||
|
|
pics: [],
|
|||
|
|
isAgree: false,
|
|||
|
|
validate: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
clearTimeout(this.timer)
|
|||
|
|
},
|
|||
|
|
onLoad() {},
|
|||
|
|
onShow() {},
|
|||
|
|
methods: {
|
|||
|
|
async formSubmit() {
|
|||
|
|
this.formData.images = this.pics
|
|||
|
|
if (this.validateForm()) {
|
|||
|
|
const res = await create(this.formData).catch(err => Toast(err))
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
ChangeIsAgree: function(e) {
|
|||
|
|
this.isAgree = !this.isAgree;
|
|||
|
|
},
|
|||
|
|
switchcChange(e) {
|
|||
|
|
// console.log(e);
|
|||
|
|
},
|
|||
|
|
// 获取商户分类
|
|||
|
|
async getClassfication() {
|
|||
|
|
const res = await merClassifly().catch(err => Toast(err));
|
|||
|
|
this.keyName = 'category_name'
|
|||
|
|
this.$refs.uPicker.setColumnValues(0, res.data);
|
|||
|
|
this.pickerShow = true
|
|||
|
|
},
|
|||
|
|
// 获取店铺类型
|
|||
|
|
async getStoreType() {
|
|||
|
|
const res = await getStoreTypeApi().catch(err => Toast(err));
|
|||
|
|
this.keyName = 'type_name'
|
|||
|
|
this.$refs.uPicker.setColumnValues(0, res.data);
|
|||
|
|
this.pickerShow = true
|
|||
|
|
},
|
|||
|
|
// 获取商圈
|
|||
|
|
Area() {
|
|||
|
|
getArea({ city_code: 510500 }).then(res => {
|
|||
|
|
this.$refs.uPicker.setColumnValues(0, res.data);
|
|||
|
|
this.Street(res.data[0]['code']);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
Street(code) {
|
|||
|
|
getStreet({ area_code: code }).then(res => {
|
|||
|
|
this.keyName = 'name'
|
|||
|
|
this.$refs.uPicker.setColumnValues(1, res.data);
|
|||
|
|
this.pickerShow = true
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
pickerIsShow(type) {
|
|||
|
|
switch (type) {
|
|||
|
|
case 'class':
|
|||
|
|
this.getClassfication()
|
|||
|
|
break;
|
|||
|
|
case 'type':
|
|||
|
|
this.getStoreType()
|
|||
|
|
break;
|
|||
|
|
case 'site':
|
|||
|
|
this.Area()
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
confirm(e) {
|
|||
|
|
// console.log('e', e);
|
|||
|
|
switch (this.keyName) {
|
|||
|
|
case 'category_name':
|
|||
|
|
this.mer_classification = e.value[0].category_name
|
|||
|
|
this.formData.merchant_category_id = e.value[0].merchant_category_id
|
|||
|
|
break;
|
|||
|
|
case 'type_name':
|
|||
|
|
this.formData.mer_type_id = e.value[0].mer_type_id
|
|||
|
|
this.mer_storeType = e.value[0].type_name
|
|||
|
|
break;
|
|||
|
|
case 'name':
|
|||
|
|
this.formData.site = e.value[1].code
|
|||
|
|
this.site_name = e.value[1].name
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
this.pickerShow = false
|
|||
|
|
},
|
|||
|
|
changeHandler(e) {
|
|||
|
|
const { columnIndex, value, values, index, picker = this.$refs.uPicker } = e;
|
|||
|
|
if (this.keyName === 'site') {
|
|||
|
|
if (columnIndex === 0) {
|
|||
|
|
getStreet({ area_code: value[0]['code'] }).then(res => {
|
|||
|
|
this.$refs.uPicker.setColumnValues(1, res);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async code(data) {
|
|||
|
|
let that = this;
|
|||
|
|
if (!that.formData.phone) return that.$util.Tips({
|
|||
|
|
title: '请填写手机号码'
|
|||
|
|
});
|
|||
|
|
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.formData.phone)) return that.$util.Tips({
|
|||
|
|
title: '请输入正确的手机号码'
|
|||
|
|
});
|
|||
|
|
await verify({
|
|||
|
|
phone: that.formData.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();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
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);
|
|||
|
|
},
|
|||
|
|
success(data) {
|
|||
|
|
this.$refs.verify.hide();
|
|||
|
|
this.code(data);
|
|||
|
|
},
|
|||
|
|
handleVerify() {
|
|||
|
|
if (!this.formData.phone) return this.$util.Tips({
|
|||
|
|
title: '请输入手机号'
|
|||
|
|
});
|
|||
|
|
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.formData.phone)) return this.$util.Tips({
|
|||
|
|
title: '请输入正确的手机号码'
|
|||
|
|
});
|
|||
|
|
if (!this.isAgree) return this.$util.Tips({
|
|||
|
|
title: '请勾选并同意入驻协议'
|
|||
|
|
});
|
|||
|
|
this.$refs.verify.show();
|
|||
|
|
},
|
|||
|
|
// 图片预览
|
|||
|
|
// 获得相册 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
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 上传文件
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
uploadpic: function() {
|
|||
|
|
let that = this;
|
|||
|
|
that.$util.uploadImageOne('upload/image', function(res) {
|
|||
|
|
that.pics.push(res.data.path);
|
|||
|
|
that.$set(that, 'pics', that.pics);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 删除图片
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
DelPic: function(index) {
|
|||
|
|
let that = this,
|
|||
|
|
pic = this.pics[index];
|
|||
|
|
that.pics.splice(index, 1);
|
|||
|
|
that.$set(that, 'pics', that.pics);
|
|||
|
|
},
|
|||
|
|
validateForm: function() {
|
|||
|
|
let that = this,
|
|||
|
|
value = that.formData;
|
|||
|
|
if (!value.mer_name) return that.$util.Tips({
|
|||
|
|
title: '请输入企业名称'
|
|||
|
|
});
|
|||
|
|
if (!value.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.code) return that.$util.Tips({
|
|||
|
|
title: '请填写验证码'
|
|||
|
|
});
|
|||
|
|
if (!value.merchant_category_id) return that.$util.Tips({
|
|||
|
|
title: '请选择商户分类'
|
|||
|
|
});
|
|||
|
|
if (!that.isAgree) return that.$util.Tips({
|
|||
|
|
title: '请勾选并同意入驻协议'
|
|||
|
|
});
|
|||
|
|
// if (that.isShowCode && !that.codeVal) return that.$util.Tips({
|
|||
|
|
// title: '请填写图片验证码'
|
|||
|
|
// });
|
|||
|
|
// that.validate = true;
|
|||
|
|
return true;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
uni.stopPullDownRefresh()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.settled-wrapper {
|
|||
|
|
width: 694.74rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 35.09rpx 28.07rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
|
|||
|
|
.set-item {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 31.58rpx;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 31.58rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-box {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 48px;
|
|||
|
|
margin-top: 17.54rpx;
|
|||
|
|
padding: 21.05rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid #CCCCCC;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.code {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
width: 93px;
|
|||
|
|
line-height: 27px;
|
|||
|
|
border: 1px solid $uni-theme-color;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
color: $uni-theme-color;
|
|||
|
|
text-align: center;
|
|||
|
|
bottom: 8px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.on {
|
|||
|
|
background-color: #bbb;
|
|||
|
|
color: #fff;
|
|||
|
|
border-color: #bbb;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.placeholder {
|
|||
|
|
color: #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-border {
|
|||
|
|
padding: 0;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 图片上传
|
|||
|
|
.item-title {
|
|||
|
|
color: #666666;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-desc {
|
|||
|
|
color: #B2B2B2;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 9rpx;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 是否勾选
|
|||
|
|
.settleAgree {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: $uni-theme-color;
|
|||
|
|
position: relative;
|
|||
|
|
top: 2px;
|
|||
|
|
left: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.on-submit {
|
|||
|
|
background: $uni-theme-bg-color;
|
|||
|
|
pointer-events: all;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|