1. 完成卖品和联名卡接口

src/components/ec_api/CinemaGoods.vue

@@ -0,0 +1,209 @@
+<script setup>
+import {defineProps, ref, reactive, computed, watch, onMounted, onBeforeMount} from 'vue'
+import {ec_api_set_user_data, ec_api_clear_user_data} from '@/apis/ec_api.js'
+import {ElMessage} from "element-plus";
+import PackageSelector from "@/components/ec_api/PackageSelector.vue";
+
+// 接收TabArea组件传递的参数
+const props = defineProps(['goods', 'data'])
+
+// 定义用户选择的场次变量
+const selectGoods = ref([])
+const goodsList = reactive([])
+
+// 定义可选套餐弹出对话框
+const goodsDialogVisible = ref(false)
+const optionalPackageInfo = ref({})
+
+// 处理用户选择的数据
+async function handle_set_user_data() {
+  let selectGoodsData = []
+  props.goods.forEach((item) => {
+    selectGoods.value.forEach((select) => {
+          if (select['id'] === item['id']) {
+            selectGoodsData.push(select)
+          }
+        }
+    )
+  })
+  const req_data = {
+    api: props.data.path,
+    member_type: props.data.type,
+    format: props.data.format,
+    user_data: JSON.stringify(selectGoodsData)
+  }
+  console.log('handle_set_user_data', req_data)
+  await ec_api_set_user_data(req_data).then(
+      (req) => {
+        if (req['result'] === 'success') {
+          ElMessage({message: '选择的卖品已做为后续测试数据！', type: 'success'})
+        } else {
+          ElMessage({message: '设置用户选择卖品数据失败！', type: 'error'})
+        }
+      }
+  ).catch(
+      (err) => {
+        console.log(err)
+        ElMessage({message: '设置用户选择卖品数据失败！', type: 'error'})
+      }
+  )
+}
+
+// 清除用户已选数据
+async function handle_clear_user_data() {
+  const req_data = {
+    api: props.data.path,
+    member_type: props.data.type,
+  }
+  console.log('handle_clear_user_data', req_data)
+  await ec_api_clear_user_data(req_data).then(
+      (req) => {
+        if (req['result'] === 'success') {
+          clearLocalData()
+          ElMessage({message: '选择的卖品已清除，推荐参数将使用随机值！', type: 'success'})
+        } else {
+          ElMessage({message: '清除用户选择卖品数据失败！', type: 'error'})
+        }
+      }
+  ).catch(
+      (err) => {
+        console.log(err)
+        ElMessage({message: '清除用户选择卖品数据失败！', type: 'error'})
+      }
+  )
+}
+
+// 点击可选套餐弹框控制
+function openOptionalPackageDialog(goods_type, goods_info) {
+  if (goods_type === '可选套餐') {
+    goodsDialogVisible.value = true
+    optionalPackageInfo.value = goods_info
+    console.log('可选套餐弹窗')
+  }
+}
+
+// 调整卖品数量
+function numChange(goods_id, goods_num) {
+  selectGoods.value.forEach((goods) => {
+    if (goods.id === goods_id) {
+      goods['buy_num'] = goods_num
+    }
+  })
+  handle_set_user_data()
+}
+
+function clearLocalData() {
+  selectGoods.value = []
+}
+
+// 子组件给父组件传参的回调函数
+const getOptionalPackageDetail = (select) => {
+  console.log('getOptionalPackageDetail', select)
+  goodsDialogVisible.value = false
+  selectGoods.value.forEach((item) => {
+    if (item.id === select.id) {
+      item['user_select'] = select['user_select']
+    }
+  })
+  handle_set_user_data()
+}
+
+
+onBeforeMount(() => {
+  // 挂载时生成用于展示的数据源
+  props.goods.forEach((item) => {
+    //  处理显示名称
+    item['show_name'] = item['id'] + '  ' + item['name']
+    // 处理卖品类型
+    if (item['type'] === 'package') {
+      item['show_type'] = item['packageType'] === '2' ? '可选套餐' : '固定套餐'
+      item['show_selector'] = item['packageType'] === '2'
+    } else {
+      item['show_type'] = '单品'
+      item['show_selector'] = false
+    }
+    // 处理卖品价格
+    if (item.hasOwnProperty('partnerPrice') && item['partnerPrice'] !== null) {
+      item['show_price'] = '合作商价：' + item['partnerPrice']
+    } else {
+      item['show_price'] = '网售价：' + item['onlinePrice']
+    }
+    // 设置购买数量
+    item['buy_num'] = 1
+    item['is_select'] = false
+
+    goodsList.push(item)
+  })
+})
+
+
+watch(() => selectGoods.value, () => {
+  console.log('selectGoods.value', selectGoods.value)
+  handle_set_user_data()
+})
+
+</script>
+
+<template>
+  <hr id="break_line"/>
+  <div style="font-size: 16px; font-weight: bold; color: #909399; text-align: left; margin-bottom: 10px">选择场次：
+    <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击清除选择后会将后台服务器中记录的选择内容清空，其他接口将通过随机获取的方式从此接口返回的数据中模拟参数"
+        placement="right"
+    >
+      <el-button size="small" style="font-weight: bold;color: #909399" @click="handle_clear_user_data">清除选择
+      </el-button>
+    </el-tooltip>
+  </div>
+  <el-form style="max-width: 1000px; margin-left: 20px">
+    <el-form-item>
+      <el-checkbox-group v-model="selectGoods">
+        <el-row v-for="g in goodsList" style="width: 1000px">
+          <el-col :span="5">
+            <el-checkbox-button :label="g" :value="g.id" :key="g.id"
+                                @change="openOptionalPackageDialog(g.show_type, g)">
+              <div style="margin-top: 5px"><span style="font-weight: bold">{{ g.show_name }}</span></div>
+              <div style="margin-top: 5px"><span>{{ g.show_price }}</span>&nbsp&nbsp<span
+                  style="font-weight: bold">{{ g.show_type }}</span></div>
+            </el-checkbox-button>
+          </el-col>
+          <el-col :span="6">
+            <el-input-number v-model="g['buy_num']" :min="0" style="margin-top: 15px"
+                             :disabled="g['is_select']" @change="numChange(g.id, g['buy_num'])"></el-input-number>
+          </el-col>
+        </el-row>
+      </el-checkbox-group>
+    </el-form-item>
+  </el-form>
+  <PackageSelector v-if="goodsDialogVisible" @get_detail="getOptionalPackageDetail" :is_show="goodsDialogVisible"
+                   :package="optionalPackageInfo"></PackageSelector>
+</template>
+
+<style scoped>
+#break_line {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  background-color: rgba(144, 147, 153, 0.5);
+  height: 1px;
+  border: none
+}
+
+:deep(.el-checkbox-button) {
+  margin-bottom: 10px;
+  margin-right: 15px;
+
+}
+
+:deep(.el-checkbox-button__inner) {
+  width: 450px;
+  height: 60px;
+  background: #ebebeb;
+  color: #333;
+  border: 0 !important;
+  border-radius: 10px !important;
+  text-align: left;
+}
+
+</style>

