Skip to content

T
techbook
Commit d4d7a650 authored by zhangyanni's avatar zhangyanni
Browse files
Options

分享

parent faf13e28
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 93 deletions
package.json
View file @ d4d7a650
......@@ -21,6 +21,7 @@
"vue-awesome-swiper": "^3.1.3",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.14.0",
"vue-qrcode-component": "^2.1.1",
"vue-router": "^3.0.3",
"vue-select": "^3.1.0",
"vuex": "^3.0.1"
......
public/css/phone.scss
View file @ d4d7a650
......@@ -384,4 +384,14 @@ textarea {
font-size: .24rem;
font-weight: bold;
}
}
.tips{
position: fixed;
background: #fff;
height: 1rem;
line-height: 1rem;
left: 0;
top: 0;
width: 100%;
text-align: center;
}
\ No newline at end of file
src/common/lang/en.js
View file @ d4d7a650
This diff is collapsed.
src/components/common/qrcodeCmpt.vue 0 → 100644
View file @ d4d7a650
<template>
<div>
<el-dialog
:visible.sync="visible"
width="50%" :show-close="true"
center>
<div class="centerQrCode">
<VueQRCodeComponent :text="url" :size="186" :margin="0"></VueQRCodeComponent>
</div>
<p style="margin: 10px 0;text-align: center;">用微信扫描二维码，分享给好友和朋友圈</p>
<span slot="footer" class="dialog-footer">
<el-button plain @click="handleCancel">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import VueQRCodeComponent from 'vue-qrcode-component';
export default {
name: "qrCodeCmpt",
components:{
VueQRCodeComponent
},
data(){
return{
visible:true
}
},
props: {
url:String,
title: String,
content: String,
className: String
},
computed:{
},
methods: {
handleCancel() {
this.$emit('sendVisible', false);
}
}
}
</script>
<style scoped lang="scss">
.centerQrCode{
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
justify-content: center;
}
</style>
\ No newline at end of file
src/views/bigbusiness/pages/requireDetail.vue
View file @ d4d7a650
......@@ -115,7 +115,7 @@
<el-button type="primary" style="width: 100px;" plain @click="handleSold(1)" v-loading.fullscreen="fullscreenLoading" v-if="isSoldOn">{{$t("bigBusiness.detailInfo.soldOn")}}</el-button>
<!--<el-button type="primary" style="width: 100px;" plain @click="handleCollection" v-if="isCollection">{{detailInfo.isCollected==1?$t("bigBusiness.detailInfo.cancelcollection"):$t("bigBusiness.detailInfo.collection")}}</el-button>//有取消收藏-->
<el-button type="primary" style="width: 100px;" :disabled="detailInfo.isCollected==1" v-loading.fullscreen="fullscreenLoading" plain @click="handleCollection" v-if="isCollection">{{detailInfo.isCollected==1?$t("bigBusiness.detailInfo.hasCollectioned"):$t("bigBusiness.detailInfo.collection")}}</el-button>
<el-button type="primary" style="width: 150px;" plain @click="handleOpreation(2)" v-loading.fullscreen="fullscreenLoading" v-if="isShare"><i class="iconfont icon-wechat"></i>{{$t("bigBusiness.detailInfo.shareRequire")}}</el-button>
<el-button type="primary" style="width: 150px;" plain @click="handleOpreation(2)" v-if="isShare"><i class="iconfont icon-wechat"></i>{{$t("bigBusiness.detailInfo.shareRequire")}}</el-button>
<el-button type="primary" plain @click="handleGoBack">返回</el-button>
</div>
</div>
......@@ -151,6 +151,9 @@
<div v-if="pastDueVisible">
<noAuthDialogCmpt :content="pastDueContent" @isEdit="isEdit" @isVisible="isPassDueVisible" :isEdit="true"></noAuthDialogCmpt>
</div>
<div v-if="vueQrVisible">
<qrCmpt :url="url" @sendVisible="isVueQrVisible"></qrCmpt>
</div>
</div>
</template>
......@@ -161,7 +164,9 @@
import noProjectCmpt from '../../../components/common/noProjectCmpt';
import selectProjectCmpt from '../../../components/common/selectTableDialogCmpt';
import successCmpt from '../../../components/common/successCmpt';
import qrCmpt from '../../../components/common/qrcodeCmpt';
import api from '../api/api';
export default {
name: "requireDetail",
components:{
......@@ -170,7 +175,8 @@
noAuthCmpt,
noProjectCmpt,
successCmpt,
selectProjectCmpt
selectProjectCmpt,
qrCmpt
},
data(){
return{
......@@ -210,6 +216,8 @@
isPosition:true,
fullscreenLoading:false,
hasDetailPermission:false,//是否可以查看详情
vueQrVisible:false,
url:''
}
},
methods:{
......@@ -273,6 +281,11 @@
this.pastDueVisible = data;
},
//二维码
isVueQrVisible(data){
this.vueQrVisible = data;
},
//未通过审核弹框
isNoAuthVisible(data){
this.noAuthRequireVisible = data;
......@@ -317,8 +330,8 @@
},
handleOpreation(type){
this.fullscreenLoading = true;
if(type==1){
this.fullscreenLoading = true;
api.sendSelfAxios(this.$route.query.id).then((res)=>{
this.fullscreenLoading = false;
if(res.code==0){
......@@ -365,7 +378,8 @@
this.$message.error(err);
})
}else{
this.vueQrVisible = true;
this.url = document.location.origin+"/#/share/require?id="+this.$route.query.id; //
}
},
......
src/views/saleManage/requireManage/pages/requireDetail.vue
View file @ d4d7a650
......@@ -228,6 +228,10 @@
<div v-if="pastDueVisible">
<noAuthDialogCmpt :content="pastDueContent" @isEdit="isEdit" @isVisible="isPassDueVisible" :isEdit="true"></noAuthDialogCmpt>
</div>
<div v-if="vueQrVisible">
<qrCmpt :url="url" @sendVisible="isVueQrVisible"></qrCmpt>
</div>
</div>
</template>
......@@ -236,6 +240,8 @@
import api from '../../../bigbusiness/api/api';
import authDialogCmpt from '../../../../components/authentication/authDetailDialogCmpt';//认证资料dialog
import noAuthDialogCmpt from '../../../../components/common/reuiqreDialogCmpt';
import qrCmpt from '../../../../components/common/qrcodeCmpt';
export default {
name: "requireDetail",
data(){
......@@ -265,13 +271,16 @@
isoffsetTop:true,
isPosition:true,
fullscreenLoading:false,
hasDetailPermission:false
hasDetailPermission:false,
vueQrVisible:false,
url:""
}
},
components:{
basicInfoCmpt,
authDialogCmpt,
noAuthDialogCmpt
noAuthDialogCmpt,
qrCmpt
},
methods:{
......@@ -315,6 +324,11 @@
this.pastDueVisible = data;
},
//二维码
isVueQrVisible(data){
this.vueQrVisible = data;
},
//去修改
isEdit(){
this.$router.push({path:"/salerequire/edit",query:{id:this.$route.query.id}})
......@@ -351,7 +365,8 @@
},
handleOpreation(){
this.vueQrVisible = true;
this.url = document.location.origin+"/#/share/require?id="+this.$route.query.id; //
},
handleToProject(data) {
......
src/views/share/project.vue
View file @ d4d7a650
<template>
<div>
<div class="phoneWrapper" ref="imageDom">
<div class="phoneWrapper" v-if="!imgUrl" ref="imageDom">
<div class="phoneTopNav">
<img src="../../assets/img/index/techbook-LOGO-01@2x.png" alt="">
<span class="verticalSpre">|</span>
......@@ -118,19 +118,21 @@
<p><img src="../../assets/img/index/Bitmap@2x(7).png" alt=""></p>
</div>
</div>
<div class="shareButton">
<span @click="clickGeneratePicture">点击下载</span>
<div class="shareButton" v-if="!imgUrl">
<span @click="clickGeneratePicture" id="download">点击生成图片</span>
</div>
<div v-if="imgUrl" style="margin-top: 1rem;">
<img :src="imgUrl" id="img" alt="" style="width: 100%;">
<div class="tips">
<p>长按保存图片</p>
</div>
</div>
<!--<div v-if="imgUrl">-->
<!--<img :src="imgUrl" id="img" alt="" style="width: 100%;">-->
<!--</div>-->
</div>
</template>
<script>
import api from '../innovatecompany/lreleaseproject/api/api';
import html2canvas from "html2canvas";
export default {
name: "require",
data() {
......@@ -157,81 +159,46 @@
},
clickGeneratePicture() {
alert(JSON.stringify(window.plus))
// let _this = this;
// window.pageYOffset = 0;
// document.documentElement.scrollTop = 0;
// document.body.scrollTop = 0;
// var triggerEvent = "touchstart"; //指定下载方式
// setTimeout(function () {
// // // 声明一个画布元素,存储需下载图片范围
// let canvas = document.createElement("canvas");
// // 获取需下载范围元素
// let img = document.querySelector('.phoneWrapper');
// // 图片高度
// var w = parseInt(window.getComputedStyle(img).width);
// // 图片宽度
// var h = parseInt(window.getComputedStyle(img).height);
// // 声明画布宽高
// canvas.width = w;
// canvas.height = h;
// canvas.style.width = w + "px";
// canvas.style.height = h + "px";
// html2canvas(img, {
// canvas: canvas,
// backgroundColor: "#fff",
// useCORS: true, // 允许图片跨域
// taintTest: true, // 在渲染前测试图片
// }).then(function (canvas) {
// _this.imgUrl = canvas.toDataURL()
// // _this.fileDownload(_this.imgUrl)
// // _this.saveAs(_this.imgUrl)
// _this.downloadImg(_this.imgUrl)
// }, false);
// }, 0);
},
fileDownload(downloadUrl) {
let aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = downloadUrl;
aLink.download = "分享项目.png";
// 触发点击-然后移除
document.body.appendChild(aLink);
// 创建一个单击事件
aLink.click();
document.body.removeChild(aLink);
},
downloadImg(imgurl){
var imgDtask = plus.downloader.createDownload(imgurl, {
}, function(d, status) {
if(status == 200) {
plus.gallery.save(d.filename, function() { //保存到相册
plus.io.resolveLocalFileSystemURL(d.filename, function(enpty) {
// 关闭弹框
alert("保存成功")
});
})
} else {
alert('保存失败')
}
});
imgDtask.start();
},
var _this = this;
window.pageYOffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
setTimeout(function () {
// // 声明一个画布元素,存储需下载图片范围
let canvas = document.createElement("canvas");
// 获取需下载范围元素
let img = document.querySelector('.phoneWrapper');
// 图片高度
var w = parseInt(window.getComputedStyle(img).width);
// 图片宽度
var h = parseInt(window.getComputedStyle(img).height);
// 声明画布宽高
canvas.width = w;
canvas.height = h;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
html2canvas(img, {
canvas: canvas,
backgroundColor: "#fff",
useCORS: true, // 允许图片跨域
taintTest: true, // 在渲染前测试图片
}).then(function (canvas) {
_this.imgUrl = canvas.toDataURL()
var link = document.createElement('a');
//设置下载的文件名
link.download = "分享项目.png";
link.style.display = 'none';
//设置下载路径
link.href = _this.imgUrl;
//触发点击
document.body.appendChild(link);
link.click();
//移除节点
document.body.removeChild(link);
// _this.fileDownload(_this.imgUrl)
}, false);
}, 0);
saveAs(Url) {
var blob = new Blob([''], {type: 'application/octet-stream'});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = Url;
a.download = Url.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];
var e = document.createEvent('touchstart');
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
URL.revokeObjectURL(url);
}
},
......
src/views/share/require.vue
View file @ d4d7a650
<template>
<div>
<div class="phoneWrapper" ref="imageDom">
<div v-if="!imgUrl" class="phoneWrapper" ref="imageDom">
<div class="phoneTopNav">
<img src="../../assets/img/index/techbook-LOGO-01@2x.png" alt="">
<span class="verticalSpre">|</span>
......@@ -92,11 +92,14 @@
<p><img src="../../assets/img/index/Bitmap@2x(7).png" alt=""></p>
</div>
</div>
<div class="shareButton">
<span @click="clickGeneratePicture">点击下载</span>
<div v-if="!imgUrl" class="shareButton">
<span @click="clickGeneratePicture">点击生成图片</span>
</div>
<div v-if="imgUrl">
<div v-if="imgUrl" style="margin-top: 1rem;">
<img :src="imgUrl" id="img" alt="" style="width: 100%;">
<div class="tips">
<p>长按保存图片</p>
</div>
</div>
</div>
</template>
......@@ -181,7 +184,17 @@
taintTest: true, // 在渲染前测试图片
}).then(function(canvas) {
_this.imgUrl = canvas.toDataURL()
console.log(_this.imgUrl)
var link = document.createElement('a');
//设置下载的文件名
link.download = "分享需求.png";
link.style.display = 'none';
//设置下载路径
link.href = _this.imgUrl;
//触发点击
document.body.appendChild(link);
link.click();
//移除节点
document.body.removeChild(link);
});
},0);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment