kuailelunwen_new_houtai/src/views/SitePersonalization.vue

<template>
    <div class="site-personal-wrap min-flex">
        <div class="siteMessage flex-common" id="siteMessage4">
            <h3>网页模板</h3>
            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <div class="tem-home">
                            <img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
                            <div class="tem-home-bottom">
                                <b>经典深蓝模板（默认）</b>
                                <div>
                                    <div class="tem-look" @click="lookTemImg">
                                        <img src="@/assets/register/look-tem.svg" alt="">
                                        预览
                                    </div>
                                    <div @click="editTemImg">
                                        <img src="@/assets/register/edit-tem.svg" alt="">
                                        修改
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-line borderNone"></div>
                    <div class="flex-right"></div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" />
        </div>
        <div class="siteMessage flex-common mt12" id="siteMessage5">
            <h3>在线客服</h3>
            <el-form ref="formRef">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <p class="flex siteMessage5_desc"> <img src="@/assets/site/info_filled.svg" alt="">
                        展示在网站右侧悬浮栏的客服，请至少设置1个</p>
                    <el-tab-pane label="网站客服" name="first">
                        <div class="flex-wrap">
                            <div class="flex-left">
                                <p class="flex-left-desc">旺旺客服</p>
                                <GuipInput ref="GuipInput" width="100%" v-model="personalForm8.checkNum"
                                    placeholder="请输入数字">
                                </GuipInput>
                                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <GuipButton> <img src="@/assets/site/info_filled.svg" alt=""> 重新上传</GuipButton>
                                </el-upload>
                                <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
                            </div>
                            <div class="flex-line"></div>
                            <div class="flex-right">
                                <p class="flex-left-desc">微信客服</p>
                                <div class="flex">
                                    <img v-if="imageUrl" :src="imageUrl" class="kefuImg">
                                    <img e-else src="@/assets/site/kefuTem.png" alt="" class="kefuImg">
                                    <div class="right">
                                        <el-upload class="avatar-uploader"
                                            action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
                                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                            <GuipButton> <img src="" alt=""> 重新上传</GuipButton>
                                        </el-upload>
                                        <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="报告页客服" name="second">报告页客服</el-tab-pane>
                    <el-tab-pane label="支付账单客服" name="third">支付账单客服</el-tab-pane>
                </el-tabs>
            

            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" />
        </div>
        <div class="siteMessage flex-common mt12" id="siteMessage6">
            <h3>功能显隐</h3>
            <el-form :model="personalForm3" ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <p class="flex-left-desc">价格显隐</p>
                        <div class="left-pay-list mb24">
                            <div class="left-pay-item ">
                                <div class="flex-between">
                                    <span>服务列表页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
                                    <GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示"
                                        inactiveText="隐藏" @change="onSwitchChange">
                                    </GuipSwitch>
                                </div>
                            </div>
                            <div class="left-pay-item ">
                                <div class="flex-between">
                                    <span>服务提交页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
                                    <GuipSwitch :modelValue="personalForm3.weixinFlag2" activeText="显示"
                                        inactiveText="隐藏" @change="onSwitchChange">
                                    </GuipSwitch>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <p class="flex-left-desc">报告与真伪查询</p>
                        <div class="left-pay-list mb24">
                            <div class="left-pay-item ">
                                <div class="flex-between">
                                    <span>服务列表页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
                                    <GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示"
                                        inactiveText="隐藏" @change="onSwitchChange">
                                    </GuipSwitch>
                                </div>
                            </div>
                            <div class="left-pay-item ">
                                <div class="flex-between">
                                    <span>服务提交页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
                                    <GuipSwitch :modelValue="personalForm3.weixinFlag4" activeText="显示"
                                        inactiveText="隐藏" @change="onSwitchChange">
                                    </GuipSwitch>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm3')" />
        </div>
        <div class="siteMessage flex-common mt12" id="siteMessage7">
            <h3>安全提交</h3>
            <el-form :model="personalForm7" ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <p class="flex-left-desc">查重服务</p>
                        <div class="left-pay-list mb24">
                            <div class="left-pay-item ">
                                <div class="flex-between">
                                    <span>60分钟内不可提交重复内容 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
                                    <GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示"
                                        inactiveText="隐藏" @change="onSwitchChange">
                                    </GuipSwitch>
                                </div>
                                <el-checkbox-group v-model="checkList" class="checkboxGroup">
                                    <el-checkbox label="识别重复标题"></el-checkbox>
                                    <el-checkbox label="识别重复作者"></el-checkbox>
                                    <el-checkbox label="识别重复正文"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <p class="flex-left-desc">AI服务</p>
                        <div class="left-pay-list mb24">
                            <div class="left-pay-item ">
                                <div class="flex-between">
                                    <span>3分钟内不可提交重复内容 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
                                    <GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示"
                                        inactiveText="隐藏" @change="onSwitchChange">
                                    </GuipSwitch>
                                </div>
                                <el-checkbox-group v-model="checkList1" class="checkboxGroup">
                                    <el-checkbox label="识别重复标题"></el-checkbox>
                                    <el-checkbox label="识别重复辅助信息"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm7')" />
        </div>
        <div class="siteMessage flex-common mt12" id="siteMessage8">
            <h3>初始订单数 <span>设定检测基数，首页显示检测数量时，显示三个月内实际数值+该数值</span></h3>
            <el-form :model="personalForm8" ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <p class="flex-left-desc">检测篇数基数</p>
                        <GuipInput ref="GuipInput" width="100%" v-model="personalForm8.checkNum" placeholder="请输入数字">
                        </GuipInput>
                    </div>
                    <div class="flex-line borderNone"></div>
                    <div class="flex-right"></div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm8')" />
        </div>
    </div>
