diff --git a/App.vue b/App.vue
index d714685..69e3c87 100644
--- a/App.vue
+++ b/App.vue
@@ -18,6 +18,8 @@ export default {
 @import "tailwindcss/utilities";
 
 page {
-	min-height: 100vh;
+	// min-height: calc(100vh - 44px);
+	min-height: calc(100vh);
+	background-color: rgb(247 248 250);
 }
 </style>
diff --git a/api/store/goods.js b/api/store/goods.js
new file mode 100644
index 0000000..68a85fe
--- /dev/null
+++ b/api/store/goods.js
@@ -0,0 +1,31 @@
+import {
+	request
+} from "@/utils/request";
+
+export default {
+	list(data) {
+		return request({
+			url: "/admin/goods/goodsList",
+			method: "POST",
+			data,
+		});
+	},
+
+	goodsEditAttribute(data) {
+		return request({
+			url: "/admin/goods/goodsEditAttribute",
+			method: "POST",
+			data,
+		});
+	},
+
+	classify: {
+		list(data) {
+			return request({
+				url: "/admin/classify/list",
+				method: "POST",
+				data,
+			});
+		},
+	}
+};
\ No newline at end of file
diff --git a/components/kevy-loading/kevy-loading.vue b/components/kevy-loading/kevy-loading.vue
new file mode 100644
index 0000000..9b6d1b4
--- /dev/null
+++ b/components/kevy-loading/kevy-loading.vue
@@ -0,0 +1,1390 @@
+<template>
+	<view class="t-content" catchtouchmove
+		:style="{ 'background-color': transparent === true ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,1)' }">
+		<!-- NO BORDER SPINNER -->
+		<view class="t-wrap" v-if="type == 'nb-spinner'">
+			<view class="nb-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }"></view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}</view>
+		</view>
+		<!-- BORDER TOP SPINNER -->
+		<view class="t-wrap" v-if="type == 'bt-spinner'">
+			<view class="bt-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }"></view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}</view>
+		</view>
+		<!-- DOUBLE BORDER SPINNER -->
+		<view class="t-wrap" v-if="type == 'db-spinner'">
+			<view class="db-spinner"
+				:style="{ 'border-top-color': color ? color : '#07c160', 'border-bottom-color': color ? color : '#07c160' }">
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}</view>
+		</view>
+		<!-- DOUBLE SPINNERS -->
+		<view class="t-wrap" v-if="type == 'dbl-spinner'">
+			<view class="dbl-spinner"></view>
+			<view class="dbl-spinner dbl-spinner--2"
+				:style="{ 'border-right-color': color ? color : '#07c160', 'border-bottom-color': color ? color : '#07c160' }">
+			</view>
+			<view v-if="tip" class="t-tip" :style="{ color: tipColor ? tipColor : '#333333', 'margin-top': '130px' }">{{ tip }}
+			</view>
+		</view>
+		<!-- REVERSE SPINNER -->
+		<view class="t-wrap" v-if="type == 'reverse-spinner'">
+			<view class="reverse-spinner"
+				:style="{ 'border-top-color': color ? color : '#07c160', 'border-left-color': color ? color : '#07c160' }">
+				<view class="reverse-before"
+					:style="{ 'border-top-color': color ? color : '#07c160', 'border-left-color': color ? color : '#07c160' }">
+				</view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}</view>
+		</view>
+		<!-- HM SPINNER -->
+		<view class="t-wrap" v-if="type == 'hm-spinner'">
+			<view class="hm-spinner"
+				:style="{ 'border-top-color': color ? color : '#07c160', 'border-bottom-color': color ? color : '#07c160' }">
+				<view class="hm-spinner-before"
+					:style="{ 'border-top-color': color ? color : '#07c160', 'border-bottom-color': color ? color : '#07c160' }">
+				</view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}</view>
+		</view>
+		<!-- TRIPLE SPINNER -->
+		<view class="t-wrap" v-if="type == 'triple-spinner'">
+			<view class="triple-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }">
+				<view class="triple-spinner-before" :style="{ 'border-top-color': color ? color : '#07c160', opacity: 0.8 }">
+				</view>
+				<view class="triple-spinner-after" :style="{ 'border-top-color': color ? color : '#07c160', opacity: 0.6 }">
+				</view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}
+			</view>
+		</view>
+		<!-- CM SPINNER -->
+		<view class="t-wrap" v-if="type == 'cm-spinner'">
+			<view class="cm-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }">
+				<view class="cm-spinner-before" :style="{ 'border-top-color': color ? color : '#07c160', opacity: 0.8 }"></view>
+				<view class="cm-spinner-after" :style="{ 'border-top-color': color ? color : '#07c160', opacity: 0.6 }"></view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}
+			</view>
+		</view>
+		<!-- MUTLI SPINNER -->
+		<view class="t-wrap" v-if="type == 'multi-spinner'">
+			<view class="multi-spinner-container">
+				<view class="multi-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }">
+					<view class="multi-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }">
+						<view class="multi-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }">
+							<view class="multi-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }">
+								<view class="multi-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }">
+									<view class="multi-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }">
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}
+			</view>
+		</view>
+		<!--  3 DOT LOADER  -->
+		<view class="t-wrap" v-if="type == 'dot-loader'">
+			<view class="t-flex-row">
+				<view class="dot-loader" :style="[colorStyle]"></view>
+				<view class="dot-loader dot-loader--2" :style="[colorStyle]"></view>
+				<view class="dot-loader dot-loader--3" :style="[colorStyle]"></view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}
+			</view>
+		</view>
+		<!--  MESH LOADER  -->
+		<view class="t-wrap" v-if="type == 'mesh-loader'">
+			<view class="mesh-loader" :style="[colorStyle]">
+				<view class="set-one">
+					<view class="circle" :style="[colorStyle]"></view>
+					<view class="circle" :style="[colorStyle]"></view>
+				</view>
+				<view class="set-two">
+					<view class="circle" :style="[colorStyle]"></view>
+					<view class="circle" :style="[colorStyle]"></view>
+				</view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="{ color: tipColor ? tipColor : '#333333', 'margin-top': '70rpx' }">{{ tip }}
+			</view>
+		</view>
+		<!-- HEART LOADER   -->
+		<view class="t-wrap" v-if="type == 'heart-loader'">
+			<view class="heart-loader" :style="[colorStyle]">
+				<view class="heart-loader-before" :style="[colorStyle]"></view>
+				<view class="heart-loader-after" :style="[colorStyle]"></view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}
+			</view>
+		</view>
+		<!-- SS LOADER   -->
+		<view class="t-wrap" v-if="type == 'ss-loader'">
+			<view class="ss-loader">
+				<view :style="[colorStyle]"></view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}
+			</view>
+		</view>
+		<!-- LS LOADER   -->
+		<view class="t-wrap" v-if="type == 'ls-loader'">
+			<view class="ls-loader">
+				<view :style="[colorStyle]"></view>
+				<view :style="[colorStyle]"></view>
+				<view :style="[colorStyle]"></view>
+				<view :style="[colorStyle]"></view>
+				<view :style="[colorStyle]"></view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}
+			</view>
+		</view>
+		<!-- BSM LOADER   -->
+		<view class="t-wrap" v-if="type == 'bsm-loader'">
+			<view class="bsm-loader">
+				<view :style="[colorStyle]"></view>
+				<view :style="[colorStyle]"></view>
+				<view :style="[colorStyle]"></view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle, { 'margin-top': '60rpx' }]">{{ tip }}
+			</view>
+		</view>
+		<!-- BSRM LOADER   -->
+		<view class="t-wrap" v-if="type == 'bsrm-loader'">
+			<view class="bsrm-loader">
+				<view :style="{ 'border-color': color ? color : '#07c160' }"></view>
+				<view :style="{ 'border-color': color ? color : '#07c160' }"></view>
+				<view :style="{ 'border-color': color ? color : '#07c160' }"></view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle, { 'margin-top': '60rpx' }]">{{ tip }}
+			</view>
+		</view>
+		<!-- PACMAN LOADER   -->
+		<view class="t-wrap" v-if="type == 'pacman-loader'">
+			<view class="pacman-loader">
+				<view :style="{ 'border-color': color ? color : '#07c160', 'border-right-color': 'transparent' }"></view>
+				<view :style="{ 'border-color': color ? color : '#07c160', 'border-right-color': 'transparent' }"></view>
+				<view :style="{ 'background-color': color ? color : '#07c160' }"></view>
+				<view :style="{ 'background-color': color ? color : '#07c160' }"></view>
+				<view :style="{ 'background-color': color ? color : '#07c160' }"></view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle, { 'margin-top': '40rpx' }]">{{ tip }}
+			</view>
+		</view>
+		<!-- BPS LOADER   -->
+		<view class="t-wrap" v-if="type == 'bps-loader'">
+			<view class="bps-loader">
+				<view :style="{ 'background-color': color ? color : '#07c160' }"></view>
+				<view :style="{ 'background-color': color ? color : '#07c160' }"></view>
+				<view :style="{ 'background-color': color ? color : '#07c160' }"></view>
+			</view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle, { 'margin-top': '40rpx' }]">{{ tip }}
+			</view>
+		</view>
+		<!-- DEFAULT -->
+		<view class="t-wrap" v-else>
+			<view class="nb-spinner" :style="{ 'border-top-color': color ? color : '#07c160' }"></view>
+			<view v-if="tip" class="t-tip" :style="[tipStyle]">{{ tip }}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "kevy-loading",
+	props: {
+		/**
+		 * 类型
+		 */
+		type: {
+			type: String,
+			default: 'nb-spinner'
+		},
+		/**
+		 * 颜色，支持css颜色值
+		 */
+		color: {
+			type: String,
+			default: '#07c160'
+		},
+		/**
+		 * 文字提示
+		 */
+		tip: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * 文字提示颜色
+		 */
+		tipColor: {
+			type: String,
+			default: '#333333'
+		},
+		/**
+		 * 是否透明
+		 */
+		transparent: {
+			type: Boolean,
+			default: false
+		},
+	},
+	data() {
+		return {
+
+		};
+	},
+	computed: {
+		colorStyle: function () {
+			return {
+				'background-color': this.color ? this.color : '#07c160'
+			};
+		},
+		tipStyle: function () {
+			return {
+				color: this.tipColor ? this.tipColor : '#333333'
+			};
+		},
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.t-content {
+	position: fixed;
+	z-index: 999999;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.t-flex-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+.t-wrap {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.t-tip {
+	font-size: 28rpx;
+	margin-top: 40rpx;
+	max-width: 600rpx;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* NO BORDER SPINNER */
+.nb-spinner {
+	width: 50px;
+	height: 50px;
+	margin: 0;
+	background: transparent;
+	border-top: 4px solid #009688;
+	border-right: 4px solid transparent;
+	border-radius: 50%;
+	-webkit-animation: 1s spin linear infinite;
+	animation: 1s spin linear infinite;
+}
+
+/* BORDER TOP SPINNER */
+.bt-spinner {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	background-color: transparent;
+	border: 4px solid #eee;
+	border-top-color: #009688;
+	-webkit-animation: 1s spin linear infinite;
+	animation: 1s spin linear infinite;
+}
+
+/* DOUBLE BORDER SPINNER */
+.db-spinner {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	background-color: transparent;
+	border: 4px solid #eee;
+	border-top-color: #009688;
+	border-bottom-color: #009688;
+	-webkit-animation: 1s spin linear infinite;
+	animation: 1s spin linear infinite;
+}
+
+/* DOUBLE SPINNER */
+.double-spinner {
+	position: relative;
+}
+
+.dbl-spinner {
+	position: absolute;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	background-color: transparent;
+	border: 4px solid transparent;
+	border-top: 4px solid #eee;
+	border-left: 4px solid #eee;
+	-webkit-animation: 2s spin linear infinite;
+	animation: 2s spin linear infinite;
+}
+
+.dbl-spinner--2 {
+	border: 4px solid transparent;
+	border-right: 4px solid #009688;
+	border-bottom: 4px solid #009688;
+	-webkit-animation: 1s spin linear infinite;
+	animation: 1s spin linear infinite;
+}
+
+
+/* TRIPLE SPINNER */
+.triple-spinner {
+	display: block;
+	position: relative;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	border: 4px solid transparent;
+	border-top: 4px solid #FF5722;
+	-webkit-animation: spin 2s linear infinite;
+	animation: spin 2s linear infinite;
+}
+
+.triple-spinner-before,
+.triple-spinner-after {
+	position: absolute;
+	border-radius: 50%;
+	border: 4px solid transparent;
+}
+
+.triple-spinner-before {
+	top: 3px;
+	left: 3px;
+	right: 3px;
+	bottom: 3px;
+	border-top-color: #FF9800;
+	-webkit-animation: spin 3s linear infinite;
+	animation: spin 3.5s linear infinite;
+}
+
+.triple-spinner-after {
+	top: 10px;
+	left: 10px;
+	right: 10px;
+	bottom: 10px;
+	border-top-color: #FFC107;
+	-webkit-animation: spin 1.5s linear infinite;
+	animation: spin 1.75s linear infinite;
+}
+
+/* REVERSE SPINNER */
+
+.reverse-spinner {
+	position: relative;
+	height: 50px;
+	width: 50px;
+	border: 4px solid transparent;
+	border-top-color: #1976d2;
+	border-left-color: #1976d2;
+	border-radius: 50%;
+	-webkit-animation: spin 1.5s linear infinite;
+	animation: spin 1.5s linear infinite;
+}
+
+.reverse-before {
+	position: absolute;
+	top: 8px;
+	left: 8px;
+	right: 8px;
+	bottom: 8px;
+	content: "";
+	border: 4px solid transparent;
+	border-top-color: #03a9f4;
+	border-left-color: #03a9f4;
+	border-radius: 50%;
+	-webkit-animation: spinBack 1s linear infinite;
+	animation: spinBack 1s linear infinite;
+}
+
+/* HM SPINNER */
+.hm-spinner {
+	height: 50px;
+	width: 50px;
+	border: 5px solid transparent;
+	border-top-color: #9C27B0;
+	border-bottom-color: #9C27B0;
+	border-radius: 50%;
+	position: relative;
+	-webkit-animation: spin 3s linear infinite;
+	animation: spin 3s linear infinite;
+}
+
+.hm-spinner-before {
+	content: "";
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	bottom: 10px;
+	left: 10px;
+	border: 5px solid transparent;
+	border-top-color: #BA68C8;
+	border-bottom-color: #BA68C8;
+	border-radius: 50%;
+	-webkit-animation: spin 1.5s linear infinite;
+	animation: spin 1.5s linear infinite;
+
+}
+
+/* CM SPINNER */
+.cm-spinner {
+	height: 50px;
+	width: 50px;
+	border: 3px solid transparent;
+	border-radius: 50%;
+	border-top: 4px solid #f15e41;
+	-webkit-animation: spin 4s linear infinite;
+	animation: spin 4s linear infinite;
+	position: relative;
+}
+
+.cm-spinner-before,
+.cm-spinner-after {
+	position: absolute;
+	top: 6px;
+	bottom: 6px;
+	left: 6px;
+	right: 6px;
+	border-radius: 50%;
+	border: 4px solid transparent;
+}
+
+.cm-spinner-before {
+	border-top-color: #bad375;
+	-webkit-animation: 3s spin linear infinite;
+	animation: 3s spin linear infinite;
+}
+
+.cm-spinner-after {
+	border-top-color: #26a9e0;
+	-webkit-animation: spin 1.5s linear infinite;
+	animation: spin 1.5s linear infinite;
+}
+
+.spinner-7 {
+	width: 60px;
+	height: 60px;
+	margin: 0;
+	background: transparent;
+	border-top: 4px solid #fff;
+	border-right: 4px solid transparent;
+	border-radius: 50%;
+	-webkit-animation: 1s spin linear infinite;
+	animation: 1s spinBorder linear infinite;
+}
+
+/* 3 DOT LOADER */
+
+.dot-loader {
+	height: 30rpx;
+	width: 30rpx;
+	border-radius: 50%;
+	background-color: #f44336;
+	position: relative;
+	-webkit-animation: 1.2s grow ease-in-out infinite;
+	animation: 1.2s grow ease-in-out infinite;
+}
+
+.dot-loader--2 {
+	-webkit-animation: 1.2s grow ease-in-out infinite 0.15555s;
+	animation: 1.2s grow ease-in-out infinite 0.15555s;
+	margin: 0 10rpx;
+}
+
+.dot-loader--3 {
+	-webkit-animation: 1.2s grow ease-in-out infinite 0.3s;
+	animation: 1.2s grow ease-in-out infinite 0.3s;
+}
+
+/* CIRCLE DOT LOADER */
+
+.circle-loader {
+	position: relative;
+	width: auto;
+	height: auto;
+}
+
+.circle-loader view {
+	height: 10px;
+	width: 10px;
+	background-color: #f44336;
+	border-radius: 50%;
+	position: absolute;
+	-webkit-animation: 0.8s opaque ease-in-out infinite both;
+	animation: 0.8s opaque ease-in-out infinite both;
+}
+
+.circle-loader>view:nth-child(1) {
+	top: -25px;
+	left: 0;
+}
+
+.circle-loader>view:nth-child(2) {
+	top: -17px;
+	left: 17px;
+	-webkit-animation-delay: 0.1s;
+	animation-delay: 0.1s;
+}
+
+.circle-loader>view:nth-child(3) {
+	top: 0;
+	left: 25px;
+	-webkit-animation-delay: 0.2s;
+	animation-delay: 0.2s;
+}
+
+.circle-loader>view:nth-child(4) {
+	top: 17px;
+	left: 17px;
+	-webkit-animation-delay: 0.3s;
+	animation-delay: 0.3s;
+}
+
+.circle-loader>view:nth-child(5) {
+	top: 25px;
+	left: 0;
+	-webkit-animation-delay: 0.4s;
+	animation-delay: 0.4s;
+}
+
+.circle-loader>view:nth-child(6) {
+	top: 17px;
+	left: -17px;
+	-webkit-animation-delay: 0.5s;
+	animation-delay: 0.5s;
+}
+
+.circle-loader>view:nth-child(7) {
+	top: 0;
+	left: -25px;
+	-webkit-animation-delay: 0.6s;
+	animation-delay: 0.6s;
+}
+
+.circle-loader>view:nth-child(8) {
+	top: -17px;
+	left: -17px;
+	-webkit-animation-delay: 0.7s;
+	animation-delay: 0.7s;
+}
+
+/* MULTI SPINNER */
+
+.multi-spinner-container {
+	width: 80px;
+	height: 80px;
+	position: relative;
+	margin: 0px auto;
+	overflow: hidden;
+}
+
+.multi-spinner {
+	position: absolute;
+	width: calc(100% - 9.9px);
+	height: calc(100% - 9.9px);
+	border: 5px solid transparent;
+	border-top-color: #ff5722;
+	border-radius: 50%;
+	-webkit-animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.76) infinite;
+	animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.76) infinite;
+}
+
+/* MESH LOADER */
+
+.mesh-loader {
+	// overflow: hidden;
+	// height: inherit;
+	// width: inherit;
+}
+
+.mesh-loader .circle {
+	width: 20rpx;
+	height: 20rpx;
+	position: absolute;
+	background: #f44336;
+	border-radius: 50%;
+	margin: -10rpx;
+	-webkit-animation: mesh 3s ease-in-out infinite -1.5s;
+	animation: mesh 3s ease-in-out infinite -1.5s;
+}
+
+.mesh-loader>view .circle:last-child {
+	-webkit-animation-delay: 0s;
+	animation-delay: 0s;
+}
+
+
+.mesh-loader>view:last-child {
+	-webkit-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+/* TRIFORCE LOADER */
+.triforce-container {
+	width: 100px;
+	height: 100px;
+	position: relative;
+	margin: 120px auto;
+}
+
+.triforce,
+.triforce::before,
+.triforce::after {
+	width: 0;
+	height: 0;
+	border-left: 25px solid transparent;
+	border-right: 25px solid transparent;
+	border-bottom: 50px solid #ceb502;
+	position: relative;
+	-webkit-animation: 3s triforce linear infinite 2s both;
+	animation: 3s triforce linear infinite 2s both;
+	top: 50px;
+}
+
+.triforce::before,
+.triforce::after {
+	content: "";
+	position: absolute;
+}
+
+.triforce::before {
+	left: 25px;
+	top: 0;
+	-webkit-animation-delay: 1s;
+	animation-delay: 1s;
+}
+
+.triforce::after {
+	top: -50px;
+	-webkit-animation-delay: 0s;
+	animation-delay: 0s;
+}
+
+/* HEART LOADER */
+
+.heart-loader {
+	background-color: #f44336;
+	width: 50rpx;
+	height: 50rpx;
+	position: relative;
+	-webkite-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg);
+	-webkit-animation: pulsate 1s infinite;
+	animation: pulsate 1s infinite;
+}
+
+.heart-loader-before,
+.heart-loader-after {
+	display: inline-block;
+	width: 50rpx;
+	height: 50rpx;
+	background-color: #f44336;
+	position: absolute;
+	border-radius: 50%;
+}
+
+.heart-loader-before {
+	top: 0px;
+	left: -25rpx;
+}
+
+.heart-loader-after {
+	top: -25rpx;
+	left: -0px;
+}
+
+
+/* SPINNER 13 */
+
+.ml-loader {
+	position: relative;
+	width: 70px;
+	height: 70px;
+}
+
+.ml-loader view {
+	-webkit-transform-origin: 32px 32px;
+	-ms-transform-origin: 32px 32px;
+	transform-origin: 32px 32px;
+	-webkit-animation: 1.2s opaque ease-in-out infinite both;
+	animation: 1.2s opaque ease-in-out infinite both;
+}
+
+.ml-loader view::after {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 30px;
+	width: 5px;
+	height: 18px;
+	border-radius: 10px;
+	background-color: #f44336;
+}
+
+.ml-loader view:nth-child(1) {
+	-webkit-transform: rotate(0);
+	-ms-transform: rotate(0);
+	transform: rotate(0);
+}
+
+.ml-loader view:nth-child(2) {
+	-webkit-transform: rotate(30deg);
+	-ms-transform: rotate(30deg);
+	transform: rotate(30deg);
+	-webkit-animation-delay: 0.1s;
+	animation-delay: 0.1s;
+}
+
+.ml-loader view:nth-child(3) {
+	-webkit-transform: rotate(60deg);
+	-ms-transform: rotate(60deg);
+	transform: rotate(60deg);
+	-webkit-animation-delay: 0.2s;
+	animation-delay: 0.2s;
+}
+
+.ml-loader view:nth-child(4) {
+	-webkit-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	transform: rotate(90deg);
+	-webkit-animation-delay: 0.3s;
+	animation-delay: 0.3s;
+}
+
+.ml-loader view:nth-child(5) {
+	-webkit-transform: rotate(120deg);
+	-ms-transform: rotate(120deg);
+	transform: rotate(120deg);
+	-webkit-animation-delay: 0.4s;
+	animation-delay: 0.4s;
+}
+
+.ml-loader view:nth-child(6) {
+	-webkit-transform: rotate(150deg);
+	-ms-transform: rotate(150deg);
+	transform: rotate(150deg);
+	-webkit-animation-delay: 0.5s;
+	animation-delay: 0.5s;
+}
+
+.ml-loader view:nth-child(7) {
+	-webkit-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	transform: rotate(180deg);
+	-webkit-animation-delay: 0.6s;
+	animation-delay: 0.6s;
+}
+
+.ml-loader view:nth-child(8) {
+	-webkit-transform: rotate(210deg);
+	-ms-transform: rotate(210deg);
+	transform: rotate(210deg);
+	-webkit-animation-delay: 0.7s;
+	animation-delay: 0.7s;
+}
+
+.ml-loader view:nth-child(9) {
+	-webkit-transform: rotate(240deg);
+	-ms-transform: rotate(240deg);
+	transform: rotate(240deg);
+	-webkit-animation-delay: 0.8s;
+	animation-delay: 0.8s;
+}
+
+.ml-loader view:nth-child(10) {
+	-webkit-transform: rotate(270deg);
+	-ms-transform: rotate(270deg);
+	transform: rotate(270deg);
+	-webkit-animation-delay: 0.9s;
+	animation-delay: 0.9s;
+}
+
+.ml-loader view:nth-child(11) {
+	-webkit-transform: rotate(300deg);
+	-ms-transform: rotate(300deg);
+	transform: rotate(300deg);
+	-webkit-animation-delay: 1s;
+	animation-delay: 1s;
+}
+
+.ml-loader view:nth-child(12) {
+	-webkit-transform: rotate(330deg);
+	-ms-transform: rotate(330deg);
+	transform: rotate(330deg);
+	-webkit-animation-delay: 1.1s;
+	animation-delay: 1.1s;
+}
+
+.ml-loader view:nth-child(13) {
+	-webkit-transform: rotate(360deg);
+	-ms-transform: rotate(360deg);
+	transform: rotate(360deg);
+	-webkit-animation-delay: 1.2s;
+	animation-delay: 1.2s;
+}
+
+@keyframes rotate {
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+
+
+
+
+@keyframes spin {
+	from {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	to {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+
+
+@keyframes spinBack {
+	from {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	to {
+		-webkit-transform: rotate(-720deg);
+		transform: rotate(-720deg);
+	}
+}
+
+
+
+@keyframes spinBorder {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+		border-width: 15px;
+	}
+
+	50% {
+		-webkit-transform: rotate(180deg);
+		transform: rotate(180deg);
+		border-width: 3px;
+	}
+
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+		border-width: 15px;
+	}
+}
+
+
+@keyframes grow {
+
+	0%,
+	40%,
+	100% {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+	}
+
+	40% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}
+
+
+
+@keyframes triforce {
+	0% {
+		border-bottom-color: rgb(206, 181, 2);
+	}
+
+	40% {
+		border-bottom-color: rgba(206, 181, 2, 0);
+	}
+
+	80% {
+		border-bottom-color: rgb(206, 181, 2);
+	}
+
+	100% {
+		border-bottom-color: rgb(206, 181, 2);
+	}
+}
+
+
+@keyframes pulsate {
+	0% {
+		-webkit-transform: rotate(45deg) scale(0.8);
+		transform: rotate(45deg) scale(0.8);
+		transform: rotate(45deg) scale(0.8);
+	}
+
+	5% {
+		-webkit-transform: rotate(45deg) scale(0.9);
+		transform: rotate(45deg) scale(0.9);
+	}
+
+	10% {
+		-webkit-transform: rotate(45deg) scale(0.8);
+		transform: rotate(45deg) scale(0.8);
+	}
+
+	15% {
+		-webkit-transform: rotate(45deg) scale(1);
+		transform: rotate(45deg) scale(1);
+	}
+
+	50% {
+		-webkit-transform: rotate(45deg) scale(0.8);
+		transform: rotate(45deg) scale(0.8);
+	}
+
+	100% {
+		-webkit-transform: rotate(45deg) scale(0.8);
+		transform: rotate(45deg) scale(0.8);
+	}
+}
+
+
+
+@keyframes opaque {
+	0% {
+		opacity: 0.1;
+	}
+
+	40% {
+		opacity: 1;
+	}
+
+	80% {
+		opacity: 0.1;
+	}
+
+	100% {
+		opacity: 0.1;
+	}
+}
+
+
+
+@keyframes mesh {
+	0% {
+		-webkit-transform-origin: 50% -100%;
+		transform-origin: 50% -100%;
+		-webkit-transform: rotate(0);
+		transform: rotate(0);
+	}
+
+	50% {
+		-webkit-transform-origin: 50% -100%;
+		transform-origin: 50% -100%;
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+
+	50.1% {
+		-webkit-transform-origin: 50% 200%;
+		transform-origin: 50% 200%;
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-webkit-transform-origin: 50% 200%;
+		transform-origin: 50% 200%;
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+.ss-loader>view {
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	width: 60rpx;
+	height: 60rpx;
+	background: #07c160;
+	-webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+	animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+}
+
+/* SS SPINNER */
+@keyframes square-spin {
+	25% {
+		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
+		transform: perspective(100px) rotateX(180deg) rotateY(0);
+	}
+
+	50% {
+		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
+		transform: perspective(100px) rotateX(180deg) rotateY(180deg);
+	}
+
+	75% {
+		-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
+		transform: perspective(100px) rotateX(0) rotateY(180deg);
+	}
+
+	100% {
+		-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
+		transform: perspective(100px) rotateX(0) rotateY(0);
+	}
+}
+
+/* LS SPINNER */
+.ls-loader>view:nth-child(1) {
+	-webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+	animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+}
+
+.ls-loader>view:nth-child(2) {
+	-webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+	animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+}
+
+.ls-loader>view:nth-child(3) {
+	-webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+	animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+}
+
+.ls-loader>view:nth-child(4) {
+	-webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+	animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+}
+
+.ls-loader>view:nth-child(5) {
+	-webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+	animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+}
+
+
+
+.ls-loader>view {
+	background-color: #07c160;
+	width: 4px;
+	height: 35px;
+	border-radius: 2px;
+	margin: 2px;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	display: inline-block;
+}
+
+@keyframes line-scale {
+	0% {
+		-webkit-transform: scaley(1);
+		transform: scaley(1);
+	}
+
+	50% {
+		-webkit-transform: scaley(0.4);
+		transform: scaley(0.4);
+	}
+
+	100% {
+		-webkit-transform: scaley(1);
+		transform: scaley(1);
+	}
+}
+
+/* BSM SPINNER */
+@keyframes ball-scale-multiple {
+	0% {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+		opacity: 0;
+	}
+
+	5% {
+		opacity: 1;
+	}
+
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 0;
+	}
+}
+
+.bsm-loader {
+	position: relative;
+	-webkit-transform: translateY(-30px);
+	transform: translateY(-30px);
+}
+
+.bsm-loader>view:nth-child(2) {
+	-webkit-animation-delay: -0.4s;
+	animation-delay: -0.4s;
+}
+
+.bsm-loader>view:nth-child(3) {
+	-webkit-animation-delay: -0.2s;
+	animation-delay: -0.2s;
+}
+
+.bsm-loader>view {
+	border-radius: 100%;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	position: absolute;
+	left: -30px;
+	top: 0px;
+	opacity: 0;
+	margin: 0;
+	width: 60px;
+	height: 60px;
+	-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
+	animation: ball-scale-multiple 1s 0s linear infinite;
+}
+
+/* BSRM SPINNER */
+@keyframes ball-scale-ripple-multiple {
+	0% {
+		-webkit-transform: scale(0.1);
+		transform: scale(0.1);
+		opacity: 1;
+	}
+
+	70% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 0.7;
+	}
+
+	100% {
+		opacity: 0.0;
+	}
+}
+
+.bsrm-loader {
+	position: relative;
+	-webkit-transform: translateY(-25px);
+	transform: translateY(-25px);
+}
+
+.bsrm-loader>view:nth-child(0) {
+	-webkit-animation-delay: -0.8s;
+	animation-delay: -0.8s;
+}
+
+.bsrm-loader>view:nth-child(1) {
+	-webkit-animation-delay: -0.6s;
+	animation-delay: -0.6s;
+}
+
+.bsrm-loader>view:nth-child(2) {
+	-webkit-animation-delay: -0.4s;
+	animation-delay: -0.4s;
+}
+
+.bsrm-loader>view:nth-child(3) {
+	-webkit-animation-delay: -0.2s;
+	animation-delay: -0.2s;
+}
+
+.bsrm-loader>view {
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	position: absolute;
+	top: -2px;
+	left: -26px;
+	width: 50px;
+	height: 50px;
+	border-radius: 100%;
+	border: 2px solid #fff;
+	-webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
+	animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
+}
+
+/* PACMAN SPINNER */
+@keyframes rotate_pacman_half_up {
+	0% {
+		-webkit-transform: rotate(270deg);
+		transform: rotate(270deg);
+	}
+
+	50% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+
+	100% {
+		-webkit-transform: rotate(270deg);
+		transform: rotate(270deg);
+	}
+}
+
+@keyframes rotate_pacman_half_down {
+	0% {
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+	}
+
+	50% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+	}
+}
+
+@keyframes pacman-balls {
+	75% {
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: translate(-100rpx, -6.25px);
+		transform: translate(-100rpx, -6.25px);
+	}
+}
+
+.pacman-loader {
+	position: relative;
+}
+
+.pacman-loader>view:nth-child(2) {
+	-webkit-animation: pacman-balls 1s -0.99s infinite linear;
+	animation: pacman-balls 1s -0.99s infinite linear;
+}
+
+.pacman-loader>view:nth-child(3) {
+	-webkit-animation: pacman-balls 1s -0.66s infinite linear;
+	animation: pacman-balls 1s -0.66s infinite linear;
+}
+
+.pacman-loader>view:nth-child(4) {
+	-webkit-animation: pacman-balls 1s -0.33s infinite linear;
+	animation: pacman-balls 1s -0.33s infinite linear;
+}
+
+.pacman-loader>view:nth-child(5) {
+	-webkit-animation: pacman-balls 1s 0s infinite linear;
+	animation: pacman-balls 1s 0s infinite linear;
+}
+
+.pacman-loader>view:nth-child(1) {
+	width: 0px;
+	height: 0px;
+	border-right: 25rpx solid transparent;
+	border-top: 25rpx solid #07c160;
+	border-left: 25rpx solid #07c160;
+	border-bottom: 25rpx solid #07c160;
+	border-radius: 25rpx;
+	-webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
+	animation: rotate_pacman_half_up 0.5s 0s infinite;
+	position: relative;
+	left: -30rpx;
+}
+
+.pacman-loader>view:nth-child(2) {
+	width: 0px;
+	height: 0px;
+	border-right: 25rpx solid transparent;
+	border-top: 25rpx solid #07c160;
+	border-left: 25rpx solid #07c160;
+	border-bottom: 25rpx solid #07c160;
+	border-radius: 25rpx;
+	-webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
+	animation: rotate_pacman_half_down 0.5s 0s infinite;
+	margin-top: -50rpx;
+	position: relative;
+	left: -30rpx;
+}
+
+.pacman-loader>view:nth-child(3),
+.pacman-loader>view:nth-child(4),
+.pacman-loader>view:nth-child(5),
+.pacman-loader>view:nth-child(6) {
+	background-color: #07c160;
+	width: 15rpx;
+	height: 15rpx;
+	border-radius: 100%;
+	margin: 2rpx;
+	width: 10rpx;
+	height: 10rpx;
+	position: absolute;
+	-webkit-transform: translate(0, -6.25rpx);
+	transform: translate(0, -6.25rpx);
+	top: 25rpx;
+	left: 70rpx;
+}
+
+/* BPS loader */
+@keyframes ball-pulse-sync {
+	33% {
+		-webkit-transform: translateY(15rpx);
+		transform: translateY(15rpx);
+	}
+
+	66% {
+		-webkit-transform: translateY(-15rpx);
+		transform: translateY(-15rpx);
+	}
+
+	100% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+	}
+}
+
+.bps-loader>view:nth-child(1) {
+	-webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
+	animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
+}
+
+.bps-loader>view:nth-child(2) {
+	-webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
+	animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
+}
+
+.bps-loader>view:nth-child(3) {
+	-webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
+	animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
+}
+
+.bps-loader>view {
+	width: 20rpx;
+	height: 20rpx;
+	border-radius: 100%;
+	margin: 2px;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	display: inline-block;
+}
+</style>
\ No newline at end of file
diff --git a/components/myList/index.vue b/components/myList/index.vue
new file mode 100644
index 0000000..4b105a0
--- /dev/null
+++ b/components/myList/index.vue
@@ -0,0 +1,90 @@
+<template>
+	<view class="myTable">
+		<wd-toast />
+		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
+		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
+			<slot :list="list"></slot>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import kevyloading from "@/components/kevy-loading/kevy-loading";
+import { useToast } from '@/uni_modules/wot-design-uni'
+const toast = useToast()
+const props = defineProps({
+	apiObj: {
+		type: Function,
+		default: () => (() => { })
+	},
+	params: {
+		type: Object,
+		default: () => ({})
+	}
+})
+
+const query = ref({
+	page: 1,
+	pageSize: 20
+})
+
+const loading = ref(false)
+const total = ref(0)
+const list = ref([])
+
+const getData = async () => {
+	console.log(getData);
+
+	loading.value = true
+	const res = await props.apiObj({
+		...query.value,
+		...props.params
+	})
+
+	if (res.data.rows.length) {
+		query.value.pageSize = res.data.pageSize
+		total.value = res.data.total
+		list.value = [...list.value, ...res.data.rows]
+	} else {
+		toast.success('全部加载完了')
+	}
+
+	loading.value = false
+}
+
+getData()
+
+const upData = async (upParams = {}) => {
+	loading.value = true
+	query.value.page = 1
+	query.value.pageSize = 20
+
+	const res = await props.apiObj({
+		...query.value,
+		...props.params,
+		...upParams
+	})
+
+	query.value.pageSize = res.data.pageSize
+	total.value = res.data.total
+	list.value = res.data.rows
+
+	loading.value = false
+}
+
+const lower = e => {
+	query.value.page++
+	getData()
+}
+
+defineExpose({
+	upData
+})
+</script>
+
+<style lang="scss">
+.scroll-Y {
+	height: calc(100vh - 120px);
+}
+</style>
diff --git a/components/myTable/index.vue b/components/myTable/index.vue
index e724777..1db9646 100644
--- a/components/myTable/index.vue
+++ b/components/myTable/index.vue
@@ -1,26 +1,82 @@
 <template>
 	<view class="myTable">
-		<wd-pagination v-model="value" :total="total" :page-size="page" @change="handleChange" show-icon show-message />
+		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
+
+		<wd-table :data="list" :border="true">
+			<slot></slot>
+		</wd-table>
+
+		<wd-pagination v-model="query.page" :total="total" :page-size="query.pageSize" @change="handleChange" show-icon
+			show-message />
 	</view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import kevyloading from "@/components/kevy-loading/kevy-loading";
 
 const props = defineProps({
 	apiObj: {
 		type: Function,
 		default: () => (() => { })
+	},
+	params: {
+		type: Object,
+		default: () => ({})
 	}
 })
 
-const value = ref("")
+const query = ref({
+	page: 1,
+	pageSize: 20
+})
+
+const loading = ref(false)
 const total = ref(0)
-const page = ref(1)
+const list = ref([])
+
+const getData = async () => {
+	loading.value = true
+	const res = await props.apiObj({
+		...query.value,
+		...props.params
+	})
+
+	query.value.pageSize = res.data.pageSize
+	total.value = res.data.total
+	list.value = res.data.rows
+	loading.value = false
+}
+
+getData()
 
-function handleChange(e) {
-	console.log(e);
+const upData = async (upParams = {}) => {
+	loading.value = true
+	query.value.page = 1
+	query.value.pageSize = 20
+
+	const res = await props.apiObj({
+		...query.value,
+		...props.params,
+		...upParams
+	})
+
+	query.value.pageSize = res.data.pageSize
+	total.value = res.data.total
+	list.value = res.data.rows
+	loading.value = false
+}
+
+
+function handleChange({ value }) {
+	query.value.page = value
+	getData()
 }
+
+
+defineExpose({
+	upData
+})
 </script>
 
 <style lang="scss"></style>
diff --git a/pages.json b/pages.json
index 1204b32..6c72520 100644
--- a/pages.json
+++ b/pages.json
@@ -60,6 +60,7 @@
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
+		"navigationStyle": "custom",
 		"backgroundColor": "#F8F8F8"
 	},
 	"uniIdRouter": {}
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 510e7ce..5b9f442 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -10,10 +10,18 @@
 
 <script setup>
 import utils from '@/utils/utils.js'
-const user_info = uni.getStorageSync("user_info");
-if (user_info.type == 1) {
-	utils.toUrl("/store/index/index")
+const token = uni.getStorageSync("token");
+
+if (token) {
+	const user_info = uni.getStorageSync("user_info");
+	if (user_info.type == 1) {
+		utils.toUrl("/store/index/index")
+	}
+} else {
+	utils.toUrl("/pages/login/index")
 }
+
+
 </script>
 
 <style>
diff --git a/pages/login/index.vue b/pages/login/index.vue
index b8b39df..c6a2c7a 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="content min-h-dvh flex items-center justify-center">
+	<view class="content min-h-dvh flex items-center justify-center px-4">
 		<wd-form class="mb-36" ref="form" :model="model">
 			<wd-cell-group border>
 				<wd-input label="用户名" label-width="100px" prop="username" clearable v-model="model.username" placeholder="请输入用户名"
@@ -8,7 +8,7 @@
 					placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
 			</wd-cell-group>
 			<view class="footer mt-4">
-				<wd-button type="primary" size="medium" @click="handleSubmit" block>登录</wd-button>
+				<wd-button :loading="loading" type="primary" size="medium" @click="handleSubmit" block>登录</wd-button>
 			</view>
 		</wd-form>
 	</view>
@@ -25,9 +25,10 @@ const model = ref({
 	password: "",
 })
 
+const loading = ref(false)
 const form = ref(null)
 function handleSubmit() {
-
+	loading.value = true
 	form.value
 		.validate()
 		.then(({ valid, errors }) => {
@@ -46,18 +47,22 @@ function handleSubmit() {
 							title: "登录成功",
 						});
 
-						if (res.data.type == 1) {
+						console.log(res.data.user_info);
+						if (res.data.user_info.type == 1) {
 							utils.toUrl("/store/index/index")
 						}
 
 					}
 
+					loading.value = false
+
 				})
 
 			}
 		})
 		.catch((error) => {
 			console.log(error, 'error')
+			loading.value = false
 		})
 }
 </script>
diff --git a/store/goods/index copy.vue b/store/goods/index copy.vue
new file mode 100644
index 0000000..612aaed
--- /dev/null
+++ b/store/goods/index copy.vue	
@@ -0,0 +1,149 @@
+<template>
+	<view class="content">
+		<wd-notify />
+
+		<wd-search @search="search" v-model="params.keywords" hide-cancel>
+			<template #prefix>
+				<wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
+					<view class="search-type">
+						<text>{{ searchType }}</text>
+						<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
+					</view>
+				</wd-popover>
+			</template>
+		</wd-search>
+
+		<myTable ref="table" :apiObj="goods.list" :params="params">
+			<wd-table-col fixed prop="id" width="60" align="center" label="ID"></wd-table-col>
+			<wd-table-col prop="name" width="180" label="商品名称"></wd-table-col>
+			<wd-table-col prop="stock_num" align="center" width="80" label="库存">
+				<template #value="{ row }">
+					<view class="custom-class">
+						<wd-tag v-if="row.stock_num > 0" type="primary">{{ row.stock_num }}</wd-tag>
+						<wd-tag v-else type="warning">{{ row.stock_num }}</wd-tag>
+					</view>
+				</template>
+			</wd-table-col>
+			<wd-table-col prop="stock_num" align="center" width="80" label="状态">
+				<template #value="{ row }">
+					<view class="custom-class">
+						<wd-switch @change="changeS(row)" v-model="row.status" :inactive-value="0" :active-value="1" size="16px" />
+					</view>
+				</template>
+			</wd-table-col>
+
+			<wd-table-col width="120" align="center" label="操作">
+
+				<template #value="{ row }">
+					<view class="custom-class">
+						<wd-button :round="false" size="small">编辑</wd-button>
+					</view>
+				</template>
+
+			</wd-table-col>
+		</myTable>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import myTable from "/components/myTable/index.vue"
+import goods from '@/api/store/goods.js'
+import utils from '@/utils/utils.js'
+import { useNotify } from '@/uni_modules/wot-design-uni'
+const { showNotify, closeNotify } = useNotify()
+
+const params = {
+	keywords: "",
+	calssify_id: "",
+	status: "",
+}
+
+const searchType = ref('全部')
+const popover = ref(false)
+
+const menu = ref([
+	{
+		content: '全部'
+	},
+	{
+		content: '已上架'
+	},
+	{
+		content: '已下架'
+	}
+])
+
+const table = ref(null)
+const search = ({ value }) => {
+	table.value.upData({
+		keywords: value
+	})
+}
+
+function changeSearchType({ item, index }) {
+	searchType.value = item.content
+
+	if (item.content == '全部') {
+		params.status = ""
+	}
+
+	if (item.content == '已上架') {
+		params.status = 1
+	}
+
+	if (item.content == '已下架') {
+		params.status = 0
+	}
+
+	search({
+		value: ""
+	})
+}
+
+const changeS = (row) => {
+	goods.goodsEditAttribute({
+		id: row.id,
+		value: [1, 0][row.status],
+		type: "status"
+	}).then(res => {
+
+		if (res.code == 0) {
+			showNotify({ type: 'primary', message: '操作成功' })
+		} else {
+			showNotify({ type: 'error', message: '出错了' })
+		}
+
+	})
+}
+
+</script>
+
+<style lang="scss" scoped>
+.search-type {
+	position: relative;
+	height: 30px;
+	line-height: 30px;
+	padding: 0 8px 0 16px;
+	font-size: 24rpx;
+	color: rgba(0, 0, 0, .45);
+}
+
+.search-type::after {
+	position: absolute;
+	content: '';
+	width: 1px;
+	right: 0;
+	top: 5px;
+	bottom: 5px;
+	background: rgba(0, 0, 0, 0.25);
+}
+
+.search-type {
+	:deep(.icon-arrow) {
+		display: inline-block;
+		font-size: 20px;
+		vertical-align: middle;
+	}
+}
+</style>
diff --git a/store/goods/index.vue b/store/goods/index.vue
index 8dcc06b..51a716a 100644
--- a/store/goods/index.vue
+++ b/store/goods/index.vue
@@ -1,11 +1,208 @@
 <template>
-	<view class="content p-4">
+	<view class="content">
+		<view class=" bg-white sticky top-0 z-50">
+			<wd-search @search="search" v-model="params.keywords" hide-cancel>
+				<template #prefix>
+					<wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
+						<view class="search-type">
+							<text>{{ searchType }}</text>
+							<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
+						</view>
+					</wd-popover>
+				</template>
+			</wd-search>
 
+			<wd-drop-menu custom-class="flex w-full bg-white" v-show="classifyList.length">
+				<wd-drop-menu-item custom-class="flex-1" v-model="value2" :options="classifyList" label-key="name"
+					value-key="id" />
+			</wd-drop-menu>
+		</view>
+
+		<div class="goodsBox p-2">
+
+			<myList ref="myListRef" :apiObj="goods.list" :params="params">
+				<template #default="{ list }">
+					<div>
+						<div v-for="item of list" class="goods">
+							<wd-card type="rectangle">
+								<template #title>
+									<view class="title">
+										<view>库存：<span class="font-bold">{{ item.stock_num }}</span></view>
+										<view v-if="!(item.stock_num > 0)" class="title-tip">
+											<wd-icon name="warning" size="14px" custom-style="vertical-align: bottom" />
+											商品库存不足
+										</view>
+									</view>
+								</template>
+								<view style="height: 60px;" class="content">
+									<image :src="item.pic_url" width="40" height="40" alt="joy"
+										style="border-radius: 4px; margin-right: 12px;width: 60px;height: 60px;min-width: 60px;" />
+									<view>
+										<view style="color: rgba(0,0,0,0.85); font-size: 16px;">{{ item.name }}</view>
+										<view class="font-bold" style="color: rgb(255, 0, 0); font-size: 16px;">￥{{ item.price_min }}</view>
+									</view>
+								</view>
+
+								<template #footer>
+									<view>
+										<wd-button @click="changeS(item)" v-if="item.status == 1" size="small" plain
+											style="margin-right: 8px;">下架</wd-button>
+										<wd-button @click="changeS(item)" v-if="item.status !== 1" size="small"
+											style="margin-right: 8px;">上架</wd-button>
+										<wd-button size="small">编辑</wd-button>
+									</view>
+								</template>
+							</wd-card>
+						</div>
+					</div>
+				</template>
+			</myList>
+		</div>
+		<wd-toast />
 	</view>
 </template>
 
 <script setup>
-import utils from '@/utils/utils.js'
+import { ref } from 'vue'
+import goods from '@/api/store/goods.js'
+import myList from "/components/myList/index.vue"
+import { useToast } from '@/uni_modules/wot-design-uni'
+const toast = useToast()
+
+const option2 = ref([
+	{ label: '综合', value: 0 },
+	{ label: '销量', value: 1 },
+	{ label: '上架时间', value: 2 }
+])
+const value2 = ref(0)
+
+
+// const tab = ref(0)
+const params = {
+	keywords: "",
+	calssify_id: 0,
+	status: "",
+}
+
+const myListRef = ref(null)
+const search = ({ value }) => {
+	myListRef.value.upData({
+		keywords: value
+	})
+}
+const searchType = ref('全部')
+const popover = ref(false)
+
+const menu = ref([
+	{
+		content: '全部'
+	},
+	{
+		content: '已上架'
+	},
+	{
+		content: '已下架'
+	}
+])
+function changeSearchType({ item, index }) {
+	searchType.value = item.content
+
+	if (item.content == '全部') {
+		params.status = ""
+	}
+
+	if (item.content == '已上架') {
+		params.status = 1
+	}
+
+	if (item.content == '已下架') {
+		params.status = 0
+	}
+
+	search({
+		value: ""
+	})
+}
+
+const changeS = (row) => {
+	goods.goodsEditAttribute({
+		id: row.id,
+		value: [1, 0][row.status],
+		type: "status"
+	}).then(res => {
+
+		if (res.code == 0) {
+			toast.success('操作成功')
+			row.status = [1, 0][row.status]
+		} else {
+			showNotify({ type: 'error', message: '出错了' })
+		}
+
+	})
+}
+
+const classifyList = ref([])
+const getClassify = () => {
+	goods.classify.list().then(res => {
+		classifyList.value = res.data
+		classifyList.value.unshift({
+			id: 0,
+			name: "店铺分类"
+		})
+	})
+}
+getClassify()
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.search-type {
+	position: relative;
+	height: 30px;
+	line-height: 30px;
+	padding: 0 8px 0 16px;
+	font-size: 24rpx;
+	color: rgba(0, 0, 0, .45);
+}
+
+.search-type::after {
+	position: absolute;
+	content: '';
+	width: 1px;
+	right: 0;
+	top: 5px;
+	bottom: 5px;
+	background: rgba(0, 0, 0, 0.25);
+}
+
+.search-type {
+	:deep(.icon-arrow) {
+		display: inline-block;
+		font-size: 20px;
+		vertical-align: middle;
+	}
+}
+
+.goodsBox {
+
+	.content,
+	.title {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.content {
+		justify-content: flex-start;
+	}
+
+	.title {
+		justify-content: space-between;
+	}
+
+	.title-tip {
+		color: rgba(0, 0, 0, 0.25);
+		font-size: 12px;
+	}
+}
+</style>
diff --git a/store/index/index.vue b/store/index/index.vue
index 7deed65..ae82ba3 100644
--- a/store/index/index.vue
+++ b/store/index/index.vue
@@ -1,11 +1,11 @@
 <template>
 	<view class="content p-4">
 		<view class="w-full grid grid-cols-2 gap-4">
-			<view @click="utils.toUrl('/store/order/index')"
+			<!-- <view @click="utils.toUrl('/store/order/index')"
 				class="text-white bg-gradient-to-r from-orange-200 to-orange-400 shadow rounded-md p-4">
 				<wd-icon name="circle1" size="24px"></wd-icon>
 				<view class="mt-2 text-end font-bold ">订单中心</view>
-			</view>
+			</view> -->
 			<view @click="utils.toUrl('/store/goods/index')"
 				class="text-white bg-gradient-to-r from-orange-200 to-orange-400 shadow rounded-md p-4">
 				<wd-icon name="goods" size="24px"></wd-icon>
diff --git a/store/order/index.vue b/store/order/index.vue
index 8dcc06b..574cec6 100644
--- a/store/order/index.vue
+++ b/store/order/index.vue
@@ -1,11 +1,11 @@
 <template>
 	<view class="content p-4">
-
+		<!-- <myTable></myTable> -->
 	</view>
 </template>
 
 <script setup>
-import utils from '@/utils/utils.js'
+import myTable from "/components/myTable/index.vue"
 </script>
 
 <style></style>