修改分类

ghsApp/src/admin/itemClass/list.vue

@@ -1,76 +1,88 @@
 <template>
-	<div class="app-content" @click="globalClick">
-		<div class="list-wrap">
+	<view class="app-content" @click="globalClick">
+		<view 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-det" @click="editItem(item)">
-						<div class="app-size-28 app-color-0" style="font-size:28upx;font-weight:bold;color:#333333;">
+				<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 || '' }}
-						</div>
-						<div class="list-operate">
-							<div class="operate-det" style="color:#333333;">
+						</view>
+						<view class="list-operate">
+							<view class="operate-det" style="color:#333333;">
 								<span>序号 {{ item.inTurn }}</span>
-							</div>
+							</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>
-						</div>
-					</div>
-				</div>
-				<operate-module v-if="operateShow" :top="operateTop" :right="30" @clickFn="operateList" :btnData="btnData" />
+						</view>
+					</view>
+				</view>
 			</block>
 			<block v-else>
 				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
 			</block>
-		</div>
-		<div class="app-footer">
+		</view>
+		<view class="app-footer">
 			<button class="admin-button-com middle blue" @click="addCategoryFn">添加分类</button>
-		</div>
+		</view>
 		<modal-module :show="modifyModal" :maskClosable="false" @cancel="modalCancel" @click="replaceModalClick" :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">
+				<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" class="inp-input" placeholder="请填写" />
-						</div>
-					</div>
-					<div class="inp-list-line">
-						<div class="line-label">顺序</div>
-						<div class="line-input">
+						</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="越大越靠前" />
-						</div>
-					</div>
-					<div class="inp-list-line">
-						<div class="line-label">打印显示</div>
-						<div class="line-input">
+						</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 ? '否' : '是'}}
-						</div>
-					</div>
-				</div>
+						</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>
-	</div>
+	</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
+		AppWrapperEmpty,
+		htzImageUpload
 	},
 	mixins: [list],
 	data() {
@@ -81,8 +93,11 @@ export default {
 				name: '',
 				id:0,
 				inTurn: 100,
-				print:1
+				print:1,
+				cover: ''
 			},
+			coverImgData: [],
+			headers: {token:''},
 			delModal: false,
 			operateShow: false,
 			operateData: {},
@@ -91,6 +106,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapGetters({ loginInfo: "getLoginInfo" }),
 		btnData() {
 			return [
 				{
@@ -103,7 +119,8 @@ export default {
 							name: this.operateData.name,
 							id: this.operateData.id,
 							inTurn: this.operateData.inTurn,
-							print:this.operateData.print
+							print:this.operateData.print,
+							cover: this.operateData.shortCover
 						}
 					}
 				},
@@ -133,8 +150,21 @@ export default {
 		}
 	},
 	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
 		},
@@ -150,28 +180,16 @@ export default {
 			})
 		},
 		editItem(item){
-				this.modifyModal = true
-				this.modifyTitle = '编辑'
-				this.replaceForm = {
-                    id:item.id,
-					name: item.name,
-					inTurn: item.inTurn,
-					print:item.print
-				}			
-		},
-		operateList(index){
-			if(index === 0){
-				this.modifyModal = true
-				this.modifyTitle = '编辑'
-				this.replaceForm = {
-                    id:this.operateData.id,
-					name: this.operateData.name,
-					inTurn: this.operateData.inTurn,
-					print:this.operateData.print
-				}
-			}else if(index === 1) {
-				this.delModal = true
+			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()
@@ -188,9 +206,7 @@ export default {
 			}
 			let host = this.replaceForm.id == 0 ?  addClass : updateClass;
 			let form = JSON.parse(JSON.stringify(this.replaceForm))
-			host({
-				...form
-			}).then(res => {
+			host({ ...form }).then(res => {
 				this.$msg('操作成功')
 				this.modalCancel()
 				this.operateCancle()
@@ -209,8 +225,10 @@ export default {
 			this.replaceForm = {
 				name: '',
 				inTurn: 0,
-                id:0
+				id:0,
+				cover: ''
 			}
+			this.coverImgData = []
 		},
 		replaceModalClick(e) {
 			if (e.index === 0) {
@@ -250,14 +268,7 @@ export default {
 		},
         globalClick(){
             this.operateCancle()
-        },
-		changeStatusFn() {
-            uni.showToast({
-                title: '开发中',
-                duration: 2000, 
-                icon:'none',
-            });
-		}
+        }
 	}
 }
 </script>
@@ -336,5 +347,13 @@ export default {
 		.switch-wrap {
 			margin-top: 30upx;
 		}
+		.cover-upload-line {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+		.cover-upload-wrap {
+			width: 100%;
+			margin-top: 15upx;
+		}
 	}
 </style>