feat

src/api/order.js

@@ -106,4 +106,8 @@ export const saveOrder = (params) => {
 // 获取骑手预计到达时间
 export const getRiderArriveTime = (params) => {
   return get('app/order/getRiderArriveTime', params);
+}
+// 获取地址列表
+export const getAddressList = (params) => {
+  return get('app/address/getAddressList', params);
 }

src/components/manualCreate.vue

@@ -3,17 +3,25 @@
     <el-form label-position="left" ref="form" :model="form" label-width="100px">
       <div class="moudle-list">
         <div class="moudle">
-          <div class="title">
-            发件地址
+          <div class="title-list">
+            <div @click="sendType = 1" :class=" sendType ? 'title' : 'normal-title'">
+              商家发件
+            </div>
+            <div @click="sendType = 0" :class=" !sendType ? 'title' : 'normal-title'">
+              个人发件
+            </div>
           </div>
-          <el-form-item label="发件门店" required>
-            <el-input size="small" class="input" disabled v-model="form.sendAddress.name"></el-input>
-            <el-button @click="showShop" class="but1 active" type="info">选择门店</el-button>
+
+          <el-form-item :label="sendType ? '发件门店' : '发件人姓名'" required>
+            <el-input v-show="!sendType" size="small" class="input" v-model="form.sendAddress.contact" placeholder="请填写发件人姓名"></el-input>
+            <el-input v-show="sendType" disabled size="small" class="input" v-model="form.sendAddress.name" placeholder="请填写发件门店"></el-input>
+            <el-button v-show="sendType" @click="showShop(1)" class="but1 active" type="info">选择门店</el-button>
+            <el-button v-show="!sendType" @click="showShop(1)" class="but1 active" type="info">常用地址</el-button>
           </el-form-item>
           <el-form-item label="发件人电话" required>
-            <el-input size="small" class="phone-before" v-model="form.sendAddress.phone" placeholder="请填写发件人电话" disabled></el-input>
+            <el-input size="small" class="phone-before" v-model="form.sendAddress.phone" placeholder="请填写发件人电话" :disabled="!!sendType"></el-input>
             <div class="phone-center">~</div>
-            <el-input size="small" class="phone-after" v-model="form.sendAddress.extension" placeholder="分机号" disabled></el-input>
+            <el-input size="small" class="phone-after" v-model="form.sendAddress.extension" placeholder="分机号" :disabled="!!sendType"></el-input>
           </el-form-item>
           <el-form-item label="发件人地址" required>
             <el-input size="small" v-model="form.sendAddress.address" placeholder="请填写/选择发件人地址" disabled>
@@ -21,7 +29,7 @@
             </el-input>
           </el-form-item>
           <el-form-item label="楼号/门牌号">
-            <el-input size="small" v-model="form.sendAddress.street" placeholder="请填写发件人楼号/门牌号" disabled>
+            <el-input size="small" v-model="form.sendAddress.street" placeholder="请填写发件人楼号/门牌号" :disabled="!!sendType">
             </el-input>
           </el-form-item>
         </div>
@@ -32,7 +40,7 @@
           <el-form-item label="收件人姓名" required>
             <el-input size="small" v-model="form.receiptAddress.contact" placeholder="请填写收件人姓名">
             </el-input>
-            <!-- <el-button  class="but1 active" type="info">常用地址</el-button> -->
+            <el-button @click="showShop(2)" class="but1 active" type="info">常用地址</el-button>
           </el-form-item>
           <el-form-item label="收件人电话" required>
             <el-input size="small" class="phone-before" v-model="form.receiptAddress.phone" placeholder="请填写收件人电话"></el-input>
@@ -73,19 +81,19 @@
               <img @click="add()" src="../../static/image/icon_add.png" class="add" alt="" srcset="" />
             </div>
           </el-form-item>
-          <el-form-item label="物品价值">
-            <el-input size="small" v-model="form.productAmount">
+          <el-form-item label="物品价值" required>
+            <el-input size="small" v-model="form.productAmount" placeholder="请输入物品价值！">
               <template slot="append">元</template>
             </el-input>
           </el-form-item>
           <el-form-item label="发单时间">
             <el-button @click="form.takeType = 0" :class="!form.takeType ? 'but active' : 'but'" type="info">立即发单</el-button>
             <el-button @click="form.takeType = 1" :class="form.takeType ? 'but but-r active' : 'but'" type="info">预约发单</el-button>
-            <el-date-picker size="small" v-show="form.takeType === 1" v-model="form.takeTime" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
+            <el-date-picker @change="chooseTime" size="small" v-show="form.takeType === 1" v-model="form.takeTime" type="datetime" placeholder="选择日期时间" default-time="12:00:00" :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
           <el-form-item label="发单备注">
-            <el-input size="small" v-model="form.takeRemark">
+            <el-input type="textarea" size="small" v-model="form.takeRemark" maxlength="20" placeholder="请添加备注信息，最多输入20个字！">
             </el-input>
           </el-form-item>
         </div>
@@ -111,9 +119,9 @@
           <el-button size="medium" type="primary" @click.stop="getData" slot="append" icon="el-icon-search"></el-button>
         </el-input>
         <div class="shop-list">
-          <div @click="curIdx = index" :class=" curIdx === index ? 'shop-item active' : 'shop-item'" v-for="(shop,index) in shopList" :key="index">
+          <div @click="curIdx = index" :class=" curIdx === index ? 'shop-item active' : 'shop-item'" v-for="(shop,index) in addressList" :key="index">
             <div class="name">{{shop.name}}</div>
-            <div class="phone">{{shop.contactName + ' ' + shop.mobile}}</div>
+            <div class="phone">{{shop.contact + ' ' + shop.phone}}</div>
             <div class="address">{{shop.districtName + shop.address}}</div>
           </div>
         </div>
@@ -131,17 +139,18 @@
   </div>
 
 </template>
-
 <script>
 import orderMap from "./orderComponents/orderAMap.vue";
-import { getProductList, getShopList } from "../api/shop.js";
-import { sendValuation, saveOrder } from "../api/order.js";
+import { getProductList } from "../api/shop.js";
+import { sendValuation, saveOrder, getAddressList } from "../api/order.js";
 import sendOrderPopup from "../components/orderComponents/sendOrderPopup.vue";
 export default {
   name: "manualCreate",
   data() {
     return {
       products: [],
+      sendType: 1,
+      addressType: 1,
       form: {
         name: "",
         sendAddress: {
@@ -160,9 +169,12 @@ export default {
         },
         receiptAddress: {
           address: "",
+          contact: "",
+          phone: "",
+          street: "",
         },
         weight: 1,
-        productId: 1,
+        productId: "",
         takeType: 0,
         takeTime: "",
         takeRemark: "",
@@ -170,15 +182,25 @@ export default {
         isWaimai: false,
         createType: 1,
         shopId: this.$store.state.userInfo.shopId,
+        productAmount: "",
       },
       showChooseShop: false,
       showChooseAddress: false,
       loading: false,
       shopList: [],
+      personalList: [],
+      addressList: [],
       searchKey: "",
       curIdx: 0,
-      
       isLoading: false,
+      pickerOptions: {
+        disabledDate(time) {
+          return (
+            time.getTime() > Date.now() + 3600 * 1000 * 24 ||
+            time.getTime() < Date.now() - 3600 * 1000 * 24
+          );
+        },
+      },
     };
   },
   components: {
@@ -188,7 +210,12 @@ export default {
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+    sendType(newVal, oldVal) {
+      this.searchKey = "";
+      this.getData();
+    },
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.getProductList();
@@ -212,33 +239,67 @@ export default {
   activated() {},
   // 方法集合
   methods: {
+    chooseTime(time) {
+      let min = 15; // 多少分钟后发起配送
+      let now = new Date().getTime();
+      let inputTime = new Date(time).getTime();
+      if (inputTime < now + 60 * 1000 * min) {
+        this.$message({
+          type: "error",
+          message: `至少选择${min}分钟后发单！`,
+        });
+        this.form.takeTime = this.$tool.getFormatDate(now + 60 * 1000 * min);
+      } else {
+        this.form.takeTime = this.$tool.getFormatDate(inputTime);
+      }
+    },
     chooseShop() {
       this.showChooseShop = false;
-      let sendAddress = this.shopList[this.curIdx];
-      this.form.shopId = sendAddress.id
+      let sendAddress = this.addressList[this.curIdx];
       Object.keys(this.form.sendAddress).map((v) => {
         this.form.sendAddress[v] = sendAddress[v];
-        this.form.sendAddress.phone = sendAddress.mobile;
-        this.form.sendAddress.contact = sendAddress.contactName;
       });
+      if (!this.sendType) {
+        this.shopId = "";
+      } else {
+        this.form.shopId = sendAddress.id;
+      }
     },
-    showShop() {
+    showShop(addressType) {
+      this.addressType = addressType;
+      if (this.sendType) {
+        this.addressList.forEach((v, index) => {
+          if (v.id === this.form.shopId) {
+            this.curIdx = index;
+          }
+        });
+      }
+      this.getData();
       this.showChooseShop = true;
     },
     getData() {
       this.loading = true;
-      getShopList({ searchKey: this.searchKey }).then((res) => {
+      getAddressList({
+        searchKey: this.searchKey,
+        searchType: this.sendType,
+        addressType: this.addressType,
+      }).then((res) => {
         this.loading = false;
         if (res.code === 200) {
-          this.shopList = res.data;
-          let sendAddress = res.data.filter((v) => {
-            return v.id === this.form.shopId;
-          })[0];
-          Object.keys(this.form.sendAddress).map((v) => {
-            this.form.sendAddress[v] = sendAddress[v];
-            this.form.sendAddress.phone = sendAddress.mobile;
-            this.form.sendAddress.contact = sendAddress.contactName;
-          });
+          if (this.sendType) {
+            this.addressList = res.data.shop;
+            let sendAddress = this.addressList.filter((v) => {
+              return v.id === this.form.shopId;
+            })[0];
+            Object.keys(this.form.sendAddress).map((v) => {
+              this.form.sendAddress[v] = sendAddress[v];
+            });
+          } else {
+            this.addressList = res.data.personal;
+            Object.keys(this.form.sendAddress).map((v) => {
+              this.form.sendAddress[v] = "";
+            });
+          }
         } else {
           this.$message({
             type: "error",
@@ -251,6 +312,7 @@ export default {
       getProductList().then((res) => {
         if (res.code === 200) {
           this.products = res.data;
+          this.form.productId = this.products[0].id;
         } else {
           this.$message({
             type: "error",
@@ -261,6 +323,35 @@ export default {
     },
 
     onSubmit() {
+      // 个人发件
+      if (!this.sendType) {
+        if (
+          !this.form.sendAddress.contact.trim() ||
+          !this.form.sendAddress.phone.trim() ||
+          !this.form.sendAddress.address.trim()
+        ) {
+          return this.$message({
+            type: "error",
+            message: "请先完善个人发件地址信息！",
+          });
+        }
+      }
+      if (
+        !this.form.receiptAddress.contact.trim() ||
+        !this.form.receiptAddress.phone.trim() ||
+        !this.form.receiptAddress.address.trim()
+      ) {
+        return this.$message({
+          type: "error",
+          message: "请先完善收件地址信息！",
+        });
+      }
+      if (!this.form.productAmount.trim()) {
+        return this.$message({
+          type: "error",
+          message: "请先输入物品价值！",
+        });
+      }
       // 预约发单
       if (this.form.takeType) {
         this.form.takeTime = this.$tool.getFormatDate(this.form.takeTime);
@@ -396,6 +487,7 @@ export default {
     font-size: 14px;
     background: #fc7200;
     border: #fc7200;
+    margin-top: -50px;
   }
   /deep/ .el-form {
     display: flex;
@@ -405,10 +497,28 @@ export default {
   /deep/ .el-form-item__label {
     color: #b1b1b1;
   }
+  .title-list {
+    display: flex;
+    align-items: center;
+    .normal-title {
+      color: #999;
+      font-weight: bold;
+      margin: 0 30px 20px 0;
+      cursor: pointer;
+    }
+    .normal-title:before {
+      content: "";
+      display: inline-block;
+      width: 3px;
+      height: 14px;
+      background-color: #999;
+    }
+  }
   .title {
     font-weight: bold;
     color: #333;
-    margin-bottom: 20px;
+    margin: 0 30px 20px 0;
+    cursor: pointer;
   }
   .title:before {
     content: "";