去除确认订单页线上购买 review by 杨延青
Showing
5 changed files
with
183 additions
and
1 deletions
src/components/tip-dialog/index.js
0 → 100644
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 | +}) |
src/components/tip-dialog/index.json
0 → 100644
src/components/tip-dialog/index.wxml
0 → 100644
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 | + |
src/components/tip-dialog/index.wxss
0 → 100644
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 | +} |
-
Please register or login to post a comment