src/components/ec_api/EcardLevel.vue

@@ -0,0 +1,141 @@
+<script setup>
+import {ref, reactive, computed, watch, onMounted, onBeforeMount} from 'vue'
+import {ec_api_set_user_data, ec_api_clear_user_data} from '@/apis/ec_api.js'
+import {ElMessage} from "element-plus";
+
+// 接收TabArea组件传递的参数
+const props = defineProps(['level', 'data'])
+
+// 定义用户选择的场次变量
+const selectLevel = ref('')
+const levelList = reactive([])
+
+// 处理用户选择的数据
+async function handle_set_user_data() {
+  let selectLevelData = {}
+  props.level.forEach((item) => {
+    if (item['ecardLevelNo'] === selectLevel.value) {
+      selectLevelData = item
+    }
+  })
+  const req_data = {
+    api: props.data.path,
+    member_type: props.data.type,
+    format: props.data.format,
+    user_data: JSON.stringify(selectLevelData)
+  }
+  console.log('handle_set_user_data', req_data)
+  await ec_api_set_user_data(req_data).then(
+      (req) => {
+        if (req['result'] === 'success') {
+          ElMessage({message: '选择的联名卡级别已做为后续测试数据！', type: 'success'})
+        } else {
+          ElMessage({message: '设置用户选择联名卡级别数据失败！', type: 'error'})
+        }
+      }
+  ).catch(
+      (err) => {
+        console.log(err)
+        ElMessage({message: '设置用户选择联名卡级别数据失败！', type: 'error'})
+      }
+  )
+}
+
+async function handle_clear_user_data() {
+  const req_data = {
+    api: props.data.path,
+    member_type: props.data.type,
+  }
+  console.log('handle_clear_user_data', req_data)
+  await ec_api_clear_user_data(req_data).then(
+      (req) => {
+        if (req['result'] === 'success') {
+          ElMessage({message: '选择的联名卡级别已清除，推荐参数将使用随机值！', type: 'success'})
+        } else {
+          ElMessage({message: '清除用户选择联名卡级别数据失败！', type: 'error'})
+        }
+      }
+  ).catch(
+      (err) => {
+        console.log(err)
+        ElMessage({message: '清除用户选择联名卡级别数据失败！', type: 'error'})
+      }
+  )
+}
+
+onBeforeMount(() => {
+  console.log('EcardLevel onBeforeMount')
+  // 挂载时生成用于展示的数据源
+  props.level.forEach((item) => {
+    levelList.push({
+      key: item['ecardLevelNo'],
+      name: item['ecardLevelName'],
+      fee: item['registerFee'],
+      available: item['status'] === '1' ? '有效' : '无效',
+      renew: item['allowRenew'] === '2' ? '不可续费' : `可续费    续费${item['renewFee']}元`,
+      data: item
+    })
+  })
+})
+
+
+watch(() => selectLevel.value, () => {
+  console.log('selectLevel.value', selectLevel.value)
+  handle_set_user_data()
+})
+
+</script>
+
+<template>
+  <hr id="break_line"/>
+  <div style="font-size: 16px; font-weight: bold; color: #909399; text-align: left; margin-bottom: 10px">选择场次：
+    <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击清除选择后会将后台服务器中记录的选择内容清空，其他接口将通过随机获取的方式从此接口返回的数据中模拟参数"
+        placement="right"
+    >
+      <el-button size="small" style="font-weight: bold;color: #909399" @click="handle_clear_user_data">清除选择
+      </el-button>
+    </el-tooltip>
+  </div>
+  <el-form style="max-width: 600px; margin-left: 20px">
+    <el-form-item>
+      <el-radio-group v-model="selectLevel">
+        <el-radio-button v-for="s in levelList" :label="s.key" :value="s.key" :key="s.key" :disabled="s.available === '无效'">
+          <div style="text-align: left">
+            <div style="margin-top: 5px"><span>{{ s.key }}</span> -- <span style="font-weight: bold">{{ s.name }}</span> -- <span>{{s.available}}</span>
+            </div>
+            <div style="margin-top: 5px"><span>开卡费 {{ s.fee }} </span><span>&nbsp&nbsp&nbsp&nbsp{{s.renew}}</span></div>
+          </div>
+        </el-radio-button>
+      </el-radio-group>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped>
+#break_line {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  background-color: rgba(144, 147, 153, 0.5);
+  height: 1px;
+  border: none
+}
+
+:deep(.el-radio-button) {
+  margin-bottom: 10px;
+  margin-right: 15px;
+
+}
+
+:deep(.el-radio-button__inner) {
+  width: 400px;
+  height: 60px;
+  background: #ebebeb;
+  color: #333;
+  border: 0 !important;
+  border-radius: 10px !important;
+}
+
+</style>

