diff --git a/src/views/entry/agreement.vue b/src/views/entry/agreement.vue new file mode 100644 index 0000000000000000000000000000000000000000..e39cb8bc703187b151e29aa37a1e24f0130c7e3e --- /dev/null +++ b/src/views/entry/agreement.vue @@ -0,0 +1,146 @@ +<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> diff --git a/src/views/entry/fillBrandInf.vue b/src/views/entry/fillBrandInf.vue new file mode 100644 index 0000000000000000000000000000000000000000..bc01fee70cb36d90d810ec7cf76cdd321c52761e --- /dev/null +++ b/src/views/entry/fillBrandInf.vue @@ -0,0 +1,404 @@ +<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> diff --git a/src/views/entry/fillMainInf.vue b/src/views/entry/fillMainInf.vue new file mode 100644 index 0000000000000000000000000000000000000000..7499adb57eb15f7e5b0a18c96eeda0aa85e98e22 --- /dev/null +++ b/src/views/entry/fillMainInf.vue @@ -0,0 +1,347 @@ +<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> diff --git a/src/views/entry/fillShopInf.vue b/src/views/entry/fillShopInf.vue new file mode 100644 index 0000000000000000000000000000000000000000..14734d2734759b3f56c24e5ce2280117a0818fc2 --- /dev/null +++ b/src/views/entry/fillShopInf.vue @@ -0,0 +1,279 @@ +<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> diff --git a/src/views/entry/index.vue b/src/views/entry/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..503666a9068d6ecd3d010cf910580b3ce6274887 --- /dev/null +++ b/src/views/entry/index.vue @@ -0,0 +1,77 @@ +<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"> + ç«‹å³å…¥é©» <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> diff --git a/src/views/entry/reviewFail.vue b/src/views/entry/reviewFail.vue new file mode 100644 index 0000000000000000000000000000000000000000..e949542d30664dc7b389eb282da6282eb7a3b3a6 --- /dev/null +++ b/src/views/entry/reviewFail.vue @@ -0,0 +1,116 @@ +<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> diff --git a/src/views/entry/reviewing.vue b/src/views/entry/reviewing.vue new file mode 100644 index 0000000000000000000000000000000000000000..321f23d50eaa2cdebaf9a23ccf651ca5a4e06b49 --- /dev/null +++ b/src/views/entry/reviewing.vue @@ -0,0 +1,112 @@ +<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>