花材分类的修改

ghsApp/src/admin/itemClass/list.vue

@@ -37,7 +37,7 @@
 					<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="请填写" />
+							<input type="text" v-model="replaceForm.name" :adjust-position="false" @focus="replaceForm.name=''" class="inp-input" placeholder="请填写" />
 						</view>
 					</view>
 					<view class="inp-list-line">

hdApp/src/admin/itemClass/list.vue

@@ -1,71 +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">
-						<div class="app-size-28 app-color-0">{{ item.name || '' }}</div>
-						<div class="list-operate">
-							<div class="operate-det">
-								<span>序号：{{ item.inTurn }}</span>
-							</div>
-							<text class="add-price" @click.stop="pageTo('/admin/itemClass/addPrice?classId='+item.id)">加价</text>
-							<text class="add-price" @click.stop="pageTo('/admin/itemClass/more?classId='+item.id)">排序</text>
-							<div class="operate-icon" @click="editItem(item)">
-								<i class="iconfont" :class="[ index == operateIndex ? 'iconbianji' : 'iconbianji']" style="font-size:38upx;"></i>
-							</div>
-						</div>
-					</div>
-				</div>
-				<operate-module v-if="operateShow" :top="operateTop" :right="30" @clickFn="operateList" :btnData="btnData" />
+				<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>
-		</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">
-							<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 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="越大越靠前" />
-						</div>
-					</div>
-				</div>
+						</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="30rpx 30rpx"></modal-module>
-	</div>
+		<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} from '@/api/item-class'
-import { allProduct } from "@/api/product/index";
-// #ifdef APP-PLUS
-const plug= uni.requireNativePlugin('Html5app-Gprinter')
-// #endif
+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() {
@@ -75,8 +92,12 @@ export default {
 			replaceForm: {
 				name: '',
 				id:0,
-				inTurn: 100
+				inTurn: 100,
+				print:1,
+				cover: ''
 			},
+			coverImgData: [],
+			headers: {token:''},
 			delModal: false,
 			operateShow: false,
 			operateData: {},
@@ -96,7 +117,9 @@ export default {
 						this.modifyForm = {
 							name: this.operateData.name,
 							id: this.operateData.id,
-							inTurn: this.operateData.inTurn
+							inTurn: this.operateData.inTurn,
+							print:this.operateData.print,
+							cover: this.operateData.shortCover
 						}
 					}
 				},
@@ -112,13 +135,13 @@ export default {
 	},
 	onPullDownRefresh() {
 		this.resetList()
-		this._list().then(res => {
+		this.getClassList().then(res => {
 			uni.stopPullDownRefresh()
 		})
 	},
 	onReachBottom() {
 		if (!this.list.finished) {
-			this._list().then(res => {
+			this.getClassList().then(res => {
 				uni.stopPullDownRefresh()
 			})
 		} else {
@@ -126,34 +149,51 @@ export default {
 		}
 	},
 	onLoad() {
+		const token = uni.getStorageSync('token')
+		this.headers.token = token
 	},
 	methods: {
-		editItem(item){
-				this.modifyModal = true
-				this.modifyTitle = '编辑'
-				this.replaceForm = {
-                    id:item.id,
-					name: item.name,
-					inTurn: item.inTurn,
-				}			
+		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('上传成功')
+			}
 		},
-		operateList(index){
-			if(index === 0){
-				this.modifyModal = true
-				this.modifyTitle = '编辑'
-				this.replaceForm = {
-                    id:this.operateData.id,
-					name: this.operateData.name,
-					inTurn: this.operateData.inTurn,
-				}
-			}else if(index === 1) {
-				this.delModal = true
+		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._list()
+			this.getClassList()
 		},
-		_list() {
+		getClassList() {
 			return getList({page: this.list.page}).then(res => {
 				this.completes(res)
 			})
@@ -165,15 +205,13 @@ 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()
 				setTimeout(() => {
 					this.resetList()
-					this._list()
+					this.getClassList()
 				}, 1000)
 			})
 		},
@@ -186,8 +224,10 @@ export default {
 			this.replaceForm = {
 				name: '',
 				inTurn: 0,
-                id:0
+				id:0,
+				cover: ''
 			}
+			this.coverImgData = []
 		},
 		replaceModalClick(e) {
 			if (e.index === 0) {
@@ -227,14 +267,7 @@ export default {
 		},
         globalClick(){
             this.operateCancle()
-        },
-		changeStatusFn() {
-            uni.showToast({
-                title: '开发中',
-                duration: 2000, 
-                icon:'none',
-            });
-		}
+        }
 	}
 }
 </script>
@@ -286,7 +319,7 @@ export default {
 						margin-left:10upx;
 					}
 					.operate-icon{
-						margin-left:30upx;
+						margin-left:5upx;
 					}
 				}
 			}
@@ -313,5 +346,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>