add: dialog

src/component/dialog/dialog.js

+// component/dialog/dialog.js
+Component({
+  options: {
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    type: {
+      type: String,
+      value: 'alert'
+    },
+    stopMask: {
+      type: Boolean,
+      value: false
+    },
+    show: {
+      type: Boolean,
+      value: false,
+      observer: '_showChange'
+    },
+    dialog: {
+      type: Object,
+      value: null,
+      observer: '_configChange'
+    },
+    showDefalut: {
+      type: Boolean,
+      value: true,
+      observer: '_showDefalutChange'
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    _updateData (data) {
+      if (data) {
+        this.setData(data)
+      }
+    },
+    _showChange (newV, oldV) {
+      if (newV !== oldV) {
+        this._updateData({
+          show: newV
+        })
+      }
+    },
+    _showDefalutChange (newV, oldV) {
+      if (newV !== oldV) {
+        this._updateData({
+          showDefalut: newV
+        })
+      }
+    },
+    _configChange (newV, oldV) {
+      if (newV !== oldV) {
+        this._updateData({
+          config: newV
+        })
+      }
+    },
+    _close (e) {
+      let o = e.currentTarget.dataset
+      if (this.data.stopMask && o.id === 'mask') {
+        return false
+      }
+      this._updateData({
+        show: false
+      })
+    }
+  }
+})

src/component/dialog/dialog.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/dialog/dialog.wxml

+<!--component/dialog/dialog.wxml-->
+<view class='wxy-dialog fade {{show ? "in":""}}'>
+  <view wx:if="{{show}}">
+    <view data-id="mask" class="dialog-mask" capture-catch:touchstart='_close'></view>
+    <view class='dialog-body' wx:if="{{showDefalut && dialog.state !== 'success'}}">
+      <view class='main'>
+        <view class='content' style="background-image: url('{{dialog.image}}');">
+          <view class="">恭喜你，领取成功！</view>
+          <view class="p">可在{{dialog.content}}中查看奖励哦～</view>
+          <view class="tip-text">{{dialog.tip}}</view>
+        </view>
+      </view>
+      <view class="close" bindtap='_close'></view>
+    </view>
+    <view class='dialog-body' bindtap='_close' wx:if="{{showDefalut && dialog.state === 'success'}}">
+      <view wx:if="{{dialog.image}}">
+            <image class="image"  mode="widthFix" src='{{dialog.image}}'></image>
+          </view>
+    </view>
+    <slot name="after"></slot>
+  </view>
+</view>

src/component/dialog/dialog.wxss

+/* component/dialog/dialog.wxss */
+.dialog-mask {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  z-index: 99;
+  background: rgba(0, 0, 0, 0.5);
+  tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: opacity .4s; }
+
+.dialog-body {
+  width: 570rpx;
+  position: fixed;
+  top: 36%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 100;
+  text-align: center;
+  opacity: 1;
+  transition: all .3s ease-out;
+  }
+
+.dialog-body .main {
+  outline: 0;
+  background-clip: padding-box;
+  margin-top: 0; }
+
+.dialog-body .content {
+  height: 680rpx;
+  position: relative;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  padding-top: 180px;}
+
+.dialog-body .image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+
+.dialog-body .p {
+  padding: 20rpx 60rpx;
+  box-sizing: border-box;
+  margin: 0;
+  text-align: center;
+  line-height: 37rpx; 
+  height: 37rpx; 
+  text-align: center;
+  color: rgba(120, 120, 120, 1);
+  font-size: 26rpx; 
+  font-family: PingFangSC-Regular;}
+
+.dialog-body .footer {
+  height: 200rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0;
+  border-radius: 0 0 20rpx 20rpx; }
+
+.dialog-body .tip-text {
+  padding-top: 102rpx;
+  color: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  font-size: 36rpx;
+  font-family: SourceHanSansCN-Medium; 
+  cursor: pointer; }
+
+.dialog-body .close {
+  cursor: pointer;
+  position: absolute;
+  width: 84rpx;
+  height: 84rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  left: 50%;
+  bottom: -160rpx;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmNGMyM2YzYi01MDVjLTM5NDAtYmMzOC0xNmEyZDBhOWI0MzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTFCQzdFQTQwQTQ5MTFFODk2QUI5MTFDNzM4ODNENTUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTFCQzdFQTMwQTQ5MTFFODk2QUI5MTFDNzM4ODNENTUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjJmMjkzOGE1LTVlZmItZDc0NS1hNGM4LTUyZTlmYWYwZmE5YSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpmNGMyM2YzYi01MDVjLTM5NDAtYmMzOC0xNmEyZDBhOWI0MzMiLz4gPC9y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);
+  background-repeat: no-repeat;
+  background-size: cover; }
+
+.fade.in {
+  opacity: 1;
+  transition: opacity .3s linear;
+}
+
+.fade {
+    opacity: 0;
+    transition: opacity .3s linear;
+}
\ No newline at end of file

src/pages/pointDetail/pointDetail.js

@@ -6,10 +6,17 @@ const utils = require('../../utils/util')
 wxService.page({
 
   /**
-   * 页面的初始数据
+   * 页面的初始数据 ../../assets/imgs/point/bgc.png
    */
   data: {
-    imgHeight: 450
+    imgHeight: 450,
+    dialog: {
+      show: true,
+      // image: '../../images/couponPackage/modal-bg.png',
+      image: '../../assets/imgs/point/bgc.png',
+      content: '积分流水',
+      tip: '立即查看'
+    },
   },
 
   /**
@@ -19,6 +26,13 @@ wxService.page({
 
   },
 
+  handleToGet() {
+    let dialog = this.data.dialog
+    dialog.show = true
+    this.setData({
+      dialog
+    })
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

src/pages/pointDetail/pointDetail.json

 {
   "navigationBarTitleText": "集点详情",
   "usingComponents": {
-    "status-img": "/component/statusPoint/statusPoint"
+    "status-img": "/component/statusPoint/statusPoint",
+    "x-dialog":"/component/dialog/dialog"
   }
 }
\ No newline at end of file

src/pages/pointDetail/pointDetail.wxml

@@ -20,7 +20,7 @@
 		 border-radius="{{20}}"
 		/>
 	</view>
-	<view class="info-status-btn available border_box">
+	<view class="info-status-btn available border_box" bindtap="handleToGet">
 		可领取奖励   1  次
 	</view>
 <!-- <view class="info-status-btn unacommpolished border_box">
@@ -30,3 +30,4 @@
 </view>
 <view class="detail-desc" />
 
+<x-dialog dialog="{{dialog}}" show="{{dialog.show}}"></x-dialog>
\ No newline at end of file