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>
|