商户业务流程编写完毕

master
许宏杰 1 year ago
parent 5aa4bf85a4
commit 3c38242455

@ -12,14 +12,14 @@ export default {
name: "App",
mounted() {
//
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
console.log(screenWidth, screenHeight);
// var screenWidth = window.innerWidth;
// var screenHeight = window.innerHeight;
// console.log(screenHeight);
// ()
autofit.init(
{
dh: screenHeight,
dw: screenWidth,
dh: 931,
dw: 1920,
el: "#app",
resize: true,
},

@ -1,44 +1,53 @@
import request from '@/utils/request'
import request from "@/utils/request";
// 查询广告列表
export function listPoster(query) {
return request({
url: '/netEwm/poster/list',
method: 'get',
params: query
})
url: "/netEwm/poster/list",
method: "get",
params: query,
});
}
// 查询广告详细
export function getPoster(id) {
return request({
url: '/netEwm/poster/' + id,
method: 'get'
})
url: "/netEwm/poster/" + id,
method: "get",
});
}
// 新增广告
export function addPoster(data) {
return request({
url: '/netEwm/poster',
method: 'post',
data: data
})
url: "/netEwm/poster",
method: "post",
data: data,
});
}
// 修改广告
export function updatePoster(data) {
return request({
url: '/netEwm/poster',
method: 'put',
data: data
})
url: "/netEwm/poster",
method: "put",
data: data,
});
}
// 删除广告
export function delPoster(id) {
return request({
url: '/netEwm/poster/' + id,
method: 'delete'
})
url: "/netEwm/poster/" + id,
method: "delete",
});
}
//广告批量分配给商户
export function batchAllocation(data) {
return request({
url: "/netEwm/poster/batchAllocation",
method: "post",
data: data,
});
}

@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700630701955" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3505" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M336 256m-192 0a192 192 0 1 0 384 0 192 192 0 1 0-384 0Z" fill="#606266" p-id="3506"></path><path d="M336 544.256c25.28 0 49.088 2.304 71.488 7.04-0.64 4.48-0.896 9.088-0.896 13.632v214.144c0 18.816 4.736 36.928 13.312 52.928H51.264a19.2 19.2 0 0 1-18.432-24.32c49.024-175.488 150.08-263.296 303.168-263.424zM736 402.496l185.408 107.008a64 64 0 0 1 32 55.424v214.144a64 64 0 0 1-32 55.424L736 941.44a64 64 0 0 1-64 0L486.592 834.56a64 64 0 0 1-32-55.424V564.928a64 64 0 0 1 32-55.424L672 402.56a64 64 0 0 1 64 0zM704 576a96 96 0 1 0 0 192 96 96 0 0 0 0-192z" fill="#606266" p-id="3507"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700639845119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9601" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M463.7696 454.5536a195.2256 195.2256 0 1 0-195.2256-195.2256 195.072 195.072 0 0 0 195.2256 195.2256z m0-321.536A126.3616 126.3616 0 1 1 337.408 259.328 126.208 126.208 0 0 1 463.7696 133.12zM463.7696 501.4528a424.1408 424.1408 0 0 0-424.0384 423.9872 34.4576 34.4576 0 0 0 68.9152 0 355.4816 355.4816 0 0 1 307.8144-352.3584l-72.1408 234.2912a35.84 35.84 0 0 0 5.9904 31.744l87.04 107.9296a34.56 34.56 0 0 0 53.76 0l86.3744-107.9296a34.816 34.816 0 0 0 6.4512-31.744l-72.3968-234.2912a331.1104 331.1104 0 0 1 129.0752 43.6736 34.6112 34.6112 0 0 0 45.5168-10.24 34.0992 34.0992 0 0 0-8.7552-47.7696 405.6064 405.6064 0 0 0-213.6064-57.2928z m48.6912 308.224L463.7696 870.4l-48.2304-60.672 48.2304-156.6208zM780.288 686.08h169.5232a34.4576 34.4576 0 0 0 0-68.9152H780.288a34.4576 34.4576 0 0 0 0 68.9152zM949.8112 742.4h-84.992a34.4576 34.4576 0 1 0 0 68.9152h84.992a34.4576 34.4576 0 0 0 0-68.9152zM949.8112 868.0448H780.288a34.4576 34.4576 0 0 0 0 68.9152h169.5232a34.4576 34.4576 0 1 0 0-68.9152z" p-id="9602"></path></svg>

Before

Width:  |  Height:  |  Size: 932 B

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -19,3 +19,21 @@
color: blue !important;
}
}
.el-date-editor.el-input {
width: 100%;
}
//
.my-info {
.cell-info {
margin: 15px 0;
font-size: 16px;
font-weight: bold;
}
.info-container {
.avatar {
height: 200px;
width: 400px;
}
}
}

@ -5,9 +5,11 @@
:on-progress="uploadVideoProcess"
:on-success="handleVideoSuccess"
:before-upload="beforeUploadVideo"
:on-error="handleUploadError"
:show-file-list="false"
:headers="headers"
>
<div class="video-main">
<video
v-if="videoForm.showVideoPath != '' && !videoFlag"
v-bind:src="videoForm.showVideoPath"
@ -20,6 +22,15 @@
v-else-if="videoForm.showVideoPath == '' && !videoFlag"
class="el-icon-plus avatar-uploader-icon"
></i>
<div
class="close-btn"
@click.stop="handleClose()"
v-if="videoForm.showVideoPath != ''"
>
<i class="el-icon-delete-solid"></i>
</div>
</div>
<el-progress
v-if="videoFlag == true"
type="circle"
@ -32,6 +43,9 @@
<script>
import { getToken } from "@/utils/auth";
export default {
props: {
value: [String, Object, Array],
},
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
@ -50,20 +64,29 @@ export default {
},
};
},
watch: {
value: {
handler(val) {
console.log("会显示", val);
if (val) {
this.videoForm.showVideoPath = this.baseUrl + val;
}
},
deep: true,
immediate: true,
},
},
methods: {
/**s删除视频 */
handleClose() {
this.videoForm.showVideoPath = "";
this.videoFlag = false;
},
//
beforeUploadVideo(file) {
var fileSize = file.size / 1024 / 1024 < 50; // 50
if (
[
"video/mp4",
"video/ogg",
"video/flv",
"video/avi",
"video/wmv",
"video/rmvb",
"video/mov",
].indexOf(file.type) == -1 //
["video/mp4", "video/avi", "video/rmvb"].indexOf(file.type) == -1 //
) {
this.$modal.msgError("请上传正确的视频格式");
return false;
@ -85,8 +108,14 @@ export default {
this.isShowUploadVideo = true;
this.videoFlag = false;
this.videoUploadPercent = 0;
console.log(res);
this.videoForm.showVideoPath = res.url;
this.videoForm.showVideoPath = this.baseUrl + res.fileName;
this.$emit("input", res.fileName);
this.$modal.msgSuccess("上传成功");
},
//
handleUploadError() {
this.$modal.msgError("上传视频失败,请重试");
this.$modal.closeLoading();
},
},
};
@ -119,4 +148,20 @@ export default {
height: 178px;
display: block;
}
.video-main {
position: relative;
.close-btn {
position: absolute;
top: -10px;
right: -10px;
height: 25px;
width: 25px;
border-radius: 50%;
border: 1px solid red;
text-align: center;
line-height: 25px;
color: red;
background: #fff;
}
}
</style>

@ -78,9 +78,9 @@
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<!-- <div class="el-login-footer">
<span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
</div>
</div> -->
</div>
</template>
@ -114,7 +114,7 @@ export default {
//
captchaEnabled: true,
//
register: false,
register: true,
redirect: undefined,
};
},

