Explorar o código

数据报表查看权限

zhengjinyi hai 1 ano
pai
achega
fe82ff26c8

+ 8 - 0
src/main/java/com/caimei/www/controller/authorized/supplier/SupplierPageController.java

@@ -108,6 +108,8 @@ public class SupplierPageController extends BaseController {
     private static final String ENCYCLOPEDIA_PREVIEW = "supplier-center/encyclopedia/preview";
     /** 供应商采美数据报表页面 */
     private static final String SHOP_CHARTS = "supplier-center/encyclopedia/charts";
+    /** 供应商采美数据报表页面 */
+    private static final String CHARTS_PREVIEW = "supplier-center/encyclopedia/charts-preview";
 
     /** 我的采美 */
     @GetMapping("/supplier/dashboard.html")
@@ -364,6 +366,12 @@ public class SupplierPageController extends BaseController {
         return SHOP_CHARTS;
     }
 
+    /** 意向客户数据汇总 */
+    @GetMapping("/charts-preview.html")
+    public String chartsPreview(){
+        return CHARTS_PREVIEW;
+    }
+
     /*
     // 供应商采美百科商品列表页面
     @GetMapping("/supplier/encyclopedia/product-list.html")

+ 163 - 0
src/main/resources/static/css/supplier-center/encyclopedia/charts-preview.css

@@ -0,0 +1,163 @@
+/*PC端**/
+ @media screen and (min-width:768px) {
+  body{background-color: #F5F5F5;}
+  header{box-shadow: none;position: fixed;width: 100%;z-index: 99;}
+  table, td, th{border: none;}
+  .chartHeadCenter{ width: 100%;height: 100px;background: #FFFFFF;box-sizing: border-box;padding: 25px 0 10px 0; }
+  .chartHeadCenter.account .header-logo{ width: 33.33%;float: left;}
+  .chartHeadCenter .logo{ width: auto;height: 52px; margin-right: 20px;border-right: 1px solid #e1e1e1;box-sizing: border-box;padding-right:16px;float: left;}
+  .chartHeadCenter .logo.none{border-right: none;}
+  .chartHeadCenter .logo.none img{width: auto;height: 52px;display: block;}
+  .header-title{width: 33.33%;float: left;}
+  .header-title p{line-height: 24px;font-size: 24px;color: #333333;font-weight: bold;text-align: center;}
+  .header-title p.small{line-height: 30px;font-size: 16px;color: #666666;font-weight: normal;text-align: center}
+  .header-time{width: 33.33%;height:100%;float: right;box-sizing: border-box;text-align: right; }
+  .charts-login{ width: 100%;height: 600px;padding: 80px 0;margin:0 auto;box-sizing: border-box;}
+  .charts-login-form{ width: 100%;height: 100%; box-sizing: border-box;padding:100px 500px;background: url("/img/encyclopedia/chart/charts-bg@2x.png"); }
+
+  .chart-content{width: 1200px;margin: 0 auto;padding-top: 100px;min-height: 600px;}
+  .chart-content-empty{ width: 100%;height: 600px; box-sizing: border-box;padding: 100px 0;margin-top:30px;text-align: center;color: #4A4F58;line-height: 30px;font-size: 16px;background: #FFF; }
+  .chart-content-empty img{ width: 260px;height: 200px; }
+  .chart-content-empty p{color: #999999; }
+  .chart-content .chart-title{ width: 100%;float: left; line-height: 80px;font-size: 24px;color: #333333;font-weight: bold;}
+  .chart-content .chart-title span{line-height: 80px;font-size: 16px;color: #333333;font-weight: normal;}
+  .chart-content-text{ min-height: 100px;width: 100%;box-sizing: border-box;padding: 24px;background: #FFFFFF;float: left;margin-bottom: 16px; }
+  .chart-content-text h1,.chart-content-text p{font-size: 14px;color: #666666;line-height: 28px;}
+  .chart-content-main{width: 100%;height: auto;float: left;margin-bottom: 16px;}
+  .chart-main-top{width: 100%;height: 520px; margin-top: 16px;box-sizing: border-box;padding: 57px;background: #FFFFFF;}
+  .chart-main-top-title{ width: 100%;line-height: 40px;font-size: 24px;font-weight: bold;color: #333333;text-align: center;margin-bottom:30px;}
+  .chart-main-top-main{ width: 100%;height: 324px; }
+  .chart-main-top-left{width: 340px;height: 100%; float: left;}
+  .chart-main-top-left-li{ width: 100%;height: 63px;float: left;box-sizing: border-box;border-left: 3px solid #FFFFFF;margin-bottom: 2px;}
+  .chart-main-top-left-li .li-title{ float: left;line-height: 63px;font-size: 18px;font-weight: bold;color: #333333;box-sizing: border-box;padding: 0 10px;margin-right: 14px;text-align: center;}
+  .chart-main-top-left-li .li-texts{ width: 240px;box-sizing: border-box;height: 63px;padding: 10px 0;float: left;}
+  .chart-main-top-left-li .li-texts.min{width: 182px;}
+  .chart-main-top-left-li .li-texts.none p{line-height: 43px;}
+  .chart-main-top-left-li .li-texts p{ line-height: 22px;font-size: 14px;color: #666666;}
+  .chart-main-top-left-li.a{border-color: #73C0DE;background: linear-gradient(89deg, #E1F6FE 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.b{border-color: #EE6666;background: linear-gradient(88deg, #FFECEC 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.c{border-color: #5470C6;background: linear-gradient(87deg, #E6ECFF 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.d{border-color: #91CC75;background: linear-gradient(87deg, #EEFEE7 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.e{border-color: #FAC858;background: linear-gradient(88deg, #FFF5DF 0%, #FFFFFF 100%);}
+  .chart-main-top-mids{width: 400px;height: 100%;float: left; }
+  .chart-main-top-mids-li{width: 100%;height: 64px;margin-bottom: 2px;}
+  .chart-main-top-mids-ch{margin: 0 auto; height: 100%;line-height: 64px;display: block;font-size: 16px;color: #ffffff;text-align: center;position: relative;transition:all 0.5s;}
+  .chart-main-top-mids-li:hover .chart-main-top-mids-ch{transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);color: #FFFFFF;}
+  .chart-main-top-mids-ch.a{ background: url("/img/encyclopedia/chart/chart_a@2x.png");}
+  .chart-main-top-mids-ch.b{width: 320px; background: url("/img/encyclopedia/chart/chart_b@2x.png");}
+  .chart-main-top-mids-ch.c{width: 240px; background: url("/img/encyclopedia/chart/chart_c@2x.png");}
+  .chart-main-top-mids-ch.d{width: 160px; background: url("/img/encyclopedia/chart/chart_d@2x.png");}
+  .chart-main-top-mids-ch.e{width: 80px; background: url("/img/encyclopedia/chart/chart_e@2x.png");}
+  .chart-main-top-right{width: 312px;height: 100%;float: left;margin-left: 34px; }
+  .chart-main-top-right-li{ width: 100%; height: 110px;box-sizing: border-box;padding: 22px 0 14px 0;border-bottom: 1px solid #E1E1E1; float: left;}
+  .chart-main-top-right-tips {width: 100%;height: 36px;margin-bottom: 10px; }
+  .chart-main-top-right-tips .tips{ display: inline-block;border-radius: 4px; box-sizing: border-box;padding: 0 10px;font-size: 18px;line-height: 36px;color: #333333;text-align: center;font-weight: bold;}
+  .chart-main-top-right-tips .tips.a{ background: #73C0DE; }
+  .chart-main-top-right-tips .tips.b{ background: #5470C6; }
+  .chart-main-top-right-tips .tips.c{ background: #91CC75; }
+  .chart-main-top-right-li p{ font-size: 14px;line-height: 22px;color: #666666; }
+
+  .chart-main-bot{width: 100%;height: auto;box-sizing: border-box;padding: 20px 0;background: #FFFFFF;}
+  .chart-main-top img{width: 100%;height: auto;}
+  .chart-main-bot img{width: 792px;height: 203px;display: block;margin: 0 auto; }
+  .chart-main-box{width: 592px;height: 420px;background: #FFFFFF;box-sizing: border-box;padding: 24px;}
+  .chart-main-box.le{float: left;}
+  .chart-main-box.ri{float: right;}
+  .chart-main-min{width: 592px;height: 320px;background: #FFFFFF;box-sizing: border-box;padding: 24px;}
+  .chart-main-min-title{width: 100%;line-height: 28px;font-size: 18px;font-weight: bold;color: #666666;margin-bottom: 20px;}
+  .chart-main-max{width: 100%;min-height: 485px;background: #FFFFFF;box-sizing: border-box;padding: 24px;}
+  .chart-main-max.table{min-height: 620px;}
+  .chart-main-max.min{min-height: 480px;}
+  .chart-main-max.mins{min-height: 255px;}
+  .chart-main-min.le{float: left;}
+  .chart-main-min.ri{float: right;}
+  .chart-main-468{width: 468px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: left;}
+  .chart-main-568{width: 568px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: left;}
+  .chart-main-568 img{width: 100%;height: 100%;display: block;}
+  .chart-main-300{width: 300px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: right;margin-left: 16px;}
+  .chart-main-400{width: 400px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: right;margin-left: 16px;}
+  .chart-main-390{width: 390px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: left;margin-right: 15px;}
+  .chart-main-390.none{margin-right: 0;}
+  footer{width: 100%;float: left;}
+  #scrollTop .item .phone{ display: none; }
+  #scrollTop .item .Iphone{ display: none; }
+
+}
+
+/*移动端**/
+ @media screen and (max-width:768px){
+  body{background-color: #F5F5F5;}
+  header{box-shadow: none;width: 100%;z-index: 99;}
+  footer{display: none;}
+  table, td, th{border: none;}
+  .chartHeadCenter{ width: 100%;height: auto;background: #FFFFFF;box-sizing: border-box;padding: 2vw; }
+  .chartHeadCenter.account .wrap{}
+  .chartHeadCenter .logo{ width: 24vw;height: auto; margin-right: 4vw;border-right: 1px solid #e1e1e1;box-sizing: border-box;padding-right:4vw;float: left;}
+  .chartHeadCenter .logo.none{border-right: none;}
+  .chartHeadCenter .logo.none img{width: auto;height: 12vw;display: block;}
+  .header-logo{float: left;width: 100%;margin-bottom: 3vw;}
+  .header-title{float: left;width: 100%;height: 10vw;}
+  .header-title p{line-height: 10vw;font-size: 4vw;color: #333333;font-weight: bold;float: left;}
+  .header-title p.small{font-size: 3.4vw;color: #666666;font-weight: normal;}
+  .header-time{width: 100%;height:100%;float: left;box-sizing: border-box; }
+  .charts-login{ width: 100%;height: 190vw;padding:41vw 12vw;box-sizing: border-box;}
+  .charts-login-form{ width: 76vw;height: 82vw; box-sizing: border-box;padding:15vw 7vw;background: url("/img/encyclopedia/chart/charts-bg-h5@2x.png"); background-size: cover;}
+
+
+  .chart-content{width: 100%;margin: 0 auto;margin-top:0;}
+  .chart-content-empty{ width: 100%;height: 190vw; box-sizing: border-box;padding: 50vw 0;text-align: center;color: #4A4F58;background: #FFF; }
+  .chart-content-empty img{ width: 40vw;height: auto; }
+  .chart-content-empty p{color: #999999; line-height: 10vw;font-size:3.2vw;}
+  .chart-title{ width: 100%;float: left; line-height: 8vw;font-size: 4.6vw;color: #333333;font-weight: bold;box-sizing: border-box;padding: 0 3vw;background: #FFFFFF;}
+  .chart-title span{line-height: 8vw;font-size: 3.4vw;color: #333333;font-weight: normal;}
+  .chart-content-text{ min-height: 60vw;width: 100%;box-sizing: border-box;padding: 3vw;background: #FFFFFF;float: left;margin-bottom: 4vw; }
+  .chart-content-text h1,.chart-content-text p{font-size: 3.4vw;color: #666666;line-height: 6vw;}
+  .chart-content-main{width: 100%;height: auto;float: left;margin-bottom: 3vw;}
+  .chart-main-top{width: 100%;height: auto; margin-top: 3vw;box-sizing: border-box;padding:0 3vw 3vw 3vw;background: #FFFFFF;}
+  .chart-main-top-title{ width: 100%;line-height: 10vw;font-size: 4vw;font-weight: bold;color: #333333;text-align: center;margin-bottom:3vw;}
+  .chart-main-top-main{ width: 100%;height: auto;  display: flex;flex-direction: column; }
+  .chart-main-top-left{width: 100%;height: auto; float: left;margin-bottom: 5vw;}
+  .chart-main-top-left-li{ width: 100%;height: 14vw;float: left;box-sizing: border-box;border-left: 3px solid #FFFFFF;margin-bottom: 2px;}
+  .chart-main-top-left-li .li-title{ float: left;line-height: 14vw;font-size: 3.6vw;font-weight: bold;color: #333333;box-sizing: border-box;padding: 0 10px;margin-right: 3vw;text-align: center;}
+  .chart-main-top-left-li .li-texts{ width: 70vw;box-sizing: border-box;height: 14vw;padding: 2vw 0;float: left;}
+  .chart-main-top-left-li .li-texts.min{width: 58vw;}
+  .chart-main-top-left-li .li-texts.none p{line-height: 43px;}
+  .chart-main-top-left-li .li-texts p{ line-height: 22px;font-size: 14px;color: #666666;}
+  .chart-main-top-left-li.a{border-color: #73C0DE;background: linear-gradient(89deg, #E1F6FE 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.b{border-color: #EE6666;background: linear-gradient(88deg, #FFECEC 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.c{border-color: #5470C6;background: linear-gradient(87deg, #E6ECFF 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.d{border-color: #91CC75;background: linear-gradient(87deg, #EEFEE7 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.e{border-color: #FAC858;background: linear-gradient(88deg, #FFF5DF 0%, #FFFFFF 100%);}
+  .chart-main-top-mids{width: 100%;height: auto;order: -1; margin-bottom: 4vw;}
+  .chart-main-top-mids-li{width: 100%;height: 12.6vw;margin-bottom: 2px;}
+  .chart-main-top-mids-ch{margin: 0 auto; height: 100%;line-height: 12.6vw;display: block;font-size: 3.4vw;color: #ffffff;text-align: center;position: relative;transition:all 0.5s;}
+  .chart-main-top-mids-li:hover .chart-main-top-mids-ch{transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);color: #FFFFFF;}
+  .chart-main-top-mids-ch.a{width: 81.6vw;background: url("/img/encyclopedia/chart/chart_h5_a@2x.png");background-size: cover;}
+  .chart-main-top-mids-ch.b{width: 64vw; background: url("/img/encyclopedia/chart/chart_h5_b@2x.png");background-size: cover;}
+  .chart-main-top-mids-ch.c{width: 47.5vw; background: url("/img/encyclopedia/chart/chart_h5_c@2x.png");background-size: cover;}
+  .chart-main-top-mids-ch.d{width: 31.4vw; background: url("/img/encyclopedia/chart/chart_h5_d@2x.png");background-size: cover;}
+  .chart-main-top-mids-ch.e{width: 15.6vw; background: url("/img/encyclopedia/chart/chart_h5_e@2x.png");background-size: cover;}
+  .chart-main-top-right{width: 100%;height: auto;float: left;}
+  .chart-main-top-right-li{ width: 100%; height: auto;box-sizing: border-box;padding: 3vw 0 2vw 0;border-bottom: 1px solid #E1E1E1; float: left;}
+  .chart-main-top-right-tips {width: 100%;height: 7.2vw;margin-bottom: 3vw; }
+  .chart-main-top-right-tips .tips{ display: inline-block;border-radius: 1vw; box-sizing: border-box;padding: 0 2vw;font-size: 4.2vw;line-height:7.2vw;color: #333333;text-align: center;font-weight: bold;}
+  .chart-main-top-right-tips .tips.a{ background: #73C0DE; }
+  .chart-main-top-right-tips .tips.b{ background: #5470C6; }
+  .chart-main-top-right-tips .tips.c{ background: #91CC75; }
+  .chart-main-top-right-li p{ font-size: 3.4vw;line-height: 4vw;color: #666666; }
+
+  .chart-main-bot{width: 100%;height: auto;box-sizing: border-box;padding: 3vw ;background: #FFFFFF;}
+  .chart-main-top img{width: 100%;height: auto;}
+  .chart-main-bot img{width: 100%;height: auto;display: block;}
+  .chart-main-box{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
+  .chart-main-box.le{float: left;margin-bottom: 16px;}
+  .chart-main-box.ri{float: left;}
+  .chart-main-min{width: 100%;height: 42vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
+  .chart-main-max{width: 100%;min-height: 54vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
+  .chart-main-min.le{float: left;margin-bottom: 16px;}
+  .chart-main-min.ri{float: left;}
+  .chart-main-568{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
+  .chart-main-468{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
+  .chart-main-400{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
+  .chart-main-300{width: 100%;height: 60vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
+}

+ 5 - 1
src/main/resources/static/css/supplier-center/encyclopedia/charts.css

@@ -12,6 +12,8 @@
   .header-title p{line-height: 24px;font-size: 24px;color: #333333;font-weight: bold;text-align: center;}
   .header-title p.small{line-height: 30px;font-size: 16px;color: #666666;font-weight: normal;text-align: center}
   .header-time{width: 33.33%;height:100%;float: right;box-sizing: border-box;text-align: right; }
+  .loginWrap-title { width: 100%;height: 40px;line-height: 40px;text-align: center;font-size: 32px;color: #333333;font-weight: bold;margin-top: 30px; }
+  .loginWrap{ margin: 30px auto; }
   .chart-content{width: 1200px;margin: 0 auto;padding-top: 100px;min-height: 600px;}
   .chart-content-empty{ width: 100%;height: 600px; box-sizing: border-box;padding: 100px 0;margin-top:30px;text-align: center;color: #4A4F58;line-height: 30px;font-size: 16px;background: #FFF; }
   .chart-content-empty img{ width: 260px;height: 200px; }
@@ -97,7 +99,9 @@
   .header-title p{line-height: 10vw;font-size: 4vw;color: #333333;font-weight: bold;float: left;}
   .header-title p.small{font-size: 3.4vw;color: #666666;font-weight: normal;}
   .header-time{width: 100%;height:100%;float: left;box-sizing: border-box; }
-  .chart-content{width: 100%;margin: 0 auto;margin-top: 4vw;}
+  .loginWrap-title { width: 100%;height: 8vw;line-height: 8vw;text-align: center;font-size: 4.2vw;color: #333333;font-weight: bold;margin-top: 0; background: #FFFFFF;}
+  .loginWrap{ margin: 0 auto;width: 100%;height: 190vw;background: #FFFFFF; }
+  .chart-content{width: 100%;margin: 0 auto;margin-top: 0;}
   .chart-content-empty{ width: 100%;height: 190vw; box-sizing: border-box;padding: 50vw 0;text-align: center;color: #4A4F58;background: #FFF; }
   .chart-content-empty img{ width: 40vw;height: auto; }
   .chart-content-empty p{color: #999999; line-height: 10vw;font-size:3.2vw;}

BIN=BIN
src/main/resources/static/img/encyclopedia/chart/charts-bg-h5@2x.png


BIN=BIN
src/main/resources/static/img/encyclopedia/chart/charts-bg@2x.png


+ 115 - 0
src/main/resources/static/js/supplier-center/encyclopedia/charts-preview.js

@@ -0,0 +1,115 @@
+/**
+ * Created by xw on 2023/10/31.
+ */
+const chartContent = new Vue({
+    el:"#chartContent",
+    mixins: [chartsMixin,shareLoginMixin],
+    data: {
+        shopId:0,
+        volumeList:[],
+        bannerList:[],
+        keywordList:[],
+        shopInfo:{},
+        summarize:'',
+        summarize1:'',
+        summarize2:'',
+        isLoading:false,
+        isPreview:true,
+        isChartEmpty:false,
+        queryParams:{
+            type:2,
+            shopId:'',
+            marketReportId:'',
+            startTime:'',
+            endTime:''
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+        openFullScreen2() {
+            const _this = this
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading',
+                spinner: 'el-icon-loading',
+                background: 'rgba(255, 255, 255, 1)'
+            });
+            setTimeout(() => {
+                _this.isLoading = true
+                loading.close();
+            }, 1000);
+            setTimeout(() => {
+                _this.shopChartPreview()
+            }, 1100);
+        },
+        // 选择时间
+        handleDatePick() {
+            if (this.dataTime && this.dataTime.length > 0) {
+                this.queryParams.startTime = this.dataTime[0]
+                this.queryParams.endTime = this.dataTime[1]
+            } else {
+                this.queryParams.startTime = ''
+                this.queryParams.endTime = ''
+            }
+            this.shopChartPreview()
+        },
+        shopChartPreview(){
+            const _self = this;
+            SupplierApi.shopChartPreview(this.queryParams,function (response) {//列表初始化
+                if(response.code===0){
+                    if(response.data.code === 0){
+                        _self.isChartEmpty = false
+                        setTimeout(() => {
+                            _self.chartInit(response.data)
+                        }, 500);
+                    }else{
+                        _self.isChartEmpty = true
+                    }
+                }
+            })
+        },
+        chartInit(data){
+            this.yearMonth =  data.yearMonth
+            this.volumeList =  data.volumeList
+            this.bannerList =  data.bannerList
+            this.shopInfo =  data.shopInfo
+            this.summarize =  data.summarize
+            this.summarize1 =  data.summarize1
+            this.summarize2 =  data.summarize2
+            this.keywordList =  data.keywordList
+            this.chartWechats( data.wechats,this.shopInfo.shopName)
+            this.chartIntention( data.intention,this.shopInfo.shopName)
+            this.chartAllVisits( data.allVisits,this.shopInfo.shopName)
+            this.chartProportion( data.proportion,this.shopInfo.shopName)
+            this.chartStationVisits( data.stationVisits,this.shopInfo.shopName)
+            this.chartVisitTimes( data.visitTimes,this.shopInfo.shopName)
+            this.chartLeadUserMonthly( data.leadUserMonthly,this.shopInfo.shopName)
+            this.chartChannels( data.channels,this.shopInfo.shopName)
+            this.chartUrbanize( data.urbanize,this.shopInfo.shopName)
+            this.chartUserIdentity( data.userIdentity,this.shopInfo.shopName)
+            // this.chartIntentions( data.intentions)
+            // this.chartWordCloud(this.chartData[shopId].keywords)
+            $('.chart-main-top-mids-li').find('a').on('click', function () {
+                const id = '#' + $(this).attr('data-id');
+                const scrollTop = innerWidth > 768 ? $(id).offset().top : $(id).offset().top ;
+                $("html, body").animate({
+                    scrollTop: scrollTop
+                }, {duration: 500, easing: "swing"});
+                return false;
+            })
+        }
+    },
+    created: function () {
+
+    },
+    mounted: function () {
+        this.queryParams.shopId = getUrlParam("shopId");
+        this.queryParams.marketReportId = getUrlParam("marketReportId") ? getUrlParam("marketReportId") : '';
+        this.queryParams.type = getUrlParam("type") ? getUrlParam("type") : 2;
+        this.isPreview = getUrlParam("type") !== '1'
+        // this.openFullScreen2()
+    }
+});
+

+ 11 - 2
src/main/resources/static/js/supplier-center/encyclopedia/charts.js

@@ -3,7 +3,7 @@
  */
 const chartContent = new Vue({
     el:"#chartContent",
-    mixins: [chartsMixin],
+    mixins: [chartsMixin,shopLoginMixin],
     data: {
         shopId:0,
         volumeList:[],
@@ -109,7 +109,16 @@ const chartContent = new Vue({
         this.queryParams.marketReportId = getUrlParam("marketReportId") ? getUrlParam("marketReportId") : '';
         this.queryParams.type = getUrlParam("type") ? getUrlParam("type") : 2;
         this.isPreview = getUrlParam("type") !== '1'
-        this.openFullScreen2()
+        if(globalUserData){
+            if(this.queryParams.shopId === globalUserData.shopId){
+                this.isShopLogin=false
+                this.openFullScreen2()
+            }else{
+                this.isShopLogin=false
+            }
+        }else{
+            this.isShopLogin=true
+        }
     }
 });
 

+ 50 - 0
src/main/resources/static/js/supplier-center/encyclopedia/mixins/shareLoginMixin.js

@@ -0,0 +1,50 @@
+const shareLoginMixin = function () {
+    return {
+        data() {
+            return {
+                isShareLogin:true,
+                isEfficacy:false,
+                form:{
+                    shareCode:'',
+                    shopOrderId:''
+                },
+                rules: {
+                    shareCode: [{required: true,message: '请输入预览码',trigger: 'blur'}]
+                }
+            }
+        },
+        computed: {
+            disabled() {
+                // 分享码长度是否符合要求
+                return this.form.shareCode.trim().length < 4
+            }
+        },
+        mounted () {
+
+        },
+        methods: {
+            handleConfirm(formName){
+                const _self = this;
+                this.$refs[formName].validate(async valid => {
+                    if (valid) {
+                        _self.isShareLogin= false
+                        _self.openFullScreen2()
+                        // _self.handleCheckOrderShareCode(_self.form)
+                    }
+                })
+            },
+            // 订单分享码校验
+            handleCheckOrderShareCode(params){
+                const _self = this;
+                SupplierApi.checkShopOrderShareCode(params,function (response) {
+                    if(response.code===0){
+                        window.location.href = '/order-share-details.html?shopOrderId='+response.data
+                    }else{
+                        _self.$message.error(response.msg)
+                    }
+                })
+            }
+        }
+    }
+}();
+

+ 277 - 0
src/main/resources/static/js/supplier-center/encyclopedia/mixins/shopLoginMixin.js

@@ -0,0 +1,277 @@
+// 登录
+var shopLoginMixin = function () {
+    return {
+        data() {
+            return {
+                isShopLogin:true,
+                isCodeModel:false,
+                isInputsTrue:true,
+                codeImagePath:'',
+                codeImageToken:'',
+                accountParams: {// 账号密码登录
+                    mobileOrEmail: '', //用户登录账号
+                    password: '', //用户登录密码
+                },
+                codeParams:{// 验证码登录
+                    mobile:'',
+                    code:''
+                },
+                smsCodeParams:{// 获取手机短信验证码
+                    mobile: '', //用户登录手机号
+                    token:'',
+                    imgCode:'',
+                    platformType:0,
+                    isCheckCaptcha:0,
+                    activateCodeType:7
+                },
+                maxtime:60,
+                loginLoading: false,
+                qrCodeLogin: false,
+                rule:{
+                    account: "(^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$)|(^\\d{6,12}$)",
+                    password: "^[^\\u4e00-\\u9fa5]{6,30}$",
+                    phone: '^\\d{6,12}$',
+                    code: '^\\d{6}$',
+                    mobile:'^1[1-9][0-9]{9}$'
+                },
+                userData: {
+                    account: '',
+                    email: '',
+                    phone: '',
+                    name: '',
+                    userName: '',
+                    userId: '',
+                    spId: '',
+                    clubId: '',
+                    shopId: '',
+                    identity: '',
+                    permission: '',
+                    token: ''
+                },
+                applyUse:{
+                    clubId: '',
+                    shopId: '',
+                    token:'',
+                },
+                isWeChat: false,
+                text:'',
+                stautsfalse:false,
+                infofalse:false,
+                isSlideFinishState:true,
+                loginTabs:0,
+                mobilCount:0,
+                mobileCodeText:'获取验证码',
+                mobilTime:null,
+                isMobileDisabled:false,
+                slideVerify:null
+            }
+        },
+        methods: {
+            handleSubLogin(){// 点击账号密码登录
+                const _self = this;
+                if (this.loginLoading) { return false; }
+                this.$nextTick(function(){
+                    if (!verifyForm()) { return false; }
+                    _self.loginLoading = true;
+                    UserApi.PostLoginAccount(_self.accountParams,function(response){
+                        _self.userUpdataeStatus(response)
+                    });
+                });
+            },
+            handleCodeLogin(){// 短信验证码登录
+                const _self = this;
+                if (this.loginLoading) { return false; }
+                this.$nextTick(function(){
+                    if (!verifyForm()) { return false; }
+                    _self.loginLoading = true;
+                    UserApi.userCodeLogin(_self.codeParams,function(response){
+                        _self.userUpdataeStatus(response)
+                    });
+                });
+            },
+            handleCheckMobile(){// 校验手机是否已注册
+                const _self = this;
+                if (!verifyCheack('.massageBtn')) { return false; }
+                if (this.isMobileDisabled) { return false; }
+                UserApi.userCheckePhone({mobile: this.smsCodeParams.mobile},function(response){
+                    if(response.code === 0){
+                        _self.handleShowImage();
+                    }else{
+                        setErrorTxt($('.massageBtn'),response.msg)
+                    }
+                })
+            },
+            handleShowImage() {//获取图形验证码
+                const _self = this;
+                PublicApi.getImgVerifyCode({platformType: 0},function(response){
+                    if(response.code === 0){
+                        _self.smsCodeParams.imgCode = '';
+                        _self.codeImagePath = response.data.baseImage;
+                        _self.smsCodeParams.token = response.data.token;
+                        _self.isCodeModel = true;
+                    }else{
+                        CAIMEI.Alert(response.msg,'确定',false);
+                    }
+                })
+            },
+            handleMobileCode(){// 点击获取短信验证码
+                const _self = this;
+                if( this.isMobileDisabled){ return }
+                this.$nextTick(function() {
+                    if (!verifyCheack('.codeMsgButton')) { return false; }
+                    UserApi.getRegisterMobileCode(_self.smsCodeParams,function (response) {
+                        if(response.code === 0){
+                            _self.isCodeModel = false;
+                            CAIMEI.dialog('获取验证码成功~',false,function () {});
+                            var TIME_COUNT = 60;
+                            if (!_self.mobilTime) {
+                                _self.mobilCount = TIME_COUNT;
+                                _self.isMobileDisabled = true;
+                                _self.mobilTime = setInterval(function(){
+                                    if (_self.mobilCount > 1 && _self.mobilCount <= TIME_COUNT) {
+                                        _self.mobilCount--;
+                                        _self.mobileCodeText = _self.mobilCount +'s';
+                                    } else {
+                                        _self.isMobileDisabled = false;
+                                        clearInterval(_self.mobilTime);
+                                        _self.mobilTime = null;
+                                        _self.mobileCodeText = '获取验证码';
+                                    }
+                                },1000)
+                            }
+                        }else{
+                            _self.handleShowImage();
+                            _self.isMobileDisabled = false;
+                            setErrorTxt($('.codeMsgButton'),response.msg)
+                        }
+                    })
+                })
+            },
+            handleRefreshCodeImage:function(){
+                this.handleShowImage()
+            },
+            handleCodeMobileInput(e){// 监听输入手机号
+                this.codeParams.mobile = this.smsCodeParams.mobile = e.target.value;
+                this.handleCheckInput()
+            },
+            handleCodeInput(e){// 监听输入短信验证码
+                this.codeParams.code = e.target.value;
+                this.handleCheckInput()
+            },
+            handleCheckInput() {// 控制按钮按钮高亮
+                this.isInputsTrue = !(this.codeParams.mobile !== '' && this.codeParams.code !== '')
+            },
+            handleCloseCodeModel:function(){
+                this.isCodeModel = false;
+            },
+            handleTabsClick(index){
+                const _self = this;
+                this.loginTabs = index;
+                clearAllErrorTxt($('input'));
+                if(index === 1){
+                    this.isSlideFinishState = true
+                    this.initSlideVerify()
+                }
+            },
+            handleHideBg(){
+                this.stautsfalse=false;
+            },
+            userUpdataeStatus(response){// 更新登录
+                const _self = this;
+                _self.loginLoading = false;
+                if(response.code === 0){
+                    _self.userData = {
+                        account: response.data.account,
+                        email: response.data.email,
+                        phone: response.data.bindMobile,
+                        name: response.data.name,
+                        userName: response.data.userName,
+                        userId: response.data.userId,
+                        spId: response.data.serviceProviderId,
+                        clubId: response.data.clubId,
+                        shopId: response.data.shopId,
+                        userIdentity: response.data.userIdentity,
+                        permission: response.data.userPermission,
+                        token: response.data.token,
+                        vipFlag: response.data.vipFlag,
+                        firstClubType: response.data.firstClubType,
+                        listingFee:response.data.listingFee,
+                        shopIsOrder:response.data.shopIsOrder
+                    };
+                    _self.setStorages( _self.userData);
+                    // 登录成功页面跳转
+                    var loginBeforePath = getBaseCookie("loginBeforePath");
+                    if (loginBeforePath && loginBeforePath!=='undefined' && loginBeforePath.indexOf('.html')>0) {
+                        delBaseCookie("loginBeforePath");
+                        window.location.href = loginBeforePath;
+                    } else if (_self.userData.userIdentity*1 === 3) {
+                        location.href = '/supplier/dashboard.html';
+                    } else if (_self.userData.userIdentity*1 === 2 || _self.userData.userIdentity*1 === 4) {
+                        location.href = '/user/dashboard.html';
+                    } else {
+                        location.href="/index.html";
+                    }
+                } else if(response.code === '-3'){//审核未通过
+                    _self.text =response.msg;
+                    _self.stautsfalse = true;
+                    _self.infofalse = true;
+                    _self.applyUse = {
+                        userId: response.data.userId,
+                        shopId: response.data.shopId,
+                        token: response.data.token
+                    };
+                }else if(response.code === '-2'){
+                    _self.stautsfalse = true;
+                    _self.text =response.msg;
+                }else {// 登录失败
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            },
+            showPassword(event) {
+                const el = event.currentTarget;
+                const pwdEle = $(el).siblings('input');
+                if(pwdEle.attr('type') === 'password') {
+                    $(el).addClass('on');
+                    pwdEle.attr('type','text');
+                } else {
+                    $(el).removeClass('on');
+                    pwdEle.attr('type','password');
+                }
+            },
+            blurHandle(event) {  // 失去焦点校验
+                const el = event.currentTarget;
+                verifyHandle(el);
+            },
+            SetSoragesInfo(data){
+                localStorage.setItem('APPLY_INFO',JSON.stringify(data));
+            },
+            setStorages(data){//存储本地数据
+                localStorage.setItem('userInfo',JSON.stringify(data));
+            },
+            information(){
+                window.location.href='/supplier/information.html';
+                this.SetSoragesInfo( this.applyUse);
+            },
+            initSlideVerify(){
+                const _self = this
+                this.$nextTick(function (){
+                    const SlideVerifyPlug = window.slideVerifyPlug;
+                    $('#verify-wrap').html('')
+                    const slideVerify = new SlideVerifyPlug('#verify-wrap', {
+                        wrapWidth: '350',//设置 容器的宽度 ,不设置的话,会设置成100%,需要自己在外层包层div,设置宽度,这是为了适应方便点;
+                        initText: '请向右滑动滑块',  //设置  初始的 显示文字
+                        sucessText: '验证通过',//设置 验证通过 显示的文字
+                        getSuccessState: function (res) {
+                            //当验证完成的时候 会 返回 res 值 true,只留了这个应该够用了
+                            if (slideVerify.slideFinishState) {
+                                $('.value').html(slideVerify.slideFinishState)
+                                $('#resetBtn').removeClass('prohibit')
+                                _self.isSlideFinishState = false;
+                            }
+                        }
+                    });
+                })
+            }
+        }
+    }
+}();

+ 319 - 0
src/main/resources/templates/supplier-center/encyclopedia/charts-preview.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>意向用户数据汇总</title>
+    <!--禁止抓取本页,禁止抓取和跟踪本页的其它链接-->
+    <meta name='robots' content='noindex,nofollow' />
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/supplier-center/encyclopedia/charts-preview.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<div id="chartContent" v-cloak>
+    <!-- 引用头部 -->
+    <header>
+        <input type="hidden" th:value="${coreServer}" id="coreServer">
+        <input type="hidden" th:value="${agent}" id="userAgent">
+        <div class="chartHeadCenter account">
+            <div class="wrap clear">
+                <div class="header-logo">
+                    <a href="/" class="logo">
+                        <img class="pcOnly" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/11/%E9%87%87%E7%BE%8Elogo.png" />
+                        <img class="h5Only" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/11/%E9%87%87%E7%BE%8Elogo.png" />
+                    </a>
+                    <a href="javascript:void(0)" class="logo none">
+                        <img class="pcOnly" v-if="shopInfo.logo" :src="shopInfo.logo" alt="采美 生美/医美采购服务平台"/>
+                        <img class="h5Only" v-if="shopInfo.logo" :src="shopInfo.logo" alt="采美 生美/医美采购服务平台"/>
+                    </a>
+                </div>
+                <div class="header-title" v-if="isLoading && !isChartEmpty && !isShareLogin">
+                    <p>营销数据看板</p>
+                    <p class="small" v-text="shopInfo.chartTitle"></p>
+                </div>
+                <div class="header-time" v-if="isPreview">
+                    <template v-if="isPC">
+                        <el-date-picker
+                                v-model="dataTime"
+                                type="monthrange"
+                                align="right"
+                                unlink-panels
+                                format="yyyy-MM"
+                                value-format="yyyy-MM"
+                                range-separator="至"
+                                start-placeholder="开始月份"
+                                end-placeholder="结束月份"
+                                :picker-options="pickerOptions"
+                                @change="handleDatePick"
+                        >
+                        </el-date-picker>
+                    </template>
+                    <template v-else>
+                        <el-date-picker
+                                class="time"
+                                v-model="queryParams.startTime"
+                                type="month"
+                                format="yyyy-MM"
+                                value-format="yyyy-MM"
+                                style="width: 150px"
+                                @change="shopChartPreview"
+                                :picker-options="pickerOptionsH5"
+                                placeholder="选择开始月份">
+                        </el-date-picker>
+                        至
+                        <el-date-picker
+                                class="time"
+                                v-model="queryParams.endTime"
+                                type="month"
+                                format="yyyy-MM"
+                                value-format="yyyy-MM"
+                                style="width: 150px"
+                                :picker-options="pickerOptionsH5"
+                                @change="shopChartPreview"
+                                placeholder="选择结束月份">
+                        </el-date-picker>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </header>
+    <div class="chart-content clear">
+        <template v-if="isShareLogin">
+            <template th:replace="supplier-center/encyclopedia/components/charts-share-login"></template>
+        </template>
+        <template v-else>
+            <template v-if="isLoading && !isChartEmpty">
+                <div class="chart-content-main clear">
+                    <div class="chart-main-top clear">
+                        <div class="chart-main-top-title">采美数字化营销漏斗</div>
+                        <div class="chart-main-top-main">
+                            <div class="chart-main-top-left">
+                                <div class="chart-main-top-left-li a">
+                                    <div class="li-title">展现量</div>
+                                    <div class="li-texts"><p>在搜索结果页面展现相关内容关键词提炼/关键词布局</p></div>
+                                </div>
+                                <div class="chart-main-top-left-li b">
+                                    <div class="li-title">点击量</div>
+                                    <div class="li-texts none"><p>内容撰写质量</p></div>
+                                </div>
+                                <div class="chart-main-top-left-li c">
+                                    <div class="li-title">访问量</div>
+                                    <div class="li-texts"><p>用户搜索关键词查询结果后访问官网页面,系统为用户打上智能标签</p></div>
+                                </div>
+                                <div class="chart-main-top-left-li d">
+                                    <div class="li-title">咨询量</div>
+                                    <div class="li-texts"><p>跟踪标签/精准营销/定向推送通过CRM系统进行线索培育</p></div>
+                                </div>
+                                <div class="chart-main-top-left-li e">
+                                    <div class="li-title">报备&成交量</div>
+                                    <div class="li-texts min none"><p>销售与服务,促使成单</p></div>
+                                </div>
+                            </div>
+                            <div class="chart-main-top-mids">
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch a" v-text="shopInfo.impressions"></a>
+                                </div>
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch b" v-text="shopInfo.hits"></a>
+                                </div>
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-2" class="chart-main-top-mids-ch c" v-text="shopInfo.visits"></a>
+                                </div>
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch d" v-text="shopInfo.consultation"></a>
+                                </div>
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch e" v-text="shopInfo.report"></a>
+                                </div>
+                            </div>
+                            <div class="chart-main-top-right">
+                                <div class="chart-main-top-right-li">
+                                    <div class="chart-main-top-right-tips">
+                                        <span class="tips a">品牌推广阶段</span>
+                                    </div>
+                                    <p>在采美站外公域的推广结果</p>
+                                </div>
+                                <div class="chart-main-top-right-li">
+                                    <div class="chart-main-top-right-tips">
+                                        <span class="tips b">潜客运营阶段</span>
+                                    </div>
+                                    <p>在采美私域运营情况汇总</p>
+                                </div>
+                                <div class="chart-main-top-right-li">
+                                    <div class="chart-main-top-right-tips">
+                                        <span class="tips c">销售转化阶段</span>
+                                    </div>
+                                    <p>客户线索在采美的孵化动作和转化效果</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="chart-title">
+                    <p>品牌推广阶段</p>
+                </div>
+                <div class="chart-content-text">
+                    <h1>数据总结:</h1>
+                    <div v-for="(text,index) in summarize" :key="index">
+                        <p v-text="`【${text.addTime}】`"></p>
+                        <p v-text="text.theme"></p>
+                    </div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-bot">
+                        <img v-if="isPC" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-pc-2.png" alt="漏斗模型">
+                        <img v-else src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-h5-2.png" alt="漏斗模型">
+                    </div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-max ri" id="myChart1">
+
+                    </div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-max ri table clear">
+                        <div class="chart-main-min-title">推文点击量</div>
+                        <el-table ref="table" :data="volumeList" border height="528">
+                            <el-table-column label="序号" align="center" width="50">
+                                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+                            </el-table-column>
+                            <el-table-column label="发文主题"  prop="title" align="center" width="150">
+                                <template slot-scope="{ row }">
+                                    <template>
+                                        <a style="color: #2fa4e7" target="_blank" :href="row.link"> {{ row.title }}</a>
+                                    </template>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="类型"  prop="type" align="center"  width="100"></el-table-column>
+                            <el-table-column label="首发时间"  prop="firstTime" align="center" width="120"></el-table-column>
+                            <el-table-column label="文章关键词"  prop="keyword" align="center"></el-table-column>
+                            <el-table-column label="分发渠道"  prop="channel" align="center"></el-table-column>
+                            <el-table-column label="总点击量"  prop="wechatNumber" align="center" width="120"></el-table-column>
+                            <el-table-column label="总展现量"  prop="touchNumber" align="center" width="120"></el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+                <div class="chart-content-main"  id="section-1">
+                    <div class="chart-main-box le" id="myChart2">
+
+                    </div>
+                    <div class="chart-main-box ri" id="myChart3">
+
+                    </div>
+                </div>
+                <div class="chart-title" id="section-2">
+                    <p>潜客运营阶段</p>
+                </div>
+                <div class="chart-content-text">
+                    <h1>数据总结:</h1>
+                    <div v-for="(text,index) in summarize1" :key="index">
+                        <p v-text="`【${text.addTime}】`"></p>
+                        <p v-text="text.theme"></p>
+                    </div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-max min clear">
+                        <div class="chart-main-min-title">关键词SEO收录数据</div>
+                        <el-table ref="table" :data="keywordList" height="390px" border>
+                            <el-table-column prop="keyword" label="关键词" align="center"></el-table-column>
+                            <el-table-column prop="seoRanking" label="SEO排名" align="center">
+                                <template slot-scope="{ row }">
+                                    <el-popover
+                                            placement="top-start"
+                                            title=""
+                                            width="380"
+                                            trigger="hover"
+                                    >
+                                        <img :src="row.seoRanking" alt="" style="width:350px;height:350px;">
+                                        <img slot="reference" :src="row.seoRanking" alt="" style="width:60px;height:60px;">
+                                    </el-popover>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="searchVolume" label="搜索次数" align="center"></el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-box le" id="myChart5">
+
+                    </div>
+                    <div class="chart-main-box ri" id="myChart8">
+
+                    </div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-390" id="myChart4"></div>
+                    <div class="chart-main-390" id="myChart9"></div>
+                    <div class="chart-main-390 none" id="myChart10"></div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-max" id="myChart6"></div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-max mins clear">
+                        <div class="chart-main-min-title">访问用户全商城点击量</div>
+                        <el-table ref="table" :data="bannerList" border>
+                            <el-table-column prop="position" label="广告位置/时间" align="center"></el-table-column>
+                            <el-table-column prop="home" label="首页" align="center">
+                                <template slot-scope="{ row }">
+                                    <el-popover
+                                            placement="top-start"
+                                            title=""
+                                            width="380"
+                                            trigger="hover"
+                                    >
+                                        <img :src="row.home" alt="" style="width:350px;height:170px;">
+                                        <img slot="reference" :src="row.home" alt="" style="width:170px;height:85px;">
+                                    </el-popover>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="infoCenter" label="信息中心" align="center">
+                                <template slot-scope="{ row }">
+                                    <el-popover
+                                            placement="top-start"
+                                            title=""
+                                            width="380"
+                                            trigger="hover"
+                                    >
+                                        <img :src="row.infoCenter" alt="" style="width:350px;height:170px;">
+                                        <img slot="reference" :src="row.infoCenter" alt="" style="width:170px;height:85px;">
+                                    </el-popover>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="hits" label="总点击量" align="center"></el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+                <div class="chart-title" id="section-3">
+                    <p>销售转化阶段</p>
+                </div>
+                <div class="chart-content-text">
+                    <h1>数据总结:</h1>
+                    <div v-for="(text,index) in summarize2" :key="index">
+                        <p v-text="`【${text.addTime}】`"></p>
+                        <p v-text="text.theme"></p>
+                    </div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-max" id="myChart7"></div>
+                </div>
+            </template>
+            <div v-else class="chart-content-empty">
+                <img src="/img/encyclopedia/chart/chart-empty@2x.png">
+                <p>暂无统计数据,请等待系统生成数据~</p>
+            </div>
+        </template>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/echarts.min.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/china.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/echarts-wordcloud.min.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/mixins/chartsMixin.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/mixins/shareLoginMixin.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/charts-preview.js(v=${version})}"></script>
+</body>
+</html>

+ 203 - 197
src/main/resources/templates/supplier-center/encyclopedia/charts.html

@@ -6,6 +6,8 @@
     <!--禁止抓取本页,禁止抓取和跟踪本页的其它链接-->
     <meta name='robots' content='noindex,nofollow' />
     <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/account/login.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/supplier-center/encyclopedia/charts.css(v=${version})}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
@@ -27,11 +29,10 @@
                         <img class="h5Only" v-if="shopInfo.logo" :src="shopInfo.logo" alt="采美 生美/医美采购服务平台"/>
                     </a>
                 </div>
-                <div class="header-title" v-if="!isChartEmpty">
+                <div class="header-title" v-if="isLoading && !isChartEmpty && !isShopLogin">
                     <p>营销数据看板</p>
                     <p class="small" v-text="shopInfo.chartTitle"></p>
                 </div>
-
                 <div class="header-time" v-if="isPreview">
                     <template v-if="isPC">
                         <el-date-picker
@@ -78,231 +79,235 @@
             </div>
         </div>
     </header>
-    <div class="chart-content clear" v-if="isLoading">
-        <template v-if="!isChartEmpty">
-            <div class="chart-content-main clear">
-                <div class="chart-main-top clear">
-                    <div class="chart-main-top-title">采美数字化营销漏斗</div>
-                    <div class="chart-main-top-main">
-                        <div class="chart-main-top-left">
-                            <div class="chart-main-top-left-li a">
-                                <div class="li-title">展现量</div>
-                                <div class="li-texts"><p>在搜索结果页面展现相关内容关键词提炼/关键词布局</p></div>
-                            </div>
-                            <div class="chart-main-top-left-li b">
-                                <div class="li-title">点击量</div>
-                                <div class="li-texts none"><p>内容撰写质量</p></div>
-                            </div>
-                            <div class="chart-main-top-left-li c">
-                                <div class="li-title">访问量</div>
-                                <div class="li-texts"><p>用户搜索关键词查询结果后访问官网页面,系统为用户打上智能标签</p></div>
-                            </div>
-                            <div class="chart-main-top-left-li d">
-                                <div class="li-title">咨询量</div>
-                                <div class="li-texts"><p>跟踪标签/精准营销/定向推送通过CRM系统进行线索培育</p></div>
-                            </div>
-                            <div class="chart-main-top-left-li e">
-                                <div class="li-title">报备&成交量</div>
-                                <div class="li-texts min none"><p>销售与服务,促使成单</p></div>
-                            </div>
-                        </div>
-                        <div class="chart-main-top-mids">
-                            <div class="chart-main-top-mids-li">
-                                <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch a" v-text="shopInfo.impressions"></a>
-                            </div>
-                            <div class="chart-main-top-mids-li">
-                                <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch b" v-text="shopInfo.hits"></a>
-                            </div>
-                            <div class="chart-main-top-mids-li">
-                                <a href="javascript:void(0)" data-id="section-2" class="chart-main-top-mids-ch c" v-text="shopInfo.visits"></a>
-                            </div>
-                            <div class="chart-main-top-mids-li">
-                                <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch d" v-text="shopInfo.consultation"></a>
-                            </div>
-                            <div class="chart-main-top-mids-li">
-                                <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch e" v-text="shopInfo.report"></a>
-                            </div>
-                        </div>
-                        <div class="chart-main-top-right">
-                            <div class="chart-main-top-right-li">
-                                <div class="chart-main-top-right-tips">
-                                    <span class="tips a">品牌推广阶段</span>
+    <div class="chart-content clear">
+        <template v-if="isShopLogin">
+            <template th:replace="supplier-center/encyclopedia/components/chart-login"></template>
+        </template>
+        <template v-else>
+            <template v-if="isLoading && !isChartEmpty">
+                <div class="chart-content-main clear">
+                    <div class="chart-main-top clear">
+                        <div class="chart-main-top-title">采美数字化营销漏斗</div>
+                        <div class="chart-main-top-main">
+                            <div class="chart-main-top-left">
+                                <div class="chart-main-top-left-li a">
+                                    <div class="li-title">展现量</div>
+                                    <div class="li-texts"><p>在搜索结果页面展现相关内容关键词提炼/关键词布局</p></div>
+                                </div>
+                                <div class="chart-main-top-left-li b">
+                                    <div class="li-title">点击量</div>
+                                    <div class="li-texts none"><p>内容撰写质量</p></div>
+                                </div>
+                                <div class="chart-main-top-left-li c">
+                                    <div class="li-title">访问量</div>
+                                    <div class="li-texts"><p>用户搜索关键词查询结果后访问官网页面,系统为用户打上智能标签</p></div>
+                                </div>
+                                <div class="chart-main-top-left-li d">
+                                    <div class="li-title">咨询量</div>
+                                    <div class="li-texts"><p>跟踪标签/精准营销/定向推送通过CRM系统进行线索培育</p></div>
+                                </div>
+                                <div class="chart-main-top-left-li e">
+                                    <div class="li-title">报备&成交量</div>
+                                    <div class="li-texts min none"><p>销售与服务,促使成单</p></div>
                                 </div>
-                                <p>在采美站外公域的推广结果</p>
                             </div>
-                            <div class="chart-main-top-right-li">
-                                <div class="chart-main-top-right-tips">
-                                    <span class="tips b">潜客运营阶段</span>
+                            <div class="chart-main-top-mids">
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch a" v-text="shopInfo.impressions"></a>
+                                </div>
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch b" v-text="shopInfo.hits"></a>
+                                </div>
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-2" class="chart-main-top-mids-ch c" v-text="shopInfo.visits"></a>
+                                </div>
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch d" v-text="shopInfo.consultation"></a>
+                                </div>
+                                <div class="chart-main-top-mids-li">
+                                    <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch e" v-text="shopInfo.report"></a>
                                 </div>
-                                <p>在采美私域运营情况汇总</p>
                             </div>
-                            <div class="chart-main-top-right-li">
-                                <div class="chart-main-top-right-tips">
-                                    <span class="tips c">销售转化阶段</span>
+                            <div class="chart-main-top-right">
+                                <div class="chart-main-top-right-li">
+                                    <div class="chart-main-top-right-tips">
+                                        <span class="tips a">品牌推广阶段</span>
+                                    </div>
+                                    <p>在采美站外公域的推广结果</p>
+                                </div>
+                                <div class="chart-main-top-right-li">
+                                    <div class="chart-main-top-right-tips">
+                                        <span class="tips b">潜客运营阶段</span>
+                                    </div>
+                                    <p>在采美私域运营情况汇总</p>
+                                </div>
+                                <div class="chart-main-top-right-li">
+                                    <div class="chart-main-top-right-tips">
+                                        <span class="tips c">销售转化阶段</span>
+                                    </div>
+                                    <p>客户线索在采美的孵化动作和转化效果</p>
                                 </div>
-                                <p>客户线索在采美的孵化动作和转化效果</p>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="chart-title">
-                <p>品牌推广阶段</p>
-            </div>
-            <div class="chart-content-text">
-                <h1>数据总结:</h1>
-                <div v-for="(text,index) in summarize" :key="index">
-                    <p v-text="`【${text.addTime}】`"></p>
-                    <p v-text="text.theme"></p>
+                <div class="chart-title">
+                    <p>品牌推广阶段</p>
                 </div>
-            </div>
-            <div class="chart-content-main">
-                <div class="chart-main-bot">
-                    <img v-if="isPC" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-pc-2.png" alt="漏斗模型">
-                    <img v-else src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-h5-2.png" alt="漏斗模型">
+                <div class="chart-content-text">
+                    <h1>数据总结:</h1>
+                    <div v-for="(text,index) in summarize" :key="index">
+                        <p v-text="`【${text.addTime}】`"></p>
+                        <p v-text="text.theme"></p>
+                    </div>
                 </div>
-            </div>
-            <div class="chart-content-main">
-                <div class="chart-main-max ri" id="myChart1">
+                <div class="chart-content-main">
+                    <div class="chart-main-bot">
+                        <img v-if="isPC" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-pc-2.png" alt="漏斗模型">
+                        <img v-else src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-h5-2.png" alt="漏斗模型">
+                    </div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-max ri" id="myChart1">
 
+                    </div>
                 </div>
-            </div>
-            <div class="chart-content-main">
-                <div class="chart-main-max ri table clear">
-                    <div class="chart-main-min-title">推文点击量</div>
-                    <el-table ref="table" :data="volumeList" border height="528">
-                        <el-table-column label="序号" align="center" width="50">
-                            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
-                        </el-table-column>
-                        <el-table-column label="发文主题"  prop="title" align="center" width="150">
-                            <template slot-scope="{ row }">
-                                <template>
-                                    <a style="color: #2fa4e7" target="_blank" :href="row.link"> {{ row.title }}</a>
+                <div class="chart-content-main">
+                    <div class="chart-main-max ri table clear">
+                        <div class="chart-main-min-title">推文点击量</div>
+                        <el-table ref="table" :data="volumeList" border height="528">
+                            <el-table-column label="序号" align="center" width="50">
+                                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+                            </el-table-column>
+                            <el-table-column label="发文主题"  prop="title" align="center" width="150">
+                                <template slot-scope="{ row }">
+                                    <template>
+                                        <a style="color: #2fa4e7" target="_blank" :href="row.link"> {{ row.title }}</a>
+                                    </template>
                                 </template>
-                            </template>
-                        </el-table-column>
-                        <el-table-column label="类型"  prop="type" align="center"  width="100"></el-table-column>
-                        <el-table-column label="首发时间"  prop="firstTime" align="center" width="120"></el-table-column>
-                        <el-table-column label="文章关键词"  prop="keyword" align="center"></el-table-column>
-                        <el-table-column label="分发渠道"  prop="channel" align="center"></el-table-column>
-                        <el-table-column label="总点击量"  prop="wechatNumber" align="center" width="120"></el-table-column>
-                        <el-table-column label="总展现量"  prop="touchNumber" align="center" width="120"></el-table-column>
-                    </el-table>
+                            </el-table-column>
+                            <el-table-column label="类型"  prop="type" align="center"  width="100"></el-table-column>
+                            <el-table-column label="首发时间"  prop="firstTime" align="center" width="120"></el-table-column>
+                            <el-table-column label="文章关键词"  prop="keyword" align="center"></el-table-column>
+                            <el-table-column label="分发渠道"  prop="channel" align="center"></el-table-column>
+                            <el-table-column label="总点击量"  prop="wechatNumber" align="center" width="120"></el-table-column>
+                            <el-table-column label="总展现量"  prop="touchNumber" align="center" width="120"></el-table-column>
+                        </el-table>
+                    </div>
                 </div>
-            </div>
-            <div class="chart-content-main"  id="section-1">
-                <div class="chart-main-box le" id="myChart2">
+                <div class="chart-content-main"  id="section-1">
+                    <div class="chart-main-box le" id="myChart2">
 
-                </div>
-                <div class="chart-main-box ri" id="myChart3">
+                    </div>
+                    <div class="chart-main-box ri" id="myChart3">
 
+                    </div>
                 </div>
-            </div>
-            <div class="chart-title" id="section-2">
-                <p>潜客运营阶段</p>
-            </div>
-            <div class="chart-content-text">
-                <h1>数据总结:</h1>
-                <div v-for="(text,index) in summarize1" :key="index">
-                    <p v-text="`【${text.addTime}】`"></p>
-                    <p v-text="text.theme"></p>
+                <div class="chart-title" id="section-2">
+                    <p>潜客运营阶段</p>
                 </div>
-            </div>
-            <div class="chart-content-main">
-                <div class="chart-main-max min clear">
-                    <div class="chart-main-min-title">关键词SEO收录数据</div>
-                    <el-table ref="table" :data="keywordList" height="390px" border>
-                        <el-table-column prop="keyword" label="关键词" align="center"></el-table-column>
-                        <el-table-column prop="seoRanking" label="SEO排名" align="center">
-                            <template slot-scope="{ row }">
-                                <el-popover
-                                        placement="top-start"
-                                        title=""
-                                        width="380"
-                                        trigger="hover"
-                                >
-                                    <img :src="row.seoRanking" alt="" style="width:350px;height:350px;">
-                                    <img slot="reference" :src="row.seoRanking" alt="" style="width:60px;height:60px;">
-                                </el-popover>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="searchVolume" label="搜索次数" align="center"></el-table-column>
-                    </el-table>
+                <div class="chart-content-text">
+                    <h1>数据总结:</h1>
+                    <div v-for="(text,index) in summarize1" :key="index">
+                        <p v-text="`【${text.addTime}】`"></p>
+                        <p v-text="text.theme"></p>
+                    </div>
                 </div>
-            </div>
-            <div class="chart-content-main">
-                <div class="chart-main-box le" id="myChart5">
-
+                <div class="chart-content-main">
+                    <div class="chart-main-max min clear">
+                        <div class="chart-main-min-title">关键词SEO收录数据</div>
+                        <el-table ref="table" :data="keywordList" height="390px" border>
+                            <el-table-column prop="keyword" label="关键词" align="center"></el-table-column>
+                            <el-table-column prop="seoRanking" label="SEO排名" align="center">
+                                <template slot-scope="{ row }">
+                                    <el-popover
+                                            placement="top-start"
+                                            title=""
+                                            width="380"
+                                            trigger="hover"
+                                    >
+                                        <img :src="row.seoRanking" alt="" style="width:350px;height:350px;">
+                                        <img slot="reference" :src="row.seoRanking" alt="" style="width:60px;height:60px;">
+                                    </el-popover>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="searchVolume" label="搜索次数" align="center"></el-table-column>
+                        </el-table>
+                    </div>
                 </div>
-                <div class="chart-main-box ri" id="myChart8">
+                <div class="chart-content-main">
+                    <div class="chart-main-box le" id="myChart5">
+
+                    </div>
+                    <div class="chart-main-box ri" id="myChart8">
 
+                    </div>
                 </div>
-            </div>
-            <div class="chart-content-main">
-                <div class="chart-main-390" id="myChart4"></div>
-                <div class="chart-main-390" id="myChart9"></div>
-                <div class="chart-main-390 none" id="myChart10"></div>
-            </div>
-            <div class="chart-content-main">
-                <div class="chart-main-max" id="myChart6"></div>
-            </div>
-            <div class="chart-content-main">
-                <div class="chart-main-max mins clear">
-                    <div class="chart-main-min-title">访问用户全商城点击量</div>
-                    <el-table ref="table" :data="bannerList" border>
-                        <el-table-column prop="position" label="广告位置/时间" align="center"></el-table-column>
-                        <el-table-column prop="home" label="首页" align="center">
-                            <template slot-scope="{ row }">
-                                <el-popover
-                                        placement="top-start"
-                                        title=""
-                                        width="380"
-                                        trigger="hover"
-                                >
-                                    <img :src="row.home" alt="" style="width:350px;height:170px;">
-                                    <img slot="reference" :src="row.home" alt="" style="width:170px;height:85px;">
-                                </el-popover>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="infoCenter" label="信息中心" align="center">
-                            <template slot-scope="{ row }">
-                                <el-popover
-                                        placement="top-start"
-                                        title=""
-                                        width="380"
-                                        trigger="hover"
-                                >
-                                    <img :src="row.infoCenter" alt="" style="width:350px;height:170px;">
-                                    <img slot="reference" :src="row.infoCenter" alt="" style="width:170px;height:85px;">
-                                </el-popover>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="hits" label="总点击量" align="center"></el-table-column>
-                    </el-table>
+                <div class="chart-content-main">
+                    <div class="chart-main-390" id="myChart4"></div>
+                    <div class="chart-main-390" id="myChart9"></div>
+                    <div class="chart-main-390 none" id="myChart10"></div>
                 </div>
-            </div>
-            <div class="chart-title" id="section-3">
-                <p>销售转化阶段</p>
-            </div>
-            <div class="chart-content-text">
-                <h1>数据总结:</h1>
-                <div v-for="(text,index) in summarize2" :key="index">
-                    <p v-text="`【${text.addTime}】`"></p>
-                    <p v-text="text.theme"></p>
+                <div class="chart-content-main">
+                    <div class="chart-main-max" id="myChart6"></div>
                 </div>
-            </div>
-            <div class="chart-content-main">
-                <div class="chart-main-max" id="myChart7"></div>
+                <div class="chart-content-main">
+                    <div class="chart-main-max mins clear">
+                        <div class="chart-main-min-title">访问用户全商城点击量</div>
+                        <el-table ref="table" :data="bannerList" border>
+                            <el-table-column prop="position" label="广告位置/时间" align="center"></el-table-column>
+                            <el-table-column prop="home" label="首页" align="center">
+                                <template slot-scope="{ row }">
+                                    <el-popover
+                                            placement="top-start"
+                                            title=""
+                                            width="380"
+                                            trigger="hover"
+                                    >
+                                        <img :src="row.home" alt="" style="width:350px;height:170px;">
+                                        <img slot="reference" :src="row.home" alt="" style="width:170px;height:85px;">
+                                    </el-popover>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="infoCenter" label="信息中心" align="center">
+                                <template slot-scope="{ row }">
+                                    <el-popover
+                                            placement="top-start"
+                                            title=""
+                                            width="380"
+                                            trigger="hover"
+                                    >
+                                        <img :src="row.infoCenter" alt="" style="width:350px;height:170px;">
+                                        <img slot="reference" :src="row.infoCenter" alt="" style="width:170px;height:85px;">
+                                    </el-popover>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="hits" label="总点击量" align="center"></el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+                <div class="chart-title" id="section-3">
+                    <p>销售转化阶段</p>
+                </div>
+                <div class="chart-content-text">
+                    <h1>数据总结:</h1>
+                    <div v-for="(text,index) in summarize2" :key="index">
+                        <p v-text="`【${text.addTime}】`"></p>
+                        <p v-text="text.theme"></p>
+                    </div>
+                </div>
+                <div class="chart-content-main">
+                    <div class="chart-main-max" id="myChart7"></div>
+                </div>
+            </template>
+            <div v-else class="chart-content-empty">
+                <img src="/img/encyclopedia/chart/chart-empty@2x.png">
+                <p>暂无统计数据,请等待系统生成数据~</p>
             </div>
         </template>
-        <div v-else class="chart-content-empty">
-            <img src="/img/encyclopedia/chart/chart-empty@2x.png">
-            <p>暂无统计数据,请等待系统生成数据~</p>
-        </div>
     </div>
 </div>
 <!-- 引入底部 -->
-<template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/echarts.min.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/china.js(v=${version})}"></script>
@@ -310,6 +315,7 @@
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/mixins/chartsMixin.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/mixins/shopLoginMixin.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/charts.js(v=${version})}"></script>
 </body>
 </html>

+ 89 - 0
src/main/resources/templates/supplier-center/encyclopedia/components/chart-login.html

@@ -0,0 +1,89 @@
+<template>
+  <div class="loginWrap-title">
+    <p>供应商登录</p>
+  </div>
+  <div class="loginWrap clear" v-cloak>
+    <div class="login-image">
+      <img src="/img/account/login.png" alt="">
+    </div>
+    <div class="loginForm">
+      <div class="title">
+        <h2>生美/医美采购服务平台</h2>
+      </div>
+      <form v-show="!qrCodeLogin">
+        <div class="formLine-tabs">
+          <a class="tabs-item" :class="{ current: loginTabs === 0 }" href="javascript:void(0);" @click="handleTabsClick(0)">验证码登录</a>
+          <a class="tabs-item" :class="{ current: loginTabs === 1 }" href="javascript:void(0);" @click="handleTabsClick(1)">密码登录</a>
+        </div>
+        <div v-show="loginTabs === 0">
+          <div class="formLine" >
+            <input  class="massageBtn"  type="text" @input="handleCodeMobileInput" v-model.trim="codeParams.mobile" placeholder="请输入手机号码" :rule="rule.mobile" maxlength="11" @blur="blurHandle($event)" needverify>
+            <i class="checked icon mIcon"></i>
+            <span class="errTips icon mIcon" tips="请输入正确格式的手机号"></span>
+          </div>
+          <div class="formLine smscode">
+            <input type="text" class="smscode" @input="handleCodeInput" v-model.trim="codeParams.code" autocomplete="off" placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
+            <i class="checked icon mIcon"></i>
+            <span class="errTips icon mIcon" tips="请输入短信验证码"></span>
+            <a class="code-btn" href="javascript:void(0);" @click="handleCheckMobile" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
+          </div>
+          <div class="submit clear">
+            <button class="btn" type="button" @click="handleCodeLogin" :disabled="isInputsTrue" :class="[isInputsTrue ?'disabled':'']">登录</button>
+          </div>
+        </div>
+        <div v-show="loginTabs === 1">
+          <div class="formLine">
+            <input type="text" v-model.trim="accountParams.mobileOrEmail" placeholder="请输入邮箱或手机号" :rule="rule.account" maxlength="30" @blur="blurHandle($event)" needverify>
+            <i class="checked icon mIcon"></i>
+            <span class="errTips icon mIcon" tips="请提供正确的邮箱或手机号码"></span>
+          </div>
+          <div class="formLine">
+            <input type="password" v-model.trim="accountParams.password" placeholder="请输入密码" :rule="rule.password" maxlength="30" @blur="blurHandle($event)" needverify>
+            <i class="checked icon mIcon"></i>
+            <span class="errTips icon mIcon" tips="请输入正确的密码"></span>
+            <i class="icon showPwd" @click="showPassword($event)"></i>
+          </div>
+          <!-- 滑动验证 -->
+          <div class="verify-wrap" id="verify-wrap"></div>
+          <div class="submit clear">
+            <button class="btn" type="button" @click="handleSubLogin" :disabled="isSlideFinishState" :class="[isSlideFinishState ?'disabled':'']">登录</button>
+          </div>
+        </div>
+        <div class="forget">
+          <a href="/forget.html" v-if="loginTabs === 1" style="z-index: 99999">忘记密码?</a>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="bg" v-if="stautsfalse" :style="stautsfalse?'opacity:1':''">
+    <div class="bg-content">
+      <div class="bg-tittle"><p>提示</p><p class="icon mIcon" @click="handleHideBg"></p></div>
+      <div class="text-conten">
+        <p class="status">{{text}}</p>
+        <p class="tip-p">联系电话:0755-22907771</p>
+        <p class="tip-p">地址:深圳市福田区锦峰大厦21B</p>
+        <div  @click="information" v-if="infofalse" >修改申请信息</div>
+      </div>
+    </div>
+  </div>
+  <div class="content-model"  :class="isCodeModel ? 'active' : ''">
+    <div class="model-main">
+      <div class="model-title"><p>获取短信验证码</p><i class="icon mIcon icon-close"  @click="handleCloseCodeModel"></i></div>
+      <div class="model-content">
+        <div class="model-form">
+          <input class="input codeMsgButton" type="text" placeholder="请输入图形验证码" v-model="smsCodeParams.imgCode" maxlength="4" needverify>
+          <div class="image"><img :src="codeImagePath" alt=""></div>
+          <div class="refresh" @click="handleRefreshCodeImage">
+            <i class="icon mIcon"></i>
+            <span>刷新</span>
+          </div>
+          <i class="checked icon mIcon"></i>
+          <span class="errTips icon mIcon" tips="请输入图形验证码"></span>
+        </div>
+        <div class="model-button">
+          <div class="button"  @click="handleMobileCode">获取短信验证码</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

+ 12 - 0
src/main/resources/templates/supplier-center/encyclopedia/components/charts-share-login.html

@@ -0,0 +1,12 @@
+<div class="charts-login">
+    <div class="charts-login-form">
+        <el-form ref="dataForm" :rules="rules" :model="form" label-position="top" label-width="0px">
+            <el-form-item label="预览码:" prop="shareCode" :rules="rules.shareCode">
+                <el-input v-model="form.shareCode"  maxlength="4"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" :disabled="disabled" style="width: 100%;"  @click="handleConfirm('dataForm')">确定</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</div>