| xqd
@@ -65,6 +65,15 @@
|
|
|
height: 0.76rem;
|
|
|
border-radius: 37px;
|
|
|
}
|
|
|
+ .certificate-image {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ z-index: 56;
|
|
|
+ width: 6rem;
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
</style>
|
|
|
{/block}
|
|
|
{block name="content"}
|
| xqd
@@ -143,6 +152,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
+ <!-- 遮罩层 -->
|
|
|
+ <div :class="{ mask: dialogShow || password || is_poster || imgSrc || !open }" @touchmove.prevent @click="maskClick"></div>
|
|
|
<!-- 支付弹窗 -->
|
|
|
<pay-dialog :open.sync="payDialogOpen" :money="money" :now_money="now_money" :special_id="planinfo.id" :link_pay_uid="link_pay_uid"
|
|
|
:pay_type_num="pay_type_num" :pink-id="pinkId" :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue"
|
| xqd
@@ -150,13 +161,15 @@
|
|
|
</pay-dialog>
|
|
|
<!-- 登录弹窗 -->
|
|
|
<base-login :login-show="loginShow" :site-name="site_name" @login-close="loginClose"></base-login>
|
|
|
+ <!-- 完课证书 -->
|
|
|
+ <img v-if="imgSrc" :src="imgSrc" class="certificate-image">
|
|
|
</div>
|
|
|
{/block}
|
|
|
{block name="foot"}
|
|
|
<script>
|
|
|
require(['vue', 'store', 'helper', '{__WAP_PATH}zsff/js/quick.js',
|
|
|
- 'components/pay-dialog/index', 'components/base-login/index'],
|
|
|
- function (Vue, store, $h, quick, PayDialog, BaseLogin) {
|
|
|
+ 'components/pay-dialog/index', 'components/base-login/index', 'axios', 'moment'],
|
|
|
+ function (Vue, store, $h, quick, PayDialog, BaseLogin, axios, moment) {
|
|
|
var planinfo = {$planinfo};
|
|
|
var steps = {$steps};
|
|
|
var itemsList = {$itemsList};
|
| xqd
@@ -198,11 +211,17 @@
|
|
|
isMember:isMember,
|
|
|
site_name:site_name,
|
|
|
orderId:'',
|
|
|
+ imgSrc:'',
|
|
|
+ dialogShow:false,
|
|
|
+ password:'',
|
|
|
+ is_poster:'',
|
|
|
+
|
|
|
},
|
|
|
mounted: function () {
|
|
|
this.$nextTick(function () {
|
|
|
this.init();
|
|
|
});
|
|
|
+ this.getInspect();
|
|
|
},
|
|
|
methods: {
|
|
|
init: function () {
|
| xqd
@@ -211,6 +230,14 @@
|
|
|
study: function (){
|
|
|
return window.location.href=$h.U({ c: 'studyplan', a: 'gotoStudy', q: {id: this.planinfo.id } });
|
|
|
},
|
|
|
+ // 点击遮罩层
|
|
|
+ maskClick: function () {
|
|
|
+ this.dialogShow = false;
|
|
|
+ this.password = false;
|
|
|
+ this.is_poster = false;
|
|
|
+ this.open = true;
|
|
|
+ this.imgSrc = '';
|
|
|
+ },
|
|
|
//关闭登录
|
|
|
loginClose: function (val) {
|
|
|
this.loginShow = false;
|
| xqd
@@ -341,6 +368,131 @@
|
|
|
vm.loginShow = true;
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ // 是否可以发放证书
|
|
|
+ getInspect: function () {
|
|
|
+ var that = this;
|
|
|
+ $h.loadFFF();
|
|
|
+ axios.get($h.U({
|
|
|
+ c: 'studyplan',
|
|
|
+ a: 'inspect',
|
|
|
+ q: {
|
|
|
+ plan_id: this.planinfo.id
|
|
|
+ }
|
|
|
+ })).then(function (res) {
|
|
|
+ $h.loadClear();
|
|
|
+ if (200 == res.data.code) {
|
|
|
+ layer.confirm('恭喜您已达到证书发放标准,是否领取?', {
|
|
|
+ title: false,
|
|
|
+ closeBtn: false,
|
|
|
+ btn: ['领取', '取消']
|
|
|
+ }, function (index) {
|
|
|
+ that.getCertificate();
|
|
|
+ layer.close(index);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(function () {
|
|
|
+ $h.loadClear();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 领取证书
|
|
|
+ getCertificate: function () {
|
|
|
+ $h.loadFFF();
|
|
|
+ store.baseGet($h.U({
|
|
|
+ c: 'studyplan',
|
|
|
+ a: 'getTheCertificate',
|
|
|
+ q: {
|
|
|
+ plan_id: this.planinfo.id
|
|
|
+ }
|
|
|
+ }), function (res) {
|
|
|
+ $h.loadClear();
|
|
|
+ layer.msg('领取成功<br>证书制作中…', function () {
|
|
|
+ this.getCertificateInfo(res.data.msg);
|
|
|
+ }.bind(this));
|
|
|
+ }.bind(this), function () {
|
|
|
+ $h.loadClear();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取证书信息
|
|
|
+ getCertificateInfo: function (id) {
|
|
|
+ $h.loadFFF();
|
|
|
+ store.baseGet($h.U({
|
|
|
+ c: 'topic',
|
|
|
+ a: 'viewCertificate',
|
|
|
+ q: {
|
|
|
+ id: id,
|
|
|
+ obtain: 3
|
|
|
+ }
|
|
|
+ }), function (res) {
|
|
|
+ $h.loadClear();
|
|
|
+ this.createCertificate(res.data.data);
|
|
|
+ }.bind(this), function (err) {
|
|
|
+ $h.loadClear();
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 加载图片
|
|
|
+ loadImage: function (path) {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ var image = new Image();
|
|
|
+ image.crossOrigin = 'anonymous';
|
|
|
+ image.onload = function () {
|
|
|
+ resolve(image);
|
|
|
+ };
|
|
|
+ image.onerror = function () {
|
|
|
+ reject('error-image');
|
|
|
+ };
|
|
|
+ image.src = path + '?' + new Date().getTime();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 生成证书图片
|
|
|
+ createCertificate: function (certificate) {
|
|
|
+ $h.loadFFF();
|
|
|
+ Promise.all([
|
|
|
+ this.loadImage(certificate.certificate.background),
|
|
|
+ this.loadImage(certificate.certificate.qr_code)
|
|
|
+ ]).then(function (images) {
|
|
|
+ var canvas = document.createElement('canvas');
|
|
|
+ var context = canvas.getContext('2d');
|
|
|
+
|
|
|
+ canvas.width = images[0].width;
|
|
|
+ canvas.height = images[0].height;
|
|
|
+
|
|
|
+ context.drawImage(images[0], 0, 0);
|
|
|
+ context.drawImage(images[1], 220, 557, 160, 160);
|
|
|
+
|
|
|
+ context.fillStyle = 'rgba(255, 255, 255, 1)';
|
|
|
+ context.fillRect(220, 724, 160, 36);
|
|
|
+
|
|
|
+ context.font = '20px sans-serif';
|
|
|
+ context.textAlign = 'center';
|
|
|
+ context.fillStyle = '#666666';
|
|
|
+ context.fillText('长按二维码查看', 300, 748);
|
|
|
+
|
|
|
+ context.font = 'bold 34px sans-serif';
|
|
|
+ context.fillStyle = '#29466D';
|
|
|
+ context.fillText(certificate.nickname, 300, 296);
|
|
|
+
|
|
|
+ context.font = '24px sans-serif';
|
|
|
+ context.fillText('颁发时间:' + moment(certificate.add_time * 1000).format('YYYY.MM.DD'), 300, 481);
|
|
|
+
|
|
|
+ context.font = '28px sans-serif';
|
|
|
+ context.textAlign = 'start';
|
|
|
+ context.fillStyle = '#333333';
|
|
|
+
|
|
|
+ for (var i = Math.ceil(certificate.certificate.explain.length % 16); i--;) {
|
|
|
+ context.fillText(certificate.certificate.explain.substr(i * 16, 16), 83, i * 40 + 370);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.imgSrc = canvas.toDataURL('image/jpeg');
|
|
|
+ canvas = null;
|
|
|
+ $h.loadClear();
|
|
|
+ }.bind(this)).catch(function (error) {
|
|
|
+ $h.loadClear();
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
});
|
|
|
});
|