@@ -0,0 +1,60 @@ | |||||
//app.js | |||||
App({ | |||||
onLaunch: function () { | |||||
// 登录 | |||||
wx.login({ | |||||
success: res => { | |||||
// 发送 res.code 到后台换取 openId, sessionKey, unionId | |||||
console.log("login", res); | |||||
} | |||||
}) | |||||
// 获取用户信息 | |||||
wx.getSetting({ | |||||
success: res => { | |||||
if (res.authSetting['scope.userInfo']) { | |||||
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 | |||||
wx.getUserInfo({ | |||||
success: res => { | |||||
// 可以将 res 发送给后台解码出 unionId | |||||
this.globalData.userInfo = res.userInfo | |||||
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 | |||||
// 所以此处加入 callback 以防止这种情况 | |||||
if (this.userInfoReadyCallback) { | |||||
this.userInfoReadyCallback(res) | |||||
} | |||||
} | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
this.getLocation() | |||||
// setTimeout(() => { | |||||
// this.globalData.market={ | |||||
// name:"陕西大悦城" | |||||
// } | |||||
// }, 1000); | |||||
}, | |||||
/** | |||||
* 获取地址位置信息 | |||||
*/ | |||||
getLocation:function (){ | |||||
wx.getLocation({ | |||||
type: 'wgs84', | |||||
success: function (res) { | |||||
console.log("getLocation", res); | |||||
}, | |||||
fail:error=>{ | |||||
console.log(error); | |||||
} | |||||
}) | |||||
}, | |||||
globalData: { | |||||
// 当前用户信息 | |||||
userInfo: null, | |||||
// 当前商场信息 | |||||
market:{ | |||||
name:"陕西大悦城" | |||||
} | |||||
} | |||||
}) |
@@ -0,0 +1,42 @@ | |||||
{ | |||||
"pages": [ | |||||
"pages/index/index", | |||||
"pages/login/index", | |||||
"pages/coupons/index/index", | |||||
"pages/coupons/details/index", | |||||
"pages/order/index/index", | |||||
"pages/order/details/index", | |||||
"pages/rushToBuy/index", | |||||
"pages/shop/index/index", | |||||
"pages/shop/details/index", | |||||
"pages/success/index", | |||||
"pages/user/index", | |||||
"pages/market/index" | |||||
], | |||||
"tabBar": { | |||||
"color":"#9F9F9F", | |||||
"selectedColor":"#00C0FF", | |||||
"list": [{ | |||||
"pagePath": "pages/index/index", | |||||
"iconPath":"assets/img/home-n.png", | |||||
"selectedIconPath":"assets/img/home-y.png", | |||||
"text": "首页" | |||||
}, { | |||||
"pagePath": "pages/user/index", | |||||
"iconPath":"assets/img/user-n.png", | |||||
"selectedIconPath":"assets/img/user-y.png", | |||||
"text": "我的" | |||||
}] | |||||
}, | |||||
"window": { | |||||
"backgroundTextStyle": "light", | |||||
"navigationBarBackgroundColor": "#fff", | |||||
"navigationBarTitleText": "WeChat", | |||||
"navigationBarTextStyle": "black" | |||||
}, | |||||
"networkTimeout": { | |||||
"request": 10000, | |||||
"downloadFile": 10000 | |||||
}, | |||||
"debug": false | |||||
} |
@@ -0,0 +1,25 @@ | |||||
@font-face { | |||||
font-family: 'iconfont'; /* project id 777313 */ | |||||
src: url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.eot'); | |||||
src: url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.eot?#iefix') format('embedded-opentype'), | |||||
url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.woff') format('woff'), | |||||
url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.ttf') format('truetype'), | |||||
url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.svg#iconfont') format('svg'); | |||||
} | |||||
.iconfont { | |||||
font-family: "iconfont" !important; | |||||
font-size: 36rpx; | |||||
font-style: normal; | |||||
-webkit-font-smoothing: antialiased; | |||||
-webkit-text-stroke-width: 0.2rpx; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
} | |||||
/* 定位 */ | |||||
.icon-dingweib:before { content: "\e652"; } | |||||
/* 三角 */ | |||||
.icon-choose:before { content: "\e601"; } | |||||
view{ | |||||
font-family: PingFangSC-Semibold; | |||||
} |
@@ -0,0 +1 @@ | |||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#cbc8c2" d="M22.311657 420.524612c-10.023284 8.991792-17.588587 22.285562-17.588587 37.752836 0 27.185152 22.001083 49.212842 49.155537 49.212842l98.397031 0 0 467.197608c0 27.213805 22.00006 49.15656 49.155537 49.15656l163.104775 0c27.127847 0 49.15349-21.971407 49.15349-49.15656l0-196.72857 196.708104 0 0 196.72857c0 27.185152 21.912056 49.15656 49.127907 49.15656l163.073052 0c27.158547 0 49.157583-21.942755 49.157583-49.15656l0-467.197608 98.367355 0c27.211758 0 49.154513-22.026666 49.154513-49.212842 0-15.46625-7.504928-28.760021-18.822694-37.752836-168.776961-142.224212-488.427118-420.36907-488.427118-420.36907S192.293049 278.3004 22.311657 420.524612zM432.279842 64.149019" /></svg> |
@@ -0,0 +1 @@ | |||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#0ac4ff" d="M22.311657 420.524612c-10.023284 8.991792-17.588587 22.285562-17.588587 37.752836 0 27.185152 22.001083 49.212842 49.155537 49.212842l98.397031 0 0 467.197608c0 27.213805 22.00006 49.15656 49.155537 49.15656l163.104775 0c27.127847 0 49.15349-21.971407 49.15349-49.15656l0-196.72857 196.708104 0 0 196.72857c0 27.185152 21.912056 49.15656 49.127907 49.15656l163.073052 0c27.158547 0 49.157583-21.942755 49.157583-49.15656l0-467.197608 98.367355 0c27.211758 0 49.154513-22.026666 49.154513-49.212842 0-15.46625-7.504928-28.760021-18.822694-37.752836-168.776961-142.224212-488.427118-420.36907-488.427118-420.36907S192.293049 278.3004 22.311657 420.524612zM432.279842 64.149019" /></svg> |
@@ -0,0 +1 @@ | |||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#cbc8c2" d="M512 535.272727c141.963636 0 256-114.036364 256-256S730.763636 0 512 0c-214.109091 0-256 137.309091-256 279.272727s114.036364 256 256 256z m232.727273 23.272728H279.272727C151.272727 558.545455 46.545455 663.272727 46.545455 791.272727s104.727273 232.727273 232.727272 232.727273h465.454546c128 0 232.727273-104.727273 232.727272-232.727273s-104.727273-232.727273-232.727272-232.727272z" /></svg> |
@@ -0,0 +1 @@ | |||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#0ac4ff" d="M512 535.272727c141.963636 0 256-114.036364 256-256S730.763636 0 512 0c-214.109091 0-256 137.309091-256 279.272727s114.036364 256 256 256z m232.727273 23.272728H279.272727C151.272727 558.545455 46.545455 663.272727 46.545455 791.272727s104.727273 232.727273 232.727272 232.727273h465.454546c128 0 232.727273-104.727273 232.727272-232.727273s-104.727273-232.727273-232.727272-232.727272z" /></svg> |
@@ -0,0 +1,26 @@ | |||||
// pages/index/sw/index.js | |||||
Component({ | |||||
/** | |||||
* 组件的属性列表 | |||||
*/ | |||||
properties: { | |||||
data: { | |||||
value: {}, | |||||
type: Object, | |||||
}, | |||||
}, | |||||
/** | |||||
* 组件的初始数据 | |||||
*/ | |||||
data: { | |||||
}, | |||||
/** | |||||
* 组件的方法列表 | |||||
*/ | |||||
methods: { | |||||
} | |||||
}) |
@@ -0,0 +1,6 @@ | |||||
{ | |||||
"component": true, | |||||
"usingComponents": { | |||||
"i-button": "../../dist/button/index" | |||||
} | |||||
} |
@@ -0,0 +1,21 @@ | |||||
<view class="coupons"> | |||||
<view class="coupons-img"> | |||||
<image src="{{data.img}}"></image> | |||||
</view> | |||||
<view class="coupons-info"> | |||||
<view class="coupons-info-name">{{data.name}}</view> | |||||
<view class="coupons-info-price"> | |||||
<text class="coupons-info-price-p">¥{{data.pPrice}}</text> | |||||
<text class="coupons-info-price-o">¥{{data.oPrice}}</text> | |||||
</view> | |||||
<view class="coupons-info-distance"> | |||||
<text class="iconfont icon-dingweib"></text> | |||||
{{data.distance}} | |||||
</view> | |||||
<view class="coupons-info-address">{{data.address}}</view> | |||||
</view> | |||||
<view class="coupons-btn"> | |||||
<i-button i-class="coupons-btn-gm" bind:click="onLogin">购买</i-button> | |||||
</view> | |||||
<view class="coupons-border"></view> | |||||
</view> |
@@ -0,0 +1,95 @@ | |||||
@import "../../app.wxss"; | |||||
.coupons { | |||||
flex-direction: row; | |||||
display: flex; | |||||
padding: 30rpx; | |||||
position: relative; | |||||
height: 184rpx; | |||||
} | |||||
.coupons-border{ | |||||
height: 1rpx; | |||||
/* width: 100%; */ | |||||
left: 30rpx; | |||||
right: 30rpx; | |||||
background: #F5F5F5; | |||||
position: absolute; | |||||
bottom: 0; | |||||
} | |||||
.coupons-img { | |||||
width: 248rpx; | |||||
height: 184rpx; | |||||
overflow: hidden; | |||||
border-radius: 10rpx; | |||||
} | |||||
.coupons-img image { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.coupons-info { | |||||
padding-left: 20rpx; | |||||
/* padding-top: 10rpx; */ | |||||
} | |||||
.coupons-info-name { | |||||
font-size: 30rpx; | |||||
color: #000000; | |||||
letter-spacing: 0; | |||||
line-height: 42rpx; | |||||
} | |||||
.coupons-info-price{ | |||||
padding:10rpx 0 15rpx; | |||||
height: 50rpx; | |||||
} | |||||
.coupons-info-price-p { | |||||
font-size: 36rpx; | |||||
color: #FF3434; | |||||
letter-spacing: 0.96rpx; | |||||
line-height: 50rpx; | |||||
} | |||||
.coupons-info-price-o { | |||||
display: inline-block; | |||||
padding-left: 20rpx; | |||||
font-size: 24rpx; | |||||
color: #B4B4B4; | |||||
letter-spacing: 0.96rpx; | |||||
text-decoration: line-through; | |||||
line-height: 24rpx; | |||||
} | |||||
.coupons-info-distance { | |||||
font-size: 22rpx; | |||||
color: #C0C0C0; | |||||
letter-spacing: 0; | |||||
padding-bottom: 10rpx; | |||||
line-height: 30rpx; | |||||
} | |||||
.coupons-info-address { | |||||
font-size: 22rpx; | |||||
color: #585858; | |||||
letter-spacing: 0; | |||||
line-height: 30rpx; | |||||
} | |||||
.coupons-btn { | |||||
position: absolute; | |||||
bottom: 30rpx; | |||||
right: 30rpx; | |||||
} | |||||
.coupons-btn-gm { | |||||
background: #00C0FF !important; | |||||
border-radius: 10rpx !important; | |||||
margin: 0 !important; | |||||
padding: 0 !important; | |||||
font-family: PingFangSC-Semibold; | |||||
font-size: 28rpx; | |||||
color: #FFFFFF !important; | |||||
letter-spacing: 0; | |||||
height: 50rpx !important; | |||||
width: 114rpx !important; | |||||
line-height: 50rpx !important; | |||||
} |
@@ -0,0 +1,47 @@ | |||||
Component({ | |||||
externalClasses: ['i-class', 'i-class-mask', 'i-class-header'], | |||||
options: { | |||||
multipleSlots: true | |||||
}, | |||||
properties: { | |||||
visible: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
maskClosable: { | |||||
type: Boolean, | |||||
value: true | |||||
}, | |||||
showCancel: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
cancelText: { | |||||
type: String, | |||||
value: '取消' | |||||
}, | |||||
actions: { | |||||
type: Array, | |||||
value: [] | |||||
} | |||||
}, | |||||
methods: { | |||||
handleClickMask () { | |||||
if (!this.data.maskClosable) return; | |||||
this.handleClickCancel(); | |||||
}, | |||||
handleClickItem ({ currentTarget = {} }) { | |||||
const dataset = currentTarget.dataset || {}; | |||||
const { index } = dataset; | |||||
this.triggerEvent('click', { index }); | |||||
}, | |||||
handleClickCancel () { | |||||
this.triggerEvent('cancel'); | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,8 @@ | |||||
{ | |||||
"component": true, | |||||
"usingComponents": | |||||
{ | |||||
"i-button": "../button/index", | |||||
"i-icon": "../icon/index" | |||||
} | |||||
} |
@@ -0,0 +1,23 @@ | |||||
<view class="i-as-mask i-class-mask {{ visible ? 'i-as-mask-show' : '' }}" bindtap="handleClickMask"></view> | |||||
<view class="i-class i-as {{ visible ? 'i-as-show' : '' }}"> | |||||
<view class="i-as-header i-class-header"><slot name="header"></slot></view> | |||||
<view class="i-as-actions"> | |||||
<view class="i-as-action-item" wx:for="{{ actions }}" wx:key="{{ item.name }}"> | |||||
<i-button | |||||
bind:click="handleClickItem" | |||||
data-index="{{ index }}" | |||||
open-type="{{ item.openType }}" | |||||
type="ghost" | |||||
size="large" | |||||
long | |||||
> | |||||
<view class="i-as-btn-loading" wx:if="{{ item.loading }}"></view> | |||||
<i-icon wx:if="{{ item.icon }}" type="{{ item.icon }}" i-class="i-as-btn-icon"></i-icon> | |||||
<view class="i-as-btn-text" style="{{ item.color ? 'color: ' + item.color : '' }}">{{ item.name }}</view> | |||||
</i-button> | |||||
</view> | |||||
</view> | |||||
<view class="i-as-cancel" wx:if="{{ showCancel }}"> | |||||
<i-button i-class="i-as-cancel-btn" type="ghost" size="large" long="true" bind:click="handleClickCancel">{{ cancelText }}</i-button> | |||||
</view> | |||||
</view> |
@@ -0,0 +1 @@ | |||||
.i-as{position:fixed;width:100%;box-sizing:border-box;left:0;right:0;bottom:0;background:#f7f7f7;transform:translate3d(0,100%,0);transform-origin:center;transition:all .2s ease-in-out;z-index:900;visibility:hidden}.i-as-show{transform:translate3d(0,0,0);visibility:visible}.i-as-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:900;transition:all .2s ease-in-out;opacity:0;visibility:hidden}.i-as-mask-show{opacity:1;visibility:visible}.i-as-action-item{position:relative}.i-as-action-item::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-bottom-width:1px}.i-as-header{background:#fff;text-align:center;position:relative;font-size:12px;color:#80848f}.i-as-header::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-bottom-width:1px}.i-as-cancel{margin-top:6px}.i-as-btn-loading{display:inline-block;vertical-align:middle;margin-right:10px;width:12px;height:12px;background:0 0;border-radius:50%;border:2px solid #e5e5e5;border-color:#666 #e5e5e5 #e5e5e5 #e5e5e5;animation:btn-spin .6s linear;animation-iteration-count:infinite}.i-as-btn-text{display:inline-block;vertical-align:middle}.i-as-btn-icon{font-size:14px!important;margin-right:4px}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} |
@@ -0,0 +1,37 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
options: { | |||||
multipleSlots: true | |||||
}, | |||||
properties: { | |||||
//info, success, warning, error | |||||
type: { | |||||
type: String, | |||||
value: 'info' | |||||
}, | |||||
closable: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
showIcon: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
desc: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
}, | |||||
data: { | |||||
closed: false | |||||
}, | |||||
methods: { | |||||
handleTap() { | |||||
this.setData({ | |||||
closed: !this.data.closed, | |||||
}); | |||||
this.triggerEvent('close'); | |||||
}, | |||||
} | |||||
}); |
@@ -0,0 +1,7 @@ | |||||
{ | |||||
"component": true, | |||||
"usingComponents": | |||||
{ | |||||
"i-icon": "../icon/index" | |||||
} | |||||
} |
@@ -0,0 +1,15 @@ | |||||
<view class="i-class i-alert {{'i-alert-'+type}} {{showIcon?'i-alert-with-icon':''}} {{desc?'i-alert-with-desc':''}}" wx:if="{{!closed}}"> | |||||
<view wx:if="{{ showIcon }}" class="i-alert-icon"> | |||||
<i-icon type="prompt" wx:if="{{ type === 'info' }}" size="{{desc?24:16}}"></i-icon> | |||||
<i-icon type="success" wx:if="{{ type === 'success' }}" size="{{desc?24:16}}"></i-icon> | |||||
<i-icon type="warning" wx:if="{{ type === 'warning' }}" size="{{desc?24:16}}"></i-icon> | |||||
<i-icon type="delete" wx:if="{{ type === 'error' }}" size="{{desc?24:16}}"></i-icon> | |||||
</view> | |||||
<slot></slot> | |||||
<view class="i-alert-desc"> | |||||
<slot name="desc"></slot> | |||||
</view> | |||||
<view class="i-alert-close" wx:if="{{ closable }}" bindtap="handleTap"> | |||||
<i-icon type="close"></i-icon> | |||||
</view> | |||||
</view> |
@@ -0,0 +1 @@ | |||||
.i-alert{position:relative;margin:10px;padding:8px 48px 8px 16px;font-size:14px;border-radius:2px;color:#fff;background:#f7f7f7;color:#495060}.i-alert.i-alert-with-icon{padding:8px 48px 8px 38px}.i-alert-info{color:#fff;background:#2db7f5}.i-alert-success{color:#fff;background:#19be6b}.i-alert-warning{color:#fff;background:#f90}.i-alert-error{color:#fff;background:#ed3f14}.i-alert-icon{position:absolute;top:9px;left:16px;font-size:14px}.i-alert-desc{font-size:12px}.i-alert-with-desc{padding:16px;position:relative}.i-alert-with-desc.i-alert-with-icon{padding:16px 16px 16px 69px}.i-alert-with-desc .i-alert-icon{top:50%;left:24px;margin-top:-21px;font-size:28px}.i-alert-close{font-size:12px;position:absolute;right:16px;top:8px;overflow:hidden;cursor:pointer} |
@@ -0,0 +1,20 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
properties: { | |||||
// circle || square | |||||
shape: { | |||||
type: String, | |||||
value: 'circle' | |||||
}, | |||||
// small || large || default | |||||
size: { | |||||
type: String, | |||||
value: 'default' | |||||
}, | |||||
src: { | |||||
type: String, | |||||
value: '' | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<view class="i-class i-avatar i-avatar-{{ shape }} i-avatar-{{ size }} {{ src ? 'i-avatar-image' : '' }}"> | |||||
<image src="{{ src }}" wx:if="{{ src !== '' }}"></image> | |||||
<view class="i-avatar-string" wx:else><slot></slot></view> | |||||
</view> |
@@ -0,0 +1 @@ | |||||
.i-avatar{display:inline-block;text-align:center;background:#ccc;color:#fff;white-space:nowrap;position:relative;overflow:hidden;vertical-align:middle;width:32px;height:32px;line-height:32px;border-radius:16px;font-size:18px}.i-avatar .ivu-avatar-string{line-height:32px}.i-avatar-large{width:40px;height:40px;line-height:40px;border-radius:20px;font-size:24px}.i-avatar-large .ivu-avatar-string{line-height:40px}.i-avatar-small{width:24px;height:24px;line-height:24px;border-radius:12px;font-size:14px}.i-avatar-small .ivu-avatar-string{line-height:24px}.i-avatar-image{background:0 0}.i-avatar-square{border-radius:4px}.i-avatar>image{width:100%;height:100%} |
@@ -0,0 +1,29 @@ | |||||
Component({ | |||||
externalClasses: ['i-class', 'i-class-alone'], | |||||
properties: { | |||||
count: { | |||||
type: Number, | |||||
value: 0, | |||||
observer: 'finalCount' | |||||
}, | |||||
overflowCount: { | |||||
type: Number, | |||||
value: 99 | |||||
}, | |||||
dot: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
}, | |||||
data: { | |||||
finalCount: 0 | |||||
}, | |||||
methods: { | |||||
finalCount() { | |||||
this.setData({ | |||||
finalCount: parseInt(this.data.count) >= parseInt(this.data.overflowCount) ? `${this.data.overflowCount}+` : this.data.count | |||||
}); | |||||
}, | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,5 @@ | |||||
<view class="i-class i-badge"> | |||||
<slot></slot> | |||||
<view class="i-badge-dot" wx:if="{{ dot }}"></view> | |||||
<view class="i-badge-count i-class-alone" wx:elif="{{ count !== 0 }}">{{ finalCount }}</view> | |||||
</view> |
@@ -0,0 +1 @@ | |||||
.i-badge{position:relative;display:inline-block;line-height:1;vertical-align:middle}.i-badge-count{position:absolute;transform:translateX(50%);top:-6px;right:0;height:18px;border-radius:9px;min-width:18px;background:#ed3f14;border:1px solid transparent;color:#fff;line-height:18px;text-align:center;padding:0 5px;font-size:12px;white-space:nowrap;transform-origin:-10% center;z-index:10;box-shadow:0 0 0 1px #fff;box-sizing:border-box;text-rendering:optimizeLegibility}.i-badge-count-alone{top:auto;display:block;position:relative;transform:translateX(0)}.i-badge-dot{position:absolute;transform:translateX(-50%);transform-origin:0 center;top:-4px;right:-8px;height:8px;width:8px;border-radius:100%;background:#ed3f14;z-index:10;box-shadow:0 0 0 1px #fff} |
@@ -0,0 +1,37 @@ | |||||
function getCtx (selector) { | |||||
const pages = getCurrentPages(); | |||||
const ctx = pages[pages.length - 1]; | |||||
const componentCtx = ctx.selectComponent(selector); | |||||
if (!componentCtx) { | |||||
console.error('无法找到对应的组件,请按文档说明使用组件'); | |||||
return null; | |||||
} | |||||
return componentCtx; | |||||
} | |||||
function Toast(options) { | |||||
const { selector = '#toast' } = options; | |||||
const ctx = getCtx(selector); | |||||
ctx.handleShow(options); | |||||
} | |||||
Toast.hide = function (selector = '#toast') { | |||||
const ctx = getCtx(selector); | |||||
ctx.handleHide(); | |||||
}; | |||||
function Message(options) { | |||||
const { selector = '#message' } = options; | |||||
const ctx = getCtx(selector); | |||||
ctx.handleShow(options); | |||||
} | |||||
module.exports = { | |||||
$Toast: Toast, | |||||
$Message: Message | |||||
}; |
@@ -0,0 +1,80 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
properties: { | |||||
// default, primary, ghost, info, success, warning, error | |||||
type: { | |||||
type: String, | |||||
value: '', | |||||
}, | |||||
inline: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
// default, large, small | |||||
size: { | |||||
type: String, | |||||
value: '', | |||||
}, | |||||
// circle, square | |||||
shape: { | |||||
type: String, | |||||
value: 'square' | |||||
}, | |||||
disabled: { | |||||
type: Boolean, | |||||
value: false, | |||||
}, | |||||
loading: { | |||||
type: Boolean, | |||||
value: false, | |||||
}, | |||||
long: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
openType: String, | |||||
appParameter: String, | |||||
hoverStopPropagation: Boolean, | |||||
hoverStartTime: { | |||||
type: Number, | |||||
value: 20 | |||||
}, | |||||
hoverStayTime: { | |||||
type: Number, | |||||
value: 70 | |||||
}, | |||||
lang: { | |||||
type: String, | |||||
value: 'en' | |||||
}, | |||||
sessionFrom: { | |||||
type: String, | |||||
value: '' | |||||
}, | |||||
sendMessageTitle: String, | |||||
sendMessagePath: String, | |||||
sendMessageImg: String, | |||||
showMessageCard: Boolean | |||||
}, | |||||
methods: { | |||||
handleTap () { | |||||
if (this.data.disabled) return false; | |||||
this.triggerEvent('click'); | |||||
}, | |||||
bindgetuserinfo({ detail = {} } = {}) { | |||||
this.triggerEvent('getuserinfo', detail); | |||||
}, | |||||
bindcontact({ detail = {} } = {}) { | |||||
this.triggerEvent('contact', detail); | |||||
}, | |||||
bindgetphonenumber({ detail = {} } = {}) { | |||||
this.triggerEvent('getphonenumber', detail); | |||||
}, | |||||
binderror({ detail = {} } = {}) { | |||||
this.triggerEvent('error', detail); | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,20 @@ | |||||
<button | |||||
class="i-class i-btn {{ long ? 'i-btn-long' : '' }} {{ 'i-btn-' + size }} {{ 'i-btn-' + type }} {{ 'i-btn-' + shape }} {{ loading ? 'i-btn-loading' : '' }} {{ disabled ? 'i-btn-disabled' : ''}} {{ inline ? 'i-btn-inline' : '' }}" | |||||
hover-class="i-btn-hover" | |||||
bindtap="handleTap" | |||||
open-type="{{ openType }}" | |||||
app-parameter="{{ appParameter }}" | |||||
hover-stop-propagation="{{ hoverStopPropagation }}" | |||||
hover-start-time="{{ hoverStartTime }}" | |||||
hover-stay-time="{{ hoverStayTime }}" | |||||
session-from="{{ sessionFrom }}" | |||||
send-message-title="{{ sendMessageTitle }}" | |||||
send-message-path="{{ sendMessagePath }}" | |||||
send-message-img="{{ sendMessageImg }}" | |||||
show-message-card="{{ showMessageCard }}" | |||||
bindcontact="bindcontact" | |||||
bindgetuserinfo="bindgetuserinfo" | |||||
bindgetphonenumber="bindgetphonenumber" | |||||
binderror="binderror" | |||||
plain="true" | |||||
><view class="i-btn-loading-inner" wx:if="{{loading}}"></view><slot></slot></button> |
@@ -0,0 +1 @@ | |||||
.i-btn{text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;white-space:nowrap;user-select:none;font-size:14px;border-radius:2px;border:0!important;position:relative;text-decoration:none;height:44px;line-height:44px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);color:#fff!important;background:#f7f7f7!important;color:#495060!important;margin:10px}.i-btn-hover{opacity:.9}.i-btn-long{border-radius:0;margin:0;box-shadow:none}.i-btn-large{height:48px;line-height:48px}.i-btn-small{height:40px;line-height:40px}.i-btn-primary{color:#fff!important;background:#2d8cf0!important}.i-btn-ghost{color:#fff!important;background:#fff!important;color:#495060!important}.i-btn-success{color:#fff!important;background:#19be6b!important}.i-btn-warning{color:#fff!important;background:#f90!important}.i-btn-error{color:#fff!important;background:#ed3f14!important}.i-btn-info{color:#fff!important;background:#2db7f5!important}.i-btn-circle{border-radius:44px}.i-btn-large.i-btn-circle{border-radius:48px}.i-btn-small.i-btn-circle{border-radius:40px}.i-btn-loading{opacity:.6}.i-btn-loading-inner{display:inline-block;margin-right:12px;vertical-align:middle;width:14px;height:14px;background:0 0;border-radius:50%;border:2px solid #fff;border-color:#fff #fff #fff transparent;animation:btn-spin .6s linear;animation-iteration-count:infinite}.i-btn-disabled{color:#bbbec4!important;background:#f7f7f7!important}.i-btn-inline{display:inline-block}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} |
@@ -0,0 +1,26 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
options: { | |||||
multipleSlots: true | |||||
}, | |||||
properties: { | |||||
full: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
thumb: { | |||||
type: String, | |||||
value: '' | |||||
}, | |||||
title: { | |||||
type: String, | |||||
value: '' | |||||
}, | |||||
extra: { | |||||
type: String, | |||||
value: '' | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,11 @@ | |||||
<view class="i-class i-card {{ full ? 'i-card-full' : '' }}"> | |||||
<view class="i-class i-card-header"> | |||||
<view class="i-card-header-content"> | |||||
<image class="i-card-header-thumb" src="{{ thumb }}" mode="aspectFit" wx:if="{{ thumb }}" /> | |||||
{{ title }} | |||||
</view> | |||||
<view class="i-card-header-extra" wx:if="{{ extra }}">{{ extra }}</view> | |||||
</view> | |||||
<view class="i-class i-card-body"><slot name="content"></slot></view> | |||||
<view class="i-class i-card-footer"><slot name="footer"></slot></view> | |||||
</view> |
@@ -0,0 +1 @@ | |||||
.i-card{margin:0 16px;font-size:14px;overflow:hidden;position:relative;background:#fff;border:1rpx solid #dddee1;border-radius:5px}.i-card-full{margin:0;border-left:none;border-right:none;border-radius:0}.i-card-header{display:flex;padding:6px 16px;align-items:center}.i-card-header-content{flex:1;text-align:left}.i-card-header-thumb{display:inline-block;width:64px;height:64px;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;background-size:cover;vertical-align:middle}.i-card-header-title{display:inline-block;vertical-align:middle;font-size:14px;color:#1c2438}.i-card-header-extra{flex:1;text-align:right;font-size:14px;color:#80848f}.i-card-body{position:relative;padding:6px 16px;color:#495060;font-size:14px}.i-card-body::before{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-top-width:1px}.i-card-footer{position:relative;padding:6px 16px;color:#80848f;font-size:12px} |
@@ -0,0 +1,33 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
relations: { | |||||
'../cell/index': { | |||||
type: 'child', | |||||
linked () { | |||||
this._updateIsLastCell(); | |||||
}, | |||||
linkChanged () { | |||||
this._updateIsLastCell(); | |||||
}, | |||||
unlinked () { | |||||
this._updateIsLastCell(); | |||||
} | |||||
} | |||||
}, | |||||
methods: { | |||||
_updateIsLastCell() { | |||||
let cells = this.getRelationNodes('../cell/index'); | |||||
const len = cells.length; | |||||
if (len > 0) { | |||||
let lastIndex = len - 1; | |||||
cells.forEach((cell, index) => { | |||||
cell.updateIsLastCell(index === lastIndex); | |||||
}); | |||||
} | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,3 @@ | |||||
<view class="i-class i-cell-group"> | |||||
<slot></slot> | |||||
</view> |
@@ -0,0 +1,86 @@ | |||||
const warn = (msg, getValue) => { | |||||
console.warn(msg); | |||||
console.log('接受到的值为:', getValue); | |||||
}; | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
options: { | |||||
multipleSlots: true | |||||
}, | |||||
relations: { | |||||
'../cell-group/index': { | |||||
type: 'parent' | |||||
} | |||||
}, | |||||
properties: { | |||||
// 左侧标题 | |||||
title: { | |||||
type: String | |||||
}, | |||||
// 标题下方的描述信息 | |||||
label: { | |||||
type: String | |||||
}, | |||||
// 右侧内容 | |||||
value: { | |||||
type: String | |||||
}, | |||||
// 只有点击 footer 区域才触发 tab 事件 | |||||
onlyTapFooter: { | |||||
type: Boolean | |||||
}, | |||||
// 是否展示右侧箭头并开启尝试以 url 跳转 | |||||
isLink: { | |||||
type: null, | |||||
value: '' | |||||
}, | |||||
// 链接类型,可选值为 navigateTo,redirectTo,switchTab,reLaunch | |||||
linkType: { | |||||
type: String, | |||||
value: 'navigateTo' | |||||
}, | |||||
url: { | |||||
type: String, | |||||
value: '' | |||||
} | |||||
}, | |||||
data: { | |||||
isLastCell: true | |||||
}, | |||||
methods: { | |||||
navigateTo () { | |||||
const { url } = this.data; | |||||
const type = typeof this.data.isLink; | |||||
this.triggerEvent('click', {}); | |||||
if (!this.data.isLink || !url || url === 'true' || url === 'false') return; | |||||
if (type !== 'boolean' && type !== 'string') { | |||||
warn('isLink 属性值必须是一个字符串或布尔值', this.data.isLink); | |||||
return; | |||||
} | |||||
if (['navigateTo', 'redirectTo', 'switchTab', 'reLaunch'].indexOf(this.data.linkType) === -1) { | |||||
warn('linkType 属性可选值为 navigateTo,redirectTo,switchTab,reLaunch', this.data.linkType); | |||||
return; | |||||
} | |||||
wx[this.data.linkType].call(wx, {url}); | |||||
}, | |||||
handleTap () { | |||||
if (!this.data.onlyTapFooter) { | |||||
this.navigateTo(); | |||||
} | |||||
}, | |||||
updateIsLastCell (isLastCell) { | |||||
this.setData({ isLastCell }); | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,16 @@ | |||||
<view bindtap="handleTap" class="i-class i-cell {{ isLastCell ? 'i-cell-last' : '' }} {{ isLink ? 'i-cell-access' : '' }}"> | |||||
<view class="i-cell-icon"> | |||||
<slot name="icon"></slot> | |||||
</view> | |||||
<view class="i-cell-bd"> | |||||
<view wx:if="{{ title }}" class="i-cell-text">{{ title }}</view> | |||||
<view wx:if="{{ label }}" class="i-cell-desc">{{ label }}</view> | |||||
<slot></slot> | |||||
</view> | |||||
<view catchtap="navigateTo" class="i-cell-ft"> | |||||
<block wx:if="{{value}}">{{ value }}</block> | |||||
<block wx:else> | |||||
<slot name="footer"></slot> | |||||
</block> | |||||
</view> | |||||
</view> |
@@ -0,0 +1 @@ | |||||
.i-cell{position:relative;padding:12px 15px;display:flex;background:#fff;align-items:center;line-height:1.4;font-size:14px;overflow:hidden}.i-cell::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-bottom-width:1px;left:15px;right:0}.i-cell-last::after{display:none}.i-cell-icon{margin-right:5px}.i-cell-icon:empty{display:none}.i-cell-bd{flex:1}.i-cell-text{line-height:24px;font-size:14px}.i-cell-desc{line-height:1.2;font-size:12px;color:#80848f}.i-cell-ft{position:relative;text-align:right;color:#495060}.i-cell-access .i-cell-ft{padding-right:13px}.i-cell-access .i-cell-ft::after{content:" ";display:inline-block;width:6px;height:6px;position:absolute;top:50%;right:2px;border-width:2px 2px 0 0;border-color:#dddee1;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)} |
@@ -0,0 +1,38 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
relations: { | |||||
'../checkbox/index': { | |||||
type: 'child', | |||||
linked() { | |||||
this.changeCurrent(); | |||||
}, | |||||
linkChanged() { | |||||
this.changeCurrent(); | |||||
}, | |||||
unlinked() { | |||||
this.changeCurrent(); | |||||
} | |||||
} | |||||
}, | |||||
properties: { | |||||
current: { | |||||
type: Array, | |||||
value: [], | |||||
observer: 'changeCurrent' | |||||
}, | |||||
}, | |||||
methods: { | |||||
changeCurrent(val = this.data.current) { | |||||
let items = this.getRelationNodes('../checkbox/index'); | |||||
const len = items.length; | |||||
if (len > 0) { | |||||
items.forEach(item => { | |||||
item.changeCurrent(val.indexOf(item.data.value) !== -1); | |||||
}); | |||||
} | |||||
}, | |||||
emitEvent(current) { | |||||
this.triggerEvent('change', current); | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,7 @@ | |||||
{ | |||||
"component": true, | |||||
"usingComponents": | |||||
{ | |||||
"i-cell-group": "../cell-group/index" | |||||
} | |||||
} |
@@ -0,0 +1,3 @@ | |||||
<i-cell-group class="i-class"> | |||||
<slot></slot> | |||||
</i-cell-group> |
@@ -0,0 +1,56 @@ | |||||
const prefixCls = 'i-checkbox'; | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
relations: { | |||||
'../checkbox-group/index': { | |||||
type: 'parent' | |||||
} | |||||
}, | |||||
properties: { | |||||
value: { | |||||
type: String, | |||||
value: '' | |||||
}, | |||||
checked: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
disabled: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
color: { | |||||
type: String, | |||||
value: '#2d8cf0' | |||||
}, | |||||
position: { | |||||
type: String, | |||||
value: 'left', //left right | |||||
observer: 'setPosition' | |||||
} | |||||
}, | |||||
data: { | |||||
checked: true, | |||||
positionCls: `${prefixCls}-checkbox-left`, | |||||
}, | |||||
attached() { | |||||
this.setPosition(); | |||||
}, | |||||
methods: { | |||||
changeCurrent(current) { | |||||
this.setData({ checked: current }); | |||||
}, | |||||
checkboxChange() { | |||||
if (this.data.disabled) return; | |||||
const item = { current: !this.data.checked, value: this.data.value }; | |||||
const parent = this.getRelationNodes('../checkbox-group/index')[0]; | |||||
parent ? parent.emitEvent(item) : this.triggerEvent('change', item); | |||||
}, | |||||
setPosition() { | |||||
this.setData({ | |||||
positionCls: this.data.position.indexOf('left') !== -1 ? `${prefixCls}-checkbox-left` : `${prefixCls}-checkbox-right`, | |||||
}); | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,7 @@ | |||||
{ | |||||
"component": true, | |||||
"usingComponents": | |||||
{ | |||||
"i-cell": "../cell/index" | |||||
} | |||||
} |
@@ -0,0 +1,8 @@ | |||||
<view class="i-class i-checkbox" catchtap="checkboxChange"> | |||||
<i-cell i-class="i-checkbox-cell"> | |||||
<label> | |||||
<radio value="{{value}}" checked="{{checked}}" color="{{checked?color:''}}" disabled="{{disabled}}" class="i-checkbox-radio {{positionCls}}" /> | |||||
<view class="i-checkbox-title">{{value}}</view> | |||||
</label> | |||||
</i-cell> | |||||
</view> |
@@ -0,0 +1 @@ | |||||
.i-checkbox-cell::after{display:block}.i-checkbox-checkbox-left{float:left}.i-checkbox-checkbox-right{float:right}.i-checkbox-radio{vertical-align:middle}.i-checkbox-title{display:inline-block;vertical-align:middle} |
@@ -0,0 +1,20 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
relations: { | |||||
'../row/index': { | |||||
type: 'parent' | |||||
} | |||||
}, | |||||
properties: { | |||||
span: { | |||||
value: 0, | |||||
type: Number | |||||
}, | |||||
offset: { | |||||
value: 0, | |||||
type: Number | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1 @@ | |||||
<view class="i-class i-col {{ span ? 'i-col-span-' + span : '' }} {{ offset ? 'i-col-offset-' + offset : '' }}"><slot></slot></view> |
@@ -0,0 +1 @@ | |||||
.i-col{float:left;box-sizing:border-box;width:0}.i-col-span-1{display:block;width:4.16666667%}.i-col-offset-1{margin-left:4.16666667%}.i-col-span-2{display:block;width:8.33333333%}.i-col-offset-2{margin-left:8.33333333%}.i-col-span-3{display:block;width:12.5%}.i-col-offset-3{margin-left:12.5%}.i-col-span-4{display:block;width:16.66666667%}.i-col-offset-4{margin-left:16.66666667%}.i-col-span-5{display:block;width:20.83333333%}.i-col-offset-5{margin-left:20.83333333%}.i-col-span-6{display:block;width:25%}.i-col-offset-6{margin-left:25%}.i-col-span-7{display:block;width:29.16666667%}.i-col-offset-7{margin-left:29.16666667%}.i-col-span-8{display:block;width:33.33333333%}.i-col-offset-8{margin-left:33.33333333%}.i-col-span-9{display:block;width:37.5%}.i-col-offset-9{margin-left:37.5%}.i-col-span-10{display:block;width:41.66666667%}.i-col-offset-10{margin-left:41.66666667%}.i-col-span-11{display:block;width:45.83333333%}.i-col-offset-11{margin-left:45.83333333%}.i-col-span-12{display:block;width:50%}.i-col-offset-12{margin-left:50%}.i-col-span-13{display:block;width:54.16666667%}.i-col-offset-13{margin-left:54.16666667%}.i-col-span-14{display:block;width:58.33333333%}.i-col-offset-14{margin-left:58.33333333%}.i-col-span-15{display:block;width:62.5%}.i-col-offset-15{margin-left:62.5%}.i-col-span-16{display:block;width:66.66666667%}.i-col-offset-16{margin-left:66.66666667%}.i-col-span-17{display:block;width:70.83333333%}.i-col-offset-17{margin-left:70.83333333%}.i-col-span-18{display:block;width:75%}.i-col-offset-18{margin-left:75%}.i-col-span-19{display:block;width:79.16666667%}.i-col-offset-19{margin-left:79.16666667%}.i-col-span-20{display:block;width:83.33333333%}.i-col-offset-20{margin-left:83.33333333%}.i-col-span-21{display:block;width:87.5%}.i-col-offset-21{margin-left:87.5%}.i-col-span-22{display:block;width:91.66666667%}.i-col-offset-22{margin-left:91.66666667%}.i-col-span-23{display:block;width:95.83333333%}.i-col-offset-23{margin-left:95.83333333%}.i-col-span-24{display:block;width:100%}.i-col-offset-24{margin-left:100%} |
@@ -0,0 +1,46 @@ | |||||
Component({ | |||||
externalClasses: ['i-class-content', 'i-class-title', 'i-class'], | |||||
relations: { | |||||
'../collapse/index': { | |||||
type: 'parent', | |||||
linked: function (target) { | |||||
const options = { | |||||
accordion: target.data.accordion | |||||
} | |||||
if (target.data.name === this.data.name) { | |||||
options.showContent = 'i-collapse-item-show-content'; | |||||
} | |||||
this.setData(options); | |||||
} | |||||
} | |||||
}, | |||||
properties: { | |||||
title: String, | |||||
name: String | |||||
}, | |||||
data: { | |||||
showContent: '', | |||||
accordion: false | |||||
}, | |||||
options: { | |||||
multipleSlots: true | |||||
}, | |||||
methods: { | |||||
trigger(e) { | |||||
const data = this.data; | |||||
if (data.accordion) { | |||||
this.triggerEvent('collapse', {name: data.name}, {composed: true, bubbles: true}); | |||||
} else { | |||||
this.setData({ | |||||
showContent: data.showContent ? '' : 'i-collapse-item-show-content' | |||||
}); | |||||
} | |||||
}, | |||||
} | |||||
}); | |||||
@@ -0,0 +1,7 @@ | |||||
{ | |||||
"component": true, | |||||
"usingComponents": { | |||||
"i-icon": "../icon/index" | |||||
} | |||||
} |
@@ -0,0 +1,9 @@ | |||||
<view id="{{name}}" class="i-class i-collapse-item "> | |||||
<view class="i-collapse-item-title-wrap" bindtap="trigger"> | |||||
<i-icon size="16" type="enter" i-class="{{ showContent ? 'i-collapse-item-arrow-show' : 'i-collapse-item-arrow' }}"/> | |||||
<text class="i-collapse-item-title i-class-title">{{title}}</text> | |||||
</view> | |||||
<view class="i-collapse-item-content {{showContent}} i-class-content"> | |||||
<slot name="content"></slot> | |||||
</view> | |||||
</view> |
@@ -0,0 +1 @@ | |||||
.i-collapse-item{padding:2px 8px;border-top:1px solid #dddee1}.i-collapse-item-title{vertical-align:middle}.i-collapse-item-title-wrap{padding:2px 0 0}.i-collapse-item-content{padding:6px;display:none}.i-collapse-item-show-content{display:block}.i-collapse-item-arrow{transition:transform .2s ease-in-out}.i-collapse-item-arrow-show{transition:transform .2s ease-in-out;transform:rotate(90deg)} |
@@ -0,0 +1,31 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
relations: { | |||||
'../collapse-item/index': { | |||||
type: 'child' | |||||
} | |||||
}, | |||||
properties: { | |||||
name: String, | |||||
accordion: Boolean | |||||
}, | |||||
methods: { | |||||
clickfn(e) { | |||||
const params = e.detail; | |||||
const allList = this.getRelationNodes('../collapse-item/index'); | |||||
allList.forEach((item) => { | |||||
if (params.name === item.data.name) { | |||||
item.setData({ | |||||
showContent: 'i-collapse-item-show-content' | |||||
}); | |||||
} else { | |||||
item.setData({ | |||||
showContent: '' | |||||
}); | |||||
} | |||||
}); | |||||
}, | |||||
} | |||||
}); | |||||
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<view class="i-class i-collapse" bindcollapse="clickfn"> | |||||
<slot></slot> | |||||
</view> | |||||
@@ -0,0 +1,90 @@ | |||||
Component({ | |||||
properties: { | |||||
target: Number, | |||||
showDay: Boolean, | |||||
callback: String, | |||||
format: Array, | |||||
clearTimer: Boolean | |||||
}, | |||||
externalClasses: ['countdown-class'], | |||||
data: { | |||||
time: '', | |||||
resultFormat: [], | |||||
changeFormat: false | |||||
}, | |||||
ready() { | |||||
this.getFormat(); | |||||
}, | |||||
methods: { | |||||
getFormat() { | |||||
const data = this.data; | |||||
const len = data.format.length; | |||||
if (!data.showDay) data.resultFormat.push(''); | |||||
if (len >= 3) { | |||||
for (let i = 0; i < len; i++) { | |||||
if (data.resultFormat.length >= 4) break; | |||||
if (data.format[i]) { | |||||
data.resultFormat.push(data.format[i].toString()); | |||||
} | |||||
} | |||||
if (data.resultFormat.length >= 4) data.changeFormat = true; | |||||
} | |||||
this.getLastTime(); | |||||
}, | |||||
init() { | |||||
const self = this; | |||||
setTimeout(function () { | |||||
self.getLastTime.call(self); | |||||
}, 1000); | |||||
}, | |||||
getLastTime() { | |||||
const data = this.data; | |||||
const gapTime = Math.ceil((data.target - new Date().getTime()) / 1000); | |||||
let result = ''; | |||||
let time = '00:00:00'; | |||||
let day = '00'; | |||||
const format = data.resultFormat; | |||||
if (gapTime > 0) { | |||||
day = this.formatNum(parseInt(gapTime / 86400)); | |||||
let lastTime = gapTime % 86400; | |||||
const hour = this.formatNum(parseInt(lastTime / 3600)); | |||||
lastTime = lastTime % 3600; | |||||
const minute = this.formatNum(parseInt(lastTime / 60)); | |||||
const second = this.formatNum(lastTime % 60); | |||||
if (data.changeFormat) time = `${hour}${format[1]}${minute}${format[2]}${second}${format[3]}`; | |||||
else time = `${hour}:${minute}:${second}`; | |||||
if (!data.clearTimer) this.init.call(this); | |||||
} else { | |||||
this.endfn(); | |||||
} | |||||
if (data.showDay) { | |||||
if (data.changeFormat) { | |||||
result = `${day}${format[0]} ${time}`; | |||||
} else { | |||||
result = `${day}d ${time}`; | |||||
} | |||||
} else { | |||||
result = time; | |||||
} | |||||
this.setData({ | |||||
time: result | |||||
}); | |||||
}, | |||||
formatNum(num) { | |||||
return num > 9 ? num : `0${num}`; | |||||
}, | |||||
endfn() { | |||||
this.triggerEvent('callback', {}); | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,4 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<text class="countdown-class"> | |||||
{{time}} | |||||
</text> | |||||
@@ -0,0 +1,25 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
properties: { | |||||
content: { | |||||
type: String, | |||||
value: '' | |||||
}, | |||||
height : { | |||||
type: Number, | |||||
value: 48 | |||||
}, | |||||
color : { | |||||
type : String, | |||||
value : '#80848f' | |||||
}, | |||||
lineColor : { | |||||
type : String, | |||||
value : '#e9eaec' | |||||
}, | |||||
size : { | |||||
type: String, | |||||
value: 12 | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,19 @@ | |||||
<view class="i-divider i-class" style="{{parse.getStyle(color,size,height)}}"> | |||||
<view class="i-divider-content" wx:if="{{content !== ''}}"> | |||||
{{content}} | |||||
</view> | |||||
<view class="i-divider-content" wx:else> | |||||
<slot></slot> | |||||
</view> | |||||
<view class="i-divider-line" style="background:{{lineColor}}"></view> | |||||
</view> | |||||
<wxs module="parse"> | |||||
module.exports = { | |||||
getStyle : function(color,size,height){ | |||||
var color = 'color:' + color +';'; | |||||
var size = 'font-size:' + size + 'px;'; | |||||
var height = 'height:' + height+'px;' | |||||
return color + size + height; | |||||
} | |||||
} | |||||
</wxs> |
@@ -0,0 +1 @@ | |||||
.i-divider{width:100%;text-align:center;font-size:12px;position:relative;display:flex;align-items:center;justify-content:center}.i-divider-line{position:absolute;left:0;width:100%;height:1rpx;background-color:#f7f7f7;top:50%}.i-divider-content{background:#fff;position:relative;z-index:1;display:inline-block;padding:0 10px} |
@@ -0,0 +1,33 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
properties: { | |||||
visible: { | |||||
type: Boolean, | |||||
value: false | |||||
}, | |||||
mask: { | |||||
type: Boolean, | |||||
value: true | |||||
}, | |||||
maskClosable: { | |||||
type: Boolean, | |||||
value: true | |||||
}, | |||||
mode: { | |||||
type: String, | |||||
value: 'left' // left right | |||||
} | |||||
}, | |||||
data: {}, | |||||
methods: { | |||||
handleMaskClick() { | |||||
if (!this.data.maskClosable) { | |||||
return; | |||||
} | |||||
this.triggerEvent('close', {}); | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1,6 @@ | |||||
<view class="i-class i-drawer {{ visible ? 'i-drawer-show' : '' }} {{ 'i-drawer-' + mode }}"> | |||||
<view wx:if="{{ mask }}" class="i-drawer-mask" bindtap="handleMaskClick"></view> | |||||
<view class="i-drawer-container"> | |||||
<slot></slot> | |||||
</view> | |||||
</view> |
@@ -0,0 +1 @@ | |||||
.i-drawer{visibility:hidden}.i-drawer-show{visibility:visible}.i-drawer-show .i-drawer-mask{display:block;opacity:1}.i-drawer-show .i-drawer-container{opacity:1}.i-drawer-show.i-drawer-left .i-drawer-container,.i-drawer-show.i-drawer-right .i-drawer-container{transform:translate3d(0,-50%,0)}.i-drawer-mask{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.6);transition:all .3s ease-in-out}.i-drawer-container{position:fixed;left:50%;top:50%;transform:translate3d(-50%,-50%,0);transform-origin:center;transition:all .3s ease-in-out;z-index:7;opacity:0}.i-drawer-left .i-drawer-container{left:0;top:50%;transform:translate3d(-100%,-50%,0)}.i-drawer-right .i-drawer-container{right:0;top:50%;left:auto;transform:translate3d(100%,-50%,0)} |
@@ -0,0 +1,10 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
relations: { | |||||
'../grid-item/index': { | |||||
type: 'parent' | |||||
} | |||||
}, | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1 @@ | |||||
<view class="i-class i-grid-icon"><slot></slot></view> |
@@ -0,0 +1 @@ | |||||
.i-grid-icon{display:block;width:28px;height:28px;margin:0 auto}.i-grid-icon image{width:100%;height:100%} |
@@ -0,0 +1,16 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
relations: { | |||||
'../grid/index': { | |||||
type: 'parent' | |||||
}, | |||||
'../grid-icon/index': { | |||||
type: 'child' | |||||
} | |||||
}, | |||||
data: { | |||||
width: '33.33%' | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1 @@ | |||||
<view class="i-class i-grid-item" style="width: {{ width }}"><slot></slot></view> |
@@ -0,0 +1 @@ | |||||
.i-grid-item{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #e9eaec;border-bottom:1rpx solid #e9eaec} |
@@ -0,0 +1,10 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
relations: { | |||||
'../grid-item/index': { | |||||
type: 'parent' | |||||
} | |||||
}, | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1 @@ | |||||
<view class="i-class i-grid-label"><slot></slot></view> |
@@ -0,0 +1 @@ | |||||
.i-grid-label{margin-top:5px;display:block;text-align:center;color:#1c2438;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} |
@@ -0,0 +1,50 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
relations: { | |||||
'../grid-item/index': { | |||||
type: 'child', | |||||
linked () { | |||||
this.setGridItemWidth(); | |||||
}, | |||||
linkChanged () { | |||||
this.setGridItemWidth(); | |||||
}, | |||||
unlinked () { | |||||
this.setGridItemWidth(); | |||||
} | |||||
} | |||||
}, | |||||
methods: { | |||||
setGridItemWidth () { | |||||
const nodes = this.getRelationNodes('../grid-item/index'); | |||||
// const len = nodes.length; | |||||
// if (len < 3) { | |||||
// nodes.forEach(item => { | |||||
// item.setData({ | |||||
// 'width': '33.33%' | |||||
// }); | |||||
// }); | |||||
// } else { | |||||
// const width = 100 / nodes.length; | |||||
// nodes.forEach(item => { | |||||
// item.setData({ | |||||
// 'width': width + '%' | |||||
// }); | |||||
// }); | |||||
// } | |||||
const width = 100 / nodes.length; | |||||
nodes.forEach(item => { | |||||
item.setData({ | |||||
'width': width + '%' | |||||
}); | |||||
}); | |||||
} | |||||
}, | |||||
ready () { | |||||
this.setGridItemWidth(); | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1 @@ | |||||
<view class="i-class i-grid"><slot></slot></view> |
@@ -0,0 +1 @@ | |||||
.i-grid{border-top:1rpx solid #e9eaec;border-left:1rpx solid #e9eaec;overflow:hidden} |
@@ -0,0 +1,22 @@ | |||||
Component({ | |||||
externalClasses: ['i-class'], | |||||
properties: { | |||||
type: { | |||||
type: String, | |||||
value: '' | |||||
}, | |||||
custom: { | |||||
type: String, | |||||
value: '' | |||||
}, | |||||
size: { | |||||
type: Number, | |||||
value: 14 | |||||
}, | |||||
color: { | |||||
type: String, | |||||
value: '' | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"component": true | |||||
} |
@@ -0,0 +1 @@ | |||||
<view class="i-class i-icon {{ type === '' ? '' : 'i-icon-' + type }} {{ custom }}" style="font-size: {{ size }}px; {{ color ? 'color:' + color : '' }}"></view> |