完成锁座购票的选择项逻辑

src/components/ec_api/ApiLockBuySelector.vue

@@ -1,11 +1,30 @@
 <script setup>
+import {ref, watch} from 'vue'
+
+// 定义选择项
+const selectSaleType = ref('ticket')
+const selectPayType = ref('cash')
+
+// 定义emits
+const emits = defineEmits(["getSaleType", "getPayType"])
+
+// 检查售卖类型的变化
+watch( ()=>selectSaleType.value, ()=>{
+  emits("getSaleType", selectSaleType.value)
+})
+
+// 检查支付方式的变化
+watch( ()=>selectPayType.value, ()=>{
+  emits("getPayType", selectPayType.value)
+})
+
 
 </script>
 
 <template>
-  <el-row type="flex" justify="start" align="middle" style="margin-left: 20px">
+  <el-row type="flex" justify="start" align="middle" style="margin: 20px 0 10px 20px">
     <el-col :span="1" style="font-size: 14px; font-weight: bold; color: #919399;" class="col-right">售卖类型</el-col>
-    <el-col :span="5" class="col-left">
+    <el-col :span="6" class="col-left">
       <el-radio-group v-model="selectSaleType">
         <el-radio label="ticket">单影票</el-radio>
         <el-radio label="goods">单卖品</el-radio>
@@ -13,9 +32,9 @@
       </el-radio-group>
     </el-col>
   </el-row>
-  <el-row type="flex" justify="start" align="middle" style="margin-left: 20px">
+  <el-row type="flex" justify="start" align="middle" style="margin: 0 0 30px 20px">
     <el-col :span="1" style="font-size: 14px; font-weight: bold; color: #919399;" class="col-right">支付方式</el-col>
-    <el-col :span="5" class="col-left">
+    <el-col :span="7" class="col-left">
       <el-radio-group v-model="selectPayType">
         <el-radio label="cash">普通支付</el-radio>
         <el-radio label="ecard">联名卡</el-radio>
@@ -27,5 +46,18 @@
 </template>
 
 <style scoped>
+.col-right {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  height: 100%;
+}
 
+.col-left {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  height: 100%;
+  margin-left: 20px;
+}
 </style>

src/components/ec_api/TabArea.vue

@@ -18,6 +18,7 @@ import SeatStatus from "@/components/ec_api/SeatStatus.vue";
 import CinemaGoods from "@/components/ec_api/CinemaGoods.vue";
 import EcardLevel from "@/components/ec_api/EcardLevel.vue";
 import CheckQuan from "@/components/ec_api/CheckQuan.vue";
+import ApiLockBuySelector from "@/components/ec_api/ApiLockBuySelector.vue";
 
 
 // 注册store
