110 lines
2.0 KiB
Vue
110 lines
2.0 KiB
Vue
<!-- 虚拟列表演示(不使用内置列表)(vue) -->
|
||
<!-- 写法较简单，在页面中对当前需要渲染的虚拟列表数据进行for循环，在vue3中兼容性良好 -->
|
||
<!-- 在各平台兼容性请查阅https://z-paging.zxlee.cn/module/virtual-list.html -->
|
||
<template>
|
||
<view class="content">
|
||
<su-navbar :title="title" statusBar></su-navbar>
|
||
|
||
<view class="main-box">
|
||
<view class="title">当前等级：{{clerkLevel}}</view>
|
||
<level-list :dataList="tableList"></level-list>
|
||
</view>
|
||
|
||
<view class="bottom-box">
|
||
<view class="btn" @click="saveLevel">保存配置</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import LevelList from '@/pages/worker/levelList/components/levelList.vue';
|
||
import ClerkApi from '@/sheep/api/worker/clerk';
|
||
export default {
|
||
components: {
|
||
LevelList,
|
||
},
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
tableList: [],
|
||
id: 0,
|
||
clerkLevel: '',
|
||
}
|
||
},
|
||
created() {
|
||
|
||
},
|
||
methods: {
|
||
initData(id) {
|
||
this.id = id;
|
||
ClerkApi.getGoodsList(id).then(res => {
|
||
this.tableList = res.data;
|
||
});
|
||
|
||
ClerkApi.getClerkLevel(id).then(res => {
|
||
this.clerkLevel = res.data;
|
||
});
|
||
|
||
},
|
||
saveLevel() {
|
||
var params = {
|
||
id: this.id,
|
||
categoryList: this.tableList
|
||
}
|
||
ClerkApi.saveGoodsList(params).then(res => {
|
||
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.main-box {
|
||
padding: 10px;
|
||
padding-bottom: 140rpx;
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
.bottom-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 7px 15px;
|
||
background-color: #fff;
|
||
box-shadow: 0 0 6px 0 #ccc;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
|
||
.btn {
|
||
background-color: var(--ui-BG-Main);;
|
||
padding: 10px;
|
||
border-radius: 40px;
|
||
color: #fff;
|
||
display: flex;
|
||
flex: 1;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
}
|
||
</style>
|