123

package.json

@@ -67,6 +67,7 @@
     "vue-cropper": "0.5.5",
     "vue-draggable-resizable": "^2.3.0",
     "vue-meta": "^2.4.0",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

src/components/BaseDialog.vue

@@ -19,12 +19,12 @@
     </div>
     <slot></slot>
     <div slot="footer" class="dialog-footer" v-if="isShowFooter">
-      <el-button :loading="disabledBtn" @click="visible = false">{{
-        cancelName
-      }}</el-button>
       <el-button :loading="disabledBtn" type="primary" @click="confirmBtn">{{
         confirmName
       }}</el-button>
+      <el-button :loading="disabledBtn" @click="visible = false">{{
+        cancelName
+      }}</el-button>
     </div>
   </el-dialog>
 </template>

src/components/FileUpload/index.vue

@@ -7,11 +7,12 @@
       :file-list="fileList"
       :show-file-list="true"
       :limit="limit"
+      :on-change="handleChange"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
       :on-preview="handlePictureCardPreview"
-      :before-remove="beforeRemove"
+      :on-remove="handleRemove"
       list-type="picture-card"
       class="upload-file-uploader"
       ref="upload"
@@ -26,34 +27,9 @@
     <div class="el-upload__tips" slot="tip" v-if="showTip">
       *建议尺寸800x800像素，大小10M以下
     </div>
-    <el-dialog :visible.sync="dialogVisible">
+    <el-dialog append-to-body :visible.sync="dialogVisible">
       <img width="100%" :src="dialogImageUrl" alt="" />
     </el-dialog>
-    <!-- 文件列表 -->
-    <!-- <transition-group
-      class="upload-file-list el-upload-list el-upload-list--text"
-      name="el-fade-in-linear"
-      tag="ul"
-    >
-      <li
-        :key="file.uid"
-        class="el-upload-list__item ele-upload-list__item-content"
-        v-for="(file, index) in fileList"
-      >
-        <el-link
-          :href="`${baseUrl}${file.url}`"
-          :underline="false"
-          target="_blank"
-        >
-          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
-        </el-link>
-        <div class="ele-upload-list__item-content-action">
-          <el-link :underline="false" @click="handleDelete(index)" type="danger"
-            >删除</el-link
-          >
-        </div>
-      </li>
-    </transition-group> -->
   </div>
 </template>
 
