Commit fab7e72d authored by pengguangpu's avatar pengguangpu

初始化后屏工程;

parent 47dfac7e
.tea
.tea/*
.DS_Store
/.tea
.tea/layout.json
.tea/layout.json
.tea/entryFiles-development/index$.worker.js
.tea/entryFiles-development/index$.web.js
.tea/entryFiles-development/config$.js
page {
flex: 1;
display: flex;
background: #f7f7f7;
}
App({
onLaunch(options) {
// 第一次打开
// options.query == {number:1}
console.info('App onLaunch');
},
onShow(options) {
// 从后台被 scheme 重新打开
// options.query == {number:1}
},
});
{
"pages": [
"pages/index/index"
],
"window": {
"defaultTitle": "My App",
"extScreenApp": "YES"
}
}
export const API_LOGIN = "store/cashier/login";
export const API_SCAN = "market/barcodeQuery";
/* position: absolute 加上 left:0rpx;top:0rpx;即可突破原来限制,显示在父控件的顶部位置 */
popUpScanBg{
/* 阴影,全屏 */
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
height: 100%;
left: 0rpx;
top: 0rpx;
}
.popUpScan{
position: absolute;
margin-top: 286rpx;
height: 100%;
width: 100%;
left:0rpx;
top:0rpx;
background-color: #ffffff;
border-radius:8rpx 8rpx 0px 0px;
}
.close{
position: absolute;
right: 31rpx;
top: 31rpx;
width: 28rpx;
height: 28rpx;
}
.scanRemindText{
text-align: center;
font-size:38rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(0,0,0,0.85);
line-height:45rpx;
margin-top: 84rpx;
}
.scanRemindIcon{
position: relative;
margin-top: 63rpx;
width: 659rpx;
height: 605rpx;
margin-left: 34rpx;
}
.resultContainer{
display: flex;
flex-direction: column;
align-items: center;
top: 0rpx;
left: 0rpx;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.resultIcon{
width: 135rpx;
height: 135rpx;
margin-top: 236rpx;
}
.resultSuccessRemind{
text-align: center;
font-size:41rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(0,122,255,1);
line-height:41rpx;
margin-top: 28rpx;
}
.resultFailedRemind{
text-align: center;
font-size:41rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,0,0,1);
line-height:41rpx;
margin-top: 28rpx;
}
.resultText{
font-size:34rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(91,105,129,1);
line-height:34rpx;
text-align: center;
margin-top: 30rpx;
margin-left: 164rpx;
margin-right: 164rpx;
}
<view class="popUpScanBg" a:if="{{dialogDisplay >= show}}">
<!-- 灰黑色背景 -->
<view style="position:absolute;width:100%;height:100%;left:0rpx;top:0rpx;background-color: rgba(0, 0, 0, 0.65);background-size:100% 100%;"/>
<view class="popUpScan">
<image class="close" mode="aspectFit" src="/images/icon_dialog_cancel.png" onTap="dialogClose"/>
<!-- 初始状态 -->
<view style="display:flex;flex-direction:column;" a:if="{{dialogDisplay == show}}">
<view class="scanRemindText">{{remindText}}</view>
<!-- 图片 -->
<image class="scanRemindIcon" mode="aspectFit" src="/images/icon_scan_remind.png"/>
<!-- x -->
</view>
<!-- loading -->
<view style="position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;" a:if="{{dialogDisplay == loading}}" >
<image mode="aspectFit" src="/images/icon_dialog_loading.png" style="position:relative;top:307rpx;width:239rpx;height:239rpx;margin:0 auto;"/>
<view style="position:absolute;font-size:38rpx;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(0,0,0,0.85);line-height:45rpx;margin-top:404rpx;align-text:center;">{{loadingText}}</view>
</view>
<!-- 结果页面-成功 -->
<view class="resultContainer" a:if="{{dialogDisplay == resultSuccess}}">
<image class="resultIcon" mode="aspectFit" src="/images/icon_success.png"/>
<view class="resultSuccessRemind">{{resultSuccessRemind}}</view>
<view class="resultText">{{resultSuccessText}}</view>
</view>
<!-- 结果页面-失败 -->
<view class="resultContainer" a:if="{{dialogDisplay == resultFailed}}">
<image class="resultIcon" mode="aspectFit" src="/images/icon_failed.png"/>
<view class="resultFailedRemind">{{resultFailureRemind}}</view>
<view class="resultText">{{resultFailureText}}</view>
</view>
</view>
</view>
Component({
mixins: [],// minxin 方便复用代码
data: {
show: 1,
loading: 2,
resultSuccess: 3,
resultFailed: 4,
dialogDisplay:0,
},// 组件内部数据
props: {
remindText: "",
// warningText:"",
loadingText: "",
resultSuccessRemind:"",
resultSuccessText:"",
resultFailureRemind:"",
resultFailureText:"",
displayDialog: 0,
},// 可给外部传入的属性添加默认值
didMount() {
},// 生命周期函数,加载成功
didUpdate() {},//刷新
didUnmount() {},//生命周期
deriveDataFromProps(nextProps) { // 组件创建时触发或更新时触发
this.setData({
dialogDisplay:nextProps.displayDialog
}
)
console.log(" deriveDataFromProps", nextProps, this.props, this.data);
},
methods: {// 自定义方法
dialogClose(){
//隐藏
this.props.dialogDisplay = 0;
},
},
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
.cirqueBox {
position: relative;
width: 186rpx;
height: 186rpx;
border-radius: 50%;
-webkit-mask: radial-gradient(transparent, transparent 83rpx, #000 0);
mask: radial-gradient(transparent 83rpx, #000 0);
}
.cirque2 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #0e7afa;
z-index: 1;
}
.cirque1 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #aaa;
z-index: 2;
animation: mymove 1.5s linear infinite;
}
@keyframes mymove {
0% {
clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, 93rpx 393rpx, 393rpx 93rpx, 93rpx -207rpx);
}
25% {
clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, 93rpx 393rpx, 393rpx 93rpx, 393rpx 93rpx);
}
50% {
clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, 93rpx 393rpx, 93rpx 393rpx, 93rpx 393rpx);
}
75% {
clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, -207rpx 93rpx, -207rpx 93rpx, -207rpx 93rpx);
}
100% {
clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, 93rpx -207rpx, 93rpx -207rpx, 93rpx -207rpx, 93rpx -207rpx);
}
}
\ No newline at end of file
<view class="cirqueBox">
<view class="cirque2"></view>
<view class="cirque1"></view>
</view>
\ No newline at end of file
Component({
mixins: [],
data: {},
props: {},
didMount() {},
didUpdate() {},
didUnmount() {},
methods: {},
});
{
"component": true
}
\ No newline at end of file
This diff is collapsed.
MIT LICENSE
Copyright (c) 2018-present Alipay.com, https://www.alipay.com/
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
<p align="center">
<img width="300" src="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original">
</p>
# Mini AntUI
[![npm package](https://img.shields.io/npm/v/mini-antui.svg?style=flat-square)](https://www.npmjs.com/package/mini-antui)
[![GitHub stars](https://img.shields.io/github/stars/ant-mini-program/mini-antui.svg)](https://github.com/ant-mini-program/mini-antui/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/ant-mini-program/mini-antui.svg)](https://github.com/ant-mini-program/mini-antui/network/members)
[![NPM downloads](https://img.shields.io/npm/dm/mini-antui.svg?style=flat-square)](https://www.npmjs.com/package/mini-antui)
[![GitHub issues](https://img.shields.io/github/issues/ant-mini-program/mini-antui.svg)](https://github.com/ant-mini-program/mini-antui/issues)
[![GitHub license](https://img.shields.io/github/license/ant-mini-program/mini-antui.svg)](https://github.com/ant-mini-program/mini-antui/blob/master/LICENSE)
## 示例
<p align="left">
<img width="250" src="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*xXX3TqsZimMwfA5KoKInYQBjAQAAAQ/original">
</p>
## 链接
- [mini-antui官网文档](https://docs.alipay.com/mini/component-ext/overview-ext-common)
- [支付宝小程序](https://mini.open.alipay.com/channel/miniIndex.htm)
- [开发工具](https://docs.alipay.com/mini/ide/overview)
- [开发规范](https://github.com/ant-mini-program/mini-antui/wiki/%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83)
## 特性
- 基于`Advance Design`设计规范
- 使用[支付宝小程序](https://mini.open.alipay.com/channel/miniIndex.htm)开发
## 安装
```bash
$ npm install mini-antui --save
```
## 使用
在页面json中文件中进行注册,如card组件的注册如下所示:
```json
{
"usingComponents": {
"card": "mini-antui/es/card/index",
}
}
```
在axml文件中进行调用:
```html
<card
thumb="{{thumb}}"
title="卡片标题2"
subTitle="副标题非必填2"
onClick="onCardClick"
info="点击了第二个card"
/>
```
详细使用说明请参照官方文档[使用自定义组件](https://docs.alipay.com/mini/framework/use-custom-component)
## 贡献
如果你有好的意见或建议,欢迎给我们提[issue](https://github.com/ant-mini-program/mini-antui/issues)
export default function fmtEvent(props, e) {
var dataset = {};
for (var key in props) {
if (/data-/gi.test(key)) {
dataset[key.replace(/data-/gi, '')] = props[key];
}
}
return Object.assign({}, e, {
currentTarget: {
dataset: dataset
},
target: {
dataset: dataset,
targetDataset: dataset
}
});
}
\ No newline at end of file
.am-checkbox{position:relative;height:22px;width:22px;display:inline-block}.am-checkbox-value{position:absolute;z-index:1;border-radius:50%;opacity:0}.am-checkbox-synthetic{position:absolute;z-index:2;pointer-events:none;top:0;left:0;border-radius:50%;height:100%;width:100%}.am-checkbox-synthetic::before{position:absolute;left:0;top:0;height:200%;width:200%;display:block;box-sizing:border-box;border-radius:50%;content:'';transform-origin:0 0;transform:scale(.5);border:1px solid #c9c9c9}.am-checkbox-value.a-checkbox-checked+.am-checkbox-synthetic::before{background-color:#108ee9;border-color:#108ee9;border-width:0}.am-checkbox-value.a-checkbox-checked+.am-checkbox-synthetic::after{position:absolute;display:block;z-index:999;content:'';top:4px;right:8px;width:5px;height:10px;border:2px solid #fff;border-width:0 1px 1px 0;transform:rotate(45deg)}.am-checkbox-value.a-checkbox-disabled+.am-checkbox-synthetic::before{border:1px solid #ccc;background-color:#e1e1e1}.am-checkbox-value.a-checkbox-disabled+.am-checkbox-synthetic::after{border-color:#adadad}
\ No newline at end of file
<view class="am-checkbox">
<checkbox
class="am-checkbox-value"
value="{{value}}"
checked="{{checked}}"
disabled="{{disabled}}"
onChange="onChange"
id="{{id}}"
/>
<view class="am-checkbox-synthetic"></view>
</view>
\ No newline at end of file
import fmtEvent from '../_util/fmtEvent';
Component({
props: {
value: '',
checked: false,
disabled: false,
onChange: function onChange() {},
id: ''
},
methods: {
onChange: function onChange(e) {
var event = fmtEvent(this.props, e);
this.props.onChange(event);
}
}
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
@font-face{font-family:antui-icon;src:url(https://gw.alipayobjects.com/os/basement_prod/9ca2fed3-8762-4faa-b075-3d6c9e852f6e.ttf?t=1550648587412) format('truetype')}.am-icon{font-family:antui-icon!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.am-icon-arrow-down:before{content:"\e62b"}.am-icon-arrow-right:before{content:"\e62c"}.am-icon-charge:before{content:"\e62d"}.am-icon-card:before{content:"\e62e"}.am-icon-arrow-left:before{content:"\e62f"}.am-icon-circle:before{content:"\e630"}.am-icon-close-o:before{content:"\e631"}.am-icon-cross:before{content:"\e632"}.am-icon-delete:before{content:"\e633"}.am-icon-close:before{content:"\e634"}.am-icon-dislike-o:before{content:"\e635"}.am-icon-dislike:before{content:"\e636"}.am-icon-heart-o:before{content:"\e637"}.am-icon-download:before{content:"\e638"}.am-icon-heart:before{content:"\e639"}.am-icon-help-o:before{content:"\e63a"}.am-icon-friends:before{content:"\e63b"}.am-icon-info:before{content:"\e63c"}.am-icon-like-o:before{content:"\e63d"}.am-icon-help:before{content:"\e63e"}.am-icon-location-o:before{content:"\e63f"}.am-icon-location:before{content:"\e640"}.am-icon-info-o:before{content:"\e641"}.am-icon-notice:before{content:"\e642"}.am-icon-plus:before{content:"\e643"}.am-icon-like:before{content:"\e644"}.am-icon-qrcode:before{content:"\e645"}.am-icon-reload:before{content:"\e646"}.am-icon-scan:before{content:"\e647"}.am-icon-money:before{content:"\e648"}.am-icon-search:before{content:"\e649"}.am-icon-setting:before{content:"\e64a"}.am-icon-share:before{content:"\e64b"}.am-icon-star-o:before{content:"\e64c"}.am-icon-star:before{content:"\e64d"}.am-icon-success-o:before{content:"\e64e"}.am-icon-wait-o:before{content:"\e64f"}.am-icon-success:before{content:"\e650"}.am-icon-wait:before{content:"\e651"}.am-icon-warning:before{content:"\e652"}.am-icon-warning-o:before{content:"\e653"}.am-icon-zoom-in:before{content:"\e654"}.am-icon-zoom-out:before{content:"\e655"}.am-icon-arrow-up:before{content:"\e656"}
\ No newline at end of file
<text
class="am-icon {{className}} am-icon-{{type}}"
style="font-size: {{size}}px; color:{{color}};">
</text>
\ No newline at end of file
Component({
props: {
type: '',
size: 23,
color: '#333',
className: ''
}
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
.am-amount{box-sizing:border-box;height:173px;width:100%;padding:16px;background:#fff}.am-amount-title{height:24px;line-height:24px;color:#333;font-size:17px}.am-amount-synthetic{position:absolute;top:0;left:0;display:flex}.am-amount-input{box-sizing:content-box;margin-top:16px;padding-bottom:16px;display:flex;align-items:center;width:100%;height:48px;position:relative;line-height:48px}.am-amount-input::after{content:'';position:absolute;background-color:#eee;display:block;top:auto;right:0;bottom:0;left:0;height:1px;transform:scaleY(.5)}.am-amount-symbol{width:18px;font-family:PingFang SC;font-size:30px;color:#333}.am-amount-placeholder{margin-left:6px;color:#ccc;font-size:24px}.am-amount-value{padding:0 0 0 24px;box-sizing:border-box;z-index:2;height:48px;line-height:48px;vertical-align:middle;background-color:transparent;font-size:48px;font-weight:500}.am-amount-clear{visibility:hidden;width:28px;height:28px}.am-amount-clear-icon{display:flex;height:100%;justify-content:center;align-items:center}.am-amount-clear-show{visibility:visible}.am-amount-footer{padding:16px 0;display:flex}.am-amount-extra{flex:1;height:20px;line-height:20px;color:#999;font-size:14px}.am-amount-btn{width:120px;text-align:right;color:#108ee9;font-size:14px}
\ No newline at end of file
<view class="am-amount {{className}}">
<view class="am-amount-title">{{title}}</view>
<view class="am-amount-input">
<view class="am-amount-synthetic">
<text class="am-amount-symbol">¥</text>
<text class="am-amount-placeholder" style="{{ visibility: value.length == 0 ? 'visible': 'hidden'}}">{{placeholder}}</text>
</view>
<input
controlled="{{controlled}}"
type="{{type === 'digit' ? 'digit' : 'number'}}"
maxlength="{{maxLength}}"
class="am-amount-value"
value="{{value}}"
focus="{{focus}}"
onInput="onInput"
onConfirm="onConfirm"
onFocus="onFocus"
onBlur="onBlur" />
<view class="am-amount-clear {{ value.length > 0 && _focus ? 'am-amount-clear-show' : '' }}" onTap="onClearTap">
<icon class="am-amount-clear-icon" type="clear" size="22" />
</view>
</view>
<view class="am-amount-footer">
<text class="am-amount-extra">{{extra}}</text>
<view class="am-amount-btn" onTap="onButtonClick">{{btnText}}</view>
</view>
</view>
\ No newline at end of file
import fmtEvent from '../_util/fmtEvent';
Component({
props: {
type: 'number',
className: '',
focus: false,
placeholder: '',
value: '',
controlled: false
},
data: {
_focus: false
},
methods: {
onInput: function onInput(e) {
var event = fmtEvent(this.props, e);
if (this.props.onInput) {
this.props.onInput(event);
}
},
onConfirm: function onConfirm(e) {
var event = fmtEvent(this.props, e);
if (this.props.onConfirm) {
this.props.onConfirm(event);
}
},
onButtonClick: function onButtonClick() {
if (this.onButtonClick) {
this.props.onButtonClick();
}
},
onFocus: function onFocus(e) {
this.setData({
_focus: true
});
var event = fmtEvent(this.props, e);
if (this.props.onFocus) {
this.props.onFocus(event);
}
},
onBlur: function onBlur(e) {
this.setData({
_focus: false
});
var event = fmtEvent(this.props, e);
if (this.props.onBlur) {
this.props.onBlur(event);
}
},
onClearTap: function onClearTap() {
if (this.props.onClear) {
this.props.onClear('');
}
}
}
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
.am-badge{display:inline-block;position:relative;vertical-align:middle;line-height:1}.am-badge-text{display:inline-block;position:absolute;right:0;transform:translate(50%,-50%);top:0;min-width:16px;padding:0;height:16px;text-align:center;background-color:#ff3b30;border-radius:16px;color:#fff}.am-badge-text-padding{font-size:10px;opacity:0}.am-badge-text-inner{position:absolute;top:50%;left:50%;font-size:20px;transform:translate(-50%,-50%) scale(.5);white-space:nowrap}.am-badge-text.am-badge-double{padding:0 4px}.am-badge-not-a-wrapper .am-badge-text{position:relative;top:auto;right:auto;transform:translateX(0)}.am-badge-text.is-dot{padding:0;width:10px;min-width:10px;height:10px}
\ No newline at end of file
<view class="am-badge {{className}} {{!$slots.inner ? 'am-badge-not-a-wrapper' : ''}}">
<view
class="am-badge-text
{{ text.toString().length > 1 ? 'am-badge-double' : ''}}"
a:if="{{!dot}}">
<text class="am-badge-text-padding">{{typeof text === 'number' && text > overflowCount ? overflowCount + '+' : text }}</text>
<text class="am-badge-text-inner">{{typeof text === 'number' && text > overflowCount ? overflowCount + '+' : text }}</text>
</view>
<view class="am-badge-text is-dot" a:if="{{dot}}"></view>
<slot name="inner" />
</view>
\ No newline at end of file
Component({
props: {
className: '',
overflowCount: 99,
text: '',
dot: false
}
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
.am-calendar{background-color:#fff;padding-top:10px}.am-calendar-months{display:flex;box-sizing:border-box;padding:0 26px;align-items:center;height:28px}.am-calendar-next-month,.am-calendar-prev-month{display:flex;width:40px;font-size:20px}.am-calendar-prev-month{justify-content:flex-start}.am-calendar-next-month{justify-content:flex-end}.am-calendar-arrow{height:28px;width:12px;background-image:url(https://gw.alipayobjects.com/zos/rmsportal/vYcMhkfyHRIOeVXWdcPe.png);background-size:8px 14px;background-position:left center;background-repeat:no-repeat}.am-calendar-arrow_year{width:13px;background-repeat:repeat-x}.am-calendar-arrow.next{transform:rotate(180deg)}.am-calendar-selected-month{flex:1;text-align:center;font-size:20px;font-weight:600;color:#333}.am-calendar-days{display:flex;padding:14px 10px 9px;border-bottom:1rpx solid #eee;height:20px;line-height:20px;box-sizing:content-box}.am-calendar-day{flex:1;text-align:center;color:#333;font-size:14px}.am-calendar-dates{display:flex;flex-direction:column}.am-calendar-week{margin-bottom:17px;display:flex;flex-direction:row;padding:0 10px}.am-calendar-week:first-child{margin-top:12px}.am-calendar-date-wrap{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;height:42px;flex:1}.am-calendar-date{text-align:center;height:23px;line-height:23px;font-size:19px;font-family:Helvetica;color:#333}.am-calendar-tag{position:absolute;top:21px;width:42px;overflow:hidden;text-overflow:hidden;white-space:nowrap;color:#f5a623;font-size:10px;font-weight:500}.am-calendar-today{color:#108ee9}.am-calendar-gray{color:#ccc}.am-calendar-selected .am-calendar-block{position:absolute;left:calc(50% - 21px);top:calc(50% - 10px);transform:translateY(-50%);width:42px;height:42px;background:#309ef2;border-radius:2px}.am-calendar-middle.is-range .am-calendar-block{position:absolute;left:0;top:calc(50% - 10px);transform:translateY(-50%);height:42px;background:#309ef2;width:100%;border-radius:0}.am-calendar-start.is-range .am-calendar-block{position:absolute;left:calc(50% - 21px);top:calc(50% - 10px);transform:translateY(-50%);width:100%;height:42px;background:#309ef2;border-radius:2px 0 0 2px}.am-calendar-end.is-range .am-calendar-block{position:absolute;left:0;top:calc(50% - 10px);transform:translateY(-50%);width:calc(50% + 21px);height:42px;background:#309ef2;border-radius:0 2px 2px 0}.am-calendar-end .am-calendar-block.has-tag,.am-calendar-middle .am-calendar-block.has-tag,.am-calendar-selected .am-calendar-block.has-tag,.am-calendar-start .am-calendar-block.has-tag{top:calc(50% - 7px)}.am-calendar-end .am-calendar-date,.am-calendar-middle .am-calendar-date,.am-calendar-selected .am-calendar-date,.am-calendar-start .am-calendar-date{position:relative;color:#fff}.am-calendar-end .am-calendar-tag,.am-calendar-middle .am-calendar-tag,.am-calendar-selected .am-calendar-tag,.am-calendar-start .am-calendar-tag{color:#fff}.am-calendar-disable .am-calendar-date{color:#999}
\ No newline at end of file
<view class="am-calendar {{className}}" a:if="{{dates.length > 0}}">
<view class="am-calendar-months">
<view class="am-calendar-prev-month" onTap="onPrevYearTap" a:if="{{haveYear}}">
<view class="am-calendar-arrow am-calendar-arrow_year"></view>
</view>
<view class="am-calendar-prev-month" onTap="onPrevMonthTap">
<view class="am-calendar-arrow"></view>
</view>
<view class="am-calendar-selected-month">{{selectedYear}}年{{selectedMonth + 1}}月</view>
<view class="am-calendar-next-month" onTap="onNextMonthTap">
<view class="am-calendar-arrow next"></view>
</view>
<view class="am-calendar-next-month" onTap="onNextYearTap" a:if="{{haveYear}}">
<view class="am-calendar-arrow am-calendar-arrow_year next"></view>
</view>
</view>
<view class="am-calendar-days">
<block a:for="{{['日', '一', '二', '三', '四', '五', '六']}}">
<view class="am-calendar-day">{{item}}</view>
</block>
</view>
<view class="am-calendar-dates">
<block a:for="{{dates}}">
<view class="am-calendar-week">
<block a:for="{{item}}">
<view
class="am-calendar-date-wrap
{{ item.isSelected ? 'am-calendar-selected': '' }}
{{ item.isStart ? 'am-calendar-start': '' }}
{{ item.isMiddle ? 'am-calendar-middle': '' }}
{{ item.isEnd ? 'am-calendar-end': '' }}
{{ item.disable ? 'am-calendar-disable': '' }}
{{ type === 'range' ? 'is-range' : '' }}"
data-year="{{item.year}}"
data-month="{{item.month}}"
data-date="{{item.date}}"
onTap="onDateTap"
>
<view
class="am-calendar-block {{ blockType === 2 ? 'has-tag': '' }}"
></view>
<view
class="am-calendar-date {{ item.isGray ? 'am-calendar-gray': '' }} {{ item.isToday ? 'am-calendar-today': ''}}"
>{{item.date}}</view>
<view class="am-calendar-tag" style="{{
color: item.isSelected || item.isMiddle || item.isStart || item.isEnd ? '#fff' : (item.disable ? '#999' : item.color)
}}">{{item.disable ? '' : item.tag}}</view>
</view>
</block>
</view>
</block>
</view>
</view>
This diff is collapsed.
.am-card{display:flex;background-color:#fff;border-radius:4px;margin:6px 10px;align-items:center;min-height:81px;flex-direction:column;padding:0 16px}.am-card.am-card-active{background:#d9d9d9}.am-card-body{display:flex;align-items:center;width:100%;padding:16px 0}.am-card-content{flex:1;min-width:100px}.am-card-title{font-size:18px;line-height:25px;color:#333;margin-bottom:4px}.am-card-subtitle{font-size:14px;line-height:20px;color:#999;margin-bottom:2px}.am-card-thumb{margin-right:10px;width:48px;height:48px;border-radius:2px}.am-card-arrow{width:13px;height:13px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAaCAYAAAC+aNwHAAAAkElEQVR4AWJwL/BhAJRWByYAgkAUhmdpkDZxlJZqD9UpXCPyBUTEga9+4IkI94F1XaWUTdH+a67inPOhjP2OgD+IFoTcm1GY3khrbfGAGFG6kBmAkPCw1rq6iBYb0VkEzJD+hHQWAz6iJBtQdP8YiQEbUQNiAF0BP0T+Gnkj8VbmHxMq5gOFjzQ+VPlYxz+WEyrVzhdMcxADAAAAAElFTkSuQmCC) center center no-repeat;background-size:8px 13px}.am-card-footer{display:flex;width:100%;align-items:center;border-top:1rpx solid #eee;padding:10px 0;margin:-4px 0 0;font-size:14px;line-height:20px;color:#999}.am-card-footer image{width:14px;height:14px;margin-right:4px}
\ No newline at end of file
<view
class="am-card"
hover-class="am-card-active"
onTap="onCardClick"
>
<view class="am-card-body">
<image a:if="{{thumb}}" src="{{thumb}}" class="am-card-thumb" />
<view class="am-card-content">
<view a:if="{{!thumb || (thumb && footer)}}" class="am-card-title">{{title}}</view>
<view class="am-card-subtitle">{{subTitle}}</view>
<view a:if="{{!footer && thumb}}" class="am-card-title">{{title}}</view>
</view>
<view class="am-card-arrow" aria-hidden="true" />
</view>
<view a:if="{{footer}}" class="am-card-footer">
<image a:if="{{footerImg}}" src="{{footerImg}}" />
{{footer}}
</view>
</view>
Component({
props: {
title: '',
onClick: function onClick() {},
info: ''
},
methods: {
onCardClick: function onCardClick() {
var _this$props = this.props,
info = _this$props.info,
onClick = _this$props.onClick;
onClick({
info: info
});
}
}
});
\ No newline at end of file
.am-collapse-item{border-radius:4px;background-color:#fff}.am-collapse-item-title-container{width:100%;display:flex;color:#333;font-size:17px;line-height:24px;position:relative;text-align:justify;align-items:center;padding:0 16px 14px 0;justify-content:space-between;transition:all .3s ease-in-out}.am-collapse-item-title-container::after{content:'';position:absolute;background-color:#fff;display:block;top:auto;right:0;bottom:0;left:0;height:1px;transform:scaleY(.5)}.am-collapse-item--disabled .am-collapse-title{opacity:.5}.am-collapse-item-title{background-color:#fff;padding:14px 16px 0 16px;border-top:1px solid #eee}.am-collapse-item-title.title--active .am-collapse-item-title-container::after{content:'';position:absolute;background-color:#eee;display:block;top:auto;right:0;bottom:0;left:0;height:1px;transform:scaleY(.5)}.am-collapse-item-title-text-wrapper{padding-right:16px}.am-collapse-item-content-wrapper{overflow-y:hidden;box-sizing:border-box;will-change:max-height;transition:max-height .3s ease-in-out}.am-collapse-item-title-arrow{transform:rotate(0);transition:all .2s ease-out}.am-collapse-item .arrow--down{transform:rotate(180deg)}
\ No newline at end of file
<view
class="am-collapse-item {{className}} {{isActive ? activeClass : ''}} {{disabled ? 'am-collapse-item--disabled' : ''}}"
key="{{id}}"
>
<view
class="am-collapse-item-title {{titleClass}} {{isActive ? 'title--active' : ''}}"
onTap="onCollapseTap"
data-key="{{id}}"
data-title="{{title}}"
data-isActive="{{isActive}}"
>
<view class="am-collapse-item-title-container">
<view class="am-collapse-item-title-text-wrapper">
<slot name="am-collapse-item-title">
<text>{{header}}</text>
</slot>
</view>
<am-icon
a:if="{{showArrow}}"
size="{{16}}"
color="#ccc"
class="am-collapse-item-title-arrow arrow--{{isActive ? 'down' : 'right'}}"
type="arrow-up"
/>
</view>
</view>
<view
class="am-collapse-item-content-wrapper"
style="max-height: {{contentHeight}}px"
>
<view class="am-collapse-item-content am-collapse-item-content-{{contentId}} {{contentClass}}">
<slot></slot>
</view>
</view>
</view>
\ No newline at end of file
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var noop = function noop() {};
function collectArr(arr, ele) {
var resArr = arr;
if (arr instanceof Array) {
resArr.push(ele);
} else {
resArr = [ele];
}
return resArr;
}
var prefixKey = function prefixKey(prefix) {
return function (key) {
return prefix + "-" + key;
};
};
var collapsePrefix = prefixKey('am-collapse');
Component({
data: {
isActive: false,
contentHeight: 0,
contentId: '',
id: '',
activeKey: []
},
props: {
itemKey: '',
// 默认随机数
header: '',
isOpen: false,
showArrow: true,
activeClass: '',
className: '',
titleClass: '',
contentClass: '',
defaultContentHeight: 0,
disabled: false,
collapseKey: ''
},
didMount: function didMount() {
this.initItems();
},
methods: {
initItems: function initItems() {
var _this$props = this.props,
itemKey = _this$props.itemKey,
isOpen = _this$props.isOpen,
defaultContentHeight = _this$props.defaultContentHeight,
collapseKey = _this$props.collapseKey;
this.setData({
isActive: isOpen,
contentHeight: defaultContentHeight,
contentId: this.$id,
id: itemKey || this.$id
});
this.updateStyle({
isActive: isOpen
});
var bindedMethod = this.handleItemDataUpdate.bind(this);
this.$page[collapsePrefix("updates-" + collapseKey)] = collectArr(this.$page[collapsePrefix("updates-" + collapseKey)], bindedMethod);
this.$page[collapsePrefix("ids-" + collapseKey)] = collectArr(this.$page[collapsePrefix("ids-" + collapseKey)], this.data.id);
},
handleItemDataUpdate: function handleItemDataUpdate(data) {
this.setData(_extends({}, data));
var _this$data = this.data,
activeKey = _this$data.activeKey,
id = _this$data.id;
var isActive = activeKey.indexOf(id) !== -1;
this.setData({
isActive: isActive
});
this.updateStyle({
isActive: isActive
});
},
onCollapseTap: function onCollapseTap(evt) {
var collapseKey = this.props.collapseKey;
if (!this.props.disabled) {
var dataset = evt.currentTarget.dataset;
this.$page[collapsePrefix("handleItemTap-" + collapseKey)](dataset.key);
}
},
updateStyle: function updateStyle(_ref) {
var _this = this;
var isActive = _ref.isActive,
_ref$callback = _ref.callback,
callback = _ref$callback === void 0 ? noop : _ref$callback;
if (!isActive) {
this.setData({
isActive: isActive,
contentHeight: 0
});
callback();
} else {
this.calcContentHeight(".am-collapse-item-content." + ("am-collapse-item-content-" + this.$id)).then(function (height) {
_this.setData({
isActive: isActive,
contentHeight: height
});
callback();
});
}
},
calcContentHeight: function calcContentHeight(selector) {
if (selector === void 0) {
selector = '';
}
return new Promise(function (resolve, reject) {
my.createSelectorQuery().select(selector).boundingClientRect().exec(function (res) {
if (res && res[0]) {
resolve(res[0].height);
} else {
reject(res);
}
});
});
}
}
});
\ No newline at end of file
{
"component": true,
"usingComponents": {
"am-icon": "../../am-icon/index"
}
}
\ No newline at end of file
<view class="am-collapse {{className}} am-collapse-container-{{id}}">
<slot></slot>
</view>
\ No newline at end of file
var noop = function noop() {};
var prefixKey = function prefixKey(prefix) {
return function (key) {
return prefix + "-" + key;
};
};
var collapsePrefix = prefixKey('am-collapse');
Component({
data: {
id: '',
activeArr: []
},
props: {
activeKey: [],
accordion: false,
onChange: noop,
openAnimation: {},
collapseKey: '',
className: ''
},
didMount: function didMount() {
this.initData();
},
didUnmount: function didUnmount() {
// clear cache in page when didUnmount
delete this.$page[collapsePrefix("ids-" + this.props.collapseKey)];
delete this.$page[collapsePrefix("updates-" + this.props.collapseKey)];
},
methods: {
initData: function initData() {
var _this$props = this.props,
accordion = _this$props.accordion,
activeKey = _this$props.activeKey,
collapseKey = _this$props.collapseKey;
var activeArr = [];
this.$page[collapsePrefix("handleItemTap-" + collapseKey)] = this.handleItemTap.bind(this);
if (accordion) {
if (typeof activeKey === 'string') {
activeArr = [activeKey];
} else {
activeArr = [this.$page[collapsePrefix("ids-" + collapseKey)] && this.$page[collapsePrefix("ids-" + collapseKey)][0]];
}
} else if (typeof activeKey === 'string') {
activeArr = [activeKey];
} else if (activeKey instanceof Array) {
activeArr = activeKey;
}
this.updateItems(activeArr);
},
handleItemTap: function handleItemTap(key) {
var activeArr = this.data.activeArr;
if (this.props.accordion) {
if (activeArr.indexOf(key) === -1) {
this.updateItems([key]);
} else {
this.updateItems([]);
}
} else {
var index = activeArr.indexOf(key);
if (index !== -1) {
activeArr.splice(index, 1);
} else {
activeArr.push(key);
}
this.updateItems(activeArr);
}
},
updateItems: function updateItems(activeArr) {
var _this = this;
var collapseKey = this.props.collapseKey;
this.setData({
activeArr: activeArr
});
this.props.onChange(activeArr);
this.$page[collapsePrefix("updates-" + collapseKey)].forEach(function (update) {
if (typeof update === 'function') {
update({
activeKey: _this.data.activeArr
});
}
});
}
}
});
\ No newline at end of file
<web-view
a:if="{{appName && serviceName}}"
src="https://render.alipay.com/p/s/tiny-webar-online/www/faceDetect.html?facing={{facing}}&appName={{appName}}&serviceName={{serviceName}}&useLiveFaceCheck={{useLiveFaceCheck}}&resignSuccessBtnText={{btnText}}"
id="am-face-detection"
onMessage="onMessage"
enableWK="{{false}}"
/>
<view a:else style="color: red; text-align: center; font-size: 14px; padding: 10px">appName and serviceName is required</view>
\ No newline at end of file
Component({
props: {
facing: 'front',
appName: '',
serviceName: '',
useLiveFaceCheck: false,
minRotate: -1
},
didMount: function didMount() {
this.webViewContext = my.createWebViewContext('am-face-detection');
this.doFaceLeftResolve = null;
this.isDidFaceLeftResolve = false;
this.doFaceRightResolve = null;
this.isDidFaceRightResolve = false;
},
didUnMount: function didUnMount() {
this.webViewContext.postMessage({
action: 'releaseCamera'
});
},
methods: {
doLeftFaceCheck: function doLeftFaceCheck() {
var _this = this;
return new Promise(function (resolve, reject) {
_this.isDidFaceLeftResolve = false;
_this.webViewContext.postMessage({
action: 'doFaceLeft',
data: {
minRotate: _this.props.minRotate
}
});
_this.doFaceLeftResolve = resolve;
setTimeout(function () {
if (!_this.isDidFaceLeftResolve) {
reject();
}
}, 30000);
});
},
doRightFaceCheck: function doRightFaceCheck() {
var _this2 = this;
return new Promise(function (resolve, reject) {
_this2.isDidFaceRightResolve = false;
_this2.webViewContext.postMessage({
action: 'doFaceRight',
data: {
minRotate: _this2.props.minRotate
}
});
_this2.doFaceRightResolve = resolve;
setTimeout(function () {
if (!_this2.isDidFaceRightResolve) {
reject();
}
}, 30000);
});
},
onMessage: function onMessage(e) {
var _this3 = this;
var _this$props = this.props,
onFaceStatusChange = _this$props.onFaceStatusChange,
onFail = _this$props.onFail,
onSuccessBtnTap = _this$props.onSuccessBtnTap;
var _e$detail = e.detail,
action = _e$detail.action,
data = _e$detail.data;
if (action === 'resignSuccessBtnClick') {
if (onSuccessBtnTap) {
onSuccessBtnTap();
}
}
if (action === 'faceRotated' && data.forward === 'left') {
this.isDidFaceLeftResolve = true;
this.doFaceLeftResolve(data.imageBase64);
return;
}
if (action === 'faceRotated' && data.forward === 'right') {
this.isDidFaceRightResolve = true;
this.doFaceRightResolve(data.imageBase64);
return;
}
if (action === 'captureImage') {
if (onFaceStatusChange) {
var promise = onFaceStatusChange({
imageBase64: data.imageBase64,
faceRect: data.faceRect
}, {
doLeftFaceCheck: this.doLeftFaceCheck.bind(this),
doRightFaceCheck: this.doRightFaceCheck.bind(this)
});
if (promise instanceof Promise) {
promise.then(function () {
_this3.webViewContext.postMessage({
action: 'requestSuccess'
});
})["catch"](function () {
_this3.webViewContext.postMessage({
action: 'requestFailure'
});
});
} else {
this.webViewContext.postMessage({
action: 'requestSuccess'
});
}
}
} else {
/* eslint-disable */
if (onFail) {
onFail({
code: data.code,
message: data.message
});
}
}
}
}
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
.am-filter-item-wrap{padding:7px 6px;min-width:33.3%;max-width:180px;overflow:hidden;float:left;display:list-item;box-sizing:border-box}.am-filter-item{font-size:14px;height:36px;line-height:36px;background:#f5f5f5;border-radius:2px;text-align:center;padding:0 20px;box-sizing:border-box}.am-filter-click{color:#108ee9;background:#e1f2fe url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAfCAYAAACLSL/LAAAEgElEQVRYhc2Xa0wcVRTH/2cXdi2F0pe29RWMNbHBpLWf2qQmWqma4Ftj1ZBqfcQYjUmlobESP2hDfTT9ILGaaEEECQ0qjy5uNgUDRGiatsG0JNpStaAujy6wsO+d2Xv8MDN3ZhekSHndZLObe+fO/Oac//nfs8TMWEyj3SvS3jnuLU5baBDrqL+kZO1p8JZf9sWeWjRgpWeit773o7fJH1HvAoBFAbbHM7rlSOeoK64kVhlzCwp2sl9QSYtvl+vXQBnANuvagoGd6FMdha7Bg+e90bdBABgAEUAABIMWoioru2PLi9xDNQPjyoMAAIOBWf6e94h90BFa/1Grzx2KifU6TfIFRADmGezFRv99VV3jjQnBmRKCoaXPGHrU5gWsY1DQfrfv9fbLkc/kpKErKxCg64zmHqz+kurc6/GV/u6Lv6pFyALALFOn0+mwcyz+I13R1cXNI3WjEXWb8dwkoUseAYD0b8xtKvf+FNxQemrsRFwVN0kRUWoQjAhKv5ArcwL2eK0/v/Fi+HtmdspUTZZCZg3IWgT6dbbJbjzT0dInbHcf9e1ruBh2MeBM0g+R/uSJn5wVaViXaTevI5o9sOrflIxdx4erfhlSPpQZMTJHeqpInySzJDetc+Dky2uxeqk96X6zksqDp6JrSzrGm4IxsTkZRE8RA6bOIFN5/21O1O28HllOm/kC+to1g73iCW/6+lzQk0iIG7SHUnLFGSPFKp7PXYLyx1bBYScMBBIYDCd0drr2qry3xv9MW2+sGiC7WVl6ytgSIcOf9AgWbsnEJ3nZICL0janI+2YIQyHTw2asMdefqv2Oo/4DbX8px0BklzoGmYZpzFm6BgLj8APZOLRjOYgIPcMK7ikfRM+IKkU/47Pyi24ls7gt+O1wWH1UEsgUWUAAXS/aT4edUPHICjybmwEA6B6KY0flFQyEdFOVkdbf7/84f9HP0Vs+PRPyxFTeICf1/SXbMlCQex0AoOJ8BO93BKEktLVl6UDd0yuxPccJADjtjeOh6isYiZhtjqlLbW7aYE82BLfW98TcDM5OhtJe08ZARX4mCnKXAADODigoaPRjLCrg3rkSG9ekAwDa+2J4uGYYgbgw9yfBaVqbFtjmqrHdXQPKV5jMkOVNARsYFfnLZOQiCmM0KnBjluZRnj+ieKJ2GBHVstey31rNU4Idu6CmF7YGDv0TSLx1VXrjKGFGRX6WjJwxfrgQwXN1o4iLVAhLNcr5Kezi47Ox7AOdoe8CMZF3VSgJBwgivNAUAAAJV9kdwW6XHwlhORKsp4O1N5uqKl9rjtxedi7crArOmTaU4fYMCEDCBeKMNzzjYCbT07QNgEhpX4nl8oRU5tWOb2/pUxrBvHTaUMZIqTCbDmn2WfiPFBpFIK2jX4rZ3SvozrKxN1t6480zggKSTZIIwnpoG3/NpBnD7DisZysRQLZWYmZ82a049rcHPveFxUszAkodk3apk3gWW6Jlin8ETtqY9m5nfM3h04G6qMJbZwUKmNgMSj6yCD2130c/QK1woAj7bv77X8e4TyVCc9zHAAAAAElFTkSuQmCC) right bottom no-repeat;background-size:17px 13px}
\ No newline at end of file
<view class="am-filter-item-wrap {{className}}" onTap="handleClick">
<view class="am-filter-item {{confirmStyle !=='' ? 'am-filter-click':''}}">{{value}}</view>
</view>
import lifecycle from '../mixins/lifecycle';
Component({
mixins: [lifecycle],
data: {
confirmStyle: ''
},
props: {
className: '',
item: '',
id: '',
value: '',
selected: false,
onChange: function onChange() {}
},
didMount: function didMount() {
var _this$data = this.data,
results = _this$data.results,
items = _this$data.items;
var _this$props = this.props,
selected = _this$props.selected,
id = _this$props.id,
value = _this$props.value;
if (selected) {
results.push({
id: id,
value: value
});
items.push({
id: id,
value: value,
setData: this.setData
});
this.setData({
confirmStyle: true
});
}
},
methods: {
handleClick: function handleClick() {
var _this$props2 = this.props,
id = _this$props2.id,
value = _this$props2.value,
onChange = _this$props2.onChange;
var confirmStyle = this.data.confirmStyle;
var _this$data2 = this.data,
results = _this$data2.results,
items = _this$data2.items,
commonProps = _this$data2.commonProps;
if (commonProps.max === 1) {
if (confirmStyle === '') {
items.forEach(function (element) {
element.setData({
confirmStyle: ''
});
});
results.splice(0, results.length);
confirmStyle = true;
results.push({
id: id,
value: value
});
items.push({
id: id,
value: value,
setData: this.setData
});
onChange(results);
}
this.setData({
confirmStyle: confirmStyle
});
return;
}
if (confirmStyle === '' && results.length < commonProps.max) {
confirmStyle = true;
results.push({
id: id,
value: value
});
items.push({
id: id,
value: value,
setData: this.setData
});
} else {
confirmStyle = '';
results.some(function (key, index) {
if (JSON.stringify(key) === JSON.stringify({
id: id,
value: value
})) {
results.splice(index, 1);
return true;
} else {
return false;
}
});
}
this.setData({
confirmStyle: confirmStyle
});
}
}
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
.am-filter-show{height:100vh;display:block;position:relative}.am-filter-hide{display:none}.am-filter-document,.am-filter-mask{position:absolute;top:0;left:0;right:0}.am-filter-mask{bottom:0;background:rgba(0,0,0,.65)}.am-filter-content{background:#fff;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:scroll}.am-filter-list{flex:1;padding:10px 5px 23px;overflow-x:hidden;min-height:200px;overflow-y:scroll;max-height:415px;box-sizing:border-box}.am-filter-btn{width:100%;display:flex}.am-filter-default,.am-filter-primary{flex:1;height:48px;font-size:18px;box-sizing:border-box;width:50%;border:0;border-radius:0}.am-filter-default{border-top:1px solid #eee;border-right:none}
\ No newline at end of file
<view class="am-filter-{{show ? 'show' : 'hide'}} {{className}}" disable-scroll="{{false}}">
<view class="am-filter-mask" onTap="maskTap" />
<view class="am-filter-document">
<view class="am-filter-content" onChange="{{callBackFn}}">
<view class="am-filter-list">
<slot/>
</view>
<view class="am-filter-btn" a:if="{{max !== 1}}">
<button type="default" class="am-filter-default" onTap="resetFn">重置</button>
<button type="primary" class="am-filter-primary" onTap="confirmFn">确定</button>
</view>
</view>
</view>
</view>
import lifecycle from './mixins/lifecycle';
Component({
mixins: [lifecycle],
data: {
maxHeight: 0
},
props: {
className: '',
onChange: function onChange() {},
max: 10000
},
didMount: function didMount() {
var commonProps = this.data.commonProps;
var max = this.props.max;
commonProps.max = max;
},
methods: {
resetFn: function resetFn() {
var _this$data = this.data,
items = _this$data.items,
results = _this$data.results;
items.forEach(function (element) {
element.setData({
confirmStyle: ''
});
});
results.splice(0, results.length);
},
confirmFn: function confirmFn() {
var onChange = this.props.onChange;
var results = this.data.results;
onChange(results);
},
maskTap: function maskTap() {
if (this.props.onMaskTap) {
this.props.onMaskTap();
}
}
}
});
\ No newline at end of file
export default {
data: {
results: [],
items: [],
commonProps: {
max: 10000
}
},
didUnmount: function didUnmount() {
var _this$data = this.data,
items = _this$data.items,
results = _this$data.results;
results.splice(0, results.length);
items.splice(0, items.length);
}
};
\ No newline at end of file
.am-flexbox-item{box-sizing:border-box;flex:1;min-width:10px;margin-left:8px}.am-flexbox-item:first-child{margin-left:0}
\ No newline at end of file
<view class="am-flexbox-item">
<slot />
</view>
\ No newline at end of file
Component({});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
.am-flexbox{display:flex}.am-flexbox-dir-row{flex-direction:row}.am-flexbox-dir-row-reverse{flex-direction:row-reverse}.am-flexbox-dir-column{flex-direction:column}.am-flexbox-dir-column-reverse{flex-direction:column-reverse}.am-flexbox-nowrap{flex-wrap:nowrap}.am-flexbox-wrap{flex-wrap:wrap}.am-flexbox-wrap-reverse{flex-wrap:wrap-reverse}.am-flexbox-justify-start{justify-content:flex-start}.am-flexbox-justify-center{justify-content:center}.am-flexbox-justify-end{justify-content:flex-end}.am-flexbox-justify-between{justify-content:space-between}.am-flexbox-justify-around{justify-content:space-around}.am-flexbox-align-start{align-items:flex-start}.am-flexbox-align-end{align-items:flex-end}.am-flexbox-align-center{align-items:center}.am-flexbox-align-stretch{align-items:stretch}.am-flexbox-align-baseline{align-items:baseline}.am-flexbox-align-content-start{align-content:flex-start}.am-flexbox-align-content-end{align-content:flex-end}.am-flexbox-align-content-center{align-content:center}.am-flexbox-align-content-between{align-content:space-between}.am-flexbox-align-content-around{align-content:space-around}.am-flexbox-align-content-stretch{align-content:stretch}
\ No newline at end of file
<import-sjs name="classnames" from="./index.sjs"/>
<view
class="am-flexbox {{className}} {{classnames(direction, wrap, justify, align, alignContent)}}">
<slot />
</view>
\ No newline at end of file
Component({
props: {
className: '',
direction: 'row',
wrap: 'nowrap',
justify: 'start',
align: 'center',
alignContent: 'stretch'
}
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
export default function classnames(dir, wrap, justify, align, alignContent) {
const prefixCls = 'am-flexbox';
const classes = [];
const dirMaps = {
row: `${prefixCls}-dir-row`,
'row-reverse': `${prefixCls}-dir-row-reverse`,
column: `${prefixCls}-dir-column`,
'column-reverse': `${prefixCls}-dir-column-reverse`,
};
const wrapMaps = {
nowrap: `${prefixCls}-nowrap`,
wrap: `${prefixCls}-wrap`,
'wrap-reverse': `${prefixCls}-wrap-reverse`,
};
const justifyMaps = {
start: `${prefixCls}-justify-start`,
end: `${prefixCls}-justify-end`,
center: `${prefixCls}-justify-center`,
between: `${prefixCls}-justify-between`,
around: `${prefixCls}-justify-around`,
};
const alignMaps = {
start: `${prefixCls}-align-start`,
center: `${prefixCls}-align-center`,
end: `${prefixCls}-align-end`,
baseline: `${prefixCls}-align-baseline`,
stretch: `${prefixCls}-align-stretch`,
};
const alignContentMaps = {
start: `${prefixCls}-align-content-start`,
end: `${prefixCls}-align-content-end`,
center: `${prefixCls}-align-content-center`,
between: `${prefixCls}-align-content-between`,
around: `${prefixCls}-align-content-around`,
stretch: `${prefixCls}-align-content-stretch`,
};
if (dirMaps[dir]) {
classes.push(dirMaps[dir]);
}
if (wrapMaps[wrap]) {
classes.push(wrapMaps[wrap]);
}
if (justifyMaps[justify]) {
classes.push(justifyMaps[justify]);
}
if (alignMaps[align]) {
classes.push(alignMaps[align]);
}
if (alignContentMaps[alignContent]) {
classes.push(alignContentMaps[alignContent]);
}
return classes.join(' ');
}
.am-footer-links{display:flex;justify-content:center}.am-footer-link{height:17px;line-height:17px;color:#108ee9;font-size:12px}.am-footer-link::after{content:'|';padding:0 5px;height:17px;color:#ccc}.am-footer-link:last-child::after{display:none}.am-footer-copyright{margin-top:3px;height:17px;line-height:17px;color:#ccc;font-size:14px;text-align:center}
\ No newline at end of file
<view class="am-footer {{className}}">
<view class="am-footer-links" a:if="{{links && links.length > 0}}">
<block a:for="{{links}}">
<navigator class="am-footer-link" url="{{item.url}}">{{item.text}}</navigator>
</block>
</view>
<view class="am-footer-copyright" a:if="{{copyright}}">{{copyright}}</view>
</view>
\ No newline at end of file
Component({
props: {
className: ''
}
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
.am-grid{display:flex;flex-direction:row;flex-wrap:wrap;background-color:#fff}.am-grid-item-wrapper{position:absolute;left:0;bottom:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.am-grid-item{text-align:center;position:relative}.am-grid-icon-container{display:flex;justify-content:center;align-items:center}.am-grid-icon{flex:1;width:36px;height:36px}.am-grid-text-wrapper{display:flex;flex-direction:column;align-items:flex-start}.am-grid-text{color:#333;font-size:14px;line-height:1;margin-top:14px}.am-grid-desc{color:#999;font-size:12px}.am-grid-2 .am-grid-item-wrapper{flex-direction:row;justify-content:flex-start}.am-grid-2 .am-grid-item.has-desc{padding-top:70px}.am-grid-2 .am-grid-item{padding-top:64px}.am-grid-2 .am-grid-icon-container{margin-left:16px}.am-grid-2 .am-grid-icon{width:28px;height:28px}.am-grid-2 .am-grid-text{margin-top:0;margin-left:12px;height:24px;line-height:24px;font-size:17px}.am-grid-2 .am-grid-desc{margin-left:12px;height:16px;line-height:16px}.am-grid-3{padding:0 16px}.am-grid-3.am-grid-no-line{padding:8px 16px 0 16px}.am-grid-3 .am-grid-border{position:absolute;left:0;bottom:0;width:100%;height:100%;border-bottom:1rpx solid #eee;border-right:1rpx solid #eee;box-sizing:border-box}.am-grid-3 .am-grid-right{border-right:none}.am-grid-3 .am-grid-bottom{border-bottom:none}.am-grid-3 .am-grid-top{height:calc(100% - 15px)}.am-grid-3 .am-grid-text-wrapper{align-items:center}.am-grid-3 .am-grid-text{height:20px;line-height:20px;margin-top:12px}.am-grid-3 .am-grid-desc{height:17px;line-height:17px}.am-grid-3 .am-grid-item{padding-top:125px}.am-grid-no-line .am-grid-item{padding-top:110px}.am-grid-no-line .am-grid-item .am-grid-border{border-right:0 none;border-bottom:0 none}.am-grid-5{padding-top:6px;padding-bottom:7px}.am-grid-5 .am-grid-item{padding-top:75px}.am-grid-5 .am-grid-icon{border-radius:50%;width:43px;height:43px}.am-grid-5 .am-grid-text{font-size:12px;margin-top:7px}.am-grid-4{padding-top:7px;padding-bottom:7px}.am-grid-4 .am-grid-item{padding-top:68px}.am-grid-4 .am-grid-icon-container{margin-top:7px}.am-grid-4 .am-grid-icon{height:28px;width:28px}.am-grid-4 .am-grid-text{font-size:13px;height:13px;line-height:13px;margin-top:7px}.am-grid-4.circular{padding-top:3px}.am-grid-4.circular .am-grid-item{padding-top:82px}.am-grid-4.circular .am-grid-icon-container{margin-top:13px;padding:8px;border-radius:50%;background-color:#d8d8d8}.am-grid-4.circular .am-grid-icon{width:26px;height:26px;flex:1}.am-grid-4.circular .am-grid-text{height:16px;line-height:16px}
\ No newline at end of file
<view class="am-grid am-grid-{{columnNum}} {{circular && columnNum === 4 ? 'circular' : ''}} {{hasLine ? '' : 'am-grid-no-line'}}" >
<block a:for="{{list}}">
<view
style="width:{{100/(columnNum)}}%;"
class="am-grid-item {{list.some(item => item.desc && item.desc) ? 'has-desc' : ''}}"
onTap="onGridItemClick"
data-index={{index}}
key="grid-item-{{index}}"
>
<view class="am-grid-border {{index < 2 ? 'am-grid-top' : ''}} {{index >= bottomIndex ? 'am-grid-bottom' : ''}} {{(index + 1) % columnNum === 0 ? 'am-grid-right' : ''}}" />
<slot item="{{item}}">
<view class="am-grid-item-wrapper">
<view class="am-grid-icon-container">
<image src="{{item.icon}}" class="am-grid-icon" mode="aspectFit" />
</view>
<view class="am-grid-text-wrapper">
<text class="am-grid-text">{{item.text}}</text>
<text class="am-grid-desc" a:if="{{(columnNum === 2 || columnNum === 3) && item.desc && item.desc !== ''}}">{{item.desc}}</text>
</view>
</view>
</slot>
</view>
</block>
</view>
\ No newline at end of file
Component({
data: {
bottomIndex: 0
},
props: {
columnNum: 3,
circular: false,
list: [],
onGridItemClick: function onGridItemClick() {},
hasLine: true
},
didMount: function didMount() {
var _this$props = this.props,
list = _this$props.list,
columnNum = _this$props.columnNum;
var rows = list.length / columnNum;
this.setData({
bottomIndex: Math.floor(rows) === rows ? (rows - 1) * columnNum : Math.floor(rows) * columnNum
});
},
methods: {
onGridItemClick: function onGridItemClick(e) {
this.props.onGridItemClick({
detail: {
index: e.target.dataset.index
}
});
}
}
});
\ No newline at end of file
.am-input-item{display:flex;align-items:center;background:#fff;padding-left:15px}.am-input-item .a-input-content{padding-left:2px}.am-input-line{position:relative;flex:1;display:flex;align-items:center;padding-right:15px;min-height:47px;overflow:hidden}.am-input-label{min-width:80px;margin-right:2px;color:#333}.am-input-content{flex:1;display:flex;height:33px;color:#000;text-align:left}.am-input-content .a-input-wrap{flex:1}.am-input-clear{display:flex;height:33px;width:33px;justify-content:center;align-items:center}.am-input-clear.show{visibility:visible}.am-input-clear.hidden{visibility:hidden;pointer-events:none}.am-input-line-bottom::after{content:'';position:absolute;background-color:#eee;display:block;top:auto;right:0;bottom:0;left:0;height:1px;transform:scaleY(.5)}.am-input-item.last .am-input-line-bottom::after{display:none}
\ No newline at end of file
<view
class="am-input-item {{last ? 'last': ''}} {{className}}"
>
<view class="am-input-line">
<view a:if="{{$slots.$default}}" class="am-input-label {{labelCls}}">
<slot />
</view>
<input
enableNative="{{enableNative}}"
sync-input="{{syncInput}}"
class="am-input-content {{inputCls}}"
value="{{value}}"
name="{{name}}"
type="{{type}}"
password="{{password}}"
placeholder="{{placeholder}}"
placeholderClass="{{placeholderClass}}"
placeholderStyle="{{placeholderStyle}}"
disabled="{{disabled}}"
maxlength="{{maxlength}}"
focus="{{focus}}"
onInput="onInput"
onConfirm="onConfirm"
onFocus="onFocus"
onBlur="onBlur"
/>
<view class="am-input-clear {{clear && value.length > 0 && !disabled && _focus ? 'show' : 'hidden'}}" onTap="onClear">
<icon size="18" type="clear" />
</view>
<slot name="extra" />
<view class="am-input-line-bottom" />
</view>
</view>
import fmtEvent from '../_util/fmtEvent';
Component({
props: {
className: '',
labelCls: '',
inputCls: '',
last: false,
value: '',
name: '',
type: 'text',
password: false,
placeholder: '',
placeholderClass: '',
placeholderStyle: '',
disabled: false,
maxlength: 140,
focus: false,
clear: false,
// 是否带清除功能
syncInput: false,
enableNative: false,
// 兼容安卓input的输入bug
onInput: function onInput() {},
onConfirm: function onConfirm() {},
onFocus: function onFocus() {},
onBlur: function onBlur() {},
onClear: function onClear() {}
},
data: {
_focus: false
},
didMount: function didMount() {
this.setData({
_focus: this.props.focus
});
},
methods: {
onBlur: function onBlur(e) {
this.setData({
_focus: false
});
var event = fmtEvent(this.props, e);
this.props.onBlur(event);
},
onConfirm: function onConfirm(e) {
var event = fmtEvent(this.props, e);
this.props.onConfirm(event);
},
onFocus: function onFocus(e) {
this.setData({
_focus: true
});
var event = fmtEvent(this.props, e);
this.props.onFocus(event);
},
onInput: function onInput(e) {
var event = fmtEvent(this.props, e);
this.props.onInput(event);
},
onClear: function onClear(e) {
var event = fmtEvent(this.props, e);
this.props.onClear(event);
}
}
});
\ No newline at end of file
.am-list-footer,.am-list-header{font-size:14px;color:#888}.am-list-header{padding:16px 16px 8px}.am-list-body{position:relative}.am-list-body::before{content:'';position:absolute;background-color:#eee;display:block;top:0;right:0;bottom:auto;left:0;height:1px;transform:scaleY(.5)}.am-list-body::after{content:'';position:absolute;background-color:#eee;display:block;top:auto;right:0;bottom:0;left:0;height:1px;transform:scaleY(.5)}.am-list-footer{padding:8px 16px 16px 16px}.am-list-load-more{text-align:center;background:#fff;padding:10px 16px;font-size:15px;line-height:1.4;color:#333}.am-list-load-more-txt{padding:0 10px}.am-list-load-over{display:block;padding:10px 16px;font-size:10px;text-align:center;color:#ccc;text-shadow:1px 1px #f0f0f0}
\ No newline at end of file
<view class="am-list {{className}}">
<view class="am-list-header" a:if="{{$slots.header}}">
<slot name="header" />
</view>
<view class="am-list-body">
<slot />
</view>
<view class="am-list-load-more" a:if="{{loadMore === 'load'}}"><icon type="loading" size="16"/><text class="am-list-load-more-txt">{{loadContent[0]?loadContent[0]:''}}</text></view>
<view class="am-list-load-over" a:if="{{loadMore === 'over'}}">{{loadContent[1]?loadContent[1]:''}}</view>
<view class="am-list-footer" a:if="{{$slots.footer}}">
<slot name="footer" />
</view>
</view>
Component({
props: {
className: '',
loadMore: false,
loadContent: ['', '']
},
data: {
loadContent: ['加载更多...', '-- 数据加载完了 --']
},
didMount: function didMount() {
var loadTxt = this.props.loadContent[0] ? this.props.loadContent[0] : this.data.loadContent[0];
var overTxt = this.props.loadContent[1] ? this.props.loadContent[1] : this.data.loadContent[1];
this.setData({
loadContent: [loadTxt, overTxt]
});
},
didUpdate: function didUpdate() {
var loadTxt = this.props.loadContent[0] ? this.props.loadContent[0] : this.data.loadContent[0];
var overTxt = this.props.loadContent[1] ? this.props.loadContent[1] : this.data.loadContent[1];
if (loadTxt !== this.data.loadContent[0] || overTxt !== this.data.loadContent[1]) {
this.setData({
loadContent: [loadTxt, overTxt]
});
}
}
});
\ No newline at end of file
.am-list-item{display:flex;align-items:center;background:#fff;padding-left:16px;font-size:15px;line-height:1.4;color:#333}.am-list-item-hover{background-color:#f8f8f8}.am-list-prefix{margin-right:16px}.am-list-thumb{width:30px;height:30px;margin-right:16px}.am-list-line{position:relative;flex:1;display:flex;align-items:center;align-self:stretch;padding-right:15px;min-height:52px;overflow:hidden}.am-list-content,.am-list-extra{line-height:1.5;width:auto;padding-top:7px;padding-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.am-list-content{flex:1;color:#000;font-size:17px;text-align:left}.am-list-extra{flex-basis:36%;color:#888;font-size:16px;text-align:right}.am-list-brief{color:#888;font-size:14px}.am-list-wrap .am-list-content,.am-list-wrap .am-list-extra{white-space:normal;word-break:break-all}.am-list-arrow{display:block;width:15px;height:15px;margin-left:8px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAaCAYAAAC+aNwHAAAAAXNSR0IArs4c6QAAAdxJREFUOBGlVT1Lw1AUbSSBdMnQf9ChU6GFtr9AEMFBiouDuOikoGixiGgRSi2i1KJTR0fHbuLi5mRbcO7QnyAIQjCSek7ghtc0DQm+5d537z0n97yvpFIYg8GgMxqNavSTjqXhcNgCqOa6bgf+eWICABwBTafTFkiuZB7HaiyChAZMUwCapnXL5XIsSR4BgWyfHQgJbA8k+yCbKrE51ydgBp2cwbSlCuDHUqm0C+tKLGhnCJjEbpxiQa+lEOAnkGzD/kpMtXMETEJOHXJulMJ+Op3ezOfzP0rMc5eCAc6h/RamruSqtm33J5OJqcQ8N7QDKeLh4vmQOWS86rq+XiwWvyUW2oEkof0OoGOZQ9ay4zgv4/HYklhkB1KE3TmEfy9zkL4bhrFaKBQ+YxEQCDkHkPOgkHyAaCVSghRH2VgdREnQo9iZw5k4wuJ1lbo3y7LWcrncF2OREriNKpjbyMUTMAkWSkDbJ8jzQHkD4OdMJrORzWZtidGGdsCjjJwPht83TbMaBJNgroOkl2mmA17nwE3kdd5C+6E3kR34BHxQMPffAvg9gHcAXvgW+AT4cgOr7b9GAHUrlcoebORr5BHgy5dwmpxwANSO+x6ynhIMOhwAXwCc+Gn/14/lDyH1t+arhvp8AAAAAElFTkSuQmCC);background-size:contain;background-repeat:no-repeat;background-position:50% 50%}.am-list-arrow-empty{visibility:hidden}.am-list-line-bottom::after{content:'';position:absolute;background-color:#eee;display:block;top:auto;right:0;bottom:0;left:0;height:1px;transform:scaleY(.5)}.am-list-top .am-list-line{align-items:flex-start}.am-list-middle .am-list-line{align-items:center}.am-list-bottom .am-list-line{align-items:flex-end}.am-list-multiple .am-list-line{padding:6px 15px 6px 0}.am-list-multiple .am-list-thumb{width:36px;height:36px}.am-list-item.last .am-list-line-bottom::after{display:none}
\ No newline at end of file
<view
class="am-list-item am-list-{{align}} {{multipleLine ? 'am-list-multiple' : ''}} {{last ? 'last': ''}} {{className}}"
hover-class="{{disabled ? '' : 'am-list-item-hover'}}"
onTap="onItemTap"
data-index="{{index}}"
>
<view a:if={{$slots.prefix}} class="am-list-prefix">
<slot name="prefix" />
</view>
<image a:if={{thumb}} class="am-list-thumb" src="{{thumb}}" mode="scaleToFill" />
<view class="am-list-line {{wrap ? 'am-list-wrap' : ''}}">
<view class="am-list-content">
<slot />
</view>
<view a:if={{$slots.extra}} class="am-list-extra" >
<slot name="extra" />
</view>
<view a:if={{arrow}} class="am-list-arrow" />
<view class="am-list-line-bottom" />
</view>
</view>
Component({
props: {
className: '',
align: false,
disabled: false,
multipleLine: false,
wrap: false
},
didMount: function didMount() {
this._updateDataSet();
},
didUpdate: function didUpdate() {
this._updateDataSet();
},
methods: {
_updateDataSet: function _updateDataSet() {
this.dataset = {};
for (var key in this.props) {
if (/data-/gi.test(key)) {
this.dataset[key.replace(/data-/gi, '')] = this.props[key];
}
}
},
onItemTap: function onItemTap(ev) {
var _this$props = this.props,
onClick = _this$props.onClick,
disabled = _this$props.disabled;
if (onClick && !disabled) {
onClick({
index: ev.target.dataset.index,
target: {
dataset: this.dataset
}
});
}
}
}
});
\ No newline at end of file
.am-message{background-color:#fff;margin-bottom:30px;padding:30px 15px;text-align:center;height:199px;box-sizing:border-box;position:relative}.am-message::after{content:'';position:absolute;background-color:#eee;display:block;top:auto;right:0;bottom:0;left:0;height:1px;transform:scaleY(.5)}.am-message .am-icon{display:block}.am-message-main{font-size:20px;margin:16px 0 9px;line-height:28px}.am-message-sub{padding:0 30px;font-size:14px;line-height:19px;margin-top:6px;color:#999}.am-message-button-wrap{padding:0 15px}.am-message-button-wrap .a-button{margin-bottom:15px}.am-message-button-wrap .a-button:last-child{margin-bottom:0}
\ No newline at end of file
<view class="am-message {{className}}">
<icon class="am-icon" size="64" type="{{type === 'fail' ? 'cancel' : type}}" />
<view class="am-message-main">
{{title}}
</view>
<view a:if="{{subTitle}}" class="am-message-sub">
{{subTitle}}
</view>
</view>
<view class="am-message-button-wrap" a:if="{{mainButton || subButton}}">
<button
a:if="{{mainButton}}"
type="primary"
disabled="{{mainButton.disabled}}"
onTap="tapMain"
>
{{mainButton.buttonText}}
</button>
<button
a:if="{{subButton}}"
type="default"
disabled="{{subButton.disabled}}"
onTap="tapSub"
>
{{subButton.buttonText}}
</button>
</view>
Component({
props: {
className: "",
type: "success",
title: "",
onTapMain: function onTapMain() {},
onTapSub: function onTapSub() {}
},
methods: {
tapMain: function tapMain() {
this.props.onTapMain();
},
tapSub: function tapSub() {
this.props.onTapSub();
}
}
});
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
.am-modal-show{position:fixed;top:0;left:0;right:0;bottom:0}.am-modal-hide{display:none}.am-modal-document,.am-modal-mask{position:absolute;top:0;left:0;right:0;bottom:0}.am-modal-mask{background-color:rgba(0,0,0,.75)}.am-modal-document{display:flex;align-items:center;justify-content:center}.am-modal{background-color:#fff;border-radius:2px;width:270px;position:relative}.am-modal-image{display:flex;justify-content:center}.am-modal-image-md,.am-modal-image-sm{margin-top:24px}.am-modal-image-lg image{width:270px;height:156px}.am-modal-image-md image{width:134px;height:134px}.am-modal-image-sm image{width:65px;height:65px}.am-modal-header{font-size:18px;line-height:21px;text-align:center;color:#333;font-weight:600;padding-top:22px}.am-modal-body{margin-top:8px;overflow:hidden;max-width:270px;padding:0 16px;line-height:20px;text-align:center;color:#333;font-size:14px}.am-modal-footer{margin-top:12px;height:50px;line-height:50px;position:relative;font-size:18px;color:#108ee9;text-align:center}.am-modal-footer::before{content:'';position:absolute;background-color:#ddd;display:block;top:0;right:0;bottom:auto;left:0;height:1px;transform:scaleY(.5)}.am-modal-close{position:absolute;display:block;right:0;top:0;height:48px;width:48px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAANlBMVEVMaXGIiIiJiYmJiYn///+IiIiIiIiRkZGJiYmJiYmIiIiZmZmIiIiIiIiLi4uJiYmIiIiIiIif033nAAAAEXRSTlMA3vWjAZv1FdRBcAq0vhZmK7msGmgAAABnSURBVHhe7dEpFoAwEATRTliysIS5/2VReS16xiEp+2XhuQqC2nngshp4262j1Omq2wq6q3Rf6arionRVdaq4qjpVneo71fOUqerJbAkVLRv/eBcW/nEvfPD3/4szPHhXGzj6VPWBF66vCbNK4YfYAAAAAElFTkSuQmCC) center no-repeat;background-size:16px 16px}.am-modal-close-white{background:url(https://gw.alipayobjects.com/zos/rmsportal/fdmdsySxNBrpcVBVGEUM.png) center no-repeat;background-size:16px 16px}.am-modal-close-active,.am-modal-footer-active{background-color:rgba(37,39,40,.05)}.am-modal-document-advice .am-modal{padding-top:0;width:auto}.am-modal-document-advice .am-modal-body{padding:0;max-width:319px}.am-modal-document-advice .am-modal-close{top:-50px;height:27px;width:27px;background-size:27px 27px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAEMElEQVR4AWKgJvj//z8roFl7cJJdiaM4/mbtvbZt27Zt27ZtrvLfvu8iVWe77tSmJ/lNMlWfQtLICXo6wARswRk8wUf8RAt+4TOe4wJ2YAaqkujfIsx8XEMTggK04j5WojbtQBXYhF8I8viCh7iJy7iBB3iPtjx1mnEQdcUOVIKl+IzA8QEHMBFVEY70SGzHcwSO39iCimKEGoeXCMRP7MDwmG33wzp8gHvU51uGWoYW55TZi5qE+ynrCvjDCbgXJUmfegedTs6gj/HZUY3dzs68huqkGr8pDbdgaZGv6YnO0XuFfnGPlIb6hnEpjcD98Uq25W3BfwvO6fcKfVP+e6lydvQtlPgPFHqkNFS64Sqdv4ZDvkN6i1xT4zI20+mDbxJuWdTr6oVU0oEiS+HGys7/hbqeKizRIV3XZTDcRtnWAz1NcT7Ln2+fjAcrx0e5ZPrlK7gJQZd9KW1sNeajX8Tyi2Sbz+ZL/1PmfrUeM/zT+IaxCRyBw/iLu1HCUSbnjJID3QLzZOUOj43Zh78I8BoT4oaSie+6iHXnyrbvcldek5XDPTaoN24h0HAxQ33DeuSi/rfJDe5Hdzb9110RP5x9KGnnqvQ/JFw4QRYelPLxwxmHkraWSt9rwoWbZeFEKZ9sOINQ0l699Hs+XHhaFnbd6xiEMwilP7nzfh4ueBSORFIubrjbbjiLUPqTmf9f5DTpIy1ocOQmGoTSPo93O/Pk7vS2FjQI9xF/DEKF/e2Xvnq3L2hGgCta0CKcQSjta0e3GYhMpW4aTVT3oFk6fYnRBn3tlT76/Ccz5IcGofSa+ukOKAn3d1Tar2lf8Mxj1hFnmrTJf4bi1ecVuYUpaV9wXjqrMAq1Hjn0tgrX3lbYZrhgu3Q02ipUjOlX1IlwCwJcDhdOk052WoayCkfd2dLWpnBhlaR9aR3KIpwzLRylK+7Jiv5moTymXx79l8iI+wMlunK5NL7eIpTVkaPsRKl72F1ZjWaZ+pRHbHQWHvmGihDuIaYVcJM56l8FDkiBDZ5Pjr9hFXIJ3BX8wCaURKgzXrb5dr5Ctfjl86TKYFrUiIEeZ8wjCTZCVhk+W7TfCXPdZ4pRnwa3YnJGQ/XGV30K7LsnfmJAxkJVyPy23Q6fyrud4bc6I6FyuOi8ky7x/dPTYfQ2qjIQap/zlrWq0FejL6WhF+iX4umnR+oH+sdpsC9eS4PfMT6FN5jPnVBjk3q1c8P5JGITyos0pH/z/xTC75o7gEB8wmKUGH3b8djp76rFda6vcn86Hb7AfFTFbLsUk3AdgWjBDpRYnx612BdOmkUzrmEZGjwGqLk4oztMnEW/ND5LOON+dyg+4hZO4AB2YR+O4SreojVP3dsYkfaf5gDswAcEMXzHYYzK4hxuEFbhLJ7KI21XM17hEjZilM01ZP8NVCP6ozeqkbPu93+pG3nJRlqdHgAAAABJRU5ErkJggg==)}
\ No newline at end of file
<view class="am-modal-{{show ? 'show' : 'hide'}}" disable-scroll="{{disableScroll}}">
<view class="am-modal-mask" />
<view class="am-modal-document {{advice === true ? 'am-modal-document-advice' : '' }}">
<view class="am-modal {{className}}">
<view a:if="{{topImage}}" class="am-modal-image am-modal-image-{{topImageSize}}">
<image src="{{topImage}}" />
</view>
<view class="am-modal-header" a:if="{{$slots.header}}">
<slot name="header" />
</view>
<view class="am-modal-body">
<slot />
</view>
<view class="am-modal-footer" hover-class="am-modal-footer-active" a:if="{{$slots.footer}}" onTap="onModalClick">
<slot name="footer" />
</view>
<view class="am-modal-close {{closeType === '1' ? 'am-modal-close-white' : ''}}" hover-class="am-modal-close-active" a:if="{{showClose}}" onTap="onModalClose" />
</view>
</view>
</view>
Component({
props: {
className: '',
topImageSize: 'md',
showClose: true,
closeType: '0',
disableScroll: true
},
methods: {
onModalClick: function onModalClick() {
var onModalClick = this.props.onModalClick;
if (onModalClick) {
onModalClick();
}
},
onModalClose: function onModalClose() {
var onModalClose = this.props.onModalClose;
if (onModalClose) {
onModalClose();
}
}
}
});
\ No newline at end of file
.am-notice{width:100%;height:36px;box-sizing:border-box;line-height:36px;display:flex;background-color:#fefceb;overflow:hidden;color:#f76a24}.am-notice-thumb{box-sizing:content-box;padding-left:16px;width:19px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEVMaXH4biD/dSn3biD2cib/dDj3biD3biD4biD4byP/lUD3biD4biH4biH3biD5byH4biD4cCH3biH3bST2byT4biH3biD3cSP3biD0bSH6cCL4biH3biL3biH4biL4biGKhhI5AAAAIHRSTlMA4A3wGAj3+rRQBJOsn+o/zUtcKBzH1TKILzZvU796aUQsa54AAAEeSURBVHgBfdNVlt0wFETRElhlZvaD+c+yta7SSYznewstY99aqwkPNYbMcd/XUTHGbTOZvTzQlcZFaUF+kHhQ0OUVjumYroWAZCQZ99hla5YVAgC6zLGcEEqtb1JUC/4CTwaqLpyspFT3+B8gyjla+EpKucYeIBrClZC7MwmYXimAznEVEJ3AyLcGULC4AUkpsy800TVAZ9gAUFxvAGaZPWZ7ByrWsontDjQcnkHG7HGJJFxByeUafCgTVCzTazAwSwHkwq6A7cJJXC/rOOdYZqePZRVn+FpHqbZ7YEfWYW7d972tjg+mUVS7R9fXNM0v0O2bHOz50X4D+DrSbOnp2WfkLGBm/bG4aCPzVpZ4+DWNBw9NiizwVF/kPXb9AFr1D7ArYO8yAAAAAElFTkSuQmCC) center no-repeat;background-size:18px auto;background-position:center right}.am-notice-content{flex:1;width:100%;margin-left:9px;margin-right:10px;overflow:hidden}.am-notice-marquee{position:relative;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;font-size:14px}.am-notice-operation{height:100%;padding-right:16px}.am-notice-link{display:block;height:100%;color:#f85800}.am-notice-link::after{content:"";display:inline-block;width:6px;height:6px;border:1px solid #f76a24;border-top:0 none;border-left:0 none;margin-left:6px;margin-right:2px;margin-bottom:1px;transform:rotate(315deg)}.am-notice-closable{width:10px;height:100%;background-image:url(https://gw.alipayobjects.com/zos/rmsportal/mLiemrUlPGVwIGXQdWDx.png);background-size:contain;background-position:center;background-repeat:no-repeat}.am-notice-operation-text{display:block;height:100%;color:#e14f00}
\ No newline at end of file
<view class="am-notice {{className}}" a:if="{{show}}" onTap="onNoticeTap">
<view class="am-notice-thumb"></view>
<view class="am-notice-content am-notice-content-{{$id}}">
<view
a:if="{{canIUseTransitionEnd}}"
class="am-notice-marquee am-notice-marquee-{{$id}}"
style="{{marqueeStyle}} display: {{enableMarquee ? 'inline-block' : 'block'}}"
onTransitionEnd="onTransitionEnd"
>
<slot></slot>
</view>
<view
a:else
class="am-notice-marquee am-notice-marquee-{{$id}}"
style="right: {{animatedWidth}}px; display: {{enableMarquee ? 'inline-block' : 'block'}}"
>
<slot></slot>
</view>
</view>
<view class="am-notice-operation" onTap="onOperationTap">
<view a:if="{{action !== ''}}" class="am-notice-operation-text {{actionCls}}" >{{action}}</view>
<view a:else class="am-notice-{{mode}}"></view>
</view>
</view>
\ No newline at end of file
var noop = function noop() {};
var canIUseTransitionEnd = my.canIUse('view.onTransitionEnd');
Component({
props: {
className: '',
mode: '',
// closable,link
action: '',
// 文本按钮
show: true,
// 是否显示
enableMarquee: false,
// 是否开启marquee
onClick: function onClick() {},
marqueeProps: {
loop: false,
leading: 500,
trailing: 800,
fps: 40
}
},
data: {
animatedWidth: 0,
overflowWidth: 0,
duration: 0,
marqueeStyle: '',
canIUseTransitionEnd: canIUseTransitionEnd
},
didMount: function didMount() {
if (this.props.enableMarquee) {
if (!canIUseTransitionEnd) {
this._measureText();
this._startAnimation();
} else {
this._measureText(this.startMarquee.bind(this));
}
}
},
didUpdate: function didUpdate() {
// 这里更新处理的原因是防止notice内容在动画过程中发生改变。
if (!canIUseTransitionEnd) {
this._measureText();
}
if (this.props.enableMarquee && !this._marqueeTimer && !canIUseTransitionEnd) {
this._measureText();
this._startAnimation();
} else {
// 当通过脚本切换 show 的值时(true or false),导致跑马灯动画效果失效的 bug 处理
if (!this.props.show) {
this.setData({
marqueeStyle: ''
});
}
this._measureText(this.startMarquee.bind(this));
}
},
didUnmount: function didUnmount() {
if (this._marqueeTimer) {
clearTimeout(this._marqueeTimer);
this._marqueeTimer = null;
}
},
methods: {
resetMarquee: function resetMarquee() {
var marqueeStyle = 'transform: translateX(0px); transition: 0s all linear;';
this.setData({
marqueeStyle: marqueeStyle
});
},
startMarquee: function startMarquee() {
var _this$props$marqueePr = this.props.marqueeProps.leading,
leading = _this$props$marqueePr === void 0 ? 500 : _this$props$marqueePr;
var _this$data = this.data,
duration = _this$data.duration,
overflowWidth = _this$data.overflowWidth;
var marqueeStyle = "transform: translateX(" + -overflowWidth + "px); transition: " + duration + "s all linear " + (typeof leading === 'number' ? leading / 1000 + "s" : '0s') + ";";
this.setData({
marqueeStyle: marqueeStyle
});
},
onTransitionEnd: function onTransitionEnd() {
var _this = this;
var _this$props$marqueePr2 = this.props.marqueeProps,
_this$props$marqueePr3 = _this$props$marqueePr2.loop,
loop = _this$props$marqueePr3 === void 0 ? false : _this$props$marqueePr3,
_this$props$marqueePr4 = _this$props$marqueePr2.trailing,
trailing = _this$props$marqueePr4 === void 0 ? 800 : _this$props$marqueePr4;
if (loop) {
setTimeout(function () {
_this.resetMarquee();
_this._measureText(_this.startMarquee.bind(_this));
}, typeof trailing === 'number' ? trailing : 0);
}
},
_measureText: function _measureText(callback) {
var _this2 = this;
if (callback === void 0) {
callback = noop;
}
var _this$props$marqueePr5 = this.props.marqueeProps.fps,
fps = _this$props$marqueePr5 === void 0 ? 40 : _this$props$marqueePr5; // 计算文本所占据的宽度,计算需要滚动的宽度
my.createSelectorQuery().select(".am-notice-marquee-" + this.$id).boundingClientRect().select(".am-notice-content-" + this.$id).boundingClientRect().exec(function (ret) {
var overflowWidth = ret && ret[0] && ret[1] && ret[0].width - ret[1].width || 0;
if (overflowWidth > 0) {
_this2.setData({
overflowWidth: overflowWidth,
duration: overflowWidth / fps
});
callback();
}
});
},
_startAnimation: function _startAnimation() {
var _this3 = this;
if (this._marqueeTimer) {
clearTimeout(this._marqueeTimer);
}
var _this$props$marqueePr6 = this.props.marqueeProps,
_this$props$marqueePr7 = _this$props$marqueePr6.loop,
loop = _this$props$marqueePr7 === void 0 ? false : _this$props$marqueePr7,
_this$props$marqueePr8 = _this$props$marqueePr6.leading,
leading = _this$props$marqueePr8 === void 0 ? 500 : _this$props$marqueePr8,
_this$props$marqueePr9 = _this$props$marqueePr6.trailing,
trailing = _this$props$marqueePr9 === void 0 ? 800 : _this$props$marqueePr9,
_this$props$marqueePr10 = _this$props$marqueePr6.fps,
fps = _this$props$marqueePr10 === void 0 ? 40 : _this$props$marqueePr10;
var TIMEOUT = 1 / fps * 1000;
var isLeading = this.data.animatedWidth === 0;
var timeout = isLeading ? leading : TIMEOUT;
var animate = function animate() {
var overflowWidth = _this3.data.overflowWidth;
var animatedWidth = _this3.data.animatedWidth + 1;
var isRoundOver = animatedWidth > overflowWidth;
if (isRoundOver) {
if (loop) {
animatedWidth = 0;
} else {
return;
}
}
if (isRoundOver && trailing) {
_this3._marqueeTimer = setTimeout(function () {
_this3.setData({
animatedWidth: animatedWidth
});
_this3._marqueeTimer = setTimeout(animate, TIMEOUT);
}, trailing);
} else {
_this3.setData({
animatedWidth: animatedWidth
});
_this3._marqueeTimer = setTimeout(animate, TIMEOUT);
}
};
if (this.data.overflowWidth !== 0) {
this._marqueeTimer = setTimeout(animate, timeout);
}
},
onNoticeTap: function onNoticeTap() {
var _this$props = this.props,
mode = _this$props.mode,
onClick = _this$props.onClick;
if (mode === 'link' && typeof onClick === 'function') {
onClick();
}
},
onOperationTap: function onOperationTap() {
var _this$props2 = this.props,
mode = _this$props2.mode,
onClick = _this$props2.onClick;
if (mode === 'closable' && typeof onClick === 'function') {
onClick();
}
}
}
});
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment