kuailelunwen_new_houtai/src/components/site/serviceSetting/linkSet.vue

<template>
    <div class="main-content12">
        <div class="pageheader">
            <span class="pagetitle">{{info.type_desc}}-自定义导航</span>
        </div>

        <div class="flex-common">
            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" label="首页链接">
                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%" v-model="info.return_homepage_url"
                                       placeholder="请输入首页链接" desc="您希望用户能找到服务的首页或您自建站点页面">
                            </GuipInput>
                            <el-checkbox slot="formDom" @change="toggleSetSyncHome" v-model="syncHome">同步到本站的其他检测首页项上</el-checkbox>
                        </GuipFormItem>
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="检测服务链接">
                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%" v-model="info.go_check_url"
                                       placeholder="请输入检测服务链接" desc="方便用户快速找到再次检测入口">
                            </GuipInput>
                            <el-checkbox slot="formDom" @change="toggleSetSyncCheck" v-model="syncCheck">同步到本站的其他检测首页项上</el-checkbox>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
        </div>

        <div class="save-button">
            <GuipButton type="primary" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
        </div>
    </div>
</template>
<script>

import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipButton from "@/components/GuipButton.vue";
import GuipInput from "@/components/GuipInput.vue";

export default {
    name: 'linkSet',
    props: {
        serviceInfo: {
            type: Object,
            required: true
        }
    },
    components: {
        GuipInput,
        GuipButton, GuipFormItem

    },
    data(){
        return {
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            info: {},
            syncHome:false,
            syncCheck:false,
            //添加按钮样式
            saveBtnStyleObj: {
                width: '144px',
                height: '46px',
                borderRadius: '4px',
                background: '#006AFF',
            },
        }
    },
    mounted() {
        this.info = this.serviceInfo
    },
    methods: {
        toggleSetSyncHome(){
            this.syncHome = !this.syncHome
        },
        toggleSetSyncCheck(){
            this.syncCheck = !this.syncCheck
        },
        saveConfirm() {
            let obj = {}
            obj.uid = this.info.uid
            obj.type = this.info.type
            obj.return_home_url = this.info.return_homepage_url
            obj.go_check_url = this.info.go_check_url
            obj.is_sync_home = this.syncHome ? 1 : 0
            obj.is_sync_check = this.syncCheck ? 1 : 0

            const that = this
            this.$http('POST', '/agentnew/ajax_update_service_link', obj,{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                if(response.status){
                    that.$message.success('保存成功');
                    that.$emit('saveEvent', that.info)
                    return true;
                }
                that.$message.success(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
    }
}
</script>
<style lang="scss">

</style>