zly/electricity_bill_calc_wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整分包，完成隐私协议（样式待优化）

Browse Source
This commit is contained in:
qiaomu
2024-07-18 14:18:05 +08:00
parent 765b3ad111
commit 00384d7382
1045 changed files with 34254 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
childPackage/miniprogram_npm/towxml/audio-player/Audio.js Normal file
View File

@@ -0,0 +1,105 @@
const fillIn = val => `${val < 10 ? '0' : ''}${val}`,
formatTime = _time => {
let time = Math.round(_time);
let second = Math.round(time % 60),
minute = Math.floor(time / 60 % 60),
hour = Math.floor(time / 60 / 60);
return `${fillIn(hour)}:${fillIn(minute)}:${fillIn(second)}`;
};
class Audio{
constructor(obj){
const _ts = this,
option = _ts.option = obj.attrs;
_ts.loop = option.loop === 'true',
_ts.autoplay = option.autoplay === 'true';
_ts.create();
_ts.index = 0;
}
create(){
const _ts = this,
option = _ts.option;
let audio = _ts.audio = wx.createInnerAudioContext();
audio.src = option.src;
// 说明可以播放了
audio.onCanplay(function(){
if(_ts.autoplay && !_ts.index){
_ts.play();
};
if(!_ts.autoplay && !_ts.index){
_ts.eventCanplay();
};
});
// 更新时间
audio.onTimeUpdate(function(){
//_ts.status = 'update';
_ts.duration = audio.duration;
_ts.currentTime = audio.currentTime;
// 定义播放结束
if(_ts.duration - _ts.currentTime < 0.5){
_ts.index++;
if(_ts.loop){
audio.stop();
}else{
_ts.stop();
};
audio.seek(0);
};
_ts.eventTimeUpdate(formatTime(_ts.duration),formatTime(_ts.currentTime));
});
//
audio.onSeeked(function(){
if(_ts.loop){
_ts.play();
};
});
}
// 播放
play(){
const _ts = this;
_ts.status = 'play';
_ts.audio.play();
_ts.eventPlay();
}
// 暂停
pause(){
const _ts = this;
_ts.status = 'pause';
_ts.audio.pause();
_ts.eventPause();
}
// 停止
stop(){
const _ts = this;
_ts.status = 'stop';
_ts.audio.stop();
_ts.eventStop();
}
// 销毁
destroy(){
const _ts = this;
_ts.stop();
_ts.audio.destroy();
}
eventCanplay(){}
eventTimeUpdate(){}
eventEnded(){}
eventError(){}
eventPause(){}
eventPlay(){}
eventSeeked(){}
eventSeeking(){}
eventStop(){}
eventWaiting(){}
};
module.exports = Audio;

100
childPackage/miniprogram_npm/towxml/audio-player/audio-player.js Normal file
View File

@@ -0,0 +1,100 @@
const Audio = require('./Audio');
Component({
options: {
styleIsolation: 'shared'
},
properties: {
data: {
type: Object,
value: {}
}
},
lifetimes:{
// 页面生命周期
attached:function(){
const _ts = this,
audio = _ts.audio = new Audio(this.data.data);
audio.eventPlay = function(){
_ts.setData({tips:{state:'h2w__audio--play',text:'Playing'}});
};
audio.eventCanplay = function(){
_ts.setData({tips:{state:'h2w__audio--readyed',text:'Readyed'}});
};
audio.eventTimeUpdate = function(duration,currentTime){
_ts.setData({time:{currentTime:currentTime,duration:duration,schedule:Math.round(_ts.audio.currentTime) / Math.round(_ts.audio.duration) * 100 + '%'}});
};
audio.eventPause = function(){
_ts.setData({tips:{state:'h2w__audio--pause',text:'Pause'}});
};
audio.eventStop = function(){
_ts.setData({tips:{state:'h2w__audio--end',text:'End'}});
};
// // 更新播放状态
// _ts.audio.onTimeUpdate = function(duration,currentTime){
// _ts.setData({
// playerData:{
// state:'h2w__audio--play',
// tips:'Playing',
// currentTime:currentTime,
// duration:duration,
// schedule:_ts.audio.currentTime / _ts.audio.duration * 100 + '%'
// }
// });
// };
// _ts.audio.onPause = function(){
// _ts.setData({playerData:{state:'h2w__audio--pause',tips:'Pause'}});
// };
// _ts.audio.onCanplay = function(){
// _ts.setData({playerData:{state:'h2w__audio--readyed',tips:'Readyed'}});
// };
// _ts.audio.onError = function(){
// _ts.setData({playerData:{state:'h2w__audio--error',tips:'Error'}});
// };
// _ts.audio.onEnded = ()=>{
// _ts.setData({playerData:{state:'h2w__audio--end',tips:'End'}});
// };
},
moved:function(){
_ts.audio.stop();
_ts.audio.destroy();
},
detached:()=>{
_ts.audio.stop();
_ts.audio.destroy();
},
},
data: {
tips:{
state:'',
text:'--'
},
time: {
currentTime:'00:00:00',
duration:'00:00:00',
schedule:'0%'
}
},
methods: {
playAndPause: function () {
const _ts = this,
audio = _ts.audio;
audio.isTouch = true;
if(audio.status === 'update' || audio.status === 'play'){
audio.pause();
}else{
audio.play();
};
}
}
})

