front-end/hdApp/src/admin/itemClass/list.vue

<template>
	<view class="app-content" @click="globalClick">
		<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">
						<image  :src="item.smallCover" style="width:80upx;height:80upx;" mode="widthFix"></image>
					</view>
					<view class="list-det" @click="editItem(item)">
						<view class="app-size-28 app-color-0" style="font-size:28upx;font-weight:bold;color:#333333;">
						{{ item.name || '' }}
						</view>
						<view class="list-operate">
							<view class="operate-det" style="color:#333333;">
								<span>序号 {{ item.inTurn }}</span>
							</view>
							<view class="operate-icon">
								<i class="iconfont iconbianji" style="font-size:38upx;"></i>
							</view>
							<view class="operate-icon" @click.stop="delClass(item)">
								<i class="iconfont iconshanchu1" style="font-size:38upx;"></i>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</view>
		<view class="app-footer">
			<button class="admin-button-com middle blue" @click="addCategoryFn">添加分类</button>
		</view>
		<modal-module :show="modifyModal" :maskClosable="false" @cancel="modalCancel" @click="replaceModalClick" :title="modifyTitle" padding="30rpx 30rpx">
			<template v-slot:content>
				<view class="app-modal-input-wrap modify-modal">
					<view class="inp-list-line">
						<view class="line-label">名称</view>
						<view class="line-input">
							<input type="text" v-model="replaceForm.name" :adjust-position="false" @focus="replaceForm.name=''" class="inp-input" placeholder="请填写" />
						</view>
					</view>
					<view class="inp-list-line">
						<view class="line-label">顺序</view>
						<view class="line-input">
							<input type="number" v-model="replaceForm.inTurn" @focus="replaceForm.inTurn=''" :adjust-position="false" class="inp-input" placeholder="越大越靠前" />
						</view>
					</view>
					<view class="inp-list-line">
						<view class="line-label">打印显示</view>
						<view class="line-input">
							<switch style="transform:scale(0.7,0.7)" :checked="replaceForm.print == 0 ? false : true" @change="printChange" /> {{replaceForm.print==0 ? '否' : '是'}}
						</view>
					</view>
					<view class="inp-list-line cover-upload-line">
						<view class="line-label">封面</view>
						<view class="line-input cover-upload-wrap">
							<htz-image-upload :max="1" :compress="true" v-model="coverImgData" :headers="headers"
								@uploadSuccess="coverUploadSuccess" @imgDelete="coverImgDelete" :action="loginInfo.imgUploadApi">
							</htz-image-upload>
						</view>
					</view>
				</view>
			</template>
		</modal-module>
		<modal-module :show="delModal" :maskClosable="false" @cancel="modalCancel" @click="delModalClick" content="确定删除？" color="#333" :size="32" padding="30upx 30upx"></modal-module>
	</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 htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
import { list } from '@/mixins'
import { getList,addClass,updateClass,delClass} from '@/api/item-class'
import { mapGetters } from 'vuex'
export default {
	name: 'item-class-list',
	components: {
		ModalModule,
		AppUploader,
		OperateModule,
		AppWrapperEmpty,
		htzImageUpload
	},
	mixins: [list],
	data() {
		return {
			modifyModal: false,
			modifyTitle: '添加',
			replaceForm: {
				name: '',
				id:0,
				inTurn: 100,
				print:1,
				cover: ''
			},
			coverImgData: [],
			headers: {token:''},
			delModal: false,
			operateShow: false,
			operateData: {},
			operateIndex: null,
			operateTop: 0
		}
	},
	computed: {
		btnData() {
			return [
				{
					text: '编辑',
					icon: 'iconbianji',
					click: () => {
						this.modifyModal = true
						this.modifyTitle = '编辑'
						this.modifyForm = {
							name: this.operateData.name,
							id: this.operateData.id,
							inTurn: this.operateData.inTurn,
							print:this.operateData.print,
							cover: this.operateData.shortCover
						}
					}
				},
				{
					text: '删除',
					icon: 'iconshanchu1',
					click: () => {
						this.delModal = true
					}
				}
			]
		}
	},
	onPullDownRefresh() {
		this.resetList()
		this.getClassList().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (!this.list.finished) {
			this.getClassList().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad() {
		const token = uni.getStorageSync('token')
		this.headers.token = token
	},
	methods: {
		coverUploadSuccess(res) {
			var _res = JSON.parse(res.data)
			if(_res.code == 1){
				this.replaceForm.cover = _res.data.shortUrl
				this.coverImgData.push(_res.data.bigUrl)
				this.$msg('上传成功')
			}
		},
		coverImgDelete(res){
			this.replaceForm.cover = ''
		},
		printChange(e){
			this.replaceForm.print = e.target.value ? 1 : 0
		},
		delClass(item){
			let that = this
			that.$util.confirmModal({content:'确认删除？此分类的花材将移到默认分类'},() => {
				delClass({id:item.id}).then(res=>{
					if(res.code == 1){
						that.$msg('删除成功')
						that.getClassList()
					}
				})
			})
		},
		editItem(item){
			this.modifyModal = true
			this.modifyTitle = '编辑'
			this.replaceForm = {
				id:item.id,
				name: item.name,
				inTurn: item.inTurn,
				print:item.print,
				cover: item.shortCover
			}
			this.coverImgData = item.bigCover ? [item.bigCover] : []
		},
		async init() {
			this.getClassList()
		},
		getClassList() {
			return getList({page: this.list.page}).then(res => {
				this.completes(res)
			})
		},
		replaceClass() {
			if (!this.replaceForm.name) {
				this.$msg('请填写分类名称')
				return false
			}
			let host = this.replaceForm.id == 0 ?  addClass : updateClass;
			let form = JSON.parse(JSON.stringify(this.replaceForm))
			host({ ...form }).then(res => {
				this.$msg('操作成功')
				this.modalCancel()
				this.operateCancle()
				setTimeout(() => {
					this.resetList()
					this.getClassList()
				}, 1000)
			})
		},
		addCategoryFn() {
			this.resetForm()
			this.modifyModal = true
			this.modifyTitle = '新增'
		},
		resetForm() {
			this.replaceForm = {
				name: '',
				inTurn: 0,
				id:0,
				cover: ''
			}
			this.coverImgData = []
		},
		replaceModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				this.replaceClass()
			}
		},
		modalCancel() {
			this.delModal = false
			this.modifyModal = false
		},
		switchChangeFn(e) {
			this.replaceForm.status = e.detail.value ? 1 : 0
		},
		delModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
                uni.showToast({
                    title: '开发中',
                    duration: 2000, 
                    icon:'none',
                });
			}
		},
		operateFn(item, index, event) {
            this.operateData = item
            this.operateIndex = index
            this.operateShow = true
            this.operateTop = event.currentTarget.offsetTop
		},
		operateCancle() {
			this.operateData = {}
			this.operateIndex = null
			this.operateShow = false
		},
        globalClick(){
            this.operateCancle()
        }
	}
}
</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:30upx;
						margin-left:10upx;
					}
					.operate-icon{
						margin-left:5upx;
					}
				}
			}
		}
	}
	.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;
		}
		.cover-upload-line {
			flex-direction: column;
			align-items: flex-start;
		}
		.cover-upload-wrap {
			width: 100%;
			margin-top: 15upx;
		}
	}
</style>