</template>
<script>
import GuipInput from '@/components/GuipInput.vue';
import { mapState } from 'vuex';
import store from '../store';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        GuipInput,
        GuipButton,
        GuipSwitch,
        GroupFormBtns
    },
    data() {
        return {
            activeName: 'first',
            imageUrl: '',
            checkList1: ['识别重复辅助信息'],
            checkList: ['识别重复正文'],
            // 在线客服
            personalForm3: {
                weixinFlag1: false,
                weixinFlag2: true,
                weixinFlag3: true,
                weixinFlag4: false
            },
            personalForm7: {
                weixinFlag3: true,
                weixinFlag4: true,
            },
            personalForm8: {
                checkNum: 0,
            }
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        store.commit('SET_PAGETITLE', '个性化设置');
    },
    methods: {
        handleTabClick(tab, event) {
            console.log(tab, event);
        },
        lookTemImg() {

        },
        editTemImg() {

        },
        onSwitchChange(data) {
            console.log(data, '---');
        },
        cancelClick() {
            console.log('quxiao');
        },
        confirmClick(type) {
            console.log(type, '确认');
        },
        // 上传图片
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}
</script>
<style lang="scss" scoped>
.site-personal-wrap {
    width: 100%;

    .siteMessage {
        border-radius: 4px;
        transition: all .5s;
        border: 1px solid transparent;
    }

    .siteMessage5_desc {}

    .checkboxGroup {
        display: flex;
        justify-content: flex-start;
        margin-top: 18px;
        padding: 10px 0;
    }

    .tem-home {
        width: 100%;
        border-radius: 4px;
        opacity: 1;
        background: #FFFFFF;
        /* middle/middle_line_1 */
        border: 1px solid #DFE2E6;

        .tem-home-top {
            width: 100%;
        }

        .tem-home-bottom {
            display: flex;
            align-items: center;
            padding: 22px 32px;
            justify-content: space-between;

            .tem-look {
                margin-right: 36px;
            }

            div {
                display: flex;
                align-items: center;

                img {
                    margin-right: 6px;
                }
            }
        }
    }

    .left-pay-list {
        width: 100%;
        border-radius: 4px;
        opacity: 1;

        /* middle/middle_grey_0 */
        // span{
        //     color: #23242B;
        // }
        .left-pay-item {
            padding: 24px;
            color: #23242B;
            background: #FAFAFA;
            margin-top: 12px;

            p {
                text-align: left;
                margin-top: 9px;
                /* caption/caption_regular */
                font-size: 12px;
                font-weight: normal;
                line-height: 13px;
                letter-spacing: 0.08em;
                color: #626573;
            }

            .el-form-item {
                margin-bottom: 0;
            }
        }
    }

    .kefuImg {
        width: 120px;
        height: 120px;
    }

    .avatar-desc {
        /* regular/body3-Regular */
        /* 样式描述：辅助文字 */
        font-family: Inter;
        font-size: 12px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: normal;
        font-variation-settings: "wght" 400;
        /* Light/中性色 Neutral/Text/Regular */
        color: var(--el-color-text-regular);
        /* #606266 */
    }
}
</style>