张雄 2 years ago
parent 282bd83f97
commit 1c6901e707

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>

@ -44,7 +44,7 @@
<div class="num" v-if="selected_seats.length">{{ selected_seats.length }}</div>
</div>
</div>
<button class="button" :disabled="!total_price" @tap="make_order"></button>
<button ref="navigate" class="button" id="toNavigate" :disabled="!total_price">下一</button>
</div>
</div>
<!-- <div>{{scaleNum}}/{{selectedPos.x}},{{selectedPos.y}}/{{currentSeat.x}},{{currentSeat.y}}</div> -->
@ -52,6 +52,7 @@
</template>
<script>
import * as uni from '@/uniWebview.js'
import {getMethod} from "@/request"
import seatImg from './seatImg';
export default {
@ -100,7 +101,12 @@ export default {
this.canvasHeight = res.data.max_y * 22;
})
this.initData();
this.initTouch();
this.$nextTick(() => {
document.addEventListener('UniAppJSBridgeReady',function() {
document.querySelector('.button').addEventListener('click', this.make_order);
})
})
console.log('ver12')
},
methods: {
async initData() {
@ -147,9 +153,6 @@ export default {
ctx.fillRect(x * 20, y * 20, 16, 16);
ctx.fill();
ctx.stroke();
},
initTouch() {
},
chooseSeat(e) {
let select_position = {
@ -199,7 +202,7 @@ export default {
this.initCanvas(this.ctx)
}
},
//
//
price_cac(selected_seats) {
const p = [];
const grade_price = [];
@ -243,7 +246,6 @@ export default {
this.seat_data = res.data;
this.drama_id = res.data.show_info.drama_id;
this.creatCanvas();
console.log(true);
}
})
},
@ -263,7 +265,16 @@ export default {
this.price_cac(this.selected_seats);
},
make_order() {
var selected_seats = this.selected_seats;
var tid = '';
selected_seats.forEach((v, k) => {
tid = tid + ',' + String(v.ticket_id);
});
tid = tid.substring(1);
console.log(uni)
uni.navigateTo({
url: '/pages/make_order/make_order/make_order?tid=' + tid + '&drama_id=' + this.drama_id,
});
}
}
}

@ -1,335 +0,0 @@
<template>
<div style="width: 100%;height: 100%">
<div class="seat_grade">
<div
:class="'seat_grade_info ' + (item.tkt_num == 0 ? 'null_tic' : '') + ' ' + (select_grade == item.grade ? 'select' : '')"
@click="select_gradeFun(item.tkt_num, item.grade)"
v-for="(item, index) in seat_data.grade_list" :key="index">
<img src="../static/images/seats/A.png" style="width:21px;height:21px;margin-left: 20rpx;">
<div style="margin: 0 10rpx 0 10rpx">¥{{ item.price }}</div>
</div>
</div>
<div class="canvasView" @click="chooseSeat">
<canvas :style="'height:'+maxCanvasH * scaleNum +'px;width:'+ maxCanvasW * scaleNum +'px;'"
type="2d" id="canvas" canvas-id="myCanvas">
您的浏览器版本过低,不支持canvas,请升级浏览器或使用chrome浏览器
</canvas>
</div>
<div>{{scaleNum}}/{{selectedPos.x}},{{selectedPos.y}}/{{currentSeat.x}},{{currentSeat.y}}</div>
</div>
</template>
<script>
import {getMethod} from "@/request"
import MinaTouch from './mina-touch';
import seatImg from './seatImg';
export default {
data() {
return {
drama_id: null,
seat_data: {},
screenWidth: 412,
screenHeight: 915,
canvasTopGap: 175,
canvasBottomGap: 64,
ctx: null,
canvasImg: null,
select_grade: '',
selected_seats: [],
total_price: '',
max_select: 6,
//
scaleNum: 1,
// ()
scaleNumTwice: 1,
//
move: {
x: 16,
y: 80
},
scaleShift: {
x: 0,
y: 0
},
tapTimeGap: true,
timer: 0,
maxCanvasW: 800,
maxCanvasH: 800,
multiplier: 60,
currentSeat: {},
selectedPos: {}
}
},
mounted() {
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
this.initData();
this.creatCanvas();
this.initTouch();
},
methods: {
initData() {
let seat_data = {
grade_list: [
{grade: "E", price: 80, isVIP: 0, remark: "", tkt_num: 0, is_discount: 0},
{grade: "D", price: 180, isVIP: 0, remark: "", tkt_num: 8, is_discount: 1},
{grade: "C", price: 280, isVIP: 0, remark: "", tkt_num: 50, is_discount: 1},
{grade: "B", price: 380, isVIP: 0, remark: "", tkt_num: 30, is_discount: 1},
{grade: "A", price: 480, isVIP: 0, remark: "", tkt_num: 21, is_discount: 1}
],
grade_price: {
A: {1: "480.00", 2: "720.00", 3: "1200.00", 4: "1440.00", 5: "1920.00", 6: "2160.00"},
B: {1: "380.00", 2: "570.00", 3: "950.00", 4: "1140.00", 5: "1520.00", 6: "1710.00"},
C: {1: "280.00", 2: "420.00", 3: "700.00", 4: "840.00", 5: "1120.00", 6: "1260.00"},
D: {1: "180.00", 2: "270.00", 3: "450.00", 4: "540.00", 5: "720.00", 6: "810.00"},
E: {1: "80.00", 2: "160.00", 3: "240.00", 4: "320.00", 5: "400.00", 6: "480.00"}
},
info: "180以上价位第二张半价",
is_one: 1,
max_x: 29,
max_y: 18,
next_show: 82460,
prev_show: 82458,
seat_list: [
{ticket_id: 20745128, drama_id: 82459, x: 15, y: 1, row: 1, col: 1, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排1号",ticket_status: 1},
{ticket_id: 20745129, drama_id: 82459, x: 14, y: 1, row: 1, col: 3, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排3号",ticket_status: 0},
{ticket_id: 20745130, drama_id: 82459, x: 13, y: 1, row: 1, col: 5, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排5号",ticket_status: 0},
{ticket_id: 20745131, drama_id: 82459, x: 12, y: 1, row: 1, col: 7, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排7号",ticket_status: 0},
{ticket_id: 20745132, drama_id: 82459, x: 11, y: 1, row: 1, col: 9, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排9号",ticket_status: 0},
{ticket_id: 20745133, drama_id: 82459, x: 10, y: 1, row: 1, col: 11, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排11号",ticket_status: 1},
{ticket_id: 20745134, drama_id: 82459, x: 9, y: 1, row: 1, col: 13, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排13号",ticket_status: 0},
{ticket_id: 20745135, drama_id: 82459, x: 8, y: 1, row: 1, col: 15, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排15号",ticket_status: 1},
{ticket_id: 20745142, drama_id: 82459, x: 15, y: 2, row: 2, col: 1, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层2排1号",ticket_status: 0}
],
show_info: {
cycle_id: 4957,
drama_id: 82459,
show_date: "2022.10.22 周六 14:30",
theater_id: 466,
third_event_id: 11934007015306
},
theater_info: {
abb_id: 246,
city_id: 383,
cycle: 2,
is_assistant_stage: 0,
stage_direction: 1,
}
};
let maxCanvasW = 45 * (seat_data.max_x + 1);
let maxCanvasH = 45 * (seat_data.max_y + 1);
if (this.screenWidth < maxCanvasW) {
this.scaleNum = (this.screenWidth / maxCanvasW).toFixed(3) //
this.scaleNumTwice = (this.screenWidth / 45 / 20).toFixed(3)
};
this.drama_id = 82459;
this.seat_data = seat_data;
this.maxCanvasW = maxCanvasW;
this.maxCanvasH = maxCanvasH;
this.selected_seats = [];
this.total_price = '';
this.select_grade = '';
},
creatCanvas() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.width = this.maxCanvasW;
ctx.height = this.maxCanvasH;
canvas.width = this.maxCanvasW;
canvas.height = this.maxCanvasH;
ctx.scale(this.scaleNum * window.devicePixelRatio * 1.75, this.scaleNum * window.devicePixelRatio * 1.75)
this.ctx = ctx;
this.initCanvas(ctx);
},
initCanvas(ctx) {
ctx.clearRect(0, 0, this.maxCanvasW, this.maxCanvasH)
this.seat_data.seat_list.forEach((item) => {
if (this.select_grade != '') {
if (item.ticket_status === 0 && this.select_grade === item.grade) {
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg[item.grade].color)
} else {
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg['00'].color)
}
} else {
if (item.ticket_status === 0) {
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg[item.grade].color)
} else {
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg['00'].color)
}
}
});
if (this.selected_seats.length > 0) {
this.selected_seats.forEach((v, k) => {
ctx.clearRect(v.x * this.multiplier, v.y * this.multiplier, 60, 50)
this.drawSeat(this.ctx, v.x * this.multiplier, v.y * this.multiplier, seatImg['01'].color)
})
};
},
drawSeat(ctx, x, y, fillColor) {
ctx.beginPath();
ctx.fillStyle = fillColor
ctx.lineWidth = 0.5;
ctx.arc(20 + x, 10 + y, 10, Math.PI, 1.5 * Math.PI)
ctx.lineTo(40 + x, y)
ctx.arc(40 + x, 10 + y, 10, 1.5 * Math.PI, 2 * Math.PI)
ctx.lineTo(50 + x, 20 + y)
ctx.arc(50 + x, 25 + y, 5, 1.5 * Math.PI, 2 * Math.PI)
ctx.lineTo(55 + x, 45 + y)
ctx.arc(47 + x, 45 + y, 8, 0, 0.5 * Math.PI)
ctx.lineTo(13 + x, 53 + y)
ctx.arc(13 + x, 45 + y, 8, 0.5 * Math.PI, Math.PI)
ctx.lineTo(5 + x, 25 + y)
ctx.arc(10 + x, 25 + y, 5, Math.PI, 1.5 * Math.PI)
ctx.lineTo(10 + x, 10 + y)
ctx.fill()
ctx.arc(10 + x, 25 + y, 5, 1.5 * Math.PI, 2 * Math.PI)
ctx.lineTo(15 + x, 41 + y)
ctx.arc(17 + x, 41 + y, 2, Math.PI, 0.5 * Math.PI, true)
ctx.lineTo(43 + x, 43 + y)
ctx.arc(43 + x, 41 + y, 2, 0.5 * Math.PI, 0, true)
ctx.lineTo(45 + x, 25 + y)
ctx.arc(50 + x, 25 + y, 5, Math.PI, 1.5 * Math.PI);
ctx.strokeStyle = '#333333'
ctx.stroke()
},
initTouch() {
},
chooseSeat(e) {
let select_position = {
x: e.pageX,
y: e.pageY
};
let cur_seat = {
x: Math.floor((select_position.x - this.move.x) / (78 * this.scaleNum)),
y: Math.floor((select_position.y - this.move.y) / (78 * this.scaleNum))
};
this.selectedPos = select_position;
this.currentSeat = cur_seat;
if (this.selected_seats.find((v, k) => {
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
// #ifdef MP-BAIDU
// this.ctx.save()
// this.ctx.scale(this.scaleNum, this.scaleNum)
// #endif
this.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
if (this.select_grade != '' && v.grade != this.select_grade) {
this.drawSeat(this.ctx, v.x * 60, v.y * 60, seatImg['00'].color)
} else {
this.drawSeat(this.ctx, v.x * 60, v.y * 60, seatImg[v.grade].color)
}
this.ctx.restore()
this.selected_seats.splice(k, 1)
return true
}
})) {
this.price_cac(this.selected_seats)
return
};
this.seat_data.seat_list.find(v => {
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
//
if (this.selected_seats.length >= this.max_select) {
uni.showToast({
title: '单次最多选座6个',
icon: 'fail',
duration: 500
})
return
}
this.selected_seats.push(v);
this.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
this.drawSeat(this.ctx, v.x * 60, v.y * 60, seatImg['01'].color)
this.ctx.restore()
return true
}
})
this.price_cac(this.selected_seats)
},
select_gradeFun(num, grade) {
if (num !== 0) {
this.select_grade = (this.select_grade === grade) ? '' : grade;
this.initCanvas(this.ctx)
this.scaleNum = (this.screenWidth / this.maxCanvasW).toFixed(3)
this.move = {
x: 0,
y: 0
}
}
},
//
price_cac(selected_seats) {
const p = [];
const grade_price = [];
grade_price.push(this.seat_data.grade_price);
for (var x in grade_price[0]) {
let a = 0;
let arr = [];
for (let i of selected_seats) {
if (i.grade == x) {
a++;
arr.push({
row: i.row,
col: i.col,
floor: i.floor
});
}
}
if (grade_price[0][x][a]) {
p.push({
tkt_grade: x,
tkt_num: a,
tkt_pirce: grade_price[0][x][a],
tkt_loc: arr
});
}
}
let ii = 0;
for (let i in p) {
ii += parseInt(p[i].tkt_pirce);
};
this.total_price = ii
},
}
}
</script>
<style scoped>
.canvasView {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
.seat_grade {
display: flex;
flex-wrap: wrap;
color: #7b7b7b;
font-size: 24rpx;
padding: 40rpx 20rpx;
}
.seat_grade .seat_grade_info {
width: 20%;
margin: 10rpx;
display: flex;
padding: 10rpx 5rpx;
border-radius: 52rpx;
border: 2rpx solid #d2d2d2;
}
.seat_grade .null_tic {
background: #dddddd;
border: 2rpx solid #dddddd;
color: #ffffff;
}
.seat_grade .select {
background: #ffffff;
border: 2rpx solid #ff1d42;
color: #181818;
}
</style>

@ -3,6 +3,11 @@ import App from './App.vue'
import store from './store'
import router from './router/index'
import 'amfe-flexible'
import * as uni from './uniWebview'
document.addEventListener("UniAppJSBridgeReady", function() {
Vue.prototype.myUni = uni //这样全局就能使用了
});
Vue.config.productionTip = false

@ -0,0 +1 @@
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function t(e,t){return n.call(e,t)}var i=[],a=function(e,n){var t={options:{timestamp:+new Date},name:e,arg:n};if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){if("postMessage"===e){var a={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(a):window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o={type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(o):window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:t,pageId:""},"*");if(0===i.length){var r=plus.webview.currentWebview();if(!r)throw new Error("plus.webview.currentWebview() is undefined");var d=r.parent(),s="";s=d?d.id:r.id,i.push(s)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}},"__uniapp__service");else{var w=JSON.stringify(t);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(w,",").concat(JSON.stringify(i),");"))}},o={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;a("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("redirectTo",{url:encodeURI(n)})},getEnv:function(e){window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a("postMessage",e.data||{})}},r=/uni-app/i.test(navigator.userAgent),d=/Html5Plus/i.test(navigator.userAgent),s=/complete|loaded|interactive/;var w=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var u=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var g=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var v=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);for(var l,_=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},f=[function(e){if(r||d)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&s.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),o},function(e){if(v)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(w){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(u)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){return document.addEventListener("DOMContentLoaded",e),o}],m=0;m<f.length&&!(l=f[m](_));m++);l||(l={});var E="undefined"!=typeof uni?uni:{};if(!E.navigateTo)for(var b in l)t(l,b)&&(E[b]=l[b]);return E.webView=l,E}));

@ -1,7 +1,20 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = {
lintOnSave: false
}
module.exports = defineConfig({
transpileDependencies: true
assetsDir: 'static',
parallel: false,
runtimeCompiler: true,
publicPath: './',
transpileDependencies: true,
lintOnSave: false,
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
isCustomElement: tag => tag.startsWith('wx-')
}
return options
})
}
})

Loading…
Cancel
Save