5
childPackage/miniprogram_npm/towxml/audio-player/audio-player.json Normal file
View File

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

14
childPackage/miniprogram_npm/towxml/audio-player/audio-player.wxml Normal file
View File

@@ -0,0 +1,14 @@
<view class="h2w__audio {{tips.state || 'h2w__audio--loading'}}" bind:tap="playAndPause">
<view class="h2w__audioIcon"></view>
<view class="h2w__audioCover">
<image class="h2w__audioLoading" src="loading.svg"></image>
<image class="h2w__audioCoverImg" src="{{data.attrs.poster}}"></image>
</view>
<view class="h2w__audioInfo">
<view class="h2w__audioTips">{{tips.text || 'Error'}}</view>
<view class="h2w__audioSchedule" style="width:{{time.schedule}};"></view>
<view class="h2w__audioTitle">{{data.attrs.name}}</view>
<view class="h2w__audioAuthor">{{data.attrs.author}}</view>
<view class="h2w__audioTime">{{time.currentTime || '00:00:00'}} / {{time.duration || '00:00:00'}}</view>
</view>
</view>

175
childPackage/miniprogram_npm/towxml/audio-player/audio-player.wxss Normal file
View File

@@ -0,0 +1,175 @@
/*音频播放器样式*/
.h2w__audio {
height: 136rpx;
margin:16rpx 0;
background: #f1f1f1;
position: relative;
}
.h2w__audio--error .h2w__audioIcon,
.h2w__audio--loading .h2w__audioIcon {
display:none;
}
.h2w__audio--readyed .h2w__audioLoading,
.h2w__audio--end .h2w__audioLoading,
.h2w__audio--play .h2w__audioIcon,
.h2w__audio--pause .h2w__audioLoading,
.h2w__audio--play .h2w__audioLoading {
display: none;
}
.h2w__audio--play .h2w__audioCover image {
opacity: 1;
}
.h2w__audio--readyed .h2w__audioTips,
.h2w__audio--end .h2w__audioTips,
.h2w__audio--stop .h2w__audioTips,
.h2w__audio--pause .h2w__audioTips,
.h2w__audio--play .h2w__audioTips {
opacity:0.4;
}
.h2w__audio--error {
background:red;
}
/* .h2w__audio--end .h2w__audio__icon {width:20rpx; height:20rpx; background:white; border:0; left:24rpx; top:24rpx; border-radius:2rpx;} */
.h2w__audioCover {
width: 136rpx;
height: 136rpx;
background: black;
float: left;
position: relative;
}
.h2w__audioCover image {
width: 100%;
height: 100%;
opacity: 0.6;
margin:0;
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.h2w__audioCover .h2w__audioLoading {
width:80rpx;
height:80rpx;
position:absolute;
left:50%;
top:50%;
margin:-40rpx 0 0 -40rpx;
z-index:1;
opacity:1;
}
.h2w__audioInfo {
padding-left: 20rpx;
padding-top: 16rpx;
position: absolute;
left: 136rpx;
right: 0;
}
.h2w__audioSchedule {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 255, 0, 0.1);
height: 136rpx;
width: 0;
}
.h2w__audioTips {
position:absolute;
right:0;
top:0;
height: 32rpx;
line-height: 32rpx;
padding:10rpx 20rpx;
font-size:20rpx;
}
.h2w__audio--error .h2w__audioTips {
color:red;
}
.h2w__audioTitle {
display: block;
font-size: 24rpx;
height: 40rpx;
line-height: 40rpx;
font-weight: bold;
}
.h2w__audioAuthor {
display: block;
font-size: 20rpx;
height: 32rpx;
line-height: 32rpx;
}
.h2w__audioTime {
display: block;
font-size: 20rpx;
height: 32rpx;
line-height: 32rpx;
}
.h2w__audioIcon {
width: 0;
height: 0;
position: absolute;
left: 60rpx;
top: 48rpx;
border-width: 20rpx 0 20rpx 20rpx;
border-style: solid;
border-color: transparent transparent transparent #fff;
z-index: 1;
}
/* 深色主题 */
.h2w-dark .h2w__audio {
background: #1f1f1f;
}
.h2w-dark .h2w__audio--error {
background:rgba(255,0,0,0.1);
}
.h2w-dark .h2w__audioCover {
background: black;
}
.h2w-dark .h2w__audioSchedule {
background: rgba(0, 255, 0, 0.2);
}
.h2w-dark .h2w__audioIcon {
border-color: transparent transparent transparent #fff;
}
/* 浅色主题 */
.h2w-light .h2w__audio {
background: #f1f1f1;
}
.h2w-light .h2w__audio--error {
background:rgba(255,0,0,0.1);
}
.h2w-light .h2w__audioCover {
background: black;
}
.h2w-light .h2w__audioSchedule {
background: rgba(0, 255, 0, 0.1);
}
.h2w-light .h2w__audioIcon {
border-color: transparent transparent transparent #fff;
}

1
childPackage/miniprogram_npm/towxml/audio-player/loading.svg Normal file
View File

@@ -0,0 +1 @@
<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(0 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-1s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(30 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.9166666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(60 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(90 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.75s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(120 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(150 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(180 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(210 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(240 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(270 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.25s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(300 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#1ed600' transform='rotate(330 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='-0.08333333333333333s' repeatCount='indefinite'/></rect></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB