盛安新版本问题优化-3视频圈增加审批

This commit is contained in:
曹磊 2024-10-31 10:15:49 +08:00
parent 9bf3683d58
commit d09e3a4b82
2 changed files with 587 additions and 0 deletions

View File

@ -149,6 +149,7 @@ const mainRoutes = {
{ path: '/artificerPartitioningDetails', component: _import('bl/artificer/artificerPartitioningDetails'), name: 'artificerPartitioningDetails', meta: { title: '技师分成明细配置列表', isTab: true } },
{ path: '/artificerRechargeReward', component: _import('bl/artificer/artificerRechargeReward'), name: 'artificerRechargeReward', meta: { title: '技师充值奖励配置列表', isTab: true } },
{ path: '/blPingjiaTag', component: _import('bl/pingjiaTag/blPingjiaTag'), name: 'blPingjiaTag', meta: { title: '用户评价标签', isTab: true } },
{ path: '/shipinquan', component: _import('bl/shipinquan/shipinquan'), name: 'shipinquan', meta: { title: '视频圈', isTab: true } },
],
beforeEnter(to, from, next) {
let token = Vue.cookie.get('token')

View File

@ -0,0 +1,586 @@
<template>
<div>
<!-- 列表 -->
<div style="display: inline-block">
<span>状态</span>
<el-select
clearable
v-model="status"
style="width: 150px;">
<el-option value="" label="全部"></el-option>
<el-option value="0" label="待审批"></el-option>
<el-option value="1" label="已通过"></el-option>
<el-option value="2" label="已拒绝"></el-option>
</el-select>&nbsp;&nbsp;
</div>
<div style="margin-left:10px;display: inline-block">
<span>姓名</span>
<el-input
style="width: 200px"
placeholder="请输入技师姓名"
v-model="name">
</el-input>
</div>
<el-button
style="margin-left: 10px"
size="mini"
type="primary"
icon="document"
@click="handleSelect"
>查询
</el-button>
<el-button
style="margin-left: 10px"
size="mini"
type="primary"
icon="document"
@click="handleClear"
>重置
</el-button>
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column
prop="id"
label="编号"
width="80"
>
</el-table-column>
<el-table-column prop="artificerImg" label="头像" width="80">
<template slot-scope="scope">
<img
v-if="scope.row.artificerImg && scope.row.artificerImg != ''"
:src="scope.row.artificerImg"
width="40"
height="40"
/>
<span v-else>暂无图片</span>
</template>
</el-table-column>
<el-table-column
prop="artificerName"
label="姓名"
width="120"
>
</el-table-column>
<el-table-column prop="picPath" label="视频" width="120" >
<template slot-scope="scope">
<img
v-if="scope.row.picPath && scope.row.picPath != ''"
:src="scope.row.picPath"
width="120"
height="120"
@click="showVideo(scope.row)"
/>
<span v-else>暂无视频</span>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="申请时间"
width="150"
>
</el-table-column>
<el-table-column
prop="content"
label="内容"
width="220"
>
</el-table-column>
<el-table-column
prop="dzs"
label="点赞数"
width="120"
>
</el-table-column>
<el-table-column
prop="pls"
label="评论数"
width="120"
>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="120"
>
<template slot-scope="scope">
<span v-if="scope.row.status == 0">待审批</span>
<span v-if="scope.row.status == 1">已通过</span>
<span v-if="scope.row.status == 2">已拒绝</span>
</template>
</el-table-column>
<el-table-column
prop="opinion"
label="意见"
width="150"
>
</el-table-column>
<el-table-column label="操作" prop="id" width="300" fixed="right">
<template slot-scope="scope">
<el-button v-if="scope.row.status == 0"
size="mini"
type="primary"
style="margin: 5px"
@click="handleDelete(scope.row)"
>删除
</el-button>
<el-button v-if="scope.row.status == 0"
size="mini"
type="primary"
style="margin: 5px"
@click="handleApply(scope.row)"
>审批
</el-button>
<el-button v-if="scope.row.status == 1 || scope.row.status == 2"
size="mini"
type="primary"
style="margin: 5px"
@click="handleCancelApply(scope.row)"
>取消审批
</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]"
:page-size="limit"
:current-page="page"
layout="total,sizes, prev, pager, next,jumper"
:total="tableData.totalCount"
>
</el-pagination>
</div>
<!-- 审批 -->
<el-dialog :title="titles" :visible.sync="dialogApproveFormVisible" center @close="closeApply">
<div style="margin-bottom: 10px; display: flex">
<span style="width: 200px; display: inline-block; text-align: right">头像</span>
<div
style="
width: 148px;
height: 148px;
border: 1px dashed #c0ccda;
border-radius: 6px;
text-align: center;
line-height: 148px;
"
>
<img
:src="artificerImg"
class="avatar"
style="border-radius: 6px; width: 148px; height: 148px"
/>
</div>
</div>
<div style="margin-bottom: 10px">
<span style="width: 200px; display: inline-block; text-align: right">姓名</span>
<el-input
style="width: 50%"
v-model="artificerName"
:disabled="true"
></el-input>
</div>
<div style="margin-bottom: 10px">
<span style="width: 200px; display: inline-block; text-align: right"
>内容</span
>
<el-input
style="width: 50%"
v-model="content"
type="textarea"
:rows="4"
:disabled="true"
>
</el-input>
</div>
<div style="margin-bottom: 10px">
<span style="width: 200px; display: inline-block; text-align: right">状态</span>
<el-radio-group v-model="status">
<el-radio :label="1">通过</el-radio>
<el-radio :label="2">拒绝</el-radio>
</el-radio-group>
</div>
<div style="margin-bottom: 10px">
<span style="width: 200px; display: inline-block; text-align: right">审批意见</span>
<el-input
style="width: 50%"
v-model="opinion"
type="textarea"
:rows="4"
placeholder="请输入审批意见"
>
</el-input>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogApproveFormVisible = false"> </el-button>
<el-button type="primary" @click="handleApprove()"> </el-button>
</div>
</el-dialog>
<!-- 视频 -->
<el-dialog :title="titles" :visible.sync="dialogVideoFormVisible" center @close="closeVideo">
<div style="margin-bottom: 10px; display: flex;justify-content: center;">
<video ref="videoRef" height="500" controls></video>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVideoFormVisible = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
statusData:[{id:0,value:'待授权'},{id:1,value:'已授权'},{id:2,value:'已驳回'}],
apiUrl: "",
titles: "",
tableDataLoading: false,
tableData: {},
id: "",
name: "",
status: "",
artificerImg: "",
artificerName: "",
content: "",
opinion: "",
page: 1,
limit: 10,
dialogApproveFormVisible: false,
videoUrl: "",
dialogVideoFormVisible: false,
videoPlayer: null
};
},
methods: {
//
handleSelect() {
this.tableDataLoading = true;
this.$http({
url: this.$http.adornUrl("bl/shipinquan/list"),
method: "get",
params: this.$http.adornParams({
page: this.page,
limit: this.limit,
artificerName: this.name,
status: this.status
}),
}).then(({data}) => {
if (data.code == 0) {
this.tableData = data.data;
console.log(this.tableData);
} else {
this.$notify({
title: "提示",
duration: 1800,
message: data.msg,
type: "warning",
});
}
this.tableDataLoading = false;
});
},
//
handleClear() {
this.name = "";
this.status = "";
this.page = 1;
this.handleSelect();
},
//
handleSizeChange(val) {
this.limit = val;
this.handleSelect();
},
//
handleCurrentChange(val) {
this.page = val;
this.handleSelect();
},
//
handleApply(row) {
this.titles = "审批";
this.id = row.id;
this.artificerImg = row.artificerImg;
this.artificerName = row.artificerName;
this.content = row.content;
this.status = 1;
this.dialogApproveFormVisible = true;
},
//
handleDelete(row){
this.$confirm(`确定删除此条信息?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
let id = row.id;
this.$http({
url: this.$http.adornUrl("bl/shipinquan/delete"),
method: "post",
params: this.$http.adornParams({
id: id
}),
}).then(({data}) => {
if (data.code == 0) {
this.clearDatas();
this.$message({
message: "删除成功",
type: "success",
duration: 1500,
onClose: () => {
this.handleSelect();
},
});
} else {
this.$message({
message: data.msg,
type: "warning",
duration: 1500,
onClose: () => {
},
});
}
});
}).catch(() => {});
},
//
handleApprove() {
if (this.status == "") {
this.$notify({
title: "提示",
duration: 1800,
message: "请选择审批状态",
type: "warning",
});
return;
}
if (this.status == '2') {
if (this.opinion == "") {
this.$notify({
title: "提示",
duration: 1800,
message: "请输入审批意见",
type: "warning",
});
return;
}
}
this.$http({
url: this.$http.adornUrl("bl/shipinquan/approve"),
method: "post",
params: this.$http.adornParams({
id: this.id,
opinion: this.opinion,
status: this.status,
}),
}).then(({data}) => {
if (data.code == 0) {
this.dialogApproveFormVisible = false;
this.clearDatas();
this.$message({
message: "审核成功",
type: "success",
duration: 1500,
onClose: () => {
this.handleSelect();
},
});
} else {
this.$message({
message: data.msg,
type: "warning",
duration: 1500,
onClose: () => {
},
});
}
});
},
//
handleCancelApply(row){
let id = row.id;
let userId = row.userId;
this.$http({
url: this.$http.adornUrl("bl/shipinquan/approve"),
method: "post",
params: this.$http.adornParams({
id: id,
opinion: '系统取消授权',
status: '0'
}),
}).then(({data}) => {
if (data.code == 0) {
this.clearDatas();
this.$message({
message: "取消成功",
type: "success",
duration: 1500,
onClose: () => {
this.handleSelect();
},
});
} else {
this.$message({
message: data.msg,
type: "warning",
duration: 1500,
onClose: () => {
},
});
}
});
},
closeApply(){
this.dialogApproveFormVisible= false;
this.titles = "";
},
clearDatas(){
this.apiUrl="";
this.tableDataLoading= false;
this.id= "";
this.name= "";
this.status= "";
this.artificerImg= "";
this.artificerName= "";
this.content= "";
this.opinion= "";
this.page= 1;
this.limit= 10;
this.dialogApproveFormVisible= false;
},
showVideo(row){
this.dialogVideoFormVisible= true;
this.titles = "视频";
this.$nextTick(()=>{
this.videoUrl = "";
const video = this.$refs.videoRef;
video.src = row.filePath;
video.load();
video.play();
})
},
closeVideo(){
this.dialogVideoFormVisible= false;
this.filePath = "";
this.titles = "";
this.videoUrl = "";
}
},
mounted() {
this.handleSelect();
//this.videoPlayer = this.$refs.videoRef;
},
};
</script>
<style>
.customWidth {
width: 80% !important;
}
.el-dialog--center {
text-align: center;
margin-top: 1vh !important;
}
.el-tooltip__popper {
width: 200px;
padding: 10px;
color: #000 !important;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
background-color: #fff !important;
}
.adver_main.box a {
display: flex;
justify-content: center;
height: 150px;
line-height: 150px;
text-decoration: none;
}
.bannerManin span {
display: inline-block;
margin-left: 5px;
}
.bannerManin img {
width: 48px;
height: 48px;
border-radius: 50%;
}
.bannerbtn a {
flex: 1;
text-align: center;
color: #3e8ef7 !important;
text-decoration: none;
}
.imgs {
position: relative;
border-radius: 6px;
width: 148px;
height: 148px;
margin-right: 10px;
display: inline-block;
}
.dels {
position: absolute;
top: 0;
left: 0;
display: none;
}
.dels .el-icon-delete {
line-height: 148px;
padding-left: 58px;
font-size: 25px;
color: #fff;
}
.imgs:hover .dels {
width: 100%;
height: 100%;
background: #000;
display: block;
opacity: 0.5;
}
.bqList {
padding: 4px 14px;
margin: 4px;
border: 1px solid #efefef;
font-size: 12px;
color: #999;
border-radius: 4px;
margin-right: 15px;
}
.delss {
display: none;
position: relative;
}
.delss .el-icon-delete {
position: absolute;
top: 0;
}
.bqList:hover .delss {
display: initial;
opacity: 0.5;
}
.tj {
padding: 6px !important;
margin: 4px;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>