From 6960827a55fbb7edd6bd9fc3b3c95795ffac6250 Mon Sep 17 00:00:00 2001
From: handongxun <handongxun@dcloud.io>
Date: Fri, 27 Dec 2019 17:58:01 +0800
Subject: [PATCH] add <ad>

---
 .../app-plus/view/components/ad/index.vue     | 182 ++++++++++++++++++
 .../app-plus/view/framework/plugins/data.js   |   5 +-
 2 files changed, 185 insertions(+), 2 deletions(-)
 create mode 100644 src/platforms/app-plus/view/components/ad/index.vue

diff --git a/src/platforms/app-plus/view/components/ad/index.vue b/src/platforms/app-plus/view/components/ad/index.vue
new file mode 100644
index 000000000..9cde5f14a
--- /dev/null
+++ b/src/platforms/app-plus/view/components/ad/index.vue
@@ -0,0 +1,182 @@
+<template>
+  <uni-ad
+    v-bind="attrs"
+    v-on="$listeners">
+    <div
+      ref="container"
+      class="uni-ad-container" />
+  </uni-ad>
+</template>
+<script>
+import {
+  subscriber
+} from 'uni-mixins'
+import native from '../../mixins/native'
+
+const methods = [
+  'draw'
+]
+
+const attrs = [
+  'adpid',
+  'data'
+]
+
+export default {
+  name: 'Ad',
+  mixins: [subscriber, native],
+  props: {
+    adpid: {
+      type: [Number, String],
+      default: ''
+    },
+    data: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      hidden: false
+    }
+  },
+  computed: {
+    attrs () {
+      const obj = {}
+      attrs.forEach(key => {
+        let val = this.$props[key]
+        val = key === 'src' ? this.$getRealPath(val) : val
+        obj[key.replace(/[A-Z]/g, str => '-' + str.toLowerCase())] = val
+      })
+      return obj
+    }
+  },
+  watch: {
+    hidden (val) {
+      this.adView && this.adView[val ? 'hide' : 'show']()
+    },
+    adpid (val) {
+      if (val) {
+        this._loadData(val)
+      }
+    },
+    data (val) {
+      if (val) {
+        this._fillData(val)
+      }
+    }
+  },
+  mounted () {
+    let adStyle = Object.assign({
+      id: 'AdView' + Date.now()
+    }, this.position)
+    let adView = this.adView = plus.ad.createAdView(adStyle)
+    adView.interceptTouchEvent(false)
+    plus.webview.currentWebview().append(adView)
+    if (this.hidden) {
+      adView.hide()
+    }
+    this.$watch('attrs', () => {
+      this._request()
+    }, {
+      deep: true
+    })
+    this.$watch('position', () => {
+      this.adView && this.adView.setStyle(this.position)
+    }, {
+      deep: true
+    })
+    // 模板渲染有效
+    adView.setDislikeListener && adView.setDislikeListener((data) => {
+      this.adView && this.adView.close()
+      this.$refs.container.style.height = '0px'
+
+      this._updateView()
+
+      this.$trigger('close', {}, data)
+    })
+    adView.setRenderingListener && adView.setRenderingListener((data) => {
+      if (data.result === 0) {
+        this.$refs.container.style.height = data.height + 'px'
+        this._updateView()
+      } else {
+        this.$trigger('error', {}, {
+          errCode: data.result
+        })
+      }
+    })
+    // 仅 Android 下载类广告
+    adView.setDownloadListener && adView.setDownloadListener((data) => {
+      this.$trigger('downloadchange', {}, data)
+    })
+    this._request()
+  },
+  beforeDestroy () {
+    delete this.adView
+  },
+  methods: {
+    _handleSubscribe ({
+      type,
+      data = {}
+    }) {
+      if (methods.includes(type)) {
+        this.adView && this.adView[type](data)
+      }
+    },
+    _request () {
+      if (!this.adView) {
+        return
+      }
+
+      if (this.data) {
+        this._fillData(this.data)
+      } else if (this.adpid) {
+        this._loadData()
+      }
+    },
+    _loadData (adpid) {
+      plus.ad.getAds({
+        adpid: adpid || this.adpid,
+        count: 1,
+        width: this.position.width
+      },
+      (res) => {
+        this._fillData(res[0])
+      },
+      (err) => {
+        this.$trigger('error', {}, {
+          errCode: err.code,
+          errMsg: err.message
+        })
+      })
+    },
+    _fillData (data) {
+      this.adView.renderingBind(data)
+
+      // const height = plus.ad.measureAdHeight(this.position.width.replace('px', ''), data)
+      // this.$refs.container.style.height = height + 'px'
+
+      this.$trigger('load', {}, {})
+    },
+    _updateView () {
+      window.dispatchEvent(new CustomEvent('updateview'))
+    }
+  }
+}
+</script>
+
+<style>
+  uni-ad {
+    display: block;
+    overflow: hidden;
+  }
+
+  uni-ad[hidden] {
+    display: none;
+  }
+
+  uni-ad .uni-ad-container {
+    width: 100%;
+    min-height: 1px;
+  }
+</style>
diff --git a/src/platforms/app-plus/view/framework/plugins/data.js b/src/platforms/app-plus/view/framework/plugins/data.js
index c2acdeb00..eb1ee2d83 100644
--- a/src/platforms/app-plus/view/framework/plugins/data.js
+++ b/src/platforms/app-plus/view/framework/plugins/data.js
@@ -69,7 +69,7 @@ function broadcast (vm, componentName, eventName, ...params) {
   })
 }
 
-const NATIVE_COMPONENTS = ['Camera', 'LivePlayer', 'LivePusher', 'Map', 'Video', 'CoverView', 'CoverImage']
+const NATIVE_COMPONENTS = ['Camera', 'LivePlayer', 'LivePusher', 'Map', 'Video', 'CoverView', 'CoverImage', 'Ad']
 
 function updateView () {
   const pages = getCurrentPages()
@@ -81,7 +81,8 @@ function updateView () {
   )
 }
 
-window.addEventListener('resize', updateView)
+window.addEventListener('resize', updateView)
+window.addEventListener('updateview', updateView)
 
 function vdSync ({
   data,
-- 
GitLab