Skip to content

S
shop-new
提交 2e5e6aaa authored 作者: huaxinzhu's avatar huaxinzhu
浏览文件
操作

云仓入驻静态页面

上级 4a67059c
显示空白字符变更
内嵌 并排
正在显示 包含 1481 行增加 和 0 行删除
src/views/entry/agreement.vue 0 → 100644
浏览文件 @ 2e5e6aaa
<template>
<div class="entry">
<div class="logo-bg">
<img src="../../../public/images/logo_white_sm.png" alt="">
</div>
<div class="steps">
<el-steps :active="1" align-center>
<el-step title="仔细阅读并同意入驻协议"></el-step>
<el-step title="填写主体信息" ></el-step>
<el-step title="填写品牌信息" ></el-step>
<el-step title="填写店铺信息" ></el-step>
<el-step title="提交审核，等待结果" ></el-step>
</el-steps>
</div>
<div class="entry-main">
<div class="main-text">
<p>1、用户账号、密码和安全</p>
<p>
（1）您在注册账号时必须通过实名认证，才能成为站酷（ZCOOL）的合法用户，得到一个密码和账号。您可以利用账户，通过本服务上传您的作品，合法正当地使用平台提供的各项服务功能。
</p>
<p>
（2）用户须对在站酷（ZCOOL）的注册信息的真实性、合法性、有效性承担全部责任，用户不得使用他人的名义发布任何信息；当被发现用户冒用他人或机构的名义恶意注册账号，站酷（ZCOOL）有权立即停止提供服务，收回其账号并由该用户承担由此而
产生的一切法律及其他责任。
</p>
<p>
（3）您应采取合理措施维护其密码和账号的安全。用户对利用该密码和账号所进行的一切活动负全部责任；由该等活动所导致的任何损失或损害由用户承担，站酷（ZCOOL）不承担任何责任。
</p>
<p>
（4）用户的密码和账号遭到未授权的使用或发生其他任何安全问题，用户可以立即通知站酷（ZCOOL），并且用户在每次连线结束，应结束账号使用，否则用户可能得不到站酷（ZCOOL）公司的安全保护。
</p>
<p>
（5）对于用户长时间未使用的账号，站酷（ZCOOL）有权予以关闭。
</p>
</div>
</div>
<div class="confirm-btn">
<p>
<el-checkbox v-model="isComfirm">我已仔细阅读并同意入驻协议</el-checkbox>
</p>
<p>
入驻协议约定了双的权利和义务，及其它的法律责任，请您认真阅读!
</p>
<p>
<el-button type="primary" style="padding: 8px 30px;" :disabled="!isComfirm" @click="nextStep">下一步</el-button>
</p>
</div>
</div>
</template>
<script>
export default {
name: "IndexOne",
data() {
return {
isComfirm: false
}
},
mounted() {
},
methods: {
nextStep() {
if(this.isComfirm) {
this.$router.push("/fillMainInf");
}
}
}
}
</script>
<style lang="scss" type="text/stylus" scoped>
.entry {
width: 100%;
height: 100%;
overflow: hidden;
}
.logo-bg {
height: 60px;
background-color: #1890ff;
img {
height: 44px;
margin: 8px 0 8px 20px;
}
}
.steps {
height: 70px;
width: 60%;
margin: 40px auto 0;
}
.steps >>> .el-step__title {
font-size: 16px;
line-height: 58px;
}
.el-step >>> .el-step__head.is-process {
color: #C0C4CC;
border-color: #C0C4CC;
}
.el-step >>> .el-step__title.is-process {
color: #C0C4CC;
font-weight : 400;
}
.el-step >>> .el-step__head.is-finish {
.el-step__icon.is-text {
background-color: #1890ff;
.el-step__icon-inner {
color: #fff;
}
}
}
.el-steps >>> .el-step__title.is-finish {
color: #333;
}
.entry-main {
height: calc(100% - 400px);
width: 60%;
margin: 40px auto 30px;
background-color : #F7F7F7;
overflow-y : scroll;
.main-text {
width: 100%;
overflow-y: scroll;
p {
text-indent : 2em;
font-size: 14px;
line-height: 30px;
padding: 10px 80px 0;
}
}
}
.confirm-btn {
height: 100px;
width: 50%;
margin: 0 auto 40px;
p {
text-align : center;
}
p:nth-child(2) {
color: #FA7200;
font-size: 10px;
}
}
</style>
src/views/entry/fillBrandInf.vue 0 → 100644
浏览文件 @ 2e5e6aaa
<template>
<div class="fill-brand-inf">
<div class="logo-bg">
<img src="../../../public/images/logo_white_sm.png" alt="">
</div>
<div class="steps">
<el-steps :active="2" align-center finish-status="success">
<el-step title="仔细阅读并同意入驻协议"></el-step>
<el-step title="填写主体信息"></el-step>
<el-step title="填写品牌信息"></el-step>
<el-step title="填写店铺信息"></el-step>
<el-step title="提交审核，等待结果"></el-step>
</el-steps>
</div>
<div class="main-con">
<el-form label-width="180px">
<el-form-item label="经验品牌类型：">
<el-radio-group v-model="data1" @change="chooseBrandType">
<el-radio :label="1">自有品牌</el-radio>
<el-radio :label="2">品牌厂商授权</el-radio>
<el-radio :label="3">无品牌</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div class="has-brand" v-show="hasBrand">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>品牌</span>
</div>
<div class="text item">
<el-form ref="form" :model="brandForm" :rules="brandRules" label-width="140px">
<el-form-item label="品牌中文名：">
<el-input v-model="brandForm.data1" style="width: 400px;" placeholder=""></el-input>
</el-form-item>
<el-form-item label="品牌英文名：">
<el-input v-model="brandForm.data2" style="width: 400px;" placeholder=""></el-input>
</el-form-item>
<el-form-item label="品牌LOGO：" prop="data3">
<div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
<div style="padding-right:6px;">
<el-upload
class="uploadData"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview2"
:on-remove="handleRemove2">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible2">
<img width="100%" :src="dialogImageUrl2" alt="">
</el-dialog>
</div>
<div>
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
</div>
<div style="width:380px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">请上传店铺LOGO，图片尺寸请确保800px*800px以
上，文件大小在5MB以内，支持png,jpeg,gif格式，
最多可上传1张</span>
</div>
</div>
</el-form-item>
<el-form-item label="品牌商标注册号：">
<el-input v-model="brandForm.data4" style="width: 400px;" placeholder=""></el-input>
</el-form-item>
<el-form-item label="品牌LOGO：">
<el-radio-group v-model="brandForm.data5" @change="chooseLogoType">
<el-radio :label="1">国内品牌</el-radio>
<el-radio :label="2">国外品牌</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="品牌方授权书：" prop="data6">
<div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
<div style="padding-right:6px;">
<el-upload
class="uploadData"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview3"
:on-remove="handleRemove3">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible3">
<img width="100%" :src="dialogImageUrl3" alt="">
</el-dialog>
</div>
<div>
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
</div>
<div style="width:380px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">请上传店铺LOGO，图片尺寸请确保800px*800px以
上，文件大小在5MB以内，支持png,jpeg,gif格式，
最多可上传1张</span>
</div>
</div>
</el-form-item>
<el-form-item label="有效期至" :required="isValidity">
<el-date-picker type="date" placeholder="选择日期" v-model="brandForm.data7"
style="width: 300px;" @change="validityConcrete"></el-date-picker>
<el-checkbox v-model="brandForm.data8" style="padding-left:15px;"
@change="validityLongTerm">长期
</el-checkbox>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
<div class="has-brand">
<el-form label-width="140px">
<el-form-item label="品牌经营授权：" prop="data3">
<div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
<div style="padding-right:6px;">
<el-upload
class="uploadData"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview2"
:on-remove="handleRemove2">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible2">
<img width="100%" :src="dialogImageUrl2" alt="">
</el-dialog>
</div>
<div>
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
</div>
<div style="width:380px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">请上传店铺LOGO，图片尺寸请确保800px*800px以
上，文件大小在5MB以内，支持png,jpeg,gif格式，
最多可上传1张</span>
</div>
</div>
</el-form-item>
</el-form>
</div>
<el-form label-width="180px">
<el-form-item label="">
<div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
<div>下载模板</div>
<div>
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
</div>
<div style="width:380px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">请您点击下载授权书模板，打印并签字盖章，拍照上传。
如暂时无法上传该授权，可选择【无品牌】，稍后在店铺信息里面完善品牌信息</span>
</div>
</div>
</el-form-item>
</el-form>
<div class="no-brand" v-show="!hasBrand">
<p>您当前选择的是无品牌</p>
<p>这不会影响您入驻的审核</p>
<p>入驻成功后，您可以在店铺信息里，添加您的品牌</p>
</div>
<el-form label-width="180px">
<el-form-item>
<el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button>
<el-button type="primary" @click="next">下一步</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "FillBrandInf",
data() {
return {
data1: 1,
hasBrand: true,
dialogImageUrl: '',
dialogVisible: false,
dialogImageUrl2: '',
dialogVisible2: false,
dialogImageUrl3: '',
dialogVisible3: false,
isPeriod: true, // 营业期限 是否填写
isConcretePeriod: false,
isPeriodDisabled: false,
isValidity: true, // 有效期至 是否填写
// 品牌信息
brandForm: {
data6: null,
data7: false,
},
brandRules: {
}
}
},
mounted() {
},
methods: {
// 选择品牌类型
chooseBrandType() {
if(this.data1 === 3) {
this.hasBrand = false;
}else {
this.hasBrand = true;
}
},
chooseLogoType() {
},
handlePictureCardPreview() {
},
handleRemove() {
},
handlePictureCardPreview2() {
},
handleRemove2() {
},
handlePictureCardPreview3() {
},
handleRemove3() {
},
validityConcrete() {
if (this.brandForm.data6) {
this.brandForm.data7 = false;
}
},
validityLongTerm() {
if (this.brandForm.data7) {
this.brandForm.data6 = null;
}
},
back() {
this.$router.push("/fillMainInf");
},
next() {
this.$router.push("/fillShopInf");
}
}
}
</script>
<style lang="scss" type="text/stylus" scoped>
.fill-brand-inf {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.logo-bg {
height: 60px;
background: #1890ff;
img {
height: 44px;
margin: 8px 0 8px 20px;
}
}
.steps {
height: 70px;
width: 60%;
margin: 40px auto 0;
}
.steps >>> .el-step__title {
font-size: 16px;
line-height: 58px;
}
.el-step >>> .el-step__head.is-process {
color: #1890ff;
border-color: #1890ff;
.el-step__icon.is-text {
background-color: #1890ff;
.el-step__icon-inner {
color: #fff;
}
}
}
.el-step >>> .el-step__title.is-process {
color: #000;
font-weight : 400;
}
.el-step >>> .el-step__head.is-success {
color: #1890ff;
border-color: #1890ff;
.el-step__line {
background-color: #1890ff;
}
}
.el-step >>> .el-step__title.is-success {
color: #000;
}
// 品牌信息
.main-con {
width: 70%;
//height :calc(100% - 170px);
margin: 30px auto 50px;
overflow-y: scroll;
.has-brand {
width: 88%;
margin: 0 auto 40px;
.tips-text {
font-size: 14px;
color: #C9C9C9;
word-break: break-all;
}
.h-warning:before {
color: #e3c300;
}
// 上传图片样式
.uploadData {
display: inline-block;
/deep/ .el-upload--picture-card {
width: 100px;
height: 100px;
}
/deep/ .el-upload {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .avatar {
width: 100px;
height: 100px;
}
}
}
.no-brand {
width: 88%;
margin: 40px auto;
background-color : #F7F7F7;
p {
color: #333;
text-indent : 2em;
font-size: 14px;
line-height: 30px;
padding: 10px 80px 0;
}
}
}
</style>
src/views/entry/fillMainInf.vue 0 → 100644
浏览文件 @ 2e5e6aaa
<template>
<div class="fill-store-inf">
<div class="logo-bg">
<img src="../../../public/images/logo_white_sm.png" alt="">
</div>
<div class="steps">
<el-steps :active="1" align-center finish-status="success">
<el-step title="仔细阅读并同意入驻协议"></el-step>
<el-step title="填写主体信息"></el-step>
<el-step title="填写品牌信息"></el-step>
<el-step title="填写店铺信息"></el-step>
<el-step title="提交审核，等待结果"></el-step>
</el-steps>
</div>
<div class="main-con">
<el-form ref="form" :model="storeForm" :rules="storeRules" label-width="180px">
<el-form-item label="主体类型：" prop="data1">
<el-radio-group v-model="storeForm.data1">
<el-radio :label="1">企业/公司</el-radio>
<el-radio :label="2">个体工商户</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="执照类型：" prop="data2">
<el-select v-model="storeForm.data2" placeholder="请选择..." style="width: 400px;">
<el-option
v-for="item in zzOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="营业执照电子版" prop="data21">
<div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
<div style="padding-right:6px;">
<el-upload
class="uploadData"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
<div>
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
</div>
<div style="width:380px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">图片尺寸请确保800px*800px以上，文件大小在5MB
以内，支持png,jpeg,gif格式，最多可上传2张</span>
</div>
</div>
</el-form-item>
<el-form-item label="企业名称：" prop="data3" inline-message="true">
<el-input v-model="storeForm.data3" style="width: 400px;"></el-input>
<span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整名称填写</span>
</el-form-item>
<el-form-item label="营业执照详细地址：" prop="data4">
<el-input v-model="storeForm.data4" style="width: 400px;"></el-input>
<span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上的详细地址填写</span>
</el-form-item>
<el-form-item :gutter="20" label="营业期限" :required="isPeriod">
<el-date-picker type="date" placeholder="选择日期" v-model="storeForm.data5"
style="width: 300px;" :disabled="isConcretePeriod" @change="periodConcrete"></el-date-picker>
<el-checkbox v-model="storeForm.data6" :disabled="isPeriodDisabled"
style="padding-left:15px;" @change="periodLongTerm">长期
</el-checkbox>
</el-form-item>
<el-form-item label="法定代表人证件类型：" prop="data7">
<el-select v-model="storeForm.data7" placeholder="请选择..." style="width: 400px;">
<el-option
v-for="item in frOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="法定代表人姓名：" prop="data8">
<el-input v-model="storeForm.data8" style="width: 400px;"></el-input>
<span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的法人填写</span>
</el-form-item>
<el-form-item label="法定代表人证件号：" prop="data9">
<el-input v-model="storeForm.data9" style="width: 400px;"></el-input>
</el-form-item>
<el-form-item label="有效期至" :required="isValidity">
<el-date-picker type="date" placeholder="选择日期" v-model="storeForm.data10"
style="width: 300px;" @change="validityConcrete"></el-date-picker>
<el-checkbox v-model="storeForm.data11" style="padding-left:15px;"
@change="validityLongTerm">长期
</el-checkbox>
</el-form-item>
<el-form-item label="法人证件电子版" prop="data21">
<div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
<div style="padding-right:6px;">
<el-upload
class="uploadData"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview2"
:on-remove="handleRemove2">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible2">
<img width="100%" :src="dialogImageUrl2" alt="">
</el-dialog>
</div>
<div>
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
</div>
<div style="width:380px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">请按顺序分别上传正面（带有照片一面）和反面电子版 图片。图片尺寸请确保800px*800px以上，文件大小在 5MB以内，支持png,jpeg,gif格式，最多可上传2张</span>
</div>
</div>
</el-form-item>
<el-form-item style="padding-top:20px;">
<el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button>
<!-- <div style="width: 40px;height: 100%;display: inline-block;"></div>-->
<el-button type="primary" @click="next">下一步</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "FillMainInf",
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
dialogImageUrl2: '',
dialogVisible2: false,
// 执照类型
zzOptions: [
{label: "多证合一营业执照（统一社会信用代码）", value: 1},
{label: "多证合一营业执照（非统一社会信用代码）", value: 2},
],
// 法人执照类型
frOptions: [
{label: "大陆身份证", value: 1},
{label: "护照", value: 2},
{label: "港奥台居民通行证", value: 3},
{label: "台湾居民通行证", value: 4},
],
isPeriod: true, // 营业期限 是否填写
isConcretePeriod: false,
isPeriodDisabled: false,
isValidity: true, // 有效期至 是否填写
// 主体信息
storeForm: {
data1: 2,
data5: null,
data6: false,
data10: null,
data11: false,
},
// 主体信息校验
storeRules: {
data1: [{required: true, message: '1', trigger: 'change'}],
data21: [{required: true, message: '1', trigger: 'change'}],
data2: [{required: true, message: '1', trigger: 'change'}],
data3: [{required: true, message: '请填写正确的企业名称！', trigger: 'blur'}],
data4: [{required: true, message: '1', trigger: 'blur'}],
data5: [{required: true, message: '1', trigger: 'change'}],
data7: [{required: true, message: '1', trigger: 'change'}],
data8: [{required: true, message: '1', trigger: 'blur'}],
data9: [{required: true, message: '1', trigger: 'blur'}],
data1011: [{required: true, message: '1', trigger: 'change'}],
}
}
},
mounted() {
},
methods: {
periodConcrete() {
if (this.storeForm.data5) {
this.storeForm.data6 = false;
}
},
periodLongTerm() {
if (this.storeForm.data6) {
this.storeForm.data5 = null;
}
},
validityConcrete() {
if (this.storeForm.data10) {
this.storeForm.data11 = false;
}
},
validityLongTerm() {
if (this.storeForm.data11) {
this.storeForm.data10 = null;
}
},
handlePictureCardPreview() {
},
handleRemove() {
},
handlePictureCardPreview2() {
},
handleRemove2() {
},
back() {
this.$router.push("/agreement");
},
next() {
this.$router.push("/fillBrandInf");
}
}
}
</script>
<style lang="scss" type="text/stylus" scoped>
.fill-store-inf {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.logo-bg {
height: 60px;
background: #1890ff;
img {
height: 44px;
margin: 8px 0 8px 20px;
}
}
.steps {
height: 70px;
width: 60%;
margin: 40px auto 0;
}
.steps >>> .el-step__title {
font-size: 16px;
line-height: 58px;
}
.el-step >>> .el-step__head.is-process {
color: #1890ff;
border-color: #1890ff;
.el-step__icon.is-text {
background-color: #1890ff;
.el-step__icon-inner {
color: #fff;
}
}
}
.el-step >>> .el-step__title.is-process {
color: #000;
font-weight : normal;
}
.el-step >>> .el-step__head.is-success {
color: #1890ff;
border-color: #1890ff;
.el-step__line {
background-color: #1890ff;
}
}
.el-step >>> .el-step__title.is-success {
color: #000;
}
// 主体信息
.main-con {
width: 70%;
//height :calc(100% - 170px);
margin: 30px auto 50px;
overflow-y: scroll;
// 重置 提示图标颜色
.tips-text {
font-size: 14px;
color: #C9C9C9;
word-break: break-all;
}
.h-warning:before {
color: #e3c300;
}
// 上传图片样式
.uploadData {
display: inline-block;
/deep/ .el-upload--picture-card{
width: 100px;
height: 100px;
}
/deep/ .el-upload{
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .avatar{
width: 100px;
height: 100px;
}
}
}
</style>
src/views/entry/fillShopInf.vue 0 → 100644
浏览文件 @ 2e5e6aaa
<template>
<div class="fill-store-inf">
<div class="logo-bg">
<img src="../../../public/images/logo_white_sm.png" alt="">
</div>
<div class="steps">
<el-steps :active="3" align-center finish-status="success">
<el-step title="仔细阅读并同意入驻协议"></el-step>
<el-step title="填写主体信息"></el-step>
<el-step title="填写品牌信息"></el-step>
<el-step title="填写店铺信息"></el-step>
<el-step title="提交审核，等待结果"></el-step>
</el-steps>
</div>
<div class="main-con">
<el-form ref="form" :model="storeForm" :rules="storeRules" label-width="180px">
<el-form-item label="电商平台经验：" prop="data1">
<el-radio-group v-model="storeForm.data1">
<el-radio :label="1">有</el-radio>
<el-radio :label="2">无</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="店铺名称：" prop="data2" inline-message="true">
<el-input v-model="storeForm.data2" style="width: 400px;" placeholder="请输入店铺名称"></el-input>
</el-form-item>
<el-form-item label="经营类目：">
<el-select v-model="storeForm.data3" placeholder="请选择..." style="width: 400px;">
<el-option
v-for="item in Options3"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="店铺LOGO" prop="data4">
<div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
<div style="padding-right:6px;">
<el-upload
class="uploadData"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
<div>
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
</div>
<div style="width:380px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">请上传店铺LOGO，图片尺寸请确保800px*800px以
上，文件大小在5MB以内，支持png,jpeg,gif格式，
最多可上传1张</span>
</div>
</div>
</el-form-item>
<el-form-item label="运营负责人：" prop="data5" inline-message="true">
<el-input v-model="storeForm.data5" style="width: 400px;" placeholder="请输入运营负责人姓名"></el-input>
</el-form-item>
<el-form-item label="联系电话：" prop="data6">
<el-input v-model="storeForm.data6" style="width: 400px;" placeholder="请输入联系电话"></el-input>
</el-form-item>
<el-form-item>
<p style="width:580px;line-height:24px;font-size:14px;margin: 0;">需要提交特殊产品资质的类目请将资质上传在此处，包括全国工业生产许可证、3C、医疗品械
生产许可证、化妆品生产企业许可证等，根据具体类目资质要求提交</p>
</el-form-item>
<el-form-item label="其他资质" prop="data7">
<div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
<div style="padding-right:6px;">
<el-upload
class="uploadData"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview2"
:on-remove="handleRemove2">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible2">
<img width="100%" :src="dialogImageUrl2" alt="">
</el-dialog>
</div>
<div>
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
</div>
<div style="width:380px;line-height: 24px;padding-top: 6px;color: #333;">
<span class="tips-text">请上其他资质，图片尺寸请确保800px*800px以上， 文件大小在5MB以内，支持png,jpeg,gif格式，最多 可上传2张</span>
</div>
</div>
</el-form-item>
<el-form-item style="margin: 40px 0 0;">
<el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button>
<el-button type="primary" @click="next">提交审核</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "FillShopInf",
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
dialogImageUrl2: '',
dialogVisible2: false,
//
Options3: [
{label: "统一社会信用代码", value: 1},
{label: "非统一社会信用代码", value: 2},
],
//
storeForm: {
data1: 2,
},
//
storeRules: {}
}
},
mounted() {
},
methods: {
handlePictureCardPreview() {
},
handleRemove() {
},
handlePictureCardPreview2() {
},
handleRemove2() {
},
back() {
this.$router.push("/fillBrandInf");
},
next() {
this.$router.push("/reviewing");
}
}
}
</script>
<style lang="scss" type="text/stylus" scoped>
.fill-store-inf {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.logo-bg {
height: 60px;
background: #1890ff;
img {
height: 44px;
margin: 8px 0 8px 20px;
}
}
.steps {
height: 70px;
width: 60%;
margin: 40px auto 0;
}
.steps >>> .el-step__title {
font-size: 16px;
line-height: 58px;
}
.el-step >>> .el-step__head.is-process {
color: #1890ff;
border-color: #1890ff;
.el-step__icon.is-text {
background-color: #1890ff;
.el-step__icon-inner {
color: #fff;
}
}
}
.el-step >>> .el-step__title.is-process {
color: #000;
font-weight: 400;
}
.el-step >>> .el-step__head.is-success {
color: #1890ff;
border-color: #1890ff;
.el-step__line {
background-color: #1890ff;
}
}
.el-step >>> .el-step__title.is-success {
color: #000;
}
// 主体信息
.main-con {
width: 70%;
//height :calc(100% - 170px);
margin: 20px auto 0;
overflow-y: scroll;
// 重置 提示图标颜色
.tips-text {
font-size: 14px;
color: #C9C9C9;
word-break: break-all;
}
.h-warning:before {
color: #e3c300;
}
// 上传图片样式
.uploadData {
display: inline-block;
/deep/ .el-upload--picture-card {
width: 100px;
height: 100px;
}
/deep/ .el-upload {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .avatar {
width: 100px;
height: 100px;
}
}
}
</style>
src/views/entry/index.vue 0 → 100644
浏览文件 @ 2e5e6aaa
<template>
<div class="entryDetails">
<div class="logo-bg">
<img src="../../../public/images/logo_white_sm.png" alt="">
</div>
<div class="main-con">
<img src="../../../public/images/4.png" alt="">
</div>
<div class="confirm-btn">
<p>
<el-button type="primary" round style="padding: 8px 30px;" @click="nextStep">
立即入驻&nbsp;&nbsp;<i class="el-icon-right"></i>
</el-button>
</p>
</div>
</div>
</template>
<script>
export default {
name: "Index",
data() {
return {
}
},
mounted() {
//this.nextStep();
},
methods: {
nextStep() {
this.$router.push("/agreement");
}
}
}
</script>
<style lang="scss" type="text/stylus" scoped>
.entryDetails {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.logo-bg {
height: 60px;
background: #1890ff;
img {
height: 44px;
margin: 8px 0 8px 20px;
}
}
.main-con {
width: 70%;
//height : 100%;
margin: 30px auto 0;
img {
width: 100%;
height: calc(100% + 220px);
margin: 0 0;
}
}
.confirm-btn {
height: 100px;
width: 50%;
margin: 30px auto 0;
//position: absolute;
p {
text-align : center;
}
p:nth-child(2) {
color: red;
font-size: 10px;
}
}
</style>
src/views/entry/reviewFail.vue 0 → 100644
浏览文件 @ 2e5e6aaa
<template>
<div class="to-review">
<div class="logo-bg">
<img src="../../../public/images/logo_white_sm.png" alt="">
</div>
<div class="steps">
<el-steps :active="4" align-center finish-status="success" process-status="error">
<el-step title="仔细阅读并同意入驻协议"></el-step>
<el-step title="填写主体信息"></el-step>
<el-step title="填写品牌信息"></el-step>
<el-step title="填写店铺信息"></el-step>
<el-step title="提交审核，等待结果"></el-step>
</el-steps>
</div>
<div class="main">
<div class="fuck">
<p>
<img src="../../../public/images/entry/reviewFail.png" alt="">
</p>
<p>非常抱歉，您的资料审核不通过！</p>
<p>不通过原因：企业主体信息与事实不符合。请您重新提交认证资料！</p>
<p>如果您有其它的问题，可以拔打我们的服务电话与我们联系</p>
<p>服务电话：010-31415689</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ReviewFail",
data() {
return {}
}
}
</script>
<style lang="scss" type="text/stylus" scoped>
.to-review {
width: 100%;
height: 100%;
overflow: hidden;
.logo-bg {
height: 60px;
background: #1890ff;
img {
height: 44px;
margin: 8px 0 8px 20px;
}
}
.steps {
height: 70px;
width: 60%;
margin: 40px auto 0;
}
.el-step >>> .el-step__title {
font-size: 16px;
line-height: 58px;
color: #333;
}
//#13ce66
.el-step >>> .el-step__head.is-success {
color: #1890ff;
border-color: #1890ff;
.el-step__line {
background-color: #1890ff;
}
}
.el-step >>> .el-step__head.is-process {
color: red;
}
.el-step >>> .el-step__title.is-process {
color: red;
font-weight : 400;
}
.el-steps >>> .el-step.is-horizontal .el-step__line {
background-color: red;
}
.el-step >>> .el-step__title.is-success {
color: #000;
}
.el-step >>> .el-step__title.is-error {
color: red;
font-weight : 400;
}
.main {
width: 100%;
height: calc(66% - 120px);
display:table;
.fuck {
display:table-cell;
vertical-align:middle;
p {
text-align : center;
}
//p:nth-child(1) {
// img {
// widht: 50px;
// height: 50px;
// }
//}
p:nth-child(2) {
font-size: 24px;
font-weight : bold;
padding: 0px 0;
}
}
}
}
</style>
src/views/entry/reviewing.vue 0 → 100644
浏览文件 @ 2e5e6aaa
<template>
<div class="to-review">
<div class="logo-bg">
<img src="../../../public/images/logo_white_sm.png" alt="">
</div>
<div class="steps">
<el-steps :active="4" align-center finish-status="success">
<el-step title="仔细阅读并同意入驻协议" ></el-step>
<el-step title="填写主体信息" ></el-step>
<el-step title="填写品牌信息" ></el-step>
<el-step title="填写店铺信息" ></el-step>
<el-step title="提交审核，等待结果" ></el-step>
</el-steps>
</div>
<div class="main">
<div class="fuck">
<p>
<img src="../../../public/images/entry/reviewSuccess.png" alt="">
</p>
<p>资料已提交，工作人员审核中。。。</p>
<p>感谢您使用云仓！</p>
<p>您的资料已经提交审核，审核周期为1-3个工作日，请您耐心等待审核结果。</p>
<p>如果您有其它的问题，可以拔打我们的服务电话与我们联系！</p>
<p>服务电话：010-31415689</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ReviewSuccess",
data() {
return {}
}
}
</script>
<style lang="scss" type="text/stylus" scoped>
.to-review {
width: 100%;
height: 100%;
overflow: hidden;
.logo-bg {
height: 60px;
background: #1890ff;
img {
height: 44px;
margin: 8px 0 8px 20px;
}
}
.steps {
height: 70px;
width: 60%;
margin: 40px auto 0;
}
.steps >>> .el-step__title {
font-size: 16px;
line-height: 58px;
color: #333;
}
.el-step >>> .el-step__head.is-process {
color: #1890ff;
border-color: #1890ff;
.el-step__icon.is-text {
background-color: #1890ff;
.el-step__icon-inner {
color: #fff;
}
}
}
.el-step >>> .el-step__title.is-process {
color: #000;
font-weight : 400;
}
.el-step >>> .el-step__head.is-success {
color: #1890ff;
border-color: #1890ff;
.el-step__line {
background-color: #1890ff;
}
}
.el-step >>> .el-step__title.is-success {
color: #000;
}
.main {
width: 100%;
height: calc(66% - 120px);
display:table;
.fuck {
display:table-cell;
vertical-align:middle;
p {
text-align : center;
}
p:nth-child(2) {
font-size: 24px;
font-weight : bold;
padding: 10px 0;
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论