src/components/ec_api/MovieShow.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {defineProps, ref, reactive, computed, watch, onMounted, onBeforeMount} from 'vue'
+import {ref, reactive, computed, watch, onMounted, onBeforeMount} from 'vue'
 import {ec_api_set_user_data, ec_api_clear_user_data} from '@/apis/ec_api.js'
 import {ElMessage} from "element-plus";
 

src/components/ec_api/PackageSelector.vue

@@ -0,0 +1,113 @@
+<script setup>
+import {ref, onBeforeMount, computed, watch, defineEmits} from "vue";
+
+// 注册本地变量
+const groupArray = ref([])  // 存储本地数据格式
+const activeGroup = ref(1)  // 保存当前激活标签
+const selectGoods = ref({})  // 存储用户选择数据
+
+// 注册props
+const props = defineProps(['is_show', 'package'])
+const packageDetail = props.package['optionalPackageDetail']
+
+// 注册emit
+const emit = defineEmits(['get_detail'])
+
+// 电商商品后将商品添加到对应的分组
+function addGoods(goods) {
+  if (selectGoods.value[activeGroup.value].data.length < selectGoods.value[activeGroup.value].num) {
+    selectGoods.value[activeGroup.value]['data'].push(goods)
+    selectGoods.value[activeGroup.value]['result'] = selectGoods.value[activeGroup.value]['data'].map((item) => item.name).join(', ')
+  } else {
+    alert('分组下卖品已完成选择！')
+  }
+}
+
+// 重新选择功能
+function reselect() {
+  selectGoods.value[activeGroup.value]['data'] = []
+  selectGoods.value[activeGroup.value]['result'] = ''
+}
+
+// 点击完成或关闭时检查是否完成选择
+function checkResult() {
+  const failedGroup = []
+  Object.entries(selectGoods.value).forEach((group) => {
+        if (group[1].num !== group[1].data.length) {
+          failedGroup.push(group[0])
+        }
+      }
+  )
+  if (failedGroup.length > 0) {
+    alert(`分组${failedGroup.join(', ')}中含有未完成的选择！`)
+    return false
+  }
+  return true
+}
+
+// 点击完成的逻辑
+function finish() {
+  if (checkResult()) {
+    props.package['user_select'] = selectGoods.value
+    emit('get_detail', props.package)
+  }
+}
+
+// 点击关闭按键前的处理
+function beforeClose(done) {
+  if (!checkResult()) {
+    return false
+  }else{
+    return done(true)
+  }
+}
+
+// 生命周期钩子
+onBeforeMount(() => {
+  console.log('PackageSelector onBeforeMount')
+  // 生成数据结构
+  packageDetail.forEach((group) => {
+    groupArray.value.push(group)
+    selectGoods.value[group['index']] = {
+      'num': group['gnum'],
+      'data': [],
+      'result': ''
+    }
+    // 如果可选卖品只有一个时则自动完成选择
+    if (group['members'].length === 1) {
+      for (let i = 0; i < selectGoods.value[group['index']]['num']; i++) {
+        selectGoods.value[group['index']]['data'].push(group['members'][0])
+        selectGoods.value[group['index']]['result'] = selectGoods.value[group['index']]['data'].map((item) => item.name).join(', ')
+      }
+    }
+  })
+})
+
+</script>
+
+<template>
+  <el-dialog v-model="props.is_show" :width="500" @close="finish" :before-close="beforeClose">
+    <el-tabs v-model="activeGroup" type="border-card">
+      <el-tab-pane v-for="group in groupArray" :label="`分组${group['index']}`" :name="group['index']">
+        <div style="text-align: left; font-weight: bold">需要选择{{ group['gnum'] }}个卖品
+          <el-button @click="reselect" size="small">重选</el-button>
+        </div>
+        <div style="text-align: left; font-weight: bold; margin-top: 10px">
+          <span :key="group['index']">已选择：{{ selectGoods[group['index']].result }}</span>
+        </div>
+        <div v-for="item in group['members']" style="margin-top: 10px">
+          <el-button @click="addGoods(item)">{{ item['name'] }} 附加费 {{ item['addPrice'] }}元</el-button>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="finish">完成</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+</style>

