|
|
@@ -0,0 +1,293 @@
|
|
|
+<template>
|
|
|
+ <view class="app-content">
|
|
|
+ <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-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.name}}</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="delKind(item.id)">删除</span>
|
|
|
+ <span @click.stop="edit(item)">编辑</span>
|
|
|
+ </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 big blue" @click="addKindFn">添加种类</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <modal-module :show="modifyModal" :maskClosable="false" @cancel="modalCancel" @click="modifyModalClick" width="92%" :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="modifyForm.categoryName" :adjust-position="false" 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="modifyForm.inTurn" @focus="modifyForm.inTurn=''" :adjust-position="false" class="inp-input" placeholder="值越大越靠前" />
|
|
|
+ </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;font-size:28upx;" :for="item.flag" v-for="(item, index) in catItem" :key="index">
|
|
|
+ <radio :id="item.flag" :value="item.value" :checked="Number(item.value) == Number(flower)" :disabled="catDisabled" style="transform: scale(0.7,0.7);" />{{item.name}}
|
|
|
+ </label>
|
|
|
+ </radio-group>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </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 { list } from '@/mixins'
|
|
|
+import { categoryStatusB, categoryAddB, categoryUpdateB, categoryDelB } from '@/api/goods'
|
|
|
+import { getKindList } from '@/api/kind'
|
|
|
+export default {
|
|
|
+ name: 'kind',
|
|
|
+ components: {
|
|
|
+ ModalModule,
|
|
|
+ AppUploader,
|
|
|
+ OperateModule,
|
|
|
+ AppWrapperEmpty
|
|
|
+ },
|
|
|
+ mixins: [list],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ modifyModal: false,
|
|
|
+ modifyTitle: '添加',
|
|
|
+ modifyForm: {
|
|
|
+ categoryId:0,
|
|
|
+ categoryName: '',
|
|
|
+ inTurn: '',
|
|
|
+ status: 1
|
|
|
+ },
|
|
|
+ delModal: false,
|
|
|
+ operateData: {},
|
|
|
+ operateIndex: null,
|
|
|
+ operateTop: 0,
|
|
|
+ catItem: [
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: '未选择',
|
|
|
+ flag:'notSel'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '鲜花类',
|
|
|
+ flag:'flower'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ name: '绿植资材',
|
|
|
+ flag:'mater'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //0 绿植资材 1 鲜花商品
|
|
|
+ flower:2,
|
|
|
+ catDisabled:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.resetList()
|
|
|
+ this.getKindData().then(res => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (!this.list.finished) {
|
|
|
+ this.getKindData().then(res => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ radioChange(e){
|
|
|
+ this.flower = e.detail.value
|
|
|
+ },
|
|
|
+ edit(item){
|
|
|
+ this.modifyModal = true
|
|
|
+ this.modifyTitle = '编辑'
|
|
|
+ this.modifyForm = { categoryId:item.id, categoryName: item.categoryName, inTurn: item.inTurn }
|
|
|
+ this.flower = parseInt(item.flower)
|
|
|
+ this.catDisabled = true
|
|
|
+ },
|
|
|
+ addKindFn() {
|
|
|
+ this.resetForm()
|
|
|
+ this.modifyModal = true
|
|
|
+ this.modifyTitle = '新增'
|
|
|
+ this.catDisabled = false
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.modifyForm = {categoryId:0, categoryName: '', inTurn: '', status: 1 }
|
|
|
+ this.flower = 2
|
|
|
+ },
|
|
|
+ async init() {
|
|
|
+ this.getKindData()
|
|
|
+ },
|
|
|
+ getKindData() {
|
|
|
+ return getKindList().then(res => {
|
|
|
+ let data = { code: res.code, msg: res.msg, data: { list: res.data } }
|
|
|
+ this.completes(data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ kindAddOrEdit() {
|
|
|
+ if (!this.modifyForm.categoryName) {
|
|
|
+ this.$msg('请输入种类名称')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let form = JSON.parse(JSON.stringify(this.modifyForm))
|
|
|
+ let host = categoryAddB
|
|
|
+ if(form.categoryId && form.categoryId > 0){
|
|
|
+ host = categoryUpdateB
|
|
|
+ }
|
|
|
+ if(Number(this.flower) == 2){
|
|
|
+ this.$msg('请选择属性')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ host({ ...form,flower:this.flower }).then(res => {
|
|
|
+ this.$msg('操作成功!')
|
|
|
+ this.modalCancel()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.resetList()
|
|
|
+ this.getKindData()
|
|
|
+ }, 1000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ modifyModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel()
|
|
|
+ } else {
|
|
|
+ this.kindAddOrEdit()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modalCancel() {
|
|
|
+ this.delModal = false
|
|
|
+ this.modifyModal = false
|
|
|
+ },
|
|
|
+ delKind(id) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确认删除？',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-content {
|
|
|
+ min-height: calc(100vh - 100upx);
|
|
|
+ padding-bottom: 100upx;
|
|
|
+}
|
|
|
+.list-wrap {
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ .list {
|
|
|
+ height: 160upx;
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ padding: 30upx 0;
|
|
|
+ margin: 0 30upx;
|
|
|
+ color: $fontColor3;
|
|
|
+ border-bottom: 1px solid $borderColor;
|
|
|
+ .list-index {
|
|
|
+ width: 50upx;
|
|
|
+ }
|
|
|
+ .list-img {
|
|
|
+ width: 130upx;
|
|
|
+ height: 130upx;
|
|
|
+ image {
|
|
|
+ width:130upx;
|
|
|
+ height:130upx;
|
|
|
+ border-radius: 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-det {
|
|
|
+ //width: calc(100% - 200upx);
|
|
|
+ margin-left: 20upx;
|
|
|
+ & > div {
|
|
|
+ margin-top: 14upx;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-operate {
|
|
|
+ width:480upx;
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ .operate-det {
|
|
|
+ width:480upx;
|
|
|
+ padding-left:100upx;
|
|
|
+ & > span {
|
|
|
+ border:1px solid #ccc;
|
|
|
+ border-radius:25upx;
|
|
|
+ padding:5upx 20upx 5upx 20upx;
|
|
|
+ font-size:25upx;
|
|
|
+ margin-left:35upx;
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+ // margin-bottom: 10upx;
|
|
|
+ }
|
|
|
+ .line-label {
|
|
|
+ width: 140upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .switch-wrap {
|
|
|
+ margin-top: 30upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
shish