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
差异被折叠。
src/views/entry/fillMainInf.vue 0 → 100644
浏览文件 @ 2e5e6aaa
差异被折叠。
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论