积分管理，看板，列表，兑换记录

package.json

@@ -11,21 +11,24 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "avue-plugin-ueditor": "^0.1.4",
     "axios": "^0.21.1",
     "babel-polyfill": "^6.26.0",
     "classlist-polyfill": "^1.2.0",
     "crypto-js": "^4.0.0",
+    "echarts": "^5.5.1",
     "element-ui": "^2.15.6",
     "js-base64": "^2.5.1",
     "js-cookie": "^2.2.0",
     "js-md5": "^0.7.3",
-    "sm-crypto": "^0.3.13",
     "mockjs": "^1.0.1-beta3",
     "node-gyp": "^5.0.6",
     "nprogress": "^0.2.0",
     "portfinder": "^1.0.23",
     "script-loader": "^0.7.2",
+    "sm-crypto": "^0.3.13",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.2",
     "vue-i18n": "^8.7.0",

src/styles/element-ui.scss

@@ -69,3 +69,8 @@
 .el-divider--horizontal {
   margin: 12px 0 !important;
 }
+
+@font-face {
+  font-family:DINPro ;
+  src: url("./font/DINPro-Bold.otf");
+}

src/styles/public/table-style.scss

@@ -1,5 +1,7 @@
 :deep() {
-
+  .route_body{
+    padding: 12px 12px 0 16px;
+  }
   .el-table .el-table__header-wrapper tr {
     background-color: rgba(245, 247, 250, 1);
     border-radius: 12px 12px 0 0;

src/views/jfsc/components/centerDrawer.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="myDialog">
+    <el-dialog
+      title="积分兑换记录"
+      :visible.sync="isShow"
+      width="70%"
+      :before-close="handleClose">
+        <div class="history">
+            <div class="top">
+              <div class="lf">
+                <img src="https://img2.baidu.com/it/u=1900348726,796248972&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="">
+              </div>
+              <div class="rt">
+                <p>
+                  <span class="name">张三分</span> <span class="sfz">（220121 1990 0101 0103）</span>
+                </p>
+                <p class="tel">188 4567 5678</p>
+                <p class="address">长春市朝阳区南湖中街大禹蜜蜂公寓B座1368室</p>
+              </div>
+            </div>
+
+          <el-table
+            :data="tableData"
+            style="width: 100%;margin-top: 24px">
+            <el-table-column
+             type="index"
+             label="#"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="订单编号"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="兑换数量">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="消费积分"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="订单状态">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="下单时间"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="领取时间">
+            </el-table-column>
+            <el-table-column
+              label="发放人">
+            </el-table-column>
+          </el-table>
+        </div>
+      <div style="text-align: right"><el-button class="mybutton" type="primary" @click="isShow = false">确 定</el-button></div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "centerDrawer",
+  props:['isShow'],
+  data(){
+    return{
+      dialogVisible: false,
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  },
+  methods:{
+    handleClose(){
+      this.$emit('closeDialog')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.myDialog{
+  .mybutton{
+    width: 88px;
+    height: 38px;
+    background: #106DFF;
+    line-height: 38px;
+    border-radius: 22px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 17px;
+    color: #FFFFFF;
+    text-align: center;
+    font-style: normal;
+    margin-top: 20px;
+    padding: 0;
+  }
+  .history{}
+    .top{
+      display: grid;
+      grid-template-columns: 120px calc(100% - 120px);
+      .lf{
+        img{
+          width: 120px;
+        }
+      }
+      .rt{
+        padding: 0 12px;
+        box-sizing: border-box;
+        p{
+          .name{
+            height: 33px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 600;
+            font-size: 22px;
+            color: rgba(4,8,20,0.9);
+            line-height: 33px;
+            text-align: left;
+            font-style: normal;
+          }
+          .sfz{
+            height: 30px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 19px;
+            color: #6F7CA3;
+            line-height: 30px;
+            text-align: left;
+            font-style: normal;
+          }
+          .tel{
+            height: 30px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 19px;
+            color: #242F52;
+            line-height: 30px;
+            text-align: left;
+            font-style: normal;
+          }
+          .address{
+            height: 30px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 19px;
+            color: #242F52;
+            line-height: 30px;
+            text-align: left;
+            font-style: normal;
+          }
+        }
+
+      }
+    }
+}
+::v-deep{
+  .el-dialog{
+    border-radius: 22px;
+  }
+}
+</style>

src/views/jfsc/components/jfglSearch.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="search_body">
+    <div class="sib">
+      <el-input placeholder="请输入用户姓名查询" suffix-icon="el-icon-search" v-model="searchform.xm" size="mini"
+                style="width: 20vw;" clearable>
+      </el-input>
+    </div>
+    <div class="sib">
+      <div class="lb">证件号码</div>
+      <el-input placeholder="请输入证件号码" v-model="searchform.zjhm" size="mini" style="width: 16vw;" clearable>
+      </el-input>
+    </div>
+    <div class="sib">
+      <div class="lb">联系方式</div>
+      <el-input placeholder="请输入联系方式" v-model="searchform.lxfs" size="mini" style="width: 16vw;" clearable>
+      </el-input>
+    </div>
+    <div class="sbtns">
+      <OpenBtn></OpenBtn>
+      <button class="nomal" @click.stop="research">重 置</button>
+      <button class="primary" @click.stop="search">查 询</button>
+    </div>
+  </div>
+</template>
+<script>
+import OpenBtn from '@/components/OpenBtn.vue';
+
+export default {
+  components: { OpenBtn },
+  data() {
+    return {
+      searchform: {},
+      icon_arrow_down_black_16: require('@/img/search/icon_arrow_down_black_16.svg')
+    }
+  },
+  methods: {
+    research() {
+      this.searchform = {}
+      this.$emit('research')
+    },
+    search() {
+      this.$emit('search', this.searchform)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@use '@/styles/searchgroup.scss';
+</style>

src/views/jfsc/jfgl.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="route_body">
+      <div class="content_body">
+        <Kanban></Kanban>
+      </div>
+    </div>
+
+    <div class="route_body">
+      <div class="content_body">
+        <jfglSearch ref="dhglSearch" @search="search" @research="research"></jfglSearch>
+        <TableDom ref="TableDom" :page="page" :option="option" :tableList="tableList" menuwidth="200"
+                  @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
+          <template v-slot:menu="{ scope }">
+            <el-button @click="rowView(scope)" type="text" size="mini">获取记录</el-button>
+            <el-button @click="rowView(scope)" type="text" size="mini">兑换记录</el-button>
+          </template>
+        </TableDom>
+      </div>
+    </div>
+
+    <centerDrawer ref="centerDrawer" :is-show="dialogVisible" @closeDialog="dialogVisible=false"></centerDrawer>
+
+  </div>
+
+</template>
+
+<script>
+import jfglSearch from './components/jfglSearch.vue';
+import TableDom from "@/components/table-dom";
+import Kanban from "@/views/jfsc/kanban";
+import centerDrawer from "@/views/jfsc/components/centerDrawer";
+export default {
+  components: { TableDom, jfglSearch,Kanban,centerDrawer},
+  data(){
+    return{
+      dialogVisible:false,
+      tableList: [
+        {
+          ddbh: '订单编号',
+          dhrxm: '用户姓名',
+          zjhm: '证件号码',
+          lxfs: '联系方式',
+          spsl: '居住地',
+          xhjf: '获得的总积分',
+          lqzt: '已兑换积分',
+          syjf:'剩余积分',
+          zt:'操作'
+        }
+      ],
+      option: [
+        { prop: 'ddbh', label: '订单编号' },
+        { prop: 'dhrxm', label: '用户姓名' },
+        { prop: 'zjhm', label: '证件号码' },
+        { prop: 'lxfs', label: '联系方式' },
+        { prop: 'spsl', label: '居住地' },
+        { prop: 'xhjf', label: '获得的总积分' },
+        { prop: 'lqzt', label: '已兑换积分' },
+        { prop: 'syjf', label: '剩余积分' },
+      ],
+    }
+  },
+  methods:{
+    rowView(){
+      this.dialogVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/public/table-style.scss';
+
+</style>

src/views/jfsc/kanban.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="container">
+    <img :src="icon" style="width: 18px">
+    <el-select v-model="value" placeholder="请选择">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
+
+    <div class="kanban">
+      <div>
+        <span>获得的总积分数</span>
+        <div>822,062</div>
+      </div>
+
+      <div>
+        <span>已兑换商品总积分数</span>
+        <div>4,386</div>
+      </div>
+
+      <div>
+        <span>未兑换商品总积分数</span>
+        <div>817,676</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "kanban",
+  data(){
+    return{
+      icon:require('../../img/jfsc/icon_points_gray_16@2x.png'),
+      options: [{
+        value: '吉林省长春市朝阳区',
+        label: '吉林省长春市朝阳区'
+      }],
+      value: '吉林省长春市朝阳区'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container{
+  padding-top: 12px;
+  img{
+    position: relative;
+    top: 4px;
+  }
+}
+.kanban{
+  display: grid;
+  grid-template-columns: 33.33% 33.33% 33.33%;
+  text-align: left;
+  padding: 0 6px;
+  box-sizing: border-box;
+  >div{
+    padding: 12px 0;
+    span{
+      height: calc(((100vw - 180px) /1960) * 30);
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: calc(((100vw - 180px) /1960) * 19);
+      color: rgba(4,8,20,0.9);
+      line-height: calc(((100vw - 180px) /1960) * 30);
+      text-align: left;
+      font-style: normal;
+    }
+    div{
+      height: calc(((100vw - 180px) /1960) * 54);
+      font-family: DINPro, DINPro;
+      font-weight: bold;
+      font-size: calc(((100vw - 180px) /1960) * 44);
+      color: #111111;
+      line-height:  calc(((100vw - 180px) /1960) * 54);
+      text-align: left;
+      font-style: normal;
+    }
+  }
+}
+ ::v-deep {
+   .el-input__inner{
+     border: none;
+     font-family: PingFangSC, PingFang SC;
+     font-weight: 500;
+     font-size: 15px;
+     color: rgba(4,8,20,0.9);
+     text-align: left;
+     font-style: normal;
+   }
+ }
+</style>