此文章分三段代码 ，main.js中不需要操作
下面代码可以直接复制进行使用
引入npm ： npm install lottie-web
p：图片路径，这里我改成了网络图片，删掉了 ‘u’的参数
1.app.vue
<template>
<div id="app">
<transition name="fade">
<section class="container">
<lottie :options="defaultOptions" :height="400" :width="100 + '%'" v-on:animCreated="handleAnimation"/>
<div class="img-box">
<img class="img-guest" src="https://img.cdn.zhaoshang800.com/img/2019/08/19/broker/261b8a9f3ccf7091a82ce230546f20b8.jpg" />
<img class="img-making" src="https://img.cdn.zhaoshang800.com/img/2019/08/19/broker/c81e728d9d4c2f636f067f89cc14862c.jpg" />
</div>
<div class="btn-card" :class="{ 'card-isX' : isIphoneX == 'isX' }">
<div>我的</div>
<div>名片</div>
</div>
<div class="btn-bottom" :class="{ 'footer-isX' : isIphoneX == 'isX' }">
<button class="btn-making" @click="copyAction">制作名片入口</button>
<button class="btn-guest" @click="shareAction">网络获客</button>
</div>
</section>
</transition>
</div>
</template>
<script>
import Lottie from './lottie.vue';
import animationData from './common/data.json' // 引入json文件
import Global from './common/global';
export default {
components: {
'lottie': Lottie
},
data() {
return {
ua:Global.config.ua,
myData : {
"token":''
},
isIphoneX: Global.config.isIPhoneX(),
userCode:'',
copyBtn: null, //存储初始化复制按钮事件
// defaultOptions: {animationData: animationData.default},
defaultOptions: {
animationData: animationData,
autoplay: false,
loop: false
},
defaultAnim:''
}
},
created() {
console.log('animationData',animationData)
console.log('Lottie',Lottie)
const _this = this;
console.log(Global.config.ua)
if (Global.config.hb.hbenv === "ios" || Global.config.hb.hbenv === "android") {
setTimeout(function() {
document.addEventListener("deviceready", function() {
isLoaded();
});
}, 0)
} else {
}
var isLoaded = function() {
if (Global.config.hb.req !== undefined) {
initHB();
} else {
setTimeout(function() {
isLoaded();
}, 10)
}
}
var initHB = function(){
Global.config.hb.req.send("getUserInfo", {}, function(data){
if(data.token) {
_this.myData.token = data.token;
_this.getCode(data.token);
}else{
initHB();
}
},"getLocalData");
}
},
mounted() {
},
methods: {
handleAnimation: function (anim) {
this.anim = anim;
console.log(anim); //这里可以看到 lottie 对象的全部属性
this.anim.play();
},
copyAction() {
const _this = this;
let clipboard = _this.copyBtn;
clipboard.on('success', function() {
clipboard.destroy()
_this.copyBtn = new _this.clipboard(_this.$refs.copy);
});
clipboard.on('error', function() {
clipboard.destroy();
_this.copyBtn = new _this.clipboard(_this.$refs.copy);
});
},
shareAction(){
const _this = this;
_this.getData(_this.myData).then((res)=>{
if(res){
Global.config.hb.req.send("share", {url :`https://app.zhaoshang800.com/pages/findAppDownload/index.htm?userCode=${_this.userCode}`,title:"选址易，让企业选址更容易",content:"找厂房、写字楼、土地，专业企业选址服务",logo:"https://img.cdn.zhaoshang800.com/img/2019/03/07/broker/fa81273c-51f2-4442-923e-69c4075e2989.jpg"},function(data){
// console.log(data)
},"nativeAction");
}
});
},
getCode(params) {
const _this = this;
let par = {
'token':params
}
return _this.$http.post('/activity/broker/qrcode/get', par).then((res) => {
if (res.data.code == 200 && res.data.data) {
let data = res.data.data;
_this.userCode = data.invitateCode || "";
return res.data.code;
} else {
return res.data.code;
}
})
},
getData(params) {
const _this = this;
return _this.$http.post('/activity/share/add', params).then((res) => {
if (res.data.code == 200 && res.data.data) {
return res.data.code;
} else {
return res.data.code;
}
})
},
}
}
</script>
<style lang="scss" scoped>
@function px2rem($px) {
$rem: 75px;
@return ($px/$rem)+rem;
}
.container {
height: 100%;
overflow-y: scroll;
input{
-webkit-appearance: none;
}
.img-box{
padding-bottom: 2rem;
.img-guest,.img-making{
width: 100%;
}
}
.btn-card{
width: 1.6rem;
height: 1.2rem;
position: fixed;
right: 0;
bottom: 3.5rem;
color: #FFFFFF;
background: #F88A33;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-left: 0.2rem;
box-shadow: 0 0.1rem 0.15rem 0 rgba(220,101,7,0.20);
border-top-left-radius: 0.6rem;
border-bottom-left-radius: 0.6rem;
box-sizing: border-box;
}
.btn-bottom{
width: 100%;
height: 2rem;
padding: 0.4rem;
position: fixed;
bottom: 0;
background: #FFFFFF;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.btn-making{
width: 6rem;
height: 1.2rem;
background: #F88A33;
color: #FFFFFF;
font-size: 0.24rem;
border-radius: 0.13rem;
}
.btn-guest{
width: 2.8rem;
height: 1.2rem;
background: #FFFFFF;
color: #F88A33;
font-size: 0.24rem;
border: 1px solid #F88A33;
border-radius: 0.13rem;
}
}
.card-isX{
bottom: 4.1rem;
}
.footer-isX{
height: 2.6rem;
padding-bottom: 0.8rem;
}
}
</style>
2.lottie.vue
<template>
<div :style="style" ref="lavContainer"></div>
</template>
<script>
import lottie from 'lottie-web';
export default {
props: {
options: {
type: Object,
required: true
},
height: Number,
width: Number,
},
data () {
return {
style: {
width: this.width ? `${this.width}px` : '100%',
height: this.height ? `${this.height}px` : '100%',
overflow: 'hidden',
margin: '0 auto'
}
}
},
mounted () {
this.anim = lottie.loadAnimation({
container: this.$refs.lavContainer,
renderer: 'svg',
loop: this.options.loop !== false,
autoplay: this.options.autoplay !== false,
animationData: this.options.animationData,
rendererSettings: this.options.rendererSettings
}
);
this.$emit('animCreated', this.anim)
}
}
</script>3.data.json
{
"v": "5.5.3",
"fr": 30,
"ip": 0,
"op": 200,
"w": 750,
"h": 886,
"nm": "落地页插画 2",
"ddd": 0,
"assets": [{
"id": "image_0",
"w": 265,
"h": 193,
"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/fa24b569ec94b3faefa83ae307d65bf8.png",
"e": 0
}, {
"id": "image_1",
"w": 432,
"h": 40,
"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/49cc2e9f6ab373ff703c7dc06885c873.png",
"e": 0
}, {
"id": "image_2",
"w": 564,
"h": 288,
"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/f14e6f1a355519ff566fab7bb1b557c4.png",
"e": 0
}, {
"id": "image_3",
"w": 374,
"h": 39,
"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/26dfdefeb2cfa635551f2ff3c45cc95e.png",
"e": 0
}, {
"id": "image_4",
"w": 564,
"h": 288,
"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/9e9cd3f79cf1a7fb61c354a07ef8fe8b.png",
"e": 0
}, {
"id": "image_5",
"w": 446,
"h": 38,
"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/3a9062813f80ff078fbd516894116d26.png",
"e": 0
}, {
"id": "image_6",
"w": 564,
"h": 288,
"u": "images/",
"p": "img_6.png",
"e": 0
}, {
"id": "image_7",
"w": 878,
"h": 887,
"u": "images/",
"p": "img_7.png",
"e": 0
}, {
"id": "comp_0",
"layers": [{
"ddd": 0,
"ind": 2,
"ty": 2,
"nm": "车 拷贝",
"refId": "image_0",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 1,
"k": [{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"t": 190,
"s": [376.5, 607.5, 0],
"to": [0, -5.667, 0],
"ti": [0, 5.667, 0]
}, {
"t": 199,
"s": [376.5, 573.5, 0]
}],
"ix": 2
},
"a": {
"a": 0,
"k": [132.5, 96.5, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"ip": 0,
"op": 202,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 5,
"ty": 0,
"nm": "就藏在你的网络获客列表",
"refId": "comp_1",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [375, 443, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [375, 443, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"w": 750,
"h": 886,
"ip": 0,
"op": 170,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 6,
"ty": 0,
"nm": "对话2",
"refId": "comp_2",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [375, 443, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [375, 443, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"w": 750,
"h": 886,
"ip": 0,
"op": 180,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 7,
"ty": 0,
"nm": "对话1",
"refId": "comp_3",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [375, 443, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [375, 443, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"w": 750,
"h": 886,
"ip": 0,
"op": 170,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 8,
"ty": 2,
"nm": "背景 拷贝",
"refId": "image_7",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [401, 442.5, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [439, 443.5, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"ip": 0,
"op": 202,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 11,
"ty": 0,
"nm": "城市 拷贝",
"refId": "comp_4",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [375, 443, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [375, 443, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"w": 750,
"h": 886,
"ip": 0,
"op": 80,
"st": 0,
"bm": 0
}]
}, {
"id": "comp_1",
"layers": [{
"ddd": 0,
"ind": 1,
"ty": 2,
"nm": "就藏在你的网络获客列表中",
"refId": "image_1",
"sr": 1,
"ks": {
"o": {
"a": 1,
"k": [{
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 60,
"s": [0]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 67,
"s": [100]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 102,
"s": [100]
}, {
"t": 120,
"s": [0]
}],
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [424, 252, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [216, 20, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"hasMask": true,
"masksProperties": [{
"inv": false,
"mode": "a",
"pt": {
"a": 1,
"k": [{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"t": 50,
"s": [{
"i": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[-0.719, -20],
[-17, -21],
[-17, 59.629],
[-0.719, 60.629]
],
"c": true
}]
}, {
"t": 85,
"s": [{
"i": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[447.281, -18],
[-17, -21],
[-17, 59.629],
[447.281, 62.629]
],
"c": true
}]
}],
"ix": 1
},
"o": {
"a": 0,
"k": 100,
"ix": 3
},
"x": {
"a": 0,
"k": 0,
"ix": 4
},
"nm": "蒙版 1"
}],
"ip": 0,
"op": 172,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 2,
"ty": 2,
"nm": "图层 2 拷贝",
"refId": "image_2",
"sr": 1,
"ks": {
"o": {
"a": 1,
"k": [{
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 60,
"s": [0]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 77,
"s": [100]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 102,
"s": [100]
}, {
"t": 120,
"s": [0]
}],
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [420, 266, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [282, 144, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"ip": 0,
"op": 171,
"st": 0,
"bm": 0
}]
}, {
"id": "comp_2",
"layers": [{
"ddd": 0,
"ind": 1,
"ty": 2,
"nm": "别卖关子了，快教教我！",
"refId": "image_3",
"sr": 1,
"ks": {
"o": {
"a": 1,
"k": [{
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 145,
"s": [100]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 179,
"s": [100]
}, {
"t": 195,
"s": [0]
}],
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [334, 255.5, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [187, 19.5, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"hasMask": true,
"masksProperties": [{
"inv": false,
"mode": "a",
"pt": {
"a": 1,
"k": [{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"t": 145,
"s": [{
"i": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[-2.793, -15],
[-6, -9],
[-6, 70.508],
[-2.793, 64.508]
],
"c": true
}]
}, {
"t": 171,
"s": [{
"i": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[395.819, -13.347],
[-6, -9],
[-6, 70.508],
[395.819, 66.161]
],
"c": true
}]
}],
"ix": 1
},
"o": {
"a": 0,
"k": 100,
"ix": 3
},
"x": {
"a": 0,
"k": 0,
"ix": 4
},
"nm": "蒙版 1"
}],
"ip": 0,
"op": 203,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 2,
"ty": 2,
"nm": "图层 5 拷贝",
"refId": "image_4",
"sr": 1,
"ks": {
"o": {
"a": 1,
"k": [{
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 132,
"s": [0]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 145,
"s": [100]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 179,
"s": [100]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 192,
"s": [0]
}, {
"t": 195,
"s": [0]
}],
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [333, 266, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [282, 144, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"ip": 0,
"op": 203,
"st": 0,
"bm": 0
}]
}, {
"id": "comp_3",
"layers": [{
"ddd": 0,
"ind": 1,
"ty": 2,
"nm": "客户在哪啊？快找给我看啊！ ",
"refId": "image_5",
"sr": 1,
"ks": {
"o": {
"a": 1,
"k": [{
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 0,
"s": [100]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 58,
"s": [100]
}, {
"t": 66,
"s": [0]
}],
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [333, 260, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [223, 19, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"hasMask": true,
"masksProperties": [{
"inv": false,
"mode": "a",
"pt": {
"a": 1,
"k": [{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"t": 20,
"s": [{
"i": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[-6.273, -10],
[-6, -13],
[-6, 51.512],
[-6.273, 54.512]
],
"c": true
}]
}, {
"t": 40,
"s": [{
"i": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[-6.273, -10],
[463, -20],
[466, 46.512],
[-6.273, 54.512]
],
"c": true
}]
}],
"ix": 1
},
"o": {
"a": 0,
"k": 100,
"ix": 3
},
"x": {
"a": 0,
"k": 0,
"ix": 4
},
"nm": "蒙版 1"
}],
"ip": 0,
"op": 171,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 2,
"ty": 2,
"nm": "图层 5",
"refId": "image_6",
"sr": 1,
"ks": {
"o": {
"a": 1,
"k": [{
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 0,
"s": [0]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 20,
"s": [100]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 58,
"s": [100]
}, {
"t": 66,
"s": [0]
}],
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [333, 266, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [282, 144, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"ip": 0,
"op": 171,
"st": 0,
"bm": 0
}]
}, {
"id": "comp_4",
"layers": []
}],
"layers": [{
"ddd": 0,
"ind": 1,
"ty": 0,
"nm": "落地页插画",
"refId": "comp_0",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [375, 443, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [375, 443, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"w": 750,
"h": 886,
"ip": 0,
"op": 200,
"st": 0,
"bm": 0
}],
"markers": []
}
