票务

zhangmeng
Showing 3 changed files with 189 additions and 138 deletions
src/viewsPc/booking/ticket/confirmOrder.vue
src/viewsPc/booking/ticket/index.vue
vite.config.js
--- a/src/viewsPc/booking/ticket/confirmOrder.vue
View file @01c8ae3
+++ b/src/viewsPc/booking/ticket/confirmOrder.vue
View file @01c8ae3
 <template>
  <el-card class="container">
    <div v-loading="loading">
-      <div class="title">
+      <div class="title father">
        {{ languageFormat(language, "订单确认", "Order confirmation") }}
+        <span class="son" @click="handelUp">上一步</span>
      </div>
      <div class="content pd20">
        <el-row gutter="20">
@@ -11,7 +12,7 @@
              <div class="name">{{ TickForm.name }}</div>
              <div class="address">{{ TickForm.address }}</div>
            </div>
            <div class="info">
              <div class="name">{{ TickForm2.ticketTypeName }}</div>
              <div class="address">
@@ -20,67 +21,76 @@
                <span v-else>{{ language == 0 ? '夜间场' : 'Night' }}</span>
                ｜ {{ TickForm2.ticketName }}
              </div>
-              <div v-if="TickForm2.ticketType=='0'" class="address">{{ language==0?'剩余数量':'Remaining Quantity' }}： {{ leftCount }}</div>
+              <div v-if="TickForm2.ticketType=='0'" class="address">{{
+                language == 0 ? '剩余数量' : 'Remaining Quantity'
+              }}： {{ leftCount }}
+              </div>
            </div>
            <div class="ticket_info mb20">
              <div class="tit_box">
-                <div class="line"/>
+                <div class="line" />
                <div class="txt">
                  {{ languageFormat(language, "订票信息", "Ticket Info") }}
                </div>
              </div>
              <div class="form">
                <el-form ref="formRef" :model="orderForm" :rules="rules" label-width="140px">
                  <div v-if="TickForm2.ticketType == '1'">
                    <el-form-item :label="language == 0 ? '桌号' : 'Table'">
-                      <el-popover placement="right" :width="400" trigger="hover">
+                      <el-popover :width="400" placement="right" trigger="hover">
                        <template #reference>
                          <div class="text-primary underline pointer" @click="showImg">
                            {{ language == 0 ? '查看区域布局' : ' View Area Layout' }}
                          </div>
                        </template>
-                        <el-image :src="fillImgUrl(tickImg)" style="width: 100%;"
+                        <el-image
-                                  :preview-src-list="[fillImgUrl(tickImg)]"/>
+                          :preview-src-list="[fillImgUrl(tickImg)]" :src="fillImgUrl(tickImg)"
+                          style="width: 100%;"
+                        />
                      </el-popover>
                      <el-radio-group v-model="currDesk">
-                        <el-radio-button v-for="(it, index) in deskList" :key="index" :label="it.deskNo" :value="it"
+                        <el-radio-button
-                                         :disabled="it.status!=0"/>
+                          v-for="(it, index) in deskList" :key="index" :disabled="it.status!=0" :label="it.deskNo"
+                          :value="it"
+                        />
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="language == 0 ? '座位号' : 'Seat'">
                      <el-checkbox-group v-model="currSeat">
-                        <el-checkbox-button v-for="(it, index) in currDesk?.seatList" :key="index" :label="it.seatNo"
+                        <el-checkbox-button
-                                            :value="it" :disabled="it.status!=0"/>
+                          v-for="(it, index) in currDesk?.seatList" :key="index" :disabled="it.status!=0"
+                          :label="it.seatNo" :value="it"
+                        />
                      </el-checkbox-group>
                    </el-form-item>
                    <el-form-item :label="language == 0 ?'已选座位号':'Selected Seat'">
