Initial Commit
This commit is contained in:
quantulr
56
dist/step/index.js
vendored
Normal file
56
dist/step/index.js
vendored
Normal file
@ -0,0 +1,56 @@
|
||||
Component({
|
||||
externalClasses: ['i-class'],
|
||||
properties: {
|
||||
status: {
|
||||
type: String,
|
||||
//wait、process、finish、error
|
||||
value: ''
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
options: {
|
||||
// 在组件定义时的选项中启用多slot支持
|
||||
multipleSlots: true
|
||||
},
|
||||
relations: {
|
||||
'../steps/index': {
|
||||
type: 'parent'
|
||||
}
|
||||
},
|
||||
data: {
|
||||
//step length
|
||||
len: 1,
|
||||
//current in step index
|
||||
index: 0,
|
||||
//parent component select current index
|
||||
current: 0,
|
||||
//css direction
|
||||
direction: 'horizontal'
|
||||
},
|
||||
methods: {
|
||||
updateDataChange(options) {
|
||||
this.setData({
|
||||
len: options.len,
|
||||
index: options.index,
|
||||
current: options.current,
|
||||
direction: options.direction
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
3
dist/step/index.json
vendored
Normal file
3
dist/step/index.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
82
dist/step/index.wxml
vendored
Normal file
82
dist/step/index.wxml
vendored
Normal file
@ -0,0 +1,82 @@
|
||||
<view class="i-class i-step-item {{parse.getClass(status,current,index)}} {{ direction === 'vertical' ? 'i-step-vertical' : 'i-step-horizontal' }}" style="{{parse.getItemStyle(len,direction)}}">
|
||||
<view class="i-step-item-ico">
|
||||
<view class="i-step-ico tctc" wx:if="{{parse.noIco(status,current,index,icon) }}">
|
||||
<view class="erer"></view>
|
||||
</view>
|
||||
<view class="i-step-ico" wx:else style='height:12rpx;'>
|
||||
<!-- <i-icon i-class="i-step-ico-in" type="{{parse.getIcoClass(status,icon)}}"></i-icon> -->
|
||||
<image src="/icon/qr.png" style='width:30rpx;height:30rpx;'></image>
|
||||
</view>
|
||||
<view class="i-step-line i-donger" wx:if="{{index==0}}"></view>
|
||||
<view class="i-step-line" wx:if="{{ index !== len - 1&&index!==0}}"></view>
|
||||
</view>
|
||||
<view class="i-step-item-main">
|
||||
<!-- <view class="i-step-item-date" wx:if="{{date!== ''}}">
|
||||
{{date}}
|
||||
</view>
|
||||
<view class="i-step-item-date" wx:else style='margin-right:80rpx;'>
|
||||
<slot name="date" class="111"></slot>
|
||||
</view> -->
|
||||
<view style='flex:1'>
|
||||
<view class="i-step-item-title" wx:if="{{title !== ''}}">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="i-step-item-title" wx:else>
|
||||
<slot name="title"></slot>
|
||||
</view>
|
||||
<view class="i-step-item-content" wx:if="{{content !== ''}}">
|
||||
{{content}}
|
||||
</view>
|
||||
<view class="i-step-item-content" wx:else>
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<wxs module="parse">
|
||||
var allStatus = ['wait', 'process', 'finish', 'error'];
|
||||
module.exports = {
|
||||
noIco: function(status, current, index, icon) {
|
||||
var aindex = allStatus.indexOf(status);
|
||||
var noIcon = true;
|
||||
if (index < current || icon !== '') {
|
||||
noIcon = false;
|
||||
}
|
||||
return noIcon;
|
||||
},
|
||||
getIcoClass: function(status, ico) {
|
||||
var class = '';
|
||||
if (status === 'error') {
|
||||
class = 'close';
|
||||
} else {
|
||||
class = 'right';
|
||||
}
|
||||
if (ico !== '') {
|
||||
class = ico;
|
||||
}
|
||||
return class;
|
||||
},
|
||||
getItemStyle: function(len, direction) {
|
||||
if (direction === 'horizontal') {
|
||||
return 'width :' + 100 / len + '%';
|
||||
} else {
|
||||
return 'width : 100%;';
|
||||
}
|
||||
},
|
||||
getClass: function(status, current, index) {
|
||||
//wait、process、finish、error
|
||||
var startClass = 'i-step-'
|
||||
var classes = '';
|
||||
var cindex = allStatus.indexOf(status);
|
||||
if (cindex !== -1) {
|
||||
classes = startClass + allStatus[cindex];
|
||||
}
|
||||
if (index < current) {
|
||||
classes = startClass + 'finish';
|
||||
} else if (index === current) {
|
||||
classes = startClass + 'process';
|
||||
}
|
||||
return classes;
|
||||
}
|
||||
}
|
||||
</wxs>
|
||||
167
dist/step/index.wxss
vendored
Normal file
167
dist/step/index.wxss
vendored
Normal file
@ -0,0 +1,167 @@
|
||||
.i-step-ico {
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 0 auto;
|
||||
/* border: #dddee1 solid 1px; */
|
||||
}
|
||||
|
||||
.i-step-ico-in {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.i-step-line {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 12px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dddee1;
|
||||
}
|
||||
|
||||
.i-step-horizontal .i-step-ico::after {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 23px;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.i-step-horizontal .i-step-item-main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.i-step-horizontal .i-step-ico::before {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: -11px;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.i-step-ico {
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.i-step-process .i-step-ico {
|
||||
/* border: #2d8cf0 solid 1px; */
|
||||
color: #fff;
|
||||
/* background: #72B34B; */
|
||||
}
|
||||
|
||||
.i-step-wait .i-step-ico {
|
||||
border: #e9eaec solid 1px;
|
||||
color: #e9eaec;
|
||||
}
|
||||
|
||||
.i-step-wait .i-step-line {
|
||||
background: #72B34B;
|
||||
}
|
||||
|
||||
.i-step-finish .i-step-ico {
|
||||
/* border: #2d8cf0 solid 1px; */
|
||||
/* color: #2d8cf0; */
|
||||
}
|
||||
|
||||
.i-step-finish .i-step-line {
|
||||
/* background: #72B34B; */
|
||||
}
|
||||
|
||||
.i-step-error .i-step-ico {
|
||||
border: #ed3f14 solid 1px;
|
||||
color: #ed3f14;
|
||||
}
|
||||
|
||||
.i-step-error .i-step-line {
|
||||
background: #ed3f14;
|
||||
}
|
||||
|
||||
.i-step-item {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.i-step-item-ico {
|
||||
width: 100%;
|
||||
/* height: 40rpx; */
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.i-step-item-main {
|
||||
margin-top: 10px;
|
||||
clear: both;
|
||||
}
|
||||
.erer{
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background-color: #d2d2d2;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.tctc{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.i-step-item-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
top: -10rpx;
|
||||
color: #1c2438;
|
||||
}
|
||||
|
||||
.i-step-item-content {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-top: 2px;
|
||||
color: #80848f;
|
||||
}
|
||||
|
||||
.i-step-vertical {
|
||||
padding-bottom: 35rpx;
|
||||
}
|
||||
|
||||
.i-step-vertical .i-step-item-ico {
|
||||
width: 24px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.i-step-vertical .i-step-item-main {
|
||||
margin-left: 40px;
|
||||
margin-top: 0;
|
||||
clear: inherit;
|
||||
display: flex;
|
||||
position: relative;
|
||||
/* left: -160rpx; */
|
||||
}
|
||||
.i-step-item-date{
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
/* margin-right: 80rpx; */
|
||||
}
|
||||
.i-step-vertical .i-step-line {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
margin: 0 0 0 12px;
|
||||
width: 1px;
|
||||
}
|
||||
.i-donger{
|
||||
background:rgba(0, 0, 0, 0);
|
||||
border-left:1rpx dashed #d9ae59;
|
||||
}
|
||||
50
dist/steps/index.js
vendored
Normal file
50
dist/steps/index.js
vendored
Normal file
@ -0,0 +1,50 @@
|
||||
Component({
|
||||
externalClasses: ['i-class'],
|
||||
properties : {
|
||||
current : {
|
||||
type : Number,
|
||||
value : -1,
|
||||
observer : '_updateDataChange'
|
||||
},
|
||||
status : {
|
||||
type : String,
|
||||
//wait、process、finish、error
|
||||
value : ''
|
||||
},
|
||||
direction : {
|
||||
type : String,
|
||||
//value has horizontal or vertical
|
||||
value : 'horizontal'
|
||||
}
|
||||
},
|
||||
relations : {
|
||||
'../step/index' : {
|
||||
type : 'child',
|
||||
linked(){
|
||||
this._updateDataChange();
|
||||
},
|
||||
linkChanged () {
|
||||
this._updateDataChange();
|
||||
},
|
||||
unlinked () {
|
||||
this._updateDataChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_updateDataChange() {
|
||||
let steps = this.getRelationNodes('../step/index');
|
||||
const len = steps.length;
|
||||
if (len > 0) {
|
||||
steps.forEach((step, index) => {
|
||||
step.updateDataChange({
|
||||
len : len,
|
||||
index : index,
|
||||
current : this.data.current,
|
||||
direction : this.data.direction
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
3
dist/steps/index.json
vendored
Normal file
3
dist/steps/index.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
3
dist/steps/index.wxml
vendored
Normal file
3
dist/steps/index.wxml
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
<view class="i-class i-steps">
|
||||
<slot></slot>
|
||||
</view>
|
||||
3
dist/steps/index.wxss
vendored
Normal file
3
dist/steps/index.wxss
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
.i-steps {
|
||||
/* padding-left: 117rpx; */
|
||||
}
|
||||
Reference in New Issue
Block a user