266 lines
11 KiB
Vue
266 lines
11 KiB
Vue
<template>
|
|
<div class="setsuyuan" v-loading="loading" element-loading-text="正在生成二维码" element-loading-background="rgba(0, 0, 0, 0.5)">
|
|
<div class="page-content scroll">
|
|
<div class="table-title">
|
|
<img src="../../assets/img/setsuyuan.png" alt="" />
|
|
追溯内容设置
|
|
</div>
|
|
<div class="flex-view"></div>
|
|
<div class="vrcode-selimage">
|
|
<div class="title">顶部图片</div>
|
|
<div class="sel-image-view">
|
|
<div class="sel-img sel-div" v-for="item, index in imgList" :key="index">
|
|
<el-image :src="item"></el-image>
|
|
<div class="del-img" @click="delImage(index)">
|
|
<img src="../../assets/img/del-image.png" alt="">
|
|
</div>
|
|
</div>
|
|
<label for="sel-img">
|
|
<div class="sel-image-sel sel-div" v-if="imgList.length < 1">
|
|
<img src="../../assets/img/add-image.png" alt="">
|
|
</div>
|
|
</label>
|
|
<input ref="fileInput" type="file" multiple id="sel-img" accept="image/*" @change="handleImageChange" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setsuyuan-tips">*上传图片大小应小于2M,建议尺寸为388x280</div>
|
|
<div class="vrcode-input">
|
|
<div class="input-title">第一行标题</div>
|
|
<input type="text" placeholder="请输入标题" v-model="title1">
|
|
</div>
|
|
<div class="vrcode-input">
|
|
<div class="input-title">第二行标题</div>
|
|
<input type="text" placeholder="请输入标题" v-model="title2">
|
|
</div>
|
|
<div class="setsuyuan-input">
|
|
<div class="setsuyuan-input-name">
|
|
文字颜色
|
|
</div>
|
|
<el-color-picker v-model="color" show-alpha></el-color-picker>
|
|
</div>
|
|
<div class="setsuyuan-input">
|
|
<div class="setsuyuan-input-name">
|
|
文字样式
|
|
</div>
|
|
<div class="setsuyuan-input-select">
|
|
<div @click="select1 = !select1" :class="select1 ? 'sel' : 'no-sel'"></div>
|
|
加粗
|
|
</div>
|
|
<div class="setsuyuan-input-select">
|
|
<div @click="select2 = !select2" :class="select2 ? 'sel' : 'no-sel'"></div>
|
|
斜体
|
|
</div>
|
|
</div>
|
|
<div class="setsuyuan-input">
|
|
<div class="setsuyuan-input-name"></div>
|
|
<div class="setsuyuan-input-select">
|
|
<div @click="select3 = !select3" :class="select3 ? 'sel' : 'no-sel'"></div>
|
|
显示阴影
|
|
</div>
|
|
</div>
|
|
<div class="setsuyuan-input">
|
|
<div class="setsuyuan-input-name">
|
|
阴影颜色
|
|
</div>
|
|
<el-color-picker v-model="color1" show-alpha></el-color-picker>
|
|
</div>
|
|
<div class="setsuyuan-input">
|
|
<div class="setsuyuan-input-name">
|
|
主体背景颜色
|
|
</div>
|
|
<el-color-picker v-model="color2" show-alpha></el-color-picker>
|
|
</div>
|
|
<div class="flex-view"></div>
|
|
<div class="save-btn" @click="captureScreenshot">保存</div>
|
|
</div>
|
|
<div class="setsuyuan-page">
|
|
<div class="mobile-page mobile-scroll">
|
|
<div ref="targetElement">
|
|
<div class="mobile-top" :style="`background: url(${imgList[0]}) no-repeat center;`">
|
|
<div class="title1"
|
|
:style="`color: ${color};${select3 ? 'text-shadow:' + color1 + '3px -2px 0px;' : ''}font-style: ${select2 ? 'italic' : 'normal'};font-weight: ${select1 ? 'bold' : 'normal'};`">
|
|
{{ title1 }}</div>
|
|
<div class="title2"
|
|
:style="`color: ${color};${select3 ? 'text-shadow:' + color1 + '3px -2px 0px;' : ''}font-style: ${select2 ? 'italic' : 'normal'};font-weight: ${select1 ? 'bold' : 'normal'};`">
|
|
{{ title2 }}</div>
|
|
</div>
|
|
<div class="mobile-content" :style="`background-color: ${color2};`">
|
|
<div class="mobile-view">
|
|
<div class="mobile-content-title">农场信息</div>
|
|
<div class="mobile-view-content">
|
|
<template v-if="userDetail">
|
|
<div class="mobile-text">
|
|
联系人:{{ userDetail.linkman }}
|
|
</div>
|
|
<div class="mobile-text">
|
|
联系方式:{{ userDetail.contactInformation }}
|
|
</div>
|
|
<div class="mobile-text">
|
|
邮箱地址:{{ userDetail.email }}
|
|
</div>
|
|
<div class="mobile-text">
|
|
农场名称:{{ userDetail.organizationName }}
|
|
</div>
|
|
<div class="mobile-text">
|
|
农场地址:{{ userDetail.organizationAddress }}
|
|
</div>
|
|
<div class="mobile-text">
|
|
农场网址:{{ userDetail.organizationWebsite }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="mobile-view" v-for="item, index in plant">
|
|
<div class="mobile-content-title">种植计划</div>
|
|
<div class="mobile-view-content">
|
|
<template v-if="item">
|
|
<div class="mobile-text">
|
|
名称:{{ item.plantingPlanShort }}
|
|
</div>
|
|
<div class="mobile-text">
|
|
价格:{{ item.numberOfSeeds }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog class="vrcode-model" title="提示" :append-to-body="true" :visible.sync="qrModel" width="30%" :before-close="handleClose">
|
|
<div class="vrcode-image" style="text-align: center;">
|
|
<div class="vrcode-model-title" >
|
|
生成的二维码
|
|
</div>
|
|
<img :src="qrCodeUrl" alt="" style="width: 200px;height: 200px;margin-top: 20px;">
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="qrModel = false">关 闭</el-button>
|
|
</span>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import html2canvas from 'html2canvas';
|
|
import QRCode from 'qrcode';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
imgList: [require('../../assets/img/image.jpeg')],
|
|
title1: '智慧云温室',
|
|
title2: '追溯系统',
|
|
color: 'rgba(255,255,255,1)',
|
|
color1: 'rgba(19, 206, 102, 0.8)',
|
|
color2: 'rgba(19, 206, 102, 0.8)',
|
|
select1: false,
|
|
select2: true,
|
|
select3: false,
|
|
userDetail: null,//农场信息
|
|
plant: [],//计划
|
|
qrCodeUrl: '',//生成的二维码
|
|
qrModel: false,
|
|
loading: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.dataInit()
|
|
},
|
|
methods: {
|
|
handleClose() {
|
|
this.qrCodeUrl = ''
|
|
},
|
|
dataInit() {
|
|
var userid = JSON.parse(localStorage.getItem('userInfo')).userid
|
|
var data = {
|
|
userId: userid
|
|
}
|
|
this.api.getAgriculturalInformation(data).then(res => {
|
|
})
|
|
|
|
this.api.getplant(data).then(res => {
|
|
if (res.data.code == 200) {
|
|
this.plant = res.data.data
|
|
}
|
|
})
|
|
|
|
this.api.getcodeFarmInformationManagement(data).then(res => {
|
|
if (res.data.code == 200) {
|
|
this.userDetail = res.data.data
|
|
}
|
|
})
|
|
|
|
},
|
|
async captureScreenshot() {
|
|
// 获取目标元素
|
|
this.loading = true
|
|
const targetElement = this.$refs.targetElement;
|
|
|
|
// 使用html2canvas生成截图
|
|
const canvas = await html2canvas(targetElement);
|
|
|
|
// 将canvas转为图片
|
|
const imageData = canvas.toDataURL('image/png')
|
|
var userid = JSON.parse(localStorage.getItem('userInfo')).userid
|
|
var data = {
|
|
userId: userid,
|
|
base64Data:imageData
|
|
}
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
}, 5000);
|
|
// 创建一个新的窗口显示图片（可以根据需要进行其他操作，比如保存图片）
|
|
this.api.uploadImage(data).then(res=>{
|
|
if(res.data){
|
|
this.generateQRCode(res.data)
|
|
}
|
|
})
|
|
|
|
// const imageWindow = window.open();
|
|
// imageWindow.document.write(`<img src="${imageData}" alt="Screenshot"/>`);
|
|
},
|
|
async generateQRCode(imageData) {
|
|
const that = this
|
|
// 生成二维码的数据，这里假设是一个 base64 图片的数据
|
|
|
|
// 使用 qrcode 库生成二维码
|
|
QRCode.toDataURL(imageData)
|
|
.then(url => {
|
|
this.qrCodeUrl = url;
|
|
this.qrModel = true
|
|
that.loading = false
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
|
|
},
|
|
delImage(index) {
|
|
console.log('删除图片', index);
|
|
this.imgList.splice(index, 1);
|
|
},
|
|
handleImageChange(event) {
|
|
const files = event.target.files;
|
|
if (files.length > 0) {
|
|
for (let i = 0; i < files.length; i++) {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (e) => {
|
|
this.imgList.push(e.target.result);
|
|
};
|
|
|
|
reader.readAsDataURL(files[i]);
|
|
}
|
|
this.$refs.fileInput.value = '';
|
|
} else {
|
|
console.log(null);
|
|
this.$refs.fileInput.value = '';
|
|
}
|
|
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss"></style> |