baiqiu-cms-decoration-dg 0.0.1

package/src/index.scss

@@ -0,0 +1,213 @@
+.lay-wrap {
+  .vdr {
+    border: none;
+    touch-action: auto;
+    outline: none;
+  }
+
+  // .video-js .vjs-big-play-button {
+  //   font-size: 2.5em !important;
+  //   line-height: 2.3em !important;
+  //   height: 2.5em !important;
+  //   width: 2.5em !important;
+  //   -webkit-border-radius: 2.5em !important;
+  //   -moz-border-radius: 2.5em !important;
+  //   border-radius: 2.5em !important;
+  //   background-color: #73859f;
+  //   background-color: rgba($color: #000000, $alpha: 0.6) !important;
+  //   border-width: 0.15em !important;
+  //   margin-top: -1.25em !important;
+  //   margin-left: -1.75em !important;
+  //   border: 0.0666em solid transparent;
+  // }
+
+  .video-wrap .video-js .vjs-control-bar {
+    z-index: 99!important;
+  }
+
+  .vjs-has-started .vjs-control-bar {
+    z-index: 99!important;
+  }
+
+  .video-wrap .video-js .vjs-big-play-button {
+    opacity: 1!important;
+  }
+
+  // .vjs-big-play-button .vjs-icon-placeholder {
+  //   font-size: 1.63em !important;
+  // }
+  
+  // .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus {
+  //   border-color: transparent;
+  // }
+
+  .vjs-paused .vjs-big-play-button,
+  .vjs-paused.vjs-has-started .vjs-big-play-button {
+    display: block !important;
+    opacity: 1;
+  }
+
+  .video-js .vjs-time-control {
+    display: block !important;
+  }
+  
+  .video-js .vjs-remaining-time {
+    display: none !important;
+  }
+
+  .video-js .vjs-mouse-display {
+    display: none!important;
+  }
+
+  // .video-js .vjs-time-control{
+  //   text-align: center;
+  //   min-width: 1em!important;
+  //   padding: 0!important;
+  //   line-height: 30px!important;
+  // }
+
+  .video-wrap .video-js .vjs-control-bar .vjs-button > .vjs-icon-placeholder:before {
+    line-height: 30px!important;
+  }
+
+  .video-js .vjs-play-progress:before {
+    top: -0.43em!important;
+    line-height: 1!important;
+  }
+
+  .video-js .vjs-mouse-display {
+    display: none!important;
+  }
+
+  .vjs-slider-horizontal .vjs-volume-level:before {
+    line-height: 1!important;
+    top: -0.55em
+  }
+
+  // 分页器样式三
+  .swiper-pagination.swiper-pagination-bullets {
+    &.swiper-pagination-3 {
+      .swiper-pagination-bullet {
+        opacity: 1;
+        background-color: var(--color)!important;
+        transition: all 0.3s;
+        &.swiper-pagination-bullet-active {
+          background-color: var(--activeColor)!important;
+        }
+      }
+    }
+  }
+
+  .text-con {
+    p{
+      font-size: 16px;
+    }
+    p,h1,h2,h3,h4,h5,table,pre {
+      line-height: 1.5;
+    }
+
+    table,pre {
+      margin: 15px 0;
+    }
+
+    ul,ol{
+      margin: 10px 0 10px 20px;
+    }
+    ul li{
+      list-style-type: disc;
+      margin: 5px 0;
+    }
+    ol li{
+      list-style-type:decimal;
+      margin: 5px 0;
+    }
+    table td{
+      text-align: inherit;
+    }
+    table {
+      border-top: 1px solid #ccc;
+      border-left: 1px solid #ccc;
+      border-spacing: 0;
+    }
+    table th {
+      border-bottom: 2px solid #ccc;
+      text-align: center;
+      background-color: #f1f1f1;
+    }
+    table td, table th {
+      border-bottom: 1px solid #ccc;
+      border-right: 1px solid #ccc;
+      padding: 3px 5px;
+      min-height: 30px;
+      min-width: 30px;
+    }
+    a:-webkit-any-link {
+      cursor: pointer;
+      color:  -webkit-link;
+    }
+  
+    a {
+      width: auto;
+      height: auto;
+    }
+    font[size="2"] {
+      font-size: 12px;
+    }
+  }
+
+  .swiper-container {
+    .swiper-button-prev {
+      pointer-events: auto;
+      background-image: none;
+      left: 20px;
+      &:hover {
+        .cms2iconfont {
+          color: var(--hoverColor) !important;
+        }
+      }
+      &::after {
+        display: none;
+      }
+
+      .cms2iconfont {
+        font-size: 28px;
+      }
+    }
+
+    .swiper-button-next {
+      pointer-events: auto;
+      background-image: none;
+      right: 20px;
+
+      &:hover {
+        .cms2iconfont {
+          color: var(--hoverColor) !important;
+        }
+      }
+
+      &::after {
+        display: none;
+      }
+
+      .cms2iconfont {
+        font-size: 28px;
+      }
+    }
+
+
+    .arrow {
+      width: 40px;
+      height: 40px;
+      background-color: #edf5fe;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      .cms2iconfont {
+        font-size: 20px;
+      }
+    }
+  }
+}

