mipengine · webzhou · Jun 26, 2019 · Jun 27, 2019 · Jun 27, 2019 · Jun 28, 2019
diff --git a/sites/a.mla.xin/components/mip-bannerapi/README.md b/sites/a.mla.xin/components/mip-bannerapi/README.md
@@ -0,0 +1,63 @@
+# mip-bannerapi
+
+标题|内容
+----|----
+类型|
+支持布局|
+所需脚本| [https://c.mipcdn.com/extensions/platform/v2/a.mla.xin/mip-bannerapi/mip-bannerapi.js](https://c.mipcdn.com/extensions/platform/v2/a.mla.xin/mip-bannerapi/mip-bannerapi.js)
+
+## 说明
+
+扩展官方 mip-carousel 多图轮播，通过json的方式获取数据
+
+## 示例
+
+示例说明
+
+```
+<mip-bannerapi 
+  url="http://cdnbanner.071000.top/api/mlabdjzyjy1/index" bwidth="1920" bheight="465" defer="5000">
+</mip-bannerapi>
+```
+
+## 属性
+
+### url
+
+**获取json的地址**：
+
+**必选项**：是
+
+**单位**：无
+
+**默认值**：#
+
+### bwidth
+
+**轮播图的宽度**：
+
+**必选项**：否
+
+**单位**：px
+
+**默认值**：1920
+
+### bheight
+
+**轮播图的宽度**：
+
+**必选项**：否
+
+**单位**：px
+
+**默认值**：500
+
+### defer
+
+**轮播的间隔时间**：
+
+**必选项**：否
+
+**单位**：px
+
+**默认值**：3000
diff --git a/sites/a.mla.xin/components/mip-bannerapi/example/index.html b/sites/a.mla.xin/components/mip-bannerapi/example/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html mip>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <title>MIP page</title>
+    <link rel="canonical" href="对应的原页面地址">
+    <link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
+    <style mip-custom>
+        .container {
+            margin-top: 200px;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <mip-bannerapi 
+        url="http://cdnbanner.071000.top/api/mlabdjzyjy1/index" bwidth="640" bheight="800" defer="5000"
+    >
+    </mip-bannerapi>
+
+</div>
+<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
+<script src="/mip-bannerapi/mip-bannerapi.js"></script>
+</body>
+</html>
diff --git a/sites/a.mla.xin/components/mip-bannerapi/mip-bannerapi.js b/sites/a.mla.xin/components/mip-bannerapi/mip-bannerapi.js
@@ -0,0 +1,33 @@
+const { util } = MIP
+const { dom } = util
+export default class MIPBannerapi extends MIP.CustomElement {
+  build () {
+    let me = this
+    let url = this.element.getAttribute('url')
+    let width = this.element.getAttribute('bwidth') ? this.element.getAttribute('bwidth') : 1920
+    let height = this.element.getAttribute('bheight') ? this.element.getAttribute('bheight') : 500
+    let defer = this.element.getAttribute('defer') ? this.element.getAttribute('defer') : 5000
+    let carousel = dom.create(`<mip-carousel  autoplay indicator layout="responsive" buttonController indicatorId="mip-carousel-yd" width="${width}" height="${height}" defer="${defer}"></mip-carousel>`)
+    let dot = dom.create(`<div class="mip-carousel-indicator-wrapper"></div>`)
+    let objHtml = ''
+    let dotHtml = ''
+    window.fetch(url).then(function (res) {
+      return res.json()
+    }).then(function (data) {
+      let oData = data.data
+      for (let i = 0; i < oData.length; i++) {
+        objHtml = `<a href="${oData[i].linkto}"><mip-img src="${oData[i].image}" alt="banner"></mip-img></a>` + objHtml
+        if (i === 0) {
+          dotHtml += `<div class="mip-carousel-activeitem mip-carousel-indecator-item"></div>`
+        } else {
+          dotHtml += `<div class="mip-carousel-indecator-item"></div>`
+        }
+      }
+      dotHtml = `<div class="mip-carousel-indicatorDot" id="mip-carousel-yd">` + dotHtml + `</div>`
+      carousel.innerHTML = objHtml
+      dot.innerHTML = dotHtml
+      me.element.appendChild(carousel)
+      me.element.appendChild(dot)
+    })
+  }
+}
diff --git a/sites/a.mla.xin/mip.config.js b/sites/a.mla.xin/mip.config.js
@@ -0,0 +1,31 @@
+/**
+ * @file mip页面项目配置项
+ * @author
+ */
+
+module.exports = {
+  dev: {
+    /**
+     * 启动mip server调试的端口号
+     *
+     * @type {number}
+     */
+    port: 8111,
+
+    /**
+     * 启用调试页面自动刷新
+     *
+     * @type {boolean}
+     */
+    livereload: true,
+
+    /**
+     * server 启动自动打开页面，false 为关闭
+     * 如:
+     * autoopen: '/example/index.html'
+     *
+     * @type {string|boolean}
+     */
+    autoopen: false
+  }
+}
diff --git a/sites/a.mla.xin/package.json b/sites/a.mla.xin/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "mla.xin",
+  "version": "0.0.1",
+  "description": "banner通过json的方式获取",
+  "scripts": {
+    "dev": "mip2 dev",
+    "build": "mip2 build",
+    "lint": "npm run lint:js",
+    "lint:js": "eslint --ext .vue,.js .",
+    "fix": "npm run fix:js",
+    "fix:js": "eslint --ext .vue,.js . --fix"
+  },
+  "author": "mla ([email protected])",
+  "dependencies": {},
+  "devDependencies": {
+    "eslint": "^4.19.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-jsdoc": "^3.7.1",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-standard": "^3.1.0",
+    "eslint-plugin-vue": "^4.5.0"
+  }
+}