src/components/ec_api/SeatStatus.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {defineProps, ref, reactive, computed, watch, onMounted, onBeforeMount} from 'vue'
+import {ref, reactive, computed, watch, onMounted, onBeforeMount} from 'vue'
 import {ec_api_set_user_data, ec_api_clear_user_data} from '@/apis/ec_api.js'
 import {ElMessage} from "element-plus";
 

src/components/ec_api/TabArea.vue

@@ -15,6 +15,8 @@ import {VAceEditor} from "vue3-ace-editor";
 import {ElMessage} from "element-plus";
 import MovieShow from "@/components/ec_api/MovieShow.vue";
 import SeatStatus from "@/components/ec_api/SeatStatus.vue";
+import CinemaGoods from "@/components/ec_api/CinemaGoods.vue";
+import EcardLevel from "@/components/ec_api/EcardLevel.vue";
 
 
 // 注册store
@@ -302,14 +304,14 @@ const showList = computed(() => {
       if (api.response === '{"root": "root"}') {
         return []
       } else {
-        return api.handled['res']['data']
+        return api.handled['res']['data'] ? api.handled['res']['data'] : []
       }
     }
     if (api.format === 'xml' || api.format === 'html') {
       if (api.response === '<root></root>') {
         return []
       } else {
-        return api.handled['res']['data']
+        return api.handled['res']['data'] ? api.handled['res']['data'] : []
       }
     }
   }
