feat: 添加配送路线发送邮箱

src/components/Dialog/YDDialoag.vue

+<template>
+  <div class="YDDialog">
+    <el-dialog
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      :width="dialogWidth"
+      :show-close="showDialogClose"
+      :before-close="handleClose"
+      :top="dialogMarginTop"
+      :modal="dialogModel"
+      :close-on-click-modal="dialogCloseOnClickModal"
+      :close-on-press-escape="dialogCloseOnPressEscape"
+      :center="dialogCenter"
+    >
+      <slot></slot>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button v-show="isShowCancelButton" @click="cancel">{{
+            cancelButtonText
+          }}</el-button>
+          <el-button
+            v-show="isShowConfirmButton"
+            type="primary"
+            @click="cofirm"
+            >{{ confirmButtonText }}</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // 标题
+    dialogTitle: {
+      type: String,
+      default: "标题"
+    },
+    // dialog 显示控制
+    myDialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    // 确认button文案
+    confirmButtonText: {
+      type: String,
+      default: "确 定"
+    },
+    // 取消button文案
+    cancelButtonText: {
+      type: String,
+      default: "取 消"
+    },
+    // 宽度
+    dialogWidth: {
+      type: String,
+      default: "50%"
+    },
+    // 距离顶部的margin
+    dialogMarginTop: {
+      type: String,
+      default: "15vh"
+    },
+    // 是否需要遮罩层
+    dialogModel: {
+      type: Boolean,
+      default: true
+    },
+    // 点击遮罩层是否关闭dialog
+    dialogCloseOnClickModal: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示关闭（右上角X）
+    showDialogClose: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展示确定按钮
+    isShowConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    // 是否展示取消按钮
+    isShowCancelButton: {
+      type: Boolean,
+      default: true
+    },
+    // 点击esc是否关闭
+    dialogCloseOnPressEscape: {
+      type: Boolean,
+      default: false
+    },
+    // 底部按钮是否居中显示
+    dialogCenter: {
+      type: Boolean,
+      default: false
+    },
+    // cancelDialog 方法名称
+    cancelDialogMethodName: {
+      type: String,
+      default: "dialogCancel"
+    },
+    // confirmDialog 方法名称
+    confirmDialogMethodName: {
+      type: String,
+      default: "dialogConfirm"
+    }
+  },
+  data() {
+    return {
+      dialogVisible: this.myDialogVisible
+    };
+  },
+
+  watch: {
+    myDialogVisible(newVal) {
+      this.dialogVisible = newVal;
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit(this.cancelDialogMethodName);
+    },
+    cofirm() {
+      this.$emit(this.confirmDialogMethodName);
+    }
+  }
+};
+</script>
+<style lang="less" scoped></style>

src/pages/Groupmeal/Distrib/index.vue

@@ -29,7 +29,7 @@
           width="width"
         >
           <template #default="scope">
-            {{ scope.row.list.map((item) => item.deliverer_name).join("、") }}
+            {{ scope.row.list.map(item => item.deliverer_name).join("、") }}
           </template>
         </el-table-column>
         <el-table-column prop="prop" label="操作" width="width" align="center">
@@ -198,9 +198,60 @@
         </template>
       </el-dialog>
     </el-card>
