Skip to content

贷
贷超管理后台
Commit 2fd297a9 authored by 刘雅文's avatar 刘雅文
Browse files
Options

新增轮播图页面

parent eedc3004
Hide whitespace changes
Inline Side-by-side
Showing with 609 additions and 2 deletions
src/router/index.js
View file @ 2fd297a9
...@@ -147,6 +147,7 @@ export const asyncRoutes = [ ...@@ -147,6 +147,7 @@ export const asyncRoutes = [
} }
], ],
}, },
{ {
path: '/apply', path: '/apply',
name: 'apply', name: 'apply',
...@@ -196,6 +197,34 @@ export const asyncRoutes = [ ...@@ -196,6 +197,34 @@ export const asyncRoutes = [
} }
], ],
}, },
{
path: '/addSwipe',
name: 'addSwipe',
component: Layout,
redirect: '/addSwipe/list',
meta: {
title: '轮播列表'
},
children: [{
path: 'list',
name: 'addSwipeList',
component: () => import('@/views/addSwipe/list'),
meta: {
title: '轮播列表',
remixIcon: 'camera-lens-line',
},
},
{
path: 'new',
name: 'addSwipeNew',
component: () => import('@/views/addSwipe/new'),
meta: {
title: '轮播新增'
},
hidden: true
},
],
},
{ {
path: '/app', path: '/app',
name: 'app', name: 'app',
......
src/server/api.js
View file @ 2fd297a9
...@@ -170,6 +170,38 @@ export default { ...@@ -170,6 +170,38 @@ export default {
data data
}); });
}, },
//轮播图列表
swipe_list(data) {
return request({
url: "/manage/getBannerList",
method: "post",
data
});
},
//修改上下架
update_status(data) {
return request({
url: "/manage/update",
method: "post",
data
});
},
//轮播图详情
swipe_detail(params) {
return request({
url: "/manage/load",
method: "get",
params
});
},
//添加轮播图
add_swipe(data){
return request({
url: "/manage/insertBanner",
method: "post",
data
});
},
// 回现APP设置 // 回现APP设置
app_setting(params) { app_setting(params) {
return request({ return request({
...@@ -194,4 +226,4 @@ export default { ...@@ -194,4 +226,4 @@ export default {
params params
}); });
} }
}; };
\ No newline at end of file
src/views/addSwipe/index.scss 0 → 100644
View file @ 2fd297a9
.merchant-new{
box-sizing: border-box;
padding: 20px;
}
.form-item{
width:500px;
margin-bottom: 24px !important;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width:100%;
height: 120px;
line-height: 120px;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 120px;
line-height: 120px;
text-align: center;
}
.avatar {
width: 100%;
height: 120px;
display: block;
}
//.el-input{
// width:200px;
//}
src/views/addSwipe/list.vue 0 → 100644
View file @ 2fd297a9
<template>
<div class="page-fence">
<!--操作菜单栏-->
<block-header title="轮播列表" />
<div
v-if="true"
class="action-bar"
>
<div class="action-bar-left">
<router-link to="/addSwipe/new">
<el-button
icon="el-icon-plus"
type="primary"
size="mini"
>
新增轮播
</el-button>
</router-link>
</div>
</div>
<!--表格-->
<el-table
ref="tableSort"
v-loading="listLoading"
border
:data="list"
style="width: 100%"
>
<el-table-column
v-for="(item, index) in finallyColumns"
:key="index"
align="center"
:label="item.label"
:sortable="item.sortable"
:width="item.width"
:fixed="!!item.fixed"
:show-overflow-tooltip="!!item.overflow"
>
<template #default="{ row }">
<div v-if="item.label==='跳转地址'">
<el-link
type="primary"
:href="row[item.prop]"
target="_blank"
>
{{ row[item.prop] }}
</el-link>
</div>
<div v-else-if="item.label==='轮播图'">
<el-image
style="width: 220px; height: 35px"
:src="row[item.prop]"
fit="fit"
/>
</div>
<div v-else-if="item.label==='上架状态'">
<el-tag
v-if="row[item.prop]==0"
type="success"
>
已上架
</el-tag>
<el-tag
v-else
type="info"
>
已下架
</el-tag>
</div>
<div v-else-if="item.label==='是否跳转'">
<el-tag
v-if="row[item.prop]==0"
type="info"
>
否
</el-tag>
<el-tag
v-else
type="success"
>
是
</el-tag>
</div>
<span v-else>{{ row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column
width="150"
fixed="right"
align="center"
label="操作"
>
<template #default="{ row }">
<el-button
v-if="row.status==0"
size="mini"
type="danger"
@click="handleChangeStatus(row)"
>
下架
</el-button>
<el-button
v-else
size="mini"
type="success"
@click="handleChangeStatus(row)"
>
上架
</el-button>
<el-button
size="mini"
type="primary"
@click="handleView(row)"
>
<span>详情</span>
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="queryForm.current"
:layout="layout"
:page-size="queryForm.size"
:total="total"
background
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</template>
<script>
import _ from "lodash";
import { doDelete, getList } from "@/api/table";
import API from "@/server/api";
export default {
name: "addSwipeList",
data() {
return {
checkList: ["轮播标题", "轮播图","轮播顺序", "是否跳转", "跳转地址",'上架状态', "创建时间"],
columns: [
{
order: 1,
label: "轮播标题",
prop: "name"
},
{
order: 2,
label: "轮播图",
prop: "content"
},
{
order: 3,
label: "轮播顺序",
prop: "sort"
},
{
order: 4,
label: "是否跳转",
overflow: true,
prop: "skipway"
},
{
order: 5,
label: "跳转地址",
prop: "skipweb"
},
{
order: 6,
label: "上架状态",
prop: "status"
},
{
order: 7,
label: "创建时间",
prop: "updateTime"
}
],
list: [],
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
queryForm: {
current: 1,
size: 10
}
};
},
computed: {
finallyColumns() {
let finallyArray = [];
this.checkList.forEach((checkItem) => {
finallyArray.push(
this.columns.filter((item) => item.label === checkItem)[0]
);
});
//return _.sortBy(finallyArray, (item) => item.order);
return finallyArray;
}
},
created() {
//防止三级以上路由时多次走created
if (this.$route.name === this.$options.name) this.fetchData();
},
// mounted() {
// this.fetchData();
// },
methods: {
onSubmit() {
this.fetchData();
},
handleView(row){
const {id} = row;
this.$router.push({
path: '/addSwipe/new',
query: { id }
})
},
async handleChangeStatus(row) {
const { id, status } = row;
console.log(row, "是");
const result = await API.update_status({
id,
status: status=="0" ? 1 :0
});
if (result.success) {
this.$baseMessage("修改成功", "success");
setTimeout(() => {
this.fetchData();
}, 1500);
}
},
handleSizeChange(val) {
this.queryForm.size = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.current = val;
this.fetchData();
},
handleQuery() {
this.queryForm.current = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const result = await API.swipe_list(this.queryForm);
console.log(result,'结果结果');
const { total,data } = result.result;
this.list = data;
this.total = total;
this.listLoading = false;
}
}
};
</script>
<style lang="scss" scoped>
.page-fence {
::v-deep {
i {
cursor: pointer;
}
}
box-sizing: border-box;
padding: 20px;
}
</style>
<style lang="scss">
.custom-table-checkbox {
.el-checkbox {
display: block !important;
margin: 0 0 $base-padding/4 0;
}
}
.action-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
.action-bar-left, .action-bar-right {
flex: 1;
}
.action-bar-right {
text-align: right;
}
}
</style>
src/views/addSwipe/new.vue 0 → 100644
View file @ 2fd297a9
<template>
<div class="merchant-new">
<el-form
ref="h5form"
label-suffix=":"
:rules="rules"
:model="form"
label-width="120px"
>
<block-header title="新建" />
<el-form-item
prop="content"
class="form-item"
label="轮播图"
>
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:with-credentials="true"
list-type="picture-card"
:show-file-list="false"
:on-success="handleSuccessLogo"
:before-upload="beforeAvatarUpload"
>
<img
v-if="form.content"
:src="form.content"
class="avatar"
>
<i
v-else
class="el-icon-plus avatar-uploader-icon"
/>
</el-upload>
</el-form-item>
<el-form-item
prop="name"
class="form-item"
label="轮播标题"
>
<el-input
v-model="form.name"
type="textarea"
:rows="3"
/>
</el-form-item>
<el-form-item
prop="skipway"
class="form-item"
label="是否跳转"
>
<el-select
v-model="form.skipway"
style="width: 100%"
size="mini"
placeholder="请选择"
>
<el-option
v-for="item in select"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="form.skipway"
prop="skipweb"
class="form-item"
label="跳转链接"
>
<el-input v-model="form.skipweb">
</el-input>
</el-form-item>
<el-form-item
prop="sort"
class="form-item"
label="轮播顺序"
>
<el-input
@blur="swipeSort"
v-model="form.sort"
type="text"
:rows="3"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="onSubmit('h5form')"
>
保存
</el-button>
<el-button @click="onReset('h5form')">
重置
</el-button>
<el-button @click="$router.go(-1)">
取消
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import BlockHeader from "@/components/blockHeader";
import API from "@/server/api";
const $API = process.env.VUE_APP_API_PATH;
export default {
name: "addSwipeNew",
components: {
"block-header": BlockHeader
},
data() {
return {
select:[{value:0,label:'否'},{value:1,label:'是'}],
uploadUrl: `${$API}/sysUser/upload`,
form: {
name: "",
skipway: "",
content: "",
skipweb:"",
sort: ""
},
rules: {
name: [{ required: true, message: "请输入标题", trigger: "blur" }],
content: [{ required: true, message: "请上传轮播图", trigger: "change" }],
skipway: [{ required: true, message: "请选择是否跳转", trigger: "blur" }],
skipweb: [{ required: false, message: "请输入跳转链接", trigger: "blur" }],
sort: [{ required: true, message: "请选择轮播顺序", trigger: "blur" }]
}
};
},
async created() {
const { query } = this.$route;
if (query && query.id) {
this.id = query.id;
await this.init();
}
},
methods: {
async init() {
const id = this.id;
const { result, success } = await API.swipe_detail({ id });
if (success) {
result.skipway=result.skipway=="1"?'是':'否';
this.form = result;
}
},
//轮播顺序失焦
swipeSort(){
if (!(/(^[1-9]\d*$)/.test(this.form.sort))) {
this.$message.error('请输入正整数！');
this.form.sort='';
return false;
}
},
handleSuccessLogo(res) {
this.form.content = res.result;
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error("上传图片只能是 JPG 或者 PNG 格式!");
return false;
}
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 2MB!");
return false;
}
return true;
},
onSubmit(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
const form = Object.assign({}, this.form);
console.log(form.skipway,'0000000');
form.skipway=form.skipway?'1':'0';
let result;
if (this.id) {
console.log(form.skipway,'888888');
result = await API.update_status({ ...form });
} else {
result = await API.add_swipe({ ...form });
}
if (result.success) {
this.$baseMessage("保存成功", "success");
setTimeout(() => {
this.$router.back();
}, 1500);
}
}
});
},
onReset(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
<style lang="scss" src="./index.scss"></style>
src/views/prod/components/comAPI.vue
View file @ 2fd297a9
...@@ -164,7 +164,7 @@ ...@@ -164,7 +164,7 @@
label="期限" label="期限"
> >
<el-input <el-input
v-model="form. loanLimit" v-model="form.loanLimit"
class="el-input" class="el-input"
> >
</el-input> </el-input>
......
更新日志.md
View file @ 2fd297a9
## 贷超管理后台更新日志 ## 贷超管理后台更新日志
- 2022-11-11 产品列表增加了年利率和期限关键信息展示
- 2022=-11-16 增加 新增/编辑轮播图页面
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment