molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-03-09 16:44:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.1.2

Browse Source
This commit is contained in:
Weilanwl
2019-03-28 23:08:35 +08:00
parent 89817a88e8
commit bb889509c0
108 changed files with 3446 additions and 4082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
demo/pages/component/modal/modal.js
View File

@@ -1,13 +1,42 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
CustomBar: app.globalData.CustomBar,
checkbox: [{
value: 0,
name: '10元',
checked: false,
hot: false,
}, {
value: 1,
name: '20元',
checked: true,
hot: false,
}, {
value: 2,
name: '30元',
checked: true,
hot: true,
}, {
value: 3,
name: '60元',
checked: false,
hot: true,
}, {
value: 4,
name: '80元',
checked: false,
hot: false,
}, {
value: 5,
name: '100元',
checked: false,
hot: false,
}]
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
@@ -15,4 +44,17 @@ Page({
modalName: null
})
},
});
ChooseCheckbox(e) {
let items = this.data.checkbox;
let values = e.currentTarget.dataset.value;
for (let i = 0, lenI = items.length; i < lenI; ++i) {
if (items[i].value == values) {
items[i].checked = !items[i].checked;
break
}
}
this.setData({
checkbox: items
})
}
})

194
demo/pages/component/modal/modal.wxml
View File

@@ -1,76 +1,73 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 模态窗口
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">模态窗口</view>
</cu-custom>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 普通窗口
<view class="action">
<text class="icon-title text-orange "></text> 普通窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="Modal">Modal</button>
</view>
</view>
<view class="cu-modal {{modalName=='Modal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="content">Modal标题</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class='padding-xl'>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 底部窗口
<view class="action">
<text class="icon-title text-orange "></text> 底部窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="bottomModal">Bottom</button>
</view>
</view>
<view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
<view class="action text-green">确定</view>
<view class="action text-blue" bindtap="hideModal">取消</view>
</view>
<view class='padding-xl'>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 对话窗口
<view class="action">
<text class="icon-title text-orange "></text> 对话窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
<button class='cu-btn bg-blue shadow margin-left' bindtap="showModal" data-target="DialogModal2">Dialog</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DialogModal1">Dialog</button>
<button class="cu-btn bg-blue shadow margin-left" bindtap="showModal" data-target="DialogModal2">Dialog</button>
</view>
</view>
<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="content">Modal标题</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class='padding-xl'>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white justify-end">
<view class='action'>
<button class='cu-btn line-green text-green' bindtap='hideModal'>取消</button>
<button class='cu-btn bg-green margin-left' bindtap='hideModal'>确定</button>
<view class="action">
<button class="cu-btn line-green text-green" bindtap="hideModal">取消</button>
<button class="cu-btn bg-green margin-left" bindtap="hideModal">确定</button>
</view>
</view>
@@ -80,65 +77,65 @@
<view class="cu-modal {{modalName=='DialogModal2'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="content">Modal标题</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class='padding-xl'>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white">
<view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
<text class='icon-moneybag'></text>微信支付</view>
<view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>确定</view>
<view class="action margin-0 flex-sub text-green " bindtap="hideModal">
<text class="icon-moneybag"></text>微信支付</view>
<view class="action margin-0 flex-sub text-green solid-left" bindtap="hideModal">取消</view>
<view class="action margin-0 flex-sub solid-left" bindtap="hideModal">确定</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 图片窗口
<view class="action">
<text class="icon-title text-orange "></text> 图片窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="Image">Image</button>
</view>
</view>
<view class="cu-modal {{modalName=='Image'?'show':''}}">
<view class="cu-dialog">
<view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
<view class="cu-bar justify-end text-white">
<view class='action' bindtap='hideModal'>
<text class='icon-close '></text>
<view class="action" bindtap="hideModal">
<text class="icon-close "></text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>我知道了</view>
<view class="action margin-0 flex-sub solid-left" bindtap="hideModal">我知道了</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 单选窗口
<view class="action">
<text class="icon-title text-orange "></text> 单选窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="RadioModal">Radio</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="RadioModal">Radio</button>
</view>
</view>
<view class="cu-modal {{modalName=='RadioModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-modal {{modalName=='RadioModal'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog" catchtap>
<radio-group class="block">
<view class='cu-list menu text-left'>
<view class='cu-item' wx:for="{{5}}" wx:key>
<label class='flex justify-between align-center flex-sub'>
<view class='flex-sub'>Item {{index +1}}</view>
<radio class='round'></radio>
<view class="cu-list menu text-left">
<view class="cu-item" wx:for="{{5}}" wx:key>
<label class="flex justify-between align-center flex-sub">
<view class="flex-sub">Item {{index +1}}</view>
<radio class="round"></radio>
</label>
</view>
</view>
@@ -147,41 +144,43 @@
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 多选窗口
<view class="action">
<text class="icon-title text-orange "></text> 多选窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="ChooseModal">Choose</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="ChooseModal">Choose</button>
</view>
</view>
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog" catchtap>
<view class="cu-bar bg-white">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
<view class="action text-blue" bindtap="hideModal">取消</view>
<view class="action text-green" bindtap="hideModal">确定</view>
</view>
<view class='grid col-3 padding-sm'>
<view wx:for="{{9}}" class='padding-xs' wx:key>
<button class='cu-btn orange lg block {{index == 2?"bg":"line"}}-orange'>Item {{index + 1}}</button>
<view class="grid col-3 padding-sm">
<view wx:for="{{checkbox}}" class="padding-xs" wx:key="{{index}}">
<button class="cu-btn orange lg block {{item.checked?'bg-orange':'line-orange'}}" bindtap="ChooseCheckbox" data-value="{{item.value}}"> {{item.name}}
<view class="cu-tag sm round {{item.checked?'bg-white text-orange':'bg-orange'}}" wx:if="{{item.hot}}">HOT</view>
</button>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 侧边抽屉
<view class="action">
<text class="icon-title text-orange "></text> 侧边抽屉
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DrawerModalL">Left</button>
<button class='cu-btn bg-blue shadow margin-left' bindtap="showModal" data-target="DrawerModalR">Right</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DrawerModalL">Left</button>
<button class="cu-btn bg-blue shadow margin-left" bindtap="showModal" data-target="DrawerModalR">Right</button>
</view>
</view>
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
<view class='cu-list menu text-left'>
<view class='cu-item arrow' wx:for="{{5}}" wx:key>
<view class='content'>
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
<view class="cu-list menu text-left">
<view class="cu-item arrow" wx:for="{{5}}" wx:key>
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
@@ -189,35 +188,12 @@
</view>
</view>
<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
<view class="cu-list menu menu-avatar text-left">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-tag badge">99+</view>
</view>
<view class='content'>
<view class='text-grey'>文晓港
<view class="cu-tag round bg-orange sm">SVIP</view>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
<view class="cu-list menu text-left">
<view class="cu-item arrow" wx:for="{{5}}" wx:key>
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
</view>