dialogGrass

src/component/dialogGrass/dialog.js

+// component/dialog/dialog.js
+const wxService = require('../../utils/wxService')
+
+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: {
+    _handleGo() {
+      this.triggerEvent('handleGo')
+    },
+    _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
+      })
+    
+    },
+    confirm(){
+      this._updateData({
+        show: false
+      })
+      // 触发父级事件
+      wxService.nextTick(() => {
+        this.triggerEvent('_closeDialog')
+      })
+    }
+  }
+})

src/component/dialogGrass/dialog.json

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

src/component/dialogGrass/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' bindtap='_handleGo'>
+        <view class="main-close" bindtap='_close'>x</view>
+        <view class='content'>
+          <text>确认删除此作品吗?</text>
+          <view class="check-del" bindtap='confirm'>确认</view>
+        </view>
+      </view>
+
+    </view>
+    <slot name="after"></slot>
+  </view>
+</view>
+

src/component/dialogGrass/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-color: #FFF;
+  background-clip: padding-box;
+  border-radius: 15rpx;
+  margin-top: 0; }
+
+.dialog-body .content {
+  height: 380rpx;
+  position: relative;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  padding-top: 50rpx;
+}
+.dialog-body .main-close {
+  height: 100rpx;
+  box-sizing: border-box;
+  text-align: right;
+  padding: 20px;
+}
+.check-del {
+  width: 416rpx;
+  height: 88rpx;
+  line-height: 88rpx;
+  color: #fff;
+  text-align: center;
+  border-radius: 15rpx;
+  background-color: rgba(255, 51, 51, 1);
+  box-shadow: 0px 2px 9px 0px rgba(255, 51, 51, 0.6);
+  margin: 0 auto;
+  margin-top: 100rpx;
+}
+
+.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: 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;
+}