ZhaoTongYao
5 years ago
33 changed files with 812 additions and 217 deletions
|
Before Width: | Height: | Size: 126 KiB After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
@ -0,0 +1,91 @@ |
|||
Component({ |
|||
data: { |
|||
visible: false, |
|||
textareaValue: '' |
|||
}, |
|||
properties: { |
|||
noticeVerifyVisible: { |
|||
type: Boolean, |
|||
value: false, |
|||
observer: function (newValue) { |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
} |
|||
}, |
|||
title: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
cancelText: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
confirmText: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
tipVisible: { |
|||
type: Boolean, |
|||
value: false |
|||
}, |
|||
tipValue: { |
|||
type: String, |
|||
value: '*请输入屏蔽该话题的原因' |
|||
} |
|||
}, |
|||
lifetimes: { |
|||
attached () { |
|||
console.log('notice-verify') |
|||
}, |
|||
deattached () { |
|||
|
|||
} |
|||
}, |
|||
pageLifetimes: { |
|||
show () { |
|||
|
|||
}, |
|||
hide () { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
close () { |
|||
this.triggerEvent('close', {data: this.data.textareaValue}) |
|||
this.setData({ |
|||
// visible: !this.data.visible,
|
|||
textareaValue: '' |
|||
}) |
|||
}, |
|||
confirm () { |
|||
if (this.data.textareaValue === '') { |
|||
wx.showToast({ |
|||
title: '原因不能为空', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} |
|||
this.triggerEvent('confirm', {data: this.data.textareaValue}) |
|||
this.setData({ |
|||
// visible: !this.data.visible,
|
|||
textareaValue: '' |
|||
}) |
|||
}, |
|||
textareaInput (e) { |
|||
this.setData({ |
|||
textareaValue: e.detail.value |
|||
}) |
|||
// console.log(this.data.textareaValue)
|
|||
}, |
|||
closeDialog () { |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
}, |
|||
move () { |
|||
|
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
<view class="notice-verify" wx:if="{{visible}}" capture-catch:touchmove="move"> |
|||
<view class="content"> |
|||
<view class="close" bindtap="closeDialog"> |
|||
<!-- <image src="../../images/delete.png" /> --> |
|||
</view> |
|||
<view class="title">{{title}}</view> |
|||
<view class="textarea"> |
|||
<textarea value="{{textareaValue}}" bindinput="textareaInput" placeholder-class="textarea-placeholder" placeholder="屏蔽原因（必填 100字以内）" maxlength="100"/> |
|||
</view> |
|||
<view class="note" wx:if="{{tipVisible}}">{{tipValue}}</view> |
|||
<view class="footer"> |
|||
<view class="unpass" wx:if="{{cancelText != ''}}" bindtap="close">{{cancelText}}</view> |
|||
<view class="pass" wx:if="{{confirmText != ''}}" bindtap="confirm">{{confirmText}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,100 @@ |
|||
.notice-verify { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
background: rgba(0,0,0,0.3); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 1000; |
|||
} |
|||
.notice-verify .content { |
|||
width: 610rpx; |
|||
height: auto; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
} |
|||
.notice-verify .content .close { |
|||
width: 100%; |
|||
height: 62rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
} |
|||
.notice-verify .content .close image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
object-fit:cover; |
|||
position: relative; |
|||
left: 7px; |
|||
top: 2px; |
|||
} |
|||
.notice-verify .content .title { |
|||
font-size: 40rpx; |
|||
color: #333; |
|||
line-height: 57rpx; |
|||
height: 57rpx; |
|||
width:100%; |
|||
text-align:center; |
|||
margin-bottom: 26rpx; |
|||
} |
|||
.notice-verify .content .textarea { |
|||
width: 100%; |
|||
height: 345rpx; |
|||
border-radius: 16rpx; |
|||
background: #f7f7f7; |
|||
box-sizing: border-box; |
|||
padding: 27rpx 17rpx 0; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.notice-verify .content .textarea textarea { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
color: #666; |
|||
} |
|||
.notice-verify .content .textarea .textarea-placeholder { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
line-height: 40rpx; |
|||
} |
|||
.notice-verify .content .note { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
height:58rpx; |
|||
line-height: 58rpx; |
|||
} |
|||
.notice-verify .content .footer { |
|||
width: 100%; |
|||
height: 107rpx; |
|||
box-sizing: border-box; |
|||
padding: 15rpx 0; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
border-top: 1rpx solid #eaeaea; |
|||
} |
|||
.notice-verify .content .unpass { |
|||
height: 100%; |
|||
line-height: 77rpx; |
|||
font-size: 36rpx; |
|||
flex: 1; |
|||
color: #999; |
|||
text-align: center; |
|||
} |
|||
.notice-verify .content .unpass + .pass { |
|||
border-left: 1rpx solid #eaeaea; |
|||
} |
|||
.notice-verify .content .pass { |
|||
height: 100%; |
|||
line-height: 77rpx; |
|||
font-size: 36rpx; |
|||
flex: 1; |
|||
color: #04BCA0; |
|||
text-align: center; |
|||
} |
|||
|
After Width: | Height: | Size: 485 B |
Loading…
Reference in new issue