+    <!-- 发送邮件的dialog -->
+    <YDDialog
+      dialogTitle="下载配送路线"
+      cancelButtonText="关闭"
+      :dialogCenter="true"
+      :myDialogVisible="sendEmailDialogVisible"
+      cancelDialogMethodName="sendEmailDialogCancel"
+      confirmDialogMethodName="sendEmailDialogConfirm"
+      @sendEmailDialogCancel="sendEmailDialogCancel"
+      @sendEmailDialogConfirm="sendEmailDialogConfirm"
+    >
+      <div class="emailContent">
+        <p>
+          生成配送路线大概需要两分钟，生成完毕后会发送到您的邮箱，请填写接受邮箱（一点邮箱）
+        </p>
+        <div class="emialInputWrapper">
+          <el-input
+            class="myInput"
+            v-model="myEmialInput"
+            placeholder="请输入邮箱地址"
+            :class="{
+              myInputRequire: isEmailRequire,
+              myInputError: emialHasError
+            }"
+          ></el-input>
+          <span>@yidian-inc.com</span>
+        </div>
+      </div>
+    </YDDialog>
+    <!-- 显示email发送情况的列表 -->
+    <YDDialog
+      dialogTitle="发送记录"
+      cancelButtonText="关闭"
+      :dialogCenter="true"
+      :isShowConfirmButton="false"
+      :myDialogVisible="showEmailTableDialogVisible"
+      cancelDialogMethodName="showEmailDialogCancel"
+      @showEmailDialogCancel="showEmailDialogCancel"
+    >
+      <div class="emailListContent">
+        <el-table :data="emailListTableData" style="width: 100%">
+          <el-table-column prop="email" label="接收邮箱" width="180">
+          </el-table-column>
+          <el-table-column prop="sendTime" label="发送时间" width="180">
+          </el-table-column>
+          <el-table-column prop="status" label="状态"> </el-table-column>
+        </el-table>
+      </div>
+    </YDDialog>
   </Layout>
 </template>
 <script>
