|
|
@@ -1 +1,307 @@
|
|
|
-<?php
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+ <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>
|
|
|
+ <!-- CSRF Token -->
|
|
|
+ <meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
+
|
|
|
+ <title>入库区终端-客户预约</title>
|
|
|
+ <link href="{{ mix('css/app.css') }}" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+ html{
|
|
|
+ background: white;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .h-20{
|
|
|
+ height: 20%;
|
|
|
+ }
|
|
|
+ .h-40{
|
|
|
+ height: 40%;
|
|
|
+ }
|
|
|
+ .h-5{
|
|
|
+ height: 5%;
|
|
|
+ }
|
|
|
+ .text-line{
|
|
|
+ line-height: 1;
|
|
|
+ font-size: 1.5em;
|
|
|
+ }
|
|
|
+ #msg{
|
|
|
+ width:266px;
|
|
|
+ position: fixed;
|
|
|
+ z-index:999;
|
|
|
+ top: 49%;
|
|
|
+ margin-top:-80px;
|
|
|
+ left:50%;
|
|
|
+ margin-left:-133px;
|
|
|
+ background:#fff;
|
|
|
+ box-shadow:5px 5px 8px #999;
|
|
|
+ font-size:17px;
|
|
|
+ color:#666;
|
|
|
+ border:1px solid #f8f8f8;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 2rem;
|
|
|
+ display:inline-block;
|
|
|
+ padding-bottom:20px;
|
|
|
+ border-radius:5px;
|
|
|
+ }
|
|
|
+ #msg_top {
|
|
|
+ background: #f8f8f8;
|
|
|
+ padding: 5px 15px 5px 20px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ #msg_top span{
|
|
|
+ font-size:22px;
|
|
|
+ float:right;
|
|
|
+ cursor:pointer;
|
|
|
+ }
|
|
|
+ #msg_cont{
|
|
|
+ padding:15px 20px 20px;
|
|
|
+ text-align:left;
|
|
|
+ }
|
|
|
+ #msg_clear{
|
|
|
+ background:#8fc31f;
|
|
|
+ float:right;
|
|
|
+ }
|
|
|
+ #msg_success{
|
|
|
+ background:#2a9055;
|
|
|
+ float:right;
|
|
|
+ }
|
|
|
+ .msg_btn{
|
|
|
+ display:inline-block;
|
|
|
+ color:#fff;
|
|
|
+ padding:1px 15px;
|
|
|
+ border-radius:2px;
|
|
|
+ margin-right:15px;
|
|
|
+ cursor:pointer;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body onload="initLoad()" class="h-100">
|
|
|
+ <div class="container-fluid h-100 d-none" id="container">
|
|
|
+ <div class="offset-1 h1 font-weight-bold h-100">
|
|
|
+ <div class="h-5"></div>
|
|
|
+ <div class="w-100 h-40">
|
|
|
+ <div class="row h-20 mt-0" v-for="(data,i) in list" :class="data.is_delivery ? 'text-success' : 'text-primary'" v-if="i<5">
|
|
|
+ <div class="col-3 text-line">@{{ data.license_plate_number }}</div>
|
|
|
+ <div class="col-2 text-line">@{{ data.driver_name }}</div>
|
|
|
+ <div class="col-3 text-line">@{{ data.driver_phone }}</div>
|
|
|
+ <div class="col-2 text-line">
|
|
|
+ <span v-if="data.is_delivery">已送达</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row h-40 mt-0">
|
|
|
+ <div class="col-5">
|
|
|
+ <div class="h-20 mt-0 row" v-for="(data,i) in list" :class="data.is_delivery ? 'text-success' : 'text-primary'" v-if="i>4">
|
|
|
+ <div class="col-7 text-line">@{{ data.license_plate_number }}</div>
|
|
|
+ <div class="col-5 text-line">
|
|
|
+ <span class="ml-3">@{{ data.driver_name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-6">
|
|
|
+ <div class="mt-4" id="code"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script src="{{ mix('js/app.js') }}"></script>
|
|
|
+<script src="{{ mix('js/utilities/qrcode.js') }}"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+ //初始化询问
|
|
|
+ function initLoad() {
|
|
|
+ alert("是否需要开启全屏?");
|
|
|
+ }
|
|
|
+ //重绘弹窗样式
|
|
|
+ function alert(e){
|
|
|
+ $("body").append('<div id="msg"><div id="msg_top">设置<span class="msg_close">×</span></div><div id="msg_cont">'+e+
|
|
|
+ '</div><div class="msg_close msg_btn" id="msg_clear">取消</div><div class="msg_close msg_btn" id="msg_success" onclick="launchFullScreen()">确定</div></div>');
|
|
|
+ $(".msg_close").click(function (){
|
|
|
+ $("#msg").remove();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //全屏
|
|
|
+ function launchFullScreen() {
|
|
|
+ let element = window.document.body;
|
|
|
+ if (element.requestFullscreen) {
|
|
|
+ element.requestFullscreen();
|
|
|
+ } else if (element.mozRequestFullScreen) {
|
|
|
+ element.mozRequestFullScreen();
|
|
|
+ } else if (element.webkitRequestFullscreen) {
|
|
|
+ element.webkitRequestFullscreen();
|
|
|
+ } else if (element.msRequestFullscreen) {
|
|
|
+ element.msRequestFullscreen();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ new Vue({
|
|
|
+ el:"#container",
|
|
|
+ data:{
|
|
|
+ list:[],
|
|
|
+ key:"",
|
|
|
+ baseUrl:"{{url('store/deliveryAppointment/delivery?k=')}}",
|
|
|
+ QrCode : null,
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ $("#container").removeClass("d-none");
|
|
|
+ this._initData();
|
|
|
+ this._getKey();
|
|
|
+ this._broadcast();
|
|
|
+ setTimeout(()=>{
|
|
|
+ //刷新密匙
|
|
|
+ this._getKey()
|
|
|
+ },this._getDiffDate());
|
|
|
+ setInterval(()=>{
|
|
|
+ this._createQrCode(this.baseUrl+this.base64());
|
|
|
+ },60000);
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ _broadcast(){
|
|
|
+ initEcho();
|
|
|
+ window.Echo.channel('{{config('database.redis.options.prefix')}}delivery').listen('.car',(res)=>{
|
|
|
+ if (this.list.length>=10) this.list = this.list.splice(0,9);
|
|
|
+ res = res.delivery;
|
|
|
+ if (this.list.every((data,i)=>{
|
|
|
+ if (data.license_plate_number === res.license_plate_number){
|
|
|
+ this.$set(this.list[i],"is_delivery",true);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }))this.list.unshift({
|
|
|
+ "license_plate_number" : res.license_plate_number,
|
|
|
+ "driver_name" : res.driver_name,
|
|
|
+ "driver_phone" : res.driver_phone,
|
|
|
+ "is_delivery" : true,
|
|
|
+ });
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.list.some((data,i)=>{
|
|
|
+ if (data.license_plate_number === res.license_plate_number) {
|
|
|
+ this.$set(this.list[i],"is_delivery",false);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },1800000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //初始化数据
|
|
|
+ _initData(){
|
|
|
+ let url = "{{url('store/deliveryAppointment/getExhibitionList')}}";
|
|
|
+ window.tempTip.postBasicRequest(url,{},res=>{
|
|
|
+ if (res.list){
|
|
|
+ let data = res.list;
|
|
|
+ data.forEach((item,i)=>{
|
|
|
+ if (item.diff){
|
|
|
+ data[i].is_delivery = true;
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.list.some((data,i)=>{
|
|
|
+ if (data.license_plate_number === item.license_plate_number) {
|
|
|
+ this.$set(this.list[i],"is_delivery",false);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },item.diff);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.list = data;
|
|
|
+ }
|
|
|
+ //判断下次刷新数据的时间
|
|
|
+ let refreshVal = res.refresh ? res.refresh : this._getDiffDate();
|
|
|
+ setTimeout(()=>{
|
|
|
+ this._initData();
|
|
|
+ },refreshVal);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取密匙
|
|
|
+ _getKey(){
|
|
|
+ let url = "{{url('store/deliveryAppointment/getKey')}}";
|
|
|
+ window.tempTip.postBasicRequest(url,{},res=>{
|
|
|
+ this.key = res;
|
|
|
+ this._createQrCode(this.baseUrl+this.base64());
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //生成二维码
|
|
|
+ _createQrCode(text){
|
|
|
+ if (!this.QrCode){
|
|
|
+ let dom = document.getElementById("code");
|
|
|
+ let height = dom.parentNode.offsetHeight<dom.parentNode.offsetWidth ? dom.parentNode.offsetHeight : dom.parentNode.offsetWidth;
|
|
|
+ this.QrCode = new QRCode(dom,{
|
|
|
+ text: text,
|
|
|
+ width: height*1.4,
|
|
|
+ height: height,
|
|
|
+ colorDark : "#000000",
|
|
|
+ colorLight : "#ffffff",
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }else{
|
|
|
+ this.QrCode.clear();
|
|
|
+ this.QrCode.makeCode(text);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取当前时间距离明天0点的时间差 毫秒
|
|
|
+ _getDiffDate(){
|
|
|
+ let now = new Date();
|
|
|
+ let dateTime = now.getTime();
|
|
|
+ let yy = now.getFullYear();
|
|
|
+ let mm = now.getMonth() + 1;
|
|
|
+ let dd = now.getDate();
|
|
|
+ let clock = yy + "-";
|
|
|
+ if(mm < 10) clock += "0";
|
|
|
+ clock += mm + "-";
|
|
|
+ if(dd < 10) clock += "0";
|
|
|
+ clock += dd+" 00:00:00";
|
|
|
+ let timestamp = new Date(clock).getTime()+(24*60*60*1000);
|
|
|
+ return timestamp-dateTime;
|
|
|
+ },
|
|
|
+ //加密
|
|
|
+ base64(){
|
|
|
+ let _keyStr= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
|
|
+ let output = "";
|
|
|
+ let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
|
|
|
+ let i = 0;
|
|
|
+ let str = Math.floor(new Date().getTime()/1000).toString();
|
|
|
+ str = str.slice(str.length-8);
|
|
|
+ let input = this._utf8_encode(this.key+str);
|
|
|
+ while (i < input.length) {
|
|
|
+ chr1 = input.charCodeAt(i++);
|
|
|
+ chr2 = input.charCodeAt(i++);
|
|
|
+ chr3 = input.charCodeAt(i++);
|
|
|
+ enc1 = chr1 >> 2;
|
|
|
+ enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
|
|
|
+ enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
|
|
|
+ enc4 = chr3 & 63;
|
|
|
+ if (isNaN(chr2)) {
|
|
|
+ enc3 = enc4 = 64;
|
|
|
+ } else if (isNaN(chr3)) {
|
|
|
+ enc4 = 64;
|
|
|
+ }
|
|
|
+ output = output +
|
|
|
+ _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
|
|
|
+ _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
|
|
|
+ }
|
|
|
+ return output;
|
|
|
+ },
|
|
|
+ _utf8_encode (string) {
|
|
|
+ string = string.replace(/\r\n/g,"\n");
|
|
|
+ let utftext = "";
|
|
|
+ for (let n = 0; n < string.length; n++) {
|
|
|
+ let c = string.charCodeAt(n);
|
|
|
+ if (c < 128) {
|
|
|
+ utftext += String.fromCharCode(c);
|
|
|
+ } else if((c > 127) && (c < 2048)) {
|
|
|
+ utftext += String.fromCharCode((c >> 6) | 192);
|
|
|
+ utftext += String.fromCharCode((c & 63) | 128);
|
|
|
+ } else {
|
|
|
+ utftext += String.fromCharCode((c >> 12) | 224);
|
|
|
+ utftext += String.fromCharCode(((c >> 6) & 63) | 128);
|
|
|
+ utftext += String.fromCharCode((c & 63) | 128);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return utftext;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</html>
|