You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
9.0 KiB
290 lines
9.0 KiB
<template>
|
|
<div class="register-wrap min-width">
|
|
<!-- 顶部提示语 -->
|
|
<div class="register-top" v-if="showAlert">
|
|
<div class="register-top-left">
|
|
<img src="../../assets/register/register-top-left.svg" alt="">
|
|
<span>设置完这些信息就可以正式售卖啦，也可以选择跳过，先进入后台看看哦 </span>
|
|
</div>
|
|
<div class="register-top-right">
|
|
<img src="../../assets/register/register-top-close.svg" alt="" @click="hideAlert">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 步骤条 -->
|
|
<div class="sticky">
|
|
<div style="width: 100%;background: #fff;">
|
|
<div class="step-wrap min-flex">
|
|
<div :class="['step-item', activeStep === 1 ? 'checked' : 'success']" @click="goCurActiveStep(1)">
|
|
<img v-if="activeStep === 1" src="../../assets/register/step1_ing.svg" alt="" class="custom-icon">
|
|
<img v-if="activeStep > 1" src="../../assets/register/step_success.svg" alt="" class="custom-icon">
|
|
<span>基础信息</span>
|
|
</div>
|
|
<div :class="['step-line', activeStep > 1 ? 'step_active-line' : '']"></div>
|
|
<div :class="['step-item', activeStep === 2 ? 'checked' : activeStep > 2 ? 'success' : '']"
|
|
@click="goCurActiveStep(2)">
|
|
<img v-if="activeStep === 1" src="../../assets/register/step2_null.svg" alt="" class="custom-icon">
|
|
<img v-if="activeStep === 2" src="../../assets/register/step2_ing.svg" alt="" class="custom-icon">
|
|
<img v-if="activeStep > 2" src="../../assets/register/step_success.svg" alt="" class="custom-icon">
|
|
<span>收款方式</span>
|
|
</div>
|
|
<div :class="['step-line', activeStep > 2 ? 'step_active-line' : '']"></div>
|
|
<div :class="['step-item', activeStep === 3 ? 'checked' : activeStep > 2 ? 'success' : '']"
|
|
@click="goCurActiveStep(3)">
|
|
<img v-if="activeStep !== 3" src="../../assets/register/step3_null.svg" alt="" class="custom-icon">
|
|
<img v-if="activeStep === 3" src="../../assets/register/step3_ing.svg" alt="" class="custom-icon">
|
|
<!-- <img v-if="activeStep >2" src="@/assets/register/step_success.svg" alt=""> -->
|
|
<span>添加服务</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;background: #fff;">
|
|
<div class="step-desc min-flex">
|
|
<span>{{ renderStepDesc('1') }}</span>
|
|
<span>{{ renderStepDesc('2') }}</span>
|
|
<span>{{ renderStepDesc('3') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="pageDesc min-flex">搭建售卖渠道</p>
|
|
|
|
<!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
|
|
<!-- 默认页面展示 的初始组件 Franchise-->
|
|
<component :is="process" :siteInfo="siteInfo" ref="dynamicComponent" @handelSiteInfo="handelSiteInfo" @handelStep="handelStep"/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import step1 from '@/components/site/addSiteStep/step1.vue'
|
|
import step2 from '@/components/site/addSiteStep/step2.vue'
|
|
import step3 from '@/components/site/addSiteStep/step3.vue'
|
|
|
|
export default {
|
|
// 服务个性化设置
|
|
name: 'siteAdd',
|
|
props: [''],
|
|
components: {
|
|
step1,
|
|
step2,
|
|
step3,
|
|
},
|
|
data() {
|
|
return {
|
|
// AUTH
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
|
|
siteInfo:{},
|
|
showAlert:true,
|
|
activeStep: '',//当前步骤条
|
|
process: '', //进度默认为站点开通
|
|
prodid: '',//要添加的服务类型
|
|
stepDesc: {
|
|
'1': '填写站点信息、选择模板样式',
|
|
'2': '配置收款方式',
|
|
'3': '想卖哪些东西？来选选吧',
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
|
|
},
|
|
watch:{
|
|
activeStep: {
|
|
immediate: true,
|
|
handler(newVal) {
|
|
if(newVal){
|
|
this.process = 'step'+newVal
|
|
}
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getNotFinishedSite()
|
|
},
|
|
methods: {
|
|
getNotFinishedSite() {
|
|
const that = this
|
|
that.payList = []
|
|
this.$http('POST', '/agentnew/ajax_get_not_finished_site', {},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if(response.status){
|
|
that.$nextTick(() => {
|
|
const unsiteInfo = response.data
|
|
if(Object.keys(unsiteInfo).length>0){
|
|
that.siteInfo = unsiteInfo
|
|
if(that.siteInfo.open_process === '3'){
|
|
if(that.siteInfo.sale_channel === '2'){
|
|
that.activeStep = 3 //自用不出售 不设置收款方式
|
|
return true
|
|
}else{
|
|
that.activeStep = 2 //站点信息已存在 设置收款方式
|
|
return true
|
|
}
|
|
}else if(that.siteInfo.open_process === '4'){
|
|
that.activeStep = 3 //收款方式已设置 添加售卖服务
|
|
return true
|
|
}
|
|
}
|
|
that.activeStep = 1
|
|
})
|
|
return true
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
hideAlert(){
|
|
this.showAlert = false
|
|
},
|
|
goCurActiveStep(step) {
|
|
if (step < this.activeStep) {
|
|
this.activeStep = step
|
|
}
|
|
},
|
|
renderStepDesc(step) {
|
|
return this.stepDesc[step]
|
|
},
|
|
handelSiteInfo(siteInfo){
|
|
this.siteInfo = siteInfo
|
|
},
|
|
handelStep(step){
|
|
if(step === 4){
|
|
//跳转主页面
|
|
this.$message.success('保存成功');
|
|
return true;
|
|
}
|
|
|
|
this.activeStep = step
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.register-btns {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
background: #FFFFFF;
|
|
padding: 16px 0px;
|
|
/* 蓝色阴影_常规 */
|
|
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
|
|
z-index: 999;
|
|
button:nth-child(1) {
|
|
margin-right: 56px;
|
|
}
|
|
}
|
|
|
|
.register-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.custom-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.register-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
// height: 72px;
|
|
align-items: center;
|
|
padding: 20px 40px 20px 110px;
|
|
background: linear-gradient(270deg, #F6EEF7 3%, #EDE9FB 97%);
|
|
color: #23242B;
|
|
letter-spacing: 0.08em;
|
|
line-height: 32px;
|
|
|
|
.register-top-left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.register-top-left img {
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pageDesc {
|
|
/* 自动布局 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px 36px;
|
|
line-height: 32px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.06em;
|
|
color: #1E2226;
|
|
text-align: left;
|
|
width: calc(84.75% - 72px);
|
|
}
|
|
}
|
|
|
|
.step-wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24px 0 0 0;
|
|
|
|
.step-item {
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
span {
|
|
color: #1E2226;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.custom-icon {
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
|
|
.checked span {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #006AFF !important;
|
|
transition: all .3s;
|
|
|
|
}
|
|
|
|
.success span {
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
color: #006AFF !important;
|
|
transition: all .3s;
|
|
}
|
|
|
|
.step-line {
|
|
flex: 1;
|
|
margin: 0 32px;
|
|
border-bottom: 1px solid #DFE2E6;
|
|
}
|
|
|
|
.step_active-line {
|
|
transition: all .3s;
|
|
border-bottom: 1px solid #006AFF;
|
|
}
|
|
}
|
|
|
|
.step-desc {
|
|
padding-top: 6px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 24px;
|
|
color: #8A9099;
|
|
|
|
span {
|
|
padding-left: 36px;
|
|
}
|
|
}
|
|
</style>
|