|
|
@@ -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>
|
