front-end/mobile-code/src/admin/goodsManage/category.vue

<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.inTurn }}</div>
					<div class="list-img">
						<img :src="item.img" alt="分类图" mode="center" />
					</div>
					<div class="list-det">
						<div class="app-size-28 app-color-0">{{ item.categoryName || '暂无' }}</div>
						<div>{{ item.description || '暂无' }}</div>
						<div class="list-operate">
							<div class="operate-det">
								<span>商品数: {{ item.goodsNum }}</span>
								<span>销量: {{ item.sold }}</span>
								<span :style="{color: item.status == 1 ? '#049E2C' : '#ff6900'}">{{ item.status == 1? '启用' : '禁用' }}</span>
							</div>
							<div class="operate-icon-wrap" @click="operateFn(item, index)">
								<div class="operate-icon">
									<i class="iconfont" :class="[ index == operateIndex ? 'iconcaozuojihuo' : 	'iconcaozuo']"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- operate -->
				<operate-module v-show="operateShow" :top="operateTop" :right="30" :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="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'
// api
import { categoryListB, categoryStatusB, categoryAddB, categoryUpdateB, categoryDelB } from '@/api/goods'
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,
			// operate
			operateShow: false,
			operateData: {},
			operateIndex: null,
			operateTop: 0
		}
	},
	computed: {
		btnData() {
			return [
				{
					text: '编辑',
					icon: 'iconbianji',
					click: () => {
						// this.operateShow = false
						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.operateCancle()
						this.delModal = true
					}
				}
				// {
				// 	text: '分享',
				// 	icon: 'iconfenxiang1',
				// 	click: () => {
				// 		this.$msg('功能开发中...')
				// 	}
				// }
			]
		}
	},
	onPullDownRefresh() {
		this.resetList()
		this._list().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			return categoryListB().then(res => {
				let data = {
					code: res.code,
					msg: res.msg,
					data: {
						list: res.data
					}
				}
				this.completes(data)
			})
		},
		_categoryAddOrEditB() {
			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
			}
			categoryAddB({
				...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 {
				categoryDelB({ categoryId: this.operateData.id }).then(res => {
					this.modalCancel()
					this.operateCancle()
					this.$msg('删除成功!')
					this.resetList()
					this._list()
				})
			}
		},
		// operate
		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;
							}
						}
					}
				}
			}
		}
	}
	// button
	.app-footer {
		justify-content: flex-end;
		.admin-button-com {
			width: 200px;
			margin-right: 30px;
		}
	}
	// 编辑弹窗
	.modify-modal {
		.line-label {
			width: 140px;
			flex-shrink: 0;
		}
		.switch-wrap {
			margin-top: 30px;
		}
	}
</style>