Authored by bevishuang

去除确认订单页线上购买 review by 杨延青

1 { 1 {
2 "component": true, 2 "component": true,
3 "usingComponents": { 3 "usingComponents": {
4 - "dialog": "../../components/dialog/dialog" 4 + "dialog": "../../components/tip-dialog/index"
5 } 5 }
6 } 6 }
  1 +// src/components/dialog/dialog.js
  2 +Component({
  3 + options: {
  4 + multipleSlots: true // 在组件定义时的选项中启用多slot支持
  5 + },
  6 + /**
  7 + * 组件的属性列表
  8 + * 用于组件自定义设置
  9 + */
  10 + properties: {
  11 + // 弹窗标题
  12 + title: { // 属性名
  13 + type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
  14 + value: '标题' // 属性初始值(可选),如果未指定则会根据类型选择一个
  15 + },
  16 + // 弹窗内容
  17 + content: {
  18 + type: String,
  19 + value: '弹窗内容'
  20 + },
  21 + // 弹窗取消按钮文字
  22 + cancelText: {
  23 + type: String,
  24 + value: '取消'
  25 + },
  26 + // 弹窗确认按钮文字
  27 + confirmText: {
  28 + type: String,
  29 + value: '确定'
  30 + }
  31 + },
  32 +
  33 + /**
  34 + * 私有数据,组件的初始数据
  35 + * 可用于模版渲染
  36 + */
  37 + data: {
  38 + // 弹窗显示控制
  39 + isShow: false
  40 + },
  41 +
  42 + /**
  43 + * 组件的方法列表
  44 + * 更新属性和数据的方法与更新页面数据的方法类似
  45 + */
  46 + methods: {
  47 + /*
  48 + * 公有方法
  49 + */
  50 +
  51 + _showChange(isShow) {
  52 + console.log("===isShow==" + isShow)
  53 + this.setData({ isShowLeft: isShow })
  54 +
  55 + },
  56 +
  57 + //隐藏弹框
  58 + hideDialog() {
  59 + this.setData({
  60 + isShow: !this.data.isShow
  61 + })
  62 + },
  63 + //展示弹框
  64 + showDialog() {
  65 + this.setData({
  66 + isShow: !this.data.isShow
  67 + })
  68 + },
  69 + /*
  70 + * 内部私有方法建议以下划线开头
  71 + * triggerEvent 用于触发事件
  72 + */
  73 + _cancelEvent() {
  74 + this.triggerEvent("cancelEvent")
  75 + },
  76 + _confirmEvent() {
  77 + this.triggerEvent("confirmEvent");
  78 + }
  79 + }
  80 +})
  1 +{
  2 + "component": true,
  3 + "usingComponents": {}
  4 +}
  1 +<!--src/components/tip-dialog/index.wxml-->
  2 +<!--src/components/dialog/dialog.wxml-->
  3 +<view class='wx_dialog_container' hidden="{{!isShow}}">
  4 + <view class='wx-mask'></view>
  5 + <view class='wx-dialog'>
  6 + <view class='wx-dialog-content'>{{ content }}</view>
  7 + <view class='wx-dialog-footer'>
  8 + <view class='wx-dialog-btn' bindtap="_confirmEvent">{{ confirmText }}</view>
  9 + </view>
  10 + </view>
  11 +</view>
  12 +
  1 +/* src/components/tip-dialog/index.wxss */
  2 +/* src/components/dialog/dialog.wxss */
  3 +.wx-mask{
  4 + position: fixed;
  5 + z-index: 1000;
  6 + top: 0;
  7 + right: 0;
  8 + left: 0;
  9 + bottom: 0;
  10 + background: rgba(0, 0, 0, 0.3);
  11 +}
  12 +.wx-dialog{
  13 + position: fixed;
  14 + z-index: 5000;
  15 + width: 560rpx;
  16 + top: 50%;
  17 + left: 50%;
  18 + -webkit-transform: translate(-50%, -50%);
  19 + transform: translate(-50%, -50%);
  20 + background-color: #FFFFFF;
  21 + text-align: center;
  22 + border-radius: 3rpx;
  23 + overflow: hidden;
  24 +}
  25 +.wx-dialog-title{
  26 + font-size: 30rpx;
  27 + padding: 15rpx 15rpx 5rpx;
  28 +}
  29 +.wx-dialog-content{
  30 + height: 240rpx;
  31 + font-size: 30rpx;
  32 + display:flex;
  33 + align-items:center;/*垂直居中*/
  34 + justify-content: center;/*水平居中*/
  35 + margin: 0 50rpx;
  36 +}
  37 +.wx-dialog-footer{
  38 + display: flex;
  39 + align-items: center;
  40 + position: relative;
  41 + height: 100rpx;
  42 + font-size: 30rpx;
  43 +}
  44 +.wx-dialog-footer::before{
  45 + content: '';
  46 + position: absolute;
  47 + left: 0;
  48 + top: 0;
  49 + right: 0;
  50 + height: 1px;
  51 + border-top: 1rpx solid #D5D5D6;
  52 + color: #D5D5D6;
  53 + -webkit-transform-origin: 0 0;
  54 + transform-origin: 0 0;
  55 + -webkit-transform: scaleY(0.5);
  56 + transform: scaleY(0.5);
  57 +}
  58 +.wx-dialog-btn{
  59 + display: block;
  60 + -webkit-flex: 1;
  61 + flex: 1;
  62 + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  63 + position: relative;
  64 + height:100%;
  65 + line-height:100rpx;
  66 +}
  67 +.wx-dialog-footer .wx-dialog-btn:nth-of-type(1){
  68 + color: #000;
  69 +}
  70 +.wx-dialog-footer .wx-dialog-btn:nth-of-type(2){
  71 + color: #000;
  72 +}
  73 +.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{
  74 + content: " ";
  75 + position: absolute;
  76 + left: 0;
  77 + top: 0;
  78 + width: 1rpx;
  79 + bottom: 0;
  80 + border-left: 2rpx solid #D5D5D6;
  81 + color: #D5D5D6;
  82 + -webkit-transform-origin: 0 0;
  83 + transform-origin: 0 0;
  84 + -webkit-transform: scaleX(0.5);
  85 + transform: scaleX(0.5);
  86 +}