+import { checkEmailName } from "../../../utils/tools.js";
+import YDDialog from "../../../components/Dialog/YDDialoag.vue";
 import Layout from "../layout/index.vue";
 import Pagination from "../components/Pagination/index.vue";
 import {
@@ -208,7 +259,7 @@ import {
   getList,
   getSaveDeliverer,
   getAddDeliverer,
-  getMarketingList,
+  getMarketingList
 } from "../../../service/Groupmeal/groupmeal";
 import { ElMessage } from "element-plus";
 export default {
@@ -216,18 +267,47 @@ export default {
   components: {
     Layout,
     Pagination,
+    YDDialog
   },
   data() {
     return {
+      sendEmailDialogVisible: false, // 发送email弹窗
+      myEmialInput: "", // email地址
+      isEmailRequire: false, // 验证emial非空
+      emialHasError: false, // 验证email格式
+      showEmailTableDialogVisible: true, // 展示email发送情况的dialog
+      emailListTableData: [
+        {
+          email: "2016-05-02",
+          sendTime: "王小虎",
+          status: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          email: "2016-05-02",
+          sendTime: "王小虎",
+          status: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          email: "2016-05-02",
+          sendTime: "王小虎",
+          status: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          email: "2016-05-02",
+          sendTime: "王小虎",
+          status: "上海市普陀区金沙江路 1518 弄"
+        }
+      ],
+
       rules: {
         name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
         max_capacity: [
-          { required: true, message: "请填写配送上限", trigger: "blur" },
+          { required: true, message: "请填写配送上限", trigger: "blur" }
           //   { type: "number", message: "请填写数值哦", trigger: "change" },
         ],
         min_capacity: [
-          { type: "number", message: "请填写数值哦", trigger: "change" },
-        ],
+          { type: "number", message: "请填写数值哦", trigger: "change" }
+        ]
       },
       dialogFormAdd: false,
       //   列表
@@ -237,7 +317,7 @@ export default {
         name: "",
         max_capacity: "", //配送上限
         min_capacity: "", //最小配送量
-        tool_type: [], //配送工具
+        tool_type: [] //配送工具
       },
       //分配配送员弹框
       dialogFormAssign: false,
@@ -248,7 +328,7 @@ export default {
       page: 1,
       pageSize: 20,
       isEdit: false,
-      marketingList: [],
+      marketingList: []
     };
   },
   created() {
@@ -272,7 +352,7 @@ export default {
         name: "",
         max_capacity: "", //配送上限
         min_capacity: "", //最小配送量
-        tool_type: [], //配送工具
+        tool_type: [] //配送工具
       }),
         (this.deliverer = []),
         (this.multipleSelection = []);
@@ -283,7 +363,7 @@ export default {
       const { page, pageSize } = this;
       const params = {
         page,
-        pageSize,
+        pageSize
       };
       try {
         const res = await getList(params);
@@ -306,7 +386,7 @@ export default {
         name,
         max_capacity: +max_capacity,
         min_capacity: +min_capacity,
-        tool_type: +tool_type,
+        tool_type: +tool_type
       };
       try {
         const { code, reason } = await getAddDeliverer(params);
@@ -318,7 +398,7 @@ export default {
           name: "",
           max_capacity: "", //配送上限
           min_capacity: "", //最小配送量
-          tool_type: [], //配送工具
+          tool_type: [] //配送工具
         };
       } catch (error) {
         ElMessage("请求添加配送员失败");
@@ -350,7 +430,7 @@ export default {
         this.getList();
         this.$nextTick(() => {
           this.$refs.multipleTable.clearSelection();
-          this.deliverer.forEach((row) => {
+          this.deliverer.forEach(row => {
             if (row.checked) {
               this.$refs.multipleTable.toggleRowSelection(row, true);
             }
@@ -374,13 +454,13 @@ export default {
     // 分配保存
     async save() {
       const { selectActivity, multipleSelection } = this;
-      const uids = multipleSelection.map((item) => item.deliverer_id);
+      const uids = multipleSelection.map(item => item.deliverer_id);
       if (!selectActivity) return ElMessage("请选择活动姓名");
       // if (!uids.length) return this.$message.info("请至少选择一名骑手");
       try {
         const { code, reason } = await getSaveDeliverer({
           code: selectActivity,
-          uids: uids.join(","),
+          uids: uids.join(",")
         });
         if (code !== 0)
           return this.$message.error(
@@ -405,10 +485,10 @@ export default {
     async getMarketingList() {
       try {
         const res = await getMarketingList();
-        this.marketingList = res.result.map((item) => {
+        this.marketingList = res.result.map(item => {
           return {
             value: item.marketing_id,
-            label: item.marketing_name,
+            label: item.marketing_name
           };
         });
       } catch (error) {
@@ -426,8 +506,62 @@ export default {
         console.log(error);
       }
     },
-  },
+    /*  邮箱弹窗相关操作  */
+    // 取消
+    sendEmailDialogCancel() {
+      this.sendEmailDialogVisible = false;
+      this.myEmialInput = ""; // 清空输入
+      this.isEmailRequire = false;
+      this.emialHasError = false;
+    },
+    // 确认
+    sendEmailDialogConfirm() {
+      if (this.myEmialInput.trim() === "") {
+        this.isEmailRequire = true;
+        return;
+      }
+      if (!checkEmailName(this.myEmialInput)) {
+        this.emialHasError = true;
+        return;
+      }
+      this.sendEmailDialogVisible = false;
+      this.myEmialInput = ""; // 清空输入
+      this.isEmailRequire = false;
+      this.emialHasError = false;
+    },
+    //带emailtable的dialog
+    showEmailDialogCancel() {
+      this.showEmailTableDialogVisible = false;
+    }
+  }
 };
 </script>
-<style lang="less" src="./index.less" scope>
-</style>
+<style lang="less" src="./index.less" scope></style>
+<style lang="less" scoped>
\ No newline at end of file
+// 邮箱dialog
+.emailContent {
+  .emialInputWrapper {
+    display: flex;
+    align-items: center;
+    margin: 15px 0;
+    .myInput {
+      width: 50%;
+    }
+    .myInputRequire::after {
+      content: "输入不能为空";
+      position: absolute;
+      left: 2px;
+      top: 35px;
+      color: red;
+    }
+    // 验证emial非空
+    .myInputError::after {
+      content: "输入邮箱不合法";
+      position: absolute;
+      left: 2px;
+      top: 35px;
+      color: red;
+    }
+  }
+}
+</style>

src/pages/Groupmeal/orderManagement/index.vue

@@ -157,8 +157,8 @@
                   @click="refund(scope.row)"
                   v-show="
                     scope.row.order_status == '2' ||
-                    scope.row.order_status == '6' ||
-                    scope.row.order_status == '8'
+                      scope.row.order_status == '6' ||
+                      scope.row.order_status == '8'
                   "
                   >退款</el-button
                 >
@@ -245,8 +245,8 @@
                   @click="refund(scope.row)"
                   v-show="
                     scope.row.order_status == '2' ||
-                    scope.row.order_status == '6' ||
-                    scope.row.order_status == '8'
+                      scope.row.order_status == '6' ||
+                      scope.row.order_status == '8'
                   "
                   >退款</el-button
                 >
@@ -374,7 +374,7 @@ import {
   orderItemList,
   orderRefundReject,
   refundOrder,
-  getOrderExportURL,
+  getOrderExportURL
 } from "@/service/Groupmeal/groupmeal";
 // import page from "../../components/Pagination.vue";
 import page from "../components/Pagination/index.vue";
@@ -383,7 +383,7 @@ export default {
   name: "orderManagement",
   components: {
     Layout,
-    page,
+    page
   },
   data() {
     return {
@@ -396,7 +396,7 @@ export default {
         goods_id: "", // 商品名称
         cust_user: "", // 收货人
         order_id: "", // 订单编号
-        sub_shop_id: "", // 自提点
+        sub_shop_id: "" // 自提点
       },
       // 下拉框数据
       // 活动名称
@@ -405,36 +405,36 @@ export default {
       orderStatusArr: [
         {
           value: "0",
-          label: "全部",
+          label: "全部"
         },
         {
           value: "1",
-          label: "未支付",
+          label: "未支付"
         },
         {
           value: "2",
-          label: "已支付",
+          label: "已支付"
         },
         {
           value: "3",
-          label: "待退款",
+          label: "待退款"
         },
         {
           value: "4",
-          label: "已退款",
+          label: "已退款"
         },
         {
           value: "5",
-          label: "退款中",
+          label: "退款中"
         },
         {
           value: "6",
-          label: "已拒绝",
+          label: "已拒绝"
         },
         {
           value: "7",
-          label: "售后",
-        },
+          label: "售后"
+        }
       ],
       // 商品名称
       tradeNameArr: [],
@@ -472,9 +472,9 @@ export default {
           payment: "", // 实付
           refundableQuantity: "",
           refundAmount: "",
-          amountToRefund: "",
-        },
-      ],
+          amountToRefund: ""
+        }
+      ]
     };
   },
 
@@ -487,7 +487,7 @@ export default {
     },
     exportURL3() {
       return getOrderExportURL(this.orderQueryObj.marketing_id, "3");
-    },
+    }
   },
 
   methods: {
@@ -510,23 +510,23 @@ export default {
     async activityNameSel(val) {
       this.orderQueryObj.goods_id = "";
       const params = {
-        marketing_id: val,
+        marketing_id: val
       };
       const res = await getGoodsList(params); // 商品名称
-      this.getSubShopListMet(val) //自提点
+      this.getSubShopListMet(val); //自提点
       // const res = await getSubShopList(params);
       this.tradeNameArr = res.result;
-    //  this.selLiftPoinArr = res.result;
+      //  this.selLiftPoinArr = res.result;
     },
 
     // 获取自提点
     async getSubShopListMet(params) {
       try {
-        let marketing_id = ''
-        if(params){
-           marketing_id = params
+        let marketing_id = "";
+        if (params) {
+          marketing_id = params;
         }
-        const res = await getSubShopList({'marketing_id':marketing_id});
+        const res = await getSubShopList({ marketing_id: marketing_id });
         this.selLiftPoinArr = res.result;
       } catch (error) {
         this.$message.error("发生未知错误,请稍后再试一下吧~~~");
@@ -576,7 +576,7 @@ export default {
       const params = {
         marketing_id: this.orderQueryObj.marketing_id,
         // marketing_id: "1NJETU",
-        force_print: forcePrint ? "1" : "",
+        force_print: forcePrint ? "1" : ""
       };
       const res = await orderPrint(params);
       return res;
@@ -593,7 +593,7 @@ export default {
       if (res.code === 0) {
         this.$message({
           type: "success",
-          message: "打印成功",
+          message: "打印成功"
         });
         return;
       }
@@ -611,7 +611,7 @@ export default {
         try {
           await this.$confirm(res.reason, "打印", {
             cancelButtonText: "取消",
-            confirmButtonText: "确定",
+            confirmButtonText: "确定"
           });
         } catch (e) {
           // 取消
@@ -652,21 +652,21 @@ export default {
       try {
         await this.$confirm("确定要拒绝退款么?", "拒绝", {
           cancelButtonText: "取消",
-          confirmButtonText: "确定",
+          confirmButtonText: "确定"
         });
       } catch (e) {
         // 取消
         return;
       }
       const params = {
-        order_id: val.order_id,
+        order_id: val.order_id
       };
       const res = await orderRefundReject(params);
 
       if (res.code === 0) {
         this.$message({
           type: "success",
-          message: "订单已驳回",
+          message: "订单已驳回"
         });
       } else {
         this.$message.error(res.reason);
@@ -693,7 +693,7 @@ export default {
       this.checkAll = false;
       this.refundGoods = [];
       const params = {
-        order_id: val.order_id,
+        order_id: val.order_id
       };
       const res = await orderItemList(params);
       this.refundGoods = res.result;
@@ -720,15 +720,15 @@ export default {
         return this.refundGoods.filter(isSelected);
       };
 
-      const convertToNumber = (str) => {
+      const convertToNumber = str => {
         return !Number.isNaN(parseFloat(str)) ? parseFloat(str) : 0;
       };
 
-      const processRefundItem = (item) => {
+      const processRefundItem = item => {
         return {
           order_item_id: item.order_item_id,
           refund_num: item.refundableQuantity || 0,
-          refund_amount: convertToNumber(item.amountToRefund),
+          refund_amount: convertToNumber(item.amountToRefund)
         };
       };
 
@@ -754,23 +754,22 @@ export default {
       }
       // this.refundShow = false;
       this.$message.error(res.reason);
-    },
+    }
   },
   created() {
     this.getMarketingListMet(); // 活动名称
-    this.getSubShopListMet();   // 自提点
-    this.getOrderListMet();    // table列表
-  },
+    this.getSubShopListMet(); // 自提点
+    this.getOrderListMet(); // table列表
+  }
 };
 </script>
 
 <style lang="less" src="./index.less" scope></style>
 <style lang="less" scoped>
-.check-wrap{
-    /deep/ .el-checkbox__label {
-      white-space: normal;
-      word-break: break-all;
-}
-  
+.check-wrap {
+  /deep/ .el-checkbox__label {
+    white-space: normal;
+    word-break: break-all;
+  }
 }
 </style>

src/utils/tools.js

+//验证邮箱合法性 （验证头部信息）
+export const checkEmailName = emailName => {
+  let str = /[a-zA-Z0-9_-]+/;
+  if (str.test(emailName)) {
+    return false;
+  } else {
+    return true;
+  }
+};

vue.config.js

-const path = require('path');
+const path = require("path");
 
-const isDev = process.env.NODE_ENV === 'development';
+const isDev = process.env.NODE_ENV === "development";
 
 module.exports = {
-  outputDir: isDev
-    ? './dist'
-    : path.resolve('./public/dist/'),
-  publicPath: isDev ? '/' : '/dist',
+  outputDir: isDev ? "./dist" : path.resolve("./public/dist/"),
+  publicPath: isDev ? "/" : "/dist",
   configureWebpack: {
     devServer: {
-      proxy: 'http://localhost:8055',
+      proxy: "http://127.0.0.1:8055",
       hot: true,
-      disableHostCheck: true,
-    },
+      disableHostCheck: true
+    }
   },
   chainWebpack: config => {
     // 默认不开启 prefetch
-    config.plugins.delete('prefetch');
+    config.plugins.delete("prefetch");
 
     // 默认不开启 preload
-    config.plugins.delete('preload');
+    config.plugins.delete("preload");
 
     // 修改页面 title
-    config.plugin('html').tap(args => {
-      args[0].title = '运营管理系统';
+    config.plugin("html").tap(args => {
+      args[0].title = "运营管理系统";
       return args;
     });
-  },
+  }
 };