-                      <el-tag class="mr10" v-for="(s,index) in currSeat" :key="s.id" closable @close="delSeat(s,index)">
+                      <el-tag v-for="(s,index) in currSeat" :key="s.id" class="mr10" closable @close="delSeat(s,index)">
                        {{ s.deskNo }} - {{ s.seatNo }}
                      </el-tag>
                    </el-form-item>
                  </div>
                  <el-form-item
-                      :label="language == 0 ? '联系人' : 'contact person'" prop="contacts"
+                    :label="language == 0 ? '联系人' : 'contact person'" prop="contacts"
                  >
                    <el-input
-                        v-model="orderForm.contacts"
+                      v-model="orderForm.contacts"
-                        :placeholder=" language == 0 ? '请输入联系人' : 'Please enter the contact person'"
+                      :placeholder=" language == 0 ? '请输入联系人' : 'Please enter the contact person'"
-                        style="width: 320px"
+                      style="width: 320px"
                    />
                  </el-form-item>
                  <el-form-item
-                      :label="language == 0 ? '联系电话' : 'contact phone'" prop="phone"
+                    :label="language == 0 ? '联系电话' : 'contact phone'" prop="phone"
                  >
                    <el-input
-                        v-model="orderForm.phone"
+                      v-model="orderForm.phone"
-                        :placeholder=" language == 0 ? '请输入联系电话' : 'Please enter the contact phone number'"
+                      :placeholder=" language == 0 ? '请输入联系电话' : 'Please enter the contact phone number'"
-                        style="width: 320px"
+                      style="width: 320px"
                    />
                  </el-form-item>
                  <el-form-item :label="language == 0 ? '观看人' : 'Viewer'" prop="customerIds">
@@ -96,7 +106,7 @@
                              </div>
                              <div class="idcard">{{ it.idCard }}</div>
                            </div>
-                            <el-checkbox :value="it.id" :disabled="!!it.disabled"/>
+                            <el-checkbox :disabled="!!it.disabled" :value="it.id" />
                          </div>
                        </el-checkbox-group>
                      </div>
@@ -109,21 +119,21 @@
              </div>
            </div>
          </el-col>
          <el-col :lg="8" class="right">
            <div class="tit_box">
-              <div class="line"/>
+              <div class="line" />
              <div class="txt">
                {{ languageFormat(language, "订单明细", "Order summary") }}
              </div>
            </div>
            <div class="detail">
              <div class="detail_top">
                <div class="time">
                  {{ language == 0 ? '票价' : 'Cost Ticket' }}
                </div>
-                <p/>
+                <p />
                <div class="ticket">
                  {{ language == 0 ? TickForm2.price : TickForm2.priceEn }}
                  <span> {{ language == 0 ? '元' : 'Euro' }}</span>
@@ -143,6 +153,15 @@
                </div>
              </div>
            </div>
+            <!--            场馆布局图-->
+            <div style="margin-top: 95px">
+              <el-image
+                :preview-src-list="[fillImgUrl(tickImg)]"
+                :src="fillImgUrl(tickImg)"
+                style="width: 100%;"
+              />
+            </div>
          </el-col>
        </el-row>
      </div>
@@ -166,7 +185,7 @@
 </template>
 <script setup>
