H5适配

zhangmeng
Showing 5 changed files with 173 additions and 97 deletions
src/viewsPc/booking/pay.vue
src/viewsPc/booking/ticket/addInvoice.vue
src/viewsPc/booking/ticket/confirmOrder.vue
src/viewsPc/booking/ticket/index.vue
src/viewsPc/booking/ticket/peopleManage.vue
--- a/src/viewsPc/booking/pay.vue
View file @fd3f452
+++ b/src/viewsPc/booking/pay.vue
View file @fd3f452
@@ -469,11 +469,11 @@
            <div v-if="payType == '2'&&wePayCodeUrl">
              <div class="payImgbox flexCenter">
                <div>
-                  <img :src="wePayCodeUrl" class="border" width="260">
+                  <img :src="wePayCodeUrl" class="border payImg1" width="260">
-                  <img class="mt20" src="@/assets/img/sm.png">
+                  <img class="mt20 payImg2" src="@/assets/img/sm.png">
                </div>
                <div class="ml20">
-                  <img height="360" src="@/assets/img/rr.jpg">
+                  <img class="payImg3" height="360" src="@/assets/img/rr.jpg">
                </div>
              </div>
              <div v-if="language==0" class="tip text-center text-danger">
@@ -1161,4 +1161,24 @@ const showSJ = () => {
 .price {
  color: orange;
 }
+@media screen and (max-width: 768px) {
+  .payImgbox {
+    width: 100%;
+    .payImg1 {
+      width: 40vw;
+    }
+    .payImg2 {
+      width: 40vw;
+    }
+    .payImg3 {
+      width: 40vw;
+      height: auto;
+    }
+  }
+}
 </style>
--- a/src/viewsPc/booking/ticket/addInvoice.vue
View file @fd3f452
+++ b/src/viewsPc/booking/ticket/addInvoice.vue
View file @fd3f452
@@ -22,7 +22,7 @@
              <div>
                <p>票档：{{ ticketForm.extJson?.atName }}</p>
                <p>场馆：{{ ticketForm.extJson?.atsName }}</p>
-                <p>场次：{{ ticketForm.extJson?.sessionType =='1000'? '日间场' : '夜间场' }}</p>
+                <p>场次：{{ ticketForm.extJson?.sessionType == '1000' ? '日间场' : '夜间场' }}</p>
                <p>票型：{{ ticketForm.extJson?.atstName }}</p>
              </div>
              <div>
@@ -34,14 +34,14 @@
                  <el-col :lg="8" :md="12" :sm="12" :xs="24">联系方式：{{ ticketForm.phone }}
                  </el-col>
                  <el-col :lg="8" :md="12" :sm="12" :xs="24">
-                    共计:{{ (totalMoney*1).toFixed(2) }}{{
+                    共计:{{ (totalMoney * 1).toFixed(2) }}{{
                      paymentType == 1 ? '￥' : '€'
                    }}
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="leftboderTT">
              {{ paymentType != 3 ? '开票信息' : 'Invoice information' }}
            </div>
@@ -51,15 +51,17 @@
                class="mw500"
              >
                <el-form-item :label="language==0 ?'开票金额':'Amount'">
-                  <span class="bigprice">{{ paymentType != 3 ? '¥' : '€' }}{{ paymentType != 3?ticketForm.total:ticketForm.totalEn }}</span>
+                  <span class="bigprice">{{
+                    paymentType != 3 ? '¥' : '€'
+                  }}{{ paymentType != 3 ? ticketForm.total : ticketForm.totalEn }}</span>
                </el-form-item>
                <el-form-item :label="language==0 ?`发票形式`:'Invoice Form'" prop="invoiceForm" required>
                  <el-radio-group v-model="form.invoiceForm">
                    <el-radio value="1">{{ language == 0 ? '电子发票' : 'E-invoice' }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item :label="language==0 ?`发票类型`:'Invoice Type'" prop="invoiceType" required>
                  <el-radio-group v-model="form.invoiceType">
                    <el-radio value="0">{{ language == 0 ? '企业' : 'Company' }}</el-radio>
@@ -101,7 +103,7 @@
                  </el-form-item>
                </div>
              </el-form>
              <div v-if="remark" class="tip">
                <label>{{ paymentType != 3 ? '开票须知' : 'Invoice Notice' }}:</label>
                <div v-html="remark" />
@@ -109,7 +111,7 @@
            </div>
          </el-col>
        </el-row>
        <el-row align="middle" class="pd20" justify="center">
          <el-col :span="12" class="text-center">
            <el-button class="btn-lineG w200px" round size="large" type="primary" @click="submit">
@@ -119,7 +121,7 @@
        </el-row>
      </el-card>
      <div style="height: 60px;" />
    </div>
  </div>
  <address-list-dialog ref="dialogAddressListRef" @submit="getAddress" />
@@ -224,13 +226,13 @@ async function getTickInfo() {
    // message.value = JSON.parse(ticketForm.value.extJson.message)
    // console.log(message.value)
    paymentType.value = ticketForm.value.paymentType
    await getDetail(ticketForm.value.activeId)
    // console.log(ticketForm.value)
  } catch (e) {
    console.log(e)
  } finally {
  }
 }
@@ -339,7 +341,7 @@ function goBack() {
 .border-info {
  position: relative;
  & > label {
    position: absolute;
    right: 0;
@@ -349,7 +351,7 @@ function goBack() {
    padding: 5px 15px;
    font-size: 14px;
  }
  .poPrice {
    position: absolute;
    bottom: 0px;
@@ -404,12 +406,12 @@ function goBack() {
 .ccitemBox {
  overflow: auto;
  label {
    margin: 10px 0;
    display: block;
    min-height: 30px;
    span {
      color: #FF8124;
      font-family: DIN Alternate;
@@ -424,12 +426,12 @@ function goBack() {
  font-size: 15px;
  color: #666;
  margin: 5px 0 10px;
  label {
    font-size: 16px;
    color: #000;
  }
  span {
    font-size: 13px;
  }
@@ -475,4 +477,5 @@ function goBack() {
  line-height: 1;
  font-family: "DIN Alternate";
 }
 </style>
--- a/src/viewsPc/booking/ticket/confirmOrder.vue
View file @fd3f452
+++ b/src/viewsPc/booking/ticket/confirmOrder.vue
View file @fd3f452
@@ -12,8 +12,8 @@
              <div class="name">{{ TickForm.name }}</div>
              <div class="address">{{ TickForm.address }}</div>
            </div>
            <div class="ticket_info mb20">
              <div class="tit_box">
                <div class="line" />
@@ -21,12 +21,12 @@
                  {{ languageFormat(language, "订票信息", "Ticket Info") }}
                </div>
              </div>
              <div class="form">
-                <el-form ref="formRef" :model="orderForm" :rules="rules" label-width="140px">
+                <el-form ref="formRef" :model="orderForm" :rules="rules" label-position="top" label-width="130px">
                  <div v-if="TickForm2.ticketType == '1'">
                    <el-form-item :label="language == 0 ? '桌号' : 'Table'">
                      <!--                      <el-popover :width="400" placement="right" trigger="hover">-->
                      <!--                        <template #reference>-->
                      <!--                          <div class="text-primary underline pointer" @click="showImg">-->
@@ -39,7 +39,7 @@
                      <!--                        />-->
                      <!--                      </el-popover>-->
                      <!--                      -->
                      <el-radio-group v-model="currDesk">
                        <el-radio-button
                          v-for="(it, index) in deskList" :key="index" :disabled="it.status!=0" :label="it.deskNo"
@@ -105,7 +105,7 @@
              </div>
            </div>
          </el-col>
          <el-col :lg="8" class="right">
            <div class="tit_box">
              <div class="line" />
@@ -113,7 +113,7 @@
                {{ languageFormat(language, "订单明细", "Order summary") }}
              </div>
            </div>
            <div class="detail">
              <div class="detail_top">
                <div class="time">
@@ -148,14 +148,14 @@
                  <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>
            </div>
            <!--            场馆布局图-->
            <div style="margin-top: 30px">
              <el-image
@@ -256,7 +256,7 @@ onMounted(() => {
  tickImg.value = route.query.tickImg
  customerList()
  getDetail()
  getActivityTypeVoById({
    id: route.params.latstId
  }).then((res) => {
@@ -292,12 +292,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
@@ -319,7 +319,7 @@ async function paymentHandle() {
    useStore.setVisitor()
    return
  }
  if (TickForm2.value.ticketType == '1') {
    if (currSeat.value.length == 0) {
      ElMessage({
@@ -336,9 +336,9 @@ 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',
@@ -359,7 +359,7 @@ async function paymentHandle() {
          seatNo: tempSeat.seatNo
        })
      })
      const res = await submitOrderTicket({
        activeId: orderForm.value.activeId,
        orderName: TickForm2.value.ticketTypeName,
@@ -406,7 +406,7 @@ async function paymentHandle() {
    } catch (e) {
      ElMessage.error(language.value == 0 ? '下单失败,' : 'Order failure')
    } finally {
    }
  })
 }
@@ -450,7 +450,7 @@ div {
  //padding: 20px 0;
  width: 1200px;
  margin: 20px auto;
  .tag_t {
    padding: 1px 10px;
    font-weight: 400;
@@ -460,7 +460,7 @@ div {
    border: 1px solid #453dea;
    margin-left: 5px;
  }
  .title {
    padding: 11px;
    text-align: center;
@@ -468,18 +468,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);
@@ -487,54 +487,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;
@@ -543,30 +543,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;
@@ -585,30 +585,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;
@@ -616,13 +616,13 @@ div {
          line-height: 25px;
          margin-bottom: 8px;
        }
        .ticket {
          font-size: 16px;
          color: #2d373f;
        }
      }
      .detail_center {
        margin-top: 14px;
        display: flex;
@@ -630,26 +630,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;
@@ -659,7 +659,7 @@ div {
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
@@ -669,20 +669,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;
@@ -696,7 +696,7 @@ div {
      cursor: pointer;
      user-select: none;
    }
    .goBack {
      width: 200px;
      height: 40px;
@@ -725,12 +725,6 @@ div {
  cursor: pointer
 }
-@media screen and (max-width: 768px) {
-  .container {
-    width: 100%;
-  }
-}
 .rightBox {
  .info {
    background: rgba(69, 61, 234, 0.04);
@@ -741,4 +735,49 @@ div {
    margin-top: 30px;
  }
 }
+@media screen and (max-width: 768px) {
+  .container {
+    width: 100%;
+    :deep(.form) {
+      padding: 30px 0 !important;
+      form {
+        padding: 10px;
+      }
+    }
+    .footer {
+      display: block;
+      width: 100%;
+      height: auto;
+      padding: 20px;
+      div {
+        width: 100%;
+      }
+      .goBack {
+        width: 140px;
+        position: relative;
+        height: 40px;
+        top: 0;
+        left: 0%;
+        margin: 10px 0;
+      }
+      .pay {
+        width: 140px;
+        position: relative;
+        height: 40px;
+        top: -50px;
+        left: 55%;
+      }
+    }
+  }
+}
 </style>
--- a/src/viewsPc/booking/ticket/index.vue
View file @fd3f452
+++ b/src/viewsPc/booking/ticket/index.vue
View file @fd3f452
--- a/src/viewsPc/booking/ticket/peopleManage.vue
View file @fd3f452
+++ b/src/viewsPc/booking/ticket/peopleManage.vue
View file @fd3f452
@@ -7,7 +7,7 @@
      <span>
        {{ languageFormat(language, "观影人管理", "Viewers") }}
      </span>
      <span class="fr" style="cursor: pointer" @click="$router.go(-1)">
        {{ language == 0 ? '返回' : 'Back' }}
      </span>
@@ -25,12 +25,12 @@
        </div>
      </div>
    </div>
    <el-dialog
      v-model="show"
      :title="language==0?'新增观影人':'New moviegoers'"
      center
-      width="700"
+      style="max-width: 700px;min-width: 350px;"
    >
      <el-form
        ref="formRef" :model="form" :rules="rules" label-width="100px" size="large"
@@ -50,13 +50,20 @@
          <el-input v-model="form.idCard" :placeholder="language==0?'请输入证件号':'Please enter the ID after ah'" />
        </el-form-item>
      </el-form>
-      <span class="dialog-footer">
+      <div class="dialog-footer">
        <div style="text-align: center">
-          <el-button class="can_pay" @click="show = false">{{ language == 0 ? '取 消' : 'cancel' }}</el-button>
+          <el-button class="can_pay marginBtn" @click="show = false">{{
-          <el-button class="pay" type="primary" @click="submit">{{ language == 0 ? '确 定' : 'confirm' }}</el-button>
+            language == 0 ? '取 消' : 'cancel'
+          }}
+          </el-button>
+          <el-button class="pay marginBtn" type="primary" @click="submit">{{
+            language == 0 ? '确 定' : 'confirm'
+          }}
+          </el-button>
        </div>
-      </span>
+      </div>
+      <br>
    </el-dialog>
  </el-card>
@@ -114,7 +121,7 @@ function submit() {
    useStore().setVisitor()
    return
  }
  formRef.value.validate((valid) => {
    if (valid) {
      aadCustomer(form.value).then(res => {
@@ -173,12 +180,12 @@ div {
 :deep(.el-dialog) {
  padding: 0;
  .el-dialog__header {
    height: 50px;
    line-height: 50px;
    background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
    .el-dialog__title {
      color: #fff;
    }
@@ -219,7 +226,7 @@ div {
  //}
  width: 1200px;
  margin: 20px auto;
  .title {
    position: relative;
    padding: 11px;
@@ -227,7 +234,7 @@ div {
    background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
    font-size: 18px;
    color: #ffffff;
    .add_btn {
      position: absolute;
      left: 20px;
@@ -247,32 +254,32 @@ div {
      cursor: pointer;
    }
  }
  .content {
    min-height: 590px;
    background-color: #fff;
    box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
    padding: 20px;
    .people_box {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      .people_item {
        width: 275px;
        height: 137px;
        background: #ffffff;
        border: 1px solid #dcdfe6;
        padding: 16px;
        .name {
          font-weight: 600;
          font-size: 16px;
          color: #2d373f;
          line-height: 22px;
        }
        .idcard {
          font-size: 16px;
          color: #95a1a6;
@@ -280,7 +287,7 @@ div {
          margin-top: 12px;
          margin-bottom: 17px;
        }
        .btn {
          width: 69px;
          height: 32px;
@@ -302,5 +309,12 @@ div {
  .container {
    width: 100%;
  }
+  form {
+    margin: 20px 20px 0 0 !important;
+  }
+}
+.marginBtn {
+  margin: 5px
 }
 </style>