花材排序问题

hdApp/src/admin/itemClass/num.vue

@@ -0,0 +1,140 @@
+<template>
+	<view class="app-content">
+		<view v-if="!$util.isEmpty(list.data)" style="padding-bottom:120upx;">
+			<t-table :headerBackgroundColor="'#F0F2F6'">
+				<t-tr header>
+                    <t-th><view style="color:black;">名称</view></t-th>
+					<t-th><view style="color:black;">排序</view></t-th>
+				</t-tr>
+				<view v-for="(item, index) in list.data" :key="index">
+					<t-tr>
+                        <t-td align="center" color="info">
+						<view style="color:black;font-weight:bold;">{{item.name}}</view>
+						</t-td>
+						<t-td align="center" color="info">
+                            <view>
+							<input v-model="item.inTurn" name="inTurn" @focus="clear(item)"
+							type="number" style="border:1upx solid #cccccc;color:#333333;" />
+							</view>
+                        </t-td>
+					</t-tr>
+				</view>
+			</t-table>
+		</view>
+		<view v-else>
+			<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+		</view>
+        <view class="app-footer">
+			<view class="admin-button-com big blue" @click="goBack()">返回上级</view>
+		    <view style="margin-left:50upx;" class="admin-button-com big blue" @click="savePrice">保存修改</view>
+		</view>
+
+		<modal-module :show="batchModel" @click="affirmBatch" title="批量操作" color="#333" :size="32" padding="30rpx 30rpx" >
+			<template slot="customContent">
+				<view class="select-cmd_bx">
+					<view class="num_bx" style="margin:60upx 0 60upx 0;font-size:35upx;">
+						<view class="flex">
+						<input v-model="batchNum" placeholder="填写数值" 
+						type="digit" style="border:1upx solid #CCCCCC;height:60upx;margin:0 auto;text-align:center;" />
+						</view>
+					</view>
+				</view>
+			</template>
+		</modal-module>
+
+	</view>
+</template>
+<script>
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
+import { productList,batchChangeMore } from '@/api/product'
+import list from '@/mixins/list'
+import ModalModule from "@/components/plugin/modal";
+export default {
+	name: "more",
+	components: {
+		AppWrapperEmpty,ModalModule
+	},
+	mixins:[list],
+	data() {
+		return {
+            batchModel:false,
+            batchNum:''
+		};
+	},
+	methods: {
+		goBack(){
+			uni.navigateBack()
+		},
+		clear(item){
+			item.inTurn=''
+			this.$forceUpdate()
+		},
+		affirmBatch(val) {
+            let that = this
+			if (val.index === 0) {
+                this.batchNum = ''
+				this.batchModel = false;
+			} else {
+                if(this.$util.isMoney(this.batchNum) == false){
+                    this.$msg('请填写数值')
+                    return false
+                }
+                let currentNum = Number(this.batchNum)
+                this.list.data.forEach(function(value,index,array){
+					array[index].inTurn =  parseFloat((currentNum).toFixed(2))
+				});
+                this.batchNum = ''
+                this.batchModel = false;
+			}
+		},
+        savePrice(){
+           let that = this
+           let addData = [];
+           uni.showLoading({mask:true})
+		   let mayStop = false
+           this.list.data.forEach(function(value,index,array){
+				if(that.$util.isMoney(value.inTurn) == false){
+					that.$msg('请填写 '+value.name+' 顺序值')
+					mayStop = true
+					return false
+				}
+				addData.push({id:value.id,inTurn:value.inTurn})
+           })
+		   if(mayStop == true){
+			return false
+		   }
+           let addString = JSON.stringify(addData)
+           batchChangeMore({addData:addString}).then(res=>{
+               uni.hideLoading()
+               if(res.code == 1){
+					that.$msg(res.msg)
+					that.resetList();
+					that.init()
+               }
+           })
+        },
+		async init(){
+			const res = await productList({
+				page:this.list.page,showPage:1,pageSize:2000,classId:this.option.classId
+			})
+			this.completes(res)
+		}
+	},
+	async onPullDownRefresh() {
+		this.resetList();
+		await this.init()
+		uni.stopPullDownRefresh();
+	},
+	async onReachBottom() {
+		if (!this.list.finished) {
+			await this.init()
+			uni.stopPullDownRefresh();;
+		} else {
+			uni.stopPullDownRefresh();
+		}
+	},
+	
+};
+</script>
+<style lang="scss" scoped>
+</style>

hdApp/src/admin/itemClass/pull.vue

@@ -0,0 +1,654 @@
+<template>
+	<view class="app-content">
+		<view v-if="!$util.isEmpty(list.data)" style="padding-bottom:120upx;">
+			<view class="sort-list-wrap">
+				<block v-for="(item, index) in list.data" :key="item.id">
+					<view
+						class="sort-item"
+						:class="{
+							dragging: draggedIndex === index,
+							'target-position': targetIndex === index && isDragging && targetIndex !== draggedIndex
+						}"
+						:style="{
+							transform: transformStyle(index),
+							transition: isDragging ? 'none' : 'transform 0.3s ease',
+							zIndex: draggedIndex === index ? 999 : targetIndex === index && isDragging ? 888 : 1
+						}"
+					>
+						<!-- 可拖拽的内容区域 -->
+					<view
+						class="item-content"
+						:data-index="index"
+						:data-id="item.id"
+						@touchstart="dragStart"
+						@touchmove="dragMove"
+						@touchend="dragEnd"
+						style="width: fit-content;"
+					>
+						<view class="item-name">{{ item.name }}</view>
+						<view class="item-index">第{{ index + 1 }}个，按住名字可以拖拽</view>
+					</view>
+
+						<!-- 操作按钮区域 -->
+						<view class="buttons-area">
+							<!-- 置顶 -->
+							<view
+								v-if="index > 0"
+								class="move-btn move-btn-top"
+								:class="{ disabled: isOperating }"
+								@click.stop="topFn(item.id)"
+								title="置顶"
+							>
+								<zui-svg-icon icon="general-top-line" color="#fff" :width="20" :height="20" />
+							</view>
+
+							<!-- 置底 -->
+							<view
+								v-if="index < list.data.length - 1"
+								class="move-btn move-btn-bottom"
+								:class="{ disabled: isOperating }"
+								@click.stop="bottomFn(item.id)"
+								title="置底"
+							>
+								<zui-svg-icon icon="general-bottom-line" color="#fff" :width="20" :height="20" />
+							</view>
+
+							<!-- 上移 -->
+							<text
+								v-if="index > 0"
+								class="move-btn move-btn-up"
+								:class="{ disabled: isOperating }"
+								@click.stop="upFn(item.id)"
+								title="上移一位"
+							>↑</text>
+
+							<!-- 下移 -->
+							<text
+								v-if="index < list.data.length - 1"
+								class="move-btn move-btn-down"
+								:class="{ disabled: isOperating }"
+								@click.stop="downFn(item.id)"
+								title="下移一位"
+							>↓</text>
+						</view>
+					</view>
+				</block>
+			</view>
+		</view>
+		<view v-else>
+			<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+		</view>
+	</view>
+</template>
+<script>
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
+import { productList, batchChangeMore } from '@/api/product'
+import list from '@/mixins/list'
+
+export default {
+	name: "more",
+	components: {
+		AppWrapperEmpty
+	},
+	mixins: [list],
+	data() {
+		return {
+			// 拖拽相关状态
+			draggedIndex: -1,
+			draggedItem: null,
+			dragOffsetY: 0,
+			isDragging: false,
+			itemHeight: 160, // 列表项高度，单位upx（实际高度=160upx）
+			startY: 0,
+			scrollTop: 0, // 页面滚动高度
+			originalOrder: [], // 原始顺序，用于拖拽失败时恢复
+			targetIndex: -1, // 目标交换位置的索引
+			isOperating: false, // 防止快速点击操作按钮
+			totalNum: 0 // 总数量
+		};
+	},
+	onPageScroll(e) {
+		// 拖拽期间禁止更新滚动高度
+		if (!this.isDragging) {
+			this.scrollTop = e.scrollTop;
+		}
+	},
+	methods: {
+		goBack() {
+			uni.navigateBack()
+		},
+		
+		// 响应 transform 样式变化
+		transformStyle(index) {
+			if (index === this.draggedIndex) {
+				return 'translateY(0upx)';
+			}
+			return 'translateY(0upx)';
+		},
+
+		// 拖拽开始
+		dragStart(e) {
+			if (this.isDragging) return;
+
+			this.isDragging = true;
+
+			const index = parseInt(e.currentTarget.dataset.index);
+			if (isNaN(index) || index < 0 || index >= this.list.data.length) {
+				this.isDragging = false;
+				return;
+			}
+
+			this.draggedIndex = index;
+			this.draggedItem = this.list.data[index];
+			this.startY = e.touches[0].clientY;
+			this.targetIndex = index;
+
+			// 保存原始顺序
+			this.originalOrder = [...this.list.data];
+
+			// 添加拖拽模式样式
+			this.toggleDragMode(true);
+
+			if (e.preventDefault) {
+				e.preventDefault();
+			}
+			if (e.stopPropagation) {
+				e.stopPropagation();
+			}
+			return false;
+		},
+
+		// 拖拽移动
+		dragMove(e) {
+			if (!this.isDragging || this.draggedIndex === -1) return;
+
+			if (!e.touches || !e.touches[0]) return;
+
+			if (e.preventDefault) {
+				e.preventDefault();
+			}
+			if (e.stopPropagation) {
+				e.stopPropagation();
+			}
+
+			const currentY = e.touches[0].clientY;
+			const deltaY = currentY - this.startY;
+
+			// 根据设备像素比例转换为upx单位
+			const systemInfo = uni.getSystemInfoSync();
+			const pixelRatio = 750 / systemInfo.windowWidth;
+			const deltaYupx = deltaY * pixelRatio;
+
+			// 限制拖拽范围
+			const maxOffset = (this.list.data.length - 1 - this.draggedIndex) * this.itemHeight;
+			const minOffset = -this.draggedIndex * this.itemHeight;
+			const limitedOffset = Math.max(minOffset, Math.min(maxOffset, deltaYupx));
+
+			this.dragOffsetY = limitedOffset;
+
+			// 实时计算目标位置
+			const moveItems = Math.round(limitedOffset / this.itemHeight);
+			this.targetIndex = Math.max(0, Math.min(this.list.data.length - 1, this.draggedIndex + moveItems));
+		},
+
+		// 拖拽结束
+		dragEnd() {
+			if (!this.isDragging) return;
+
+			// 计算最终位置
+			const moveItems = Math.round(this.dragOffsetY / this.itemHeight);
+			const targetIndex = Math.max(0, Math.min(this.list.data.length - 1, this.draggedIndex + moveItems));
+
+			// 如果位置有变化，则更新数组
+			if (targetIndex !== this.draggedIndex) {
+				const newData = [...this.list.data];
+				const draggedItem = newData[this.draggedIndex];
+
+				newData.splice(this.draggedIndex, 1);
+				newData.splice(targetIndex, 0, draggedItem);
+
+				this.list.data = newData;
+				// 拖拽结束后立即保存
+				this.saveOrder();
+			}
+
+			// 移除拖拽模式样式
+			this.toggleDragMode(false);
+
+			// 重置拖拽状态
+			this.draggedIndex = -1;
+			this.draggedItem = null;
+			this.dragOffsetY = 0;
+			this.isDragging = false;
+			this.startY = 0;
+			this.originalOrder = [];
+			this.targetIndex = -1;
+		},
+
+		// 切换拖拽模式
+		toggleDragMode(isDragging) {
+			// #ifdef H5
+			if (isDragging) {
+				document.body.classList.add('dragging-mode');
+			} else {
+				document.body.classList.remove('dragging-mode');
+			}
+			// #endif
+
+			// #ifdef MP-WEIXIN
+			if (typeof uni.setPageStyle !== 'function') {
+				console.warn('uni.setPageStyle is not available on this platform.');
+				return;
+			}
+
+			if (isDragging) {
+				uni.setPageStyle({
+					style: {
+						overflow: 'hidden',
+						position: 'fixed',
+						width: '100%',
+						top: `-${this.scrollTop}px`,
+						left: '0',
+						right: '0'
+					}
+				});
+			} else {
+				uni.setPageStyle({
+					style: {
+						overflow: '',
+						position: '',
+						width: '',
+						top: '',
+						left: '',
+						right: ''
+					}
+				});
+				uni.pageScrollTo({
+					scrollTop: this.scrollTop,
+					duration: 0
+				});
+			}
+			// #endif
+
+			// #ifdef APP-PLUS
+			const webview = this.$scope.$getAppWebview();
+			if (!webview) {
+				console.warn('无法获取 webview。');
+				return;
+			}
+
+			if (isDragging) {
+				webview.evalJS(`
+					var body = document.body;
+					body.style.overflow = 'hidden';
+					body.style.position = 'fixed';
+					body.style.width = '100%';
+					body.style.left = '0';
+					body.style.right = '0';
+					body.style.top = '-${this.scrollTop}px';
+				`);
+			} else {
+				webview.evalJS(`
+					var body = document.body;
+					body.style.overflow = '';
+					body.style.position = '';
+					body.style.width = '';
+					body.style.left = '';
+					body.style.right = '';
+					body.style.top = '';
+				`);
+				uni.pageScrollTo({
+					scrollTop: this.scrollTop,
+					duration: 0
+				});
+			}
+			// #endif
+		},
+
+		// 上移
+		upFn(id) {
+			if (this.isOperating) return;
+			this.isOperating = true;
+
+			const index = this.list.data.findIndex((item) => item.id === id);
+			if (index > 0) {
+				const newData = [...this.list.data];
+				const temp = newData[index];
+				newData[index] = newData[index - 1];
+				newData[index - 1] = temp;
+				this.list.data = newData;
+				// 操作后立即保存
+				this.saveOrder();
+			}
+
+			setTimeout(() => {
+				this.isOperating = false;
+			}, 300);
+		},
+
+		// 下移
+		downFn(id) {
+			if (this.isOperating) return;
+			this.isOperating = true;
+
+			const index = this.list.data.findIndex((item) => item.id === id);
+			if (index < this.list.data.length - 1) {
+				const newData = [...this.list.data];
+				const temp = newData[index];
+				newData[index] = newData[index + 1];
+				newData[index + 1] = temp;
+				this.list.data = newData;
+				// 操作后立即保存
+				this.saveOrder();
+			}
+
+			setTimeout(() => {
+				this.isOperating = false;
+			}, 300);
+		},
+
+		// 置顶
+		topFn(id) {
+			if (this.isOperating) return;
+			this.isOperating = true;
+
+			const index = this.list.data.findIndex((item) => item.id === id);
+			if (index > 0) {
+				const newData = [...this.list.data];
+				const targetItem = newData[index];
+
+				newData.splice(index, 1);
+				newData.unshift(targetItem);
+
+				this.list.data = newData;
+				// 操作后立即保存
+				this.saveOrder();
+			}
+
+			setTimeout(() => {
+				this.isOperating = false;
+			}, 300);
+		},
+
+		// 置底
+		bottomFn(id) {
+			if (this.isOperating) return;
+			this.isOperating = true;
+
+			const index = this.list.data.findIndex((item) => item.id === id);
+			if (index < this.list.data.length - 1) {
+				const newData = [...this.list.data];
+				const targetItem = newData[index];
+
+				newData.splice(index, 1);
+				newData.push(targetItem);
+
+				this.list.data = newData;
+				// 操作后立即保存
+				this.saveOrder();
+			}
+
+			setTimeout(() => {
+				this.isOperating = false;
+			}, 300);
+		},
+
+		// 保存排序
+		saveOrder() {
+			let that = this;
+			const sortData = this.list.data.map((item, index) => ({
+				id: item.id,
+				inTurn: this.list.data.length - index // 反向索引，第一个有最大值
+			}));
+			batchChangeMore({ addData: JSON.stringify(sortData) }).then(res => {
+				if (res.code == 1) {
+					//that.$msg('已保存')
+				}
+			})
+		},
+
+		async init() {
+			const res = await productList({
+				page: this.list.page,
+				showPage: 1,
+				pageSize: 2000,
+				classId: this.option.classId
+			});
+			this.completes(res);
+			this.totalNum = res.data && res.data.total ? Number(res.data.total) : this.list.data.length;
+		}
+	},
+	async onPullDownRefresh() {
+		this.resetList();
+		await this.init();
+		uni.stopPullDownRefresh();
+	},
+	async onReachBottom() {
+		if (!this.list.finished) {
+			await this.init();
+			uni.stopPullDownRefresh();
+		} else {
+			uni.stopPullDownRefresh();
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.app-content {
+	min-height: 100vh;
+	padding-bottom: 20upx;
+}
+
+.sort-list-wrap {
+	position: relative;
+	background-color: #fff;
+
+		.sort-item {
+			height: 100upx;
+			display: flex;
+			align-items: center;
+			padding: 12upx 0;
+			margin: 0 30upx;
+			color: #333;
+			border-bottom: 1px solid #f0f0f0;
+			position: relative;
+			transition: all 0.3s ease;
+
+			.item-content {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				width: auto;
+				user-select: none;
+				-webkit-user-select: none;
+				touch-action: none;
+				-webkit-touch-callout: none;
+
+				.item-name {
+					font-size: 28upx;
+					font-weight: bold;
+					color: #000;
+					margin-bottom: 4upx;
+					white-space: nowrap;
+				}
+
+				.item-index {
+					font-size: 22upx;
+					color: #999;
+					white-space: nowrap;
+				}
+			}
+
+		.buttons-area {
+			display: flex;
+			gap: 24upx;
+			align-items: center;
+			padding-left: 20upx;
+			pointer-events: auto;
+			margin-left: auto;
+		}
+		}
+}
+
+.move-btn {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 50upx;
+	height: 50upx;
+	color: #fff;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 50%;
+	font-size: 24upx;
+	font-weight: bold;
+	box-shadow: 0 3upx 10upx rgba(102, 126, 234, 0.25);
+	transition: all 0.2s ease;
+	z-index: 10;
+	cursor: pointer;
+	flex-shrink: 0;
+	/* #ifdef MP-WEIXIN || APP-PLUS || MP-ALIPAY */
+	user-select: none;
+	-webkit-user-select: none;
+	-webkit-touch-callout: none;
+	/* #endif */
+
+	/* 触摸反馈 */
+	&:active {
+		transform: scale(0.92);
+		box-shadow: 0 2upx 6upx rgba(102, 126, 234, 0.4);
+	}
+
+	/* 悬停效果 - 仅在 H5 显示 */
+	/* #ifdef H5 */
+	&:hover:not(.disabled) {
+		transform: translateY(-2upx);
+		box-shadow: 0 4upx 15upx rgba(102, 126, 234, 0.35);
+	}
+	/* #endif */
+}
+
+/* 置顶按钮 - 黄色渐变 */
+.move-btn-top {
+	background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
+	box-shadow: 0 3upx 10upx rgba(254, 202, 87, 0.25);
+
+	&:active {
+		box-shadow: 0 2upx 6upx rgba(254, 202, 87, 0.4);
+	}
+
+	/* #ifdef H5 */
+	&:hover:not(.disabled) {
+		box-shadow: 0 4upx 15upx rgba(254, 202, 87, 0.35);
+	}
+	/* #endif */
+}
+
+/* 置底按钮 - 黄色渐变 */
+.move-btn-bottom {
+	background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
+	box-shadow: 0 3upx 10upx rgba(254, 202, 87, 0.25);
+
+	&:active {
+		box-shadow: 0 2upx 6upx rgba(254, 202, 87, 0.4);
+	}
+
+	/* #ifdef H5 */
+	&:hover:not(.disabled) {
+		box-shadow: 0 4upx 15upx rgba(254, 202, 87, 0.35);
+	}
+	/* #endif */
+}
+
+/* 上移按钮 - 青色渐变 */
+.move-btn-up {
+	background: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);
+	box-shadow: 0 3upx 10upx rgba(72, 219, 251, 0.25);
+
+	&:active {
+		box-shadow: 0 2upx 6upx rgba(72, 219, 251, 0.4);
+	}
+
+	/* #ifdef H5 */
+	&:hover:not(.disabled) {
+		box-shadow: 0 4upx 15upx rgba(72, 219, 251, 0.35);
+	}
+	/* #endif */
+}
+
+/* 下移按钮 - 青色渐变 */
+.move-btn-down {
+	background: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);
+	box-shadow: 0 3upx 10upx rgba(72, 219, 251, 0.25);
+
+	&:active {
+		box-shadow: 0 2upx 6upx rgba(72, 219, 251, 0.4);
+	}
+
+	/* #ifdef H5 */
+	&:hover:not(.disabled) {
+		box-shadow: 0 4upx 15upx rgba(72, 219, 251, 0.35);
+	}
+	/* #endif */
+}
+
+/* 按钮禁用状态 */
+.move-btn.disabled {
+	opacity: 0.5;
+	transform: none !important;
+	box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.08) !important;
+	pointer-events: none;
+	cursor: not-allowed;
+	&:hover,
+	&:active {
+		transform: none !important;
+		box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.08) !important;
+	}
+}
+
+// 拖拽相关样式
+.sort-list-wrap .sort-item.dragging {
+	border: 2px dashed #007aff !important;
+	box-shadow: 0 8upx 40upx rgba(0, 122, 255, 0.25) !important;
+	background-color: rgba(0, 122, 255, 0.08) !important;
+	opacity: 0.9;
+	border-radius: 16upx;
+	transform: scale(1.02);
+	transition: none !important; /* 拖拽时禁用过渡动画 */
+}
+
+.sort-list-wrap .sort-item.target-position {
+	border: 3px solid #52c41a !important; /* 使用绿色边框区别于拖拽元素 */
+	box-shadow: 0 6upx 30upx rgba(82, 196, 26, 0.3) !important;
+	background-color: rgba(82, 196, 26, 0.1) !important;
+	opacity: 0.95;
+	border-radius: 16upx;
+	transform: scale(1.01);
+	transition: all 0.2s ease !important; /* 目标位置保持平滑过渡 */
+
+	/* 添加一个内部指示器 */
+	&::before {
+		content: '移动到这儿';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		padding: 8upx 22upx;
+		background: linear-gradient(90deg, #52c41a, #73d13d);
+		border-radius: 8upx;
+		color: #fff;
+		font-size: 26upx;
+		font-weight: bold;
+		opacity: 0.9;
+		z-index: 99990;
+	}
+}
+
+/* 防止拖拽时页面滚动 */
+.dragging-mode {
+	overflow: hidden !important;
+	touch-action: none !important;
+	-webkit-overflow-scrolling: auto !important;
+}
+</style>

hdApp/src/admin/itemClass/sort.vue

@@ -0,0 +1,146 @@
+<template>
+	<view class="app-content">
+		<view class="list-wrap">
+			<block v-if="!$util.isEmpty(list.data)">
+				<view class="list" v-for="(item, index) in list.data" :key="index">
+					<view class="list-index">{{ item.id }}</view>
+					<view class="list-item">
+						<view class="app-size-28 app-color-0" style="font-size:30upx;font-weight:bold;color:#333333;">
+						{{ item.name || '' }}
+						</view>
+					</view>
+					<button class="admin-button-com blue middle" @click.stop="pageTo('/admin/itemClass/pull?classId='+item.id)">拖拽排序</button>
+					<button class="admin-button-com blue middle" @click.stop="pageTo('/admin/itemClass/num?classId='+item.id)">数字排序</button>
+				</view>
+			</block>
+			<block v-else>
+				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+			</block>
+		</view>
+	</view>
+</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;
+				flex-shrink: 0;
+			}
+			.list-img {
+				img {
+					height: 100%;
+				}
+			}
+			.list-item {
+				flex: 1;
+				margin-left: 10upx;
+				position: relative;
+				& > div {
+					margin-top: 14upx;
+					&:first-child {
+						margin-top: 0;
+					}
+				}
+			}
+			button {
+				flex-shrink: 0;
+				margin-left: 20upx;
+			}
+		}
+	}
+	.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>