积分管理页面添加

9 months ago · 52a570ca19
5 changed files with 391 additions and 1 deletions
--- a/.env.chengyang-prod
+++ b/.env.chengyang-prod
@ -1,6 +1,6 @@
 NODE_ENV=production
 # VUE_APP_API_SERVER =  http://120.27.18.76/api
-VUE_APP_API_SERVER =  http://192.166.3.82/api
+VUE_APP_API_SERVER =  http://112.230.202.146:10081/api
 VUE_APP_BIPASS_API_SERVER = https://epmet-preview.elinkservice.cn/linkdata/linkdata-gateway/route
 VUE_APP_NODE_ENV=preview
 VUE_APP_PUBLIC_PATH=epmet-work-pc
--- a/src/main.js
+++ b/src/main.js
@ -46,7 +46,9 @@ import PopHomeTip from "@/components/PopHomeTip/index.vue";
 import NameSplit from "@/components/NameSplit/index.vue";
 import RelationGraph from "relation-graph";
 import dayjs from 'dayjs'
+import dataV from '@jiaminghi/data-view'

+Vue.use(dataV)
 // import AddNodeJw from "@/components/JwTree/addNode.vue";
 //按钮
 Vue.component("nodeWrap", NodeWrap);
--- a/src/views/modules/level/index.vue
+++ b/src/views/modules/level/index.vue
@ -0,0 +1,97 @@
+<template>
+  <el-card class="contain">
+    <div style="margin-bottom: 12px; text-align: right;">
+      <el-button type="primary" @click="handleAdd">保存并生效</el-button>
+    </div>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column prop="name" label="等级名称"></el-table-column>
+      <el-table-column prop="icon" label="等级勋章" width="180"></el-table-column>
+      <el-table-column prop="points" label="所需积分" width="180"></el-table-column>
+      <el-table-column prop="date" label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button @click="handleClickEdit(scope.row)" type="text" size="small">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog title="新增活动规则" :visible.sync="dialogVisible" width="30%">
+      <div>
+        <el-form :model="form" label-width="100px">
+          <el-form-item label="等级名称">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="所需积分">
+            <el-input-number v-model="form.points"></el-input-number>
+          </el-form-item>
+          <el-form-item label="等级勋章">
+            <el-upload
+              class="upload-demo"
+              action="/points/sys/oss/upload"
+              list-type="picture-card"
+              :limit="1"
+              :on-success="onSuccess"
+              :file-list="fileList">
+              <i class="el-icon-plus"></i>
+              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+            </el-upload>
+            <!-- <el-input v-model="form.icon"></el-input> -->
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <template #footer>
+        <el-button type="primary" @click="handleSave">确定</el-button>
+        <el-button @click="dialogVisible = false">取消</el-button>
+      </template>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogVisible: false,
+        tableData: [],
+        fileList: [],
+        form: {}
+      }
+    },
+    mounted() {
+      this.getTableData()  
+    },
+    methods: {
+      getTableData() {
+        this.$http.get('/points/points/level/list').then(res => {
+          this.tableData = res.data.data
+        })
+      },
+      handleClick(row) {
+        console.log(row);
+      },
+      handleAdd() {
+        this.dialogVisible = true
+      },
+      handleClickEdit(row) {
+        this.form = row
+        this.dialogVisible = true
+      },
+      handleSave() {
+        this.$http.post('/points/points/level', this.form).then(res => {
+          this.$message.success('保存成功')
+          this.dialogVisible = false
+          this.getTableData()
+        })
+      },
+      onSuccess(e) {
+        console.log(e)
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.contain {
+  width: 100%;
+  margin: 24px 6px;
+}
+</style>
--- a/src/views/modules/person/index.vue
+++ b/src/views/modules/person/index.vue
@ -0,0 +1,194 @@
+<template>
+  <div class="contain">
+    <el-card>
+      <h2>用户数据</h2>
+      <el-form inline :model="formData">
+        <el-form-item label="手机号">
+          <el-input v-model="formData.mobile" placeholder="手机号" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="首次获取文明币时间">
+          <el-date-picker
+            v-model="formData.daterange"
+            type="daterange"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getTableData">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="nickname" label="用户名"></el-table-column>
+        <el-table-column prop="mobile" label="手机号"></el-table-column>
+        <el-table-column prop="total" label="总积分"></el-table-column>
+        <el-table-column prop="used" label="使用总积分"></el-table-column>
+        <el-table-column prop="availability" label="可用文明币"></el-table-column>
+        <el-table-column prop="blocked" label="冻结文明币"></el-table-column>
+        <el-table-column prop="firstDate" label="首次获取时间"></el-table-column>
+        <el-table-column prop="levelName" label="等级"></el-table-column>
+        <el-table-column prop="actNum" label="活动次数"></el-table-column>
+      </el-table>
+    </el-card>
+    <el-card>
+      <h2>积分排行榜</h2>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <h3>获取积分榜</h3>
+          <div class="scroll-ranking">
+            <dv-scroll-ranking-board v-if="totalConfig.data.length > 0" :config="totalConfig" style="width:500px;height:300px" />
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <h3>使用积分榜</h3>
+          <div class="scroll-ranking">
+            <dv-scroll-ranking-board v-if="usedConfig.data.length > 0" :config="usedConfig" style="width:500px;height:300px" />
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+export default {
+  data() {
+    return {
+      formData: {
+        mobile: '',
+        daterange: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      tableData: [],
+      totalConfig: {
+        data: []
+      },
+      usedConfig: {
+        data: []
+      },
+    }
+  },
+  mounted() {
+    this.getTableData()
+    this.getTotalTop()
+    this.getUsedTop()
+  },
+  methods: {
+    getTableData() {
+      let startTime, endTime
+      if(this.formData.daterange) {
+        startTime = moment(this.formData.daterange[0]).format('YYYY-MM-DD')
+        endTime = moment(this.formData.daterange[1]).format('YYYY-MM-DD')
+      }
+      if (!this.formData.daterange) {
+        this.formData.daterange = ''
+      }
+      this.$http.get('/points/points/user/page', {
+        params: {
+          page: 1,
+          limit: 10,
+          mobile: this.formData.mobile,
+          startTime,
+          endTime
+        }
+      }).then(res => {
+        this.tableData = res.data.data.list
+      })
+    },
+    getTotalTop(){
+      this.$http.get('/points/points/user/total-top').then(res => {
+        this.totalConfig.data = res.data.data.map(item => {
+          return {
+            name: item.nickname,
+            value: item.total
+          }
+        })
+        console.log(this.totalConfig.data)
+      })
+    },
+    getUsedTop(){
+      this.$http.get('/points/points/user/used-top').then(res => {
+        this.usedConfig.data = res.data.data.map(item => {
+          return {
+            name: item.nickname,
+            value: item.used
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contain {
+  width: 100%;
+  margin: 24px 6px;
+  h2 {
+    font-weight: 700;
+    font-style: normal;
+    font-size: 16px;
+    display: flex;
+    justify-content: space-between;
+  }
+  h3 {
+    font-weight: 600;
+    font-style: normal;
+    font-size: 14px;
+    text-align: center;
+  }
+}
+.scroll-ranking {
+  // background-color: #282c34;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+}
+</style>
+<style>
+.info-name,.ranking-value {
+  color: #282c34 !important;
+  font-size: 18px;
+}
+.rank {
+  /* color: #000 !important; */
+}
+.inside-column {
+  background-color: #fff !important;
+  background: linear-gradient(90deg, rgba(35, 228, 171, 1) 0%, rgba(9, 174, 233, 1) 100%);
+}
+</style>
--- a/src/views/modules/role/index.vue
+++ b/src/views/modules/role/index.vue
@ -0,0 +1,97 @@
+<template>
+  <el-card class="contain">
+    <!-- <div style="margin-bottom: 12px; text-align: right;">
+      <el-button type="primary" @click="handleAdd">新增规则</el-button>
+    </div> -->
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column prop="name" label="获得文明币行为"></el-table-column>
+      <el-table-column prop="points" label="获得文明币数量规则" width="180"></el-table-column>
+      <el-table-column prop="validityMonth" label="文明币有效期" width="180"></el-table-column>
+      <el-table-column prop="status" label="状态" width="180">
+        <template slot-scope="{ row }">
+          <el-switch v-model="row.status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用">
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column prop="updateDate" label="规则更新时间"></el-table-column>
+      <el-table-column prop="updater" label="操作人"></el-table-column>
+      <el-table-column prop="date" label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button @click="handleClickEdit(scope.row)" type="text" size="small">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog title="新增活动规则" :visible.sync="dialogVisible" width="30%">
+      <div>
+        <el-form :model="form" label-width="200px">
+          <el-form-item label="获得文明币行为">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="获得文明币数量规则">
+            <el-input v-model="form.points"></el-input>
+          </el-form-item>
+          <el-form-item label="文明币有效期">
+            <el-input v-model="form.validityMonth"></el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-switch v-model="form.status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949">
+            </el-switch>
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <template #footer>
+        <el-button type="primary" @click="handleSave">确定</el-button>
+        <el-button @click="dialogVisible = false">取消</el-button>
+      </template>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogVisible: false,
+        tableData: [],
+        form: {}
+      }
+    },
+    mounted() {
+      this.getTableData()  
+    },
+    methods: {
+      getTableData() {
+        this.$http.get('/points/points/rule/list').then(res => {
+          this.tableData = res.data.data
+        })
+      },
+      handleClick(row) {
+        console.log(row);
+      },
+      handleAdd() {
+        this.dialogVisible = true
+      },
+      handleClickEdit(row) {
+        this.$http.get(`/points/points/rule/${row.id}`).then(res => {
+          this.form = res.data.data
+          this.dialogVisible = true
+        })
+      },
+      handleSave() {
+        this.$http.put('/points/points/rule', this.form).then(res => {
+          this.$message.success('保存成功')
+          this.dialogVisible = false
+          this.getTableData()
+        })
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.contain {
+  width: 100%;
+  margin: 24px 6px;
+}
+</style>