|
|
@@ -1,613 +1,714 @@
|
|
|
-<template>
|
|
|
- <view class="content">
|
|
|
- <view class="team" v-if="!is_over">
|
|
|
- <image class="top-image" :src="list.img"></image>
|
|
|
- <!-- <view class="box">
|
|
|
- <jyf-parser :html="description" ref="article"></jyf-parser>
|
|
|
- </view> -->
|
|
|
- <view class="top-title canten">报名</view>
|
|
|
- <view class="sign-tip">完成信息填写，即可参加红十字会救护员培训</view>
|
|
|
- <view class="form-box" v-if="type == 0">
|
|
|
- <view class="label">姓名<text>*</text></view>
|
|
|
- <input type="text" v-model="name" placeholder="请填写姓名" />
|
|
|
- <view class="label">联系方式<text>*</text></view>
|
|
|
- <input type="number" v-model="phone" placeholder="请输入联系方式" />
|
|
|
- <view class="label">工作单位（选填）</view>
|
|
|
- <input type="text" v-model="work" placeholder="请输入工作单位" />
|
|
|
- <view class="label">地址<text>*</text></view>
|
|
|
- <input type="text" v-model="addr" placeholder="请输入联系地址" />
|
|
|
- </view>
|
|
|
- <view class="form-box" v-if="type == 1">
|
|
|
- <view class="label">企业名称<text>*</text></view>
|
|
|
- <input type="text" v-model="company" placeholder="请填写企业名称" />
|
|
|
- <view class="label">企业地址<text>*</text></view>
|
|
|
- <input type="text" v-model="address" placeholder="请填写企业地址" />
|
|
|
- <view class="label">负责人姓名<text>*</text></view>
|
|
|
- <input type="text" v-model="companyName" placeholder="请填写负责人姓名" />
|
|
|
- <view class="label">联系方式<text>*</text></view>
|
|
|
- <input type="number" v-model="companyphone" placeholder="请输入联系方式" />
|
|
|
- <view class="label">参加培训人数<text>*</text></view>
|
|
|
- <input type="number" v-model="num" placeholder="请输入参加培训人数" />
|
|
|
- </view>
|
|
|
- <view class="top-title">报名</view>
|
|
|
- <view class="text-box">
|
|
|
- <view class="text">请参训学员在培训当天携带身份证复印件1张，一寸证件照2张。</view>
|
|
|
- <view class="text"> 报名咨询电话：027-60229380</view>
|
|
|
- </view>
|
|
|
- <view class="submit" @click="submit">立即报名</view>
|
|
|
- </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 {
|
|
|
- userinfo
|
|
|
- } from '@/api/user.js';
|
|
|
- import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from 'vuex';
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- 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;
|
|
|
- if(option.uid){
|
|
|
- this.uid = option.uid;
|
|
|
- }else{
|
|
|
- this.uid = this.userInfo.uid;
|
|
|
- }
|
|
|
- this.IndexShare();
|
|
|
- this.loadData();
|
|
|
- detail_training({
|
|
|
- id:this.id,
|
|
|
- uid:this.uid
|
|
|
- }).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();
|
|
|
- console.log("---query---",query)
|
|
|
- // 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();
|
|
|
- console.log('obj.canHeight',obj.canHeight)
|
|
|
- console.log('obj.canWeidth',obj.canWeidth)
|
|
|
- let ctxBg = '/index/static/img/graduation.png'; //画布背景
|
|
|
- let src = '/index/static/icon/erweima.jpg' // 二维码
|
|
|
- let context = uni.createCanvasContext('qrShareBox');
|
|
|
- // 插入背景图片
|
|
|
- context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
|
|
|
- console.log('123',obj.ratio)
|
|
|
- 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.fillText(name, 110 * obj.ratio, 574 * obj.ratio)
|
|
|
- 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('签发人:', 100 * obj.ratio, 800 * obj.ratio)
|
|
|
- context.fillText('Siger:', 100 * obj.ratio, 830 * obj.ratio)
|
|
|
- // 画横线
|
|
|
- context.moveTo(180 * obj.ratio, 830 * obj.ratio)
|
|
|
- context.lineTo(460 * obj.ratio, 830 * obj.ratio)
|
|
|
- context.stroke()
|
|
|
- context.fillText('签发日期:', 100 * obj.ratio, 880 * obj.ratio)
|
|
|
- context.fillText('Issuer Date:', 100 * obj.ratio, 910 * obj.ratio)
|
|
|
- context.setFontSize(26 * obj.ratio)
|
|
|
- context.fillText(m, 275 * obj.ratio, 908 * obj.ratio)
|
|
|
- context.fillText('鄂州市红十字会', 200 * obj.ratio, 820 * obj.ratio)
|
|
|
- // 画横线
|
|
|
- context.moveTo(230 * obj.ratio, 915 * obj.ratio)
|
|
|
- context.lineTo(460 * 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();
|
|
|
- // 插入二维码
|
|
|
- console.log('插入二维码src',src)
|
|
|
- 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) {
|
|
|
- // uni.showModal({
|
|
|
- // title:'zhi1'
|
|
|
- // })
|
|
|
- // 在H5平台下，tempFilePath 为 base64
|
|
|
- // console.log(res.tempFilePath)
|
|
|
- obj.showcanvas = false;
|
|
|
- obj.img = res.tempFilePath
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- onReady() {
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState('user', ['hasLogin', 'userInfo'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapMutations('user', ['setUserInfo']),
|
|
|
- // 分享
|
|
|
- IndexShare() {
|
|
|
- let obj = this;
|
|
|
- let item = {
|
|
|
- link: 'http://ez.igxys.com/index/#/pages/train/sign?type=' + obj.type + '&id=' + obj.id + '&uid=' + obj.userInfo.uid,// 分享链接
|
|
|
- imgUrl: 'http://ez.igxys.com/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;
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="team" v-if="!is_over">
|
|
|
+ <image class="top-image" :src="list.img"></image>
|
|
|
+ <!-- <view class="box">
|
|
|
+ <jyf-parser :html="description" ref="article"></jyf-parser>
|
|
|
+ </view> -->
|
|
|
+ <view class="top-title canten">报名</view>
|
|
|
+ <view class="sign-tip">完成信息填写，即可参加红十字会救护员培训</view>
|
|
|
+ <view class="form-box" v-if="type == 0">
|
|
|
+ <view class="label">
|
|
|
+ 姓名
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="text" v-model="name" placeholder="请填写姓名" />
|
|
|
+ <view class="label">
|
|
|
+ 性别
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <picker @change="bindPickerSex" :value="sex" :range="array" class="box-right">
|
|
|
+ <view class="placeholder" v-if="sex === ''">请输入您的性别</view>
|
|
|
+ <text>{{ sex }}</text>
|
|
|
+ </picker>
|
|
|
+ <view class="label">
|
|
|
+ 身份证
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="text" v-model="card_id" placeholder="请填写身份证号" />
|
|
|
+ <view class="label">
|
|
|
+ 联系方式
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="number" v-model="phone" placeholder="请输入联系方式" />
|
|
|
+ <view class="label">工作单位（选填）</view>
|
|
|
+ <input type="text" v-model="work" placeholder="请输入工作单位" />
|
|
|
+ <view class="label">
|
|
|
+ 地址
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="text" v-model="addr" placeholder="请输入联系地址" />
|
|
|
+ <view class="upload-box">
|
|
|
+ <view class="label">
|
|
|
+ 照片
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <view class="upload-right">
|
|
|
+ <image :src="image" mode="" class="upload-img" @click.stop="imgsub" v-if="image"></image>
|
|
|
+ <image src="../../static/images/upload.png" class="upload-img" mode="" v-if="!image" @click.stop="imgsub"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-box" v-if="type == 1">
|
|
|
+ <view class="label">
|
|
|
+ 企业名称
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="text" v-model="company" placeholder="请填写企业名称" />
|
|
|
+ <view class="label">
|
|
|
+ 企业地址
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="text" v-model="address" placeholder="请填写企业地址" />
|
|
|
+ <view class="label">
|
|
|
+ 负责人姓名
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="text" v-model="companyName" placeholder="请填写负责人姓名" />
|
|
|
+ <view class="label">
|
|
|
+ 性别
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <picker @change="bindPickerSex" :value="sex" :range="array" class="box-right">
|
|
|
+ <view class="placeholder" v-if="sex === ''">请输入负责人的性别</view>
|
|
|
+ <text>{{ sex }}</text>
|
|
|
+ </picker>
|
|
|
+ <view class="label">
|
|
|
+ 身份证
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="text" v-model="card_id" placeholder="请填写负责人的身份证号" />
|
|
|
+ <view class="label">
|
|
|
+ 联系方式
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="number" v-model="companyphone" placeholder="请输入联系方式" />
|
|
|
+ <view class="label">
|
|
|
+ 参加培训人数
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <input type="number" v-model="num" placeholder="请输入参加培训人数" />
|
|
|
+ <view class="upload-box">
|
|
|
+ <view class="label">
|
|
|
+ 照片
|
|
|
+ <text>*</text>
|
|
|
+ </view>
|
|
|
+ <view class="upload-right">
|
|
|
+ <image :src="image" mode="" class="upload-img" @click.stop="imgsub" v-if="image"></image>
|
|
|
+ <image src="../../static/images/upload.png" class="upload-img" mode="" v-if="!image" @click.stop="imgsub"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top-title">报名</view>
|
|
|
+ <view class="text-box">
|
|
|
+ <view class="text">请参训学员在培训当天携带身份证复印件1张，一寸证件照2张。</view>
|
|
|
+ <view class="text">报名咨询电话：027-60229380</view>
|
|
|
+ </view>
|
|
|
+ <view class="submit" @click="submit">立即报名</view>
|
|
|
+ </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 { userinfo } from '@/api/user.js';
|
|
|
+import { mapState, mapMutations } from 'vuex';
|
|
|
+import { upload } from '@/api/ask.js';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ jyfParser
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ array: ['男', '女'],
|
|
|
+ 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: '',
|
|
|
+ sex: '',
|
|
|
+ card_id: '',
|
|
|
+ image: '',
|
|
|
+ cardId: '',
|
|
|
+ no:'',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.type = option.type;
|
|
|
+ this.id = option.id;
|
|
|
+ if (option.uid) {
|
|
|
+ this.uid = option.uid;
|
|
|
+ } else {
|
|
|
+ this.uid = this.userInfo.uid;
|
|
|
+ }
|
|
|
+ this.IndexShare();
|
|
|
+ this.loadData();
|
|
|
+ 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
|
|
|
+ this.cardId = data.card_id
|
|
|
+ this.no = data.no
|
|
|
+ if (data.sex == 0){
|
|
|
+ this.sex = '男'
|
|
|
+ }else if (data.sex == 1){
|
|
|
+ this.sex == '女'
|
|
|
+ }
|
|
|
+ this.image = data.img
|
|
|
+ console.log(3,data.add_time)
|
|
|
+ let obj = this;
|
|
|
+ let name = obj.name
|
|
|
+ let signDate = getRecTime(obj.signDate,'yyyy-MM-dd')
|
|
|
+
|
|
|
+ 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 ctxBg1 = '/index/static/img/graduation.jpg'
|
|
|
+ let ctxBg = '/index/static/img/graduationB.jpg'; //画布背景
|
|
|
+ let context = uni.createCanvasContext('qrShareBox');
|
|
|
+ // 插入背景图片
|
|
|
+ context.drawImage(ctxBg1, 0, 0, obj.canWeidth , 500*obj.ratio);
|
|
|
+ context.drawImage(obj.image, 60 * obj.ratio, 205 * obj.ratio,150*obj.ratio , 200*obj.ratio);
|
|
|
+ context.drawImage(ctxBg, 0, 640*obj.ratio, obj.canWeidth , 500*obj.ratio);
|
|
|
+ // // 插入文字
|
|
|
+ context.setFontSize(22 * obj.ratio);
|
|
|
+ context.fillText(obj.name,340 * obj.ratio,205 * obj.ratio)
|
|
|
+ context.fillText(obj.sex,540 * obj.ratio,205 * obj.ratio)
|
|
|
+ context.fillText(obj.cardId,370 * obj.ratio,280 * obj.ratio)
|
|
|
+ context.fillText(obj.no,370 * obj.ratio,345 * obj.ratio)
|
|
|
+ context.fillText(signDate,370 * obj.ratio,410 * obj.ratio)
|
|
|
+ context.fillText("三 年",560 * obj.ratio,410 * obj.ratio)
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady() {},
|
|
|
+ computed: {
|
|
|
+ ...mapState('user', ['hasLogin', 'userInfo'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('user', ['setUserInfo']),
|
|
|
+ // 分享
|
|
|
+ IndexShare() {
|
|
|
+ let obj = this;
|
|
|
+ let item = {
|
|
|
+ link: 'http://ez.igxys.com/index/#/pages/train/sign?type=' + obj.type + '&id=' + obj.id + '&uid=' + obj.userInfo.uid, // 分享链接
|
|
|
+ imgUrl: 'http://ez.igxys.com/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;'");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ imgsub() {
|
|
|
+ console.log('imgsub');
|
|
|
+ upload({
|
|
|
+ filename: ''
|
|
|
+ }).then(data => {
|
|
|
+ this.image = data[0].url;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 选择性别
|
|
|
+ bindPickerSex: function(e) {
|
|
|
+ console.log(this.array[e.target.value]);
|
|
|
+ this.sex = this.array[e.target.value];
|
|
|
+ this.index = e.target.value + 1;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ let obj = this;
|
|
|
+ let data = {};
|
|
|
+ if (obj.type == 0) {
|
|
|
+ if (!obj.name) {
|
|
|
+ obj.$api.msg('请填写姓名！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!obj.sex){
|
|
|
+ obj.$api.msg('请选择性别！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!obj.card_id){
|
|
|
+ obj.$api.msg('请输入身份证号！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let reg1 = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
|
|
|
+ if (!reg1.test(obj.card_id)) {
|
|
|
+ obj.$api.msg('请填写正确的身份证信息');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!obj.phone) {
|
|
|
+ obj.$api.msg('请输入联系方式！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!obj.addr) {
|
|
|
+ obj.$api.msg('请输入联系地址！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!obj.image){
|
|
|
+ obj.$api.msg('请上传照片！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if( obj.sex == '男'){
|
|
|
+ obj.sex = 0
|
|
|
+ }else {
|
|
|
+ obj.sex = 1
|
|
|
+ }
|
|
|
+ data = {
|
|
|
+ name: obj.name,
|
|
|
+ work: obj.addr,
|
|
|
+ phone: obj.phone,
|
|
|
+ card_id: obj.card_id,
|
|
|
+ img: obj.image,
|
|
|
+ sex: obj.sex,
|
|
|
+ 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.sex){
|
|
|
+ obj.$api.msg('请选择负责人性别！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!obj.card_id){
|
|
|
+ obj.$api.msg('请输入负责人身份证号！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let reg1 = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
|
|
|
+ if (!reg1.test(obj.card_id)) {
|
|
|
+ obj.$api.msg('请填写正确的身份证信息');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!obj.companyphone) {
|
|
|
+ obj.$api.msg('请输入联系方式！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!obj.num) {
|
|
|
+ obj.$api.msg('请输入参加培训人数！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!obj.image){
|
|
|
+ obj.$api.msg('请上传照片！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ data = {
|
|
|
+ company: obj.company,
|
|
|
+ address: obj.address,
|
|
|
+ name: obj.companyName,
|
|
|
+ phone: obj.companyphone,
|
|
|
+ num: obj.num,
|
|
|
+ card_id: obj.card_id,
|
|
|
+ img: obj.image,
|
|
|
+ sex: obj.sex,
|
|
|
+ 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%;
|
|
|
+ }
|
|
|
}
|
|
|
- .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;
|
|
|
- }
|
|
|
+.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;
|
|
|
+}
|
|
|
+.upload-right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .upload-img {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-right{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ border: 2rpx solid #979797;
|
|
|
+ padding: 0rpx 15rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
</style>
|
