parent
aa4d107806
commit
024627801f
3 changed files with 298 additions and 1 deletions
@ -0,0 +1,234 @@ |
||||
<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"; |
||||
|
||||
// 接收TabArea组件传递的参数 |
||||
const props = defineProps(['seat', 'data']) |
||||
|
||||
// 定义用户选择的场次变量 |
||||
const selectSeats = ref([]) |
||||
const seatList = reactive({}) |
||||
const row_x = ref(0) |
||||
const col_y = ref(0) |
||||
const req_timer = ref(null) |
||||
|
||||
// 处理用户选择的数据 |
||||
async function handle_set_user_data() { |
||||
console.log('selectSeats.value', selectSeats.value) |
||||
let selectSeatData = [] |
||||
props.seat.forEach((item)=> { |
||||
if (selectSeats.value.indexOf(item['cineSeatId']) >= 0) { |
||||
selectSeatData.push(item) |
||||
} |
||||
}) |
||||
const req_data = { |
||||
api: props.data.path, |
||||
member_type: props.data.type, |
||||
format: props.data.format, |
||||
user_data: JSON.stringify(selectSeatData) |
||||
} |
||||
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'}) |
||||
} |
||||
) |
||||
clearTimeout(req_timer.value) |
||||
req_timer.value = null |
||||
} |
||||
|
||||
function delay_handle_user_data() { |
||||
if (req_timer.value === null) { |
||||
req_timer.value = setTimeout(()=>handle_set_user_data(), 1000) |
||||
} |
||||
} |
||||
|
||||
// 清除Redis中用户选择数据 |
||||
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('onBeforeMount') |
||||
handleSeatData() |
||||
}) |
||||
|
||||
// 处理座位逻辑 |
||||
function handleSeatData() { |
||||
let q = 1 |
||||
let m = 1 |
||||
let pairValueShuangTemp = '' |
||||
let pairValueMultiTemp = '' |
||||
row_x.value = parseInt(props.seat.slice(-1)[0]['x']) |
||||
// 挂载时生成用于展示的数据源 |
||||
props.seat.forEach((item) => { |
||||
item['key'] = item['cineSeatId'] |
||||
item['disable'] = item['seatStatus'] !== 'ok' || item['type'] === 'road' // 处理按键可选状态 |
||||
// 处理显示文案 |
||||
if (item['type'] === 'road') { |
||||
item['label'] = '' |
||||
} else { |
||||
item['label'] = item['rowValue'] + '-' + item['columnValue'] |
||||
} |
||||
// 处理按键名称 |
||||
switch (item['type']) { |
||||
case 'danren': |
||||
item['name'] = '单' |
||||
break; |
||||
case 'baoliu': |
||||
item['name'] = '保' |
||||
break; |
||||
case 'zhendong': |
||||
item['name'] = '震' |
||||
break; |
||||
case 'vip': |
||||
item['name'] = 'vip' |
||||
break; |
||||
case 'shuangren': |
||||
item['name'] = '情' |
||||
break; |
||||
case 'canji': |
||||
item['name'] = '残' |
||||
break; |
||||
case 'multi': |
||||
item['name'] = '多' |
||||
break; |
||||
} |
||||
// 处理情侣座和多人座椅 |
||||
if (item['pairValue'] !== '') { |
||||
if (item['type'] === 'shuangren') { |
||||
if (pairValueShuangTemp === '') { |
||||
pairValueShuangTemp = item['pairValue'] |
||||
item['name'] = item['name'] + '-' + q |
||||
}else{ |
||||
if (item['pairValue'] === pairValueShuangTemp) { |
||||
item['name'] = item['name'] + '-' + q |
||||
}else{ |
||||
q++ |
||||
pairValueShuangTemp = item['pairValue'] |
||||
item['name'] = item['name'] + '-' + q |
||||
} |
||||
} |
||||
} |
||||
if (item['type'] === 'multi') { |
||||
if (pairValueMultiTemp === '') { |
||||
pairValueMultiTemp = item['pairValue'] |
||||
item['name'] = item['name'] + '-' + m |
||||
}else{ |
||||
if (item['pairValue'] === pairValueMultiTemp) { |
||||
item['name'] = item['name'] + '-' + m |
||||
}else{ |
||||
m++ |
||||
pairValueMultiTemp = item['pairValue'] |
||||
item['name'] = item['name'] + '-' + m |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (!seatList.hasOwnProperty(item['x'])) { |
||||
seatList[item['x']] = [] |
||||
} |
||||
seatList[item['x']].push(item) |
||||
}) |
||||
console.log('seatList', seatList) |
||||
} |
||||
|
||||
|
||||
watch(() => selectSeats.value, () => { |
||||
clearTimeout(req_timer.value) |
||||
req_timer.value = null |
||||
delay_handle_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> |
||||
<div style="max-width: 1240px; overflow: auto"> |
||||
<el-form style="max-width: 600px; margin-left: 20px"> |
||||
<el-form-item> |
||||
<el-checkbox-group v-model="selectSeats"> |
||||
<div class="seat-row" v-for="r in row_x"> |
||||
<el-checkbox-button v-for="seat in seatList[r]" :label="seat['key']" :key="seat['key']" |
||||
:disabled="seat['disable']"> |
||||
<span>{{ seat['label'] }}</span><br> |
||||
<span>{{ seat['name'] }}</span> |
||||
</el-checkbox-button> |
||||
</div> |
||||
</el-checkbox-group> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
|
||||
</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: 60px; |
||||
height: 60px; |
||||
align-content: center; |
||||
background: #ebebeb; |
||||
color: #333; |
||||
border: 0 !important; |
||||
border-radius: 10px !important; |
||||
} |
||||
|
||||
.seat-row { |
||||
display: flex; |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue