zx

src/components/mina-touch.js

@@ -0,0 +1,393 @@
+const DEFAULT_OPTIONS = {
+    touchStart: function () {},
+    touchMove: function () {},
+    touchEnd: function () {},
+    touchCancel: function () {},
+    multipointStart: function () {},
+    multipointEnd: function () {},
+    tap: function () {},
+    doubleTap: function () {},
+    longTap: function () {},
+    singleTap: function () {},
+    rotate: function () {},
+    pinch: function () {},
+    pressMove: function () {},
+    swipe: function () {}
+};
+export default class MinaTouch {
+    constructor(_page, name, option = {}) {
+        this.preV = {
+            x: null,
+            y: null
+        };
+        this.pinchStartLen = null;
+        this.scale = 1;
+        this.isDoubleTap = false;
+        this.delta = null;
+        this.last = null;
+        this.now = null;
+        this.tapTimeout = null;
+        this.singleTapTimeout = null;
+        this.longTapTimeout = null;
+        this.swipeTimeout = null;
+        this.x1 = this.x2 = this.y1 = this.y2 = null;
+        this.preTapPosition = {
+            x: null,
+            y: null
+        };
+        this.lastZoom = 1;
+        this.tempZoom = 1;
+
+        try {
+            if (this._checkBeforeCreate(_page, name)) {
+                this._name = name;
+                this._option = { ...DEFAULT_OPTIONS, ...option };
+                _page[name] = this;
+
+                this._bindFunc(_page);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    _checkBeforeCreate(_page, name) {
+        if (!_page || !name) {
+            throw new Error('MinaTouch实例化时，必须传入page对象和引用名');
+        }
+
+        if (_page[name]) {
+            throw new Error('MinaTouch实例化error： ' + name + ' 已经存在page中');
+        }
+
+        return true;
+    }
+
+    _bindFunc(_page) {
+        let funcNames = ['start', 'move', 'end', 'cancel'];
+
+        for (let funcName of funcNames) {
+            _page[this._name + '.' + funcName] = this[funcName].bind(this);
+        }
+    }
+
+    start(evt) {
+        if (!evt.touches) {
+            return;
+        }
+
+        this.now = new Date();
+
+        if (evt.touches[0].pageX == null) {
+            this.x1 = evt.touches[0].x;
+        } else {
+            this.x1 = evt.touches[0].pageX;
+        }
+
+        if (evt.touches[0].pageY == null) {
+            this.y1 = evt.touches[0].y;
+        } else {
+            this.y1 = evt.touches[0].pageY;
+        }
+
+        this.delta = this.now - (this.last || this.now);
+
+        this._option.touchStart(evt);
+
+        if (this.preTapPosition.x !== null) {
+            this.isDoubleTap = this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30;
+        }
+
+        this.preTapPosition.x = this.x1;
+        this.preTapPosition.y = this.y1;
+        this.last = this.now;
+        let preV = this.preV;
+        let len = evt.touches.length;
+        if (len > 1) {
+            this._cancelLongTap();
+
+            this._cancelSingleTap();
+
+            let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
+            let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
+            let v = {
+                x: otx - this.x1,
+                y: oty - this.y1
+            };
+            preV.x = v.x;
+            preV.y = v.y;
+            this.pinchStartLen = getLen(preV);
+
+            this._option.multipointStart(evt);
+        }
+
+        this.longTapTimeout = setTimeout(
+            function () {
+                evt.type = 'longTap';
+
+                this._option.longTap(evt);
+            }.bind(this),
+            750
+        );
+    }
+
+    move(evt) {
+        if (!evt.touches) {
+            return;
+        }
+
+        let preV = this.preV;
+        let len = evt.touches.length;
+        let currentX = evt.touches[0].pageX == null ? evt.touches[0].x : evt.touches[0].pageX;
+        let currentY = evt.touches[0].pageY == null ? evt.touches[0].y : evt.touches[0].pageY;
+        this.isDoubleTap = false;
+
+        if (len > 1) {
+			// #ifdef MP-TOUTIAO
+			if(!this.toutuaoMultipointStart){
+				this._cancelLongTap();
+				
+				this._cancelSingleTap();
+				
+				let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
+				let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
+				let v = {
+				    x: otx - currentX,
+				    y: oty - currentX
+				};
+				preV.x = v.x;
+				preV.y = v.y;
+				this.pinchStartLen = getLen(preV);
+				
+				this._option.multipointStart(evt);
+				this.toutuaoMultipointStart = true
+			}
+			// #endif
+            let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
+            let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
+            let v = {
+                x: otx - currentX,
+                y: oty - currentY
+            };
+            if (preV.x !== null) {
+                if (this.pinchStartLen > 0) {
+                    evt.singleZoom = getLen(v) / this.pinchStartLen;
+                    evt.zoom = evt.singleZoom * this.lastZoom;
+                    this.tempZoom = evt.zoom;
+                    evt.type = 'pinch';
+
+                    this._option.pinch(evt);
+                }
+
+                evt.angle = getRotateAngle(v, preV);
+                evt.type = 'rotate';
+
+                this._option.rotate(evt);
+            }
+
+            preV.x = v.x;
+            preV.y = v.y;
+        } else {
+            if (this.x2 !== null) {
+                evt.deltaX = currentX - this.x2;
+                evt.deltaY = currentY - this.y2;
+            } else {
+                evt.deltaX = 0;
+                evt.deltaY = 0;
+            }
+
+            this._option.pressMove(evt);
+        }
+
+        this._option.touchMove(evt);
+
+        this._cancelLongTap();
+
+        this.x2 = currentX;
+        this.y2 = currentY;
+
+        if (len > 1) {
+            // evt.preventDefault();
+        }
+    }
+
+    end(evt) {
+        if (!evt.changedTouches) {
+            return;
+        }
+
+        this._cancelLongTap();
+
+        let self = this;
+        evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2); //在结束钩子都加入方向判断，但触发swipe瞬时必须位移大于30
+
+        if (evt.touches.length < 2) {
+            this.lastZoom = this.tempZoom;
+
+            this._option.multipointEnd(evt);
+			this.toutuaoMultipointStart = false
+        }
+
+        this._option.touchEnd(evt); //swipe
+
+        if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) || (this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
+            // evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
+            this.swipeTimeout = setTimeout(function () {
+                evt.type = 'swipe';
+
+                self._option.swipe(evt);
+            }, 0);
+        } else {
+            this.tapTimeout = setTimeout(function () {
+                evt.type = 'tap';
+
+                self._option.tap(evt); // trigger double tap immediately
+
+                if (self.isDoubleTap) {
+                    evt.type = 'doubleTap';
+
+                    self._option.doubleTap(evt);
+
+                    clearTimeout(self.singleTapTimeout);
+                    self.isDoubleTap = false;
+                }
+            }, 0);
+
+            if (!self.isDoubleTap) {
+                self.singleTapTimeout = setTimeout(function () {
+                    self._option.singleTap(evt);
+                }, 250);
+            }
+        }
+
+        this.preV.x = 0;
+        this.preV.y = 0;
+        this.scale = 1;
+        this.pinchStartLen = null;
+        this.x1 = this.x2 = this.y1 = this.y2 = null;
+    }
+
+    cancel(evt) {
+        clearTimeout(this.singleTapTimeout);
+        clearTimeout(this.tapTimeout);
+        clearTimeout(this.longTapTimeout);
+        clearTimeout(this.swipeTimeout);
+
+        this._option.touchCancel(evt);
+    }
+
+    _cancelLongTap() {
+        clearTimeout(this.longTapTimeout);
+    }
+
+    _cancelSingleTap() {
+        clearTimeout(this.singleTapTimeout);
+    }
+
+    _swipeDirection(x1, x2, y1, y2) {
+        return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : y1 - y2 > 0 ? 'Up' : 'Down';
+    }
+
+    destroy() {
+        if (this.singleTapTimeout) {
+            clearTimeout(this.singleTapTimeout);
+        }
+
+        if (this.tapTimeout) {
+            clearTimeout(this.tapTimeout);
+        }
+
+        if (this.longTapTimeout) {
+            clearTimeout(this.longTapTimeout);
+        }
+
+        if (this.swipeTimeout) {
+            clearTimeout(this.swipeTimeout);
+        }
+
+        this._option.rotate = null;
+        this._option.touchStart = null;
+        this._option.multipointStart = null;
+        this._option.multipointEnd = null;
+        this._option.pinch = null;
+        this._option.swipe = null;
+        this._option.tap = null;
+        this._option.doubleTap = null;
+        this._option.longTap = null;
+        this._option.singleTap = null;
+        this._option.pressMove = null;
+        this._option.touchMove = null;
+        this._option.touchEnd = null;
+        this._option.touchCancel = null;
+        this.preV =
+            this.pinchStartLen =
+            this.scale =
+            this.isDoubleTap =
+            this.delta =
+            this.last =
+            this.now =
+            this.tapTimeout =
+            this.singleTapTimeout =
+            this.longTapTimeout =
+            this.swipeTimeout =
+            this.x1 =
+            this.x2 =
+            this.y1 =
+            this.y2 =
+            this.preTapPosition =
+            this.rotate =
+            this.touchStart =
+            this.multipointStart =
+            this.multipointEnd =
+            this.pinch =
+            this.swipe =
+            this.tap =
+            this.doubleTap =
+            this.longTap =
+            this.singleTap =
+            this.pressMove =
+            this.touchMove =
+            this.touchEnd =
+            this.touchCancel =
+                null;
+        return null;
+    }
+}
+
+function getLen(v) {
+    return Math.sqrt(v.x * v.x + v.y * v.y);
+}
+
+function dot(v1, v2) {
+    return v1.x * v2.x + v1.y * v2.y;
+}
+
+function getAngle(v1, v2) {
+    let mr = getLen(v1) * getLen(v2);
+
+    if (mr === 0) {
+        return 0;
+    }
+
+    let r = dot(v1, v2) / mr;
+
+    if (r > 1) {
+        r = 1;
+    }
+
+    return Math.acos(r);
+}
+
+function cross(v1, v2) {
+    return v1.x * v2.y - v2.x * v1.y;
+}
+
+function getRotateAngle(v1, v2) {
+    let angle = getAngle(v1, v2);
+
+    if (cross(v1, v2) > 0) {
+        angle *= -1;
+    }
+
+    return (angle * 180) / Math.PI;
+}

src/components/seatChoose.vue

@@ -1,17 +1,35 @@
 <template>
   <div>
-    test
+    <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;left:'+(move.x)+'px;top:'+(move.y+canvasTopGap)+'px;'" 
+      type="2d" id="canvas" canvas-id="myCanvas">
+          您的浏览器版本过低,不支持canvas,请升级浏览器或使用chrome浏览器
+      </canvas>
+    </div>
   </div>
 </template>
 
 <script>
-import httpService from "@/request"
+import {getMethod} from "@/request"
+import MinaTouch from './mina-touch';
+import seatImg from './seatImg';
+
 export default {
   data() {
     return {
         drama_id: null,
-				screenWidth: 375,
-				screenHeight: 764,
+        seat_data: {},
+				screenWidth: 412,
+				screenHeight: 915,
 				canvasTopGap: 175,
 				canvasBottomGap: 64,
 				ctx: null,
@@ -35,30 +53,226 @@ export default {
 				},
 				tapTimeGap: true,
 				timer: 0,
+        maxCanvasW: 400,
+        maxCanvasH: 800,
+        multiplier: 60,
     }
   },
-  created() {
-    //initData
-    // let obj = {drama_id: 81806}
-    // httpService({
-    //     url: `/api/v1/seat-list`,
-    //     method: 'get',
-    //     data: obj,
-    //     headers: {
-    //         'content-type': 'application/json'
-    //     }
-    // }).then(res => {
-    //     console.log(res)
-    // })
-		this.initTouch()
+  mounted() {
+    this.screenWidth = document.body.clientWidth;
+    this.screenHeight = document.body.clientHeight;
+    this.initData();
+		this.creatCanvas();
+		this.initTouch();
   },
   methods: {
-    initTouch() {
+    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: 2},
+          {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: 2},
+          {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: 2},
+          {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: 2},
+          {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: 2},
+          {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: 2},
+          {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: 2},
+          {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: 2},
+          {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: 2}
+        ],
+        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) / 60 / this.scaleNum),
+				y: Math.floor((select_position.y - this.canvasTopGap - this.move.y) / 60 / this.scaleNum)
+			};
+      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(that.selected_seats)
+          return
+      }
+    },
+    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
+					}
+			}
+    },
   }
 }
 </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>

src/components/seatImg.js

@@ -0,0 +1,144 @@
+const seatImg = {
+	'00': {
+		name: 'default',
+		url: '@/static/images/seats/00.png',
+		color: '#D8D8D8'
+	},
+	'01': {
+		name: 'checked',
+		url: '@/static/images/seats/01.png',
+		color: '#007800'
+	},
+	A: {
+		name: 'A',
+		url: '/static/images/seats/A.png',
+		color: '#ff3b30'
+	},
+	B: {
+		name: 'B',
+		url: '/static/images/seats/B.png',
+		color: '#fe9400'
+	},
+	C: {
+		name: 'C',
+		url: '/static/images/seats/C.png',
+		color: '#f6eb77'
+	},
+	D: {
+		name: 'D',
+		url: '/static/images/seats/D.png',
+		color: '#4bd863'
+	},
+	E: {
+		name: 'E',
+		url: '/static/images/seats/E.png',
+		color: '#0079fe'
+	},
+	F: {
+		name: 'F',
+		url: '/static/images/seats/F.png',
+		color: '#e6109b'
+	},
+	G: {
+		name: 'G',
+		url: '/static/images/seats/G.png',
+		color: '#ebddd5'
+	},
+	H: {
+		name: 'H',
+		url: '/static/images/seats/H.png',
+		color: '#ff403a'
+	},
+	I: {
+		name: 'I',
+		url: '/static/images/seats/I.png',
+		color: '#f5a433'
+	},
+	J: {
+		name: 'J',
+		url: '/static/images/seats/J.png',
+		color: '#e8ff8c'
+	},
+	K: {
+		name: 'K',
+		url: '/static/images/seats/K.png',
+		color: '#bad4aa'
+	},
+	L: {
+		name: 'L',
+		url: '/static/images/seats/L.png',
+		color: '#abe0ff'
+	},
+	M: {
+		name: 'M',
+		url: '/static/images/seats/M.png',
+		color: '#e5daf9'
+	},
+	N: {
+		name: 'N',
+		url: '/static/images/seats/N.png',
+		color: '#b3907d'
+	},
+	O: {
+		name: 'O',
+		url: '/static/images/seats/O.png',
+		color: '#f45c93'
+	},
+	P: {
+		name: 'P',
+		url: '/static/images/seats/P.png',
+		color: '#db5200'
+	},
+	Q: {
+		name: 'Q',
+		url: '/static/images/seats/Q.png',
+		color: '#e8e363'
+	},
+	R: {
+		name: 'R',
+		url: '/static/images/seats/R.png',
+		color: '#2db3a0'
+	},
+	S: {
+		name: 'S',
+		url: '/static/images/seats/S.png',
+		color: '#bff1ff'
+	},
+	T: {
+		name: 'T',
+		url: '/static/images/seats/T.png',
+		color: '#ffe3fb'
+	},
+	U: {
+		name: 'U',
+		url: '/static/images/seats/U.png',
+		color: '#a60040'
+	},
+	V: {
+		name: 'V',
+		url: '/static/images/seats/V.png',
+		color: '#ffdec9'
+	},
+	W: {
+		name: 'W',
+		url: '/static/images/seats/W.png',
+		color: '#f6ffe3'
+	},
+	X: {
+		name: 'X',
+		url: '/static/images/seats/X.png',
+		color: '#8ab4e8'
+	},
+	Y: {
+		name: 'Y',
+		url: '/static/images/seats/Y.png',
+		color: '#ebf5df'
+	},
+	Z: {
+		name: 'Z',
+		url: '/static/images/seats/Z.png',
+		color: '#a82f5a'
+	}
+};
+
+module.exports = seatImg

src/request/index.js

@@ -1,64 +1,57 @@
-/*
- * @Author: your name
- * @Date: 2021-10-13 09:28:02
- * @LastEditTime: 2021-12-23 16:21:07
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/request/index.js
- */
-import axios from 'axios';
-import qs from 'qs';
-function filterRequestData(obj) {
-    let o = {};
-    for(let key in obj) {
-        let b1 = obj[key] === 0;
-        let b2 = obj[key] === false;
-        if(obj[key] || b1 || b2) {
-            o[key] = obj[key]
-        }
-    }
-    return o;
-}
+import axios from "axios"
+
 //创建axios的实例
 const httpService = axios.create({
     baseURL: 'https://mm.kaixinguopiao.com',// TODO:具体的配置可以根据项目情况而来
-    // timeout: 5000
+    timeout: 5000
 })
 
-//axios的拦截--request
 httpService.interceptors.request.use(config => {
-    // 请求成功处理
-    // if(localStorage.getItem('token')){//判断浏览器中的cookie中是否存在项目的token
-    //     config.headers.token = localStorage.getItem('token')
-    // }
-    const rqParams = filterRequestData(config.params);
-    const rqData = filterRequestData(config.data);
-    if(config.method === 'post') {
-        config.data = qs.stringify(rqData);
-    } else {
-        config.data = rqData;
-        config.params = rqParams;
-    }
-    return config;
-},err => {
-    Promise.reject(err);// 请求错误处理
+    config.headers['Content-Type'] = "application/json";
+    config.headers['Access-Control-Allow-Origin']  = '*';
+    // config.headers['admin-token'] = store.getters.getToken;
+    // config.headers['device-type'] = "web";
+	return config
+}, err => {
+	return Promise.reject(err)
 })
 
-//4、axios的拦截--response
+
 httpService.interceptors.response.use(response => {
-	// TODO:具体的code对应的处理可继续添加修改
     let msg = '';
+    let data = null;
     let res = response.data;
-    if(res.status){
-        return {res};
+    if(res.code){
+        data = res.data;
+        msg = res.msg || "";
+        // return {data, msg};
+        return res;
     } else {
-        msg = res.Msg || "";
-        return Promise.reject(new Error(msg))
+        msg = res.msg || "";
+        // return Promise.reject(new Error(msg))
+        return res;
     }
-},err => {
+}, err => {
+    // console.log(err)
+	// TODO:具体的code对应的处理可继续添加修改
     return Promise.reject(err);
 })
 
-export default httpService
-
+export const getMethod = (api,params) => {
+    return httpService({
+        url: api,
+        method: 'get',
+        params: params
+    })
+}
 
+export const postMethod = (api, data) => {
+    return httpService({
+        url: api,
+        method: 'post',
+        // headers: {
+        //     'Content-Type': 'application/json'
+        // },
+        data: data
+    })
+}