分类

ghsApp/src/admin/home/apply.vue

@@ -36,11 +36,6 @@
                     {
                         title:'门店仓库',
                         list:[
-                            {
-                            name: "花材",
-                            img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`,
-                            url: "/admin/item/list"
-                            },
                             {
                             name: "门店",
                             img: `${this.$constant.imgUrl}/ghs/home/shop.png`,
@@ -88,6 +83,21 @@
                             },
                         ]
                     },
+                    {
+                        title:'花材',
+                        list:[
+                            {
+                            name: "花材",
+                            img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`,
+                            url: "/admin/item/list"
+                            },
+                            {
+                            name: "花材分类",
+                            img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`,
+                            url: "/admin/itemClass/list"
+                            }
+                        ]
+                    },
                     {
                         title:'赚钱分红',
                         list:[{

ghsApp/src/admin/itemClass/list.vue

@@ -0,0 +1,357 @@
+<template>
+	<div class="app-content">
+		<!-- list -->
+		<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-img">
+						<img :src="`${constant.imgUrl}/hhb_small.png`" alt="" mode="widthFix" style="width:120rpx"/>
+					</div>
+					<div class="list-det">
+						<div class="app-size-28 app-color-0">{{ item.name || '' }}</div>
+						<div>{{ item.description || '暂无' }}</div>
+						<div class="list-operate">
+							<div class="operate-det">
+								<span>商品数: {{ item.num }}</span>
+							</div>
+							<div class="operate-icon-wrap" @click="operateFn(item, index)">
+								<div class="operate-icon">
+									<i class="iconfont" :class="[ index == operateIndex ? 'iconcaozuojihuo' : 'iconcaozuo']" style="font-size:38rpx;"></i>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- operate -->
+				<operate-module 
+					v-if="operateShow" 
+					:top="operateTop" 
+					:right="30"
+					@clickFn="operateList"
+					:btnData="btnData" />
+			</block>
+			<block v-else>
+				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+			</block>
+		</div>
+		<!-- button -->
+		<div class="app-footer">
+			<button class="admin-button-com middle blue" @click="addCategoryFn">添加分类</button>
+		</div>
+		<!-- modify -->
+		<modal-module :show="modifyModal" :maskClosable="false" @cancel="modalCancel" @click="modifyModalClick" width="92%" :title="modifyTitle" padding="30rpx 30rpx">
+			<template v-slot:content>
+				<div class="app-modal-input-wrap modify-modal">
+					<div class="inp-list-line">
+						<div class="line-label">分类名称</div>
+						<div class="line-input">
+							<input type="text" v-model="modifyForm.categoryName" :adjust-position="false" class="inp-input" placeholder="请填写分类名称" />
+						</div>
+					</div>
+					<div class="inp-list-line">
+						<div class="line-label">图片</div>
+						<div class="line-input flex-strat">
+							<app-uploader :multiple="false" ref="appUploader" :imgList.sync="modifyForm.img" />
+						</div>
+					</div>
+					<div class="prompt-text">建议尺寸 500X500</div>
+					<div class="inp-list-line">
+						<div class="line-label">排序</div>
+						<div class="line-input">
+							<input type="text" v-model="modifyForm.inTurn" :adjust-position="false" class="inp-input" placeholder="默认排序最新在前面" />
+						</div>
+					</div>
+					<div class="inp-list-line switch-wrap">
+						<div class="line-label">启用状态</div>
+						<div class="line-input flex-strat">
+							<switch :checked="modifyForm.status == '0' ? false : true" @change="switchChangeFn" />
+						</div>
+					</div>
+				</div>
+			</template>
+		</modal-module>
+		<!-- 删除提示 -->
+		<modal-module :show="delModal" :maskClosable="false" @cancel="modalCancel" @click="delModalClick" content="确定删除该分类吗？" color="#333" :size="32" padding="30rpx 30rpx"></modal-module>
+	</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: 'category-manage',
+	components: {
+		ModalModule,
+		AppUploader,
+		OperateModule,
+		AppWrapperEmpty
+	},
+	mixins: [list],
+	data() {
+		return {
+			modifyModal: false,
+			modifyTitle: '添加',
+			modifyForm: {
+				categoryName: '',
+				img: [],
+				inTurn: 0,
+				status: 1
+			},
+			delModal: false,
+			operateShow: false,
+			operateData: {},
+			operateIndex: null,
+			operateTop: 0
+		}
+	},
+	computed: {
+		btnData() {
+			return [
+				{
+					text: '编辑',
+					icon: 'iconbianji',
+					click: () => {
+						this.modifyModal = true
+						this.modifyTitle = '编辑'
+						this.modifyForm = {
+							categoryName: this.operateData.categoryName,
+							img: [this.operateData.img],
+							inTurn: this.operateData.inTurn,
+							status: this.operateData.status
+						}
+					}
+				},
+				{
+					text: this.operateData.status == 1 ? '停用' : '启用',
+					icon: this.operateData.status == 1 ? 'iconjinyong' : 'iconqiyong',
+					click: () => {
+						this.changeStatusFn()
+					}
+				},
+				{
+					text: '删除',
+					icon: 'iconshanchu1',
+					click: () => {
+						this.delModal = true
+					}
+				}
+			]
+		}
+	},
+	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: {
+		operateList(index){
+			if(index === 0){
+				this.modifyModal = true
+				this.modifyTitle = '编辑'
+				this.modifyForm = {
+					categoryName: this.operateData.categoryName,
+					img: [this.operateData.img],
+					inTurn: this.operateData.inTurn,
+					status: this.operateData.status
+				}
+			}else if(index === 1) {
+				this.changeStatusFn()
+			}else if(index === 2) {
+				this.delModal = true
+			}
+		},
+		async init() {
+			this._list()
+		},
+		_list() {
+			return getList().then(res => {
+				this.completes(res)
+			})
+		},
+		_categoryAddOrEditB() {
+			if (!this.modifyForm.categoryName) {
+				this.$msg('请输入分类名称！')
+				return false
+			}
+			let host = this.modifyTitle == '编辑' ? categoryUpdateB : categoryAddB
+			let form = JSON.parse(JSON.stringify(this.modifyForm))
+			form.img = this.$util.imgSubstr(form.img)
+			form.img = form.img.join()
+			if (this.modifyTitle == '编辑') {
+				form.categoryId = this.operateData.id
+			}
+			host({
+				...form
+			}).then(res => {
+				this.$msg('操作成功!')
+				this.modalCancel()
+				this.operateCancle()
+				setTimeout(() => {
+					this.resetList()
+					this._list()
+				}, 1000)
+			})
+		},
+		// 操作
+		addCategoryFn() {
+			this.resetForm()
+			this.modifyModal = true
+			this.modifyTitle = '新增'
+		},
+		resetForm() {
+			this.modifyForm = {
+				categoryName: '',
+				img: [],
+				inTurn: 0,
+				status: 1
+			}
+		},
+		modifyModalClick(e) {
+			if (e.index === 0) {
+				this.modalCancel()
+			} else {
+				this._categoryAddOrEditB()
+			}
+		},
+		modalCancel() {
+			this.delModal = false
+			this.modifyModal = false
+		},
+		switchChangeFn(e) {
+			this.modifyForm.status = e.detail.value ? 1 : 0
+		},
+		delModalClick(e) {
+			if (e.index === 0) {
+				this.modalCancel()
+			} else {
+				console.log('this.operateData', this.operateData)
+				categoryDelB({ categoryId: this.operateData.id }).then(res => {
+					this.modalCancel()
+					this.operateCancle()
+					this.$msg('删除成功!')
+					this.resetList()
+					this._list()
+				})
+			}
+		},
+		operateFn(item, index) {
+			if (this.operateIndex == index) {
+				this.operateCancle()
+			} else {
+				this.operateData = item
+				this.operateIndex = index
+				this.operateShow = true
+				this.operateTop = (index + 1) * 191
+			}
+		},
+		operateCancle() {
+			this.operateData = {}
+			this.operateIndex = null
+			this.operateShow = false
+		},
+		changeStatusFn() {
+			let status = this.operateData.status == 1 ? 0 : 1
+			categoryStatusB({
+				categoryId: this.operateData.id,
+				status: status
+			}).then(res => {
+				this.list.data[this.operateIndex].status = status
+				this.operateCancle()
+				this.$msg('操作成功!')
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-content {
+		min-height: calc(100vh - 100px);
+		padding-bottom: 100px;
+	}
+	// list
+	.list-wrap {
+		position: relative;
+		background-color: #fff;
+		.list {
+			height: 130px;
+			@include disFlex(center, flex-start);
+			padding: 30px 0;
+			margin: 0 30px;
+			color: $fontColor3;
+			border-bottom: 1px solid $borderColor;
+			.list-index {
+				width: 50px;
+			}
+			.list-img {
+				width: 130px;
+				height: 130px;
+				img {
+					height: 100%;
+				}
+			}
+			.list-det {
+				width: calc(100% - 200px);
+				margin-left: 20px;
+				& > div {
+					margin-top: 14px;
+					&:first-child {
+						margin-top: 0;
+					}
+				}
+				.list-operate {
+					@include disFlex(center, space-between);
+					.operate-det {
+						& > span {
+							margin-left: 60px;
+							&:first-child {
+								margin-left: 0;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	.app-footer {
+		justify-content: flex-end;
+		.admin-button-com {
+			width: 200px;
+			margin-right: 30px;
+		}
+	}
+	// 编辑弹窗
+	.modify-modal {
+		.prompt-text {
+			color: red;
+			position: relative;
+			right: 52px;
+			bottom: 24px;
+			// margin-bottom: 10px;
+		}
+		.line-label {
+			width: 140px;
+			flex-shrink: 0;
+		}
+		.switch-wrap {
+			margin-top: 30px;
+		}
+	}
+</style>

ghsApp/src/api/item-class/index.js

@@ -0,0 +1,9 @@
+import https from '@/plugins/luch-request_0.0.7/request'
+
+export const getList = data => {
+	return https.get('/item-class/list', data)
+}
+
+export const picAdd = data => {
+	return https.post('/pic/add', data)
+}

ghsApp/src/pages.json

@@ -773,6 +773,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "admin/itemClass",
+			"pages": [
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "花材分类"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {