101 lines
3.5 KiB
HTML
101 lines
3.5 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<script src="${base!}/assets/platform/js/jquery.qrcode.min.js"></script>
|
|
|
|
<script src="${base!}/assets/platform/js/jr-qrcode.js"></script>
|
|
<div id="app" v-cloak>
|
|
<van-nav-bar title="申请二维码" left-arrow placeholder fixed @click-left="pjaxReplace('/mobile/index')" safe-area-inset-top></van-nav-bar>
|
|
|
|
<div style="width: 100%; position: fixed; top: 50%; transform: translateY(-50%)">
|
|
<div id="qrcode" style="width: 70%; left: 0; right: 0; margin: auto"></div>
|
|
<van-cell class="mt10">
|
|
<template #icon>
|
|
<van-icon class="van-cell__left-icon" name="clock" color="red"></van-icon>
|
|
</template>
|
|
<template #title>
|
|
<div style="font-weight: bold; font-size: 15px">二维码有效期截止时间</div>
|
|
</template>
|
|
</van-cell>
|
|
|
|
<van-cell title="二维码有效期截止时间" is-link :value="dateTimeValue" @click="openDateTime"></van-cell>
|
|
</div>
|
|
|
|
<van-popup v-model="dateTimeShow" position="bottom" :style="{ height: '50%' }">
|
|
<van-datetime-picker
|
|
class="mt10"
|
|
v-model="currentDate"
|
|
type="datehour"
|
|
title="选择完整时间"
|
|
:min-date="minDate"
|
|
:max-date="maxDate"
|
|
@cancel="dateTimeShow = false"
|
|
@confirm="confirm"
|
|
:formatter="formatter"
|
|
></van-datetime-picker>
|
|
</van-popup>
|
|
</div>
|
|
|
|
<script>
|
|
const vue = new Vue({
|
|
el: "#app",
|
|
mixins: [mobileMixins],
|
|
data() {
|
|
return {
|
|
minDate: new Date(),
|
|
maxDate: new Date(2025, 10, 1),
|
|
currentDate: new Date(new Date().getTime() + 60 * 60 * 1000),
|
|
dateTimeShow: false,
|
|
dateTime: "",
|
|
dateTimeValue: moment(new Date(new Date().getTime() + 60 * 60 * 1000)).format("YYYY-MM-DD HH")
|
|
}
|
|
},
|
|
methods: {
|
|
formatter(type, val) {
|
|
if (type === "year") {
|
|
return val + "年"
|
|
}
|
|
if (type === "month") {
|
|
return val + "月"
|
|
}
|
|
if (type === "day") {
|
|
return val + "日"
|
|
}
|
|
if (type === "hour") {
|
|
return val + "时"
|
|
}
|
|
return val
|
|
},
|
|
confirm(val) {
|
|
this.initQrcode()
|
|
this.dateTimeShow = false
|
|
this.dateTimeValue = moment(val).format("YYYY-MM-DD HH")
|
|
},
|
|
openDateTime() {
|
|
this.dateTimeShow = true
|
|
},
|
|
initQrcode() {
|
|
this.$nextTick(() => {
|
|
$("#qrcode").html("")
|
|
$("#qrcode").qrcode({
|
|
//设置css
|
|
render: "canvas", //二维码的生成方式
|
|
width: $("#qrcode").width(), //生成二维码的宽度
|
|
height: $("#qrcode").width(), //生成二维码的高度
|
|
text: APP_DOMAIN + "/mobile/self/applyUser?currentDate=" + this.currentDate.valueOf(),
|
|
correctLevel: 3 //容错级别，默认为2，最高为3，为了让用户扫码最快，容错级别应当设为最低
|
|
})
|
|
})
|
|
}
|
|
},
|
|
async created() {
|
|
this.initQrcode()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|