Compare commits
25 Commits
| Author | SHA1 | Date |
|---|---|---|
 RogerWork
|
b8b50efadc | 2 weeks ago |
|
RogerWork
|
2465bb696d | 1 month ago |
|
RogerWork
|
4d9b592ef4 | 1 month ago |
|
RogerWork
|
0a370cd1d0 | 2 months ago |
|
RogerWork
|
a74490afd8 | 2 months ago |
|
RogerWork
|
e8e0b0860f | 3 months ago |
|
RogerWork
|
024627801f | 3 months ago |
|
RogerWork
|
aa4d107806 | 3 months ago |
|
RogerWork
|
73825303c9 | 3 months ago |
|
RogerWork
|
f31a304359 | 3 months ago |
|
RogerWork
|
3ad2bc10a3 | 3 months ago |
|
RogerWork
|
a928823497 | 3 months ago |
|
RogerWork
|
d16ea26dea | 3 months ago |
|
RogerWork
|
15f2edc594 | 3 months ago |
|
RogerWork
|
12441cfb0c | 3 months ago |
|
RogerWork
|
34c5d2e180 | 3 months ago |
|
RogerWork
|
56f661fe4d | 4 months ago |
|
RogerWork
|
1a2ba162cf | 4 months ago |
|
RogerWork
|
97eb387f10 | 4 months ago |
|
RogerWork
|
16ac0df5b6 | 4 months ago |
|
RogerWork
|
adbe61b2e9 | 4 months ago |
|
RogerWork
|
7c2d423419 | 4 months ago |
|
RogerWork
|
2987a25871 | 4 months ago |
|
RogerWork
|
eaaa4286e5 | 4 months ago |
|
RogerWork
|
d911bafdfc | 5 months ago |
30 changed files with 3380 additions and 429 deletions
|
After Width: | Height: | Size: 266 KiB |
@ -0,0 +1,59 @@ |
|||||||
|
// ace配置，使用动态加载来避免第一次加载开销
|
||||||
|
import ace from 'ace-builds' |
||||||
|
|
||||||
|
// 导入不同的主题模块，并设置对应 URL
|
||||||
|
import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url' |
||||||
|
ace.config.setModuleUrl('ace/theme/github', themeGithubUrl) |
||||||
|
|
||||||
|
import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url' |
||||||
|
ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl) |
||||||
|
|
||||||
|
import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url' |
||||||
|
ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl) |
||||||
|
|
||||||
|
// 导入不同语言的语法模式模块，并设置对应 URL (所有支持的主题和模式：node_modules/ace-builds/src-noconflict)
|
||||||
|
import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url' |
||||||
|
ace.config.setModuleUrl('ace/mode/json', modeJsonUrl) |
||||||
|
|
||||||
|
import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url' |
||||||
|
ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl) |
||||||
|
|
||||||
|
import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url' |
||||||
|
ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl) |
||||||
|
|
||||||
|
import modePythonUrl from 'ace-builds/src-noconflict/mode-python?url' |
||||||
|
ace.config.setModuleUrl('ace/mode/yaml', modePythonUrl) |
||||||
|
|
||||||
|
// 用于完成语法检查、代码提示、自动补全等代码编辑功能，必须注册模块 ace/mode/lang _ worker，并设置选项 useWorker: true
|
||||||
|
import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url' |
||||||
|
ace.config.setModuleUrl('ace/mode/base', workerBaseUrl) |
||||||
|
|
||||||
|
import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url' // for vite
|
||||||
|
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl) |
||||||
|
|
||||||
|
import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url' |
||||||
|
ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl) |
||||||
|
|
||||||
|
import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url' |
||||||
|
ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl) |
||||||
|
|
||||||
|
// 导入不同语言的代码片段，提供代码自动补全和代码块功能
|
||||||
|
import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url' |
||||||
|
ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl) |
||||||
|
|
||||||
|
import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url' |
||||||
|
ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl) |
||||||
|
|
||||||
|
import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url' |
||||||
|
ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl) |
||||||
|
|
||||||
|
import snippetsPyhontUrl from 'ace-builds/src-noconflict/snippets/python?url' |
||||||
|
ace.config.setModuleUrl('ace/snippets/javascript', snippetsPyhontUrl) |
||||||
|
|
||||||
|
// 启用自动补全等高级编辑支持，
|
||||||
|
import extSearchboxUrl from 'ace-builds/src-noconflict/ext-searchbox?url' |
||||||
|
ace.config.setModuleUrl('ace/ext/searchbox', extSearchboxUrl) |
||||||
|
|
||||||
|
// 启用自动补全等高级编辑支持
|
||||||
|
// import 'ace-builds/src-noconflict/ext-language_tools'
|
||||||
|
// ace.require('ace/ext/language_tools')
|
||||||
@ -0,0 +1,171 @@ |
|||||||
|
import request from "@/request/index.js"; |
||||||
|
|
||||||
|
export const get_ec_api_env = () => { |
||||||
|
return request({ |
||||||
|
url: 'ec/get_env', |
||||||
|
method: 'get', |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const get_ec_api_cinema = () => { |
||||||
|
return request({ |
||||||
|
url: 'ec/get_cinema_ids', |
||||||
|
method: 'get', |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export const get_ec_api_channel = () => { |
||||||
|
return request({ |
||||||
|
url: 'ec/get_channel', |
||||||
|
method: 'get', |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export const get_ec_api_api = (api_type) => { |
||||||
|
return request({ |
||||||
|
url: 'ec/get_api', |
||||||
|
method: 'get', |
||||||
|
params: { |
||||||
|
type: api_type |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export const get_ec_api_api_params = (api_id) => { |
||||||
|
return request({ |
||||||
|
url: 'ec/get_api_params', |
||||||
|
method: 'get', |
||||||
|
params: { |
||||||
|
api_id: api_id |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
export const get_ec_api_api_params_by_type = (api_type) => { |
||||||
|
return request({ |
||||||
|
url: 'ec/get_params_by_type', |
||||||
|
method: 'get', |
||||||
|
params: { |
||||||
|
type: api_type |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const get_ec_api_api_group = (api_type) => { |
||||||
|
return request({ |
||||||
|
url: 'ec/get_api_group', |
||||||
|
method: 'get', |
||||||
|
params: { |
||||||
|
type: api_type |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const get_ec_api_request_url = (req_data) => { |
||||||
|
return request({ |
||||||
|
url: 'ec/get_url', |
||||||
|
method: 'post', |
||||||
|
data: { |
||||||
|
env: req_data.env, |
||||||
|
member_type: req_data.type, |
||||||
|
api: req_data.api, |
||||||
|
params: req_data.params |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const ec_api_send_request = (req_data) => { |
||||||
|
return request({ |
||||||
|
url: 'ec/send_request', |
||||||
|
method: 'post', |
||||||
|
data: { |
||||||
|
env: req_data.env, |
||||||
|
member_type: req_data.type, |
||||||
|
api: req_data.api, |
||||||
|
cid: req_data.cid, |
||||||
|
pid: req_data.pid, |
||||||
|
params: req_data.params, |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const ec_api_get_suggest = (api_type, api, env, cid, pid, options) => { |
||||||
|
let req_params = { |
||||||
|
member_type: api_type, |
||||||
|
api: api, |
||||||
|
env: env, |
||||||
|
cid: cid, |
||||||
|
pid: pid, |
||||||
|
} |
||||||
|
console.log('ec_api_get_suggest -- options', options) |
||||||
|
if (options) { |
||||||
|
req_params['options'] = options |
||||||
|
} |
||||||
|
return request({ |
||||||
|
url: 'ec/get_suggest_params', |
||||||
|
method: 'get', |
||||||
|
params: req_params |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const ec_api_get_suggest_timestamp = (api_type, api, env, cid, pid, options = null) => { |
||||||
|
let req_params = { |
||||||
|
member_type: api_type, |
||||||
|
api: api, |
||||||
|
env: env, |
||||||
|
cid: cid, |
||||||
|
pid: pid, |
||||||
|
} |
||||||
|
if (options !== null) { |
||||||
|
req_params['options'] = options |
||||||
|
} |
||||||
|
return request({ |
||||||
|
url: 'ec/get_suggest_params_timestamp', |
||||||
|
method: 'get', |
||||||
|
params: req_params |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const ec_api_set_user_data = (req_data) => { |
||||||
|
return request({ |
||||||
|
url: 'ec/set_user_data', |
||||||
|
method: 'post', |
||||||
|
data: { |
||||||
|
api: req_data.api, |
||||||
|
member_type: req_data.member_type, |
||||||
|
format: req_data.format, |
||||||
|
user_data: req_data.user_data, |
||||||
|
env: req_data.env, |
||||||
|
cid: req_data.cid, |
||||||
|
pid: req_data.pid, |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const ec_api_clear_user_data = (req_data) => { |
||||||
|
return request({ |
||||||
|
url: 'ec/clear_user_data', |
||||||
|
method: 'post', |
||||||
|
data: { |
||||||
|
api: req_data.api, |
||||||
|
member_type: req_data.member_type, |
||||||
|
env: req_data.env, |
||||||
|
cid: req_data.cid, |
||||||
|
pid: req_data.pid, |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export const get_ec_api_get_quan = (cid, card) => { |
||||||
|
return request({ |
||||||
|
url: 'ec/get_quan', |
||||||
|
method: 'get', |
||||||
|
params: { |
||||||
|
cid: cid, |
||||||
|
card_num: card |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
<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: 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="6" class="col-left"> |
||||||
|
<el-radio-group v-model="selectSaleType"> |
||||||
|
<el-radio label="ticket">单影票</el-radio> |
||||||
|
<el-radio label="goods">单卖品</el-radio> |
||||||
|
<el-radio label="all">影票加卖品</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<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="7" class="col-left"> |
||||||
|
<el-radio-group v-model="selectPayType"> |
||||||
|
<el-radio label="cash">普通支付</el-radio> |
||||||
|
<el-radio label="ecard">联名卡</el-radio> |
||||||
|
<el-radio label="yushouquan">扫码券</el-radio> |
||||||
|
<el-radio label="equan">会员卡赠券</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</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> |
||||||
@ -0,0 +1,323 @@ |
|||||||
|
<script setup> |
||||||
|
import { |
||||||
|
get_ec_api_env, |
||||||
|
get_ec_api_cinema, |
||||||
|
get_ec_api_channel, |
||||||
|
get_ec_api_api, |
||||||
|
get_ec_api_api_group, |
||||||
|
get_ec_api_api_params, |
||||||
|
get_ec_api_api_params_by_type |
||||||
|
} from "@/apis/ec_api.js"; |
||||||
|
import {ref, reactive, toRefs} from "vue"; |
||||||
|
import {onMounted} from "vue"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import {change_cinema_user} from "@/apis/update.js"; |
||||||
|
|
||||||
|
|
||||||
|
// 注册store |
||||||
|
const store = useStore() |
||||||
|
|
||||||
|
// 定义环境相关变量 |
||||||
|
const Env = ref({}) |
||||||
|
const EnvArray = ref([]) |
||||||
|
const SelectEnv = ref('') |
||||||
|
|
||||||
|
// 定义影院相关变量 |
||||||
|
const Cinema = ref({}) |
||||||
|
let CinemaByEnv = ref([]) |
||||||
|
const SelectCinema = ref('') |
||||||
|
|
||||||
|
// 定义接口类型 |
||||||
|
const ApiType = ref([{name: "非会员", value: "nonmember"}, {name: "会员", value: "member"}]) |
||||||
|
const SelectType = ref('') |
||||||
|
|
||||||
|
// 定义渠道相关变量 |
||||||
|
const Channel = ref({}) |
||||||
|
let ChannelByType = ref([]) |
||||||
|
const SelectChannel = ref('') |
||||||
|
|
||||||
|
// 定义接口相关变量 |
||||||
|
const Api = ref([]) // 存储接口数据 |
||||||
|
const SelectApiId = ref([]) // 存储选择的接口 |
||||||
|
const SelectApi = ref([]) // 存储选择的接口 |
||||||
|
|
||||||
|
// 定义接口组相关变量 |
||||||
|
const ApiGroup = ref({}) |
||||||
|
const SelectApiGroup = ref([]) |
||||||
|
|
||||||
|
// 定义接口参数 |
||||||
|
const ApiParams = ref({}) |
||||||
|
const SelectApiParams = ref({}) |
||||||
|
|
||||||
|
|
||||||
|
// 通过环境计算影院 |
||||||
|
function env_on_change() { |
||||||
|
// 初始化值 |
||||||
|
CinemaByEnv.value = [] |
||||||
|
SelectCinema.value = '' |
||||||
|
SelectType.value = '' |
||||||
|
SelectChannel.value = '' |
||||||
|
// 处理计算逻辑 |
||||||
|
Cinema.value.forEach(data => { |
||||||
|
if (data.env === SelectEnv.value) { |
||||||
|
CinemaByEnv.value.push(data) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 通过类型和环境计算渠道 |
||||||
|
function type_on_change() { |
||||||
|
// 重置数据 |
||||||
|
ChannelByType.value = [] |
||||||
|
SelectChannel.value = '' |
||||||
|
SelectApiId.value = [] |
||||||
|
SelectApiGroup.value = [] |
||||||
|
// 计算渠道 |
||||||
|
Channel.value.forEach(data => { |
||||||
|
if (data.type === SelectType.value && data.env === SelectEnv.value) { |
||||||
|
ChannelByType.value.push(data) |
||||||
|
} |
||||||
|
}) |
||||||
|
// 获取接口组数据 |
||||||
|
get_api_group_by_type(SelectType.value) |
||||||
|
// 获取接口数据 |
||||||
|
get_api_by_type(SelectType.value) |
||||||
|
// 获取接口参数 |
||||||
|
get_api_params_by_type(SelectType.value) |
||||||
|
} |
||||||
|
|
||||||
|
function basic_info_change() { |
||||||
|
store_data() |
||||||
|
} |
||||||
|
|
||||||
|
// 获取环境 |
||||||
|
async function get_api_env() { |
||||||
|
await get_ec_api_env().then(res => { |
||||||
|
Env.value = res |
||||||
|
Env.value.forEach(data => { |
||||||
|
if (!EnvArray.value.some(item => item.name === data.name)) { |
||||||
|
EnvArray.value.push({name: data.name, code: data.code}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// 获取影院 |
||||||
|
async function get_api_cinema() { |
||||||
|
get_ec_api_cinema().then(res => { |
||||||
|
Cinema.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取渠道 |
||||||
|
async function get_api_channel() { |
||||||
|
await get_ec_api_channel().then(res => { |
||||||
|
Channel.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取接口 |
||||||
|
async function get_api_by_type(api_type) { |
||||||
|
await get_ec_api_api(api_type).then(res => { |
||||||
|
Api.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取 接口组 |
||||||
|
async function get_api_group_by_type(api_type) { |
||||||
|
await get_ec_api_api_group(api_type).then(res => { |
||||||
|
ApiGroup.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取 接口参数 |
||||||
|
async function get_api_params_by_type(api_type) { |
||||||
|
await get_ec_api_api_params_by_type(api_type).then(res => { |
||||||
|
ApiParams.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// OnChange相关 |
||||||
|
// 选择接口组后自动勾选接口 |
||||||
|
function api_group_on_change() { |
||||||
|
SelectApiId.value = JSON.parse(String(SelectApiGroup.value)) |
||||||
|
handle_api_data() |
||||||
|
store_data() |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// 修改了接口后，取消选择接口组 |
||||||
|
function api_on_change() { |
||||||
|
SelectApiGroup.value = [] |
||||||
|
handle_api_data() |
||||||
|
store_data() |
||||||
|
} |
||||||
|
|
||||||
|
function handle_api_data() { |
||||||
|
// 生成被选择的api的数组 |
||||||
|
SelectApi.value = [] |
||||||
|
SelectApiId.value.forEach(api_id => { |
||||||
|
Api.value.forEach(api => { |
||||||
|
if (api.id === api_id) { |
||||||
|
SelectApi.value.push(api) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
// 更新first_tab_api对应的值 |
||||||
|
store.state.ecApiModule.first_tab_api_id = SelectApi.value[0] ? SelectApi.value[0]['id'] : 0 |
||||||
|
// 生成被选择的api参数对象 |
||||||
|
SelectApiId.value.forEach(api_id => { |
||||||
|
if (ApiParams.value.hasOwnProperty(api_id)) { |
||||||
|
SelectApiParams.value[api_id] = ApiParams.value[api_id] |
||||||
|
SelectApiParams.value[api_id].forEach(item => item['is_preset'] = true) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 生成共享数据 |
||||||
|
function store_data() { |
||||||
|
let select_data = ref({ |
||||||
|
env: SelectEnv.value, |
||||||
|
cinema: SelectCinema.value, |
||||||
|
channel: SelectChannel.value, |
||||||
|
select_api_id: SelectApiId.value, |
||||||
|
type: SelectType.value, |
||||||
|
api_group: SelectApiGroup.value, |
||||||
|
cinema_env: CinemaByEnv.value, |
||||||
|
channel_type: ChannelByType.value, |
||||||
|
select_api: SelectApi.value, |
||||||
|
api: SelectApi.value, |
||||||
|
api_params: SelectApiParams.value |
||||||
|
}) |
||||||
|
// 写入store |
||||||
|
store.commit('ecApiModule/add_ec_api_data', select_data.value) |
||||||
|
store.commit('ecApiModule/change_ec_select_api', SelectApi.value) |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
console.log('onMounted BasicConfig') |
||||||
|
SelectType.value = store.state.ecApiModule.ec_api_data.type |
||||||
|
// 获取环境 |
||||||
|
get_api_env() |
||||||
|
// 获取影院 |
||||||
|
get_api_cinema() |
||||||
|
// 获取渠道 |
||||||
|
get_api_channel() |
||||||
|
// 获取接口组数据 |
||||||
|
get_api_group_by_type(SelectType.value) |
||||||
|
// 获取接口数据 |
||||||
|
get_api_by_type(SelectType.value) |
||||||
|
// 获取接口参数 |
||||||
|
get_api_params_by_type(SelectType.value) |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="row-container"> |
||||||
|
<el-row justify="start"> |
||||||
|
<el-col :span="6"> |
||||||
|
<label class="name-label">环境：</label> |
||||||
|
<el-select v-model="SelectEnv" placeholder="请选择" style="width: 240px" size="default" |
||||||
|
@change="env_on_change"> |
||||||
|
<el-option |
||||||
|
v-for="item in EnvArray" |
||||||
|
:key="item.code" |
||||||
|
:label="item.name" |
||||||
|
:value="item.code" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<label class="name-label">影院：</label> |
||||||
|
<el-select v-model="SelectCinema" placeholder="请选择" style="width: 160px" size="default" |
||||||
|
@change="basic_info_change"> |
||||||
|
<el-option |
||||||
|
v-for="item in CinemaByEnv" |
||||||
|
:key="item.id" |
||||||
|
:label="item.cinema_name" |
||||||
|
:value="item.cid" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<label class="name-label">接口类型：</label> |
||||||
|
<el-select v-model="SelectType" placeholder="请选择" style="width: 120px" size="default" |
||||||
|
@change="type_on_change"> |
||||||
|
<el-option |
||||||
|
v-for="item in ApiType" |
||||||
|
:key="item.value" |
||||||
|
:label="item.name" |
||||||
|
:value="item.value" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<label class="name-label">渠道：</label> |
||||||
|
<el-select v-model="SelectChannel" placeholder="请选择" style="width: 160px" size="default" |
||||||
|
@change="basic_info_change"> |
||||||
|
<el-option |
||||||
|
v-for="item in ChannelByType" |
||||||
|
:key="item.id" |
||||||
|
:label="item.name" |
||||||
|
:value="item.pid" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<div class="row-container"> |
||||||
|
<el-row justify="start"> |
||||||
|
<el-col :span="6"> |
||||||
|
<label class="name-label">常用场景：</label> |
||||||
|
<el-select v-model="SelectApiGroup" placeholder="请选择" style="width: 240px" size="default" |
||||||
|
@change="api_group_on_change"> |
||||||
|
<el-option |
||||||
|
v-for="item in ApiGroup" |
||||||
|
:key="item.group_id" |
||||||
|
:label="item.name" |
||||||
|
:value="item.api_id" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<div class="row-container"> |
||||||
|
<el-row justify="start"> |
||||||
|
<el-col :span="6"> |
||||||
|
<label class="name-label">接口：</label> |
||||||
|
|
||||||
|
<el-select v-model="SelectApiId" placeholder="请选择" style="width: 240px" size="default" multiple collapse-tags filterable |
||||||
|
collapse-tags-tooltip :clearable="true" @change="api_on_change"> |
||||||
|
<el-option |
||||||
|
v-for="item in Api" |
||||||
|
:key="item.id" |
||||||
|
:label="item.description" |
||||||
|
:value="item.id" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.row-container { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.name-label { |
||||||
|
width: 80px; |
||||||
|
display: inline-block; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,186 @@ |
|||||||
|
<script setup> |
||||||
|
import {ref, watch, onBeforeMount} from 'vue' |
||||||
|
import {get_ec_api_get_quan} from "@/apis/ec_api.js"; |
||||||
|
|
||||||
|
// 定义props接收父组件参数 |
||||||
|
const props = defineProps(['cid']) |
||||||
|
// 定义emits用于回传参数 |
||||||
|
const emits = defineEmits(['getQuan', 'getSaleType']) |
||||||
|
|
||||||
|
// 用于标记券类型 |
||||||
|
const quan_type = ref('yushouquan') |
||||||
|
|
||||||
|
// 券属性 |
||||||
|
const quanArray = ref([]) |
||||||
|
const selectQuan = ref([]) |
||||||
|
|
||||||
|
// 卡券属性 |
||||||
|
const cardNum = ref('') |
||||||
|
const cardQuanArray = ref([]) |
||||||
|
const selectCardQuan = ref() |
||||||
|
const selectCardQuanArray = ref([]) |
||||||
|
const useCardQuanNum = ref(1) |
||||||
|
const useCardQuanNumMax = ref(1) |
||||||
|
const allSelectCardQuan = ref([]) |
||||||
|
|
||||||
|
// 售卖类型 |
||||||
|
const selectSaleType = ref('ticket') |
||||||
|
|
||||||
|
// 通过接口获取券信息 |
||||||
|
async function get_quan() { |
||||||
|
console.log('get_quan') |
||||||
|
await get_ec_api_get_quan(props.cid, cardNum.value).then( |
||||||
|
res => { |
||||||
|
quanArray.value = res.quan |
||||||
|
cardQuanArray.value = res.card_quan |
||||||
|
cardQuanArray.value.forEach(item => { |
||||||
|
item['label'] = item['cinema_quan_name'] + ' 可用数量' + item['quan_remain_nums'] |
||||||
|
}) |
||||||
|
console.log('quanArray.value', quanArray.value) |
||||||
|
console.log('cardQuanArray.value', cardQuanArray.value) |
||||||
|
} |
||||||
|
).catch( |
||||||
|
err => { |
||||||
|
console.log(err) |
||||||
|
} |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
// 点击会员卡券的查询时请求接口获取券信息 |
||||||
|
function get_card_quan() { |
||||||
|
if (cardNum.value === '') { |
||||||
|
alert('请输入卡号后查询！') |
||||||
|
return |
||||||
|
} |
||||||
|
get_quan() |
||||||
|
} |
||||||
|
|
||||||
|
// 追加卡券到已选数据中 |
||||||
|
function add_card_quan() { |
||||||
|
cardQuanArray.value.forEach(item => { |
||||||
|
if (item['card_quan_order_id'] === selectCardQuan.value) { |
||||||
|
if (selectCardQuanArray.value.indexOf(selectCardQuan.value) < 0) { |
||||||
|
allSelectCardQuan.value.push( |
||||||
|
{ |
||||||
|
'card_num': cardNum.value, |
||||||
|
'card_coupon_order_id': selectCardQuan.value, |
||||||
|
'num': useCardQuanNum.value |
||||||
|
} |
||||||
|
) |
||||||
|
selectCardQuanArray.value.push(selectCardQuan.value) |
||||||
|
}else{ |
||||||
|
alert('此卡券已添加请选择其他卡券！') |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
console.log('allSelectCardQuan.value', allSelectCardQuan.value) |
||||||
|
console.log('checkQuan-') |
||||||
|
emits('getQuan', selectQuan.value, allSelectCardQuan.value, quan_type.value) |
||||||
|
} |
||||||
|
|
||||||
|
function clear_card_quan() { |
||||||
|
allSelectCardQuan.value = [] |
||||||
|
selectCardQuanArray.value = [] |
||||||
|
emits('getQuan', selectQuan.value, allSelectCardQuan.value, quan_type.value) |
||||||
|
} |
||||||
|
|
||||||
|
onBeforeMount(() => { |
||||||
|
get_quan() |
||||||
|
}) |
||||||
|
|
||||||
|
// 监视选择的券，如果变化则回调父组件 |
||||||
|
watch(() => selectQuan.value, () => { |
||||||
|
console.log('selectQuan', selectQuan.value) |
||||||
|
console.log('selectSaleType.value', selectSaleType.value) |
||||||
|
emits('getQuan', selectQuan.value, allSelectCardQuan.value, quan_type.value) |
||||||
|
}) |
||||||
|
|
||||||
|
// 监视选择的卡券 |
||||||
|
watch(() => selectCardQuan.value, () => { |
||||||
|
cardQuanArray.value.forEach(item => { |
||||||
|
if (item['card_quan_order_id'] === selectCardQuan.value) { |
||||||
|
useCardQuanNumMax.value = item['quan_remain_nums'] |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
watch( ()=>selectSaleType.value, () => { |
||||||
|
emits('getSaleType', selectSaleType.value) |
||||||
|
}) |
||||||
|
|
||||||
|
// 测试用方法 |
||||||
|
function test() { |
||||||
|
console.log('selectCardQuan', selectCardQuan.value) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row type="flex" justify="start" align="middle" style="margin-left: 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-radio-group v-model="selectSaleType"> |
||||||
|
<el-radio label="ticket">单影票</el-radio> |
||||||
|
<el-radio label="goods">单卖品</el-radio> |
||||||
|
<el-radio label="all">影票加卖品</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row type="flex" justify="start" align="middle" style="margin: 20px 0 0 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-radio-group v-model="quan_type" @change="test"> |
||||||
|
<el-radio label="yushouquan">扫码券</el-radio> |
||||||
|
<el-radio label="equan">会员卡赠券</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row v-if="quan_type==='yushouquan'" style="margin: 20px 0 30px 100px"> |
||||||
|
<el-select-v2 |
||||||
|
v-model="selectQuan" |
||||||
|
filterable |
||||||
|
:options="quanArray" |
||||||
|
placeholder="选择券，可多选" |
||||||
|
multiple |
||||||
|
clearable="clearable" |
||||||
|
collapse-tags |
||||||
|
collapse-tags-tooltip |
||||||
|
:max-collapse-tags="2" |
||||||
|
style="width: 460px" |
||||||
|
/> |
||||||
|
</el-row> |
||||||
|
<el-row v-if="quan_type==='equan'" style="margin: 20px 0 30px 100px"> |
||||||
|
<el-input style="width: 240px; margin-right: 20px" v-model="cardNum"></el-input> |
||||||
|
<el-button style="margin-right: 20px" @click="get_card_quan">查找</el-button> |
||||||
|
<el-select v-model="selectCardQuan" placeholder="选择卡内赠券" |
||||||
|
clearable="clearable" style="margin-right: 20px"> |
||||||
|
<el-option v-for="item in cardQuanArray" :key="item['card_quan_order_id']" :label="item['label']" |
||||||
|
:value="item['card_quan_order_id']"> |
||||||
|
{{ item['label'] }} |
||||||
|
</el-option> |
||||||
|
|
||||||
|
</el-select> |
||||||
|
<el-input-number v-model="useCardQuanNum" :min="1" :max="useCardQuanNumMax" |
||||||
|
style="margin-right: 20px"></el-input-number> |
||||||
|
<el-button @click="add_card_quan">追加</el-button> |
||||||
|
<el-button @click="clear_card_quan">重选</el-button> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</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> |
||||||
@ -0,0 +1,244 @@ |
|||||||
|
<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"; |
||||||
|
import PackageSelector from "@/components/ec_api/PackageSelector.vue"; |
||||||
|
import GoodsDiscount from "@/components/ec_api/GoodsDiscount.vue"; |
||||||
|
|
||||||
|
// 接收TabArea组件传递的参数 |
||||||
|
const props = defineProps(['goods', 'data', 'base_info']) |
||||||
|
|
||||||
|
// 定义用户选择的场次变量 |
||||||
|
const selectGoods = ref([]) |
||||||
|
const goodsList = reactive([]) |
||||||
|
|
||||||
|
// 定义可选套餐弹出对话框 |
||||||
|
const goodsDialogVisible = ref(false) |
||||||
|
const optionalPackageInfo = ref({}) |
||||||
|
|
||||||
|
// 卖品折扣弹出对话框 |
||||||
|
const discountDialogVisible = ref(false) |
||||||
|
const discountDetail = 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), |
||||||
|
env: props.base_info.env, |
||||||
|
cid: props.base_info.cinema, |
||||||
|
pid: props.base_info.channel, |
||||||
|
} |
||||||
|
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, |
||||||
|
env: props.base_info.env, |
||||||
|
cid: props.base_info.cinema, |
||||||
|
pid: props.base_info.channel, |
||||||
|
} |
||||||
|
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() |
||||||
|
} |
||||||
|
|
||||||
|
// 获取卖品折扣子组件的函数 |
||||||
|
const getDiscountDetail = (discount) => { |
||||||
|
console.log('getDiscountDetail', discount) |
||||||
|
discountDialogVisible.value = false |
||||||
|
discount.forEach((item) => { |
||||||
|
selectGoods.value.forEach((select) => { |
||||||
|
if (select.id === discount.id) { |
||||||
|
select.discount1 = item.discount1 |
||||||
|
select.discount2 = item.discount2 |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
console.log('getDiscountDetail-selectGoods.value', selectGoods.value) |
||||||
|
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['final_price'] = parseFloat(item['partnerPrice']).toFixed(2) |
||||||
|
item['show_price'] = '合作商价：' + item['partnerPrice'] |
||||||
|
} else { |
||||||
|
item['final_price'] = parseFloat(item['onlinePrice']).toFixed(2) |
||||||
|
item['show_price'] = '网售价：' + item['onlinePrice'] |
||||||
|
} |
||||||
|
// 设置购买数量 |
||||||
|
item['buy_num'] = 1 |
||||||
|
item['is_select'] = false |
||||||
|
|
||||||
|
// 设置卖品三方折扣 |
||||||
|
item['discount1'] = 0 |
||||||
|
item['discount2'] = 0 |
||||||
|
|
||||||
|
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-button size="small" type="primary" @click="discountDialogVisible=true">设置卖品折扣</el-button> |
||||||
|
<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>  <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> |
||||||
|
<GoodsDiscount v-if="discountDialogVisible" @get_discount="getDiscountDetail" :is_show="discountDialogVisible" |
||||||
|
:goods_array="selectGoods"></GoodsDiscount> |
||||||
|
</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> |
||||||
@ -0,0 +1,147 @@ |
|||||||
|
<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', 'base_info']) |
||||||
|
|
||||||
|
// 定义用户选择的场次变量 |
||||||
|
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), |
||||||
|
env: props.base_info.env, |
||||||
|
cid: props.base_info.cinema, |
||||||
|
pid: props.base_info.channel, |
||||||
|
} |
||||||
|
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, |
||||||
|
env: props.base_info.env, |
||||||
|
cid: props.base_info.cinema, |
||||||
|
pid: props.base_info.channel, |
||||||
|
} |
||||||
|
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>    {{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> |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<script setup> |
||||||
|
const props = defineProps(['is_show', 'goods_array']) |
||||||
|
const emits = defineEmits(['get_discount']) |
||||||
|
|
||||||
|
function finish() { |
||||||
|
const discount_goods = [] |
||||||
|
props.goods_array.forEach((goods) => { |
||||||
|
if (goods.discount1 !== 0 || goods.discount2 !== 0) { |
||||||
|
discount_goods.push(goods) |
||||||
|
} |
||||||
|
}) |
||||||
|
emits('get_discount', discount_goods) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<el-dialog v-model="props.is_show" :width="900"> |
||||||
|
<div style="text-align: left; margin-left: 20px"> |
||||||
|
<span style="font-weight: bold;">输入卖品折扣</span>   |
||||||
|
<span style="font-size: 12px">如果不设置则表示没有三方折扣，最多允许设置两组折扣</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-row v-for="goods in props.goods_array" :key="goods.id" style="margin: 10px 0 0 80px"> |
||||||
|
<el-col :span="9" style="text-align: left"><span>{{ goods.id }}</span>  <span>{{ goods.name }}</span>  <span>{{ |
||||||
|
goods.final_price |
||||||
|
}}</span></el-col> |
||||||
|
<el-col :span="12">输入卖品三方折扣   |
||||||
|
<el-input-number :min="0" :max="parseFloat(goods.final_price)" :precision="2" size="small" :step="0.01" |
||||||
|
v-model="goods.discount1"></el-input-number> |
||||||
|
  |
||||||
|
<el-input-number :min="0" :max="parseFloat(goods.final_price)" :precision="2" size="small" :step="0.01" |
||||||
|
v-model="goods.discount2"></el-input-number> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<div v-if="props.goods_array.length === 0" style="font-size: 20px; margin-top: 50px; color: #909399">暂无数据</div> |
||||||
|
<template #footer> |
||||||
|
<div class="dialog-footer"> |
||||||
|
<el-button type="primary" @click="finish">完成</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,143 @@ |
|||||||
|
<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(['show', 'data', 'base_info']) |
||||||
|
|
||||||
|
// 定义用户选择的场次变量 |
||||||
|
const selectShow = ref('') |
||||||
|
const showList = reactive([]) |
||||||
|
|
||||||
|
// 处理用户选择的数据 |
||||||
|
async function handle_set_user_data() { |
||||||
|
let selectShowData = {} |
||||||
|
props.show.forEach((item)=> { |
||||||
|
if (item['id'] === selectShow.value) { |
||||||
|
selectShowData = item |
||||||
|
} |
||||||
|
}) |
||||||
|
const req_data = { |
||||||
|
api: props.data.path, |
||||||
|
member_type: props.data.type, |
||||||
|
format: props.data.format, |
||||||
|
user_data: JSON.stringify(selectShowData), |
||||||
|
env: props.base_info.env, |
||||||
|
cid: props.base_info.cinema, |
||||||
|
pid: props.base_info.channel, |
||||||
|
} |
||||||
|
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, |
||||||
|
env: props.base_info.env, |
||||||
|
cid: props.base_info.cinema, |
||||||
|
pid: props.base_info.channel, |
||||||
|
} |
||||||
|
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(() => { |
||||||
|
// 挂载时生成用于展示的数据源 |
||||||
|
props.show.forEach((item) => { |
||||||
|
showList.push({ |
||||||
|
key: item.id, |
||||||
|
start: item['startTime'], |
||||||
|
name: item['movieInfo'][0]['movieName'], |
||||||
|
hall: item['hallName'], |
||||||
|
data: item |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
watch(() => selectShow.value, () => { |
||||||
|
console.log('selectShow.value', selectShow.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="selectShow"> |
||||||
|
<el-radio-button v-for="s in showList" :label="s.key" :value="s.key" :key="s.key"> |
||||||
|
<div style="text-align: left"> |
||||||
|
<span>{{ s.key }}</span> -- <span style="font-weight: bold">{{ s.name }}</span><br> |
||||||
|
<span>{{ s.start }}</span><br><span>{{ s.hall }}</span> |
||||||
|
</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> |
||||||
@ -0,0 +1,117 @@ |
|||||||
|
<script setup> |
||||||
|
import {ref, onBeforeMount, computed, watch} 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) => { |
||||||
|
// json的字段类型是int，xml字段类型是string，这里做统一处理 |
||||||
|
group.index = typeof group.index === "string" ? parseInt(group.index) : group.index |
||||||
|
group.gnum = typeof group.gnum === "string" ? parseInt(group.gnum) : group.gnum |
||||||
|
// 推送数据到本地数据中 |
||||||
|
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> |
||||||
@ -0,0 +1,282 @@ |
|||||||
|
<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"; |
||||||
|
import TicketDiscount from "@/components/ec_api/TicketDiscount.vue"; |
||||||
|
|
||||||
|
// 接收TabArea组件传递的参数 |
||||||
|
const props = defineProps(['seat', 'data', 'base_info']) |
||||||
|
|
||||||
|
// 定义用户选择的场次变量 |
||||||
|
const selectSeats = ref([]) |
||||||
|
const seatList = reactive({}) |
||||||
|
const row_x = ref(0) |
||||||
|
const col_y = ref(0) |
||||||
|
const req_timer = ref(null) |
||||||
|
|
||||||
|
// 折扣对话框显示状态 |
||||||
|
const discountDialogVisible = ref(false) |
||||||
|
const discountDetail = ref([]) |
||||||
|
const discountSeat = ref([]) |
||||||
|
|
||||||
|
// 处理用户选择的数据 |
||||||
|
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), |
||||||
|
env: props.base_info.env, |
||||||
|
cid: props.base_info.cinema, |
||||||
|
pid: props.base_info.channel, |
||||||
|
} |
||||||
|
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, |
||||||
|
env: props.base_info.env, |
||||||
|
cid: props.base_info.cinema, |
||||||
|
pid: props.base_info.channel, |
||||||
|
} |
||||||
|
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' // 处理按键可选状态 |
||||||
|
// 写入discount |
||||||
|
item['ticketDiscount'] = 0 |
||||||
|
item['serviceDiscount'] = 0 |
||||||
|
// 处理显示文案 |
||||||
|
if (item['type'] === 'road') { |
||||||
|
item['label'] = '' |
||||||
|
item['id'] = '' |
||||||
|
} else { |
||||||
|
item['label'] = item['rowValue'] + '-' + item['columnValue'] |
||||||
|
item['id'] = item['cineSeatId'] |
||||||
|
} |
||||||
|
|
||||||
|
// 处理按键名称 |
||||||
|
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) |
||||||
|
} |
||||||
|
|
||||||
|
const getDiscountDetail = (discount) => { |
||||||
|
console.log('getDiscountDetail', discount) |
||||||
|
discountDialogVisible.value = false |
||||||
|
discount.forEach((item) => { |
||||||
|
selectSeats.value.forEach((seat) => { |
||||||
|
if (seat.cineSeatId === item.cineSeatId) { |
||||||
|
seat.ticketDiscount = item.ticketDiscount |
||||||
|
seat.serviceDiscount = item.serviceDiscount |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
console.log('getDiscountDetail-selectSeats.value', selectSeats.value) |
||||||
|
handle_set_user_data() |
||||||
|
} |
||||||
|
|
||||||
|
function getDiscountSeat() { |
||||||
|
discountSeat.value = [] |
||||||
|
props.seat.forEach((item) => { |
||||||
|
if (selectSeats.value.indexOf(item['cineSeatId']) >= 0) { |
||||||
|
discountSeat.value.push(item) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
watch(() => selectSeats.value, () => { |
||||||
|
getDiscountSeat() |
||||||
|
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-button size="small" type="primary" @click="discountDialogVisible=true">设置影票折扣</el-button> |
||||||
|
<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 style="font-weight: bold">{{ seat['label'] }}</span> |
||||||
|
<span style="font-size: 12px; margin-top: 5px">{{ seat['id'] }}</span> |
||||||
|
<span style="font-size: 12px">{{ seat['name'] }}</span> |
||||||
|
</el-checkbox-button> |
||||||
|
</div> |
||||||
|
</el-checkbox-group> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
<TicketDiscount v-if="discountDialogVisible" @get_discount="getDiscountDetail" :is_show="discountDialogVisible" |
||||||
|
:ticket_data="discountSeat"></TicketDiscount> |
||||||
|
</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; |
||||||
|
display: inline-grid !important; |
||||||
|
padding: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.seat-row { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,702 @@ |
|||||||
|
<script setup> |
||||||
|
import {ref, reactive, onBeforeMount, onMounted, onUnmounted, watch, computed} from "vue"; |
||||||
|
import Sortable from "sortablejs"; |
||||||
|
import {useStore, mapState} from "vuex"; |
||||||
|
import JsonEditorVue from "json-editor-vue3"; |
||||||
|
import { |
||||||
|
ec_api_send_request, |
||||||
|
get_ec_api_request_url, |
||||||
|
ec_api_get_suggest, |
||||||
|
ec_api_get_suggest_timestamp |
||||||
|
} from "@/apis/ec_api.js"; |
||||||
|
import {Eleme, Refresh} from "@element-plus/icons-vue"; |
||||||
|
import "@/VueAceEditor/aceConfig" |
||||||
|
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"; |
||||||
|
import CheckQuan from "@/components/ec_api/CheckQuan.vue"; |
||||||
|
import ApiLockBuySelector from "@/components/ec_api/ApiLockBuySelector.vue"; |
||||||
|
|
||||||
|
|
||||||
|
// 注册store |
||||||
|
const store = useStore() |
||||||
|
|
||||||
|
// 标签相关的定义 |
||||||
|
const tabsRef = ref(null); // tabs的Ref |
||||||
|
const activeTab = ref(store.state.ecApiModule.first_tab_api_id); // 当前选项卡，存储的是api_id |
||||||
|
|
||||||
|
|
||||||
|
// 表格相关的定义 |
||||||
|
const ApiTableRef = ref(null) // 表格的Ref |
||||||
|
// const multipleSelection = ref([]) // checkbox的处理 |
||||||
|
|
||||||
|
// 定义变量用于存储接口设置的数据 |
||||||
|
const UserApiData = ref({api: {}, base_info: {}, tab: {}}) |
||||||
|
|
||||||
|
// 发送按键的loading状态 |
||||||
|
const req_loading = ref(false) |
||||||
|
const send_btn = ref('发送') |
||||||
|
|
||||||
|
// 这对添加券接口和售卖接口的售卖类型 |
||||||
|
const saleType = ref('ticket') |
||||||
|
|
||||||
|
// 售卖接口中的支付类型 |
||||||
|
const payType = ref('cash') |
||||||
|
|
||||||
|
// 表格逻辑 |
||||||
|
// 多选改变后处理逻辑 |
||||||
|
function handleParamsChange(newCheckedResult) { |
||||||
|
// console.log('handleParamsChange', newCheckedResult) |
||||||
|
// console.log('activeTab.value', activeTab.value) |
||||||
|
// console.log('UserApiData.value.api[activeTab.value]', UserApiData.value.api[activeTab.value]) |
||||||
|
} |
||||||
|
|
||||||
|
// 遍历当前标签页下的参数如果勾选则标记is_checked为true |
||||||
|
function handleParamsSelect(val) { |
||||||
|
UserApiData.value.api[activeTab.value].params.forEach(param => { |
||||||
|
param['is_checked'] = val.indexOf(param) >= 0; |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 自动勾选行 切换标签后检查全部字段，如果字段的is_checked是true则在页面上勾选字段 |
||||||
|
function markIsChecked() { |
||||||
|
if (UserApiData.value.hasOwnProperty('api') || UserApiData.value.api.length > 0) { |
||||||
|
UserApiData.value.api[activeTab.value].params.forEach(item => { |
||||||
|
if (item['is_checked'] === true) { |
||||||
|
ApiTableRef.value[UserApiData.value.tab[activeTab.value]].toggleRowSelection(item, true) |
||||||
|
} else { |
||||||
|
ApiTableRef.value[UserApiData.value.tab[activeTab.value]].toggleRowSelection(item, false) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 过滤生成url的必须参数，必须包含'format', 'pid', '_sig'否则后端会报错 |
||||||
|
function checkboxFilter(row) { |
||||||
|
const special_params = ['format', 'pid', '_sig'] |
||||||
|
return special_params.indexOf(row.param) < 0; |
||||||
|
} |
||||||
|
|
||||||
|
// 初始逻辑数据逻辑处理 |
||||||
|
function initApiData() { |
||||||
|
// 更新基础数据 |
||||||
|
UserApiData.value['base_info'] = { |
||||||
|
env: store.state.ecApiModule.ec_api_data.env, |
||||||
|
cinema: store.state.ecApiModule.ec_api_data.cinema, |
||||||
|
channel: store.state.ecApiModule.ec_api_data.channel, |
||||||
|
} |
||||||
|
// 根据store.state.ecApiModule.ec_api_data.api来创建本都数据 |
||||||
|
let api_id_array = [] |
||||||
|
let api_tab = {} |
||||||
|
if (store.state.ecApiModule.ec_api_data.api) { |
||||||
|
store.state.ecApiModule.ec_api_data.api.forEach((item, index) => { |
||||||
|
api_id_array.push(item.id) |
||||||
|
api_tab[item.id] = index |
||||||
|
if (!UserApiData.value['api'].hasOwnProperty(item.id)) { |
||||||
|
UserApiData.value['api'][item.id] = { |
||||||
|
'id': item.id, |
||||||
|
'description': item.description, |
||||||
|
'path': item.path, |
||||||
|
'type': item.type, |
||||||
|
'url': '', |
||||||
|
'response': '{"root": "root"}', |
||||||
|
'handled': '', |
||||||
|
'sig': '', |
||||||
|
'format': 'json', |
||||||
|
'reload': true, |
||||||
|
'timestamp': 0, |
||||||
|
'params': store.state.ecApiModule.ec_api_data.api_params[item.id] |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
// 如果删除某接口后同步删除UserApiData中的数据 |
||||||
|
Object.values(UserApiData.value['api']).forEach((api) => { |
||||||
|
if (api_id_array.indexOf(api['id']) < 0) { |
||||||
|
delete UserApiData.value['api'][api['id']] |
||||||
|
} |
||||||
|
}) |
||||||
|
// 处理cid和pid |
||||||
|
Object.keys(UserApiData.value['api']).forEach(api_id => { |
||||||
|
UserApiData.value['api'][api_id]['params'].forEach( |
||||||
|
param_item => { |
||||||
|
if (param_item['param'] === 'cid') { |
||||||
|
param_item['value'] = UserApiData.value['base_info']['cinema'] |
||||||
|
} |
||||||
|
if (param_item['param'] === 'pid') { |
||||||
|
param_item['value'] = UserApiData.value['base_info']['channel'] |
||||||
|
} |
||||||
|
// 写入默认值 |
||||||
|
param_item['default'] = param_item['value'] |
||||||
|
} |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
// 把生成的接口数据赋给UserApiData |
||||||
|
UserApiData.value.tab = api_tab |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 添加新字段 |
||||||
|
function addNewParams() { |
||||||
|
UserApiData.value.api[activeTab.value].params.push({ |
||||||
|
id: Date.now(), |
||||||
|
api_id: activeTab.value, |
||||||
|
param: '', |
||||||
|
value: '', |
||||||
|
is_request: false, |
||||||
|
is_checked: false, |
||||||
|
is_preset: false |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 读取参数默认值 |
||||||
|
function loadDefault(param) { |
||||||
|
console.log(param) |
||||||
|
UserApiData.value.api[activeTab.value].reload = true |
||||||
|
get_suggest() |
||||||
|
} |
||||||
|
|
||||||
|
// 切换返回数据格式 |
||||||
|
function changeFormat() { |
||||||
|
UserApiData.value.api[activeTab.value]['params'].forEach(p => { |
||||||
|
if (p['param'] === 'format') { |
||||||
|
if (['json', 'xml'].indexOf(p['value']) < 0) { |
||||||
|
alert('format参数值支持json和xml') |
||||||
|
return |
||||||
|
} |
||||||
|
if (p['value'] === 'json') { |
||||||
|
UserApiData.value.api[activeTab.value]['format'] = 'json' |
||||||
|
p['response'] = '{"root": "root"}' |
||||||
|
} |
||||||
|
if (p['value'] === 'xml') { |
||||||
|
UserApiData.value.api[activeTab.value]['format'] = 'html' |
||||||
|
UserApiData.value.api[activeTab.value]['response'] = '<root></root>' |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// 准备获取url和发送请求需要的参数 |
||||||
|
function handle_request_data() { |
||||||
|
let data = {} |
||||||
|
let req_data = {} |
||||||
|
UserApiData.value.api[activeTab.value]['params'].forEach( |
||||||
|
p => { |
||||||
|
if (p['param'] !== '_sig' && p['is_checked'] === true) { |
||||||
|
req_data[p['param']] = p['value'] |
||||||
|
} |
||||||
|
} |
||||||
|
) |
||||||
|
data['env'] = UserApiData.value.base_info['env'] |
||||||
|
data['type'] = UserApiData.value.api[activeTab.value]['type'] |
||||||
|
data['api'] = UserApiData.value.api[activeTab.value]['path'] |
||||||
|
data['pid'] = UserApiData.value.base_info['channel'] |
||||||
|
data['cid'] = UserApiData.value.base_info['cinema'] |
||||||
|
data['params'] = JSON.stringify(req_data) |
||||||
|
return data |
||||||
|
} |
||||||
|
|
||||||
|
// 生成请求的url，用于页面展示 |
||||||
|
function handle_request_url() { |
||||||
|
console.log('UserApiData.value', UserApiData.value) |
||||||
|
if (UserApiData.value.base_info['cinema'] === '' || UserApiData.value.base_info['channel'] === '') { |
||||||
|
alert('请选择影院和渠道！') |
||||||
|
return |
||||||
|
} |
||||||
|
const data = handle_request_data() |
||||||
|
get_ec_api_request_url(data).then(res => { |
||||||
|
console.log('handle_update_url', res) |
||||||
|
UserApiData.value.api[activeTab.value]['url'] = res['url'] |
||||||
|
UserApiData.value.api[activeTab.value]['params'].forEach(p => { |
||||||
|
if (p['param'] === '_sig') { |
||||||
|
p['value'] = res['sig'] |
||||||
|
} |
||||||
|
}) |
||||||
|
}).catch(err => console.log(err)) |
||||||
|
} |
||||||
|
|
||||||
|
// 发送api请求 |
||||||
|
function send_request() { |
||||||
|
// 处理按钮状态 |
||||||
|
req_loading.value = true |
||||||
|
send_btn.value = '请求中' |
||||||
|
// 处理请求 |
||||||
|
if (UserApiData.value.api[activeTab.value].format === 'json') { |
||||||
|
UserApiData.value.api[activeTab.value].response = '{"root": "root"}' |
||||||
|
} |
||||||
|
if (UserApiData.value.api[activeTab.value].format === 'html' || UserApiData.value.api[activeTab.value].format === 'xml') { |
||||||
|
UserApiData.value.api[activeTab.value].response = '<root></root>' |
||||||
|
} |
||||||
|
const data = handle_request_data() |
||||||
|
ec_api_send_request(data).then(res => { |
||||||
|
UserApiData.value.api[activeTab.value].handled = JSON.parse(res.handled) |
||||||
|
if (res.format === 'json') { |
||||||
|
UserApiData.value.api[activeTab.value].response = JSON.stringify(JSON.parse(res.data), null, 2) |
||||||
|
} |
||||||
|
if (res.format === 'xml') { |
||||||
|
const xmlDoc = new DOMParser().parseFromString(res.data, 'application/xml'); |
||||||
|
const serializer = new XMLSerializer(); |
||||||
|
UserApiData.value.api[activeTab.value].response = serializer.serializeToString(xmlDoc); |
||||||
|
} |
||||||
|
// 处理按钮状态 |
||||||
|
req_loading.value = false |
||||||
|
send_btn.value = '发送' |
||||||
|
} |
||||||
|
).catch(err => { |
||||||
|
req_loading.value = false |
||||||
|
send_btn.value = '发送' |
||||||
|
ElMessage.error('获取请求结果失败！') |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
async function get_suggest(options = {sale_type: saleType.value, pay_type: payType.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 |
||||||
|
const env = UserApiData.value.base_info['env'] |
||||||
|
const cid = UserApiData.value.base_info['cinema'] |
||||||
|
const pid = UserApiData.value.base_info['channel'] |
||||||
|
|
||||||
|
await ec_api_get_suggest(api_type, api, env, cid, pid, options).then( |
||||||
|
(res) => { |
||||||
|
console.log('get_suggest', api, res) |
||||||
|
let result = true |
||||||
|
if (res.length === 0) { |
||||||
|
result = true |
||||||
|
} |
||||||
|
res.forEach((suggest) => { |
||||||
|
UserApiData.value.api[activeTab.value].params.forEach((param) => { |
||||||
|
if (suggest.result === false) { |
||||||
|
result = false |
||||||
|
} |
||||||
|
if (param.param === suggest.param) { |
||||||
|
param['value'] = suggest['value'] |
||||||
|
param['default'] = suggest['value'] |
||||||
|
param['is_checked'] = suggest['is_checked'] |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
UserApiData.value.api[activeTab.value].reload = !result |
||||||
|
} |
||||||
|
).catch((err) => { |
||||||
|
console.log(err) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function get_timestamp(options = {sale_type: saleType.value, pay_type: payType.value}) { |
||||||
|
const api_type = UserApiData.value.api[activeTab.value].type |
||||||
|
const api = UserApiData.value.api[activeTab.value].path |
||||||
|
const env = UserApiData.value.base_info['env'] |
||||||
|
const cid = UserApiData.value.base_info['cinema'] |
||||||
|
const pid = UserApiData.value.base_info['channel'] |
||||||
|
await ec_api_get_suggest_timestamp(api_type, api, env, cid, pid, options).then( |
||||||
|
res => { |
||||||
|
console.log('get_timestamp', res['timestamp']) |
||||||
|
if (res['timestamp'] > UserApiData.value.api[activeTab.value].timestamp) { |
||||||
|
UserApiData.value.api[activeTab.value].reload = true |
||||||
|
UserApiData.value.api[activeTab.value].timestamp = res['timestamp'] |
||||||
|
} |
||||||
|
} |
||||||
|
).catch((err) => { |
||||||
|
console.log(err) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 通过传参来勾选和取消勾选字段 |
||||||
|
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") { |
||||||
|
switch (saleType.value) { |
||||||
|
case 'ticket': |
||||||
|
check_params(["play_id", "price", "seat_num"], ["goods"]); |
||||||
|
break; |
||||||
|
case 'goods': |
||||||
|
check_params(["goods"], ["play_id", "price", "seat_num"]); |
||||||
|
break; |
||||||
|
case 'all': |
||||||
|
check_params(["play_id", "price", "seat_num", "goods"], []); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
if (UserApiData.value.api[activeTab.value].path === "seat/lock-buy") { |
||||||
|
switch (saleType.value) { |
||||||
|
case 'ticket': |
||||||
|
check_params(["play_id", "play_update_time", "seat", "lock_flag"], ["goods"]); |
||||||
|
break; |
||||||
|
case 'goods': |
||||||
|
check_params(["goods"], ["play_id", "play_update_time", "seat", "lock_flag"]); |
||||||
|
break; |
||||||
|
case 'all': |
||||||
|
check_params(["play_id", "play_update_time", "seat", "lock_flag", "goods"], []); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
get_suggest() |
||||||
|
markIsChecked() |
||||||
|
} |
||||||
|
|
||||||
|
// 设置券的回调函数 |
||||||
|
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 => { |
||||||
|
if (param['param'] === 'coupons') { |
||||||
|
console.log('coupons', quan) |
||||||
|
param['value'] = quan.join(',') |
||||||
|
param['is_checked'] = true |
||||||
|
} |
||||||
|
if (param['param'] === 'card_coupons') { |
||||||
|
param['value'] = null |
||||||
|
param['is_checked'] = false |
||||||
|
} |
||||||
|
}) |
||||||
|
} else { |
||||||
|
UserApiData.value.api[activeTab.value].params.forEach(param => { |
||||||
|
if (param['param'] === 'card_coupons') { |
||||||
|
param['value'] = JSON.stringify(cardQuan) |
||||||
|
param['is_checked'] = true |
||||||
|
} |
||||||
|
if (param['param'] === 'coupons') { |
||||||
|
param['value'] = null |
||||||
|
param['is_checked'] = false |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
console.log('get_quan_detail - saleType.value', saleType.value) |
||||||
|
get_suggest() |
||||||
|
markIsChecked() |
||||||
|
} |
||||||
|
|
||||||
|
function get_pay_type(pay_type) { |
||||||
|
console.log('pay_type', pay_type) |
||||||
|
payType.value = 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; |
||||||
|
} |
||||||
|
get_suggest() |
||||||
|
markIsChecked() |
||||||
|
} |
||||||
|
|
||||||
|
// 用于测试，可以添加到需要的方法中 |
||||||
|
function test() { |
||||||
|
console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data) |
||||||
|
console.log('UserApiData.value', UserApiData.value) |
||||||
|
// console.log('activeTab.value', activeTab.value) |
||||||
|
} |
||||||
|
|
||||||
|
// 计算属性用来处理场次接口获取的数据，并同步给对应的选择模块 |
||||||
|
const showList = computed(() => { |
||||||
|
const api = UserApiData.value.api[activeTab.value] |
||||||
|
if (api.path === 'cinema/plays') { |
||||||
|
if (api.format === 'json') { |
||||||
|
if (api.response === '{"root": "root"}') { |
||||||
|
return [] |
||||||
|
} else { |
||||||
|
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'] ? api.handled['res']['data'] : [] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return [] |
||||||
|
}) |
||||||
|
|
||||||
|
// 计算属性用来处理座位接口获取的数据，并同步给对应的选择模块 |
||||||
|
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 [] |
||||||
|
} else if (String(api.handled['res']['status']) !== '1') { |
||||||
|
console.log("api.handled['res']['data'] else-if", api.handled['res']['data']) |
||||||
|
console.log("api.handled['res']['status']", api.handled['res']['status']) |
||||||
|
console.log("typeof api.handled['res']['status']", typeof api.handled['res']['status']) |
||||||
|
return [] |
||||||
|
} else { |
||||||
|
console.log("api.handled['res']['data']", api.handled['res']['data']) |
||||||
|
return api.handled['res']['data'] |
||||||
|
} |
||||||
|
} |
||||||
|
if (api.format === 'xml' || api.format === 'html') { |
||||||
|
|
||||||
|
if (api.response === '<root></root>') { |
||||||
|
return [] |
||||||
|
} else if (String(api.handled['res']['status']) !== '1') { |
||||||
|
console.log("api.handled['res']['status']", api.handled['res']['status']) |
||||||
|
console.log("typeof api.handled['res']['status']", typeof api.handled['res']['status']) |
||||||
|
return [] |
||||||
|
} else { |
||||||
|
console.log("api.handled['res']['data']", api.handled['res']['data']) |
||||||
|
return api.handled['res']['data'] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
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') |
||||||
|
// 接口数据变化后初始化本地数据 |
||||||
|
initApiData() |
||||||
|
// 处理空标签逻辑 |
||||||
|
const select_api_id = store.getters['ecApiModule/ec_select_api_getter'] |
||||||
|
if (select_api_id.indexOf(activeTab.value) < 0) { |
||||||
|
activeTab.value = select_api_id[0] |
||||||
|
} |
||||||
|
}, {deep: true}) |
||||||
|
|
||||||
|
|
||||||
|
// 监测activeTab， 如果切换标签页，则执行自动勾选的函数 |
||||||
|
watch(activeTab, () => { |
||||||
|
markIsChecked() |
||||||
|
get_timestamp() |
||||||
|
get_suggest() |
||||||
|
handle_request_url() |
||||||
|
}) |
||||||
|
|
||||||
|
// 监视本地用户数据，如果数据改变，则更新url |
||||||
|
watch(UserApiData.value, () => { |
||||||
|
console.log('watch UserApiData', UserApiData.value) |
||||||
|
console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data) |
||||||
|
get_suggest() |
||||||
|
handle_request_url() |
||||||
|
}, {deep: true, flush: "post"}) |
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
生命周期逻辑 |
||||||
|
*/ |
||||||
|
onBeforeMount( |
||||||
|
() => { |
||||||
|
// console.log('TabArea onBeforeMount') |
||||||
|
// 处理请求参数生成本地数据结构 |
||||||
|
initApiData() |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
// 挂载后 |
||||||
|
onMounted(() => { |
||||||
|
// console.log('TabArea onMounted') |
||||||
|
// 勾选is_checked选项 |
||||||
|
markIsChecked() |
||||||
|
// 处理拖拽 |
||||||
|
const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav'); |
||||||
|
const sortTabs = new Sortable(elTabsHeader, { |
||||||
|
animation: 150, |
||||||
|
ghostClass: 'dragging', |
||||||
|
draggable: '.el-tabs__item', |
||||||
|
onEnd: (evt) => { |
||||||
|
store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex}) |
||||||
|
}, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
// 设置vue3-ace-editor |
||||||
|
const ace_options = { |
||||||
|
useWorker: false, // 启用语法检查,必须为true |
||||||
|
enableBasicAutocompletion: false, // 自动补全 |
||||||
|
enableLiveAutocompletion: false, // 智能补全 |
||||||
|
enableSnippets: true, // 启用代码段 |
||||||
|
showPrintMargin: false, // 去掉灰色的线，printMarginColumn |
||||||
|
highlightActiveLine: true, // 高亮行 |
||||||
|
highlightSelectedWord: true, // 高亮选中的字符 |
||||||
|
tabSize: 2, // tab锁进字符 |
||||||
|
fontSize: 14, // 设置字号 |
||||||
|
wrap: false, // 是否换行 |
||||||
|
readonly: true, // 是否可编辑 |
||||||
|
minLines: 30, // 最小行数，minLines和maxLines同时设置之后，可以不用给editor再设置高度 |
||||||
|
maxLines: 30, // 最大行数 |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<el-tabs ref="tabsRef" v-model="activeTab" type="border-card"> |
||||||
|
<el-tab-pane |
||||||
|
v-for="(api, index) in store.state.ecApiModule.ec_api_data.api" |
||||||
|
:key="api['id']" |
||||||
|
:label="api['description']" |
||||||
|
:name="api['id']" |
||||||
|
:disabled="req_loading" |
||||||
|
> |
||||||
|
<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" |
||||||
|
@selection-change="handleParamsChange" |
||||||
|
@select="handleParamsSelect" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="50" :selectable="checkboxFilter"/> |
||||||
|
<el-table-column label="字段名" width="200"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<span v-if="scope.row.is_preset">{{ scope.row.param }}</span> |
||||||
|
<span v-else><el-input type="text" placeholder="输入字段名" v-model="scope.row.param"></el-input></span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="字段值" width="800"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<el-input type="textarea" placeholder="输入字段值" v-model="scope.row.value" rows="1" |
||||||
|
@blur="changeFormat()"></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="刷新推荐值" width="100" align="center"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<el-button @click="loadDefault(scope.row.param)"> |
||||||
|
<el-icon> |
||||||
|
<Refresh/> |
||||||
|
</el-icon> |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="必选" width="80" align="center"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<span>{{ scope.row.is_request ? '是' : '否' }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="description" label="描述" show-overflow-tooltip/> |
||||||
|
</el-table> |
||||||
|
<el-row class="BtnRow" style="width: 100%"> |
||||||
|
<el-col :span="2"> |
||||||
|
<el-button type="primary" @click="addNewParams">添加新字段</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<hr id="break_line"/> |
||||||
|
<el-row class="BtnRow" style="width: 100%" :gutter="10" align="middle"> |
||||||
|
<el-col :span="2"><span style="font-weight: bold; color: #909399">请求地址：</span></el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input type="text" v-model="UserApiData.api[api['id']].url" :style="{'font-size': '18px'}"></el-input> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<el-button type="primary" @click="send_request" :loading="req_loading" :disabled="req_loading"> |
||||||
|
{{ send_btn }} |
||||||
|
</el-button> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
</el-col> |
||||||
|
</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]" :base_info="UserApiData.base_info"/> |
||||||
|
<SeatStatus v-if="seatList.length > 0" :seat="seatList" :data="UserApiData.api[activeTab]" :base_info="UserApiData.base_info"/> |
||||||
|
<CinemaGoods v-if="goodsList.length > 0" :goods="goodsList" :data="UserApiData.api[activeTab]" :base_info="UserApiData.base_info"/> |
||||||
|
<EcardLevel v-if="levelList.length > 0" :level="levelList" :data="UserApiData.api[activeTab]" :base_info="UserApiData.base_info"/> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
<el-backtop :right="100" :bottom="100" :visibility-height="200"/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.BtnRow { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.editor { |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.vue-ace-editor { |
||||||
|
/* ace-editor默认没有高度，所以必须设置高度，或者同时设置最小行和最大行使编辑器的高度自动增高 */ |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 20px; |
||||||
|
border: 1px solid rgba(144, 147, 153, 0.5); |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
#break_line { |
||||||
|
margin-top: 30px; |
||||||
|
margin-bottom: 30px; |
||||||
|
background-color: rgba(144, 147, 153, 0.5); |
||||||
|
height: 1px; |
||||||
|
border: none |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
<script setup> |
||||||
|
const props = defineProps(['is_show', 'ticket_data']) |
||||||
|
const emits = defineEmits(['get_discount']) |
||||||
|
|
||||||
|
function finish() { |
||||||
|
const discount_seats = [] |
||||||
|
props.ticket_data.forEach((seat) => { |
||||||
|
if (seat.ticketDiscount !==0 || seat.serviceDiscount !== 0) { |
||||||
|
discount_seats.push(seat) |
||||||
|
} |
||||||
|
}) |
||||||
|
emits('get_discount', discount_seats) |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<el-dialog v-model="props.is_show" :width="1000"> |
||||||
|
<div style="text-align: left; margin-left: 20px"> |
||||||
|
<span style="font-weight: bold;">输入影票折扣</span>   |
||||||
|
<span style="font-size: 12px">如果不输入则表示不使用三方折扣，此处应小于票价和服务费</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-row v-for="seat in props.ticket_data" :key="seat.cineSeatId" style="margin: 10px 0 0 80px"> |
||||||
|
<el-col :span="3" style="text-align: left"> |
||||||
|
<span>{{ seat.rowValue }}-{{ seat.columnValue }}: {{ seat.name }}</span></el-col> |
||||||
|
<el-col :span="8">输入影票折扣   |
||||||
|
<el-input-number :min="0" :precision="2" size="small" :step="0.01" |
||||||
|
v-model="seat.ticketDiscount"></el-input-number> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8">输入服务费折扣   |
||||||
|
<el-input-number :min="0" :precision="2" size="small" :step="0.01" |
||||||
|
v-model="seat.serviceDiscount"></el-input-number> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<div v-if="props.ticket_data.length === 0" style="font-size: 20px; margin-top: 50px; color: #909399">暂无数据</div> |
||||||
|
<template #footer> |
||||||
|
<div class="dialog-footer"> |
||||||
|
<el-button type="primary" @click="finish">完成</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
<script setup> |
||||||
|
import BasicConfig from "@/components/ec_api/BasicConfig.vue"; |
||||||
|
import TabArea from "@/components/ec_api/TabArea.vue"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
|
||||||
|
const store = useStore(); |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<BasicConfig></BasicConfig> |
||||||
|
<TabArea v-if="store.state.ecApiModule.ec_api_data.api.length > 0"></TabArea> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue