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

feat: 增加点歌配置列表页面,修复转桌报错导致页面无反应问题，去除添加耗材的库存数量以及弹窗关闭表单重置失败问题

Browse Source
This commit is contained in:
YeMingfei666
2025-03-17 10:55:01 +08:00
parent 6a37b53c8c
commit ed25a9c5e6
10 changed files with 451 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/application/list/index.vue
View File

@@ -23,7 +23,7 @@ import call from "@/assets/images/application/call.png";
const list = ref([
{ name: "存酒", icon: bear, path: "storingWine", desc: "用户未喝完的酒可暂存在店里" },
{ name: "点歌", icon: song, path: "", desc: "用户可以付费点歌" },
{ name: "点歌", icon: song, path: "song", desc: "用户可以付费点歌" },
{ name: "广告", icon: ad, path: "advertisement", desc: "添加弹窗广告" },
{ name: "叫号", icon: call, path: "lineUplist", desc: "" },
]);

169
src/views/application/list/song/components/add-song.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<el-dialog :title="title" width="500px" v-model="dialogVisible" @close="diaClose">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="歌曲图片">
<single-image-upload v-model="form.img"></single-image-upload>
</el-form-item>
<el-form-item label="歌曲名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="原唱歌手">
<el-input v-model="form.originSinger"></el-input>
</el-form-item>
<el-form-item label="演出歌手名称" prop="singer">
<el-input v-model="form.singer"></el-input>
</el-form-item>
<el-form-item label="单价" prop="price">
<el-input type="number" v-model="form.price"></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input type="number" v-model="form.sort"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.status" :inactive-value="0" :active-value="1"></el-switch>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
import shopSongApi from "@/api/account/shopSong";
const form = {
img: "",
name: "",
singer: "",
originSinger: "",
price: 0,
sort: 0,
status: 1,
};
export default {
data() {
return {
title: "",
dialogVisible: false,
rules: {
name: [
{
required: true,
message: "歌曲名称必填",
trigger: "blur",
},
],
singer: [
{
required: true,
message: "演出歌手名称必填",
trigger: "blur",
},
],
price: [
{
required: true,
message: "单价必填",
trigger: "blur",
},
],
sort: [
{
required: true,
message: "排序必填",
trigger: "blur",
},
],
},
form: { ...form },
};
},
mounted() {},
methods: {
restForm() {
this.form = { ...form };
},
diaClose() {
this.restForm();
},
// 提交
onSubmitHandle() {
console.log(this.form);
this.$refs.form.validate(async (valid) => {
if (valid) {
try {
let res = "";
if (this.form.id) {
//编辑
res = await shopSongApi.update(this.form);
ElMessage({
title: "成功",
message: `修改成功`,
type: "success",
});
} else {
//添加
res = await shopSongApi.add(this.form);
ElMessage({
title: "成功",
message: `添加成功`,
type: "success",
});
}
this.close();
this.$emit("success", res);
} catch (error) {
console.log(error);
}
}
});
},
async show(obj = {}) {
console.log(obj);
// this.form=this.$options.data().form
this.dialogVisible = true;
this.title = "添加歌曲";
if (obj && obj.id) {
this.title = "编辑歌曲";
this.form = {
...obj,
};
}
if (obj && obj.hasOwnProperty("img") && obj.img) {
console.log(obj.img);
this.form.img = obj.img;
requestAnimationFrame(() => {
this.$refs.uploadImg.fileList = [
{
url: obj.img,
},
];
});
}
},
close() {
this.restForm();
this.dialogVisible = false;
},
},
};
</script>
<style scoped lang="scss">
.goods_info {
background-color: #f9f9f9;
padding: 10px;
display: flex;
align-items: center;
.info {
flex: 1;
padding-left: 10px;
}
}
</style>

