|
@@ -1,66 +1,73 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
|
|
- <div class="list-wrap">
|
|
|
|
|
|
|
+ <view class="app-content">
|
|
|
|
|
+ <view class="list-wrap">
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
- <div class="list" v-for="(item, index) in list.data" :key="index">
|
|
|
|
|
- <div class="list-img">
|
|
|
|
|
- <img :src="item.img" alt="" mode="aspectFit" />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="list-det" @click="edit(item)">
|
|
|
|
|
- <div class="app-size-28 app-color-0">{{ item.categoryName}}</div>
|
|
|
|
|
- <div><text style="color:green;" v-if="item.status == 1">启用</text><text v-else>停用</text></div>
|
|
|
|
|
- <div class="list-operate">
|
|
|
|
|
- <div class="operate-det">
|
|
|
|
|
- <span @click.stop="edit(item)">编辑</span>
|
|
|
|
|
|
|
+ <view class="list" v-for="(item, index) in list.data" :key="index">
|
|
|
|
|
+ <view class="list-img">
|
|
|
|
|
+ <image :src="item.img" mode="aspectFit" ></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="list-det" @click="edit(item)">
|
|
|
|
|
+ <view class="app-size-28 app-color-0">{{ item.categoryName}}</view>
|
|
|
|
|
+ <view><text style="color:green;" v-if="item.status == 1">启用</text><text v-else>停用</text></view>
|
|
|
|
|
+ <view class="list-operate">
|
|
|
|
|
+ <view class="operate-det">
|
|
|
<span @click.stop="changeStatus(item)"><text v-if="item.status == 1">停用</text><text v-else>启用</text></span>
|
|
<span @click.stop="changeStatus(item)"><text v-if="item.status == 1">停用</text><text v-else>启用</text></span>
|
|
|
<span @click.stop="delCategory(item.id)">删除</span>
|
|
<span @click.stop="delCategory(item.id)">删除</span>
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <span @click.stop="edit(item)">编辑</span>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</block>
|
|
</block>
|
|
|
<block v-else>
|
|
<block v-else>
|
|
|
<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
</block>
|
|
</block>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
- <div class="app-footer">
|
|
|
|
|
|
|
+ <view class="app-footer">
|
|
|
<button class="admin-button-com middle blue" @click="addCategoryFn">添加分类</button>
|
|
<button class="admin-button-com middle blue" @click="addCategoryFn">添加分类</button>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
<modal-module :show="modifyModal" :maskClosable="false" @cancel="modalCancel" @click="modifyModalClick" width="92%" :title="modifyTitle" padding="30upx 30upx">
|
|
<modal-module :show="modifyModal" :maskClosable="false" @cancel="modalCancel" @click="modifyModalClick" width="92%" :title="modifyTitle" padding="30upx 30upx">
|
|
|
<template v-slot:content>
|
|
<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="modifyForm.categoryName" :adjust-position="false" class="inp-input" placeholder="请填写" />
|
|
<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">
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="inp-list-line">
|
|
|
|
|
+ <view class="line-label">排序</view>
|
|
|
|
|
+ <view class="line-input">
|
|
|
|
|
+ <input type="text" v-model="modifyForm.inTurn" @focus="modifyForm.inTurn=''" :adjust-position="false" class="inp-input" placeholder="值越大越靠前,默认100" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="inp-list-line">
|
|
|
|
|
+ <view class="line-label">属性</view>
|
|
|
|
|
+ <view class="line-input">
|
|
|
|
|
+
|
|
|
|
|
+ <radio-group @change="radioChange">
|
|
|
|
|
+ <label style="display:inline-block;" v-for="(item, index) in catItem" :key="index">
|
|
|
|
|
+ <radio :value="item.value" :checked="item.value === flower" :disabled="catDisabled" />{{item.name}}
|
|
|
|
|
+ </label>
|
|
|
|
|
+ </radio-group>
|
|
|
|
|
+
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="inp-list-line switch-wrap">
|
|
|
|
|
+ <view class="line-label">启用</view>
|
|
|
|
|
+ <view class="line-input flex-strat">
|
|
|
<switch :checked="modifyForm.status == '0' ? false : true" @change="switchChangeFn" />
|
|
<switch :checked="modifyForm.status == '0' ? false : true" @change="switchChangeFn" />
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</template>
|
|
</template>
|
|
|
</modal-module>
|
|
</modal-module>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </view>
|
|
|
</template>
|
|
</template>
|
|
|
-
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import ModalModule from '@/components/plugin/modal'
|
|
import ModalModule from '@/components/plugin/modal'
|
|
|
import AppUploader from '@/components/app-uploader'
|
|
import AppUploader from '@/components/app-uploader'
|
|
@@ -82,15 +89,28 @@ export default {
|
|
|
modifyModal: false,
|
|
modifyModal: false,
|
|
|
modifyTitle: '添加',
|
|
modifyTitle: '添加',
|
|
|
modifyForm: {
|
|
modifyForm: {
|
|
|
|
|
+ categoryId:0,
|
|
|
categoryName: '',
|
|
categoryName: '',
|
|
|
- img: [],
|
|
|
|
|
- inTurn: 100,
|
|
|
|
|
|
|
+ inTurn: '',
|
|
|
status: 1
|
|
status: 1
|
|
|
},
|
|
},
|
|
|
delModal: false,
|
|
delModal: false,
|
|
|
operateData: {},
|
|
operateData: {},
|
|
|
operateIndex: null,
|
|
operateIndex: null,
|
|
|
- operateTop: 0
|
|
|
|
|
|
|
+ operateTop: 0,
|
|
|
|
|
+ catItem: [
|
|
|
|
|
+ {
|
|
|
|
|
+ value: 1,
|
|
|
|
|
+ name: '鲜花类'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ value: 0,
|
|
|
|
|
+ name: '盆栽绿植资材'
|
|
|
|
|
+ }
|
|
|
|
|
+ ],
|
|
|
|
|
+ //0非鲜花成品,绿植盆栽花瓶 1鲜花成品
|
|
|
|
|
+ flower:1,
|
|
|
|
|
+ catDisabled:false
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -113,29 +133,32 @@ export default {
|
|
|
onLoad() {
|
|
onLoad() {
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ radioChange(e){
|
|
|
|
|
+ this.flower = e.detail.value
|
|
|
|
|
+ },
|
|
|
edit(item){
|
|
edit(item){
|
|
|
this.modifyModal = true
|
|
this.modifyModal = true
|
|
|
this.modifyTitle = '编辑'
|
|
this.modifyTitle = '编辑'
|
|
|
- this.modifyForm = {
|
|
|
|
|
- categoryId:item.id,
|
|
|
|
|
- categoryName: item.categoryName,
|
|
|
|
|
- img: [item.img],
|
|
|
|
|
- inTurn: item.inTurn,
|
|
|
|
|
- status: item.status
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ this.modifyForm = { categoryId:item.id, categoryName: item.categoryName, inTurn: item.inTurn, status: item.status }
|
|
|
|
|
+ this.flower = parseInt(item.flower)
|
|
|
|
|
+ this.catDisabled = true
|
|
|
|
|
+ },
|
|
|
|
|
+ addCategoryFn() {
|
|
|
|
|
+ this.resetForm()
|
|
|
|
|
+ this.modifyModal = true
|
|
|
|
|
+ this.modifyTitle = '新增'
|
|
|
|
|
+ this.catDisabled = false
|
|
|
|
|
+ },
|
|
|
|
|
+ resetForm() {
|
|
|
|
|
+ this.modifyForm = {categoryId:0, categoryName: '', inTurn: '', status: 1 }
|
|
|
|
|
+ this.flower = 1
|
|
|
},
|
|
},
|
|
|
async init() {
|
|
async init() {
|
|
|
this._list()
|
|
this._list()
|
|
|
},
|
|
},
|
|
|
_list() {
|
|
_list() {
|
|
|
return categoryListB().then(res => {
|
|
return categoryListB().then(res => {
|
|
|
- let data = {
|
|
|
|
|
- code: res.code,
|
|
|
|
|
- msg: res.msg,
|
|
|
|
|
- data: {
|
|
|
|
|
- list: res.data
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ let data = { code: res.code, msg: res.msg, data: { list: res.data } }
|
|
|
this.completes(data)
|
|
this.completes(data)
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
@@ -145,16 +168,11 @@ export default {
|
|
|
return false
|
|
return false
|
|
|
}
|
|
}
|
|
|
let form = JSON.parse(JSON.stringify(this.modifyForm))
|
|
let form = JSON.parse(JSON.stringify(this.modifyForm))
|
|
|
-
|
|
|
|
|
let host = categoryAddB
|
|
let host = categoryAddB
|
|
|
if(form.categoryId && form.categoryId > 0){
|
|
if(form.categoryId && form.categoryId > 0){
|
|
|
host = categoryUpdateB
|
|
host = categoryUpdateB
|
|
|
}
|
|
}
|
|
|
- form.img = this.$util.imgSubstr(form.img)
|
|
|
|
|
- form.img = form.img.join()
|
|
|
|
|
- host({
|
|
|
|
|
- ...form
|
|
|
|
|
- }).then(res => {
|
|
|
|
|
|
|
+ host({ ...form,flower:this.flower }).then(res => {
|
|
|
this.$msg('操作成功!')
|
|
this.$msg('操作成功!')
|
|
|
this.modalCancel()
|
|
this.modalCancel()
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
@@ -163,19 +181,6 @@ export default {
|
|
|
}, 1000)
|
|
}, 1000)
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
- addCategoryFn() {
|
|
|
|
|
- this.resetForm()
|
|
|
|
|
- this.modifyModal = true
|
|
|
|
|
- this.modifyTitle = '新增'
|
|
|
|
|
- },
|
|
|
|
|
- resetForm() {
|
|
|
|
|
- this.modifyForm = {
|
|
|
|
|
- categoryName: '',
|
|
|
|
|
- img: [],
|
|
|
|
|
- inTurn: 0,
|
|
|
|
|
- status: 1
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
modifyModalClick(e) {
|
|
modifyModalClick(e) {
|
|
|
if (e.index === 0) {
|
|
if (e.index === 0) {
|
|
|
this.modalCancel()
|
|
this.modalCancel()
|
|
@@ -191,6 +196,8 @@ export default {
|
|
|
this.modifyForm.status = e.detail.value ? 1 : 0
|
|
this.modifyForm.status = e.detail.value ? 1 : 0
|
|
|
},
|
|
},
|
|
|
delCategory(id) {
|
|
delCategory(id) {
|
|
|
|
|
+ this.$msg('暂时不能删除')
|
|
|
|
|
+ return false
|
|
|
let that = this
|
|
let that = this
|
|
|
uni.showModal({
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
title: '提示',
|
|
@@ -209,6 +216,8 @@ export default {
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
changeStatus(item) {
|
|
changeStatus(item) {
|
|
|
|
|
+ this.$msg('开发中')
|
|
|
|
|
+ return false
|
|
|
let status = item.status == 1 ? 0 : 1
|
|
let status = item.status == 1 ? 0 : 1
|
|
|
categoryStatusB({
|
|
categoryStatusB({
|
|
|
categoryId: item.id,
|
|
categoryId: item.id,
|
|
@@ -223,7 +232,6 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
-
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.app-content {
|
|
.app-content {
|
|
|
min-height: calc(100vh - 100upx);
|
|
min-height: calc(100vh - 100upx);
|
|
@@ -245,12 +253,14 @@ export default {
|
|
|
.list-img {
|
|
.list-img {
|
|
|
width: 130upx;
|
|
width: 130upx;
|
|
|
height: 130upx;
|
|
height: 130upx;
|
|
|
- img {
|
|
|
|
|
- height: 100%;
|
|
|
|
|
|
|
+ image {
|
|
|
|
|
+ width:130upx;
|
|
|
|
|
+ height:130upx;
|
|
|
|
|
+ border-radius: 20upx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.list-det {
|
|
.list-det {
|
|
|
- width: calc(100% - 200upx);
|
|
|
|
|
|
|
+ //width: calc(100% - 200upx);
|
|
|
margin-left: 20upx;
|
|
margin-left: 20upx;
|
|
|
& > div {
|
|
& > div {
|
|
|
margin-top: 14upx;
|
|
margin-top: 14upx;
|
|
@@ -259,15 +269,17 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.list-operate {
|
|
.list-operate {
|
|
|
|
|
+ width:480upx;
|
|
|
@include disFlex(center, space-between);
|
|
@include disFlex(center, space-between);
|
|
|
.operate-det {
|
|
.operate-det {
|
|
|
- padding-left:160upx;
|
|
|
|
|
|
|
+ width:480upx;
|
|
|
|
|
+ padding-left:100upx;
|
|
|
& > span {
|
|
& > span {
|
|
|
border:1px solid #ccc;
|
|
border:1px solid #ccc;
|
|
|
- border-radius: 30upx;
|
|
|
|
|
|
|
+ border-radius:25upx;
|
|
|
padding:5upx 20upx 5upx 20upx;
|
|
padding:5upx 20upx 5upx 20upx;
|
|
|
- font-size:20upx;
|
|
|
|
|
- margin-left: 40upx;
|
|
|
|
|
|
|
+ font-size:25upx;
|
|
|
|
|
+ margin-left:35upx;
|
|
|
&:first-child {
|
|
&:first-child {
|
|
|
margin-left: 0;
|
|
margin-left: 0;
|
|
|
}
|
|
}
|