@@ -62,9 +38,13 @@ import { getToken } from "@/utils/auth";
 
 export default {
   name: "FileUpload",
+  model: {
+    prop: "flies",
+    event: "changeFlie",
+  },
   props: {
     // 值
-    value: [String, Object, Array],
+    flies: [String, Object, Array],
     // 数量限制
     limit: {
       type: Number,
@@ -73,7 +53,7 @@ export default {
     // 大小限制(MB)
     fileSize: {
       type: Number,
-      default: 5,
+      default: 10,
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg'] ["doc", "xls", "ppt", "txt", "pdf"],
     fileType: {
@@ -92,23 +72,19 @@ export default {
   },
   data() {
     return {
-      baseUrl: process.env.VUE_APP_BASE_API,
-      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
       fileList: [],
+      upload_List: [],
       dialogVisible: false,
       dialogImageUrl: "",
     };
   },
   watch: {
-    value: {
+    flies: {
       handler(val) {
         if (val) {
           let temp = 1;
           // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(",");
+          const list = Array.isArray(val) ? val : this.flies.split(",");
           // 然后将数组转为对象数组
           this.fileList = list.map((item) => {
             if (typeof item === "string") {
@@ -117,6 +93,7 @@ export default {
             item.uid = item.uid || new Date().getTime() + temp++;
             return item;
           });
+          this.upload_List = JSON.parse(JSON.stringify(this.fileList));
         } else {
           this.fileList = [];
           return [];
@@ -133,19 +110,31 @@ export default {
     },
   },
   methods: {
-    beforeRemove(file, fileList) {
-      console.log(file, fileList);
-      this.fileList = fileList;
+    handleChange(file, fileList) {
+      this.fileList = JSON.parse(JSON.stringify(fileList));
+    },
+    handleRemove(file, fileList) {
+      this.fileList = JSON.parse(JSON.stringify(fileList));
+      this.upload_List.forEach((item, index) => {
+        if (item.uid == file.uid) {
+          this.upload_List.splice(index, 1);
+        }
+      });
+      this.$emit("changeFlie", JSON.parse(JSON.stringify(this.upload_List)));
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
     },
-    requestUpload(file) {
+    requestUpload({ file }) {
       this.$upload.upload(file, 0).then((res) => {
         const url = this.$methodsTools.splitImgHost(res);
-        this.fileList.push({ name: url, url: url });
-        this.$emit("input", this.listToString(this.fileList));
+        this.upload_List.push({
+          name: file.name,
+          url: url,
+          uid: file.uid,
+        });
+        this.$emit("changeFlie", JSON.parse(JSON.stringify(this.upload_List)));
       });
     },
     // 上传前校检格式和大小
@@ -192,11 +181,6 @@ export default {
       this.fileList.push({ name: res.fileName, url: res.fileName });
       this.$emit("input", this.listToString(this.fileList));
     },
-    // 删除文件
-    handleDelete(index) {
-      this.fileList.splice(index, 1);
-      this.$emit("input", this.listToString(this.fileList));
-    },
     // 获取文件名称
     getFileName(name) {
       if (name.lastIndexOf("/") > -1) {
@@ -205,62 +189,23 @@ export default {
         return "";
       }
     },
-    // 对象转成指定字符串分隔
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        strs += list[i].url + separator;
-      }
-      return strs != "" ? strs.substr(0, strs.length - 1) : "";
-    },
   },
 };
 </script>
 
 <style scoped lang="scss">
-.upload-file-uploader {
-  margin-bottom: 5px;
-}
-.upload-file-list .el-upload-list__item {
-  border: 1px solid #e4e7ed;
-  line-height: 2;
-  margin-bottom: 10px;
-  position: relative;
-}
-.upload-file-list .ele-upload-list__item-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: inherit;
-}
-.ele-upload-list__item-content-action .el-link {
-  margin-right: 10px;
-}
-// .uploladBtn {
-//   width: 72px;
-//   height: 72px;
-//   background: #f5f6f7;
-//   border-radius: 8px;
-//   font-size: 20px;
-// }
 .el-upload__tips {
   color: #999999;
   font-size: 12px;
   height: 0;
   margin-bottom: 20px;
 }
-/deep/ .el-upload--picture-card {
-  width: 72px;
-  height: 72px;
-  background: #f5f6f7;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 /deep/ {
-  .upload-file-uploader {
-    display: flex;
+  .el-upload--picture-card {
+    width: 72px;
+    height: 72px;
+    background: #f5f6f7;
+    line-height: 72px;
   }
   .el-upload-list {
     .el-upload-list__item {

src/components/searchBoxNew.vue

@@ -13,9 +13,22 @@
           :label="item.label"
         >
           <!-- 自定义select -->
+          <el-select
+            v-if="item.scope === 'store'"
+            v-model="formData[item.prop]"
+            :placeholder="item.placeholder"
+            :size="size"
+          >
+            <el-option
+              v-for="(items, indexs) in storeList"
+              :key="indexs"
+              :label="items.projectName"
+              :value="items.id"
+            ></el-option>
+          </el-select>
           <el-select
             :clearable="item.noClear === false ? false : true"
-            v-if="item.scope === 'select'"
+            v-else-if="item.scope === 'select'"
             v-model="formData[item.prop]"
             :placeholder="item.placeholder"
             :size="size"
@@ -117,7 +130,7 @@
           <el-date-picker
             v-else-if="item.scope === 'datePickerA'"
             v-model="formData[item.prop]"
-            type="datetime"
+            :type="item.type || 'date'"
             :size="size"
             :placeholder="item.placeholder"
             value-format="timestamp"
@@ -211,6 +224,7 @@ export default {
           },
         ],
       },
+      storeList: [],
     };
   },
   computed: {

src/main.js

@@ -7,6 +7,10 @@ import AFTableColumn from "af-table-column";
 import "./assets/fonts/iconfont.css";
 import "./assets/styles/element-variables.scss";
 
+import 'quill/dist/quill.core.css' //Editor
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+
 import "@/assets/styles/index.scss"; // global css
 import "@/assets/styles/ruoyi.scss"; // ruoyi css
 import App from "./App";

src/router/index.js

@@ -115,6 +115,12 @@ export const constantRoutes = [
         name: "goodsMag",
         meta: { title: "商品管理", icon: "dashboard", affix: true },
       },
+      {
+        path: "/report",
+        component: (resolve) => require(["@/views/report/index"], resolve),
+        name: "report",
+        meta: { title: "数据报表", icon: "dashboard", affix: true },
+      },
     ],
   },
 ];

src/views/components/index/menbetDlg.vue

@@ -0,0 +1,99 @@
+<template>
+  <Base-dialog
+    title="请扫码会员卡"
+    :isShow.sync="isShow"
+    @submit="submitForm"
+    @close="close"
+    width="450px"
+  >
+    <el-form
+      label-width="0"
+      label-position="left"
+      :model="form"
+      hide-required-asterisk
+      :rules="rules"
+      ref="form"
+    >
+      <el-form-item label=" " prop="cardNum">
+        <div class="input-box">
+          <el-input placeholder="请扫描会员卡" v-model="form.cardNum">
+            <img src="../../../assets/images/icon_scan.png" slot="suffix" />
+          </el-input>
+        </div>
+      </el-form-item>
+    </el-form>
+  </Base-dialog>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      form: {},
+      rules: {
+        cardNum: [
+          { required: true, message: "请输入会员卡号", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    resetForm() {
+      this.form = {
+        cardNum: undefined,
+      };
+      this.clearForm("form");
+    },
+    submitForm() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+        } else {
+          return false;
+        }
+      });
+    },
+    close() {
+      //   this.isShow = false;
+      this.clearForm("form");
+    },
+  },
+  computed: {
+    isShow: {
+      get() {
+        return this.dialogVisible;
+      },
+      set(val) {
+        this.$emit("update:dialogVisible", false);
+      },
+    },
+    ...mapGetters(["roleList"]),
+  },
+  created() {},
+  components: {},
+  watch: {
+    dialogVisible: {
+      handler(val) {
+        if (val) {
+          this.resetForm();
+        }
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.input-box {
+  img {
+    margin: 8px 8px 0 0;
+  }
+}
+</style>

src/views/components/index/payContain.vue

@@ -34,8 +34,10 @@
           v-model="from.money"
         />
       </div>
-      <div class="discount">
-        <el-checkbox v-model="checked">折扣商品</el-checkbox>
+      <div class="discount fl">
+        <!-- <el-checkbox :checked="checked">折扣商品</el-checkbox> -->
+        <img src="../../../assets//images//Controls_sel.png" alt="" />
+        <span class="discount-text">折扣商品</span>
         <span class="mr">该商品最多可抵扣</span>
         <input
           type="text"
@@ -45,6 +47,7 @@
         <span class="text-21f">（2000积分）</span>
       </div>
       <div class="pay-bom-item c48">折扣金额：233元</div>
+      <div class="pay-bom-item c48">积分补差：233元</div>
       <div class="pay-bom-item c48">
         实付金额：<span class="money">￥2243.00</span>
       </div>
@@ -52,14 +55,18 @@
         支付方式：
         <div
           class="wechart fl_c"
-          :class="{ actived: active }"
-          @click="active = !active"
+          :class="{ actived: active == item.value }"
+          @click="active = item.value"
+          v-for="item in payType"
+          :key="item.value"
         >
-          <img src="../../../assets//images//icon_wechat.png" alt="" />
-          <span>微信支付</span>
+          <img :src="item.src" alt="" />
+          <span>{{ item.lebel }}</span>
         </div>
       </div>
     </div>
+
+    <el-button type="danger">危险按钮1</el-button>
   </container>
 </template>
 
@@ -87,7 +94,15 @@ export default {
     return {
       money: "",
       checked: true,
-      active: true,
+      payType: [
+        {
+          lebel: "微信支付",
+          value: 1,
+          src: require("../../../assets//images//icon_wechat.png"),
+        },
+        { lebel: "现金支付", value: 2 },
+      ],
+      active: 1,
     };
   },
 
@@ -188,10 +203,18 @@ export default {
     }
   }
   .discount {
+    width: 100%;
     font-size: 14px;
+    margin-bottom: 18px;
     .mr {
       margin: 0 8px 0 12px;
     }
+    .discount-text {
+      color: #000;
+      font-weight: bold;
+      color: #4a4a4b;
+      margin-left: 5px;
+    }
     input {
       width: 114px;
       height: 36px;
@@ -199,23 +222,16 @@ export default {
       border-radius: 6px;
       color: #eb5757;
     }
-    /deep/ {
-      .el-checkbox__label {
-        color: #000;
-        font-weight: bold;
-        color: #4a4a4b;
-        font-size: 14px;
-      }
-    }
   }
   .pay-bom-item {
-    margin-top: 20px;
+    margin-top: 24px;
     .money {
       font-weight: 800;
       color: #eb5757;
       font-size: 16px;
     }
     .wechart {
+      margin-right: 20px;
       width: 160px;
       height: 55px;
       background: #f6f7f9;
@@ -234,4 +250,8 @@ export default {
     outline: none;
   }
 }
+.el-button {
+  width: 180px;
+  height: 40px;
+}
 </style>

src/views/goodsMag/components/GoodSetDlg.vue

@@ -4,7 +4,7 @@
     :isShow.sync="isShow"
     @close="close"
     :isShowFooter="false"
-    width="600px"
+    width="680px"
   >
     <el-form
       label-width="90px"
@@ -26,7 +26,7 @@
         </el-input>
       </el-form-item>
       <el-form-item label="商品主图:" prop="userName">
-        <file-upload></file-upload>
+        <file-upload v-model="form.fileList" :limit="20"></file-upload>
       </el-form-item>
       <el-form-item label="产品原价:" prop="userName">
         <el-input v-model.Number="form.userName" placeholder="请输入产品原价">
@@ -40,10 +40,21 @@
         <el-input v-model.Number="form.userName" placeholder="请输入可抵扣积分">
         </el-input>
       </el-form-item>
+      <el-form-item label="产品详情" class="editor" prop="detail">
+        <quill-editor
+          class="ql-editor"
+          v-model="form.detail"
+          ref="myQuillEditor"
+          :options="editorOption"
+          @change="onEditorChange($event)"
+        >
+        </quill-editor>
+      </el-form-item>
     </el-form>
+
     <div class="btns clearfix">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="submitForm">启用</el-button>
+      <el-button @click="isShow = false">取消</el-button>
+      <el-button type="primary" @click="submitForm">上架</el-button>
       <el-button type="info">保存</el-button>
     </div>
   </Base-dialog>
@@ -52,6 +63,7 @@
 <script>
 import { mapGetters } from "vuex";
 import FileUpload from "../../../components/FileUpload/index.vue";
+import { quillEditor } from "vue-quill-editor";
 export default {
   props: {
     dialogVisible: {
@@ -67,6 +79,9 @@ export default {
         parent: [
           { required: true, message: "请选择启动状态", trigger: "change" },
         ],
+        detail: [
+          { required: true, message: "请输入产品详情", trigger: "blur" },
+        ],
       },
       options: [
         {
@@ -98,6 +113,39 @@ export default {
           ],
         },
       ],
+      editorOption: {
+        placeholder: "请输入产品详情",
+        modules: {
+          toolbar: [
+            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
+            ["blockquote", "code-block"], // 引用  代码块
+            [{ header: 1 }, { header: 2 }], // 1、2 级标题
+            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
+            [{ script: "sub" }, { script: "super" }], // 上标/下标
+            [{ indent: "-1" }, { indent: "+1" }], // 缩进
+            [{ direction: "rtl" }], // 文本方向
+            [{ size: ["12px", false, "16px", "18px", "20px", "30px"] }], // 字体大小
+            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+            [
+              {
+                font: [
+                  false,
+                  "SimSun",
+                  "SimHei",
+                  "Microsoft-YaHei",
+                  "KaiTi",
+                  "FangSong",
+                  "Arial",
+                ],
+              },
+            ], // 字体种类
+            [{ align: [] }], // 对齐方式
+            ["clean"], // 清除文本格式
+            ["link", "image", "video"], // 链接、图片、视频
+          ],
+        },
+      },
     };
   },
   methods: {
@@ -106,6 +154,13 @@ export default {
         id: undefined,
         name: undefined,
         parent: undefined,
+        detail: undefined,
+        fileList: [
+          {
+            name: "info_2.png",
+            url: "https://file-dev.xyyxt.net/oss/images/avatar/20230525/1684981330568/1684981330570_622728660",
+          },
+        ],
       };
       this.clearForm("form");
     },
@@ -128,6 +183,9 @@ export default {
       //   this.isShow = false;
       this.clearForm("form");
     },
+    onEditorChange({ quill, html, text }) {
+      this.form.detail = html;
+    },
   },
   computed: {
     isShow: {
@@ -141,7 +199,7 @@ export default {
     ...mapGetters(["roleList"]),
   },
   created() {},
-  components: { FileUpload },
+  components: { FileUpload, quillEditor },
   watch: {
     dialogVisible: {
       handler(val) {
@@ -158,14 +216,33 @@ export default {
 <style lang="scss" scoped>
 .btns {
   .el-button {
-    margin-top: 20px;
+    margin-top: 30px;
     float: right;
     margin-left: 14px;
   }
 }
+.ql-editor {
+  width: 100%;
+  margin-top: -20px;
+  padding: 0;
+  .ql-container {
+    height: 300px;
+  }
+}
 /deep/ {
   .el-cascader {
     width: 100%;
   }
+  .ql-container {
+    height: 200px;
+  }
+  .editor {
+    .el-form-item__label {
+      height: 20px;
+    }
+    .el-form-item__content {
+      margin: 0 !important;
+    }
+  }
 }
 </style>

src/views/index.vue

@@ -21,12 +21,14 @@
         ></scan>
       </el-col>
     </el-row>
+    <menbet-dlg :dialogVisible="dialogVisible" />
   </div>
 </template>
 <script>
 import scan from "./components/index/scan.vue";
 import goodsList from "./components/index/goodsList.vue";
 import payContain from "./components/index/payContain.vue";
+import MenbetDlg from "./components/index/menbetDlg.vue";
 export default {
   name: "Index",
   data() {
@@ -38,6 +40,7 @@ export default {
         discount: 0,
       },
       inputFocusType: "",
+      dialogVisible: false,
     };
   },
   computed: {},
@@ -70,6 +73,7 @@ export default {
     scan,
     goodsList,
     payContain,
+    MenbetDlg,
   },
 };
 </script>

src/views/report/components/PieChart.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    id="base-echart"
+    class="base-echart"
+    style="width: 100%; height: 244px"
+  ></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener("resize", () => {
+      this.chart.resize();
+    });
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("base-echart"));
+      this.chart.setOption({
+        //你的代码
+        backgroundColor: "#F2F2F7",
+        tooltip: {
+          trigger: "item",
+        },
+        title: [
+          {
+            text: 300,
+            top: "43%",
+            left: "21.5%",
+            textStyle: {
+              color: "#222222",
+              fontSize: 30,
+            },
+          },
+          {
+            text: 300,
+            top: "30.5%",
+            left: "41.3%",
+            textStyle: {
+              color: "#222222",
+              fontSize: 24,
+            },
+          },
+          {
+            text: 300,
+            top: "65%",
+            left: "41.3%",
+            textStyle: {
+              color: "#222222",
+              fontSize: 24,
+            },
+          },
+        ],
+        legend: {
+          left: "40%",
+          top: "20%",
+          orient: "vertical",
+          itemGap: 73,
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
+          icon: "circle",
+          color: "#666666",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [50, 80],
+            center: ["25%", "50%"],
+            roseType: "rotate",
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              {
+                value: 2186,
+                name: "回头客",
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 0,
+                      color: "#4766F1",
+                    },
+                    {
+                      offset: 1,
+                      color: "#6CB4F1",
+                    },
+                  ]),
+                },
+              },
+              {
+                value: 1862,
+                name: "新会员数量",
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 0,
+                      color: "#FA821F",
+                    },
+                    {
+                      offset: 1,
+                      color: "#FA821F",
+                    },
+                  ]),
+                },
+              },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+  beforeDestroy() {
+    document.body.removeEventListener("resize", () => {}, false);
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/report/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <container title="数据报表">
+    <template v-slot:btn>
+      <el-button>导出excel</el-button>
+    </template>
+    <search-box-new
+      :formData="formData"
+      :formList="formList"
+      @search="search"
+      @init="init"
+    />
+    <el-row :gutter="20">
+      <el-col :span="5" v-for="item in list" :key="item.key">
+        <div class="grid-content">
+          <img :src="item.imgUrl" alt="" />
+          <p>232</p>
+          <p>{{ item.lebel }}</p>
+        </div>
+      </el-col>
+      <el-col :span="9"><pie-chart></pie-chart></el-col>
+    </el-row>
+  </container>
+</template>
+
+<script>
+import PieChart from "./components/PieChart.vue";
+export default {
+  name: "SaasMemberRecord",
+
+  data() {
+    return {
+      formList: [
+        {
+          prop: "name",
+          placeholder: "请选择店铺名称",
+          scope: "store",
+        },
+        {
+          prop: "time",
+          placeholder: "请选择日期",
+          scope: "datePickerA",
+        },
+      ],
+      formData: {},
+      list: [
+        {
+          lebel: "会员消费总额",
+          key: "1",
+          imgUrl: require("../../assets/images/icon_use.png"),
+        },
+        {
+          lebel: "订单数量",
+          key: "2",
+          imgUrl: require("../../assets/images/icon_order.png"),
+        },
+        {
+          lebel: "会员数量",
+          key: "3",
+          imgUrl: require("../../assets/images/icon_tember.png"),
+        },
+      ],
+    };
+  },
+
+  mounted() {},
+
+  methods: {
+    search(v) {
+      console.log(this.formData, 789);
+    },
+    init() {
+      this.search();
+    },
+  },
+  components: { PieChart },
+};
+</script>
+
+<style lang="scss" scoped>
+.grid-content {
+  height: 244px;
+  background: #f2f2f7;
+  border-radius: 12px;
+  padding: 24px;
+  box-sizing: border-box;
+  img {
+    margin-left: 50%;
+    margin-bottom: 34px;
+  }
+  p {
+    margin: 0;
+    padding: 0;
+    &:nth-of-type(1) {
+      color: #222222;
+      font-size: 36px;
+      margin-bottom: 4px;
+    }
+    &:nth-of-type(2) {
+      color: #666666;
+      font-size: 16px;
+    }
+  }
+}
+</style>