miue-ui
Version:
ali miniProgram UI components for vehicle.
579 lines (556 loc) • 20.3 kB
JavaScript
/**
* author:dansion@163.com
* data:2022-04-25
* version:V1.0.0
*/
//import _SERVER from '/server.api'
if(my.MIUE_SERVER){
var _SERVER=my.MIUE_SERVER;
}
import INFO from '../../modules/systeminfo';
import _HISTYOR from 'miue-ui/modules/history'
import _PROMPT from 'miue-ui/modules/prompt'
let C_LIST,PLAYER,P_LIST,SET_PANEL; // 定义专栏模块，播放器，播放列表（与专辑详情共存）
let CurrentColumn={page:0,pagesize:20,id:0,max:99},// 专栏请求入参
CurrentAlbum={page:0,pagesize:20,id:0,max:99,title:'',isplaylist:false},
PalyAlbum={pagesize:20,isplaylist:true};
let {menus={},buttons='list+|prev|PLAY+|next|mode',modes='normal|single|loop|random',albumTitle=false}=my.MIUE_CONFIG;
let albumDetialHeadText=typeof(albumTitle)=='string'?albumTitle:'专辑节目列表';
let TEXT={albumDetialHead:[{text:albumDetialHeadText,disabled:true}],playlistHead:[{text:'播放列表',disabled:true}]};
let {text:HISTORY_TEXT='播放记录',style:HISTORY_STYLE='history'}=menus.HISTORY || {};
let {text:SUBSCRIBE_TEXT='我的订阅',style:SUBSCRIBE_STYLE='subscribe'}=menus.SUBSCRIBE || {};
let {text:COLLECTION_TEXT='我的收藏',style:COLLECTION_STYLE='collection'}=menus.COLLECTION || {};
let MENU_ITEM_HISTORY={id:'HISTORY',type:'HISTORY',text:HISTORY_TEXT,visible:false,style:HISTORY_STYLE},
MENU_ITEM_SUBSCRIBE={id: 'SUBSCRIBE', type: 'SUBSCRIBE', text: SUBSCRIBE_TEXT,visible:false, disabled: false, style:SUBSCRIBE_STYLE,url: _SERVER.SUBSCRIBE},
MENU_ITEM_COLLECTIONE={id: 'COLLECTION', type: 'COLLECTION', text: COLLECTION_TEXT,visible:false, disabled: false, style:COLLECTION_STYLE,url: _SERVER.COLLECTION},
MENUS=[MENU_ITEM_HISTORY,MENU_ITEM_SUBSCRIBE,MENU_ITEM_COLLECTIONE];
//Subscribe
Page({
data: {
dataIsLoaded:'none',//加载数据是否正常；
buttons:buttons,
modes:modes,
},
onLoad() {
// 加载小程序配置信息
_PROMPT.scene=getApp().scene;
//获取色相/名称
let {hue=0,name='',fontsize=''}=getApp().config || my.MIUE_CONFIG || {};
this.setData({fontsize:fontsize});
this.setData({hue:hue});
//根据配置设置名称
if(name!=''){
my.setNavigationBar({title:name});
}
//兼容处理昼夜模式
//console.log(INFO);
INFO.read().then((res)=>{
//console.warn(res.prefersClass);
this.setData({prefers:res.prefersClass});
});
},
onReady(){
// 初始化：开始---------------------------------------
C_LIST=this.MIUE.get('ChannelLister'); // 专栏列表件
C_LIST.show(true);
P_LIST=this.MIUE.get('playerLister'); // 播放列表组件
PLAYER=this.MIUE.get('Player'); // 播放器组件
SET_PANEL=this.MIUE.get('set');
C_LIST.setData({voice_menu:true});
P_LIST.setData({voice_select:true});
P_LIST.setData({voice_next_prev:true});
//console.log(_SERVER.USER)
// 获取本样式配置，并初始化
SET_PANEL.getLocalData().then(
(res)=>{
//setTimeout(my.showToast({content:`当前字号为 ${res.msg} ，长按可以唤出『偏好设置』变更`}), 5000);
//console.warn(res);
_PROMPT.prompt(`当前字号为 ${res.msg} ，长按可以唤出『偏好设置』变更`,null,8000);
this._setStyle(res);
},
(error)=>{
//console.warn(error.msg);
_PROMPT.prompt('长按可以唤出『偏好设置』',null,8000);
//console.warn('暂无本地偏好设置数据')
}
);
// 菜单部份：获取本地存储的历史记录
_HISTYOR.read().then(
(res)=>{
if(res.data && res.data.length>0){
MENUS[0].visible=true; // 历史记录有数据时，让菜单可见。
//C_LIST.setMenu({menu:MENUS});
}
},
(error)=>{}
)
// 菜单部份：请求频道列表数据
try{
// 读频频道数据
_SERVER.GET(_SERVER.CHANNELS).then(
(res)=>{
this.setData({dataIsLoaded:'success'})//网络正常请求
let def_length=MENUS.length;
MENUS=MENUS.concat(res.list);
let _current=MENUS[def_length].type; // 默认指向那频道
let {current=_current}=res;
//console.log(res);
C_LIST.setMenu({menu:MENUS,current:current});
},
(error)=>{
// 出错
this.setData({dataIsLoaded:'fail'});
C_LIST.setMessage(error.message);
}
);
//-----------
}catch(err){
let errinfo=`_SERVER 末定义，可将 /modules/server.app.js 复制一份，并在 app.js 中引入。`;
console.warn(errinfo);
C_LIST.setMessage('获取[频道]数据接口定义出错');
}
// 初始化：结束----------------------------------------
//_PROMPT.prompt('向 ← 滑动可以唤出『偏好设置』');
//setTimeout(my.showToast({content:'长按可以唤出『偏好设置』'}), 4000);
},
onShow(e){
// todo 这是需要监听系统的昼夜模式变化，对于容器的根节点注入 prefersClass 处理；
INFO.read().then((res)=>{
//console.warn(res.prefersClass);
if(res.platform=='android' && my.aliauto.currentThemeMode){ //公对安卓系统下且currentThemeMode有效的情况生效;
my.aliauto.currentThemeMode({success: (r) => {
// /\bprefers-color-scheme-(light|dark)\b/g
let reg = /\b(prefers-color-scheme-)(light|dark)\b/g;
let {theme='dark'}=r;
res.prefersClass=res.prefersClass.replace(reg,`$1${theme}`)
// 界面重新显示，重新获取当前样式，并对页面的进行重设
this.setData({prefers:res.prefersClass});
}})
//
}
});
//界面重新显示，获取当前网状态，重新注册侦听事件
let THAT=this;
if(my.canIUse('onNetworkStatusChange')){
my.onNetworkStatusChange(function(res){
if(res.isConnected){
// 当前网络已连接。");
THAT.reLoading();
}else{
// 当前网络已经断开；
}
//console.log(JSON.stringify(res))
})
}
},
reLoading(){
let dataIsLoaded=this.data.dataIsLoaded;
if(dataIsLoaded=='fail'){
let _url='/node_modules/miue-ui/pages/sandwich/sandwich';
my.reLaunch({url:_url});
}
},
//AXML 页面注册事件：菜单被点击
onChannelListPress(e){
// 菜单被点击
if(e.type=='MENU_PRESS'){
this._onMenuPressHandler(e.data);
}
// 列表内容被点击
if(e.type=='LIST_PRESS'){
console.log(e);
e.target.setPresent(e.index,false);
// 某个专辑存在get url 为空，且 src不为空的情况下；
//if(e.data.url==null && e.data.src!=""){
if(e.data.isplaylist){ // 当前专辑列表即是播放列表的情况
P_LIST.setListData(e.list);
PLAYER.setListData(e.list);
PLAYER.play(e.index);
PalyAlbum.id=e.list[e.index].id;
C_LIST.setListDataPlayItem(PalyAlbum.id);
}else{ //专辑内容被点击
let _album=e.data;
this._onAlbumListPressHandler(_album);
}
}
},
//内部调用方法：频道菜单位点击的处理函数
_onMenuPressHandler(data){
let {type,url}=data;
// 当竖屏时，频道被点击切换，会收起弹出的专辑列表以及播放列表弹出层。
if(P_LIST.data.orientation=='portrait'){
P_LIST.show(false);
}
// 清空原来的数据
C_LIST.clearListData();
if(type==MENU_ITEM_HISTORY.type){ // 历史数据
_HISTYOR.read().then(
(res)=>{
C_LIST.setDatas({list:res.data,total:res.data.length,style:'list+'});
C_LIST.setPresent(-1,true);
},
(error)=>{}
)
} else {
this._getCurrentColumnList(type,url);
}
},
//内部调用方法：加载当前专栏列表内容
_getCurrentColumnList(type,url){
CurrentColumn.id=type; // 当前频道id
CurrentColumn.page=0; // 当前频道从0开始
CurrentColumn.url=url;
// 调用小程序加载进度显示
my.showLoading({content: '加载中...'});
try{
_SERVER.GET(CurrentColumn.url,CurrentColumn).then(
(res)=>{
console.log(res);
//res=this.setCurrentColumnHasPlayAlbum(res);
//console.log(res);
C_LIST.setDatas(res);
C_LIST.setPresent(-1,true);
C_LIST.setListDataPlayItem(PalyAlbum.id);
my.hideLoading(); //取消加载显示
},
(error)=>{
//console.log(error.message);
C_LIST.setMessage(error.message);
my.hideLoading(); //取消加载显示
}
)
}catch(err){
my.hideLoading(); //取消加载显示
C_LIST.setMessage('获取[专栏]数据接口定义出错');
console.warn('_SERVER.GET 出错 ')
}
},
//AXML 页面注册事件：列表滚动处理函数
onListScroll(e){
// 当前专栏列表加载下一页
CurrentColumn.page++;
_SERVER.GET(CurrentColumn.url,CurrentColumn).then(
(res)=>{
if(res.list.length>=0){ // 只获取数据长度超过0时再添加列表 e.list= 原数据列表
res.list =e.list.concat(res.list);
res.style= e.style; // 翻页之后的列表样式不变更；
//res=this.setCurrentColumnHasPlayAlbum(res);
C_LIST.setDatas(res);
C_LIST.setListDataPlayItem(PalyAlbum.id);
}
},
(error)=>{
C_LIST.setMessage(error.message);
}
)
},
// 内部调用方法：获取某个专辑详列表
_onAlbumListPressHandler(obj){
//console.log('获取某个专辑详列表')
//console.log(obj)
let {id,title,url}=obj;
// 清除列表数据
P_LIST.clearListData();
P_LIST.claerMenuData();
// 初始化当前专辑信息
CurrentAlbum.id=id;
CurrentAlbum.page=0;
CurrentAlbum.title=title;
CurrentAlbum.isplaylist=false;
CurrentAlbum.data=obj;
CurrentAlbum.url=url;
//this.setData({currentAlbum});
P_LIST.show(true);
_SERVER.GET(CurrentAlbum.url,CurrentAlbum).then(
(res)=>{
CurrentAlbum.list=res.list;
CurrentAlbum.total=res.total;
CurrentAlbum.order=res.order;
res.notice={detail:`专辑《${title}》节目列表为空。`};
if(albumTitle==true){
res.menus=[{text:CurrentAlbum.title,disabled:true,style:'writing-mode-vertical-rl'}];
}else{
res.menus=TEXT.albumDetialHead;
}
//
res.cssClass='albumListStyle';
P_LIST.setDatas(res);
P_LIST.setPresent(-1,true);
},
(error)=>{
// let _list={list:PLAYER.data.list,total:PLAYER.data.total,style:'list',menus:[{text:'播放列表'}],class:'playListStyle'};
//P_LIST.setDatas({menus:TEXT.albumDetialHead,list:[],cssClass:'albumListStyle'});
P_LIST.setDatas({menus:[{text:''}],list:[],cssClass:'albumListStyle'});
//P_LIST.setMessage(error.message);
P_LIST.setMessage({detail:`专辑《${title}》节目列表获取失败。`, message:error.message});
}
);
},
// AXML 标签注册回调函数 ：播放列表 被播放
onPlayListPress(e){
//console.log(e);
//console.log('播放～')
//console.log(e)
PLAYER.setListData(e.list); //设置播放列表的数据
PLAYER.setTotal(e.total); // 设备播放列表总长度
//
PLAYER.play(e.index); // 播放第几个
//console.log(e.order)
// 设置播放的播放模式；
if(e.order){
PLAYER.setMode(e.order);
//PLAYER.setMode('forward');
}
P_LIST.show(false); // 收起列表
P_LIST.setPlayState(true);
// 将 currentAlbum 的数据赋值给 palyAlbum（播放列表）
PalyAlbum={...CurrentAlbum};
C_LIST.setListDataPlayItem(PalyAlbum.id);
_HISTYOR.push(PalyAlbum.data); // 写入历史记录
},
//AXML 标签注册回调函数：当内容列滚动时；
onScrolling(e){
// 横屏下当滚动频道列表时，对弹出层进行收起
if(P_LIST.data.orientation=='portrait'){
P_LIST.show(false);
}
},
// AXML 标签注册回调函数：：当前展示【播放列表或专辑详情】被滚动操作时触发的事件
onDetailListScrollLoad(e){
CurrentAlbum.page++;
// console.log('当前展示【播放列表或专辑详情】被滚动操作时触发的事件')
// console.log(e)
// console.log(CurrentAlbum);
_SERVER.GET(CurrentAlbum.url,CurrentAlbum).then(
(res)=>{
if(res.list.length>0){
CurrentAlbum.list=CurrentAlbum.list.concat(res.list);
CurrentAlbum.total=CurrentAlbum.total;
//CurrentAlbum.list=CurrentAlbum.style;
//CurrentAlbum.order=CurrentAlbum
//res.list =e.list.concat(res.list);
//res.style=e.style; // 翻页之后的列表样式不变更；
//res.order=e.order;
P_LIST.setDatas(CurrentAlbum);
if(CurrentAlbum.isplaylist){ // 如果是播放列表的情况下。
PLAYER.setListData(CurrentAlbum.list);
PLAYER.setTotal(CurrentAlbum.total); // 设备播放列表总长度
}
//P_LIST.show(true);
}
},
(error)=>{
P_LIST.setMessage(error.message);
}
);
},
//AXML 标签注册回调函数：当播放器 - list图标 被点击之后。
onIndexPress(e){
// 播放组件的 ‘列表’ 按扭被点击之后
if(e.type==PLAYER.EVENT_TYPE.BUTTON_PRESS && e.button.type==PLAYER.BUTTON_TYPE.LIST){
let notice={detail:`当前<播放列表>为空，请先选择并播放专辑节目。`, message:''};
let _list={list:PLAYER.data.list,total:PLAYER.data.total,style:'list',menus:TEXT.playlistHead,cssClass:'playListStyle',notice:notice};
//console.log(_list);
P_LIST.clearListData();
P_LIST.setDatas(_list);
//P_LIST.setMessage();
//PLAYER.setTotal(total); // 设备播放列表总长度
P_LIST.setPresent(e.present,true);
P_LIST.show(true);
//将当前专栏列表变成播放列表
//CurrentAlbum=PalyAlbum;
CurrentAlbum={...PalyAlbum};
CurrentAlbum.isplaylist=true; //当前列表是播放列表
}
},
//AXML 标签注册回调函数：指定到播放事项，将当前指向第几个。
indexPlaying(e){
//console.log(e);
PalyAlbum.present=e.present;
//console.log('indexPlaying::');
//console.log(PalyAlbum);
P_LIST.setPresent(e.present,true);
// 当前列表的当前项即 是 专辑列表+播放列表的情况。
if(e.presentTrack.isplaylist){
PalyAlbum.id=e.presentTrack.id;
C_LIST.setListDataPlayItem(PalyAlbum.id);
}
SET_PANEL.show(false);
},
// AMXL 标签注册回调函数：当列表内容被播放完成之后。
onPlayerEnd(e){
//console.log('onPlayerEnd::')
// 当前表播放完成，且其总长度超过当前长度时，开始加载新的一页内容。
if( PalyAlbum.total=='unknow' || PalyAlbum.total>PalyAlbum.list.length){
// '列表播放完成:总长大于当前长度，开始加载新的一页
PalyAlbum.present=e.present;
PalyAlbum.page++;
_SERVER.GET(PalyAlbum.url,PalyAlbum).then(
(res)=>{
if(res.list.length>0){
// console.log(PalyAlbum.list)
// console.log(res.list)
//res.list =PalyAlbum.list.concat(PalyAlbum.list);
PalyAlbum.list=PalyAlbum.list.concat(res.list);
PalyAlbum.total=res.total;
PLAYER.setListData(PalyAlbum.list); // 设置新的
PLAYER.setTotal(res.total); // 设备播放列表总长度
//console.log('call PLAYER.play')
//console.log(PalyAlbum)
//console.log(PalyAlbum.present)
//console.log(PalyAlbum.present+1)
PLAYER.play(PalyAlbum.present+1);
}
},
(error)=>{
P_LIST.setMessage(error.message);
}
);
}else{
_PROMPT.prompt('节目列表已全部播放完');
}
},
onPlayerUpdate(e){
//console.log(e);
let {original,current}=e;
_PROMPT.prompt(`根据当前节目排序，已将播放模式已从 【${original.info}】 变为 【${current.info}】`);
},
onPlayerError(e){
//console.log(e);
if(e.code==20002){
//console.log(e.message);
_PROMPT.prompt(e.message);
//console.log(SET_PANEL.getIsLogin());
SET_PANEL.show(true);
//SET_PANEL.onLogin();
}else{
SET_PANEL.show(false);
_PROMPT.prompt(e.message);
}
//
},
onPListError(e){
_PROMPT.prompt(e.message);
},
onPListShow(e){
//当 P_LIST 被关闭了，对 P_LIST 重新恢复为 播放列表
/*
if(e.show==false && e.present < 0){
//console.log('这是专辑详情列表被关闭的条件 ');
//console.log(e);
let _list={list:PLAYER.data.list,total:PLAYER.data.total,style:'list',menus:TEXT.playlistHead,cssClass:'playListStyle'};
P_LIST.setDatas(_list);
P_LIST.setPresent(PLAYER.data.present,true);
//P_LIST.show(true);
//将当前专栏列表变成播放列表
//CurrentAlbum=PalyAlbum;
CurrentAlbum={...PalyAlbum};
CurrentAlbum.isplaylist=true; //当前列表是播放列表
}*/
},
onSetChange(e){
//console.log(e);
if(e.type=='fontSize'){
this._setStyle({fontsize:e.value});
}
if(e.type=='colorHue'){
this._setStyle({colorhue:e.value});
}
if(e.type=='handle'){
this._setStyle({handle:e.value});
}
},
onLogin(e){
//console.log(e);
//console.log(MENUS);
MENU_ITEM_SUBSCRIBE.visible=true;
MENU_ITEM_COLLECTIONE.visible=true;
//let {DEVICE_ID,uid}=e.data;
C_LIST.setMenuItem({type:'SUBSCRIBE',visible:true})
C_LIST.setMenuItem({type:'COLLECTION',visible:true})
},
onLogout(e){
MENU_ITEM_SUBSCRIBE.visible=false;
MENU_ITEM_COLLECTIONE.visible=false;
C_LIST.setMenuItem({type:'SUBSCRIBE',visible:false})
C_LIST.setMenuItem({type:'COLLECTION',visible:false})
},
// 设置样式
_setStyle(obj){
let {fontsize,colorhue,handle}=obj;
if(fontsize){
this.setData({fontsize:fontsize})
SET_PANEL.setFontSize(fontsize);
}
if(colorhue){
this.setData({hue:colorhue});
PLAYER.setHue(colorhue);
SET_PANEL.setHue(colorhue);
}
if(handle){
console.warn(handle);
this.setData({handle:handle});
//PLAYER.setHue(colorhue);
SET_PANEL.setHandle(handle);
}
},
touchStartFun(e){
this.data.toutchEvent=e.touches[0];
},
touchEndFun(e){
//获取滑动前的坐标
let _start=this.data.toutchEvent;
//滑动停止的坐标
let _end=e.changedTouches[0];
//划动的距离
let distance=Math.sqrt( Math.pow((_end.clientY-_start.clientY),2)+Math.pow((_end.clientX-_start.clientX),2));
//计算划动向量角度，并增加45角度
let angle= ( Math.atan2((_end.clientY-_start.clientY),(_end.clientX-_start.clientX))* 180 / Math.PI + 360 + 45 ) % 360 ;
if(distance>10){
if(angle >= 0 && angle < 90){
//console.log("向右");
//SET_PANEL.show(false);
}else if (angle >= 90 && angle < 180){
//console.log("向下");
}else if(angle >= 180 && angle < 270){
//console.log("向左");
// SET_PANEL.show(true);
}else if(angle >= 270 && angle < 360){
//console.log("向上");
}
}
},
touchMoveFun(e){},
onMainTap(e){
//console.log(e);
SET_PANEL.show(false);
},
onlongTap(e){
SET_PANEL.show(true);
},
onTest(e){
// console.log(e);
//let _e={querywords:'文史军事'};
/*
let event={
result:3,
command:{
action:'select'
}
}
*/
//C_LIST.onMenuVoice(_e);
//P_LIST.onVoiceNextPrevCommand(event);
/*
let event={
command:{
action:'next'
}
}
//
console.log(event);
console.log(P_LIST);
P_LIST.onVoiceNextPrevCommand(event);
*/
},
});