kuailelunwen_new_houtai/src/views/agent/siteServiceEdit.vue

<template>
    <div class="main-content12">
        <div class="pageheader">
            <span class="pagetitle">基本设置</span>
        </div>

<!--        收款方式-->
        <div class="flex-common payment-area">
            <PromptText text="按住左侧图标，上下拖动可进行排序，平台卡券只能放到最后。" :type="1" class="mb32"/>
            <PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
        </div>

<!--        提交页seo-->
        <div class="flex-common">
            <PromptText text="温馨提示：提交页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>

            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" class="mb24" label="提交页标题（T：title）">
                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
                                       placeholder="建议80字内">
                            </GuipInput>

                        </GuipFormItem>
                        <GuipFormItem column="column" label="提交页关键词（K：keyword）">
                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
                            </GuipInput>
                        </GuipFormItem>
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="提交页描述（D：description）">
                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
                            </GuipInput>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
        </div>

<!--        报告页seo-->
        <div class="flex-common">
            <PromptText text="温馨提示：报告页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>

            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" class="mb24" label="报告页标题（T：title）">
                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
                                       placeholder="建议80字内">
                            </GuipInput>
                        </GuipFormItem>
                        <GuipFormItem column="column" label="报告页关键词（K：keyword）">
                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
                            </GuipInput>
                        </GuipFormItem>
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="报告页描述（D：description）">
                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
                            </GuipInput>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
        </div>

<!--        展示设置-->
        <div class="flex-common">
            <h3 class="mb16">基础信息</h3>

            <PromptText text='温馨提示：服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>

            <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%"
                                       placeholder="建议80字内" desc="展示在用户端的服务名称">
                            </GuipInput>
                        </GuipFormItem>
                        <GuipFormItem column="column" label="服务广告词">
                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
                                       placeholder="建议20字内" desc="用来简短概括的解释服务">
                            </GuipInput>
                        </GuipFormItem>
                        <GuipFormItem column="column" label="服务描述">
                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
                                       desc="用来详细的解释服务">
                            </GuipInput>
                        </GuipFormItem>
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="服务Logo">
                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
                                          hover-text-color="#006AFF"/>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
        </div>

        <div class="flex-common">
            <h3>展示开关</h3>
            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <div class="card-item">
                            <div class="card-info">
                                <p class="card-name">首页服务显示</p>
                                <p class="card-desc">控制首页是否显示本服务</p>
                            </div>
                            <el-form>
                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
                                </GuipSwitch>
                            </el-form>
                        </div>
                        <div class="card-item">
                            <div class="card-info">
                                <p class="card-name">检测页价格展示</p>
                                <p class="card-desc">本服务检测页面是否展示价格</p>
                            </div>
                            <el-form>
                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
                                </GuipSwitch>
                            </el-form>
                        </div>
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        <div class="card-item">
                            <div class="card-info">
                                <p class="card-name">首页推荐位</p>
                                <p class="card-desc">开启即上推荐位</p>
                            </div>
                            <el-form>
                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
                                </GuipSwitch>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>

<!--        页面品牌和颜色-->
        <div class="flex-common">
            <h3>PC端页面品牌</h3>
            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" label="提交页Logo上传">
                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
                              :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
                              hover-text-color="#006AFF"/>
                        </GuipFormItem>
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="报告页Logo上传">
                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
                              :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
                              hover-text-color="#006AFF"/>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
        </div>

        <div class="flex-common">
            <h3 class="mb16">页面色彩</h3>

            <PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>

            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        aaa
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        bbb
                    </div>
                </div>
            </el-form>
        </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%"
                                       placeholder="请输入首页链接" desc="您希望用户能找到服务的首页或您自建站点页面">
                            </GuipInput>
                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</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%"
                                       placeholder="请输入检测服务链接" desc="方便用户快速找到再次检测入口">
                            </GuipInput>
                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
        </div>

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

import PaymentMethod from "@/components/paymentMethod.vue";
import GuipButton from "@/components/GuipButton.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipInput from "@/components/GuipInput.vue";
import HoverButton from "@/components/HoverButton.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";
import PromptText from "@/components/PromptText.vue";

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        GuipSwitch,
        HoverButton,
        GuipInput, GuipFormItem,
        GuipButton,
        PaymentMethod,
        PromptText
    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',

            uid:0,
            type:0,
            payList: [],

            //添加按钮样式
            saveBtnStyleObj: {
                width: '144px',
                height: '46px',
                borderRadius: '4px',
                background: '#006AFF',
            },
        }
    },
    computed: {
    },
    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;
    },
    mounted() {
        this.getPayList()
    },
    methods: {
        // 获取支付列表
        getPayList() {
            const that = this
            that.payList = []
            this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
                uid: that.uid,
                type: that.type,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.payList = response.data.paylist
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        confirmPayment(payList){
            this.payList = payList
        },
    }
}
</script>
<style lang="scss" scoped>
.mb16{
  margin-bottom: 16px;
}
.mb32{
  margin-bottom: 32px;
}
.pageheader {
    display: flex;
    justify-content: space-between;
    /* 关键属性 */
    align-items: center;
    margin: 16px 0 16px 0;
}

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

.notice-text{
  display: flex;
  align-items: center;
  padding: 8px 13px;
  align-self: stretch;
  z-index: 1;
  border-radius: 4px;
  background: #F2F7FF;
  border: 1px solid #BFDAFF;
  margin-bottom: 32px;
  .notice-icon{
    width: 16px;
    height: 16px;;
    margin-right: 8px;
  }
  span{
    color: #1E2226;
    letter-spacing: 0.08em;
  }
}

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

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


.warning-text{
  display: flex;
  align-items: center;
  padding: 8px 13px;
  align-self: stretch;
  z-index: 1;
  border-radius: 4px;
  background: #FFF1F0;
  border: 1px solid #FFA39E;
  margin-bottom: 32px;
  .warning-icon{
    width: 16px;
    height: 16px;;
    margin-right: 8px;
  }
  span{
    color: #1E2226;
    letter-spacing: 0.08em;
  }
}

::v-deep .form-item-bottom{
  text-align: left;
}

.card-item{
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFAFA;
  border-radius: 4px;
  border: none;
  margin-bottom: 12px;
  .card-info{
    text-align: left;
    margin-left: 12px;
    font-variation-settings: "opsz" auto;
    letter-spacing: 0.08em;
    .card-name{
      font-size: 14px;
      line-height: 18px;
      color: #1E2226;
    }
    .card-desc{
      font-size: 12px;
      line-height: 13px;
      margin-top: 12px;
      color: #8A9099;
    }
  }

  .el-form-item{
    margin: 0;
  }
}
</style>