|
|
本帖最后由 王子俊 于 2018-2-28 18:57 编辑
主页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>title</title>
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<link rel="stylesheet" type="text/css" href="../../css/swiper-3.3.1.min.css" />
<style>
html, body {
height: 100%;
width: 100%;
background: #f0f0f0;
font-size:20px;
padding: 0;
margin: 0;
-webkit-tap-highlight-color: transparent;
line-height:initial
}
.display-box {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.box-orient-v {
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
}
.box-orient-h {
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
}
.box-flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.box-flex-2 {
-webkit-box-flex: 2;
-webkit-flex: 2;
flex: 2;
}
.box-flex-3 {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.box-wrap {
-webkit-box-lines: multiple;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.box-nowrap {
-webkit-box-lines: single;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.box-align-c {
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.box-align-s {
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.box-align-e {
-webkit-box-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.box-align-b {
-webkit-box-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
.box-align-str {
-webkit-box-align: stretch;
-webkit-align-items: strecth;
align-items: strecth;
}
.box-justify-s {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.box-justify-e {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.box-justify-c {
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.box-justify-be {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.main {
width: 100%;
height: 100%;
}
.banner {
width: 100%;
height: 60%;/*74.9%;*/
padding-top: 0.6 rem;
}
.swiper-wrapper {
/*height:100%;*/
height: 23.2 rem
}
.swiper-slide {
width: 68%;/*固定比例*/
height: 20.95 rem;
}
.swiper-slide .erweima {
/*width: 4.0rem;
height: 4.0rem;
top:74%;
left:34.3%;*/
position: absolute;
z-index: 9999
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
opacity: 1;
}
.swiper-pagination {
/* padding:1.2rem;
bottom:1.0rem*/
}
.bottom img {
width: 2.35 rem;
height: 2.35 rem;
margin-bottom: 0.2 rem
}
.bottom .share-item {
text-align: center;
font-size: 0.65 rem;
color: rgb(160,160,160)
}
[v-cloak] {
display: none
}
</style>
</head>
<body>
<div class="main display-box box-orient-v box-justify-be" id="main" v-cloak>
<div class="banner box-flex-1">
<div class="swiper-container" id="aui-slide">
<div class="swiper-wrapper">
<template v-for="val in list">
<div class="swiper-slide" :style = "val.style">
<img :src="val.img" style="border-radius:0.6rem">
<img class="erweima" :src="ewmUrl" :style = "val.ewmstyle" v-if="ewmUrl"/>
</div>
</template>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<div>
<div style="text-align: center;position: relative;margin-top:1.3rem">
<div style="border-top:1px solid rgb(231,231,231);margin:0 3.75rem"></div>
<div style="position: absolute;right: 7.5rem;left: 7.5rem;top: -0.7rem;font-size: 0.6rem;padding: 0.3rem;background-color: white">
海报分享到
</div>
</div>
<div class="bottom display-box box-align-c box-justify-be" style="width:100%;padding:1.1rem 1.0rem 0.8rem 1.0rem;box-sizing: border-box;">
<div class="share-item" tapmode>
<img src="../../image/s_wechat.png" />
<div>
微信好友
</div>
</div>
<div class="share-item" tapmode>
<img src="../../image/s_friend.png" />
<div>
朋友圈
</div>
</div>
<div class="share-item" tapmode>
<img src="../../image/s_qq.png" />
<div>
QQ
</div>
</div>
<div class="share-item" tapmode>
<img src="../../image/s_qzone.png" />
<div>
QQ空间
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/swiper-3.3.1.min.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript">
var erweimaPath, inshare, makeSharePic;
var mySwiper, main, listData;
apiready = function() {
inshare = api.require('inShare');
listData = [{
style : {
opacity : 1
},
ewmstyle : {
width : "31.45%",
height : "19.21%",
top : "74%",
left : "34.3%"
},
img : "https://ss2**.**/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=263073629,1660768311&fm=27&gp=0.jpg"
}, {
style : {
opacity : 1
},
ewmstyle : {
width : "31.45%",
height : "19.21%",
top : "74%",
left : "10%"
},
img : "https://timgsa**.**/timg?image&quality=80&size=b9999_10000&sec=1519820652255&di=1713a9e266f705593c7f2a634fa2272e&imgtype=0&src=http%3A%2F%2Fpic7**.**%2F20080606%2F0008020223657509_b.jpg"
}, {
style : {
"opacity" : 1
},
ewmstyle : {
width : "31.45%",
height : "19.21%",
top : "44%",
left : "34.3%"
},
img : "https://ss0**.**/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3329088918,1999081280&fm=27&gp=0.jpg"
}];
main = new Vue({
el : "#main",
data : {
ewmUrl : '',
list : listData,
progress : 0
},
compiled : function() {
var self = this;
mySwiper = new Swiper('.swiper-container', {
onProgress : function(swiper, progress) {
},
width : api.frameWidth,
pagination : '.swiper-pagination',
effect : 'coverflow',
grabCursor : true,
centeredSlides : true,
slidesPerView : 'auto', //1.4,
spaceBetween : 30,
coverflow : {
rotate : 0,
stretch : 0,
depth : 100,
modifier : 1,
slideShadows : false
},
});
},
created : function() {
}
});
makeSharePic = api.require('makeSharePic');
makeSharePic.createErweimaPic({
qrCode : 'https://docs.apicloud.com/Client-API/Func-Ext/makeSharePic',
width : 300, //采用默认的214的话在 ios plus大屏手机上 会因为宽度太小而致使 二维码边框宽度不一致！！
fileName : 'test3',
bgColor : '#FFFFFF',
margin : api.systemType == 'android' ? 8 : 4
}, function(ret, err) {
if (ret.filePath) {
erweimaPath = ret.filePath;
main.ewmUrl = erweimaPath;
}
});
};
function toPoint(percent) {
var str = percent.replace("%", "");
str = str / 100;
return str;
}
function shareTo(index) {
api.showProgress({
title : '图片生成中...',
});
var activeIndex = mySwiper.activeIndex;
/*生成最终的图片 图片效果和页面上的一样*/
**.**posePic({
bgPicUrl : main.list[activeIndex].img, //'http://imgsrc**.**/imgad/pic/item/3812b31bb051f81959d814bed0b44aed2f73e741.jpg',
attachPicUrl : erweimaPath,
fileName : 'compose',
mainWidth : 1024,
mainHeight : 1676,
subWidth : parseInt(toPoint(main.list[activeIndex].ewmstyle.width) * 1024),
l : parseInt(toPoint(main.list[activeIndex].ewmstyle.left) * 1024),
t : parseInt(toPoint(main.list[activeIndex].ewmstyle.top) * 1676),
}, function(ret) {
console.log(JSON.stringify(ret));
if (ret.status) {
switch (index) {
case 1:
goShare('wxFriend', ret.filePath);
break;
case 2:
goShare('wxCircle', ret.filePath);
break;
case 3:
goShare('qqFriend', ret.filePath);
break;
case 4:
goShare('qqZone', ret.filePath);
break;
}
}
});
}
function goShare(tag, path) {
api.hideProgress();
inshare.shareImgsTo({
imgPaths : path,
sendPattern : (api.systemType == 'ios' && api.systemVersion.split('.')[0] >= 11) ? 'ALL' : 'ONLY',
needDecodePath : true, //ios需求
app : tag,
imgSetType : 1,
}, function(ret, err) {
});
}
</script>
</html>
效果如下图
|
本帖子中包含更多资源，您需要 登录 才可以下载或查看，没有帐号？立即注册
X
|
显示全部楼层
QQ空间
新浪微博
微信扫一扫
