徽章管理

src/api/badge/index.js

@@ -0,0 +1,20 @@
+import fetch from '../fetch.js'
+
+export default {
+    save(params) {
+        return fetch('/badge/add', params,'post','json')
+    },
+    update(params) {
+        return fetch('/badge/update', params,'post','json')
+    },
+    delete(params) {
+        return fetch('/badge/delete', params,'post','json')
+    },
+
+    list(params) {
+        return fetch('/badge/list', params,'post','json')
+    },
+
+
+
+}

src/api/index.js

@@ -12,7 +12,7 @@ import contractFile from '@/api/contract/file.js'
 import contractPay from '@/api/contract/pay.js'
 import notice from '@/api/notice/index.js'
 import flower from '@/api/flower/index.js'
-
+import badge from '@/api/badge/index.js'
 export default {
     user,
     sys,
@@ -27,5 +27,6 @@ export default {
     contractFile,
     contractPay,
     notice,
-    flower
+    flower,
+    badge,
 }

src/views/flower/badge/components/edit.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <a-button type="text" @click="show = true">{{ type === 'add' ? '新增':'编辑'}}</a-button>
+    <a-modal v-model:visible="show" @before-ok="submit">
+      <a-form  :model="form" auto-label-width ref="form">
+        <a-form-item label="徽章类别" field="category" required>
+          <a-select placeholder="请选择徽章类型" v-model="form.category">
+            <a-option>养护徽章</a-option>
+            <a-option>成长徽章</a-option>
+            <a-option>收藏徽章</a-option>
+            <a-option>挑战徽章</a-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="徽章名称" field="name" required>
+          <a-input placeholder="请输入徽章名称" v-model="form.name"></a-input>
+        </a-form-item>
+        <a-form-item label="徽章说明" field="desc" required>
+          <a-textarea placeholder="请输入徽章名称" v-model="form.desc"></a-textarea>
+        </a-form-item>
+        <a-form-item label="上传徽章" field="ossId" required>
+          <div class="">
+            <a-image class="mb-10" v-if="form.ossId.length > 0" :src="form.ossUrl" width="160" height="160" ></a-image>
+            <upload  @ok="upload"/>
+            <div class="font-14 primary mt-10">徽章大小为 400* 400</div>
+          </div>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import upload from '@/components/upload/index.vue'
+export default {
+  components: {
+    upload,
+  },
+  props: {
+    type: {
+      type: String,
+      default: "add"
+    },
+    info:{
+      type:Object,
+      default:null
+    }
+  },
+  watch: {
+    info:{
+      handler(val){
+        this.form = {...val}
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      show: false,
+      form:{
+        "category": "",
+        "desc": "",
+        "name": "",
+        "ossId": "",
+        ossUrl:''
+      }
+    }
+  },
+  methods: {
+    upload(file) {
+      this.form.ossId = file.id
+      this.form.ossUrl = file.url
+    },
+    submit(done){
+      this.$refs.form.validate(err => {
+        if (err === undefined) {
+          if (this.form.id ){
+            this.$api.badge.update(this.form).then(res => {
+              if (res.code === 200){
+                this.$emit('ok')
+                this.$message.success(res.msg)
+                done()
+              } else {
+                this.$message.error(res.msg)
+                done(false)
+              }
+            })
+          } else {
+            this.$api.badge.save(this.form).then(res => {
+              if (res.code === 200){
+                this.$emit('ok')
+                this.$message.success(res.msg)
+                done()
+              } else {
+                this.$message.error(res.msg)
+                done(false)
+              }
+            })
+          }
+
+        } else {
+          done(false)
+        }
+      })
+    }
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/flower/badge/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <navbar title="成就徽章"/>
+    <a-card>
+      <div >
+        <div class="flex flex-center flex-justify-start">
+          <edit @ok="fetchList"/>
+        </div>
+        <div class="mt-20">
+          <a-table :data="list" :columns="columns" :pagination="page">
+            <template #name="{record}">
+              <div>
+                <a-image></a-image>
+                <div>{{record.ossId}}</div>
+                <div>{{record.name}}</div>
+              </div>
+            </template>
+            <template #category="{record}">
+              <a-tag color="blue">{{record.category}}</a-tag>
+            </template>
+            <template #menu="{record}">
+              <edit  type="edit" :info="record" @ok="fetchList"/>
+              <a-popconfirm content="是否确认删除该数据?" @ok="remove(record.id)">
+                <a-button type="text">删除</a-button>
+              </a-popconfirm>
+            </template>
+          </a-table>
+        </div>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import navbar from '@/components/navbar/index.vue'
+import edit from './components/edit.vue'
+export default {
+  components: {
+    navbar,
+    edit
+  },
+  data() {
+    return {
+      page:{
+        current:0,
+        pageSize:10,
+        total:0,
+      },
+      list: [],
+      columns: [
+        {
+          title:'徽章名称',
+          slotName:'name'
+        },
+        {
+          title:'徽章描述',
+          dataIndex:'desc'
+        },
+        {
+          title:'徽章分类',
+          slotName:'category'
+        },
+        {
+          title:'操作',
+          slotName:'menu'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.fetchList();
+  },
+  methods: {
+    fetchList() {
+      this.$api.badge.list(this.page).then(res=>{
+        if (res.code === 200){
+          this.list = res.data.list
+        }
+      })
+    },
+    remove(id){
+      this.$api.badge.delete({ ids: [id] }).then(res=>{
+        if (res.code === 200){
+          this.$message.success(res.msg)
+          this.fetchList()
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/system/user/index.vue

@@ -32,7 +32,7 @@
                   </a-popconfirm>
                 </div>
               </div>
-            </div>
+            </div>a
           </template>
         </a-table>
       </div>