czg_team/new-cashier
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
jeepay-ui-merchant/src/views/sys/advert/AddOrEdit.vue Normal file
View File

@@ -0,0 +1,201 @@
<template>
<a-drawer
v-model:visible="vdata.isShow"
:title="vdata.isAdd ? '新增广告' : '编辑广告'"
width="50%"
:mask-closable="false"
@close="vdata.isShow = false"
>
<a-form ref="infoFormModel" :model="vdata.saveObject" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" :rules="rules">
<a-row justify="center" type="flex">
<a-col :span="24">
<a-form-item label="标题" name="title">
<a-input v-model:value="vdata.saveObject.title" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="状态" name="releaseState">
<a-radio-group v-model:value="vdata.saveObject['releaseState']">
<a-radio :value="1">
立即发布
</a-radio>
<a-radio :value="0">
手动发布
</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left">轮播设置</a-divider>
<!-- <a-col v-if="vdata.saveObject.appPlaceType != 1" :span="24">
<a-form-item label="轮播时间（秒）" name="changeTime">
<a-input-number v-model:value="vdata.saveObject['changeTime']" style="width: 100%;" :min="0" :max="100" />
</a-form-item>
</a-col> -->
<a-col :span="24">
<a-button
class="editable-add-btn"
style="margin-bottom: 8px;margin-left: 30px;"
type="dashed"
@click="handleAdd"
>
<PlusOutlined />新增
</a-button>
<a-table bordered :data-source="vdata.saveObject.infoList" :columns="columns">
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'imgUrl'">
<div class="editable-cell">
<div class="editable-cell-input-wrapper">
<JeepayUpload v-model:src="record.imgUrl" bizType="notice" listType="picture-card" />
</div>
</div>
</template>
<template v-else-if="column.dataIndex === 'sort'">
<div class="editable-cell-input-wrapper">
<a-input-number v-model:value="record.sort" :min="0" :max="10" />
</div>
</template>
<template v-else-if="column.dataIndex === 'linkUrl' && vdata.groupKey != 'faceAdvert'">
<div class="editable-cell-input-wrapper">
<a-input v-model:value="record.linkUrl" placeholder="请以http://或https://开头" />
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'">
<a style="color: red" @click="onDelete(record)">删除</a>
</template>
</template>
</a-table>
</a-col>
</a-form>
<div class="drawer-btn-center">
<a-button :style="{ marginRight: '8px' }" @click="vdata.isShow = false"><close-outlined /> 取消</a-button>
<a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc"><check-outlined /> 保存</a-button>
</div>
</a-drawer>
</template>
<script lang="ts" setup>
import { req, API_URL_ADVERT } from '@/api/manage'
import { reactive, ref, getCurrentInstance, computed } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const infoFormModel = ref()
const props = defineProps({
callbackFunc: { type: Function, default: () => { } }
})
const columns = [
{ title: '广告图片(建议尺寸800下1280px)', dataIndex: 'imgUrl', width: '35%', },
{ title: '轮播排序', dataIndex: 'sort', },
{ title: '操作', dataIndex: 'operation', },
]
const vdata = reactive({
confirmLoading: false, // 显示确定按钮loading图标
isAdd: true, // 新增 or 修改页面标识
isShow: false, // 是否显示弹层/抽屉
saveObject: {infoList: [{ imgUrl: '', linkUrl: '', sort: '' }]} as any, // 数据对象
recordId: null, // 更新对象ID
groupKey: '',
})
const rules = {
title: [{ required: true, message: '请输入广告标题', trigger: 'blur' }],
releaseState: [{ required: true, message: '请选择发布状态', trigger: 'blur' }],
imgUrl: [{ required: true, message: '请上传广告图片', trigger: 'blur' }],
linkUrl: [{ required: true, message: '请输入广告链接', trigger: 'blur' }],
content: [{ required: true, message: '请输入广告内容', trigger: 'blur' }],
advertSort: [{ required: true, message: '请输入广告排序', trigger: 'blur' }],
changeTime: [{ required: true, message: '请输入轮播时间', trigger: 'blur' }],
}
function show(groupKey, recordId) { // 弹层打开事件
if (infoFormModel.value !== undefined) {
infoFormModel.value.resetFields()
}
vdata.groupKey = groupKey
vdata.isAdd = !recordId
// 数据恢复为默认数据
vdata.saveObject = { bindType: 0, releaseState: 1 }
vdata.saveObject.infoList = [{ imgUrl: '', linkUrl: '', sort: '' }]
vdata.saveObject.infoIds = ''
vdata.confirmLoading = false // 关闭loading
if (!vdata.isAdd) { // 修改信息 延迟展示弹层
vdata.recordId = recordId
req.getById(API_URL_ADVERT, recordId).then(res => {
vdata.saveObject = res
if (vdata.saveObject.appContent) {
vdata.saveObject.infoList = JSON.parse(vdata.saveObject.appContent)
}
})
}
vdata.isShow = true // 立马展示弹层信息
}
function handleOkFunc() { // 点击【确认】按钮事件
infoFormModel.value.validate().then(valid => {
vdata.confirmLoading = true // 显示loading
if (vdata.saveObject.infoList.length < 1) {
vdata.confirmLoading = false
return $infoBox.message.error('轮播配置不可为空')
}
vdata.saveObject.advertType = '1'
if (vdata.saveObject.infoList) {
var firstInfo = vdata.saveObject.infoList[0]
if (!firstInfo.imgUrl) {
vdata.confirmLoading = false
return $infoBox.message.error('轮播图不可为空')
}
vdata.saveObject.imgUrl = firstInfo.imgUrl
vdata.saveObject.linkUrl = firstInfo.linkUrl
}
vdata.saveObject.appContent = JSON.stringify(vdata.saveObject.infoList)
// 请求HTTP
req.addOrUpdate(vdata.isAdd ? null : vdata.recordId, API_URL_ADVERT, vdata.saveObject).then(res => {
vdata.isShow = false
vdata.confirmLoading = false
props.callbackFunc() // 刷新列表
}).catch(valid => {
vdata.confirmLoading = false
})
})
}
const count = computed(() => vdata.saveObject.infoList.length + 1)
const onDelete = (item) => {
// vdata.saveObject.infoList = vdata.saveObject.infoList.filter(item => item.key !== key)
const index = vdata.saveObject.infoList.indexOf(item)
if (index != -1) {
vdata.saveObject.infoList.splice(index, 1)
}
}
const handleAdd = () => {
if (vdata.saveObject.appPlaceType == '1' && vdata.saveObject.infoList.length > 1) {
return $infoBox.message.error('卡片广告最多添加两条记录！')
}
const newData = { key: `${count.value}`, imgUrl: ``, sort: '', linkUrl: ``, }
vdata.saveObject.infoList.push(newData)
}
defineExpose({ show })
</script>
<style lang="less" scoped>
.ant-btn-dangerous {
position: absolute;
right: 50px;
}
.ant-row-space-between {
position: relative;
}
</style>

195
jeepay-ui-merchant/src/views/sys/advert/Advert.vue Normal file
View File

@@ -0,0 +1,195 @@
<template>
<div style="background: #fff">
<a-tabs @change="selectTabs">
<a-tab-pane key="faceAdvert" tab="刷脸设备广告">
<div class="account-settings-info-view">
<page-header-wrapper>
<a-card>
<JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {} }">
<jeepay-text-up v-model:value="vdata.searchData['advertId']" :placeholder="'ID'" />
<jeepay-text-up v-model:value="vdata.searchData['title']" :placeholder="'标题'" />
<jeepay-text-up v-model:value="vdata.searchData['mchNo']" :placeholder="'用户号'" />
<a-form-item label="" class="table-search-item">
<a-select v-model:value="vdata.searchData['releaseState']" placeholder="发布状态">
<a-select-option value="">
全部
</a-select-option>
<a-select-option value="0">
待发布
</a-select-option>
<a-select-option value="1">
已发布
</a-select-option>
</a-select>
</a-form-item>
</JeepaySearchForm>
<!-- 列表渲染 -->
<JeepayTable
ref="infoTableFace"
:initData="false"
:reqTableDataFunc="reqTableDataFunc"
:tableColumns="tableColumnsFace"
:searchData="vdata.searchData"
rowKey="advertId"
:rowSelection="{ type: 'checkbox', onChange: infoTableSelectChangeFunc }"
@btnLoadClose="vdata.btnLoading=false"
>
<template #topBtnSlot>
<div>
<a-button v-if="$access('ENT_ADVERT_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
<a-button v-if="$access('ENT_ADVERT_DEL')" type="danger" @click="deleteBatchFunc"><delete-outlined />批量删除</a-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'advertType'">
{{ record.advertType === 1?'刷脸设备广告':record.advertType === 2?'支付后广告':record.advertType === 3?$SYS_NAME_MAP.MCH_APP+'APP':$SYS_NAME_MAP.AGENT_APP+'APP' }}
</template>
<template v-if="column.key === 'releaseState'">
<JeepayTableColState :showSwitchType="true" :badgeTextArray="['已发布','待发布','未知']" :state="record.releaseState" :on-change="(releaseState) => { return updateState(record.advertId, releaseState)}" />
</template>
<template v-if="column.key === 'imgUrl'">
<a-image
:width="60"
:src="record.imgUrl"
/>
</template>
<template v-if="column.key === 'mchNo'">
{{ record.mchNo }}
</template>
<template v-if="column.key === 'infoName'">
{{ record.infoName }}
</template>
<template v-if="column.key === 'op'">
<!-- 操作列插槽 -->
<JeepayTableColumns>
<a-button v-if="$access('ENT_ADVERT_EDIT')" type="link" style="padding-right: 10px;padding-left: 10px;" @click="editFunc(record.advertId)">修改</a-button>
<a-button v-if="$access('ENT_ADVERT_DEL')" type="link" style="color: red" @click="delFunc(record.advertId)">删除</a-button>
</JeepayTableColumns>
</template>
</template>
</JeepayTable>
</a-card>
</page-header-wrapper>
</div>
</a-tab-pane>
</a-tabs>
</div>
<!-- 新增 / 修改 页面组件 -->
<InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
</template>
<script setup lang="ts">
import { API_URL_ADVERT, req, $batchDelAdvert, reqLoad} from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from 'vue'
const { $infoBox, $access, $SYS_NAME_MAP } = getCurrentInstance()!.appContext.config.globalProperties
const tableColumnsFace = reactive([
{ title: 'ID', dataIndex: 'advertId' },
{ title: '标题', key: 'title', dataIndex: 'title' },
{ title: '预览图', key: 'imgUrl', dataIndex: 'imgUrl' },
{ title: '发布状态', key: 'releaseState', dataIndex: 'releaseState' },
{ title: '创建时间', dataIndex: 'createdAt'},
{ key: 'op',title: '操作', fixed: 'right', align: 'center'}
])
const vdata : any = reactive ({
btnLoading: false,
tableColumnsFace: tableColumnsFace,
searchData: {},
allotDeviceIdList: [], // 要划拨的设备ID，划拨类型为 select-勾选划拨 时必填
groupKey: 'faceAdvert',
})
const infoTableFace = ref()
const infoAddOrEdit = ref()
// 请求table接口数据
function reqTableDataFunc (params) {
return req.list(API_URL_ADVERT, vdata.searchData)
}
onMounted(()=>{
searchFunc()
})
function searchFunc() { // 点击【查询】按钮点击事件
vdata.btnLoading = true // 打开查询按钮的loading
vdata.searchData.advertType = '1'
infoTableFace.value.refTable(true)
}
function addFunc () { // 业务通用【新增】 函数
infoAddOrEdit.value.show(vdata.groupKey)
}
function delFunc (recordId) { // 业务通用【删除】 函数
$infoBox.confirmDanger('确认删除？', '', () => {
$batchDelAdvert(recordId).then((res: any) => {
$infoBox.message.success('删除成功！')
infoTableFace.value.refTable(false)
}).catch(err => {})
},() => {
console.log(1111)
})
}
function editFunc (recordId) { // 业务通用【修改】 函数
infoAddOrEdit.value.show(vdata.groupKey, recordId)
}
function selectTabs (key) { // 清空必填提示
if (key) {
vdata.groupKey = key
nextTick(() => {
searchFunc()
})
}
}
// 表格多选
function infoTableSelectChangeFunc(selectedRowKeys, selectedRows) {
vdata.selectRecordIdList = selectedRowKeys
}
function deleteBatchFunc() { // 批量删除
if (!vdata.selectRecordIdList || vdata.selectRecordIdList.length < 1) {
$infoBox.message.error('请选择广告配置')
} else {
$infoBox.confirmDanger('确认删除？', '', () => {
$batchDelAdvert(vdata.selectRecordIdList.join(',')).then((res: any) => {
searchFunc()
$infoBox.message.success('删除成功')
})
},() => {
console.log(1111)
})
}
}
function updateState (recordId, state) { // 【更新状态】
return new Promise<void>((resolve, reject) => {
return reqLoad.updateById(API_URL_ADVERT, recordId, { state: state }).then(res => {
searchFunc()
resolve()
}).catch(err => reject(err))
})
}
</script>
<style lang="less" scoped>
.flex {
display:flex;
margin-bottom: 8px;
i {
margin-left: 5px;
}
}
.bottom-btn{
/deep/ div{
display: flex;
justify-content: center;
}
}
</style>