xiaobei
/
xmf_saas_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

swiper

Browse Source
main
bibi 3 years ago
parent c5a24b17bc
commit ec274d30fd
13 changed files with 424 additions and 95 deletions
Show Stats Download Patch File Download Diff File

8
src/api/operation/swiper/index.js
Unescape View File

@ -20,16 +20,16 @@ export function swiperDel(params) {
export function swiperInsert(params) { export function swiperInsert(params) {
return httpService({ return httpService({
url: `/user/homepageCarousel/insert`, url: `/user/homepageCarousel/insert`,
method: 'get', method: 'post',
params: params, data: params,
}) })
} }
// 修改 // 修改
export function swiperUpdate(params) { export function swiperUpdate(params) {
return httpService({ return httpService({
url: `/user/homepageCarousel/update`, url: `/user/homepageCarousel/update`,
method: 'get', method: 'post',
params: params, data: params,
}) })
} }

1
src/components/upload/index.vue
Unescape View File

@ -61,7 +61,6 @@ export default {
this.previewVisible = false; this.previewVisible = false;
}, },
handleChange({ fileList }) { handleChange({ fileList }) {
console.log(fileList);
this.$emit('handleChange',fileList) this.$emit('handleChange',fileList)
}, },
} }

46
src/router/operation.js
Unescape View File