-import {ref, computed, onMounted} from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import {
  customerListApi,
  submitOrderTicket,
@@ -176,12 +195,12 @@ import {
  checkPurchasedCustomers,
  getDeskInfo
 } from '@/apiPc/booking'
-import {ElMessage, ElMessageBox} from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
-import {languageFormat} from '@/viewsPc/seat/utils/language.js'
+import { languageFormat } from '@/viewsPc/seat/utils/language.js'
 import useUserStore from '/@/store/modules/user'
-import {useStorage} from '@vueuse/core/index'
+import { useStorage } from '@vueuse/core/index'
 import _ from 'lodash'
-import {useRoute, useRouter} from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 const useStore = useUserStore()
@@ -232,7 +251,7 @@ onMounted(() => {
  tickImg.value = route.query.tickImg
  customerList()
  getDetail()
  getActivityTypeVoById({
    id: route.params.latstId
  }).then((res) => {
@@ -270,12 +289,12 @@ function changeGroup(e) {
    }).then(res => {
      if (res.data.length > 0) {
        const names = _.map(res.data, (d) => d.name).join(',')
        ElMessage({
          message: language.value == 0 ? `${names} 已购买该票` : 'The user has purchased the ticket',
          type: 'error'
        })
        _.each(res.data, (d) => {
          _.remove(orderForm.value.customerIds, (c) => c == d.id)
          _.find(personnelList.value, (p) => p.id == d.id).disabled = true
@@ -297,7 +316,7 @@ async function paymentHandle() {
    useStore().setVisitor()
    return
  }
  if (TickForm2.value.ticketType == '1') {
    if (currSeat.value.length == 0) {
      ElMessage({
@@ -314,14 +333,14 @@ async function paymentHandle() {
      return
    }
  }
  await formRef.value.validate()
  await ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
    confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
    cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
    type: 'warning'
-  }).then(async () => {
+  }).then(async() => {
    try {
      const orderCustomerList = []
      _.each(orderForm.value.customerIds, (id, index) => {
@@ -337,7 +356,7 @@ async function paymentHandle() {
          seatNo: tempSeat.seatNo
        })
      })
      const res = await submitOrderTicket({
        activeId: orderForm.value.activeId,
        orderName: TickForm2.value.ticketTypeName,
@@ -384,13 +403,13 @@ async function paymentHandle() {
    } catch (e) {
      ElMessage.error(language.value == 0 ? '下单失败,' : 'Order failure')
    } finally {
    }
  })
 }
 async function getDetail() {
-  const res = await getTicketInfoByActivityId({activityId: orderForm.value.activeId})
+  const res = await getTicketInfoByActivityId({ activityId: orderForm.value.activeId })
  TickForm.value = res.data
 }
@@ -402,7 +421,11 @@ function addPeopl() {
 }
 const showImg = () => {
+}
+function handelUp() {
+  router.go(-1)
 }
 </script>
@@ -428,7 +451,7 @@ div {
  //padding: 20px 0;
  width: 1200px;
  margin: 20px auto;
  .tag_t {
    padding: 1px 10px;
    font-weight: 400;
@@ -438,7 +461,7 @@ div {
    border: 1px solid #453dea;
    margin-left: 5px;
  }
  .title {
    padding: 11px;
    text-align: center;
@@ -446,18 +469,18 @@ div {
    font-size: 18px;
    color: #ffffff;
  }
  .content {
    background-color: #fff;
  }
  .line {
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #493ceb 0%, #8623fc 100%);
    border-radius: 4px;
  }
  .left {
    .info {
      background: rgba(69, 61, 234, 0.04);
@@ -465,54 +488,54 @@ div {
      border: 1px solid #d3d1f6;
      padding: 20px 0 28px 33px;
      margin-bottom: 20px;
      .name {
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        margin-bottom: 20px;
      }
      .address {
        font-weight: 400;
        font-size: 14px;
        color: #929aa0;
      }
    }
    .ticket_info {
      .tit_box {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        .txt {
          font-weight: bold;
          font-size: 16px;
          color: #493ceb;
        }
      }
      .form {
        min-height: 464px;
        padding: 20px 60px;
        border-radius: 5px;
        border: 1px solid #dcdfe6;
        .p_box {
          display: flex;
          width: 100%;
          gap: 10px;
          max-width: 400px;
          .people {
            width: 100%;
            background: #fbfcfd;
            border-radius: 2px;
            border: 1px solid #dcdfe6;
            padding: 0 14px;
            .prople_item {
              display: flex;
              justify-content: space-between;
@@ -521,30 +544,30 @@ div {
              border-bottom: 1px solid #dcdfe6;
              width: 100%;
              position: relative;
              &:last-child {
                border: none;
              }
              .name {
                font-size: 16px;
                //color: #929aa0;
                margin-bottom: 20px;
                .tag_t {
                  position: absolute;
                  right: 30px;
                  padding: 8px;
                }
              }
              .idcard {
                font-size: 10px;
                color: #929aa0;
              }
            }
          }
          .btn {
            width: 90px;
            height: 40px;
@@ -563,30 +586,30 @@ div {
      }
    }
  }
  .right {
    .tit_box {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      .txt {
        font-weight: bold;
        font-size: 16px;
        color: #493ceb;
      }
    }
    .detail {
      padding: 15px 26px;
      border-radius: 5px;
      border: 1px solid #dcdfe6;
      .detail_top {
        padding-bottom: 13px;
        border-bottom: 1px solid #dcdfe6;
        .time {
          font-weight: 500;
          font-size: 20px;
@@ -594,13 +617,13 @@ div {
          line-height: 25px;
          margin-bottom: 8px;
        }
        .ticket {
          font-size: 16px;
          color: #2d373f;
        }
      }
      .detail_center {
        margin-top: 14px;
        display: flex;
@@ -608,26 +631,26 @@ div {
        padding-bottom: 13px;
        border-bottom: 1px solid #dcdfe6;
        gap: 8px;
        .ticket {
          font-size: 16px;
          color: #2d373f;
        }
      }
      .detail_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        .sum_txt {
          font-weight: 600;
          font-size: 18px;
          color: #2d373f;
          line-height: 25px;
        }
        .price_num {
          font-weight: 600;
          font-size: 36px;
@@ -637,7 +660,7 @@ div {
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
@@ -647,20 +670,20 @@ div {
    box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
    margin-top: 9px;
    padding: 0 30px;
    .label {
      font-size: 16px;
      color: #7b7f83;
      line-height: 22px;
    }
    .value {
      font-size: 22px;
      color: #ff8124;
      line-height: 30px;
      font-weight: 600;
    }
    .pay {
      width: 200px;
      height: 40px;
@@ -677,6 +700,16 @@ div {
  }
 }
+.father {
+  position: relative;
+}
+.son {
+  position: absolute;
+  left: 10px;
+  cursor: pointer
+}
 @media screen and (max-width: 768px) {
  .container {
    width: 100%;
--- a/src/viewsPc/booking/ticket/index.vue
View file @01c8ae3
+++ b/src/viewsPc/booking/ticket/index.vue
View file @01c8ae3
@@ -2,7 +2,7 @@
  <div>
    <!-- top -->
    <div class="container top">
-      <img :src="fillImgUrl(matchForm.ticketImg)" class="cover_img">
+      <img :src="fillImgUrl(matchForm.ticketImg)" alt="" class="cover_img">
      <div class="info">
        <div class="title">{{ matchForm.name }}</div>
        <div class="time">
@@ -37,11 +37,11 @@
        <div class="address">
          {{ triggerLanguage(language, "地址", "Location") }}：{{ matchForm.address }}
        </div>
        <div v-if="timeData>0">
          <!--        倒计时-->
          <p class="countDownTitle">
            <span v-if="language==0">售票倒计时</span>
            <span v-else>TICKET COUNTDOWN</span>
@@ -60,7 +60,7 @@
          </van-count-down>
        </div>
        <div v-else>
          <!-- 票档 -->
          <div class="select_item_box">
            <div class="label">
@@ -83,7 +83,7 @@
              </div>
            </div>
          </div>
          <!-- 场馆 -->
          <div class="select_item_box">
            <div class="label">
@@ -93,7 +93,7 @@
              <span
                v-if="currVenue?.images"
                style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px"
-                @click="showUrl=currVenue.images; show=true"
+                @click="handleImage"
              > <span style="color: red;font-size: 18px">*</span>
                {{
                  language == 0 ? '点击查看场馆布局' : 'View Venue Layout'
@@ -116,7 +116,7 @@
              </div>
            </div>
          </div>
          <!-- 场次 -->
          <div class="select_item_box">
            <div class="label">
@@ -140,11 +140,11 @@
                <span v-else>{{
                  language == 0 ? '夜间场' : 'Night'
                }}</span>
-<!--                {{ key=='1000'?'日间场':'夜间场' }}-->
+                <!--                {{ key=='1000'?'日间场':'夜间场' }}-->
              </div>
            </div>
          </div>
          <!-- 票型 -->
          <div class="select_item_box">
            <div class="label">
@@ -177,8 +177,8 @@
              </div>
            </div>
          </div>
          <!-- 价格 -->
          <div class="select_item_box">
            <div class="label">
@@ -205,7 +205,7 @@
              {{ matchForm.ticketRemark }}
            </div>
          </div>
          <div
            v-if="endTime<=0" class="btn" style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
            @click="toSelectClosed"
@@ -219,20 +219,23 @@
              triggerLanguage(language, "立即购票", "Buy tickets now")
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="container bottom">
      <div style="display: flex">
-        <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language==0?'购票说明':'Notice' }}</div>
+        <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language == 0 ? '购票说明' : 'Notice' }}</div>
-        <div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{ language==0?'购票须知':'Instructions' }}</div>
+        <div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{
+          language == 0 ? '购票须知' : 'Instructions'
+        }}
+        </div>
      </div>
      <div v-show="active==1" class="rich_content" v-html="matchForm.ticketDes" />
      <div v-show="active==2" class="rich_content" v-html="matchForm.ticketNotice" />
      <el-dialog v-model="show" title="" width="1000px">
        <div>
          <img :src="fillImgUrl(showUrl)" alt="" style="width: 100%">
@@ -250,7 +253,8 @@ import {
  getTicketListApi,
  checkNonPayment,
  getStadiumList,
-  getActivityTypeVoListByLatsId
+  getActivityTypeVoListByLatsId,
+  getBaseInfoByActiveId
 } from '@/apiPc/booking'
 import { dayjs } from 'element-plus'
@@ -290,6 +294,7 @@ const venueList = ref([])
 const tickList = ref([])
 const currVenue = ref(null)
 const currTick = ref(null)
+const matchData = ref({})
 watch(show, (val) => {
  if (!val) {
@@ -339,7 +344,7 @@ async function getTicketListType() {
  const res = await getActivityTypeVoListByLatsId({ latsId: selectForm.value.latsId })
  tickList.value = res.data
  selectForm.value.sessionType = Object.keys(res.data)[0]
  currTick.value = tickList.value[selectForm.value.sessionType][0]
  selectForm.value.latstId = currTick.value?.id
  selectForm.value.price = currTick.value?.price
@@ -354,7 +359,7 @@ function select(v) {
  selectForm.value.id = null
  selectForm.value.price = '--'
  selectForm.value.priceEn = '--'
  getVenueList()
 }
@@ -366,13 +371,13 @@ function selectVenue(v) {
  selectForm.value.id = null
  selectForm.value.price = '--'
  selectForm.value.priceEn = '--'
  getTicketListType()
 }
 function selectSessionType(key) {
  selectForm.value.sessionType = key
  currTick.value = tickList.value[selectForm.value.sessionType][0]
  selectForm.value.latstId = currTick.value?.id
  selectForm.value.price = currTick.value?.price
@@ -418,6 +423,20 @@ function toSelectClosed() {
    type: 'warning'
  })
 }
+async function getmatchData() {
+  const res = await getBaseInfoByActiveId(route.params.activeId)
+  matchData.value = res.data
+  console.log(res)
+}
+function handleImage() {
+  // ticketImg
+  showUrl.value = matchData.value.ticketLayout
+  show.value = true
+}
+getmatchData()
 </script>
 <style lang="scss" scoped>
@@ -453,18 +472,17 @@ function toSelectClosed() {
  display: flex;
  padding: 19px;
  margin-top: 26px;
  .cover_img {
-    width: 390px;
+    width: 500px;
-    height: 517px;
    object-fit: fill;
    margin-right: 36px;
  }
  .info {
    padding-top: 12px;
    width: 100%;
    .title {
      font-weight: bold;
      font-size: 28px;
@@ -472,7 +490,7 @@ function toSelectClosed() {
      line-height: 1.6;
      margin-bottom: 15px;
    }
    .time {
      font-weight: 600;
      font-size: 16px;
@@ -480,7 +498,7 @@ function toSelectClosed() {
      line-height: 24px;
      margin-bottom: 16px;
    }
    .address {
      font-weight: 600;
      font-size: 16px;
@@ -488,15 +506,15 @@ function toSelectClosed() {
      line-height: 24px;
      margin-bottom: 15px;
    }
    .select_item_box {
      display: flex;
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        font-weight: 600;
        font-size: 16px;
@@ -505,18 +523,18 @@ function toSelectClosed() {
        margin-right: 12px;
        flex-shrink: 0;
      }
      .forbid {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
      }
      .select_item {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        user-select: none;
        .tag_t {
          padding: 1px 15px;
          font-weight: 400;
@@ -526,7 +544,7 @@ function toSelectClosed() {
          border: 1px solid #453dea;
          margin-left: 5px;
        }
        .tag {
          display: flex;
          padding: 12px 18px;
@@ -537,7 +555,7 @@ function toSelectClosed() {
          color: #4a4a4a;
          cursor: pointer;
        }
        .tagActive {
          display: flex;
          padding: 12px 18px;
@@ -548,14 +566,14 @@ function toSelectClosed() {
          color: #493ceb;
          cursor: pointer;
        }
        .tao {
          border: 1px solid #493ceb;
          font-size: 14px;
          color: #493ceb;
          margin-left: 10px;
        }
        .tagDisabled {
          padding: 12px 18px;
          background: #878787;
@@ -567,7 +585,7 @@ function toSelectClosed() {
        }
      }
    }
    .btn {
      width: 175px;
      height: 40px;
@@ -587,7 +605,7 @@ function toSelectClosed() {
  padding: 50px;
  margin-top: 30px;
  margin-bottom: 30px;
  .title {
    padding: 20px 30px;
    background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
@@ -597,15 +615,15 @@ function toSelectClosed() {
    line-height: 30px;
    margin-bottom: 30px;
  }
  .rich_content {
    margin-top: 30px;
    :deep(img) {
      width: 100% !important;
      height: auto !important;
    }
  }
 }
@@ -623,44 +641,44 @@ function toSelectClosed() {
      height: 160px;
      margin-right: 15px;
    }
    .info {
      padding: 0;
      .title {
        font-size: 14px;
        margin: 0;
      }
      .time, .address, .label, .tip {
        font-size: 12px;
      }
      .title, .time, .address, .tip, .select_item_box {
        margin-bottom: 3px;
      }
      .select_item_box {
        .label {
          font-size: 12px;
        }
        .select_item .tag {
          padding: 2px 10px;
          font-size: 12px;
        }
        .select_item .tagActive {
          padding: 2px 10px;
          font-size: 12px;
        }
        .select_item .tagDisabled {
          padding: 2px 10px;
          font-size: 12px;
        }
      }
      .btn {
        display: inline-block;
        margin: 10px 0 0;
@@ -678,8 +696,8 @@ function toSelectClosed() {
  .bottom {
    padding: 0
  }
 }
 .countDownTitle {
--- a/vite.config.js
View file @01c8ae3
+++ b/vite.config.js
View file @01c8ae3
@@ -81,8 +81,8 @@ export default defineConfig(({ mode, command }) => {
          rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
        },
        '/dev-api': {
-          target: 'http://192.168.1.118:8081/',
+          // target: 'http://192.168.1.118:8081/',
-          // target: 'http://192.168.1.130:8081',
+          target: 'http://192.168.1.118:8081',
          // target: 'https://jijin.wtwuxicenter.com/stage-api',
          // target: 'https://wdsfwuxicenter.com/stage-api/',
          changeOrigin: true,