front-end/ghsApp/src/admin/itemClass/sort.vue

<template>
	<div class="app-content">
		<div class="list-wrap">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index">
					<div class="list-index">{{ item.id }}</div>
					<div class="list-det" @click.stop="pageTo('/admin/itemClass/more?classId='+item.id)">
						<div class="app-size-28 app-color-0" style="font-size:32upx;font-weight:bold;color:#333333;">
						{{ item.name || '' }}
						</div>
						<div class="list-operate">
							<text class="add-price">修改排序</text>
						</div>
					</div>
				</div>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
	</div>
</template>
<script>
import ModalModule from '@/components/plugin/modal'
import AppUploader from '@/components/app-uploader'
import OperateModule from '@/admin/home/components/module/operate'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import { list } from '@/mixins'
import { getList} from '@/api/item-class'
export default {
	name: 'add',
	components: {
		ModalModule,
		AppUploader,
		OperateModule,
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {
			modifyModal: false,
			modifyTitle: '添加',
			replaceForm: {
				name: '',
				id:0,
				inTurn: 100
			},
			delModal: false,
			operateShow: false,
			operateData: {},
			operateIndex: null,
			operateTop: 0
		}
	},
	onPullDownRefresh() {
		this.resetList()
		this._list().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (!this.list.finished) {
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad() {
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			return getList({page: this.list.page}).then(res => {
				this.completes(res)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 100upx);
		padding-bottom: 100upx;
	}
	.list-wrap {
		position: relative;
		background-color: #fff;
		.list {
			height: 130upx;
			@include disFlex(center, flex-start);
			margin: 0 30upx 0 30upx;
			color: $fontColor3;
			border-bottom: 1upx solid $borderColor;
			.list-index {
				width: 80upx;
			}
			.list-img {
				img {
					height: 100%;
				}
			}
			.list-det {
				width: calc(100% - 50upx);
				margin-left: 10upx;
				& > div {
					margin-top: 14upx;
					&:first-child {
						margin-top: 0;
					}
				}
				.list-operate {
					@include disFlex(center, space-between);
					.operate-det {
						& > span {
							margin-left: 60upx;
							&:first-child {
								margin-left: 0;
							}
						}
					}
					.add-price{
						text-decoration:underline;
						font-size:32upx;
						margin-left:400upx;
						color:#3385FF;
					}
					.operate-icon{
						margin-left:30upx;
					}
				}
			}
		}
	}
	.app-footer {
		justify-content: flex-end;
		.admin-button-com {
			width: 200upx;
			margin-right: 30upx;
		}
	}
	.modify-modal {
		.prompt-text {
			color: red;
			position: relative;
			right: 52upx;
			bottom: 24upx;
		}
		.line-label {
			width: 140upx;
			flex-shrink: 0;
		}
		.switch-wrap {
			margin-top: 30upx;
		}
	}
</style>