小程序支持主题管理

This commit is contained in:
devil
2020-11-21 16:42:35 +08:00
parent 3afb6cd3e7
commit 2a5c0cfba1
1748 changed files with 1343 additions and 172 deletions

View File

@ -0,0 +1,23 @@
// components/badge.js
Component({
/**
* 组件的属性列表
*/
properties: {
propNumber: Number,
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})

View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

View File

@ -0,0 +1,5 @@
<view qq:if="{{propNumber > 0}}" class="am-badge">
<view class="am-badge-text {{(propNumber > 99) ? 'am-badge-text-max' : ''}}">
<text>{{(propNumber > 99) ? '99+' : propNumber}}</text>
</view>
</view>

View File

@ -0,0 +1,26 @@
.am-badge {
display: inline-block;
position: relative;
vertical-align: middle;
}
.am-badge-text {
display: inline-block;
position: absolute;
right: 0;
transform: translate(50%, -50%);
top: 0px;
min-width: 16px;
padding: 0;
height: 16px;
line-height: 16px;
text-align: center;
background-color: #FF3B30;
border-radius: 16px;
color: #fff;
font-size: 10px;
padding: 1px 1px;
}
.am-badge-text-max {
padding: 1px 2px;
}

View File

@ -0,0 +1,12 @@
const app = getApp();
Component({
data: {},
properties: {
propData: Array
},
methods: {
navigation_event(e) {
app.operation_event(e);
},
},
});

View File

@ -0,0 +1,3 @@
{
"component": true
}

View File

@ -0,0 +1,10 @@
<view qq:if="{{propData.length > 0}}">
<view class="data-list">
<view class="items" qq:for="{{propData}}" qq:key="key">
<view class="items-content" data-value="{{item.event_value}}" data-type="{{item.event_type}}" bindtap="navigation_event" style="background-color:{{item.bg_color}}">
<image src="{{item.images_url}}" mode="aspectFit" />
</view>
<view class="title">{{item.name}}</view>
</view>
</view>
</view>

View File

@ -0,0 +1,33 @@
.data-list {
overflow: hidden;
background: #fff;
margin-bottom: 20rpx;
}
.data-list .items {
width: calc(25% - 60rpx);
float: left;
padding: 30rpx;
}
.items-content {
border-radius: 50%;
padding: 20rpx;
text-align: center;
width: 70rpx;
height: 70rpx;
margin: 0 auto;
}
.data-list .items image {
width: 60rpx !important;
height: 60rpx !important;
margin-top: 5rpx;
}
.data-list .items .title {
margin-top: 10rpx;
font-size: 32rpx;
text-align:center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

View File

@ -0,0 +1,30 @@
// components/popup.js
Component({
/**
* 组件的属性列表
*/
properties: {
propClassname: String,
propShow: Boolean,
propPosition: String,
propMask: Boolean,
propAnimation: Boolean,
propDisablescroll: Boolean
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onMaskTap: function onMaskTap() {
this.triggerEvent('onclose', {}, {});
}
}
})

View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

View File

@ -0,0 +1,6 @@
<view class="am-popup {{propClassname || ''}} {{(propShow || false) ? 'am-popup-show' : ''}} {{ (propAnimation || true) ? 'animation': '' }}" disable-scroll="{{propDisablescroll}}">
<view class="am-popup-mask" qq:if="{{propMask || true}}" bindtap="onMaskTap"></view>
<view class="am-popup-content am-popup-{{propPosition || 'bottom'}}">
<slot></slot>
</view>
</view>

View File

@ -0,0 +1,60 @@
.am-popup-content {
position: fixed;
background:#fff;
z-index: 101;
}
.am-popup-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.75);
opacity: 0;
pointer-events: none;
z-index: 100;
}
.am-popup-left {
transform: translateX(-100%);
left: 0;
top: 0;
bottom: 0;
}
.am-popup-right {
transform: translateX(100%);
right: 0;
top: 0;
bottom: 0;
}
.am-popup-top {
top: 0;
width: 100vw;
transform: translateY(-100%);
}
.am-popup-bottom {
bottom: 0;
width: 100vw;
transform: translateY(100%);
}
.am-popup-show .am-popup-content {
transform: none;
}
.am-popup-show .am-popup-mask {
opacity: 1;
pointer-events: auto;
}
.am-popup.animation .am-popup-content {
transition: all 0.15s linear;
}
.am-popup.animation .am-popup-mask {
transition: all 0.15s linear;
}

View File

@ -0,0 +1,56 @@
const app = getApp();
Component({
data: {
popup_status: false,
data_list: [],
system: null,
x: 0,
y: 0,
is_first: 1,
},
pageLifetimes: {
// 页面被展示
show: function() {
this.init_config();
// 非首次进入则重新初始化配置接口
if(this.data.is_first == 0) {
app.init_config();
}
// 数据设置
var system = app.get_system_info();
this.setData({
is_first: 0,
system: system,
x: 5,
y: (system.windowHeight || 450)-160,
});
},
},
methods: {
// 初始化配置
init_config(status) {
if((status || false) == true) {
this.setData({ data_list: app.get_config('quick_nav') || [] });
} else {
app.is_config(this, 'init_config');
}
},
// 弹层开启
quick_open_event(e) {
this.setData({popup_status: true, data_list: app.get_config('quick_nav') || []});
},
// 弹层关闭
quick_close_event(e) {
this.setData({ popup_status: false });
},
// 操作事件
navigation_event(e) {
app.operation_event(e);
},
},
});