@@ -320,6 +322,30 @@ const showList = computed(() => {
 const seatList = computed(() => {
   const api = UserApiData.value.api[activeTab.value]
   if (api.path === 'play/seat-status') {
+    if (api.format === 'json') {
+      if (api.response === '{"root": "root"}') {
+        return []
+      } else {
+        console.log("api.handled['res']['data']", api.handled['res']['data'])
+        return api.handled['res']['data'] ? api.handled['res']['data'] : []
+      }
+    }
+    if (api.format === 'xml' || api.format === 'html') {
+      if (api.response === '<root></root>') {
+        return []
+      } else {
+        console.log("api.handled['res']['data']", api.handled['res']['data'])
+        return api.handled['res']['data'] ? api.handled['res']['data'] : []
+      }
+    }
+  }
+  return []
+})
+
+// 计算属性用来处理卖品接口获取的数据，并同步给对应的选择模块
+const goodsList = computed(() => {
+  const api = UserApiData.value.api[activeTab.value]
+  if (api.path === 'cinema/goods') {
     if (api.format === 'json') {
       if (api.response === '{"root": "root"}') {
         return []
@@ -340,6 +366,30 @@ const seatList = computed(() => {
   return []
 })
 
+
+const levelList = computed(() => {
+  const api = UserApiData.value.api[activeTab.value]
+  if (api.path === 'ecard/ecard-levels') {
+    if (api.format === 'json') {
+      if (api.response === '{"root": "root"}') {
+        return []
+      } else {
+        console.log("api.handled['res']['data']['ecardLevelData']", api.handled['res']['data']['ecardLevelData'])
+        return api.handled['res']['data']['ecardLevelData']
+      }
+    }
+    if (api.format === 'xml' || api.format === 'html') {
+      if (api.response === '<root></root>') {
+        return []
+      } else {
+        console.log("api.handled['res']['data']['ecardLevelData']", api.handled['res']['data']['ecardLevelData'])
+        return api.handled['res']['data']['ecardLevelData']
+      }
+    }
+  }
+  return []
+})
+
 // 监测ec_select_api的变化 生成新的本地数据，如果当前选中的标签被取消勾选，则选择剩下标签的第一个
 watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
   console.log('watch store.state.ecApiModule.ec_api_data.api')
@@ -483,11 +533,13 @@ const ace_options = {
       </el-row>
       <v-ace-editor v-model:value="UserApiData.api[api['id']].response" :lang="UserApiData.api[api['id']]['format']"
                     theme="chrome" :options="ace_options" class="vue-ace-editor" :wrap="true" style="width: 1200px"/>
-
       <MovieShow v-if="showList.length > 0" :show="showList" :data="UserApiData.api[activeTab]"/>
       <SeatStatus v-if="seatList.length > 0" :seat="seatList" :data="UserApiData.api[activeTab]"/>
+      <CinemaGoods v-if="goodsList.length > 0" :goods="goodsList" :data="UserApiData.api[activeTab]"/>
+      <EcardLevel v-if="levelList.length > 0" :level="levelList" :data="UserApiData.api[activeTab]"/>
     </el-tab-pane>
   </el-tabs>
+  <el-backtop :right="100" :bottom="100" :visibility-height="200"/>
 </template>
 
 <style scoped>