|
|
@@ -1,588 +1,542 @@
|
|
|
-<template>
|
|
|
- <view class="content">
|
|
|
- <view class="team" v-if="!is_over">
|
|
|
- <empty></empty>
|
|
|
- </view>
|
|
|
- <view class="certificates" v-if='is_over'>
|
|
|
-
|
|
|
- <canvas v-if="showcanvas" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
|
|
|
- <image class="imgbox" v-else :src="img" mode=" aspectFill"></image>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import { get_training, sign_training, detail_training} from '@/api/train.js';
|
|
|
-import jyfParser from "@/components/jyf-parser/jyf-parser";
|
|
|
-import {
|
|
|
- weixindata,
|
|
|
- weixinlocation
|
|
|
- } from '@/utils/wxAuthorized.js';
|
|
|
- import empty from '@/components/empty';
|
|
|
- import {
|
|
|
- userinfo
|
|
|
- } from '@/api/user.js';
|
|
|
- import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from 'vuex';
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- empty,
|
|
|
- jyfParser
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- is_over:1,
|
|
|
- type:'',//0是个人报名，1是团体报名
|
|
|
- id:'',
|
|
|
- description:'',
|
|
|
- list:'',
|
|
|
- //个人
|
|
|
- name:'',
|
|
|
- phone:'',
|
|
|
- addr:'',
|
|
|
- work:'',
|
|
|
- //团队
|
|
|
- company:'',
|
|
|
- address:'',
|
|
|
- companyName:'',
|
|
|
- companyphone:'',
|
|
|
- num:'',
|
|
|
- people:'神农架林区红十字会',
|
|
|
- signDate:'',
|
|
|
- loading: true, //是否载入图片中
|
|
|
- size: 180,
|
|
|
- ratio: 1, //页面比例用于计算
|
|
|
- canHeight: '',
|
|
|
- canWeidth: '',
|
|
|
- url:'',
|
|
|
- img:'',
|
|
|
- showcanvas:true,
|
|
|
- uid:''
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.type = option.type;
|
|
|
- this.id = option.id;
|
|
|
- this.IndexShare();
|
|
|
- this.loadData();
|
|
|
-
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- detail_training({
|
|
|
- id:this.id,
|
|
|
- }).then(({data}) => {
|
|
|
- console.log(999,data)
|
|
|
- this.name = data.name
|
|
|
- this.signDate = data.add_time
|
|
|
- this.is_over = data.is_over
|
|
|
- console.log(3,data.add_time)
|
|
|
- let obj = this;
|
|
|
- let name = obj.name
|
|
|
- let signDate = obj.signDate
|
|
|
-
|
|
|
- function getRecTime(timestamp, fmt) {
|
|
|
- let d = new Date(timestamp * 1000)
|
|
|
- // f = fmt || 'yyyy/MM/dd',
|
|
|
- let f = fmt || 'yyyy.MM.dd'
|
|
|
- let o = {
|
|
|
- 'M+': d.getMonth() + 1, //月份
|
|
|
- 'd+': d.getDate(), //日
|
|
|
- 'h+': d.getHours(), //小时
|
|
|
- 'm+': d.getMinutes(), //分
|
|
|
- 's+': d.getSeconds(), //秒
|
|
|
- 'q+': Math.floor((d.getMonth() + 3) / 3), //季度
|
|
|
- 'S': d.getMilliseconds() //毫秒
|
|
|
- };
|
|
|
- if (/(y+)/.test(f)) {
|
|
|
- f = f.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
- }
|
|
|
- for (let k in o) {
|
|
|
- if (new RegExp('(' + k + ')').test(f)) {
|
|
|
- f = f.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
|
|
|
- }
|
|
|
- }
|
|
|
- return f;
|
|
|
- console.log(f)
|
|
|
- }
|
|
|
- let m = getRecTime(signDate)
|
|
|
- let query = uni.createSelectorQuery();
|
|
|
- // this.loadData();
|
|
|
- // 获取页面比例
|
|
|
- query
|
|
|
- .select('.certificates')
|
|
|
- .fields({
|
|
|
- size: true
|
|
|
- },
|
|
|
- e => {
|
|
|
- console.log('获取页面比例',e)
|
|
|
- // 保存比例
|
|
|
- this.ratio = e.width / 750;
|
|
|
- }
|
|
|
- )
|
|
|
- .exec();
|
|
|
- // 获取画布宽高信息
|
|
|
- query
|
|
|
- .select('#qrShareBox')
|
|
|
- .fields({
|
|
|
- size: true
|
|
|
- },
|
|
|
- e => {
|
|
|
- console.log('获取画布宽高信息',e)
|
|
|
- obj.canHeight = e.height;
|
|
|
- obj.canWeidth = e.width;
|
|
|
- }
|
|
|
- )
|
|
|
- .exec();
|
|
|
- let ctxBg = '/static/img/graduation.png'; //画布背景
|
|
|
- let src = '/static/icon/erweima.jpg' // 二维码
|
|
|
- let context = uni.createCanvasContext('qrShareBox');
|
|
|
- // 插入背景图片
|
|
|
- context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
|
|
|
-
|
|
|
- const codeSize = obj.size * obj.ratio; //计算二维码大小
|
|
|
- const codeX = ((750 - obj.size) * obj.ratio) / 2; //二维码所在x轴位置
|
|
|
- const codeY = 999 * obj.ratio; //二维码所在y轴位置
|
|
|
- // console.log('二维码大小',codeSize)
|
|
|
- // console.log('二维码所在x轴位置',codeX)
|
|
|
- // console.log('二维码所在y轴位置',codeY)
|
|
|
- const codeBoxColor = '#FFFFFF'; //包裹框颜色
|
|
|
- const codeBoxWidht = 0; //包裹边框宽度
|
|
|
- const codeBoxSize = (codeBoxWidht / 2) * obj.ratio; //计算二维码白色包裹框大小
|
|
|
- const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
|
|
|
- const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
|
|
|
- const codeBoxEnd = codeSize + codeBoxWidht * obj.ratio; //计算包裹框大小
|
|
|
- const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * obj.ratio; //文字距离上边距高度
|
|
|
- const fontSize = 24 * obj.ratio; //文字大小
|
|
|
- const fontText = ''; //文字内容
|
|
|
- const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
|
|
|
- // // 插入文字
|
|
|
- context.setFontSize(32 * obj.ratio)
|
|
|
- // 画横线
|
|
|
- context.moveTo(90 * obj.ratio, 586 * obj.ratio)
|
|
|
- context.lineTo(250 * obj.ratio, 586 * obj.ratio)
|
|
|
- context.stroke();
|
|
|
- context.setTextAlign('center')
|
|
|
- context.fillText(name, 170 * obj.ratio, 574 * obj.ratio)
|
|
|
- context.setTextAlign('left')
|
|
|
- context.fillText('先生/女士', 260 * obj.ratio, 580 * obj.ratio)
|
|
|
-
|
|
|
- context.setFontSize(31 * obj.ratio)
|
|
|
-
|
|
|
- context.fillText('您已完成神农架林区红十字会普及培训', 105 * obj.ratio, 670 * obj.ratio)
|
|
|
- context.fillText('的全部课程，特发此证。', 105 * obj.ratio, 720 * obj.ratio)
|
|
|
- context.setFontSize(22 * obj.ratio)
|
|
|
- context.fillText('签发人:', 300 * obj.ratio, 800 * obj.ratio)
|
|
|
- context.fillText('Siger:', 300 * obj.ratio, 830 * obj.ratio)
|
|
|
- // 画横线
|
|
|
- context.moveTo(380 * obj.ratio, 830 * obj.ratio)
|
|
|
- context.lineTo(660 * obj.ratio, 830 * obj.ratio)
|
|
|
- context.stroke()
|
|
|
- context.fillText('签发日期:', 300 * obj.ratio, 880 * obj.ratio)
|
|
|
- context.fillText('Issuer Date:', 300 * obj.ratio, 910 * obj.ratio)
|
|
|
- context.setFontSize(26 * obj.ratio)
|
|
|
- context.fillText(m, 475 * obj.ratio, 908 * obj.ratio)
|
|
|
- context.fillText('神农架林区红十字会', 440 * obj.ratio, 820 * obj.ratio)
|
|
|
- // 画横线
|
|
|
- context.moveTo(430 * obj.ratio, 915 * obj.ratio)
|
|
|
- context.lineTo(660 * obj.ratio, 915 * obj.ratio)
|
|
|
- context.stroke()
|
|
|
- context.setFontSize(fontSize);
|
|
|
- context.fillText(fontText, fontLeft, fontTop);
|
|
|
-
|
|
|
- // 插入边框
|
|
|
- context.beginPath();
|
|
|
- context.setLineJoin('round'); //边框类型
|
|
|
- context.setLineWidth(codeBoxWidht * obj.ratio);
|
|
|
- context.setStrokeStyle(codeBoxColor); //设置包裹框颜色
|
|
|
- context.strokeRect(codeBoxX, codeBoxY, codeBoxEnd, codeBoxEnd);
|
|
|
- context.stroke();
|
|
|
- // 插入二维码
|
|
|
- context.drawImage(src, codeX, codeY, codeSize, codeSize);
|
|
|
- context.draw(false,(e) => {
|
|
|
- uni.canvasToTempFilePath({
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- width: obj.canWeidth,
|
|
|
- height: obj.canHeight,
|
|
|
- destWidth: obj.canWeidth,
|
|
|
- destHeight: obj.canHeight,
|
|
|
- canvasId: 'qrShareBox',
|
|
|
- success: function(res) {
|
|
|
- console.log(res)
|
|
|
- // uni.showModal({
|
|
|
- // title:'zhi1'
|
|
|
- // })
|
|
|
- // 在H5平台下，tempFilePath 为 base64
|
|
|
- // console.log(res.tempFilePath)
|
|
|
- obj.showcanvas = false;
|
|
|
- obj.img = res.tempFilePath
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- onShow() {
|
|
|
- this.uid = this.userInfo.uid;
|
|
|
- console.log('this.uid',this.uid)
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState('user', ['hasLogin', 'userInfo'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapMutations('user', ['setUserInfo']),
|
|
|
- // 分享
|
|
|
- IndexShare() {
|
|
|
- let obj = this;
|
|
|
- let item = {
|
|
|
- link: obj.$store.state.baseURL + '/index/#/pages/train/sign?type=' + obj.type + '&id=' + obj.id + '&uid=' + obj.userInfo.uid,// 分享链接
|
|
|
- imgUrl: obj.$store.state.baseURL + '/index/static/img/002.png',
|
|
|
- desc: '结业证书',
|
|
|
- title: '公安县红十字会',
|
|
|
- };
|
|
|
- console.log('分享加',item)
|
|
|
- weixindata(item);
|
|
|
- },
|
|
|
- async loadData() {
|
|
|
- let obj = this;
|
|
|
- console.log('当前is_over',obj.is_over)
|
|
|
- if( obj.is_over == 1 ) {
|
|
|
- let uid = obj.userInfo.uid
|
|
|
- console.log(9090,uid)
|
|
|
- }
|
|
|
- get_training({
|
|
|
- id:obj.id,
|
|
|
- // uid:uid
|
|
|
- }).then(({ data }) => {
|
|
|
- obj.list = data;
|
|
|
- console.log(9988,data)
|
|
|
- if(obj.list.content != null){
|
|
|
- obj.description = obj.list.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
- submit(){
|
|
|
- let obj = this;
|
|
|
- let data = {};
|
|
|
- if(obj.type==0){
|
|
|
- if(!obj.name){
|
|
|
- obj.$api.msg('请填写姓名！');
|
|
|
- return;
|
|
|
- }
|
|
|
- if(!obj.phone){
|
|
|
- obj.$api.msg('请输入联系方式！');
|
|
|
- return;
|
|
|
- }
|
|
|
- if(!obj.addr){
|
|
|
- obj.$api.msg('请输入联系方式！');
|
|
|
- return;
|
|
|
- }
|
|
|
- data={
|
|
|
- name:obj.name,
|
|
|
- work:obj.addr,
|
|
|
- phone:obj.phone,
|
|
|
- tid:obj.id,
|
|
|
- type:0
|
|
|
- }
|
|
|
- }
|
|
|
- if(obj.type==1){
|
|
|
- if(!obj.company){
|
|
|
- obj.$api.msg('请填写企业名称！');
|
|
|
- return;
|
|
|
- }
|
|
|
- if(!obj.address){
|
|
|
- obj.$api.msg('请填写企业地址！');
|
|
|
- return;
|
|
|
- }
|
|
|
- if(!obj.companyName){
|
|
|
- obj.$api.msg('请填写负责人姓名！');
|
|
|
- return;
|
|
|
- }
|
|
|
- if(!obj.companyphone){
|
|
|
- obj.$api.msg('请输入联系方式！');
|
|
|
- return;
|
|
|
- }
|
|
|
- if(!obj.num){
|
|
|
- obj.$api.msg('请输入参加培训人数！');
|
|
|
- return;
|
|
|
- }
|
|
|
- data={
|
|
|
- company:obj.company,
|
|
|
- address:obj.address,
|
|
|
- name:obj.companyName,
|
|
|
- phone:obj.companyphone,
|
|
|
- num:obj.num,
|
|
|
- tid:obj.id,
|
|
|
- type:1
|
|
|
- }
|
|
|
- }
|
|
|
- sign_training(data).then(function(e) {
|
|
|
- console.log(data.type)
|
|
|
- let type = data.type
|
|
|
- uni.setStorageSync('type', type)
|
|
|
- obj.$api.msg(e.msg);
|
|
|
- setTimeout(function(){
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/train/index'
|
|
|
- })
|
|
|
- }, 1000);
|
|
|
- }).catch(e => {
|
|
|
- obj.$api.msg(e.message);
|
|
|
- setTimeout(function(){
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/train/index'
|
|
|
- })
|
|
|
- }, 1000);
|
|
|
- });;
|
|
|
-
|
|
|
- },
|
|
|
- getRecTime(timestamp, fmt) {
|
|
|
- let d = new Date(timestamp * 1000),
|
|
|
- // f = fmt || 'yyyy/MM/dd',
|
|
|
- f = fmt || 'yyyy.MM.dd hh:mm:ss',
|
|
|
- o = {
|
|
|
- 'M+': d.getMonth() + 1, //月份
|
|
|
- 'd+': d.getDate(), //日
|
|
|
- 'h+': d.getHours(), //小时
|
|
|
- 'm+': d.getMinutes(), //分
|
|
|
- 's+': d.getSeconds(), //秒
|
|
|
- 'q+': Math.floor((d.getMonth() + 3) / 3), //季度
|
|
|
- 'S': d.getMilliseconds() //毫秒
|
|
|
- };
|
|
|
- if (/(y+)/.test(f)) {
|
|
|
- f = f.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
- }
|
|
|
- for (let k in o) {
|
|
|
- if (new RegExp('(' + k + ')').test(f)) {
|
|
|
- f = f.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
|
|
|
- }
|
|
|
- }
|
|
|
- return f;
|
|
|
- console.log(f)
|
|
|
- },
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- background: #FFFFFF;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- .content {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-.box{
|
|
|
- padding: 0rpx 25rpx;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.top-image{
|
|
|
- width: 100%;
|
|
|
- height: 300rpx;
|
|
|
-}
|
|
|
-.top-title{
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- padding: 25rpx 0rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- border-bottom:1rpx dashed #B5B5B5;
|
|
|
-}
|
|
|
-.canten{
|
|
|
- text-align: center !important;
|
|
|
-}
|
|
|
-.addr{
|
|
|
- color: #222222;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 25rpx 35rpx;
|
|
|
-}
|
|
|
-.text-box{
|
|
|
- padding: 25rpx 25rpx;
|
|
|
- padding-bottom: 0rpx !important;
|
|
|
-}
|
|
|
-.text{
|
|
|
- color: #222222;
|
|
|
- font-size: 28rpx;
|
|
|
- padding-bottom: 15rpx;
|
|
|
-}
|
|
|
-.weixin-icon{
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- padding-top: 45rpx;
|
|
|
- image{
|
|
|
- width: 248rpx;
|
|
|
- height: 248rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-.tip{
|
|
|
- color: #222222;
|
|
|
- font-size: 28rpx;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- padding-bottom: 50rpx;
|
|
|
-}
|
|
|
-.sign-tip{
|
|
|
- padding: 25rpx 0rpx;
|
|
|
- text-align: center;
|
|
|
- color: #222222;
|
|
|
- font-size: 28rpx;
|
|
|
-}
|
|
|
-.form-box{
|
|
|
- padding: 0rpx 35rpx;
|
|
|
- .label{
|
|
|
- font-size: 34rpx;
|
|
|
- padding: 25rpx 0rpx;
|
|
|
- text{
|
|
|
- color: #E62129;
|
|
|
- padding-left: 5rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- input{
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- border: 2rpx solid #979797;
|
|
|
- padding: 0rpx 15rpx;
|
|
|
- border-radius: 15rpx;
|
|
|
- height: 80rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-.submit{
|
|
|
- width: 70%;
|
|
|
- margin: 0rpx auto;
|
|
|
- margin-top: 80rpx;
|
|
|
- margin-bottom: 80rpx;
|
|
|
- padding: 25rpx 0;
|
|
|
- text-align: center;
|
|
|
- background-color: #E62129;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 32rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
-}
|
|
|
-.grey{
|
|
|
- background-color: #9B9B9B !important;
|
|
|
-}
|
|
|
-.certificates{
|
|
|
- // padding: 24rpx;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
- .tki-qrcode-canvas {
|
|
|
- // width: 700rpx;
|
|
|
- // height: 1245rpx;
|
|
|
- width: 750rpx;
|
|
|
- // padding: 32rpx;
|
|
|
- height: 1350rpx;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- .bgimg{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- image{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .box-mian{
|
|
|
-
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- padding:380rpx 94rpx 200rpx 94rpx;
|
|
|
- color: #333;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- // align-items: center;
|
|
|
- .name{
|
|
|
- display: flex;
|
|
|
- font-size: 32rpx;
|
|
|
- .name-left{
|
|
|
- text-align: center;
|
|
|
- // padding: 0 24rpx;
|
|
|
- width: 150rpx;
|
|
|
- border-bottom: 2rpx solid #333;
|
|
|
- }
|
|
|
- }
|
|
|
- .info{
|
|
|
- margin-top: 68rpx;
|
|
|
- text-indent: 64rpx;
|
|
|
- line-height: 58rpx;
|
|
|
- }
|
|
|
- .signName{
|
|
|
- margin-top: 32rpx;
|
|
|
- display: flex;
|
|
|
- .signName-left{
|
|
|
- line-height: 34rpx;
|
|
|
- .signName-1{
|
|
|
-
|
|
|
- }
|
|
|
- .signName-2{
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .signName-right{
|
|
|
- text-align: left;
|
|
|
- // width: 100%;
|
|
|
- padding: 0 12rpx;
|
|
|
- margin-left: 12rpx;
|
|
|
-
|
|
|
- // width: 288rpx;
|
|
|
- border-bottom: 2rpx solid #333;
|
|
|
- // margin-bottom: 12rpx;
|
|
|
- .list-input {
|
|
|
- width: 100%;
|
|
|
- padding: 0 12rpx;
|
|
|
- height: 70rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- text-align: left;
|
|
|
-
|
|
|
- }
|
|
|
- .signDate{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .signDate{
|
|
|
- margin-top: 22rpx;
|
|
|
- display: flex;
|
|
|
- .signName-left{
|
|
|
- line-height: 34rpx;
|
|
|
- .signName-1{
|
|
|
-
|
|
|
- }
|
|
|
- .signName-2{
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .signName-right{
|
|
|
- text-align: left;
|
|
|
- padding-left: 12rpx;
|
|
|
- margin-left: 12rpx;
|
|
|
- width: 288rpx;
|
|
|
- border-bottom: 2rpx solid #333;
|
|
|
- .list-input {
|
|
|
- height: 70rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- text-align: left;
|
|
|
-
|
|
|
- }
|
|
|
- // margin-bottom: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- // background-color: pink;
|
|
|
-
|
|
|
- }
|
|
|
- .imgbox{
|
|
|
- height: 1350rpx;
|
|
|
- width:750rpx;
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="team" v-if="!is_over">
|
|
|
+ <empty></empty>
|
|
|
+ </view>
|
|
|
+ <view class="certificates" v-if='is_over'>
|
|
|
+
|
|
|
+ <canvas v-if="showcanvas" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
|
|
|
+ <image class="imgbox" v-else :src="img" mode=" aspectFill"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ get_training,
|
|
|
+ sign_training,
|
|
|
+ detail_training
|
|
|
+ } from '@/api/train.js';
|
|
|
+ import jyfParser from "@/components/jyf-parser/jyf-parser";
|
|
|
+ import {
|
|
|
+ weixindata,
|
|
|
+ weixinlocation
|
|
|
+ } from '@/utils/wxAuthorized.js';
|
|
|
+ import empty from '@/components/empty';
|
|
|
+ import {
|
|
|
+ userinfo
|
|
|
+ } from '@/api/user.js';
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ empty,
|
|
|
+ jyfParser
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ is_over: 1,
|
|
|
+ type: '', //0是个人报名，1是团体报名
|
|
|
+ id: '',
|
|
|
+ description: '',
|
|
|
+ list: '',
|
|
|
+ //个人
|
|
|
+ name: '',
|
|
|
+ phone: '',
|
|
|
+ addr: '',
|
|
|
+ work: '',
|
|
|
+ //团队
|
|
|
+ company: '',
|
|
|
+ address: '',
|
|
|
+ companyName: '',
|
|
|
+ companyphone: '',
|
|
|
+ num: '',
|
|
|
+ people: '神农架林区红十字会',
|
|
|
+ signDate: '',
|
|
|
+ loading: true, //是否载入图片中
|
|
|
+ size: 180,
|
|
|
+ ratio: 1, //页面比例用于计算
|
|
|
+ canHeight: '',
|
|
|
+ canWeidth: '',
|
|
|
+ url: '',
|
|
|
+ img: '',
|
|
|
+ showcanvas: true,
|
|
|
+ uid: '',
|
|
|
+ sendtime: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.type = option.type;
|
|
|
+ // this.id = option.id;
|
|
|
+ this.name = decodeURI(option.name)
|
|
|
+ this.sendtime = option.sendtime
|
|
|
+ this.IndexShare();
|
|
|
+ // this.loadData();
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // detail_training({
|
|
|
+ // id: this.id,
|
|
|
+ // }).then(({
|
|
|
+ // data
|
|
|
+ // }) => {
|
|
|
+ // console.log(999, data)
|
|
|
+ // this.name = data.name
|
|
|
+ // this.signDate = data.add_time
|
|
|
+ // this.is_over = data.is_over
|
|
|
+ // console.log(3, data.add_time)
|
|
|
+ let obj = this;
|
|
|
+ let name = obj.name
|
|
|
+ let signDate = obj.sendtime
|
|
|
+
|
|
|
+ function getRecTime(timestamp, fmt) {
|
|
|
+ let d = new Date(timestamp * 1000)
|
|
|
+ // f = fmt || 'yyyy/MM/dd',
|
|
|
+ let f = fmt || 'yyyy.MM.dd'
|
|
|
+ let o = {
|
|
|
+ 'M+': d.getMonth() + 1, //月份
|
|
|
+ 'd+': d.getDate(), //日
|
|
|
+ 'h+': d.getHours(), //小时
|
|
|
+ 'm+': d.getMinutes(), //分
|
|
|
+ 's+': d.getSeconds(), //秒
|
|
|
+ 'q+': Math.floor((d.getMonth() + 3) / 3), //季度
|
|
|
+ 'S': d.getMilliseconds() //毫秒
|
|
|
+ };
|
|
|
+ if (/(y+)/.test(f)) {
|
|
|
+ f = f.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
+ }
|
|
|
+ for (let k in o) {
|
|
|
+ if (new RegExp('(' + k + ')').test(f)) {
|
|
|
+ f = f.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr((
|
|
|
+ '' + o[k]).length)));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return f;
|
|
|
+ console.log(f)
|
|
|
+ }
|
|
|
+ let m = getRecTime(signDate)
|
|
|
+ let query = uni.createSelectorQuery();
|
|
|
+ // this.loadData();
|
|
|
+ // 获取页面比例
|
|
|
+ query
|
|
|
+ .select('.certificates')
|
|
|
+ .fields({
|
|
|
+ size: true
|
|
|
+ },
|
|
|
+ e => {
|
|
|
+ console.log('获取页面比例', e)
|
|
|
+ // 保存比例
|
|
|
+ this.ratio = e.width / 750;
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .exec();
|
|
|
+ // 获取画布宽高信息
|
|
|
+ query
|
|
|
+ .select('#qrShareBox')
|
|
|
+ .fields({
|
|
|
+ size: true
|
|
|
+ },
|
|
|
+ e => {
|
|
|
+ console.log('获取画布宽高信息', e)
|
|
|
+ obj.canHeight = e.height;
|
|
|
+ obj.canWeidth = e.width;
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .exec();
|
|
|
+ let ctxBg = '/static/img/graduation.png'; //画布背景
|
|
|
+ let src = '/static/icon/erweima.jpg' // 二维码
|
|
|
+ let context = uni.createCanvasContext('qrShareBox');
|
|
|
+ // 插入背景图片
|
|
|
+ context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
|
|
|
+
|
|
|
+ const codeSize = obj.size * obj.ratio; //计算二维码大小
|
|
|
+ const codeX = ((750 - obj.size) * obj.ratio) / 2; //二维码所在x轴位置
|
|
|
+ const codeY = 999 * obj.ratio; //二维码所在y轴位置
|
|
|
+ // console.log('二维码大小',codeSize)
|
|
|
+ // console.log('二维码所在x轴位置',codeX)
|
|
|
+ // console.log('二维码所在y轴位置',codeY)
|
|
|
+ const codeBoxColor = '#FFFFFF'; //包裹框颜色
|
|
|
+ const codeBoxWidht = 0; //包裹边框宽度
|
|
|
+ const codeBoxSize = (codeBoxWidht / 2) * obj.ratio; //计算二维码白色包裹框大小
|
|
|
+ const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
|
|
|
+ const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
|
|
|
+ const codeBoxEnd = codeSize + codeBoxWidht * obj.ratio; //计算包裹框大小
|
|
|
+ const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * obj.ratio; //文字距离上边距高度
|
|
|
+ const fontSize = 24 * obj.ratio; //文字大小
|
|
|
+ const fontText = ''; //文字内容
|
|
|
+ const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
|
|
|
+ // // 插入文字
|
|
|
+ context.setFontSize(32 * obj.ratio)
|
|
|
+ // 画横线
|
|
|
+ context.moveTo(90 * obj.ratio, 586 * obj.ratio)
|
|
|
+ context.lineTo(250 * obj.ratio, 586 * obj.ratio)
|
|
|
+ context.stroke();
|
|
|
+ context.setTextAlign('center')
|
|
|
+ context.fillText(name, 170 * obj.ratio, 574 * obj.ratio)
|
|
|
+ context.setTextAlign('left')
|
|
|
+ context.fillText('先生/女士', 260 * obj.ratio, 580 * obj.ratio)
|
|
|
+
|
|
|
+ context.setFontSize(31 * obj.ratio)
|
|
|
+
|
|
|
+ context.fillText('您已完成公安县红十字会普及培训', 105 * obj.ratio, 670 * obj.ratio)
|
|
|
+ context.fillText('的全部课程，特发此证。', 105 * obj.ratio, 720 * obj.ratio)
|
|
|
+ context.setFontSize(22 * obj.ratio)
|
|
|
+ context.fillText('签发人:', 300 * obj.ratio, 800 * obj.ratio)
|
|
|
+ context.fillText('Siger:', 300 * obj.ratio, 830 * obj.ratio)
|
|
|
+ // 画横线
|
|
|
+ context.moveTo(380 * obj.ratio, 830 * obj.ratio)
|
|
|
+ context.lineTo(660 * obj.ratio, 830 * obj.ratio)
|
|
|
+ context.stroke()
|
|
|
+ context.fillText('签发日期:', 300 * obj.ratio, 880 * obj.ratio)
|
|
|
+ context.fillText('Issuer Date:', 300 * obj.ratio, 910 * obj.ratio)
|
|
|
+ context.setFontSize(26 * obj.ratio)
|
|
|
+ context.fillText(m, 475 * obj.ratio, 908 * obj.ratio)
|
|
|
+ context.fillText('公安县红十字会', 440 * obj.ratio, 820 * obj.ratio)
|
|
|
+ // 画横线
|
|
|
+ context.moveTo(430 * obj.ratio, 915 * obj.ratio)
|
|
|
+ context.lineTo(660 * obj.ratio, 915 * obj.ratio)
|
|
|
+ context.stroke()
|
|
|
+ context.setFontSize(fontSize);
|
|
|
+ context.fillText(fontText, fontLeft, fontTop);
|
|
|
+
|
|
|
+ // 插入边框
|
|
|
+ context.beginPath();
|
|
|
+ context.setLineJoin('round'); //边框类型
|
|
|
+ context.setLineWidth(codeBoxWidht * obj.ratio);
|
|
|
+ context.setStrokeStyle(codeBoxColor); //设置包裹框颜色
|
|
|
+ context.strokeRect(codeBoxX, codeBoxY, codeBoxEnd, codeBoxEnd);
|
|
|
+ context.stroke();
|
|
|
+ // 插入二维码
|
|
|
+ context.drawImage(src, codeX, codeY, codeSize, codeSize);
|
|
|
+ context.draw(false, (e) => {
|
|
|
+ uni.canvasToTempFilePath({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: obj.canWeidth,
|
|
|
+ height: obj.canHeight,
|
|
|
+ destWidth: obj.canWeidth,
|
|
|
+ destHeight: obj.canHeight,
|
|
|
+ canvasId: 'qrShareBox',
|
|
|
+ success: function(res) {
|
|
|
+ console.log(res)
|
|
|
+ // uni.showModal({
|
|
|
+ // title:'zhi1'
|
|
|
+ // })
|
|
|
+ // 在H5平台下，tempFilePath 为 base64
|
|
|
+ // console.log(res.tempFilePath)
|
|
|
+ obj.showcanvas = false;
|
|
|
+ obj.img = res.tempFilePath
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ onShow() {
|
|
|
+ this.uid = this.userInfo.uid;
|
|
|
+ console.log('this.uid', this.uid)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState('user', ['hasLogin', 'userInfo'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('user', ['setUserInfo']),
|
|
|
+ // 分享
|
|
|
+ IndexShare() {
|
|
|
+ let obj = this;
|
|
|
+ let item = {
|
|
|
+ link: obj.$store.state.baseURL + '/index/#/pages/form/certificates?name=' + encodeURI(obj.name) + '&sendtime=' + obj.sendtime,
|
|
|
+ imgUrl: obj.$store.state.baseURL + '/index/static/img/002.png',
|
|
|
+ desc: '结业证书',
|
|
|
+ title: '公安县红十字会',
|
|
|
+ };
|
|
|
+ console.log('分享加', item)
|
|
|
+ weixindata(item);
|
|
|
+ },
|
|
|
+ getRecTime(timestamp, fmt) {
|
|
|
+ let d = new Date(timestamp * 1000),
|
|
|
+ // f = fmt || 'yyyy/MM/dd',
|
|
|
+ f = fmt || 'yyyy.MM.dd hh:mm:ss',
|
|
|
+ o = {
|
|
|
+ 'M+': d.getMonth() + 1, //月份
|
|
|
+ 'd+': d.getDate(), //日
|
|
|
+ 'h+': d.getHours(), //小时
|
|
|
+ 'm+': d.getMinutes(), //分
|
|
|
+ 's+': d.getSeconds(), //秒
|
|
|
+ 'q+': Math.floor((d.getMonth() + 3) / 3), //季度
|
|
|
+ 'S': d.getMilliseconds() //毫秒
|
|
|
+ };
|
|
|
+ if (/(y+)/.test(f)) {
|
|
|
+ f = f.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
+ }
|
|
|
+ for (let k in o) {
|
|
|
+ if (new RegExp('(' + k + ')').test(f)) {
|
|
|
+ f = f.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k])
|
|
|
+ .length)));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return f;
|
|
|
+ console.log(f)
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ background: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ padding: 0rpx 25rpx;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-title {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ padding: 25rpx 0rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ border-bottom: 1rpx dashed #B5B5B5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .canten {
|
|
|
+ text-align: center !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addr {
|
|
|
+ color: #222222;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 25rpx 35rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ padding: 25rpx 25rpx;
|
|
|
+ padding-bottom: 0rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #222222;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-bottom: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weixin-icon {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 45rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 248rpx;
|
|
|
+ height: 248rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ color: #222222;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ padding-bottom: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-tip {
|
|
|
+ padding: 25rpx 0rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #222222;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-box {
|
|
|
+ padding: 0rpx 35rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 34rpx;
|
|
|
+ padding: 25rpx 0rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #E62129;
|
|
|
+ padding-left: 5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ border: 2rpx solid #979797;
|
|
|
+ padding: 0rpx 15rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ width: 70%;
|
|
|
+ margin: 0rpx auto;
|
|
|
+ margin-top: 80rpx;
|
|
|
+ margin-bottom: 80rpx;
|
|
|
+ padding: 25rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #E62129;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grey {
|
|
|
+ background-color: #9B9B9B !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .certificates {
|
|
|
+ // padding: 24rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tki-qrcode-canvas {
|
|
|
+ // width: 700rpx;
|
|
|
+ // height: 1245rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ // padding: 32rpx;
|
|
|
+ height: 1350rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bgimg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-mian {
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ padding: 380rpx 94rpx 200rpx 94rpx;
|
|
|
+ color: #333;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ // align-items: center;
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ .name-left {
|
|
|
+ text-align: center;
|
|
|
+ // padding: 0 24rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ border-bottom: 2rpx solid #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ margin-top: 68rpx;
|
|
|
+ text-indent: 64rpx;
|
|
|
+ line-height: 58rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signName {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .signName-left {
|
|
|
+ line-height: 34rpx;
|
|
|
+
|
|
|
+ .signName-1 {}
|
|
|
+
|
|
|
+ .signName-2 {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signName-right {
|
|
|
+ text-align: left;
|
|
|
+ // width: 100%;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ margin-left: 12rpx;
|
|
|
+
|
|
|
+ // width: 288rpx;
|
|
|
+ border-bottom: 2rpx solid #333;
|
|
|
+
|
|
|
+ // margin-bottom: 12rpx;
|
|
|
+ .list-input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .signDate {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signDate {
|
|
|
+ margin-top: 22rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .signName-left {
|
|
|
+ line-height: 34rpx;
|
|
|
+
|
|
|
+ .signName-1 {}
|
|
|
+
|
|
|
+ .signName-2 {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signName-right {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 12rpx;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ width: 288rpx;
|
|
|
+ border-bottom: 2rpx solid #333;
|
|
|
+
|
|
|
+ .list-input {
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // background-color: pink;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgbox {
|
|
|
+ height: 1350rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ }
|
|
|
</style>
|