View File

@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"component-popup": "/components/popup/popup"
}
}

View File

@ -0,0 +1,31 @@
<!-- -->
<movable-area class="quick-nav-movable-container">
<movable-view direction="all" x="{{x}}" y="{{y}}" animation="{{false}}" class="quick-nav-event-submit" bindtap="quick_open_event">
<image src="/images/quick-submit-icon.png" mode="widthFix"></image>
</movable-view>
</movable-area>
<!-- -->
<component-popup prop-show="{{popup_status}}" prop-position="bottom" bindonclose="quick_close_event">
<view class="quick-nav-popup-container">
<view class="close oh">
<view class="icon-right" catchtap="quick_close_event">
<icon type="clear" size="20" />
</view>
</view>
<view class="quick-nav-popup-content">
<view qq:if="{{data_list.length > 0}}" class="quick-nav-data-list">
<view class="items" qq:for="{{data_list}}" qq:key="key">
<view class="items-content" data-value="{{item.event_value}}" data-type="{{item.event_type}}" bindtap="navigation_event" style="background-color:{{item.bg_color}}">
<image src="{{item.images_url}}" mode="aspectFit" />
</view>
<view class="title">{{item.name}}</view>
</view>
</view>
<view qq:else>
<import src="/pages/common/nodata.qml" />
<template is="nodata" data="{{status: 0}}"></template>
</view>
</view>
</view>
</component-popup>

View File

@ -0,0 +1,101 @@
/**
* 按钮
*/
.quick-nav-movable-container {
position: fixed;
width: 100%;
height: 100%;
top: 150rpx;
left: 0;
background:transparent;
pointer-events: none;
z-index: 2;
}
.quick-nav-event-submit {
pointer-events: auto;
position: fixed;
bottom: 150rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
background-color: rgb(210 54 76 / 80%);
}
.quick-nav-event-submit image {
width: 50rpx;
height: 50rpx;
margin: 25rpx auto 25rpx auto;
display: block;
}
/**
* 弹窗
*/
.quick-nav-popup-container {
padding: 20rpx 10rpx 0 10rpx;
background: #fff;
}
.quick-nav-popup-container .close {
overflow: hidden;
}
.quick-nav-popup-container .close .icon-right {
float: right;
}
.quick-nav-popup-content {
max-height: 80vh;
overflow-y: scroll;
overflow-x: hidden;
padding-bottom: 20rpx;
}
/**
* 内容
*/
.quick-nav-data-list {
overflow: hidden;
background: #fff;
}
.quick-nav-data-list .items {
width: calc(25% - 60rpx);
float: left;
padding: 30rpx;
}
.quick-nav-data-list .items-content {
border-radius: 50%;
padding: 20rpx;
text-align: center;
width: 70rpx;
height: 70rpx;
margin: 0 auto;
}
.quick-nav-data-list .items image {
width: 60rpx !important;
height: 60rpx !important;
margin-top: 5rpx;
}
.quick-nav-data-list .items .title {
margin-top: 10rpx;
font-size: 28rpx !important;
text-align:center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}
/*
* 没有数据
*/
.quick-nav-popup-container .no-data-box {
padding: 80rpx 0;
text-align: center;
}
.quick-nav-popup-container .no-data-box image {
width: 160rpx;
margin-bottom: 30rpx;
}
.quick-nav-popup-container .no-data-box .no-data-tips {
font-size: 28rpx;
color: #a6a6a6;
}

View File

@ -0,0 +1,18 @@
const app = getApp();
Component({
data: {
indicator_dots: false,
indicator_color: 'rgba(0, 0, 0, .3)',
indicator_active_color: '#e31c55',
autoplay: true,
circular: true,
},
properties: {
propData: Array
},
methods: {
banner_event(e) {
app.operation_event(e);
},
},
});

View File

@ -0,0 +1,3 @@
{
"component": true
}

View File

@ -0,0 +1,14 @@
<swiper
indicator-dots="{{propData.length > 0}}"
indicator-color="{{indicator_color}}"
indicator-active-color="{{indicator_active_color}}"
autoplay="{{propData.length > 0}}"
circular="{{circular}}"
class="banner"
qq:if="{{propData.length > 0}}">
<block qq:for="{{propData}}" qq:key="key">
<swiper-item>
<image src="{{item.images_url}}" mode="widthFix" data-value="{{item.event_value}}" data-type="{{item.event_type}}" bindtap="banner_event" />
</swiper-item>
</block>
</swiper>

View File

@ -0,0 +1,10 @@
.banner {
background: #fff;
margin-bottom: 20rpx;
}
.banner image {
min-width: 100%;
}
.banner, .banner image {
height: 320rpx !important;
}