@ -8,31 +8,59 @@
*/ */
export default [ export default [
{ {
path: '/clientSet', path: '/ClientSet',
name: "clientSet", name: "ClientSet",
title: "用户端设置", title: "用户端设置",
icon: 'setting', icon: 'setting',
hide: false, hide: false,
component: resolve => require(['@/views/Operation/clientSet'], resolve), component: resolve => require(['@/views/Operation/ClientSet'], resolve),
meta: {title: '用户端设置'}, meta: {title: '用户端设置'},
}, },
{
path: '/Activity',
name: "Activity",
title: "活动",
icon: 'form',
hide: false,
component: resolve => require(['@/views/Operation/Activity'], resolve),
redirect: '/Activity/ActivityManage',
meta: {title: '活动'},
children: [
{
path: '/Activity/ActivityManage',
name: "ActivityManage",
title: "活动管理",
hide: false,
component: resolve => require(['@/views/Operation/Activity/_activityManage'], resolve),
meta: {title: '活动管理'},
},
{
path: '/Activity/Organizers',
name: "Organizers",
title: "活动主办方",
hide: false,
component: resolve => require(['@/views/Operation/Activity/_organizers'], resolve),
meta: {title: '活动主办方'},
},
]
},
{ {
path: '/TaskManage', path: '/TaskManage',
name: "TaskManage", name: "TaskManage",
title: "任务管理", title: "任务",
icon: 'form', icon: 'form',
hide: false, hide: false,
component: resolve => require(['@/views/Operation/TaskManage'], resolve), component: resolve => require(['@/views/Operation/TaskManage'], resolve),
redirect: '/TaskManage/TaskList', redirect: '/TaskManage/TaskList',
meta: {title: '任务管理'}, meta: {title: '任务'},
children: [ children: [
{ {
path: '/TaskManage/TaskList', path: '/TaskManage/TaskList',
name: "TaskList", name: "TaskList",
title: "任务列表", title: "任务管理",
hide: false, hide: false,
component: resolve => require(['@/views/Operation/TaskManage/_taskList'], resolve), component: resolve => require(['@/views/Operation/TaskManage/_taskList'], resolve),
meta: {title: '任务列表'}, meta: {title: '任务管理'},
}, },
{ {
path: '/TaskManage/TaskSet', path: '/TaskManage/TaskSet',
@ -47,12 +75,12 @@ export default [
{ {
path: '/BBS', path: '/BBS',
name: "BBS", name: "BBS",
title: "社区管理", title: "社区",
icon: 'home', icon: 'home',
hide: false, hide: false,
component: resolve => require(['@/views/Operation/BBS'], resolve), component: resolve => require(['@/views/Operation/BBS'], resolve),
redirect: '/BBS/Dynamic', redirect: '/BBS/Dynamic',
meta: {title: '社区管理'}, meta: {title: '社区'},
children: [ children: [
{ {
path: '/BBS/Dynamic', path: '/BBS/Dynamic',

13
src/views/Operation/Activity/_activityManage/index.vue
Unescape View File

@ -0,0 +1,13 @@
<template>
<div></div>
</template>
<script>
export default {
}
</script>
<style>
</style>

0
src/views/Operation/Activity/_organizers/index.vue
Unescape View File

0
src/views/Operation/Activity/index.vue
Unescape View File

2
src/views/Operation/BBS/_topic/index.vue
Unescape View File

@ -56,7 +56,7 @@
<script> <script>
import { topicList, topicDelete} from "@/api/operation/dynamic/topic.js"; import { topicList, topicDelete} from "@/api/operation/dynamic/topic.js";
import { formItem, columns, pagination } from "./depend/config"; import { formItem, columns, pagination } from "./depend/config";
import addForm from "./depend/form"; import addForm from "./depend/form.vue";
export default { export default {
components: { components: {
addForm addForm

9
src/views/Operation/clientSet/depend/config.js
Unescape View File

@ -0,0 +1,9 @@
export const form = {
id: undefined,
type: undefined,
showWeights: 0,
customizeUrl: "",
isShow: false,
associationId: undefined,
imgUrls: [],
}

122
src/views/Operation/clientSet/depend/table.vue
Unescape View File

@ -1,53 +1,105 @@
<template> <template>
<div> <div>
<a-table <a-modal
:columns="columns" width="90%"
:data-source="tableData" title="选择链接"
:pagination="pagination" :visible="show"
:scroll="{ x: 1400 }" @ok="handleOk"
@change="handleTableChange" @cancel="handleCancel"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: selectionChoosed,
}"
:row-key="
(record, index) => {
return record.id;
}
"
> >
</a-table> <div>
<a-table
:columns="columns[typeMean]"
:data-source="tableData"
:pagination="pagination"
:scroll="{ x: 1400 }"
@change="handleTableChange"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: selectionChoosed,
}"
:row-key="
(record, index) => {
return record.id;
}
"
>
</a-table>
</div>
</a-modal>
</div> </div>
</template> </template>
<script> <script>
import { columns } from "./tableConfig.js"; import { columns, pagination } from "./tableConfig.js";
import { shopPushList } from "@/api/shop/goods"; import { shopPushList } from "@/api/shop/goods";
export default { export default {
props:{ props: {
type type: Number,
show:Boolean
}, },
data() { data() {
return{ return {
columns, columns,
tableData:[] pagination,
} typeMean: "shop",
tableData: [],
selectedRowKeys: [],
joinString:''
};
}, },
watch:{ methods: {
type:{ selectionChoosed(data) {
handler(val){ this.selectedRowKeys = data;
if(val===2){ },
shopPushList().then(res=>{ handleTableChange(pagination) {
this.tableData = res.data console.log(pagination);
}) const pager = { ...this.pagination };
pager.current = pagination.current;
pager.pageSize = pagination.pageSize;
this.pagination = pager;
this.getData();
},
handleCancel(){
this.$emit('close')
},
handleOk(){
if(this.selectedRowKeys.length === 0){
this.$message.error('请选择')
}
else if(this.selectedRowKeys.length > 1){
this.$message.error('只能选择一条链接')
}else{
for(let k of this.tableData){
if(k.id===this.selectedRowKeys[0]){
this.joinString = k.skuName
}
}
this.$emit('submit',this.selectedRowKeys,this.joinString)
}
},
},
watch: {
type: {
handler(val) {
if (val === 2) {
shopPushList({
pageNum: this.pagination.current,
size: this.pagination.pageSize,
}).then((res) => {
this.tableData = res.data.rows;
this.pagination.total = res.data.total;
});
}else{
this.typeMean = 'shop'
} }
}, },
immediate: true immediate: true,
} },
} },
} };
</script> </script>
<style> <style>
</style>
</style>

11
src/views/Operation/clientSet/depend/tableConfig.js
Unescape View File

@ -74,5 +74,14 @@ export const columns = {
width: "8%", width: "8%",
dataIndex: "viewsNum", dataIndex: "viewsNum",
}, },
] ],
news: [],
notice: [],
active:[]
}
export const pagination = {
current: 1,
total: 0,
pageSize: 5,
showTotal: (total) => `共 ${total} 条`,
} }

242
src/views/Operation/clientSet/index.vue
Unescape View File

@ -2,13 +2,55 @@
<div> <div>
<div class="cardTitle">首页轮播图设置</div> <div class="cardTitle">首页轮播图设置</div>
<a-divider></a-divider> <a-divider></a-divider>
<a-button class="add-btn" style="margin: 10px" @click="addCard = true" <a-button class="add-btn" style="margin: 10px" @click="newSwiper"
>添加轮播图</a-button >添加轮播图</a-button
> >
<a-card
<!-- 新增 --> hoverable
<a-card style="width: 70%; margin-top: 10px" @close="del" v-if="addCard"> style="width: 70%; margin-top: 10px"
<span class="card-close" @click="addCard = false">×</span> v-for="item in cardList"
:key="item.id"
>
<span class="card-close" @click="del(item.id)">×</span>
<a-row>
<a-col :span="9">
<div style="color: #00000073; padding-bottom: 10px">
上传图片尺寸: 750*300
</div>
<img
:src="$ImgUrl(item.imgList[0].url)"
v-if="item.imgList.length > 0"
class="list-img"
alt=""
/>
<span v-else>暂无图片</span>
</a-col>
<a-col :span="11">
<a-descriptions layout="vertical" :column="1">
<a-descriptions-item label="链接设置">
{{ item.customizeUrl }}
</a-descriptions-item>
<a-descriptions-item label="是否显示在用户端">
{{ item.isShow ? "是" : "否" }}
</a-descriptions-item>
<a-descriptions-item label="显示权重">
{{ item.showWeights }}
</a-descriptions-item>
</a-descriptions>
</a-col>
<a-col :span="4">
<a-button class="add-btn" @click="edit(item)">修改设置</a-button>
</a-col>
</a-row>
</a-card>
<!-- list -->
<a-modal
:title="add.title"
:visible="add.show"
@ok="saveSetting"
@cancel="newSwiperClose"
width="900px"
>
<a-row> <a-row>
<a-col :span="9"> <a-col :span="9">
<div style="color: #00000073; padding-bottom: 10px"> <div style="color: #00000073; padding-bottom: 10px">
@ -19,7 +61,7 @@
@handleChange="handleChange" @handleChange="handleChange"
></commonUpload> ></commonUpload>
</a-col> </a-col>
<a-col :span="11"> <a-col :span="15">
<a-descriptions layout="vertical" :column="1"> <a-descriptions layout="vertical" :column="1">
<a-descriptions-item label="链接设置"> <a-descriptions-item label="链接设置">
<a-input-group compact> <a-input-group compact>
@ -27,6 +69,7 @@
style="width: 120px" style="width: 120px"
v-model="form.type" v-model="form.type"
placeholder="请选择类型" placeholder="请选择类型"
@change="changeType"
> >
<a-select-option :value="1"> 自定义链接 </a-select-option> <a-select-option :value="1"> 自定义链接 </a-select-option>
<a-select-option :value="2"> 商城 </a-select-option> <a-select-option :value="2"> 商城 </a-select-option>
@ -38,19 +81,20 @@
v-if="form.type === 1" v-if="form.type === 1"
style="width: 200px; background: #0000000f" style="width: 200px; background: #0000000f"
placeholder="请输入链接" placeholder="请输入链接"
v-model="form.customizeUrl"
></a-input> ></a-input>
<a-button <a-button
v-else-if="form.type !== 1 && form.customizeUrl === ''" v-else-if="form.type !== 1 && form.customizeUrl === ''"
style="width: 100px; background: #0000000f" style="width: 100px; background: #0000000f"
@click='checkList(form.type)' @click="table.show = true"
>请选择链接 >请选择链接
</a-button> </a-button>
<a-input <a-button
style="width: 70%; background: #0000000f; overflow: hidden"
@click="table.show = true"
v-else v-else
v-model="form.customizeUrl" >{{ form.customizeUrl }}</a-button
style="width: 300px; background: #0000000f" >
disabled
></a-input>
</a-input-group> </a-input-group>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="是否显示在用户端"> <a-descriptions-item label="是否显示在用户端">
@ -64,57 +108,167 @@
</a-descriptions-item> </a-descriptions-item>
</a-descriptions> </a-descriptions>
</a-col> </a-col>
<a-col :span="4">
<a-button class="add-btn">保存设置</a-button>
</a-col>
</a-row> </a-row>
</a-card> </a-modal>
<chooseTable
:show="table.show"
:type="form.type"
@submit="submit"
@close="close"
/>
</div> </div>
</template> </template>
<script> <script>
import { swiperList } from "@/api/operation/swiper"; import { form } from "./depend/config";
import {
swiperList,
swiperInsert,
swiperDel,
swiperUpdate,
} from "@/api/operation/swiper";
import chooseTable from "./depend/table.vue";
export default { export default {
components: {
chooseTable,
},
data() { data() {
return { return {
table: {
show: false,
},
fileList: [], fileList: [],
cardList: [], cardList: [],
addCard: true, add: {
form: { show: false,
id: undefined, title: "添加轮播图",
type: undefined,
showWeights: 0,
customizeUrl: "",
isShow: false,
associationId: undefined,
imgUrls: [],
}, },
form,
}; };
}, },
mounted() { mounted() {
// this.getData() this.getData();
}, },
methods: { methods: {
async getData() { async getData() {
let res = await swiperList(); let res = await swiperList();
this.cardList = res.data; this.cardList = res.data;
}, },
checkList(type){ // 新增
if(type===2){ newSwiper() {
this.add = {
}else if(type===3){ show: true,
title: "添加轮播图"
}else if(type===4){ };
},
}else if(type===5){ // 编辑
edit(data) {
this.add = {
show: true,
title: "修改轮播图"
};
console.log(data);
this.form.id = data.id;
this.form.isShow = data.isShow;
this.form.showWeights = data.showWeights;
this.form.type = data.type;
this.form.customizeUrl = data.customizeUrl;
this.form.associationId = data.associationId;
if (data.imgList.length > 0) {
// 如果已经有图片
this.form.imgUrls.push(data.imgList[0].url);
const file = [];
for (let item of data.imgList) {
let obj = {
name: item.url.split("_")[0] + "." + item.url.split(".")[1],
url: this.$ImgUrl(item.url),
uid: item.url.split("_")[1],
status: "done",
thumbUrl: this.$ImgUrl(item.url),
};
file.push(obj);
}
this.fileList = file;
}
},
newSwiperClose() {
this.add = {
show: false,
title: "添加轮播图",
};
this.fileList = [];
this.form = {
id: undefined,
type: undefined,
showWeights: 0,
customizeUrl: "",
isShow: false,
associationId: undefined,
imgUrls: [],
};
},
// 选择链接确定
submit(data, customizeUrl) {
this.form.customizeUrl = customizeUrl;
this.form.associationId = data[0];
this.close();
},
// 保存
async saveSetting() {
if (this.add.title === "添加轮播图") {
let res = await swiperInsert(this.form);
if (res.code === 200) {
this.$message.success(res.msg);
this.getData();
this.newSwiperClose();
} else {
this.$message.error(res.msg);
}
} else if (this.add.title === "修改轮播图") {
let res = await swiperUpdate(this.form);
if (res.code === 200) {
this.$message.success(res.msg);
this.getData();
this.newSwiperClose();
} else {
this.$message.error(res.msg);
}
} }
}, },
del(id) {}, // 关闭选择
close() {
this.table.show = false;
},
changeType() {
this.form.customizeUrl = "";
},
// 删除轮播图
async del(id) {
this.$confirm({
title: "是否删除",
icon: "delete",
onOk: async () => {
swiperDel({ homepageCarouselId: id }).then((res) => {
if (res.code === 200) {
this.$message.success(res.msg);
this.getData();
} else {
this.$message.error(res.msg);
}
});
},
});
},
// 上传图片
handleChange(data) { handleChange(data) {
console.log(data);
this.fileList = data; this.fileList = data;
if (data[0].status === "done") { // 删除照片
// this.form.imgUrls.push(data[0].response.data); if(this.fileList.length===0){
this.form.imgUrls=[]
}else if (data[0].status === "done") {
this.form.imgUrls.push(data[0].response.data);
} }
}, },
}, },
@ -127,7 +281,15 @@ export default {
height: 200px; height: 200px;
} }
/deep/.ant-upload-list-picture-card .ant-upload-list-item { /deep/.ant-upload-list-picture-card .ant-upload-list-item {
width: 90%; width: 90%;
height: 200px;
}
/deep/.ant-upload-list-picture-card-container {
width: 90%;
height: 200px;
}
.list-img {
width: 90%;
height: 200px; height: 200px;
} }
.card-close { .card-close {

10
src/views/Shop/GoodsManage/_goodsList/depend/config.js
Unescape View File

@ -73,4 +73,12 @@ export const columns = [
width: "8%", width: "8%",
dataIndex: "viewsNum", dataIndex: "viewsNum",
}, },
] ]
export const pagination = {
current: 1,
total: 0,
pageSize: 10,
showTotal: (total) => `共 ${total} 条`,
showSizeChanger: true,
showQuickJumper: true,
}

55
src/views/Shop/GoodsManage/_goodsList/index.vue
Unescape View File

@ -1,13 +1,62 @@
<template> <template>
<div></div> <div>
<a-table
:columns="columns"
:data-source="tableData"
:pagination="pagination"
:scroll="{ x: 1400 }"
@change="handleTableChange"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: selectionChoosed,
}"
:row-key="
(record, index) => {
return record.id;
}
"
>
</a-table>
</div>
</template> </template>
<script> <script>
import { columns,pagination } from "./depend/config.js";
import { shopPushList } from "@/api/shop/goods";
export default { export default {
data() { data() {
return {}; return {
columns,pagination,
tableData: [],
selectedRowKeys: [],
};
},
mounted() {
this.getData();
},
methods: {
getData() {
shopPushList({
pageNum: this.pagination.current,
size: this.pagination.pageSize,
}).then((res) => {
this.tableData = res.data.rows;
this.pagination.total = res.data.total;
});
},
selectionChoosed(data) {
console.log(data);
this.selectedRowKeys = data;
},
handleTableChange(pagination) {
console.log(pagination);
const pager = { ...this.pagination };
pager.current = pagination.current;
pager.pageSize = pagination.pageSize;
this.pagination = pager;
this.getData();
},
}, },
methods: {},
}; };
</script> </script>

Write Preview
Loading…
Cancel
Save