303 lines
11 KiB
Vue
303 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<div class="m-t-20">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||
<el-breadcrumb-item>商家入驻</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
|
||
<div class="store bg-white m-t-16">
|
||
|
||
<div class="main">
|
||
<div class="title">入驻申请</div>
|
||
<el-form :model="form" :rules="rules" ref="form" label-width="110px" class="demo-form">
|
||
<el-form-item label="商家名称:" prop="name">
|
||
<el-input v-model="form.name" placeholder="请输入商家名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="主营类目:" prop="cid">
|
||
<el-select v-model="form.cid" placeholder="请选择" style="width: 100%">
|
||
<el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.id">
|
||
{{item.name}}
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="联系人姓名:" prop="nickname">
|
||
<el-input v-model="form.nickname" placeholder="请输入联系人姓名"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="手机号码:" prop="mobile">
|
||
<el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="验证码:" prop="code">
|
||
<el-input v-model="form.code" placeholder="请输入验证码" style="width:355px"></el-input>
|
||
<el-button style="margin-left: 14px;width: 175px" @click="sndSmsToPhone">
|
||
<div v-if="canSendPwd">获取验证码</div>
|
||
<count-down v-else :time="60" format="ss秒" autoStart @finish="canSendPwd = true" />
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="创建账号:" prop="account">
|
||
<el-input v-model="form.account" placeholder="请设置登录账号(可用手机号代替)"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设置密码:" prop="password">
|
||
<el-input v-model="form.password" placeholder="请输入登录密码"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="营业执照:" prop="">
|
||
<el-upload class="avatar-uploader" :action="action" :show-file-list="true"
|
||
list-type="picture-card" :on-success="uploadFileSuccess" :on-remove="handleRemove"
|
||
:headers="{token: $store.state.token}">
|
||
<i class="el-icon-picture avatar-uploader-icon"></i>
|
||
<div class="m-t-20 xs">上传图片</div>
|
||
</el-upload>
|
||
<div class="xs muted">支持jpg、png、jpeg格式的图片，最多可上传10张</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="">
|
||
<div class="xs muted m-t-20">
|
||
<el-checkbox v-model="checked"></el-checkbox>
|
||
同意并阅读<span class="primary pointer" @click="dialogVisible=true">《服务协议》</span>
|
||
</div>
|
||
<div class="flex m-t-10">
|
||
<el-button style="width: 213px;" class="bg-primary white" @click="onSubmitStore('form')">
|
||
提交申请
|
||
</el-button>
|
||
<span class="m-l-20 xs muted pointer"
|
||
@click="$router.push('/store_settled/record')">查看申请记录</span>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 服务协议 -->
|
||
<el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
|
||
<div style="height: 40vh;overflow-y: auto;">
|
||
<div v-html="content">
|
||
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import config from "~/config/app";
|
||
import { SMSType } from "~/utils/type";
|
||
export default {
|
||
head() {
|
||
return {
|
||
title: this.$store.getters.headTitle,
|
||
link: [
|
||
{
|
||
rel: 'icon',
|
||
type: 'image/x-icon',
|
||
href: this.$store.getters.favicon,
|
||
},
|
||
],
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
checked: false,
|
||
action: config.baseUrl + "/api/file/formimage",
|
||
category: [], //类目
|
||
fileList: [],
|
||
content: "", //隐私协议
|
||
dialogVisible: false, //是否显示服务协议
|
||
canSendPwd: true, //是否验证码
|
||
form: {
|
||
cid: "", //类目ID
|
||
clabel: "", //类目名称
|
||
name: "", //商家名称
|
||
nickname: "", //联系人姓名
|
||
mobile: "", //手机号码
|
||
account: "", //账号
|
||
password: "", //密码
|
||
code: "", //验证码
|
||
},
|
||
rules: {
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: "请输入商家名称",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
cid: [
|
||
{
|
||
required: true,
|
||
message: "请选择主营类目",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
nickname: [
|
||
{
|
||
required: true,
|
||
message: "请输入联系人姓名",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
mobile: [
|
||
{
|
||
required: true,
|
||
message: "请输入手机号码",
|
||
trigger: "blur",
|
||
},
|
||
{
|
||
pattern: /^1[3|4|5|7|8][0-9]{9}$/,
|
||
message: "请输入正确的手机号",
|
||
},
|
||
],
|
||
code: [
|
||
{
|
||
required: true,
|
||
message: "请输入验证码",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
account: [
|
||
{
|
||
required: true,
|
||
message: "请输入登录账号",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
message: "请输入设置登录密码",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
imageForm: [
|
||
{
|
||
required: true,
|
||
message: "请上传营业执照",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
|
||
async asyncData({ $get }) {
|
||
const { data } = await $get("shop_category/getList");
|
||
return { category: data };
|
||
},
|
||
|
||
mounted() {
|
||
this.getServiceData();
|
||
},
|
||
|
||
methods: {
|
||
async sndSmsToPhone() {
|
||
if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.form.mobile))
|
||
return this.$message.error("请输入正确的手机号码");
|
||
const { code } = await this.$post("sms/send", {
|
||
mobile: this.form.mobile,
|
||
key: SMSType.SJSQYZ,
|
||
});
|
||
if (code == 1) {
|
||
this.canSendPwd = false;
|
||
return this.$message.success("发送成功");
|
||
} else return this.$message.error("发送失败");
|
||
},
|
||
|
||
uploadFileSuccess(res, fileList) {
|
||
this.fileList.push(res.data.uri);
|
||
console.log(res, this.fileList);
|
||
},
|
||
|
||
handleRemove(file, fileList) {
|
||
console.log(fileList);
|
||
if (fileList.length >= 0) {
|
||
const res = fileList.map((item) => item.response.data.uri);
|
||
this.fileList = res;
|
||
}
|
||
},
|
||
|
||
async getServiceData() {
|
||
const res = await this.$get("ShopApply/getTreaty");
|
||
|
||
if (res.code == 1) {
|
||
this.content = res.data.content;
|
||
}
|
||
},
|
||
|
||
onSubmitStore(formName) {
|
||
if (!this.checked)
|
||
return this.$message.error("请同意并阅读服务协议");
|
||
this.$refs[formName].validate(async (valid) => {
|
||
if (valid) {
|
||
const { data, code, msg } = await this.$post(
|
||
"ShopApply/apply",
|
||
{
|
||
...this.form,
|
||
license: this.fileList,
|
||
}
|
||
);
|
||
if (code == 1) {
|
||
// data.id
|
||
this.$router.push({
|
||
path: "/store_settled/detail",
|
||
query: {
|
||
id: data.id,
|
||
},
|
||
});
|
||
}
|
||
} else return false;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scope>
|
||
.store {
|
||
width: 100%;
|
||
.main {
|
||
width: 660px;
|
||
margin: 0 auto;
|
||
padding-bottom: 52px;
|
||
.title {
|
||
padding: 16px 0;
|
||
color: #101010;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
}
|
||
::v-deep .el-input__inner {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
.avatar-uploader .el-upload {
|
||
width: 100px;
|
||
height: 100px;
|
||
border: 1px solid #d9d9d9;
|
||
cursor: pointer;
|
||
position: relative;
|
||
line-height: 0px;
|
||
padding: 20px 0;
|
||
color: #101010;
|
||
overflow: hidden;
|
||
border-radius: 0;
|
||
}
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #ff2c3c;
|
||
}
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
text-align: center;
|
||
}
|
||
.avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
</style> |