后台前端修改

This commit is contained in:
linfeng 2022-12-20 10:09:48 +08:00
parent f720ccea0f
commit 97dd13a2d1

@ -13,18 +13,19 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<!-- 选择框 --> <!-- 选择框 -->
<el-select v-model="dataForm.status" clearable placeholder="请选择状态"> <el-select v-model="dataForm.status" clearable placeholder="请选择状态">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> >
</el-select> </el-option>
</el-select>
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
<el-button @click="refresh()">重置</el-button> <el-button @click="refresh()">重置</el-button>
<el-button <el-button
v-if="isAuth('admin:post:delete')" v-if="isAuth('admin:post:delete')"
type="danger" type="danger"
@ -32,7 +33,6 @@
:disabled="dataListSelections.length <= 0" :disabled="dataListSelections.length <= 0"
>批量删除</el-button >批量删除</el-button
> >
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table
@ -118,8 +118,18 @@
label="文件" label="文件"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-if="scope.row.type == 2" type="text" @click="openVideo(scope.row.media[0])">点击预览</el-button> <el-button
<el-button v-if="scope.row.type == 1 && scope.row.media[0]" type="text" @click="openPic(scope.row.media)">点击查看</el-button> v-if="scope.row.type == 2"
type="text"
@click="openVideo(scope.row.media[0])"
>点击预览</el-button
>
<el-button
v-if="scope.row.type == 1 && scope.row.media[0]"
type="text"
@click="openPic(scope.row.media)"
>点击查看</el-button
>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -163,7 +173,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="address" prop="address"
header-align="center" header-align="center"
@ -187,13 +197,15 @@
label="操作" label="操作"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-if="scope.row.status==1 || scope.row.status==2" <el-button
v-if="scope.row.status == 1 || scope.row.status == 2"
type="text" type="text"
size="small" size="small"
@click="statusHandle(scope.row.id)" @click="statusHandle(scope.row.id)"
>上架</el-button >上架</el-button
> >
<el-button v-if="scope.row.status==0" <el-button
v-if="scope.row.status == 0"
type="text" type="text"
size="small" size="small"
@click="statusDownHandle(scope.row.id)" @click="statusDownHandle(scope.row.id)"
@ -238,13 +250,13 @@
width="30%" width="30%"
:before-close="handleClose" :before-close="handleClose"
> >
<video <video
class="video" class="video"
:src="this.videoUrl" :src="this.videoUrl"
enable-danmu enable-danmu
danmu-btn danmu-btn
controls controls
></video> ></video>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button> <el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="dialogVisible = false" <el-button type="primary" @click="dialogVisible = false"
@ -258,16 +270,20 @@
width="60%" width="60%"
:before-close="handleClose" :before-close="handleClose"
> >
<div class="images"> <div class="images">
<div v-for="(item, index) in media" :key="index" class="image-middle"> <div v-for="(item, index) in media" :key="index" class="image-middle">
<el-card shadow="hover" :body-style="{ padding: '10px' }" > <el-card shadow="hover" :body-style="{ padding: '10px' }">
<img :src="media[index]" class="image" @click="goPic(media[index])"/> <img
<div style="text-align:center;padding-top:12px"> :src="media[index]"
<span>{{index+1}}</span> class="image"
@click="goPic(media[index])"
/>
<div style="text-align: center; padding-top: 12px">
<span>{{ index + 1 }}</span>
</div>
</el-card>
</div> </div>
</el-card>
</div> </div>
</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false"> </el-button> <el-button @click="dialogVisible2 = false"> </el-button>
@ -286,7 +302,7 @@ export default {
return { return {
dataForm: { dataForm: {
key: "", key: "",
status:'', status: "",
}, },
dataList: [], dataList: [],
pageIndex: 1, pageIndex: 1,
@ -297,19 +313,23 @@ export default {
addOrUpdateVisible: false, addOrUpdateVisible: false,
dialogVisible: false, dialogVisible: false,
dialogVisible2: false, dialogVisible2: false,
videoUrl:"", videoUrl: "",
media: [], media: [],
options: [{ options: [
{
value: 0, value: 0,
label: '正常' label: "正常",
}, { },
{
value: 1, value: 1,
label: '待审核' label: "待审核",
}, { },
{
value: 2, value: 2,
label: '已下架' label: "已下架",
}], },
// value: '' ],
// value: ''
}; };
}, },
components: { components: {
@ -319,12 +339,12 @@ export default {
this.getDataList(); this.getDataList();
}, },
methods: { methods: {
refresh(){ refresh() {
this.dataForm.key=''; this.dataForm.key = "";
this.dataForm.status=''; this.dataForm.status = "";
this.pageIndex=1; this.pageIndex = 1;
this.pageSize=10; this.pageSize = 10;
this.getDataList(); this.getDataList();
}, },
// //
getDataList() { getDataList() {
@ -336,7 +356,7 @@ export default {
page: this.pageIndex, page: this.pageIndex,
limit: this.pageSize, limit: this.pageSize,
key: this.dataForm.key, key: this.dataForm.key,
status:this.dataForm.status status: this.dataForm.status,
}), }),
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
@ -407,8 +427,8 @@ export default {
}); });
}); });
}, },
statusDownHandle(id){ statusDownHandle(id) {
var ids = id var ids = id
? [id] ? [id]
: this.dataListSelections.map((item) => { : this.dataListSelections.map((item) => {
return item.id; return item.id;
@ -479,26 +499,24 @@ export default {
}); });
}, },
handleClose(done) { handleClose(done) {
this.$confirm('确认关闭?') this.$confirm("确认关闭?")
.then(_ => { .then((_) => {
done(); done();
}) })
.catch(_ => {}); .catch((_) => {});
}, },
openVideo(url){ openVideo(url) {
this.dialogVisible=true; this.dialogVisible = true;
this.videoUrl=url; this.videoUrl = url;
}, },
openPic(media){ openPic(media) {
this.dialogVisible2=true; this.dialogVisible2 = true;
this.media=media; this.media = media;
}, },
goPic(url){ goPic(url) {
console.log('==>',url); console.log("==>", url);
window.open(url); window.open(url);
} },
}, },
}; };
</script> </script>
@ -513,7 +531,7 @@ export default {
font-weight: 600; font-weight: 600;
} }
/* 图片总布局,样式 */ /* 图片总布局,样式 */
.images{ .images {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
margin-left: 21px; margin-left: 21px;
@ -521,14 +539,13 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
} }
/* 图片之间 */ /* 图片之间 */
.image-middle{ .image-middle {
margin-right: 15px; margin-right: 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }
/* 单张图片样式 */ /* 单张图片样式 */
.image{ .image {
width:110px; width: 110px;
height: 110px; height: 110px;
} }
</style> </style>