@ -110,34 +110,30 @@
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="广告名称" align="center" prop="posterName" />
<el-table-column
label="有效起始时间"
align="center"
prop="startTime"
width="180"
>
<el-table-column label="有效起始时间" align="center" prop="startTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.startTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="有效结束时间"
align="center"
prop="endTime"
width="180"
>
<el-table-column label="有效结束时间" align="center" prop="endTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.endTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="视频封面" align="center" prop="videoLogo" />
<el-table-column label="视频路径" align="center" prop="videoPath" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-document-copy"
@click="handleFp(scope.row)"
v-hasPermi="['netEwm:poster:edit']"
>广告分配</el-button
>
<el-button
size="mini"
type="text"
@ -192,12 +188,8 @@
>
</el-date-picker>
</el-form-item>
<el-form-item label="视频封面" prop="videoLogo">
<el-input v-model="form.videoLogo" placeholder="请输入视频封面" />
</el-form-item>
<el-form-item label="视频路径" prop="videoPath">
<!-- <el-input v-model="form.videoPath" placeholder="请输入视频路径" /> -->
<VideoUpload />
<VideoUpload v-model="form.videoPath" v-if="open" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -205,6 +197,9 @@
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- 广告分配 -->
<el-dialog :title="fpTitle" :visible.sync="fpShow" width="1200px">
</el-dialog>
</div>
</template>
@ -221,6 +216,10 @@ export default {
name: "Poster",
data() {
return {
//
fpShow: false,
//
fpTitle: "",
//
loading: true,
//
@ -257,6 +256,11 @@ export default {
this.getList();
},
methods: {
/**批量分配广告给商户 */
handleFp() {
this.fpTitle = "批量分配广告";
this.fpShow = true;
},
/** 查询广告列表 */
getList() {
this.loading = true;

@ -0,0 +1,178 @@
<template>
<!-- 配方广告 -->
<el-dialog
title="分配广告"
:visible.sync="fpShow"
width="1200px"
append-to-body
>
<div class="fp-table app-container" ref="appMain">
<div ref="search">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
label-width="100px"
>
<el-form-item label="广告名称" prop="posterName">
<el-input
v-model="queryParams.posterName"
placeholder="请输入广告名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<el-table v-loading="loading" :data="posterList" :height="tableHeigth">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="广告名称" align="center" prop="posterName" />
<el-table-column label="有效起始时间" align="center" prop="startTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.startTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="有效结束时间" align="center" prop="endTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.endTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="点击预览广告"
align="center"
prop="posterName"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-link type="primary" :href="baseUrl + scope.row.videoPath">{{
scope.row.videoPath
}}</el-link>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
:disabled="shanghuPosterId == scope.row.id"
type="primary"
size="small"
@click="handleFp(scope.row)"
>分配</el-button
>
</template>
</el-table-column>
</el-table>
<div ref="pagination">
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
</el-dialog>
</template>
<script>
import { listPoster, batchAllocation } from "@/api/netEwm/poster";
export default {
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
loading: false,
posterList: [],
total: 0,
fpShow: false,
tableHeigth: 0,
//
queryParams: {
pageNum: 1,
pageSize: 10,
posterName: null,
startTime: null,
endTime: null,
},
fpData: {},
shanghuPosterId: null,
};
},
methods: {
openDialog(data, posterId) {
this.shanghuPosterId = posterId;
this.fpData = data;
this.getList();
},
/**适配高度 */
getHeigth() {
this.fpShow = true;
let _this = this;
this.$nextTick(() => {
let total = this.$refs.appMain.clientHeight;
let search = this.$refs.search.clientHeight;
_this.tableHeigth = total - search - 40;
});
},
/** 查询广告列表 */
getList() {
this.getHeigth();
this.loading = true;
listPoster(this.queryParams).then((response) => {
this.posterList = response.rows;
this.total = response.total;
this.loading = false;
});
},
handleFp(row) {
let _this = this;
this.fpData.posterId = row.id;
this.$modal
.confirm("您确定要将该广告分配给当前商户吗?")
.then(function () {
return batchAllocation(_this.fpData);
})
.then(() => {
_this.shanghuPosterId = row.id;
_this.getList();
_this.$modal.msgSuccess("分配成功");
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0 !important;
}
.fp-table {
height: 550px;
}
</style>

@ -106,17 +106,23 @@
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="商户名称" align="center" prop="posName" />
<el-table-column label="手机号" align="center" prop="phoneNumber" />
<el-table-column label="联系人" align="center" prop="linkMan" />
<el-table-column label="手机号" align="center" prop="phoneNumber" />
<el-table-column label="城市" align="center" prop="city" />
<el-table-column label="地址信息" align="center" prop="address" />
<el-table-column label="广告标识" align="center" prop="posterId" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-document-copy"
@click="handleFp(scope.row)"
v-hasPermi="['netEwm:shanghu:edit']"
>分配广告</el-button
>
<el-button
size="mini"
type="text"
@ -125,6 +131,14 @@
v-hasPermi="['netEwm:shanghu:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleUpdate(scope.row, 'info')"
v-hasPermi="['netEwm:shanghu:edit']"
>查看</el-button
>
<el-button
size="mini"
type="text"
@ -151,12 +165,12 @@
<el-form-item label="商户名称" prop="posName">
<el-input v-model="form.posName" placeholder="请输入商户名称" />
</el-form-item>
<el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="form.phoneNumber" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="联系人" prop="linkMan">
<el-input v-model="form.linkMan" placeholder="请输入联系人" />
</el-form-item>
<el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="form.phoneNumber" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="城市" prop="city">
<el-input v-model="form.city" placeholder="请输入城市" />
</el-form-item>
@ -167,15 +181,49 @@
placeholder="请输入地址信息"
/>
</el-form-item>
<el-form-item label="广告标识" prop="posterId">
<el-input v-model="form.posterId" placeholder="请输入广告标识" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- 商户详情 -->
<el-dialog
:title="titleInfo"
:visible.sync="openInfo"
width="800px"
append-to-body
>
<el-descriptions border :column="2">
<el-descriptions-item label="商户名称">{{
form.posName
}}</el-descriptions-item>
<el-descriptions-item label="联系人">{{
form.linkMan
}}</el-descriptions-item>
<el-descriptions-item label="手机号">{{
form.phoneNumber
}}</el-descriptions-item>
<el-descriptions-item label="城市">{{
form.city
}}</el-descriptions-item>
<el-descriptions-item label="地址信息">{{
form.address
}}</el-descriptions-item>
</el-descriptions>
<div class="my-info">
<div class="cell-info">商户广告</div>
<div class="info-container">
<video
:src="form.videoPath"
class="avatar"
controls="controls"
></video>
</div>
</div>
</el-dialog>
<my-table ref="MyTable"></my-table>
</div>
</template>
@ -187,11 +235,21 @@ import {
addShanghu,
updateShanghu,
} from "@/api/netEwm/shanghu";
import { getPoster } from "@/api/netEwm/poster";
import MyTable from "./components/MyTable.vue";
export default {
components: {
MyTable,
},
name: "Shanghu",
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
//
titleInfo: "",
//
openInfo: false,
//
loading: true,
//
@ -242,6 +300,18 @@ export default {
this.getList();
},
methods: {
/**分配广告 */
handleFp(row) {
getShanghu(row.id).then((response) => {
let data = {
shanghuCity: response.data.city,
shanghuIds: [response.data.id],
shanghuName: response.data.posName,
};
let posterId = response.data.posterId;
this.$refs.MyTable.openDialog(data, posterId);
});
},
/** 查询商户列表 */
getList() {
this.loading = true;
@ -296,14 +366,23 @@ export default {
this.open = true;
this.title = "添加商户";
},
/** 修改按钮操作 */
handleUpdate(row) {
handleUpdate(row, type) {
this.reset();
const id = row.id || this.ids;
getShanghu(id).then((response) => {
this.form = response.data;
if (type == "info") {
getPoster(this.form.posterId).then((info) => {
this.form.videoPath = this.baseUrl + info.data.videoPath;
this.openInfo = true;
this.titleInfo = "查看商户详细信息";
});
} else {
this.open = true;
this.title = "修改商户";
}
});
},
/** 提交按钮 */

Loading…
Cancel
Save