mirror of
https://gitee.com/zongzhige/shopxo.git
synced 2026-06-07 02:12:25 +08:00
小程序支持主题管理
This commit is contained in:
23
sourcecode/qq/default/components/badge/badge.js
Executable file
23
sourcecode/qq/default/components/badge/badge.js
Executable file
@ -0,0 +1,23 @@
|
||||
// components/badge.js
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
propNumber: Number,
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
|
||||
}
|
||||
})
|
||||
4
sourcecode/qq/default/components/badge/badge.json
Executable file
4
sourcecode/qq/default/components/badge/badge.json
Executable file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
5
sourcecode/qq/default/components/badge/badge.qml
Executable file
5
sourcecode/qq/default/components/badge/badge.qml
Executable 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>
|
||||
26
sourcecode/qq/default/components/badge/badge.qss
Executable file
26
sourcecode/qq/default/components/badge/badge.qss
Executable 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;
|
||||
}
|
||||
12
sourcecode/qq/default/components/icon-nav/icon-nav.js
Executable file
12
sourcecode/qq/default/components/icon-nav/icon-nav.js
Executable file
@ -0,0 +1,12 @@
|
||||
const app = getApp();
|
||||
Component({
|
||||
data: {},
|
||||
properties: {
|
||||
propData: Array
|
||||
},
|
||||
methods: {
|
||||
navigation_event(e) {
|
||||
app.operation_event(e);
|
||||
},
|
||||
},
|
||||
});
|
||||
3
sourcecode/qq/default/components/icon-nav/icon-nav.json
Executable file
3
sourcecode/qq/default/components/icon-nav/icon-nav.json
Executable file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
10
sourcecode/qq/default/components/icon-nav/icon-nav.qml
Executable file
10
sourcecode/qq/default/components/icon-nav/icon-nav.qml
Executable 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>
|
||||
33
sourcecode/qq/default/components/icon-nav/icon-nav.qss
Executable file
33
sourcecode/qq/default/components/icon-nav/icon-nav.qss
Executable 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%;
|
||||
}
|
||||
30
sourcecode/qq/default/components/popup/popup.js
Executable file
30
sourcecode/qq/default/components/popup/popup.js
Executable 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', {}, {});
|
||||
}
|
||||
}
|
||||
})
|
||||
4
sourcecode/qq/default/components/popup/popup.json
Executable file
4
sourcecode/qq/default/components/popup/popup.json
Executable file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
6
sourcecode/qq/default/components/popup/popup.qml
Executable file
6
sourcecode/qq/default/components/popup/popup.qml
Executable 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>
|
||||
60
sourcecode/qq/default/components/popup/popup.qss
Executable file
60
sourcecode/qq/default/components/popup/popup.qss
Executable 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;
|
||||
}
|
||||
56
sourcecode/qq/default/components/quick-nav/quick-nav.js
Normal file
56
sourcecode/qq/default/components/quick-nav/quick-nav.js
Normal 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);
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"component-popup": "/components/popup/popup"
|
||||
}
|
||||
}
|
||||
31
sourcecode/qq/default/components/quick-nav/quick-nav.qml
Normal file
31
sourcecode/qq/default/components/quick-nav/quick-nav.qml
Normal 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>
|
||||
101
sourcecode/qq/default/components/quick-nav/quick-nav.qss
Normal file
101
sourcecode/qq/default/components/quick-nav/quick-nav.qss
Normal 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;
|
||||
}
|
||||
18
sourcecode/qq/default/components/slider/slider.js
Executable file
18
sourcecode/qq/default/components/slider/slider.js
Executable 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);
|
||||
},
|
||||
},
|
||||
});
|
||||
3
sourcecode/qq/default/components/slider/slider.json
Executable file
3
sourcecode/qq/default/components/slider/slider.json
Executable file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
14
sourcecode/qq/default/components/slider/slider.qml
Executable file
14
sourcecode/qq/default/components/slider/slider.qml
Executable 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>
|
||||
10
sourcecode/qq/default/components/slider/slider.qss
Executable file
10
sourcecode/qq/default/components/slider/slider.qss
Executable file
@ -0,0 +1,10 @@
|
||||
.banner {
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.banner image {
|
||||
min-width: 100%;
|
||||
}
|
||||
.banner, .banner image {
|
||||
height: 320rpx !important;
|
||||
}
|
||||
Reference in New Issue
Block a user