项目初始化

pages/worker/levelList/components/layout.vue

@@ -0,0 +1,109 @@
+<!-- 虚拟列表演示(不使用内置列表)(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>