190
src/views/application/list/song/index.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<div class="app-container">
<div class="head-container flex">
<el-button type="primary" icon="plus" @click="$refs.addSong.show()">添加歌曲</el-button>
</div>
<div class="flex u-m-b-10">
<div class="flex">
<span>歌手页地址:</span>
<a class="cursor-pointer" target="_blank" :href="singgerUrl">{{ singgerUrl }}</a>
</div>
</div>
<div class="head-container" id="table_drag">
<el-table :data="tableData.list" v-loading="tableData.loading" row-key="id">
<el-table-column label="排序" sortable prop="sort"></el-table-column>
<el-table-column label="id" prop="id"></el-table-column>
<el-table-column label="歌曲图片" prop="img">
<template v-slot="scope">
<el-image
:src="scope.row.img"
style="width: 40px; height: 40px; border-radius: 4px; background-color: #efefef"
>
<template #error>
<div class="img_error">
<i class="icon el-icon-document-delete"></i>
</div>
</template>
</el-image>
</template>
</el-table-column>
<el-table-column label="歌曲名称" prop="name"></el-table-column>
<el-table-column label="演出歌手" prop="singer"></el-table-column>
<el-table-column label="单价" prop="price"></el-table-column>
<el-table-column label="点唱次数" prop="salesNumber"></el-table-column>
<el-table-column label="歌曲状态" prop="status">
<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 label="操作" width="240">
<template v-slot="scope">
<!-- <el-button link icon="el-icon-rank" v-if="isPcBowser">排序</el-button>
<el-button link size="small" round icon="el-icon-edit" @click="$refs.addSong.show(scope.row)"
style="margin-left: 20px !important;">编辑</el-button> -->
<el-button
link
size="small"
round
icon="el-icon-edit"
@click="$refs.addSong.show(scope.row)"
>
编辑
</el-button>
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
<template #reference>
<el-button link size="small" round icon="el-icon-delete">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<addSong ref="addSong" @success="addSongSuccess"></addSong>
<el-pagination
@size-change="paginationSizeChange"
:total="tableData.total"
:current-page="tableData.page"
:page-size="tableData.size"
@current-change="paginationChange"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
</div>
</template>
<script>
import shopSongApi from "@/api/account/shopSong";
import addSong from "./components/add-song.vue";
export default {
components: {
addSong,
},
data() {
return {
singgerUrl: "",
tableData: {
page: 1,
size: 10,
total: 0,
loading: false,
list: [],
},
};
},
mounted() {
this.getTableData();
this.getUrl();
},
methods: {
async getUrl() {
const res = await shopSongApi.url();
console.log(res);
const baseUrl =
location.hostname === "localhost" ? "https://admintestweb.sxczgkj.cn" : location.origin;
this.singgerUrl = baseUrl + "/song-H5/index.html?t=" + res;
},
jumpUrl(url) {
window.open(url);
},
addSongSuccess() {
this.getTableData();
},
paginationSizeChange(e) {
this.tableData.size = e;
this.getTableData();
},
async showChange(e, row) {
try {
this.tableData.loading = true;
const data = { ...row };
data.status = e;
await shopSongApi.update(data);
this.getTableData();
} catch (error) {
console.log(error);
this.tableData.loading = false;
}
},
// 重置查询
resetHandle() {
this.tableData.page = 0;
this.getTableData();
},
// 分页回调
paginationChange(e) {
this.tableData.page = e;
this.getTableData();
},
// 删除
async delHandle(ids) {
try {
await shopSongApi.delete(ids);
ElMessage({
title: "成功",
message: `删除成功`,
type: "success",
});
this.getTableData();
} catch (error) {
console.log(error);
}
},
// 获取音乐列表
async getTableData() {
try {
this.tableData.loading = true;
const res = await shopSongApi.getList({
page: this.tableData.page,
size: this.tableData.size,
});
this.tableData.loading = false;
this.tableData.list = res.records;
this.tableData.total = res.totalRow;
} catch (error) {}
},
},
};
</script>
<style>
.flex {
display: flex;
align-content: center;
}
.cursor-pointer {
cursor: pointer;
color: #1890ff !important;
transition: all 0.3s;
font-size: 16px;
}
.cursor-pointer:hover {
opacity: 0.7;
}
.app-container {
margin: 20px;
background-color: #fff;
}
</style>