bugfix 手动发单

src/components/manualCreate.vue

@@ -5,22 +5,22 @@
         <div class="title">
           发件地址
         </div>
-        <el-form-item label="发件门店">
-          <el-input class="input" v-model="form.name"></el-input>
-          <el-button class="but1" type="info">选择门店</el-button>
+        <el-form-item label="发件门店" required>
+          <el-input size="small" class="input" disabled v-model="form.name"></el-input>
+          <el-button class="but1 active" type="info">选择门店</el-button>
         </el-form-item>
-        <el-form-item label="发件人电话">
-          <el-input v-model="form.name"></el-input>
-          <div>~</div>
-          <el-input v-model="form.name"></el-input>
+        <el-form-item label="发件人电话" required>
+          <el-input size="small" class="phone-before" v-model="form.name" placeholder="请填写发件人电话" disabled></el-input>
+          <div class="phone-center">~</div>
+          <el-input size="small" class="phone-after" v-model="form.name" disabled></el-input>
         </el-form-item>
-        <el-form-item label="发件人地址">
-          <el-input v-model="form.name">
+        <el-form-item label="发件人地址" required>
+          <el-input size="small" v-model="form.name" placeholder="请填写/选择发件人地址" disabled>
             <el-image @click="showMap" slot="append" class="map" src="../../static/image/icon_map.png"></el-image>
           </el-input>
         </el-form-item>
         <el-form-item label="楼号/门牌号">
-          <el-input v-model="form.name">
+          <el-input size="small" v-model="form.name" placeholder="请填写发件人楼号/门牌号" disabled>
           </el-input>
         </el-form-item>
       </div>
@@ -28,23 +28,23 @@
         <div class="title">
           收件地址
         </div>
-        <el-form-item label="收件人姓名">
-          <el-input v-model="form.name">
+        <el-form-item label="收件人姓名" required>
+          <el-input size="small" v-model="form.name" placeholder="请填写收件人姓名">
           </el-input>
-          <el-button class="but1" type="info">常用地址</el-button>
+          <el-button class="but1 active" type="info">常用地址</el-button>
         </el-form-item>
-        <el-form-item label="收件人电话">
-          <el-input v-model="form.name"></el-input>
-          <div>~</div>
-          <el-input v-model="form.name"></el-input>
+        <el-form-item label="收件人电话" required>
+          <el-input size="small" class="phone-before" v-model="form.name" placeholder="请填写收件人电话"></el-input>
+          <div class="phone-center">~</div>
+          <el-input size="small" class="phone-after" v-model="form.name"></el-input>
         </el-form-item>
-        <el-form-item label="收件人地址">
-          <el-input v-model="form.name">
+        <el-form-item label="收件人地址" required>
+          <el-input size="small" v-model="form.name" placeholder="请填写/选择收件人地址">
             <el-image @click="showMap" slot="append" class="map" src="../../static/image/icon_map.png"></el-image>
           </el-input>
         </el-form-item>
         <el-form-item label="楼号/门牌号">
-          <el-input v-model="form.name">
+          <el-input size="small" v-model="form.name" placeholder="请填写发件人楼号/门牌号">
           </el-input>
         </el-form-item>
       </div>
@@ -52,7 +52,7 @@
         <div class="title">
           物品信息
         </div>
-        <el-form-item label="物品类型" label-width="103px">
+        <el-form-item label="物品类型" required>
           <div class="category_box">
             <div class="item" :class="form.categoryId == item.id ? 'active':''" v-for="(item,i) in products" :key="i" @click="$set(form,'categoryId',item.id)">
               {{item.name}}
@@ -67,17 +67,18 @@
           </div>
         </el-form-item>
         <el-form-item label="物品价值">
-          <el-input v-model="form.name">
+          <el-input size="small" v-model="form.name">
+            <template slot="append">元</template>
           </el-input>
         </el-form-item>
         <el-form-item label="发单时间">
-          <el-button class="but" type="info">立即发单</el-button>
+          <el-button class="but active" type="info">立即发单</el-button>
           <el-button class="but" type="info">预约发单</el-button>
-          <el-input v-model="form.name">
+          <el-input size="small" v-model="form.name">
           </el-input>
         </el-form-item>
         <el-form-item label="发单备注">
-          <el-input v-model="form.name">
+          <el-input size="small" v-model="form.name">
           </el-input>
         </el-form-item>
       </div>
@@ -86,17 +87,17 @@
           发票信息
         </div>
         <el-form-item label="发票抬头">
-          <el-input v-model="form.name">
+          <el-input size="small" v-model="form.name">
           </el-input>
         </el-form-item>
         <el-form-item label="发票税号">
-          <el-input v-model="form.name">
+          <el-input size="small" v-model="form.name">
           </el-input>
         </el-form-item>
 
       </div>
       <!-- <el-form-item>
-        <el-button type="primary" @click="onSubmit">去结算</el-button>
+        <el-button size="small" type="primary" @click="onSubmit">去结算</el-button>
       </el-form-item> -->
     </el-form>
   </div>
@@ -104,12 +105,12 @@
 </template>
 
 <script>
-import { getProductList } from '../'
+import { getProductList } from "../api/shop.js";
 export default {
   name: "manualCreate",
   data() {
     return {
-      products:[],
+      products: [],
       form: {
         name: "",
         region: "",
@@ -128,15 +129,28 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    onSubmit() {
-      console.log("submit!");
+    getProductList() {
+      getProductList().then((res) => {
+        if (res.code === 200) {
+          this.products = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
-    showMap(){
 
+    onSubmit() {
+      console.log("submit!");
     },
+    showMap() {},
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.getProductList();
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   // 生命周期 - 创建之前
@@ -164,7 +178,45 @@ export default {
   background: #fff;
   .moudle {
     width: 600px;
-    margin: 0 100px 100px 0;
+    margin: 0 100px 50px 0;
+    .category_box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      margin-top: -10px;
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 92px;
+        height: 30px;
+        margin: 10px 10px 0 0;
+        background: #f4f4f4;
+        border-radius: 2px;
+        cursor: pointer;
+
+        &.active {
+          color: #ffffff;
+          background: #fc7200;
+          border-color: #fc7200 !important;
+        }
+      }
+    }
+    .phone-before {
+      width: 50%;
+    }
+    .phone-center {
+      margin: 0 15px;
+    }
+    .phone-after {
+      width: 10%;
+    }
+    .map {
+      height: 25px;
+      width: 25px;
+      cursor: pointer;
+    }
   }
   /deep/ .el-form {
     display: flex;
@@ -180,13 +232,32 @@ export default {
     margin-bottom: 20px;
   }
   .but {
-    margin-right: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 20px;
+    height: 32px;
+    &.active {
+      color: #ffffff;
+      background: #fc7200;
+      border-color: #fc7200 !important;
+    }
   }
   .but1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     margin-left: 100px;
+    height: 32px;
+    &.active {
+      color: #ffffff;
+      background: #fc7200;
+      border-color: #fc7200 !important;
+    }
   }
   /deep/ .el-form-item__content {
     display: flex;
+    align-items: center;
   }
   .printer-num {
     display: flex;