订单页面

package.json

@@ -53,6 +53,7 @@
     "vue-okr-tree": "^1.0.10",
     "vue-print-nb": "^1.7.5",
     "vue-qr": "^4.0.6",
+    "vue-qriously": "^1.1.1",
     "vue-router": "3.0.1",
     "vuedraggable": "2.15.0",
     "vuex": "3.0.1",

src/api/mdp/sys/order.js

@@ -3,4 +3,7 @@ import config from '@/common/config'
 let base = config.getSysBasePath();
 
 export const createOrder = params => { return axios.post(`${base}/mdp/mo/moOrder/create`, params) };
+export const createFlagShipOrder = params => { return axios.post(`${base}/mdp/mo/moOrderFligship/add`, params) };
+
+
 

src/views/login/index.scss

@@ -3,7 +3,8 @@
     height: 100%;
     overflow: hidden;
     position: relative;
-    background-image: linear-gradient(rgb(28,166,251), rgb(78,90,242));
+    background-image: linear-gradient(#0c8ff4, #5555f0);
+    // background-image: url('@/assets/image/login_bg2.png');
     display: flex;
     align-items: center;
     justify-content: center;

src/views/order/createOrder.vue

@@ -75,11 +75,13 @@
        width="350px"
      >
       <qriously :value="codeUrl" :size="300" />
+      
+
     </el-dialog>
 
   </div>
 </template>
-
+    
 <script>
 import {createOrder} from '@/api/mdp/sys/order'
 import {aliPay, weixinPay, checkWxPayStatus} from '@/api/mdp/pay/pay'
@@ -176,7 +178,7 @@ export default {
     //查询订单支付状态
     queryOrderStatus(orderId) {
       console.log("查询订单");
-      checkWxPayStatus({'orderId': orderId}).then(res => {
+      checkWxPayStatus({'orderId': orderId, "otype": "1"}).then(res => {
         if(res.data.tips.isOk) {
           this.$router.push({path:'/my/order/paySuccess', query:{total_amount: this.data.amount, out_trade_no: orderId}});
           clearInterval(this.timer);

src/views/order/enterprise.vue

@@ -35,7 +35,7 @@
       </div>
     </div>        
 
-    <div class="buy_count">
+    <!-- <div class="buy_count">
       <h2>
         购买数量
         <span>(购买账号不能少于10人)</span>
@@ -51,7 +51,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <div class="buy_date">
       <h2>期限选择</h2>
@@ -360,7 +360,7 @@ export default {
       });
     },
 
-    selectBuyDate(item) {
+    selectBuyDate(item) {   
       this.form.usetime = item.val;
       this.useTimeOptions.forEach(element => {
         element.isChecked = false;
@@ -377,12 +377,10 @@ export default {
       let oa = this.menus.oa.filter(res => {return res.isChecked ==  true;})
       let mall = this.menus.mall.filter(res => {return res.isChecked ==  true;})
       tempData = Array.concat(xm).concat(oa).concat(mall);
-
       let obj = {
         data: tempData,
         ...this.form
       }
-
       return obj;
     },
 

src/views/order/flagShip.vue

@@ -40,6 +40,17 @@
 <script>
 export default {
     data() {
+        // 自定义验证
+        const validPhone = (rule, value, callback) => {
+            const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
+            if (!value) {
+                callback(new Error('请输入电话号码'))
+            } else if (!reg.test(value)) { //判断用户输入的值是否符合规则
+                callback(new Error('请输入正确的11位手机号码'))
+            } else {
+                callback()
+            }
+        }
         return {
             usePeopleOptions: [
                 {
@@ -92,7 +103,7 @@ export default {
                     { required: true, message: '请输入联系人', trigger: 'blur' },
                 ],
                 phone: [
-                    { required: true, message: '请输入联系电话', trigger: 'blur' },
+                    { required: true, trigger: 'blur', validator: validPhone }
                 ],
                 usePeoples: [
                     { required: true, message: '请选择使用人数', trigger: 'blur' },
@@ -117,9 +128,12 @@ export default {
                 });
             })
         },
-
-
-
+        clearForm() {
+            this.form.phone = "";
+            this.form.contacts = "";
+            this.form.usePeoples = "";
+            this.form.needs = [];
+        }
     },
 
 

src/views/order/index.vue

@@ -33,7 +33,7 @@
           <enterprise ref="enterprise" :menus="menus" v-if="currentSelectVersion == '企业版'"></enterprise>
         </div>
 
-        <el-button @click="submitOrder" size="larget" class="submit" type="primary">
+        <el-button :loading="submitLoading" @click="submitOrder" size="larget" class="submit" type="primary">
           {{currentSelectVersion == '企业版' ? '提交订单' : '提交信息'}}
         </el-button>
       </div>
@@ -52,7 +52,7 @@ import Enterprise from './enterprise'
 import orderSkeleton from './components/orderSkeleton'
 import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules'
 import {modulesOfIcon} from "@/components/ModulesMenu/modulesOfIcon";
-
+import {createFlagShipOrder} from '@/api/mdp/sys/order';
 
 export default {
   components: {FlagShip, Enterprise, orderSkeleton},
@@ -75,6 +75,7 @@ export default {
       currentSelectVersion: '企业版',
       menuLoading: false,
       menus: null,
+      submitLoading: false,
     }
   },
 
@@ -126,9 +127,23 @@ export default {
       }else {
         let flagData = this.$refs.flagship.getForm();
         flagData.then((res) => {
-          console.log(res, "res-->");
-
+          //创建订单
+          res.needs = JSON.stringify(res.needs);
+          this.submitLoading = true;
+          createFlagShipOrder(res).then(res => {
+            if(res.data.tips.isOk){
+              this.$message.success("信息已提交，稍后我们将会联系您");
+              this.$refs.flagship.clearForm();
+            }else{
+              this.$message.error(res.data.tips.msg);
+            }
+          }).catch(err => {
+            this.$message.error(err.msg);
+          }).finally(() => {
+            this.submitLoading = false;
+          })
         }).catch(err => {
+
         })
 
       }