kuailelunwen_new_houtai/src/views/agent/siteServiceEdit.vue

<template>
    <div class="main-content12 pb90">
        <!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
        <!-- 默认页面展示 的初始组件 Franchise-->
        <component :is="componentsName ? componentsName : 'priceSet'" ref="dynamicComponent" :key="tableKey"
                   :serviceInfo="siteServiceInfo" @saveEvent="handleSaveEvent"/>
    </div>

</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import priceSet from '@/components/site/serviceSetting/priceSet.vue'
import paymentSet from '@/components/site/serviceSetting/paymentSet.vue'
import showSet from '@/components/site/serviceSetting/showSet.vue'
import menuColorSet from '@/components/site/serviceSetting/menuColorSet.vue'
import submitSeoSet from '@/components/site/serviceSetting/submitSeoSet.vue'
import reportSeoSet from '@/components/site/serviceSetting/reportSeoSet.vue'
import domainSet from '@/components/site/serviceSetting/domainSet.vue'
import linkSet from '@/components/site/serviceSetting/linkSet.vue'

export default {
    // 服务个性化设置
    name: 'siteServiceEdit',
    props: [''],
    components: {
        priceSet,
        paymentSet,
        showSet,
        menuColorSet,
        submitSeoSet,
        reportSeoSet,
        domainSet,
        linkSet,
    },
    data() {
        return {
            siteServiceInfo:{},
            tableKey:Date.now(),
        }
    },
    computed: {
        ...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        if(!this.$route.query.uid && !this.$route.query.type) {
            this.$message.error('非法请求');
            this.$router.push('/agent/siteList')
        }
        this.uid = this.$route.query.uid;
        this.type = this.$route.query.type;

        store.commit('SET_CUSTOMIZE', true);
        store.commit('SET_SLIDER_MENU', 'siteServiceSettingData');

        this.loadPddSDK()
        this.getSiteServiceInfo()
    },
    mounted() {
        store.commit('SET_PAGETITLE', '服务设置');
    },
    methods: {
        loadPddSDK() {
            const script = document.createElement('script');
            script.src = 'https://pfile.pddpic.com/galerie-go/open_sdk/pc.202102201613.js';
            document.head.appendChild(script);
        },
        handleSaveEvent(payload) {
            this.siteServiceInfo = payload
        },
        getSiteServiceInfo() {
            const that = this
            that.payList = []
            this.$http('POST', '/agentnew/ajax_get_service_info', {
                uid: that.uid,
                type: that.type,
            }).then(response => {
                that.$nextTick(() => {
                    that.siteServiceInfo = response.data
                    store.commit('SET_BREADRIGHTTEXT', {
                        text: response.data.site_short_name,
                        link: response.data.site_domain
                    });

                    that.getPayList()
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getPayList() {
            const that = this
            that.payList = []
            this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
                uid: that.uid,
                type: that.type,
            }).then(response => {
                this.$nextTick(() => {
                    that.siteServiceInfo.paylist = response.data.paylist
                    that.tableKey = Date.now();
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.pb90{
  padding-bottom: 90px;
}
::v-deep .flex-left{
  text-align: left;
}

::v-deep .flex-right{
  text-align: left;
}

::v-deep .mb16{
  margin-bottom: 16px;
}

::v-deep .pageheader {
  display: flex;
  justify-content: space-between;
  /* 关键属性 */
  align-items: center;
  margin-bottom: 24px;
}

::v-deep .pagetitle {
  font-size: 18px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #1E2226;
  margin-top: 8px;
}

::v-deep .save-button{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  z-index: 9;
}

::v-deep .payment-item{
  width: 540px;
  height: 95px;
  padding: 0 24px;
  background: #FAFAFA;
  border-radius: 4px;
  border: none;
  margin-bottom: 12px;
}

</style>