caimei365-www/src/main/resources/static/js/supplier-login/login.js

new Vue({
    el: "#login_content",
    data: {
        fit: "contain",
        activeLinks: [
            {
                id: 0,
                title: '营销服务',
                href: '#zeroPage'
            },
            {
                id: 1,
                title: '解决方案',
                href: '#firstPage'
            },{
                id: 2,
                title: '运营产品',
                href: '#secondPage'
            },{
                id: 3,
                title: '营销工具',
                href: '#thirdPage'
            },{
                id: 4,
                title: '成功案例',
                href: '#fourPage'
            },{
                id: 5,
                title: '关于采美',
                href: '#fivePage'
            },{
                id: 6,
                title: '增长社区',
                href: '#sixPage'
            }
        ],
        // 基础
        foundationList: ['品牌商城入驻','品牌内容宣发','用户画像洞察','客户旅程搭建','客户线索跟踪', '线索转化'],
        customizationList: ['基础版全部内容', '引流关键词策划和布局', '漏斗模型转化率评估', '数字营销内容策划', '客户线索跟踪', '线索转化'],
        caseList: ['高级版全部内容', '设置销售目标', '数据模型策划和执行', '品牌私域运营及正品认证通', '开放平台全域销售系统', '保证销售目标的执行'],
        activeLinkId: 0, // 动态链接
        countNum: true,
        activeId: 0,
        isStore: true,
        isAthor: false,
        ScenarioList: [
            {
                contant: [{
                    id: 1,
                    title: '信息平台',
                    contant: '集创作、发布、客户资源收集于一体的美业内容输出平台；',
                },{
                    id: 2,

                    title: '媒体矩阵',
                    contant: '丰富媒体资源，助力品牌快速传播；',
                }]
            },{
                contant: [{
                    id: 3,
                    title: '正版图库',
                    contant: '永久商业授权的专业医美正版图库；',
                },{
                    id: 4,
                    title: 'SEO关键词',
                    contant: '立足企业全局，进行关键词策划布局；',
                }]
            },{contant: [{
                    id: 5,
                    title: 'CRM系统',
                    contant: '客户全生命周期数字化管理系统；',
                },{
                    id: 6,
                    title: '认证通',
                    contant: '一款专业的正品认证SaaS软件系统；',
                }]},{contant: [{
                    id: 7,
                    title: '美业社群',
                    contant: '更紧密的联动用户，提高客户转化率；',
                },{
                    id: 8,
                    title: '私域直播',
                    contant: 'B2B企业直播平台，一键开启直播引流；',
                }]},{contant: [{
                    id: 9,
                    title: '分销体系',
                    contant: '快速解决多方分账难题；',
                },{
                    id: 10,
                    title: '会议营销',
                    contant: '以客户体验为导向，促进现场商机转化成交；',
                }]},{contant: [{
                    id: 11,
                    title: '金融分期',
                    contant: '缓解客户现金流压力，促进大额交易；',
                },{
                    id: 12,
                    title: '交易商城',
                    contant: '一站式管理客户资源，支持1V1线上交易；',
                }]}
        ],
        isActiveNext: true,
        report_list: [
            {
                id: 1,
                contant: '100+',
                title: '供应商品牌'
            },{
                id: 2,
                contant: '1万+',
                title: '已上线SKU'
            },{
                id: 3,
                contant: '1万+',
                title: '注册会员机构'
            },{
                id: 4,
                contant: '1亿+',
                title: '年度GMV'
            },
        ],
        community_video_list: [
            {
                id: 1,
                title: '美业企谈|西班牙ROSS中国区执行总裁评论——采美是第三方专业的美业采购平台',
                video: 'https://static.caimei365.com/www/video/video_01.mp4',
                bg: '/img/supplier-login/ROSS_1.jpg',
            },{
                id: 2,
                title: '美业企谈|米蓝米岚品牌负责人Mita评论——采美是综合性平台，是我们的优质伙伴',
                video: 'https://static.caimei365.com/www/video/video_02.mp4',
                bg: '/img/supplier-login/mp4_2.jpg',
            }
        ],
        community_article_list: [
            {
                id: 1,
                title: 'CRM是什么？',
                content: 'CRM（Customer Relationship Management）即客户关系管理。是指企业为提高核心竞争力，利用相应的信息技术以及互联网技术协调企业与顾客间在销售、营销和服务上的交互，从而提升其管理方式，向客户提供创新式的个性化的客户交互和服务的过程。其最终目标是吸引新客户、保留老客户以及将已有客户转为忠实客户，增加市场；',
                text: "<h1 style=\"text-align:center;\"><b id=\"fh8iz\">CRM是什么？</b></h1><div><b><br/></b></div><div><img src=\"https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVy32ASDdkAAGPgHDEXnM718.jpg\" contenteditable=\"false\"/></div><p><b></b></p><h1><b><br/></b></h1><h1><b id=\"flbl5\">一、CRM概述</b></h1><p><b></b></p><p><b><br/></b></p><p>CRM（Customer Relationship Management）即客户关系管理。是指企业为提高核心竞争力，利用相应的信息技术以及互联网技术协调企业与顾客间在销售、营销和服务上的交互，从而提升其管理方式，向客户提供创新式的个性化的客户交互和服务的过程。其最终目标是吸引新客户、保留老客户以及将已有客户转为忠实客户，增加市场；</p><p><br/></p><p><b></b></p><p><b>二、</b><b>采美CRM介绍</b></p><p><b><br/></b></p><p>采美CRM属于B2B 的管理系统。采美CRM能够将企业所有重要的客户数据和公司数据集中于一处，通过分析技术让企业团队同时拥有及时且准确的信息，进行商业决策，为客户带来所期望的便捷体验。采美CRM 帮助企业将所有人联系起来秉承一个共同的核心理念——[<b>以客户为中心</b>]</p><p><br/></p><p><img src=\"https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVzAqASzXzAAJNysRUpaQ438.jpg\" contenteditable=\"false\"/></p><p><br/></p><h1 id=\"fs5xd\"><b>二、</b><b>采美CRM功能有哪些?</b></h1><div><b><br/></b></div><p><b></b></p><p><b></b></p><p><b>1、市场营销管理</b><b></b></p><p><b><br/></b></p><p>根据不同潜在客户类型，进行客户画像分析，针对性进行营销推广，提高客户转化率。同时对客户来源系统性分析，提高营销推广投入产出比。</p><p><br/></p><p><b>2、客户资源和公海池管理</b><b></b></p><p>建立客户信息统一管理的平台，让客户档案既统一共享又严格分权避免撞单。可根据不同客户纬度进行分类，采取不同跟进和服务策略。</p><p><br/></p><p><b></b></p><p><b>3、销售过程管理</b><b></b></p><p><b><br/></b></p><p>日常客户跟进计划、商机管理、报价管理、合同管理、订单管理、产品管理、建立销售全过程一站式管理，360度客户查询，提高客户转化率。<u></u></p><p><br/></p><p><b>4、销售人员管理</b></p><p><b><br/></b></p><p>团队管理、拜访计划、拜访打卡、销售任务、日报总结、日程管理、日程协作提醒等，帮助销售更科学合理对客户进行管理和对团队工作的安排。</p><p><b><br/></b></p><p><b>5、销售协作管理</b></p><p><b><br/></b></p><p>商机项目协作、报价协作、合同执行协作、订单执行协作、客户回款/开票协作等。在提高团队配合度的同时，也提升了团队的效率，让销售团队得到有力支持，提升竞争力。</p><p><br/></p><p><b>6、销售业绩管理</b></p><p><b><br/></b></p><p>销售目标、销售计划、业绩达成、绩效考核、提成计算、销售利润、业绩预测、业绩排行榜；以结果为导向促进团队良性竞争，有助于企业健康发展。</p><p><br/></p><p><b>7</b><b>、售后服务管理</b></p><p><b><br/></b></p><p>客诉申请、受理跟进、处理过程跟进、结果反馈、满意度调查、客户回访、客户关怀等，提高客诉全过程效率，提升服务质量和客户满意度。</p>",
                bg: 'https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVy32ASDdkAAGPgHDEXnM718.jpg',
            },{
                id: 2,
                title: '常用广告营销模式',
                content: 'CPC (Cost-per-click)：每次点击的费用。根据广告被点击的次数收费。如关键词广告一般采用这种定价模式。以实际销售产品的提成来换算广告刊登金额。CPS是按照广告点击之后产生的实际销售的提成付给广告站点销售提成费用。',
                text: "<h2 style=\"text-align:center;\"><b>常用广告营销模式</b><b></b></h2><div><b><br/></b></div><div><img src=\"https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVy1KAUVmPAAG49WBQULU957.jpg\" contenteditable=\"false\"/></div><p><b></b></p><p><br/></p><p><!--[if-->l&nbsp;<!--[endif]--><b>CPC (Cost-per-click)：</b>&nbsp;每次点击的费用。根据广告被点击的次数收费。如关键词广告一般采用这种定价模式。<u><br/></u></p><p><br/></p><p><!--[if-->l&nbsp;<!--[endif]--><b>CPS(Cost Per Sales)：</b>以实际销售产品的提成来换算广告刊登金额。CPS是按照广告点击之后产生的实际销售的提成付给广告站点销售提成费用。</p><p><br/></p><p><!--[if-->l&nbsp;<!--[endif]--><b>CPA (Cost-per-Action) ：</b>每次行动的费用，即根据每个访问者对网络广告所采取的行动收费的定价模式。对于用户行动有特别的定义，包括形成一次交易、获得一个注册用户、或者对网络广告的一次点击等。</p><p><br/></p><p><!--[if-->l&nbsp;<!--[endif]--><b>CPM（Cost per Thousand Impressions）：</b>每千次印象费用。广告条每显示1000次（印象）的费用。CPM是最常用的网络广告定价模式之一。</p><p><br/></p><p><!--[if-->l&nbsp;<!--[endif]--><b>CPO (Cost-per-Order)：</b>也称为Cost-per-Transaction，即根据每个订单/每次交易来收费的方式。</p><p><br/></p><p><!--[if-->l&nbsp;<!--[endif]--><b>PPS（Pay-per-Sale）</b><b>：</b>根据网络广告所产生的直接销售数量而付费的一种定价模式 。</p><p><br/></p><p><b></b></p><p><!--[if-->l&nbsp;<!--[endif]--><b>PPC（Pay-per-Click）：</b>是根据点击广告或者电子邮件信息的用户数量来付费的一种网络广告定价模式。</p><p><br/></p><p><!--[if-->l&nbsp;<!--[endif]--><b>PPL（Pay-per-Lead）：</b>根据每次通过网络广告产生的引导付费的定价模式。例如，广告客户为访问者点击广告完成了在线表单而向广告服务商付费。这种模式常用于网络会员制营销模式中为联盟网站制定的佣金模式。</p><p><br/></p><h1></h1><p><!--[if--><span>l<span>&nbsp;</span></span><!--[endif]--><b><font>CPTM (Cost per Targeted Thousand Impressions)：</font></b><font>经过定位的用户（如根据人口统计信息定位）的千次印象费用。</font><font>CPTM与CPM的区别在于，CPM是所有用户的印象数，而CPTM只是经过定位的用户的印象</font></p>",
                bg: "https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRWFMWAFCDWAAUJJuJZUZM753.jpg",
            },{
                id: 3,
                title: 'SEO关键词策划怎么做?',
                content: 'SEO是搜索引擎优化（Search Engine Optimization）的英文缩写，中文译为“搜索引擎优化”。在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化',
                text: "<h2 style=\"text-align:center;\"><b>SEO关键词策划怎么做?</b><b></b></h2><div><b><br/></b></div><h1><b id=\"ajfcf\">一、什么是SE0？</b></h1><p><b></b></p><p><b><br/></b></p><p>SEO是搜索引擎优化（Search Engine Optimization）的英文缩写，中文译为“搜索引擎优化”。在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，获得更多流量，从而达成网站销售及品牌建设的预期目标。</p><p><img src=\"https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVyq6Ae1sWAAD3Z9P2P0I342.png\" contenteditable=\"false\"/></p><p><br/></p><h1><b id=\"dhy3f\">二、SEO关键词策划</b></h1><p><b></b></p><p><b><br/></b></p><p>SEO关键词策划是指通过研究目标受众搜索意图和关键词，制定优化网站的关键词策略以提高网站在搜索引擎上的排名和可见度。以下是SEO关键词策划的步骤：</p><p><br/></p><p><!--[if-->1.&nbsp;<!--[endif]--><b>市场调研：</b><b></b></p><p><b><br/></b></p><p>通过市场调查和竞争对手分析，了解目标受众的需求和搜索习惯，寻找潜在的关键词。</p><p><br/></p><p><!--[if-->2.&nbsp;<!--[endif]--><b>关键词研究：</b><b></b></p><p><b><br/></b></p><p>通过网站分析等工具，筛选出与网站主题相关的高质量和低竞争度的关键词。</p><p><b></b></p><p><br/></p><p><!--[if-->3.&nbsp;<!--[endif]--><b>关键词选择：</b><b></b></p><p><b><br/></b></p><p>选择关键词必须坚持：有关联性——即与品牌相关关、与目标群体相关。相关性越高，被用户搜索到的可能性也越大；主要从品牌、产品和服务这三个方面来进行关键词选择。其中品牌关键词是指直接能够引起用户对于某一具体品牌产生认知度的关键词，通常是一个或者几个字。</p><p><br/></p><p><b></b></p><p><!--[if-->4.&nbsp;<!--[endif]--><b>监测与优化：</b><b></b></p><p><b><br/></b></p><p>定期监测网站的排名和流量，并不断优化关键词。关键词的优化，离不开内容，即发布的内容要时刻与关键词保持高度粘性，以提高搜索引擎排名和更好地满足目标受众的需求。</p>",
                bg: 'https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVyq6Ae1sWAAD3Z9P2P0I342.png',
            },{
                id: 4,
                title: '传统营销和数字化营销',
                content: '传统营销是指使用传统媒体（如电视广告，广播广告和报纸广告）来向客户推广产品或服务。它主要依赖于代理商、中介和广告商来执行和管理各种传媒渠道的营销策略。',
                text: "<p><b>一、什么是传统营销？</b><br/></p><p><b></b></p><p><b><br/></b></p><p>传统营销是指使用传统媒体（如电视广告，广播广告和报纸广告）来向客户推广产品或服务。它主要依赖于代理商、中介和广告商来执行和管理各种传媒渠道的营销策略。传统营销还包括直邮，促销和广告等。</p><p><img src=\"https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVyn6AaS32AAFQ2sc7xQw877.jpg\" contenteditable=\"false\"/></p><p><br/></p><p><b>二、什么是数字化营销？</b><b></b></p><p><b><br/></b></p><p>数字化营销是指营销人员使用数字技术来执行和管理各种营销策略。这种营销策略可以使用数字广告、搜索引擎优化、社交媒体、电子邮件、短信营销以及各种互联网营销手段来提升销售线索和转化率。</p><p><img src=\"https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVyhiADiw8AACgctTDEiw015.jpg\" contenteditable=\"false\"/></p><p><b><br/></b></p><p><b>三、</b><b>传统营销和数字化营销的主要区别：</b></p><p><b><br/></b></p><p><b>1. 目标受众不同：</b>传统营销通常面向广泛的群体，而数字化营销可以更加精细地找到目标受众。</p><p><br/></p><p><b>2. 营销方式不同：</b>传统营销主要依赖于广告、传媒，而数字化营销则大量依赖各种数字媒体渠道。</p><p><br/></p><p><b>3. 成本不同：</b>传统营销成本较高，而数字化营销成本较低。</p><p><br/></p><p><b>4. 实时性不同：</b>数字化营销可以立即得到反馈，传统营销的反馈较慢。</p><p><br/></p><p><b>5. 数据收集不同：</b>数字化营销不仅能够收集客户数据，还能够分析这些数据，而传统营销无法如此精细地进行数据收集和分析。</p><p><br/></p><p><b>四、为什么要做数字营销</b><img src=\"https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVyoiASeeXABJYASZOpO8855.png\" contenteditable=\"false\" style=\"font-size: 14px;\"/></p><br/>",
                bg: 'https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVyn6AaS32AAFQ2sc7xQw877.jpg',
            },
        ],
        contain_list: [
            {
                id: 1,
                title: '品牌店铺搭建',
                content: '轻松开启线上交易',
            },{
                id: 2,
                title: '品牌展露',
                content: '彰显品牌实力',
            },{
                id: 3,
                title: '商品SKU管理',
                content: '提高决策效率',
            },
        ],
        athor_contain_list: [
            {
                id: 1,
                title: '易装易用免维护',
                content: '独立后台账号体系、会打字就会用、公众号无缝衔接',
            },{
                id: 2,
                title: '授权认证功能',
                content: '机构认证查询、设备认证查询、医师认证查询',
            },{
                id: 3,
                title: '品牌运营',
                content: '与机构客户建立双向沟通渠道',
            },
        ],
        el_carousel_list: [
            {
                id: 1,
                title: '私域流量运营难',
                content: "来自西班牙的明星品牌，在进入中国市场后行了大量的运营资源投放，却依旧无法精准触达用户、回收市场数据。</br>采美采用B2B2C私域运营模式对该品牌及竞品进行全面分析，对比两者之间的优势和劣势，为需要宣传的品牌进行关键词组布局，在采美商城优先进行品牌曝光度。</br>并通过认证通、采美社群等工具，向B端客户推送相关活动，刺激B端客户向C端客户进一步传播品牌形象和实力，从而吸引更多的B端客户来访；采美CRM系统对来访客户做用户行为轨迹跟踪，完善用户画像，帮助品牌精准获取客户资料，筛选出优质客户。</br>既提高该品牌的知名度，又保证了用户数据的精准度。",
                bg: '/img/supplier-login/SuccessCases/success_1.jpg',
            },{
                id: 2,
                title: '营销获客难',
                content: '连续七年专注敏感肌肤的皮肤管理品牌,在法国荣获全球护肤品创新品牌大奖，品牌实力不容小觑，但由于对B端机构宣传不足,在营销获客上十分艰难。</br>采美团队通过前期市场调研分析后提炼了B端关键词并进行布局，将品牌专利技术的相关内容在采美媒体矩阵同步分发，最终形成全渠道、全链路整合内容营销；将旗下产品搭配导入仪器做联合活动，双向锁定潜在客户，客户询盘量显著增长，解决了单一产品销售难的问题。</br>',
                bg: '/img/supplier-login/SuccessCases/success_2.jpg',
            },
        ],
        userInfo: JSON.parse(localStorage.getItem('userInfo')) || '',
        showContent: true,
        textContent: '',
    },
    created() {},
    mounted() {
        // this.getPageSnap()
        this.goLinkActive()
    },
    filters: {
        textSubString(val, index) {
            if (val.length > index) {
                let value = val.substring(0, index)
                return value + '...'
            }
            return val
        }
    },
    computed: {},
    methods: {
        // 滚动事件
        getPageSnap() {
            const fullPage = this.$refs.fullPage
            if(fullPage) {
                fullPage.addEventListener('mousewheel', (e) => this.scrollChange(e))
            }
        },
        goLinkActive() {
            const sections = document.querySelectorAll('.section')
            const nav_link_item = this.$refs.nav_link_item
            sections.forEach((item, index) => {
                const observer = new IntersectionObserver((mutation) => {
                    const status = mutation[0].isIntersecting
                    if (status) {
                        this.activeLinkId = index
                        nav_link_item.style.left = index * 6 +'vw'
                    }
                })
                observer.observe(item)
            })
        },
        // 滚动函数
        scrollChange(e) {
            if (this.showContent) {
                e = e || window.event
                if (this.countNum) {
                    this.countNum = false
                    if (e.wheelDelta > 0) {
                        this.activeLinkId--
                    } else {
                        this.activeLinkId++
                    }
                    this.trumpLink()
                    setTimeout(() => {
                        this.countNum = true
                    }, 1000)
                }
            }
        },
        // 链接动画跳转
        trumpLink() {
            setTimeout(() => {
                this.activeId = this.activeLinkId
            }, 800)
            const nav_link_item = this.$refs.nav_link_item
            if (this.activeLinkId >= 0 && this.activeLinkId<=6) {
                nav_link_item.style.left = this.activeLinkId  * 6 +'vw'
            } else if(this.activeLinkId < 0) {
                this.activeLinkId = 0
                nav_link_item.style.left = '0'
            } else if(this.activeLinkId > 6) {
                this.activeLinkId = 7
                nav_link_item.style.left = '36vw'
            }
        },
        // 切换链接跳转
        handlerNav(options) {
            const nav_link_item = this.$refs.nav_link_item
            this.activeLinkId = options.id
            nav_link_item.style.left = options.id * 6 +'vw'
            setTimeout(() => {
                this.showContent = true
            }, 100)
            this.activeId = this.activeLinkId
        },
        // 移入动画
        mouseTitle(e) {
            const container_title_1 = this.$refs.container_title_1
            const container_title_2 = this.$refs.container_title_2
            const container_title_3 = this.$refs.container_title_3
            this.opacityTitle()
            if(e < 2) {
                container_title_1.style.opacity = 1
            }
            if(e===2 || e===3) {
                container_title_2.style.opacity = 1
            }
            if(e > 3) {
                container_title_3.style.opacity = 1
            }
        },
        opacityTitle() {
            const container_title_1 = this.$refs.container_title_1
            const container_title_2 = this.$refs.container_title_2
            const container_title_3 = this.$refs.container_title_3
            container_title_1.style.opacity = 0
            container_title_2.style.opacity = 0
            container_title_3.style.opacity = 0
        },
        changeModeAuthor() {
            this.isAthor = !this.isAthor
            this.isStore = !this.isStore
        },
        // 轮播切换
        nextPageCar() {
            this.isActiveNext = true
            this.$refs.carousel.prev()
        },
        prePageCar() {
            this.isActiveNext = false
            this.$refs.carousel.next()
        },
        // 播放器
        playerOff() {
            this.$refs.Myplayer.style.display = 'none'
            this.$refs.cm_player.play()
        },
        playerOn(src) {
            this.$refs.Myplayer.style.display = 'flex'
            this.$refs.cm_player.src = src
            this.$refs.cm_player.play()
        },
        pageLinkSupplier: function(){//预览商品
            window.open('/supplier-'+this.userInfo.shopId+'.html');
        },
        // 退出登录
        userLogOut: function(){
            localStorage.removeItem('userInfo');
            this.delBaseCookie("loginBeforePath");
            window.location.href = "/supplier-login/index.html";
        },
        delBaseCookie(cname){
            let exp = new Date();
            exp.setTime(exp.getTime() - 1);
            let cval = this.getBaseCookie(cname);
            if(cval!=null) {
                document.cookie= cname + "="+cval+";expires="+exp.toGMTString();
            }
        },
        getBaseCookie(cname){
            if (document.cookie) {
                let name = cname + "=";
                let ca = document.cookie.split(';');
                for(let i=0; i<ca.length; i++) {
                    let c = ca[i].trim();
                    if (c && c.indexOf(name)===0) {
                        return c.substring(name.length,c.length);
                    }
                }
            }
            return "";
        },
        textInfo(id) {
            const fullPage = this.$refs.fullPage
            fullPage.removeEventListener('mousewheel', (e) => this.scrollChange(e))
            const textInfoForm = this.community_article_list.filter(item => item.id === id)

            this.textContent = textInfoForm[0]
            if(localStorage.getItem('text_info_from')) {
                localStorage.removeItem('text_info_from')
            }
            localStorage.setItem('text_info_from', JSON.stringify(this.textContent))
            window.location.href = '/supplier-login/text_info.html'
        },
        goToIndex() {
            window.location.href = '/'
        },
        // 解决方案会员开通
        obstacles() {
            window.location.href = '/supplierlogin.html'
        },
        // 解决方案
        selectionQus() {
            this.$alert('如有需要，可通过右下角电话或微信联系客服', '提示', {
                confirmButtonText: '确定',
                callback: action => {}
            });
        },
    },
})