feat:自提点页面

src/pages/Activity/releaseProduc/components/spellOrderSet.vue

@@ -12,20 +12,22 @@
   </div>
   <div>
     <el-card>
-      <span >自提点设置</span>
+      <span>自提点设置</span>
       <el-form ref="form" :model="selfLiftingPoint" label-width="80px">
         <el-form-item>
           <el-input
-          class="set"
+            class="set"
             v-model="selfLiftingPoint"
             placeholder="自提点名称/自提点联系人"
             suffix-icon="el-icon-search"
           ></el-input>
-          <el-button type="primary" @click="dialogFormVisible = true">添加自提点</el-button>
+          <el-button type="primary" @click="dialogFormVisible = true"
+            >添加自提点</el-button
+          >
         </el-form-item>
-          <span class="checked">已选</span>
+        <span class="checked">已选</span>
         <el-table
-        class="tabList"
+          class="tabList"
           ref="multipleTable"
           :data="tableData"
           border
@@ -87,22 +89,54 @@
         </el-table>
       </el-form>
       <!-- 添加自提点 -->
-      <el-dialog title="添加自提点" v-model="dialogFormVisible">
-  <el-form :model="form">
-    <el-form-item label="自提点名称" :label-width="formLabelWidth">
-      <el-input v-model="form.name" autocomplete="off"></el-input>
-    </el-form-item>
-    <el-form-item label="位置" :label-width="formLabelWidth">
-      <el-input v-model="form.name" placeholder=""></el-input>
-    </el-form-item>
-  </el-form>
-  <template #footer>
-    <span class="dialog-footer">
-      <el-button @click="dialogFormVisible = false">取 消</el-button>
-      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
-    </span>
-  </template>
-</el-dialog>
+      <el-dialog
+        title="添加自提点"
+        v-model="dialogFormVisible"
+        :show-close="false"
+      >
+        <el-form style="margin-left: 70px" :model="form">
+          <el-form-item label="自提点名称" :label-width="formLabelWidth">
+            <el-input
+              class="dialog-input"
+              v-model="form.name"
+              maxlength="30"
+              show-word-limit
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="位置" :label-width="formLabelWidth">
+            <el-input
+              class="dialog-input"
+              v-model="form.location"
+              placeholder=""
+            ></el-input>
+            <a href="javascript:;" style="margin-left: 30px">从高德获取坐标</a>
+          </el-form-item>
+          <p class="location">北京市朝阳区酒仙桥9号恒通国际创新园</p>
+          <el-form-item label="详细地址" :label-width="formLabelWidth">
+            <el-input class="dialog-input" v-model="model"></el-input>
+          </el-form-item>
+          <el-form-item label="自提点联系人" :label-width="formLabelWidth">
+            <el-input
+              class="dialog-input"
+              v-model="model"
+              maxlength="30"
+              show-word-limit
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" :label-width="formLabelWidth">
+            <el-input class="dialog-input" v-model="model"></el-input>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button type="primary" @click="dialogFormVisible = false"
+              >保 存</el-button
+            >
+            <el-button @click="dialogFormVisible = false">取 消</el-button>
+          </span>
+        </template>
+      </el-dialog>
     </el-card>
   </div>
 </template>
@@ -119,6 +153,9 @@ export default {
       selfLiftingPoint: "",
       tableData: [],
       multipleSelection: [],
+      dialogFormVisible: false,
+      formLabelWidth: "120px",
+      form: {},
     };
   },
   methods: {
@@ -136,18 +173,29 @@ export default {
   margin: 50px 0;
 }
 .set {
-    width: 50%;
-    margin-top: 40px;
-  }
-  .el-button {
-    margin-left: 30px;
-  }
-  .tabList {
-    margin-top: 10px;
-    margin-left: 75px;
-  }
-  .checked {
-    margin-left: 80px;
-
-  }
-</style>
+  width: 50%;
+  margin-top: 40px;
+}
+.el-button {
+  margin-left: 30px;
+}
+.tabList {
+  margin-top: 10px;
+  margin-left: 75px;
+}
+.checked {
+  margin-left: 80px;
+}
+.dialog-input {
+  width: 50%;
+}
+.location {
+  margin-bottom: 10px;
+  margin-left: 14%;
+}
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style> 

src/router/Activity/index.js

@@ -18,6 +18,11 @@
       name: "releaseProduc",
       component: () => import(/* webpackChunkName: "activity" */ "@/pages/Activity/releaseProduc")
     },
+    {
+      path: "/op/activity/releaseProduc/spellOrderSet",
+      name: "spellOrderSet",
+      component: () => import(/* webpackChunkName: "activity" */ "@/pages/Activity/releaseProduc/components/spellOrderSet")
+    },
    
   ];