新增登录页动画

pages/oaLogin/oaLogin.vue

@@ -1,8 +1,9 @@
 <template>
 	<view class="login">
 		<!-- <image class="bg-iamge" src="../../static/img/login/login_back_img.png"></image> -->
+    <hx-lottie :options="options" ref="lottie" style="width: 100vw;height: 100vh;transform: scale(1.1)"/>
 		<!-- #ifdef APP-PLUS||H5 -->
-		<view style="height: var(--status-bar-height)"></view>
+		<!-- <view style="height: var(--status-bar-height)"></view> -->
 		<!-- #endif -->
 		<view class="body">
 			<view class="title">欢迎进入里海供销平台！</view>
@@ -23,8 +24,6 @@
 						<view class="get-code" @click="getCode">{{ tips }}</view>
 					</view>
 					<view class="btn">
-						<!-- <view>新用户注册</view> -->
-						<!-- <view @click="forgetPWD">忘记密码?</view> -->
 					</view>
 				</view>
 				<button class="submit_btn" @click="login">登录</button>
@@ -42,6 +41,7 @@
 	import {
 		Toast
 	} from "../../libs/uniApi";
+  import bj from "@/static/animation/bj2.json"
 	// #ifdef APP-PLUS
 	var jpushModule = uni.requireNativePlugin("JG-JPush");
 
