营销管理-活动-详情

src/plugins/echarts.js

@@ -0,0 +1,13 @@
+import * as echarts from "echarts/core";
+import { GridComponent, TooltipComponent } from "echarts/components";
+import { LineChart } from "echarts/charts";
+import { UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  GridComponent,
+  TooltipComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+]);
+export default echarts;

src/views/index.vue

@@ -120,14 +120,7 @@
 
 <script>
 
-import * as echarts from 'echarts/core';
+import echarts from "@/plugins/echarts"
-import { GridComponent, TooltipComponent } from 'echarts/components';
-import { LineChart } from 'echarts/charts';
-import { UniversalTransition } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, UniversalTransition]);
-
-
 export default {
   name: "Index",
   data() {

src/views/platform/manufacturer/index.vue

@@ -171,7 +171,6 @@
     </div>
 </template>
 <script>
-import { type } from "os";
 import Detail from "./detail"
 
 export default {

src/views/platform/marketing_management/promotion.vue

@@ -16,7 +16,7 @@
                 <el-button @click="resetForm('queryParams')">重置</el-button>
             </el-form-item>
             <br />
-            <el-button type="primary" @click="open = true">新增活动</el-button>
+            <el-button type="primary" @click="dialog.add = true">新增活动</el-button>
             <el-table :data="dataList" border class="table">
                 <el-table-column label="序号" type="index" align="center"></el-table-column>
                 <el-table-column label="活动名称" align="center">618大促</el-table-column>
@@ -29,12 +29,12 @@
                 <el-table-column label="创建时间" align="center">2022-12-31 12:31</el-table-column>
                 <el-table-column label="操作" align="center">
                     <el-button type="text">编辑</el-button>
-                    <el-button type="text">详情</el-button>
+                    <el-button type="text" @click="dialog.detail = true">详情</el-button>
                     <el-button type="text">删除</el-button>
                 </el-table-column>
             </el-table>
         </el-form>
-        <el-dialog :visible.sync="open" title="新增活动" width="1000px">
+        <el-dialog :visible.sync="dialog.add" title="新增活动" width="1000px">
             <el-form :form="addForm" ref="addForm" :inline="true" label-width="80px" label-position="left">
                 <el-form-item label="活动名称">
                     <el-input placeholder="请输入"></el-input>
@@ -94,14 +94,62 @@
                 <el-button>重置</el-button>
             </div>
         </el-dialog>
+        <el-dialog :visible.sync="dialog.detail" title="活动详情" width="1000px" @opened="initChart">
+            <div class="title">基本信息</div>
+            <el-row class="mt">
+                <el-col :span="3">活动名称</el-col>
+                <el-col :span="20">活动名称</el-col>
+            </el-row>
+            <el-row v-for="item in 3" :key="item" class="mt">
+                <template v-if="item === 1">
+                    <el-col :span="3">优惠券</el-col>
+                    <el-col :span="3">满300减50</el-col>
+                </template>
+                <el-col :span="3" :offset="3" v-else>满300减50</el-col>
+                <el-col :span="3">数量：1000张</el-col>
+                <el-col :span="3">已领取：999张</el-col>
+            </el-row>
+            <el-row class="mt">
+                <el-col :span="3">使用限制</el-col>
+                <el-col :span="20">全场通用</el-col>
+            </el-row>
+            <el-row class="mt">
+                <el-col :span="3">备注</el-col>
+                <el-col :span="20">备注</el-col>
+            </el-row>
+            <div class="title">数据统计</div>
+            <el-row>
+                <el-col :span="4" class="card">
+                    <div class="text-center">467484.00</div>
+                    <div class="text-center">优惠券总额</div>
+                </el-col>
+                <el-col :span="4" :offset="1" class="card">
+                    <div class="text-center">467484.00</div>
+                    <div class="text-center">已使用</div>
+                </el-col>
+                <el-col :span="4" :offset="1" class="card">
+                    <div class="text-center">467484.00</div>
+                    <div class="text-center"> 未使用</div>
+                </el-col>
+                <el-col :span="4" :offset="1" class="card">
+                    <div class="text-center">467484.00</div>
+                    <div class="text-center">未领取</div>
+                </el-col>
+            </el-row>
+            <div ref="chart" class="chart"></div>
+        </el-dialog>
     </div>
 </template>
 <script>
+import echarts from "@/plugins/echarts"
 export default {
     name: 'Promotion',
     data() {
         return {
-            open: false,
+            dialog: {
+                add: false,
+                detail: false
+            },
             dataList: [{}],
             addForm: {
                 limit: undefined,
@@ -117,13 +165,73 @@ export default {
     methods: {
         save() {
             this.$modal.msgSuccess('保存成功')
-            this.open = false
+            this.dialog.open = false
+        },
+        initChart() {
+            let myChart = echarts.init(this.$refs.chart);
+            let option;
+
+            option = {
+                xAxis: {
+                    type: 'category',
+                    data: Array.from(new Array(12).keys()).map(item => `${item + 1}月`)
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                tooltip: {
+                    show: true,
+                    trigger: 'axis'
+                },
+                series: [
+                    {
+                        data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
+                        type: 'line'
+                    },
+                    {
+                        data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
+                        type: 'line'
+                    }
+                ]
+            };
+
+            option && myChart.setOption(option);
+
         }
     }
 }
 </script>
 <style scoped lang="scss">
+.chart {
+    height: 400px;
+}
+
+.card {
+    border-radius: 6px;
+    border: 1px solid rgba(187, 187, 187, 1);
+    padding: 20px 0;
+}
+
 .table {
     margin-top: 10px;
 }
+
+.mt {
+    margin-top: 10px;
+}
+
+.title {
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+
+.title:first-child {
+    margin-bottom: 20px;
+}
+
+.title:nth-child(n+2) {
+    margin: 20px 0;
+}
 </style>