kuailelunwen_new_houtai/src/views/agent/siteAdd.vue

<template>
    <div class="register-wrap min-width">

        <!-- 步骤条 -->
        <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" :key="stepKey" :siteInfo="siteInfo" :skip="canSkip" 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 {
            siteInfo:{},
            canSkip: false,
            stepKey: Date.now(),
            activeStep: '1',//当前步骤条
            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() {
        //新加盟允许跳过站点设置
        if(this.$route.query.isFirst) {
            this.canSkip = true
        }
        this.getNotFinishedSite()
    },
    methods: {
        getNotFinishedSite() {
            const that = this
            this.$http('POST', '/agentnew/ajax_get_not_finished_site', {}).then(response => {
                if(response.status){
                    that.$nextTick(() => {
                        const unsiteInfo = response.data
                        if(Object.keys(unsiteInfo).length>0){
                            that.siteInfo = unsiteInfo
                            that.stepKey = Date.now();

                            const step = localStorage.getItem('activeStep')
                            if(step){
                                that.activeStep = step
                                return true
                            }

                            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')
            })
        },
        goCurActiveStep(step) {
            if (step < this.activeStep) {
                this.activeStep = step
                localStorage.setItem('activeStep', step)
            }
        },
        renderStepDesc(step) {
            return this.stepDesc[step]
        },
        handelSiteInfo(siteInfo){
            this.siteInfo = siteInfo
        },
        handelStep(step){
            if(step === 4){
                //跳转主页面
                this.$router.push('/agent/siteList')
                return true;
            }

            this.activeStep = step
        },
    }
}
</script>
<style scoped lang="scss">
.register-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  .custom-icon {
    width: 24px;
    height: 24px;
  }

  .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);
  }
  .sticky{
    position: sticky;
    top: 0px;
    z-index: 100;
  }
}

.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>