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> |