155 lines
5.6 KiB
Vue
155 lines
5.6 KiB
Vue
<template>
|
|
<div style="padding: 20px;">
|
|
<el-form ref="query" style="display: flex;" :model="query" label-width="80px">
|
|
<el-form-item label="展示位置">
|
|
<el-select clearable v-model="query.showPosition" placeholder="请选择">
|
|
<el-option label="首页" value="home" />
|
|
<el-option label="点餐页" value="make_order" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select clearable v-model="query.status" placeholder="请选择">
|
|
<el-option label="可见" value="1" />
|
|
<el-option label="不可见" value="1" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="getList">查询</el-button>
|
|
<el-button type="primary" @click="dialogVisible = true">新增</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!--表格渲染-->
|
|
<el-table ref="table" :data="tableData" style="width: 100%;">
|
|
<el-table-column prop="name" label="弹窗广告">
|
|
<template v-slot="scope">
|
|
<img :src="scope.row.imgUrl" style="width: 100px;height: 100px;">
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="showPosition" label="弹窗位置">
|
|
<template v-slot="scope">
|
|
{{ scope.row.showPosition == 'home' ? '首页' : "点餐页" }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="showPosition" label="是否可见">
|
|
<template v-slot="scope">
|
|
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
|
|
@change="showChange($event, scope.row)"></el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="path" label="弹窗频率" />
|
|
<el-table-column prop="createTime" label="创建日期" />
|
|
<el-table-column label="操作" width="200">
|
|
<template v-slot="scope">
|
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button>
|
|
<el-popconfirm title="确定删除吗？" @confirm="delHandle(scope.row.id)">
|
|
<el-button type="text" round slot="reference">
|
|
删除
|
|
</el-button>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- <div class="">
|
|
<el-pagination :total="tableData.length" layout="total, prev, pager, next, jumper"></el-pagination>
|
|
</div> -->
|
|
<!-- 增减余额弹窗 -->
|
|
<el-dialog :title="title + '页面'" :visible.sync="dialogVisible" width="30%">
|
|
<el-form ref="form" :model="form" label-width="80px">
|
|
<el-form-item label="页面名称">
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item> <el-form-item label="页面路径">
|
|
<el-input v-model="form.path"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-radio-group v-model="form.status">
|
|
<el-radio :label="1">可见</el-radio>
|
|
<el-radio :label="2">不可见</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="sumbit">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { adget, adpost, adput, addelete } from '@/api/application'
|
|
export default {
|
|
data() {
|
|
return {
|
|
tableData: [],
|
|
query: {
|
|
showPosition: "", status: ""
|
|
},
|
|
form: {
|
|
name: "",
|
|
path: "",
|
|
status: 1,
|
|
},
|
|
title: '新增',
|
|
dialogVisible: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
watch: {
|
|
'form.type': (n, o) => {
|
|
if (n == 'img') {
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
showChange() { },
|
|
async sumbit() {
|
|
this.dialogVisible = false
|
|
if (this.title == '新增') {
|
|
await adpost(this.form)
|
|
|
|
this.$message({
|
|
message: '添加成功',
|
|
type: 'success'
|
|
})
|
|
} else {
|
|
await adput(this.form)
|
|
|
|
this.$message({
|
|
message: '编辑成功',
|
|
type: 'success'
|
|
})
|
|
}
|
|
this.form = {
|
|
status: 1
|
|
}
|
|
this.getList()
|
|
},
|
|
// 编辑
|
|
async edit(item) {
|
|
this.title = '编辑'
|
|
this.dialogVisible = true
|
|
this.form = item
|
|
},
|
|
// 删除
|
|
async delHandle(pagesId) {
|
|
let res = await addelete(pagesId)
|
|
this.$message({
|
|
message: '删除成功',
|
|
type: 'success'
|
|
})
|
|
this.getList()
|
|
},
|
|
async getList() {
|
|
let res = await adget({
|
|
shopId: localStorage.getItem("shopId"),
|
|
...this.query
|
|
})
|
|
this.tableData = res
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style></style> |