molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-06-08 15:14:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

xiaogang

Browse Source 
ColorUI 源代码
This commit is contained in:
weilanwl
2018-06-19 21:21:54 +08:00
parent 9e6720d0dc
commit 3834693e84
114 changed files with 4477 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/form/form.js
+171
View File
@@ -0,0 +1,171 @@
// pages/form/form.js
Page({
data: {
array: [' 禁止换行，超出容器部分截断（以 ... 结束）', '中国', '巴西', '日本'],
index: 0,
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
radio: [
{ name: 'USA', value: '美国' },
{ name: 'CHN', value: '中国', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '澳大利亚' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' },
{ name: 'TUR', value: '哈萨克斯坦' },
{ name: 'TUR', value: '法国' },
{ name: 'BRA', value: '巴西' },
{ name: 'ENG', value: '英国' },
{ name: 'TUR', value: '法国' }
],
multiIndex: [0, 0, 0],
date: '2018-02-03',
time: '12:01',
region: ['广东省', '广州市', '海珠区'],
customItem: '全部'
},
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
bindDateChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
},
showModal: function (e) {
var showName = e.currentTarget.dataset.modal;
this.setData({
modalName: showName
})
},
closeModal: function (e) {
this.setData({
modalName: null
})
},
uploadimg: function () {
var that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var tempFilePaths = res.tempFilePaths
that.setData({
chooseimg: true,
tempFilePaths: tempFilePaths
})
}
})
},
viewUploadimg: function (e) {
var url = this.data.tempFilePaths;
wx.previewImage({
urls: url
})
},
uploadImage: function (e) {
var that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var uploadImage = res.tempFilePaths;
that.setData({
uploadImage: uploadImage
})
}
})
}
})
pages/form/form.json
+3
View File
@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "表单/Form"
}
pages/form/form.wxml
+266
View File
@@ -0,0 +1,266 @@
<form>
<view class="form-box form-avatar-box">
<view class="form-avatar" bindtap="uploadPhoto" style='background-image:url({{src}})'>
<text>修改/上传</text>
</view>
<view class="form-avatar-item">
<view class="form-item">
<input type="text" class="form-input" name="title" value="" placeholder="输入框的描述" />
</view>
<view class="form-item">
<input type="text" class="form-input" name="title" value="" placeholder="输入框的描述" />
<view class='form-input-btn'>
<button class='success btn sm'>获取验证码</button>
</view>
</view>
</view>
</view>
<view class='form-box'>
<view class='form-item'>
<view class='form-title cur form-title-sm'>
两字
</view>
<input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
</view>
<view class='form-item'>
<view class='form-title cur'>
输入框
</view>
<input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
</view>
<view class='form-item'>
<view class='form-title'>
输入框项
</view>
<view class='form-input'>
<input class='' type="text" placeholder="输入框的描述"></input>
</view>
<view class='form-input-btn'>
<text class='iconfont icon-locationfill warning-text'></text>
</view>
</view>
<view class='form-item'>
<view class='form-title'>
输入框
</view>
<input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
<view class='form-input-btn'>
<button class='success btn sm'>获取验证码</button>
</view>
</view>
</view>
<view class='form-box'>
<view class='form-item'>
<view class='form-title cur'>
单列选择
</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
{{array[index]}}
</view>
</picker>
</view>
<view class='form-item'>
<view class='form-title'>
多列选择
</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class='form-item'>
<view class='form-title'>
时间选择
</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
{{time}}
</view>
</picker>
</view>
<view class='form-item'>
<view class='form-title'>
日期选择
</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="bindDateChange">
<view class="picker">
{{date}}
</view>
</picker>
</view>
<view class='form-item'>
<view class='form-title'>
地址选择
</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
</view>
<view class='form-box'>
<view class='form-item'>
<view class='form-title cur'>
单选框
</view>
<view class='form-arrow' bindtap='showModal' data-modal="radioModal">
单选框
</view>
<view class="modal-box {{modalName=='radioModal'?'cur':''}}">
<view class='modal-dialog'>
<view class="modal-title">
<text>单选框</text>
</view>
<scroll-view class='modal-bd' scroll-y="true" style='max-height:500rpx;'>
<radio-group class="list-double-col list-box" bindchange="radioChange">
<label class="list-li" wx:for="{{radio}}">
<view class='list-text'>{{item.value}}</view>
<radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
</label>
</radio-group>
</scroll-view>
<view class='modal-option'>
<view class='modal-option-btn' bindtap='closeModal'>取消</view>
<view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
</view>
</view>
</view>
</view>
<view class='form-item'>
<view class='form-title cur'>
复选框
</view>
<view class='form-arrow' bindtap='showModal' data-modal="checkboxModal">
复选框
</view>
<view class="modal-box {{modalName=='checkboxModal'?'cur':''}}">
<view class='modal-dialog'>
<view class="modal-title">
<text>复选框</text>
<view class='bar-close badge danger round' bindtap='closeModal'>
<text class='iconfont icon-close'></text>
</view>
</view>
<scroll-view class='modal-bd' scroll-y="true" style='max-height:500rpx;'>
<checkbox-group class="list-double-col list-box" bindchange="checkboxChange">
<label class="list-li" wx:for="{{radio}}">
<view class='list-text'>{{item.value}}</view>
<checkbox class='list-icon' value="{{item.name}}" checked="{{item.checked}}" />
</label>
</checkbox-group>
</scroll-view>
<view class='modal-option'>
<view class='modal-option-btn' bindtap='closeModal'>取消</view>
<view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
</view>
</view>
</view>
</view>
<view class='form-item'>
<view class='form-title cur'>
两级联动
</view>
<view class='form-arrow' bindtap='showModal' data-modal="doubleModal">
两级联动
</view>
<view class="modal-box {{modalName=='doubleModal'?'cur':''}}">
<view class='modal-dialog'>
<view class="modal-title">
<text>两级联动</text>
</view>
<view class='modal-bd double-chose'>
<scroll-view scroll-y class="double-chose-first" style='height:640rpx;width: 400rpx;'>
<view class="cur">北京</view>
<view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
</scroll-view>
<scroll-view scroll-y class="double-chose-last" style='height:640rpx;'>
<view class="cur">北京</view>
<view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
</scroll-view>
</view>
<view class='modal-option'>
<view class='modal-option-btn' bindtap='closeModal'>取消</view>
<view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
</view>
</view>
</view>
</view>
<view class='form-item'>
<view class='form-title cur'>
单项选择
</view>
<view class='form-arrow' bindtap='showModal' data-modal="singleModal">
单项选择
</view>
<view class="modal-box {{modalName=='singleModal'?'cur':''}}">
<view class='modal-dialog'>
<view class="modal-title">
<text>单项选择</text>
</view>
<scroll-view class='modal-bd' scroll-y="true" style='max-height:800rpx;'>
<view class='single-modal'>
<view class="single-modal-item {{item.checked?'cur':''}}" wx:for="{{radio}}" bindtap='closeModal'>{{item.value}}</view>
</view>
</scroll-view>
<view class='modal-option'>
<view class='modal-option-btn' bindtap='closeModal'>取消</view>
</view>
</view>
</view>
</view>
<view class="form-item form-textarea {{modalName==null?'':'hide'}}">
<view class='form-title cur'>
文本框
</view>
<textarea placeholder='多行文本输入框' maxlength="-1"></textarea>
</view>
</view>
<view class='form-box'>
<view class='form-item'>
<view class='form-title cur'>
单图上传
</view>
<view class='form-arrow' wx:if="{{chooseimg}}" bindtap='viewUploadimg'>
<text class='success-text iconfont icon-roundcheckfill'></text> 已上传
<text class='gray-text fr'>预览</text>
</view>
<view class='form-arrow form-add' bindtap='uploadimg' wx:else>
请选择图片
</view>
</view>
<view class='form-item form-upload'>
<view class='form-title cur'>
多图上传
</view>
<view class="lattice-image">
<view>
<image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='aspectFill'></image>
<view class='iconfont icon-close'></view>
</view>
<view class='lattice-btn'>
<text class='iconfont icon-cameraadd'></text>
</view>
</view>
</view>
</view>
<view class='form-box'>
<view class="form-item form-upload {{modalName==null?'':'hide'}}">
<textarea placeholder='多行文本输入框' maxlength="-1"></textarea>
<view class="lattice-image">
<view>
<image src='http://image.weilanwl.com/img/3x4-1.jpg' mode='aspectFill'></image>
<view class='iconfont icon-close'></view>
</view>
<view class='lattice-btn'>
<text class='iconfont icon-cameraadd'></text>
</view>
</view>
</view>
</view>
</form>
pages/form/form.wxss
+3
View File
@@ -0,0 +1,3 @@
page {
background: #f1f1f1;
}