RogerWorkPC
/
dingxin_toolbox_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
dev
RogerWork 3 months ago
parent 024627801f
commit e8e0b0860f
6 changed files with 520 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 209
      src/components/ec_api/CinemaGoods.vue
  2. 141
      src/components/ec_api/EcardLevel.vue
  3. 2
      src/components/ec_api/MovieShow.vue
  4. 113
      src/components/ec_api/PackageSelector.vue
  5. 2
      src/components/ec_api/SeatStatus.vue
  6. 58
      src/components/ec_api/TabArea.vue

209
src/components/ec_api/CinemaGoods.vue
Unescape View File

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

141
src/components/ec_api/EcardLevel.vue
Unescape View File

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

2
src/components/ec_api/MovieShow.vue
Unescape View File

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

113
src/components/ec_api/PackageSelector.vue
Unescape View File

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

2
src/components/ec_api/SeatStatus.vue
Unescape View File

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

58
src/components/ec_api/TabArea.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save