package/src/main.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

package/src/utils/common.js

@@ -0,0 +1,23 @@
+module.exports = {
+  entrance: function(that) {
+    window.addEventListener('scroll', ()=>{this.scroll(that)})
+  },
+  scroll: function(that) {
+    let h = document.documentElement.clientHeight || document.body.clientHeight
+    let eles = document.querySelectorAll('.entrance-con')
+    eles.forEach((item, index) => {
+      let top = item.getBoundingClientRect().top
+      if (top < h - 50 && item.firstChild.style.display == 'none') {
+        item.classList.add('entrance-demonstrate') // 该样式主要为商品组件使用，因为商品接口返回会慢于该方法的执行，若将商品组件至于页面第一个，且添加了入场动画，会造成初始进入页面动画不执行，滑动一下才执行
+        if(!(item.classList.contains('product-list')&&index == 0)) {
+          item.firstChild.style.display = 'block'
+        }
+      }
+    })
+
+    let refs = that.$refs.layModule
+    refs.forEach(item =>{
+      item.reportData(h)
+    })
+  }
+}

package/src/utils/http-client.js

@@ -0,0 +1,111 @@
+import axios from "axios";
+
+export const CONTENT_TYPE = {
+  json: "application/json;",
+  form: "application/x-www-form-urlencoded;",
+  html: "text/html;",
+  file: "multipart/form-data",
+  excel: "msexcel",
+  xml: "application/xml",
+  javascript: "application/x-javascript;charset=utf-8"
+};
+export const REQ_HEADERS = {
+  lang: "Accept-Language",
+  contentType: "Content-Type"
+};
+
+function checkResponse(response) {
+  if (response.status === 200) {
+    let result = response.data;
+    if (result.errorCode === "0") {
+      return result.data;
+    }
+    return response.data;
+  }
+}
+
+axios.interceptors.response.use(checkResponse, error => {
+  // Do something with response error
+  if (error.message === "Network Error") {
+  }
+  return Promise.reject(error);
+});
+
+export class HttpClient {
+  static async call(
+    url,
+    { method = "get", headers = {}, body = null, responseType = null} = {}
+  ) {
+    let fetchUrl = url;
+    let params = {
+      method: method,
+      url: fetchUrl,
+      responseType: responseType || "json",
+      headers: headers
+    };
+    if (method === "get") {
+      params.params = body;
+    } else {
+      params.data = body;
+    }
+
+    // console.log("params", params);
+
+    const response = await axios(params).catch(error => {
+      if (error.response) {
+        // The request was made and the server responded with a status code
+        // that falls out of the range of 2xx
+        console.error(error.response.status, error.response.data);
+      } else if (error.request) {
+        // The request was made but no response was received
+        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+        // http.ClientRequest in node.js
+        console.error(error.request);
+      } else {
+        // Something happened in finance up the request that triggered an Error
+        console.error("Error", error.message ? error.message : "");
+      }
+      // console.log(error.config)
+    });
+    return response;
+  }
+
+  static get(url, { mask = true, external = false, headers = {} } = {}) {
+    return HttpClient.call(url, {
+      headers,
+      external,
+      mask
+    });
+  }
+
+  static postBody(
+    url,
+    {
+      body = {},
+      language = "zh-CN",
+      module = "",
+      method = "post",
+      mask = true,
+      postData = true,
+      external = false,
+      headers = {},
+      compat
+    }
+  ) {
+    return HttpClient.call(url, {
+      module,
+      method,
+      headers: Object.assign(headers, {
+        [REQ_HEADERS.contentType]: CONTENT_TYPE.json,
+        common:{
+          languageCode: language
+        }
+      }),
+      body: body,
+      postData,
+      external,
+      mask,
+      compat
+    });
+  }
+}

package/src/utils/utils.js

@@ -0,0 +1,63 @@
+import {ComService} from '../api/com-service'
+
+/**
+ * cms数据采集上报
+ */
+function dataSaveDecorationPageComponentEventFn(params, envUrl) {
+  const service = new ComService()
+  const data = {
+    source: '',
+    medium: '',
+    commodity_id: params.popData.productCode || '', //商品item
+    commodity_name: params.popData.selectDataShow || '', //商品名称
+    commodity_sku_id: '',
+    order_id: '', //订单id
+    is_success: null, //订单是否成功
+    fail_reason: '', //订单失败原因
+    recommended_scenes_code: '', //商品推荐场景id
+    component_name: params.uniqueName, // 组件名称
+    component_id: params.uniqueId, //组件ID  
+    component_type: params.componentType, //组件类型
+    first_navigation_commodity_id: '', //一级导航_id
+    first_navigation_name: '', //一级导航名称
+    hot_zone_id: params.popData.uniqueId || '', //热区_id
+    hot_zone_name: params.popData.uniqueName || '', //热区_名称
+    material_id: params.materialId, //素材id
+    material_name: params.materialName, //素材名称
+    navigation_type: '', //导航类型；1：一级导航，2：二级导航，3：三级导航
+    url_path: params.path, //当前页面
+    // referer: '', //http Referer
+    refer_info: params.refererPagePath, //上级页面
+    second_navigation_commodity_id: '', //二级导航_id
+    second_navigation_name: '', //二级导航名称
+    first_navigation_tap_id: '', //一级导航tab_id
+    first_navigation_tap_name: '', //一级导航tab名称
+    second_navigation_tap_id: '', //二级导航tab_id
+    second_navigation_tap_name: '', //二级导航tab名称
+    navigation_tap_type: '', //导航TapId类型；1：一级导航tap；2：二级导航tap
+    navigation_commodity_type: '', //导航组件类型；1：一级导航组件；2：二级导航组件
+    position: params.position, // 素材位置
+    trigger_Method_Type: params.componentMethodType
+  }
+
+  let distinctId = ''
+
+  if(localStorage.getItem(`${params.brand}Cookie`)) {
+    distinctId = localStorage.getItem(`${params.brand}Cookie`)
+  } else {
+    distinctId = `${parseInt(new Date().getTime())}${Math.floor(Math.random()*10000)}`
+    localStorage.setItem(`${params.brand}Cookie`, distinctId)
+  }
+
+  service.dataSaveDecorationPageComponentEvent(envUrl, {
+    eventProperty: JSON.stringify({
+      ...data
+    }),
+    event: params.event,
+    distinctId,
+  })
+}
+
+export {
+  dataSaveDecorationPageComponentEventFn
+}

package/webpack.config.js

@@ -0,0 +1,113 @@
+var path = require("path");
+var webpack = require("webpack");
+
+var entry = "./src/main.js";
+var filename = "build.js";
+
+if (process.env.NODE_ENV !== "development") {
+  entry = "./src/index.js";
+  filename = "baiqiu-cms-decoration.min.js";
+}
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+
+module.exports = {
+  entry,
+  output: {
+    path: path.resolve(__dirname, "./dist"),
+    publicPath: "/dist/",
+    filename,
+    library: "bq-cms2.0-decoration.min",
+    libraryTarget: "umd",
+    umdNamedDefine: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ["vue-style-loader", "css-loader"]
+      },
+      {
+        test: /\.scss$/,
+        use: ["vue-style-loader", "css-loader", "sass-loader"]
+      },
+      {
+        test: /\.sass$/,
+        use: ["vue-style-loader", "css-loader", "sass-loader?indentedSyntax"]
+      },
+      {
+        test: /\.vue$/,
+        loader: "vue-loader",
+        options: {
+          loaders: {
+            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
+            // the "scss" and "sass" values for the lang attribute to the right configs here.
+            // other preprocessors should work out of the box, no loader config like this necessary.
+            scss: ["vue-style-loader", "css-loader", "sass-loader"],
+            sass: [
+              "vue-style-loader",
+              "css-loader",
+              "sass-loader?indentedSyntax"
+            ]
+          }
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: "babel-loader",
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: "file-loader",
+        options: {
+          name: "[name].[ext]?[hash]"
+        }
+      },
+      {
+        test: /\.(woff|ttf|eot|svg)/,
+        loader: "file-loader?name=font/[name].[ext]"
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      vue$: "vue/dist/vue.esm.js"
+    },
+    extensions: ["*", ".js", ".vue", ".json"]
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+    overlay: true
+  },
+  performance: {
+    hints: false
+  },
+  devtool: "#eval-source-map"
+};
+
+if (process.env.NODE_ENV === "production") {
+  module.exports.devtool = "#source-map";
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      "process.env": {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ]);
+}