@@ -63,7 +64,7 @@ function markIsChecked() {
     UserApiData.value.api[activeTab.value].params.forEach(item => {
       if (item['is_checked'] === true) {
         ApiTableRef.value[UserApiData.value.tab[activeTab.value]].toggleRowSelection(item, true)
-      }else{
+      } else {
         ApiTableRef.value[UserApiData.value.tab[activeTab.value]].toggleRowSelection(item, false)
       }
     })
@@ -248,7 +249,7 @@ function send_request() {
 
 }
 
-async function get_suggest(options={sale_type: saleType.value}) {
+async function get_suggest(options = {sale_type: saleType.value}) {
   if (UserApiData.value.api[activeTab.value].reload === true) {
     const api_type = UserApiData.value.api[activeTab.value].type
     const api = UserApiData.value.api[activeTab.value].path
@@ -295,40 +296,46 @@ async function get_timestamp() {
   })
 }
 
+// 通过传参来勾选和取消勾选字段
+function check_params(checked, unchecked) {
+  UserApiData.value.api[activeTab.value].params.forEach(param => {
+    if (checked.indexOf(param.param) >= 0) {
+      param.is_checked = true
+    }
+    if (unchecked.indexOf(param.param) >= 0) {
+      param.is_checked = false
+    }
+  })
+}
+
 // 获取售卖类型并自动勾选字段
 function get_sale_type(sale_type) {
   console.log('sale_type', sale_type)
   saleType.value = sale_type
   if (UserApiData.value.api[activeTab.value].path === "seat/check-coupon") {
-    if (saleType.value === 'ticket'){
+    switch (saleType.value) {
-      UserApiData.value.api[activeTab.value].params.forEach( param => {
+      case 'ticket':
-        if (["play_id", "price", "seat_num"].indexOf(param.param) >= 0) {
+        check_params(["play_id", "price", "seat_num"], ["goods"]);
-          param.is_checked = true
+        break;
-        }
+      case 'goods':
-        if (["goods"].indexOf(param.param) >= 0) {
+        check_params(["goods"], ["play_id", "price", "seat_num"]);
-          param.is_checked = false
+        break;
-        }
+      case 'all':
-      })
+        check_params(["play_id", "price", "seat_num", "goods"], []);
+        break;
     }
-    if (saleType.value === 'goods'){
+  }
-      UserApiData.value.api[activeTab.value].params.forEach( param => {
+  if (UserApiData.value.api[activeTab.value].path === "seat/lock-buy") {
-        if (["play_id", "price", "seat_num"].indexOf(param.param) >= 0) {
+    switch (saleType.value) {
-          param.is_checked = false
+      case 'ticket':
-        }
+        check_params(["play_id", "play_update_time", "seat", "lock_flag"], ["goods"]);
-        if (["goods"].indexOf(param.param) >= 0) {
+        break;
-          param.is_checked = true
+      case 'goods':
-        }
+        check_params(["goods"], ["play_id", "play_update_time", "seat", "lock_flag"]);
-      })
+        break;
-    }
+      case 'all':
-    if (saleType.value === 'all'){
+        check_params(["play_id", "play_update_time", "seat", "lock_flag", "goods"], []);
-      UserApiData.value.api[activeTab.value].params.forEach( param => {
+        break;
-        if (["play_id", "price", "seat_num"].indexOf(param.param) >= 0) {
-          param.is_checked = true
-        }
-        if (["goods"].indexOf(param.param) >= 0) {
-          param.is_checked = true
-        }
-      })
     }
   }
   markIsChecked()
@@ -339,7 +346,7 @@ function get_quan_detail(quan, cardQuan, quanType) {
   console.log('quanType', quanType)
   if (quanType === 'yushouquan') {
     console.log('yushouquan')
-    UserApiData.value.api[activeTab.value].params.forEach( param => {
+    UserApiData.value.api[activeTab.value].params.forEach(param => {
       if (param['param'] === 'coupons') {
         console.log('coupons', quan)
         param['value'] = quan.join(',')
@@ -351,7 +358,7 @@ function get_quan_detail(quan, cardQuan, quanType) {
       }
     })
   } else {
-    UserApiData.value.api[activeTab.value].params.forEach( param => {
+    UserApiData.value.api[activeTab.value].params.forEach(param => {
       if (param['param'] === 'card_coupons') {
         param['value'] = JSON.stringify(cardQuan)
         param['is_checked'] = true
@@ -367,6 +374,25 @@ function get_quan_detail(quan, cardQuan, quanType) {
   markIsChecked()
 }
 
+function get_pay_type(pay_type) {
+  console.log('pay_type', pay_type)
+  switch (pay_type) {
+    case 'cash':
+      check_params(["cash"], ["ecard_number", "coupons", "card_coupons"]);
+      break;
+    case 'ecard':
+      check_params(["cash", "ecard_number"], ["coupons", "card_coupons"]);
+      break;
+    case 'yushouquan':
+      check_params(["cash", "coupons"], ["ecard_number", "card_coupons"]);
+      break;
+    case 'equan':
+      check_params(["cash", "card_coupons"], ["ecard_number", "coupons"]);
+      break;
+  }
+  markIsChecked()
+}
+
 // 用于测试，可以添加到需要的方法中
 function test() {
   console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
@@ -566,6 +592,8 @@ const ace_options = {
     >
       <CheckQuan v-if="api['path'] === 'seat/check-coupon'" @getQuan="get_quan_detail" @getSaleType="get_sale_type"
                  :cid="UserApiData['base_info']['cinema']"></CheckQuan>
+      <ApiLockBuySelector v-if="api['path'] === 'seat/lock-buy'" @getSaleType="get_sale_type"
+                          @getPayType="get_pay_type"></ApiLockBuySelector>
       <el-table
           ref='ApiTableRef'
           :data="UserApiData.api[api['id']].params"