@@ -50,7 +50,12 @@
 	export default {
 		data() {
 			return {
-
+        options: {
+          data: '',
+          rendererSettings: {
+              preserveAspectRatio: 'xMidYMid meet', // 调整动画的对齐方式
+            },
+        },
 				tabList: [{
 						name: '账号登录'
 					},
@@ -70,6 +75,10 @@
 				seconds: 60,
 			};
 		},
+    onLoad() {
+      this.options.data = bj;
+      this.$refs.lottie.call('play');
+    },
 		methods: {
 			changeTabs(e) {
 				this.current = e.index;
@@ -192,6 +201,7 @@
 		width: 100vw;
 		height: 100vh;
 		position: relative;
+    overflow: hidden;
 		background-color: $theme-oa-color;
 		/* #ifdef H5 */
 		// background-image: url("../../static/img/login/login_back_img.png");
@@ -206,6 +216,9 @@
 		// }
 
 		.body {
+      position: absolute;
+      top: 200rpx;
+      left: 28rpx;
 			display: flex;
 			flex-direction: column;
 			align-items: center;

uni_modules/hx-lottie/changelog.md

@@ -0,0 +1,2 @@
+## 1.0.0（2022-04-15）
+1.0.0

uni_modules/hx-lottie/components/hx-lottie/hx-lottie.vue

@@ -0,0 +1,152 @@
+<template>
+  <view class="lottie" :options="options" :change:options="Lottie.optionsChange" :fun="fun" :change:fun="Lottie.funChange">
+    <canvas :class="canvasId" :canvas-id="canvasId" type="2d" ref="lottie" style="width:100%;height:100%;"></canvas>
+  </view>
+</template>
+<script>
+  import uuid from './uuid.js'
+  // #ifdef MP-WEIXIN
+  import { loadAnimation, setup } from './lottie-miniprogram.min.js'
+  // #endif
+  
+  export default {
+    props:{
+      options:{
+        type: Object,
+        default:()=>{}
+      }
+    },
+    options: {
+      styleIsolation: "isolated", 
+      addGlobalClass: true, 
+      virtualHost: true, 
+    },
+    data(){
+      return {
+        canvasId: uuid(10),
+        fun:{
+          name: null,
+          args: null
+        },
+      }
+    },
+    // #ifdef MP-WEIXIN
+    watch: {
+      // 微信小程序方法触发
+      fun:{
+        deep: true,
+        handler(){
+          let {name, args} = this.fun
+          if(this?.lottie&&name) this.lottie[name](args)
+        }
+      },
+      // 监听 options 变化
+      options:{
+        deep: true,
+        handler(){
+          // 停止上一次动画 destroy 报错,固先用stop
+          this.lottie.stop()
+          // 加载新动画数据
+          this.loadData()
+        }
+      },
+    },
+    // #endif
+    mounted(){
+      // 检测配置参数,如果开启自动播放则标记
+      this.fun.name = this.options?.autoplay??true?'play':null
+      // #ifdef MP-WEIXIN
+        this.$nextTick(function(){
+          this.init()
+        })
+      // #endif
+    },
+    methods:{
+      // lottie 相关方法
+      call(name=null,args=null){
+        if(name&&this.fun.name!=name) this.fun.name = name
+        if(args&&this.fun.args!=args) this.fun.args = args
+      },
+      // #ifdef MP-WEIXIN
+      init(){
+        const query = uni.createSelectorQuery().in(this);
+        query.select(`.${this.canvasId}`).node(res => {
+          
+        	this.canvas = res.node
+
+        	setup(this.canvas)
+        	this.loadData()
+        	
+        }).exec()
+      },
+      loadData(){
+        this.lottie = loadAnimation({
+        	//循环播放
+        	loop: this.options?.autoplay??true, 
+        	//自动播放
+        	autoplay: this.options?.autoplay??true,
+        	// 动画json的本地数据
+        	// animationData: this.options?.data, 
+        	// 动画json的网络路径
+          path: this.options?.path, 
+        	rendererSettings: {
+        		context: this.canvas.getContext('2d')
+        	},
+        })
+      }
+      // #endif
+    }
+  }
+</script>
+<script module="Lottie" lang="renderjs">
+  // #ifdef APP-PLUS || H5
+    import { loadAnimation } from './lottie-web.min.js'
+    
+    export default {
+      data(){
+        return {
+          lottie: null,
+        }
+      },
+      mounted() {
+        this.init()
+      },
+      methods:{
+        // 参数变化监听
+        optionsChange(newValue, oldValue, ownerInstance, instance){
+          // 销毁之前动画
+          this.lottie?.destroy()
+          this.init()
+        },
+        // 监听触发函数
+        funChange(newValue, oldValue, ownerInstance, instance){
+          let {name, args} = newValue
+          this.lottie[name](args)
+        },
+        // lottie 动画初始化
+        init(){
+          this.lottie = loadAnimation({
+            // 包含动画的dom元素
+          	container: this.$refs.lottie.$el, 
+            //渲染格式
+          	renderer: this.options?.renderer??'canvas', 
+            //循环播放
+          	loop: this.options?.autoplay??true, 
+            //自动播放
+          	autoplay: this.options?.autoplay??true,
+            // 动画json的本地数据
+          	animationData: this.options?.data, 
+            // 动画json的网络路径
+          	path: this.options?.path
+          });
+        },
+      }
+    }
+  // #endif
+</script>
+<style>
+  .lottie{
+    width: 100%;
+    height: 100%;
+  }
+</style>

uni_modules/hx-lottie/components/hx-lottie/uuid.js

@@ -0,0 +1,23 @@
+
+export default (len = 32, radix = null) => {
+	let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+	let uuid = [];
+	radix = radix || chars.length;
+	if (len) {
+		// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+		for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
+	} else {
+		let r;
+		// rfc4122标准要求返回的uuid中,某些位为固定的字符
+		uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+		uuid[14] = '4';
+
+		for (let i = 0; i < 36; i++) {
+			if (!uuid[i]) {
+				r = 0 | Math.random() * 16;
+				uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
+			}
+		}
+	}
+	return uuid.join('');
+}

uni_modules/hx-lottie/package.json

@@ -0,0 +1,83 @@
+{
+  "id": "hx-lottie",
+  "displayName": "hx-lottie",
+  "version": "1.0.0",
+  "description": "uniapp lottie动画插件, 适配H5, App, 微信小程序， 其他小程序暂未测试",
+  "keywords": [
+    "hx-lottie",
+    "lottie",
+    "lottie动画",
+    "微信lottie"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.3.0"
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://gitee.com/Xiaohuixiong_123/hx-lottie.git"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "n"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

uni_modules/hx-lottie/readme.md

@@ -0,0 +1,47 @@
+<h3 align="center" style="margin:30px 0 30px;font-weight: bold;font-size:32px;">hx-lottie 使用说明</h3>
+
+## 预览
+[![L8dXn0.gif](https://s1.ax1x.com/2022/04/15/L8dXn0.gif)](https://imgtu.com/i/L8dXn0)
+
+[![L8wmND.gif](https://s1.ax1x.com/2022/04/15/L8wmND.gif)](https://imgtu.com/i/L8wmND)
+
+## 使用说明
+
+* 引入使用
+
+    ``` html
+      <!-- options 动画参数 -->
+      <hx-lottie :options="options" ref="lottie">  
+    
+    ```
+
+* 参数说明
+
+
+    | 属性值      | 参数说明                      |
+    |----------|---------------------------|
+    | loop     | 是否循环播放动画（Boolean 默认 true） |
+    | autoplay | 是否自动播放（Boolean 默认 true）   |
+    | data     | 动画数据（Object）              |
+    | path     | 动画网络路径 （String）           |
+
+* 方法说名 `组件内方法统一使用 call(funName, args) 调用
+`
+    1. 使用示例 
+    
+        ```js     
+            // 播放动画
+            this.$refs.lottie.call('play')
+            // 暂停动画
+            this.$refs.lottie.call('pause')
+        ```
+    
+    1. 说明  `方法与lottie-web 方法保持一致`  [详情可参考](http://airbnb.io/lottie/#/web?id=usage)
+        
+        | 方法名      | 说明                  |
+        |----------|---------------------|
+        | play     | 播放动画                |
+        | pause    | 暂停动画                |
+        | stop     | 停止动画                |
+        | setSpeed | 设置动画速度，args = speed |
+        | …        | ...                 |