miue-ui/components/panel/panel.js

ali miniProgram UI components for vehicle.

if(my.MIUE_SERVER){
  var _SERVER=my.MIUE_SERVER;
  _SERVER.USER=_SERVER.USER || {};
}


import INFO from '../../modules/systeminfo';
import MIUE_UI from '../../modules/version';

var LOGIN_INTERVAL=null;
var THAT=null;
var LOGIN_KEY='LOGIN';
var LOGIN_TIME=120,LOGIN_STEP=5;
var DEVICE_ID='';
var SYSTEM_FONTSIZE=0;

INFO.getDeviceId().then((res)=>{
  if(res!=null){
    DEVICE_ID=res.data;
    _SERVER.USER.DEVICE_ID=DEVICE_ID;
  }
});


Component({
  mixins: [],
  data: {
    type:'all',
    fontsize:4,   // 22px=1 ,25=2,28=3,31=4,
    fontsizes:[18,20,24,28,32,36,40,44],
    fontsizesLabel:['0','1','2','3','4','5','6','7'],
    systemfontsize:null,
    colorhue:0,
    isshow:false,
    hue:0,
    theme:'dark',
    localStorageKey:'panelSet',
    localStorage:{},
    handle:'left',
    ishandle:false,
    fontsizeMin:1,
    fontsizeMax:7,
    ismember:false,
    showqrcode:false,
    nocanvas:false,
    countdown:'',
    islogin:false,
    user:null,
    MIUE_INFO:`-C${MIUE_UI.VERSION}-D${MIUE_UI.UPDATETIME}`,
  },
  props: {},
  didMount() {
    // 初始化组件;向页面注册自己
    THAT=this;
    let props=this.props;
    let _id=props.id?props.id:'panel_'+this.$id;
    if(this.$page.MIUE==undefined){
      this.$page.MIUE=new Map();
    }
    this.$page.MIUE.set(_id,this);
    this.setData({id:_id});
    // 设置字号和色相
    let {hue=0,fontsize=32,ishandle=false,version='',ismember=false,beian=''}=getApp().config || my.MIUE_CONFIG || {};

    this.setData({ismember:ismember});
    this.setData({colorhue:hue});
    this.setData({version:version});
    this.setData({ishandle:ishandle});
    this.setData({beian:beian});

    this._setFontSize(fontsize);
    // 读取本地存储的数据
    let _key=this.data.localStorageKey;
    this._read(_key).then((res)=>{ 
      //resolve(res); // 返回本地存储数据
      this.data.localStorage=res.data;
    })  
    .catch((error)=>{ // 本地存诸读取失败的情况
      //console.log(error);
    }) // 正常返回本地存储数据
    // 设置动画
    this.animation = my.createAnimation({
       transformOrigin: "70% 30% 0",
       duration: 300,
       timeFunction: "ease-in",
       delay: 0,
     });

     // 初始化登录状态;
     this.initLogin();

    // 如果高度少于600，则关闭 7 字号 设定,小于480侧最大字号为 5;
    INFO.read().then((res)=>{   
      console.warn(res);
      let {windowHeight,theme='dark',fontSizeSetting}=res;
      this.setData({theme:theme});
      if(windowHeight<601){
        this.setData({fontsizeMax:6})
      }
      if(windowHeight<481){
        this.setData({fontsizeMax:5})
      }

      // 对于超过 12 设定的字号生效;
      if(fontSizeSetting>18){

        SYSTEM_FONTSIZE=fontSizeSetting;

       let fontsizes=THAT.data.fontsizes;
       let fontsizesLabel=THAT.data.fontsizesLabel;
       //let systemfontsize=THAT.data.systemfontsize;
       //let newfontsizes=[];


       let _sysdef;
       fontsizes.forEach((ele,idx) => {
          if(fontSizeSetting==ele){
            //newfontsizes.push(ele)
            fontSizeSetting=0;
            //systemfontsize=idx-1;
            fontsizesLabel[idx]=`系统默认 [ ${ele} ]`;
          }else if(fontSizeSetting<ele && fontSizeSetting>1){
            //newfontsizes.push(fontSizeSetting);
            fontsizes.splice(idx,0,fontSizeSetting);
            fontsizesLabel.splice(idx,0,`系统默认 [ ${fontSizeSetting} ]`);
            fontSizeSetting=0;
            //systemfontsize=idx;
          }
       });
       console.warn(fontsizes);
       console.warn(fontsizesLabel);
       //console.warn(_sysdef);
      }
    });

  },
  didUpdate() {},
  didUnmount() {},
  methods: {
    _setFontSize(n){
     // console.warn(n);
      this.setData({fontsize:n});
      let _value=this.data.fontsizes.indexOf(parseInt(n));
      let _label= this.data.fontsizesLabel[_value];
      this.setData({fontsize_label_txt:_label});
      this.setData({fontsize_label:_value});
      //this._save(this.data.localStorageKey,this.data.localStorage);
    },
    _setColorHue(n){
      this.setData({colorhue:n%360});
    },
    _setHandle(s){
      this.setData({handle:s});
    },
    onSliderChange(e){
      //console.log(e.detail.value);
      //console.log(e.target.dataset.type);
      let _type=e.target.dataset.type;
      let _value=e.detail.value;
      if(_type=='fontSize'){
        // {target:this,type:,value:}

        //let console.warn(this.data.fontsizesLabel[_value]);

        // 看当前字号是否是系统默认设置；
        let isSysfontsize=this.data.fontsizesLabel[_value].indexOf('系统') > -1;

        //console.warn(isSysfontsize);
        _value=this.data.fontsizes[_value];
       // console.warn(this.data.fontsizes.indexOf(parseInt(_value)));
        this._setFontSize(_value);

        if(isSysfontsize){
          this.data.localStorage.fontsize=0; // 本地存储字号失效；
        }else{
          this.data.localStorage.fontsize=_value;
        }
        this._onChange({target:this,type:_type,value:_value})
      }
      if(_type=='colorHue'){
        this._setColorHue(_value);
        this.data.localStorage.colorhue=_value;
        if(_value==0){_value=360};// 兼容置为0时，setData不生效的问题；
        this._onChange({target:this,type:_type,value:_value})
      }
      // 存入本地
      this._save(this.data.localStorageKey,this.data.localStorage);

    },
    // 发出值的变化的事件
    _onChange(_event){
      if(this.props.onChange){ this.props.onChange(_event);}
    },
    switchChange(e){
      //console.log(e.detail.value);
      let _value=e.detail.value;
      let _handle='left';
      if(_value){
        _handle='right';
      }
      this.data.localStorage.handle=_handle;
      this._save(this.data.localStorageKey,this.data.localStorage);
      this._onChange({target:this,type:'handle',value:_handle})

    },

    _save(key,data){
      my.setStorage(
        {
          key:key,
          data:{data:data},
          success:()=>{ /** 写入成功 */},
          fail:()=>{/** 写入失败 */},
        }
      )
    },
    _read(key){
      return new Promise((resolve, reject) => {
        my.getStorage({
          key: key,
          success: (res)=> { //获取成功
            //console.log(res);
            let _data=res.data;
            if(_data==null){
              reject({code:11,msg:'暂无本地设置数据或数据失效'});
            }
            resolve(_data);
          },
          fail: (res)=>{//读取失败
            reject({code:11,msg:'获取当前数据失败'});
          }
        });
      })
    },
    onClose(e){
      //this.setData({type:'mini'});
      //this.animation.opacity(0.1).step();
      //this.setData({ animation: this.animation.export()})
      this.show(false);
    },
    onOpen(e){
      //this.setData({type:'all'});
      //this.animation.opacity(1).step();
      //this.setData({ animation: this.animation.export()})
    },
    onLogin(e){
      //console.log(`login:${e}`);
      // const wxRSA = require('wx-rsa');
      try{
        let foreground_color='#ffffffff';
        if(this.data.theme=='light'){
          foreground_color='#000000ff'
        }
        var _cavvas_obj={
          'id':'canvas',
          'level': 'L',
          'size': 300,
          'padding':25,
          'foreground':foreground_color,
          'foregroundAlpha':'0.8',
        };
        const Qrcode=require('miue-qrcode');
        let qrcode = new Qrcode(_cavvas_obj);
      
        // 无效的登录地址的情况；
        if(_SERVER.LOGIN_URL!=undefined && DEVICE_ID!=''){
          let url=`${_SERVER.LOGIN_URL}${DEVICE_ID}`;
          qrcode.judgeBlockDraw(url);
          this._showCavnas('swap',true);
        }else{
          qrcode.drawText('登录二维码无法展示\n末配置有效登录地址\n或设备标识获取失败');
          console.warn('末能展示二码难，没有配置 server.api.js 中末配置有效的登录的LOGIN_URL');
          this._showCavnas('swap');
        }
      }catch(err){
        //qrcode.drawText('登录二维码无法展示\nmiue-qrcode模块错误');
        console.warn('缺少miue-qrcode模块,或配置错误！需在根目录 / min.project.json 文件配置 node_modules_es6_whitelist 模块 "miue-qrcode"');
        //this._showCavnas('swap');
        this._showCavansError();
        //console.warn(err);
      }
    },
    onLogout(e){
      //console.log(`logout:${e}`);
      this.setData({islogin:false});
      my.removeStorage({key:LOGIN_KEY}); // 
      //
      if(this.props.onLogout){
        this.props.onLogout({
          type:'logout',
          target:this
        });
      }
      // 登出
      _SERVER.logout(DEVICE_ID).then((res)=>{
        console.log(res.data.msg);
      },
      (error)=>{})

    },
    _showCavansError(){
      this.setData({nocanvas:true});
    },
    _showCavnas(isShow,load=false){
      let showqrcode=this.data.showqrcode;
      //console.log(isShow);
      let isShowCanvas=(isShow=='swap')?!showqrcode:isShow; // 入参为空的话，直接变换
      this.setData({showqrcode:isShowCanvas});
      if(isShowCanvas && load){
        this.setData({countdown:LOGIN_TIME});
        LOGIN_INTERVAL= setInterval(THAT.loading,1000);
      }else{
        this.setData({countdown:''});
        clearInterval(LOGIN_INTERVAL);
      }
    },
    loading(){
       // 开始倒计时
       let countdown=THAT.data.countdown;
       // 当倒计结整时，不显示二维码登录状态；
       if(countdown==0){
         THAT._showCavnas(false,false);
       }
       // 按一定频率加载读取数据；
      if( countdown % LOGIN_STEP == 0 ){
        // 先读取本地缓存数据
        THAT._read(LOGIN_KEY).then((res)=>{
          //console.log(`read:then-1:then:`);
          let {data}=res;
          // console.log(data);
           if(data.uid){ // 当本地存在已经登录的数据时
             THAT.islogined(data);
           }else{
            THAT._requestLoginStatus();
          }
        }).catch((err)=>{
          // 本调读取失败之后；
          console.log(`_read:then-1:error:${err}`)
          //return my.MIUE_SERVER.getloginStatus('ALIAUTOBANMA20230720');
          THAT._requestLoginStatus();
        });
      }
      //countdown--;
      countdown=countdown-1;
      THAT.setData({countdown:countdown});
      //console.log(`loading~~:${countdown}`);
    },
    _requestLoginStatus(){
      try{
        _SERVER.getloginStatus(DEVICE_ID).then((res)=>{
            this._save(LOGIN_KEY,res);
          },
          (error)=>{}
        );
      }catch(err){
        console.warn('SERVER.getloginStatus 末定义～,移除状态轮询');
        clearInterval(LOGIN_INTERVAL);
      }
    },
    islogined(data){
      //console.warn('islogined ::')
      //console.log(data);
      let {vipExpire}=data;
      //let [_vipexpire=false]=vipEndDate.match(/^\d{4}-\d{1,2}-\d{1,2}/) || [];
      if(vipExpire){
        data.expiceInfo='会员有效期至:'+vipExpire;
      }else{
        data.expiceInfo='非会员或会员已过期';
      }
      THAT._showCavnas(false);
      this.setData({islogin:true});
      this.setData({user:data});
      _SERVER.USER=data;


      //输出登录成功的事件
      let eventData=data;
          eventData.DEVICE_ID=DEVICE_ID
      if(this.props.onLogin){
        this.props.onLogin({
          type:'login',
          target:this,
          data:eventData
        });
      }
      //console.log(my.MIUE_SERVER.USER);
    },
    getIsLogin(){
      return this.data.islogin;
    },
    show(s){
      /*
      THAT._read(LOGIN_KEY).then((res)=>{
        let {data}=res.data;
        if(data.uid){ // 当本地存在已经登录的数据时
          THAT.islogined(data);
        }
      });
      */
      this.setData({isshow:s});
      if(!s){
        this._showCavnas(s);
      }

      //console.log(_SERVER.USER.uid);

      if(s && this.data.islogin){
        //console.log("get user info:");
        _SERVER.getUserInfo({deviceId:DEVICE_ID,userId:_SERVER.USER.uid}).then((res)=>{
          //console.log(res);
          this.islogined(res);
        },
        (error)=>{})
      }
    },
    initLogin(){
      THAT._read(LOGIN_KEY).then((res)=>{
       // console.log(res);
        let {data}=res;
       // console.log(data);
        if(data.uid){ // 当本地存在已经登录的数据时
          THAT.islogined(data);
        }
      }).catch((err)=>{
        console.log('读本本地已登录信息:'+err.msg);
      });
    },
    getLocalData(){
      return new Promise((resolve, reject) => {
        this._read(this.data.localStorageKey).then((res)=>{ 
          //console.warn(res.data);
          // 对本地存储的字号进行读取；
          let {fontsize=0,colorhue=null,handle=null}=res.data;
          let data={}
          if(fontsize>0){
            data.fontsize=fontsize;
            data.fontsizeSource='USER';
            data.msg='自定义设置的字号';
          }else if(fontsize==0 && SYSTEM_FONTSIZE>0){
            data.fontsize=SYSTEM_FONTSIZE;
            data.fontsizeSource='SYSTEM';
            data.msg='系统默认的字号';
          }else{
            data.fontsizeSource='MINI';
            data.msg='默认的字号';
          }
          if(colorhue){
            data.colorhue=colorhue;
          }
          if(handle){
            data.handle=handle;
          }
          //console.warn(data);
          resolve(data);
          //this.data.localStorage=res.data;
        })  
        .catch((error)=>{ // 本地存诸读取失败的情况
          if(SYSTEM_FONTSIZE>0){
            resolve({fontsize:SYSTEM_FONTSIZE,msg:'系统设置的默认字号',fontsizeSource:'SYSTEM'});
          }else{
            reject(error);
          }
        }) // 正常返回本地存储数据
      })
    },
    onBeian(s){
      let txt='工信部备案系统网址：https://beian.miit.gov.cn/';
      my.alert({ content: txt });
      //my.showToast({content:txt});
    },
    setHue(s){
      this._setColorHue(s);
      //this.setData({colorhue:s});
    },
    setFontSize(s){
      this._setFontSize(s);
    },
    setHandle(s){
      this._setHandle(s);
    }
  },
});