diff --git a/config/index.js b/config/index.js
index dc6777d2..029c2cfb 100644
--- a/config/index.js
+++ b/config/index.js
@@ -6,19 +6,34 @@ const path = require('path')
 
 module.exports = {
   dev: {
-
     // Paths
     assetsSubDirectory: '',
     assetsPublicPath: '/',
     proxyTable: {
-     
     	'/api/m1/xm': {
             target: 'http://localhost:7067',
             changeOrigin: true,
             pathRewrite: {
-                '^/api/m1/xm': '/xm'
-              }
-          },
+              '^/api/m1/xm': '/xm'
+            }
+      },
+
+      '/api/m1/sys': {
+        target: 'http://192.168.0.103:7015',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api/m1/sys': '/sys'
+        }
+      },
+
+      '/api/m1/pay': {
+        target: 'http://192.168.0.103:7125',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api/m1/pay': '/pay'
+        }
+      },
+
       /**
     	'/api/m1/workflow': {
             target: 'http://localhost:7080',
diff --git a/src/App.vue b/src/App.vue
index a28656a6..623b032d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,3 +10,4 @@
   }
 </script>
 
+
diff --git a/src/api/mdp/pay/pay.js b/src/api/mdp/pay/pay.js
new file mode 100644
index 00000000..6df3bf22
--- /dev/null
+++ b/src/api/mdp/pay/pay.js
@@ -0,0 +1,6 @@
+import axios from '@/utils/request'
+import config from '@/common/config'
+let base = config.getPayBasePath();
+
+export const aliPay = params => { return axios.post(`${base}/alipay/uniOrder`, params) }
+export const weixinPay = params => { return axios.post(`${base}/wxpay/uniOrder/native`, params) }
diff --git a/src/api/mdp/sys/modules.js b/src/api/mdp/sys/modules.js
index bb0a6ee8..862d5dbd 100644
--- a/src/api/mdp/sys/modules.js
+++ b/src/api/mdp/sys/modules.js
@@ -3,5 +3,6 @@ import config from '@/common/config'
 
 let base = config.getSysBasePath();
 
+
 export const getAllMenuModule = params => { return axios.get(`${base}/sys/sys/mdp/menu/menuModule/list`, {params: params }); };
 export const getBuyMenuModule = params => { return axios.get(`${base}/sys/sys/mdp/menu/menuModuleBranch/list`, {params: params }); };
diff --git a/src/api/mdp/sys/order.js b/src/api/mdp/sys/order.js
new file mode 100644
index 00000000..876a61ca
--- /dev/null
+++ b/src/api/mdp/sys/order.js
@@ -0,0 +1,6 @@
+import axios from '@/utils/request'
+import config from '@/common/config'
+let base = config.getSysBasePath();
+
+export const createOrder = params => { return axios.post(`${base}/mdp/mo/moOrder/create`, params) };
+
diff --git a/src/assets/image/module/xm/xm_gongshi.png b/src/assets/image/module/xm/xm_gongshi.png
new file mode 100644
index 00000000..5611aef9
Binary files /dev/null and b/src/assets/image/module/xm/xm_gongshi.png differ
diff --git a/src/common/config.js b/src/common/config.js
index f2b526ad..0fe1accc 100644
--- a/src/common/config.js
+++ b/src/common/config.js
@@ -87,5 +87,10 @@ export default {
   },
   getImBasePath:function(){
     return '/im/im'
+  },
+  getPayBasePath:function() {
+    return '/pay/pay'
   }
+
+
 }
diff --git a/src/components/ModulesMenu/allMenus.vue b/src/components/ModulesMenu/allMenus.vue
index 9a11328a..6639609b 100644
--- a/src/components/ModulesMenu/allMenus.vue
+++ b/src/components/ModulesMenu/allMenus.vue
@@ -114,7 +114,7 @@ export default {
             });
             this.selectMenus = tempArr;
         },
-
+ 
         selectItem() {},
         goBuy(item) {
             this.visible = false;
diff --git a/src/components/ModulesMenu/index.scss b/src/components/ModulesMenu/index.scss
index be0b8c4a..b94f0ad5 100644
--- a/src/components/ModulesMenu/index.scss
+++ b/src/components/ModulesMenu/index.scss
@@ -55,8 +55,9 @@
             display: flex;
             height: 210px;
             flex-direction: column;
-            // width: calc((100% / 5) - 10px);
-            width: 170px;
+            width: calc((100% / 4) - 20px);
+            margin-right: 20px;
+            // width: 170px;
             border: 2px solid #EDF0F9;
             box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
             border-radius: 8px;
@@ -64,7 +65,6 @@
             position: relative;
             cursor: pointer;
             margin-top: 10px;
-            margin-right: 10px;
             img { 
                 width: 94px;
                 height: 94px;
diff --git a/src/components/ModulesMenu/modulesOfIcon.js b/src/components/ModulesMenu/modulesOfIcon.js
index 82844eb9..8a7c62ba 100644
--- a/src/components/ModulesMenu/modulesOfIcon.js
+++ b/src/components/ModulesMenu/modulesOfIcon.js
@@ -22,6 +22,7 @@ import xmProduct from '@/assets/image/module/xm/xm_product_management.png'
 import xmProject from '@/assets/image/module/xm/xm_project_management.png'
 import xmTest from '@/assets/image/module/xm/xm_test.png'
 import xmCrowd from '@/assets/image/module/xm/xm_crowd-sourcing.png'
+import xmWorkLoad from '@/assets/image/module/xm/xm_gongshi.png'
 
 
 export const modulesOfIcon = [
@@ -119,7 +120,7 @@ export const modulesOfIcon = [
     },
     {
         id: 'xm-workload',
-        logoUrl: '',
+        logoUrl: xmWorkLoad,
     },
     {
         id: 'xm-crowd',
diff --git a/src/router/routes_my_work.js b/src/router/routes_my_work.js
index a012cdd8..e3d222ed 100644
--- a/src/router/routes_my_work.js
+++ b/src/router/routes_my_work.js
@@ -32,6 +32,15 @@ export default {
                     	title: '设置',
                     	icon: 'component'
                     }
+                },
+				{
+                    path: 'message',
+                    component: _import('myWork/message/index'),
+                    name: '消息中心',
+                    meta: {
+                    	title: '消息中心',
+                    	icon: 'component'
+                    }
                 },
 			]
 		}
diff --git a/src/router/routes_order.js b/src/router/routes_order.js
index f3c593a1..7e0bb17f 100644
--- a/src/router/routes_order.js
+++ b/src/router/routes_order.js
@@ -21,6 +21,24 @@ export default {
 						title: '我的',
 						icon: 'component'
 					}
+				},
+				{
+				    path: 'create',
+					component: _import('order/createOrder'),
+					name: '创建订单',
+					meta: {
+						title: '创建订单',
+						icon: 'component'
+					}
+				},
+				{
+				    path: 'paySuccess',
+					component: _import('order/paySuccess'),
+					name: '支付成功',
+					meta: {
+						title: '支付成功',
+						icon: 'component'
+					}
 				}
 			]
 		},
diff --git a/src/views/login/components/login.vue b/src/views/login/components/login.vue
index 828bae3f..d60ce41d 100644
--- a/src/views/login/components/login.vue
+++ b/src/views/login/components/login.vue
@@ -155,7 +155,7 @@ export default {
             loginForm: {
                 displayUserid: '',
                 password: '',
-                authType:'sms',//password/sms/password_display_userid 分别为账户密码、短信验证码快捷登录
+                authType:'password_display_userid',//password/sms/password_display_userid 分别为账户密码、短信验证码快捷登录
                 phoneno:'',//手机号码
                 smsCode:'',//短信验证码
             },
diff --git a/src/views/myWork/message/index.scss b/src/views/myWork/message/index.scss
new file mode 100644
index 00000000..ca8d1719
--- /dev/null
+++ b/src/views/myWork/message/index.scss
@@ -0,0 +1,73 @@
+.message_card {
+    font-size: 24px;
+    font-weight: bold;
+    color: #303030;
+    line-height: 54px;
+    .message_type {
+        cursor: pointer;
+        margin-right: 58px;
+        position: relative;
+    }
+
+    .message_type_active  {
+        color: #4779F6;
+    }
+    
+    .message_type_active::after {
+        content: '';
+        position: absolute;
+        width: 100px; // 边框的宽度
+        height: 2px;
+        border-radius: 3px;
+        left: 50%; //距离 view 标签的距离
+        bottom: -10px;
+        background-color: #4779F6; //  颜色
+        transform: translateX(-50%);
+    }
+}
+
+.message_content {
+    margin-top: 20px;
+    background: #fff;
+    height: calc(100vh - 172px);
+    overflow: auto;
+    cursor: pointer;
+    padding: 20px;
+    .message_content_box {
+        .title {
+            font-size: 18px;
+            font-weight: bold;
+            color: #303030;
+            line-height: 54px;
+            position: relative;
+        }
+        
+        .title::after {
+            content: "";
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: #E52929;
+            top: 8px;
+        }
+
+        .date {
+            color: #606060;
+        }
+
+        .text {
+            display: inline-block;
+            margin-top: 20px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #606060;
+            line-height: 14px;
+        }
+        .line {
+            margin: 30px  0 15px 0;
+            border-bottom: 1px solid #D7D7D7;
+            opacity: 0.43;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/myWork/message/index.vue b/src/views/myWork/message/index.vue
new file mode 100644
index 00000000..81604af7
--- /dev/null
+++ b/src/views/myWork/message/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="m_container">
+    <div class="m_content">
+      <div class="message_card">  
+        <span :class="{'message_type_active' : currentType == 1}" class="message_type" @click="currentType = 1">全部消息</span>
+        <span :class="{'message_type_active' : currentType == 2}" class="message_type " @click="currentType = 2">审批消息</span>
+      </div>
+      <div class="message_content">
+        <div class="message_content_box" v-for="(item, index) in messageData" :key="index">
+          <p class="title">{{item.type}}</p>
+          <p class="date">{{item.time}}</p>
+          <span class="text">{{item.text}}</span>
+          <div class="line"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+  data() {
+    return {
+      currentType: 1,
+      messageData: [
+        {
+          type: '审批消息',
+          time: '2022-04-26 12:00:00',
+          text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑'
+        },
+        {
+          type: '系统消息',
+          time: '2022-04-26 12:00:00',
+          text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑'
+        },
+        {
+          type: '审批消息',
+          time: '2022-04-26 12:00:00',
+          text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑'
+        },
+        {
+          type: '审批消息',
+          time: '2022-04-26 12:00:00',
+          text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑'
+        },
+        {
+          type: '审批消息',
+          time: '2022-04-26 12:00:00',
+          text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑'
+        },
+        {
+          type: '审批消息',
+          time: '2022-04-26 12:00:00',
+          text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑'
+        },
+        
+      ],
+
+
+    }
+  },
+
+  methods() {
+
+  },
+
+  mounted: {
+
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+@import './index.scss';
+</style>
\ No newline at end of file
diff --git a/src/views/order/components/orderSkeleton.vue b/src/views/order/components/orderSkeleton.vue
new file mode 100644
index 00000000..dc55716f
--- /dev/null
+++ b/src/views/order/components/orderSkeleton.vue
@@ -0,0 +1,84 @@
+<template>
+    <el-skeleton style="width: 100%; margin-top: 20px;" animated >
+        <template slot="template">
+        <div>
+            <el-skeleton-item variant="h1" style="width: 10%" />
+        </div>
+        <el-skeleton-item variant="p" style="width: 20%; margin-top: 20px;" />
+        <div style="margin-top: 20px;">
+            <el-skeleton-item variant="h1" style="width: 10%" />
+        </div>
+
+        <div style="display: flex; margin-top: 30px;">
+            <el-skeleton-item variant="image" style="width: 220px; height: 110px; margin-right: 20px;" />
+            <el-skeleton-item variant="image" style="width: 240px; height: 110px;" />
+        </div>
+
+        <div style="margin-top: 30px;">
+            <el-skeleton-item variant="h1" style="width: 10%" />
+            <el-skeleton-item variant="span" style="width: 10%; margin: 0 30px;" />
+            <el-skeleton-item variant="span" style="width: 10%; margin-right: 30px;" />
+            <el-skeleton-item variant="span" style="width: 10%" />
+        </div>
+        
+        <div style="display: flex; margin-top: 30px;">
+            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
+            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
+            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
+            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
+            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
+        </div>
+
+        <div style="margin-top: 30px;">
+            <el-skeleton-item variant="h1" style="width: 10%" />
+            <el-skeleton-item variant="span" style="width: 10%; margin: 0 30px;" />
+        </div>
+
+        <div style="margin-top: 30px;">
+            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
+            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
+            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
+        </div>
+
+        <div style="margin-top: 30px;">
+            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
+            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
+            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
+        </div>
+
+        <div style="display: flex; margin-top: 30px;">
+            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
+            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
+        </div>
+
+        <div style="margin-top: 30px;">
+            <el-skeleton-item variant="h1" style="width: 32%" />
+        </div>
+
+        <div style="margin-top: 30px;">
+            <el-skeleton-item variant="h1" style="width: 10%" />
+        </div>
+
+        <div style="margin-top: 30px;">
+            <el-skeleton-item variant="text" style="width: 50px;" />
+        </div>
+
+        <div style="margin-top: 30px;">
+            <el-skeleton-item variant="text" style="width: 100px;" />
+        </div>
+
+        <el-skeleton-item style="margin-top: 30px; width: 100px;" variant="button" />
+       
+        </template>
+    </el-skeleton>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/order/createOrder.vue b/src/views/order/createOrder.vue
new file mode 100644
index 00000000..86e5035d
--- /dev/null
+++ b/src/views/order/createOrder.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="full_continer">
+    <div class="banner">
+        <p>购买流程:&nbsp;&nbsp;&nbsp;1.选择模块 》 <span style="color:red;">2.确认订单 》</span> 3.支付 》 4.完成</p>
+    </div>
+    <div class="flux_continer">
+      <div class="content">
+        <div class="top_desc">
+          <h2>购买信息</h2>
+          <p>团队名:&nbsp;&nbsp;擎勤科技</p>
+        </div>
+
+        <div class="order_detail">
+          <h2>订单详情</h2>
+
+          <div class="order_box">
+            <div class="content">
+              <div class="middle">
+                <div class="desc">
+                  <el-descriptions size="larget" :column="3" >
+                    <el-descriptions-item label="购买版本">企业版</el-descriptions-item>
+                    <el-descriptions-item label="创建人">谢家豪</el-descriptions-item>
+                    <!-- <el-descriptions-item label="手机号码">18826103122</el-descriptions-item> -->
+                    <el-descriptions-item label="支付方式">{{data.payWay == 'aliPay' ? '支付宝' : '微信'}}</el-descriptions-item>
+                  </el-descriptions>
+                </div>
+                <div class="table">
+                  <el-table
+                    size="larget"
+                    border
+                    :data="data.data"
+                    style="width: 100%"
+                    height="250">
+                    <el-table-column
+                      prop="name"
+                      label="产品类型"
+                      >
+                      <template slot-scope="scope">
+                        <span style="margin-left: 10px">{{ scope.row.mcate == '1' ? '智慧协同办公系统' : 
+                           scope.row.mcate == '2' ? '项目管理' : '商城'}}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      prop="name"
+                      label="产品名称"
+                      >
+                    </el-table-column>
+                    <el-table-column
+                      prop="num"
+                      label="账号数量"
+                      width="120">
+                    </el-table-column>
+                    <!-- <el-table-column
+                      prop="city"
+                      label="单价"
+                      width="120">
+                    </el-table-column>
+                    <el-table-column
+                      prop="address"
+                      label="有效期"
+                      width="300">
+                    </el-table-column>
+                    <el-table-column
+                      prop="zip"
+                      label="总金额"
+                      >
+                    </el-table-column> -->
+                  </el-table>
+                </div>
+              </div>
+
+              <div class="bottom">
+                <span class="allAmount">
+                  总金额: <b>{{data.amount}}￥</b>
+                </span>
+                <el-button size="larget">上一步</el-button>
+                <el-button size="larget" type="primary" @click="createOrder">确认支付</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {createOrder} from '@/api/mdp/sys/order'
+import {aliPay, weixinPay} from '@/api/mdp/pay/pay'
+export default {
+  data() {
+    return {
+      data: null,
+      createOrderLonding: false
+    }
+  },
+  methods: {
+
+    createOrder() {
+      // this.$router.push('/my/order/paySuccess')
+      //调取下单接口
+      console.log(this.data, 'data');
+      //来源s
+      this.data.osource = "1";
+      //订单类型
+      this.data.otype = "1";
+      //备注
+      this.data.remark = "";
+      this.data.name = "模块开通订单"
+      this.createOrderLonding = true;
+      createOrder(this.data).then(res => {
+        if(res.data.tips.isOk){
+          console.log(res, "res--->");
+          //获取订单号
+          let orderId = res.data.data;
+          if(this.data.payway == 'aliPay') {
+            this.toAliPay(orderId);
+            return;
+          }
+          if(this.data.payway == 'weixinPay') {
+            this.toWeixinPay(orderId);
+            return;
+          }
+        }else{
+          this.$message.error(res.data.tips.msg);
+        }
+      }).catch(err => {
+        this.$message.error(err.msg);
+      }).finally(() => {
+        this.createOrderLonding = false;
+      })
+    },
+
+    toAliPay(orderId) {
+      let params = {
+        id: orderId,
+        otype: 1,
+        returnUrl: "www.baidu.com"
+      }
+      aliPay(params).then(res => {
+        console.log(res, "res---->");
+        const div = document.createElement("divform");
+        div.innerHTML = res.data.data.htmlStr;
+        document.body.appendChild(div);
+        document.forms[0].submit();
+      })
+    },
+
+    toWeixinPay(orderId) {
+      let params = {
+        orderId: orderId
+      }
+      weixinPay(params).then(res => {
+        console.log(res, "res---->");
+      })
+    }
+
+
+
+
+
+  },
+
+  created() {
+    let data = JSON.parse(window.localStorage.getItem("BUY_MODULES"));
+    this.data = data
+    console.log(data, "data");
+    
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+.order_detail {
+  margin-top: 30px;
+  .order_box {
+    margin-top: 30px;
+    width: 100%;
+    max-height: 500px;
+    border: 1px solid #E3E4E6;
+    .content {
+      .header {
+        height: 60px;
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+        border-bottom: 2px solid #F4F5F8;
+      }
+      .middle {
+        padding: 20px;
+        .desc {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          span {
+            margin-right: 60px;
+            margin-bottom: 20px;
+            color: #606060;
+          }
+        }
+      }
+      .bottom {
+        padding: 20px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        .allAmount {
+          margin-right: 40px;
+          b {
+            font-size: 24px;
+            color: #FA5A55;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/order/enterprise.vue b/src/views/order/enterprise.vue
new file mode 100644
index 00000000..745dd0ed
--- /dev/null
+++ b/src/views/order/enterprise.vue
@@ -0,0 +1,399 @@
+<template>
+  <div class="enterprise">
+    <div class="sys_type">
+      <div class="sys_desc">
+        <h2>选择产品</h2>
+        <div class="selectItem">
+          <div class="item" :class="{active: active == 'xmgl' }" @click="active = 'xmgl'">
+              <span>项目管理系统</span>
+          </div>
+          <div class="item" :class="{active: active == 'oa' }" @click="active = 'oa'">
+              <span>智慧协同办公系统</span>
+          </div>
+          <div class="item" :class="{active: active == 'mall' }" @click="active = 'mall'">
+              <span>电商定制系统</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="sys_modules">
+        <div class="module" v-for="(item, index) in menus[active]" :key="index" >
+          <div class="head"  :class="{active: item.isChecked == true}" @click="selectItem(item, index)">
+            <div class="module_top">
+              <img :src="item.logoUrl" alt="">
+              <span>{{item.name}}</span>
+            </div>
+            <div v-if="item.isChecked == true" :class="{module_bottom_active: item.isChecked == true}" class="module_bottom">
+              <i class="selected el-icon-check"></i>
+            </div>
+          </div>
+
+          <div class="footer" v-if="item.isChecked == true">
+            <el-input-number style="width: 180px;" @change="numChange(item)" v-model="item.num"  :min="10" :max="99999" ></el-input-number>
+          </div>
+        </div>
+      </div>
+    </div>        
+
+    <div class="buy_count">
+      <h2>
+        购买数量
+        <span>(购买账号不能少于10人)</span>
+      </h2>
+
+      <div class="buy_count_items">
+        <div class="oItem" v-for="(item, index) in totalList" :key="index">
+          <div class="item_header">
+            <p>{{item.name}}</p>
+          </div>
+          <div class="item_bottom">
+            <span>{{item.val}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="buy_date">
+      <h2>期限选择</h2>
+      <div class="buy_date_items">
+        <div class="oItem" @click="selectBuyDate(item)" v-for="(item, index) in useTimeOptions" :key="index">
+          <div class="header">
+            {{item.label}}
+            <i v-if="item.isChecked" class="select el-icon-success"></i>
+          </div>
+          <div class="bottom">
+            <img v-if="item.isHot" src="@/assets/image/module/hot.png" alt="">
+            <p>￥{{item.price}}/人月</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="pay_way">
+      <h2>支付方式</h2>
+      <div class="pay_way_items">
+        <div class="oItem" @click="selectPayWay(item)"  v-for="(item, index) in payWayOptions" :key="index">
+          <img :src="item.icon">
+          <span>{{item.label}}</span>
+          <i v-if="item.isChecked" class="select el-icon-success"></i>
+        </div>
+      </div>
+      <el-input size="larget" v-model="form.phone" class="phone" placeholder="输入手机号"></el-input>
+    </div>
+
+    <div class="pay_allAmount">
+      <h2>订单总额</h2>
+      <p class="allAmount">￥<b>{{allAmount}}</b>/年</p>
+      <el-checkbox v-model="form.checked">同意</el-checkbox> <a style="font-size: 14px;color: #409EFF">《服务协议》</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules'
+import aliPay from '@/assets/image/module/alipay.png';
+import weixinPay from '@/assets/image/module/weixin.png'
+import Decimal from "decimal.js"  // 具体文件中引入
+import { months } from 'moment';
+
+export default {
+  props: ['menus'],
+  data() {
+    return {
+      menuLoading: false,
+      active: "xmgl",
+      payWayOptions: [
+        {
+          label: '支付宝',
+          val: 'aliPay',
+          icon: aliPay,
+          isChecked: true
+        },
+        {
+          label: '微信',
+          val: 'weixinPay',
+          icon: weixinPay,
+          isChecked: false
+        }
+      ],
+      useTimeOptions: [
+        {
+          label: '1年',
+          val: '12',
+          isHot: true,
+          isChecked: true,
+          price: '200.00'
+        },
+        {
+          label: '6个月',
+          val: '6',
+          isHot: false,
+          isChecked: false,
+          price: '200.00'
+        },
+        {
+          label: '3个月',
+          val: '3',
+          isHot: false,
+          isChecked: false,
+          price: '200.00'
+        },
+      ],
+      form: {
+        payway: 'aliPay',
+        usetime: '12',
+        phone: '',
+        checked: false,
+        amount: 0
+      }
+    }
+  },
+
+  computed: {
+    totalList() {
+      if(this.menus == null) return;
+      let obj = [{key: 'xmgl',name: '项目管理', val : 0},{key: 'oa',name: '智慧协同办公系统',val : 0},{key: 'mall',name: '商城',val : 0}]
+      let xmCount = 0;
+      let oaConut = 0;
+      let mallCount = 0;
+      this.menus.xmgl.forEach(m => {
+        if(m.isChecked) {
+          xmCount += m.num;
+        }
+      });
+      this.menus.oa.forEach(m => {
+        if(m.isChecked) {
+          oaConut += m.num;
+        }
+      });
+
+      this.menus.mall.forEach(m => {
+        if(m.isChecked) {
+          mallCount += m.num;
+        }
+      });
+      obj[0].val = xmCount;
+      obj[1].val = oaConut;
+      obj[2].val = mallCount;
+      return obj
+    },
+
+    allAmount() {
+      if(this.menus == null) return;
+      //计费规则
+      let tempData = [];
+      let xm = this.menus.xmgl.filter(res => {return res.isChecked ==  true;})
+      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 amount = new Decimal(0);
+      let allNum = 0;
+      //人均费用 * 数量 * 数量折扣优惠 * 月份折扣优惠
+      tempData.forEach(t => {
+        let numDiscount = 1;
+        let monthDiscount = 1;
+        allNum += t.num;
+
+        //免费
+        if(t.billMode == 0) {
+          amount = amount.add(0);
+        }
+
+        if(t.billMode == 1) {
+          if(t.discount != null && t.discount != "" && t.discount != undefined) {
+            let discount = JSON.parse(t.discount);
+            //用户数量折扣
+            numDiscount = this.getNumDiscount(discount.userNum, t.num);
+            //用户月份折扣
+            monthDiscount = this.getMonthDiscount(discount.months, this.form.usetime);
+          }
+          amount = amount.add(new Decimal(t.uniFee).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount));
+        }
+        
+        //总包模式
+        if(t.billMode == 2) {
+          amount = amount.add(new Decimal(t.fee));
+        }
+      })
+
+      this.form.amount = amount;
+
+      return amount;
+    }
+  },
+
+  watch: {
+    allAmount: {
+      handler(val, oval) {
+        let tempData = [];
+        let xm = this.menus.xmgl.filter(res => {return res.isChecked ==  true;})
+        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 yearAmount = new Decimal(0);
+        let halfYearAmount = new Decimal(0);
+        let quarter = new Decimal(0);
+        let allNum = 0;
+
+        tempData.forEach(t => {
+          let numDiscount = 1;
+          let monthDiscount = 1;
+          allNum += t.num;
+          if(t.discount != null && t.discount != "" && t.discount != undefined) {
+            let discount = JSON.parse(t.discount);
+            //用户数量折扣
+            numDiscount = this.getNumDiscount(discount.userNum, t.num);
+            this.useTimeOptions.forEach(element => {
+              //用户月份折扣
+              monthDiscount = this.getMonthDiscount(discount.months, element.val);
+              if(element.val == "12") {
+                yearAmount = yearAmount.add(new Decimal(t.uniFee).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount));
+              }
+
+              if(element.val == "6") {
+                halfYearAmount = halfYearAmount.add(new Decimal(t.uniFee).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount));
+              }
+
+              if(element.val == "3") {
+                quarter = quarter.add(new Decimal(t.uniFee).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount));
+              }
+            });
+          }else {
+            yearAmount = yearAmount.add(new Decimal(t.uniFee).mul(new Decimal(t.num)));
+            halfYearAmount = halfYearAmount.add(new Decimal(t.uniFee).mul(new Decimal(t.num)));
+            quarter = quarter.add(new Decimal(t.uniFee).mul(new Decimal(t.num)));
+          }
+        })
+        
+        this.useTimeOptions.forEach(element => {
+          if(element.val == "12" && yearAmount != 0) {
+            element.price = yearAmount.div(allNum).toFixed(2, Decimal.ROUND_HALF_UP);
+          }
+          if(element.val == "6" && halfYearAmount != 0) {
+            element.price = halfYearAmount.div(allNum).toFixed(2, Decimal.ROUND_HALF_UP);
+          }
+          if(element.val == "3" && quarter != 0) {
+            element.price = quarter.div(allNum).toFixed(2, Decimal.ROUND_HALF_UP);
+          }
+        })
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+
+    getNumDiscount(discount, num) {
+      let sale = new Decimal(1);
+      let nums = discount.split("\n");
+      var map = new Map();
+      nums.forEach(element => {
+        let t = element.split(":");
+        map.set(t[0], t[1]);
+      });
+
+      map.forEach(function(value,key){
+        let t = key.split("-");
+        if(num >= t[0] && num <= t[1]) {
+          sale = new Decimal(value).div(new Decimal(100))
+        }
+      });
+      return sale;
+    },
+
+    getMonthDiscount(discount, month) {
+      let sale = new Decimal(1);
+      let condition = discount.split("\n");
+      var map = new Map();
+      condition.forEach(element => {
+        let t = element.split(":");
+        map.set(t[0], t[1]);
+      });
+      map.forEach(function(value, key){
+        if(new Decimal(month).comparedTo(key) >= 0) {
+          sale = new Decimal(value).div(new Decimal(100))
+        }
+      });
+      return sale;
+    },
+
+    numChange(item) {
+      item.isChecked = true;
+    },
+
+    selectItem(item) {
+      if(this.active == 'xmgl') {
+        this.menus.xmgl.forEach(element => {
+          if(element.id == item.id) {
+            element.isChecked ? element.isChecked = !element.isChecked : element.isChecked = true;
+          }
+        });
+      }
+
+      if(this.active == 'mall') {
+        this.menus.mall.forEach(element => {
+          if(element.id == item.id) {
+            element.isChecked ? element.isChecked = !element.isChecked : element.isChecked = true;
+          }
+        });
+      }
+
+      if(this.active == 'oa') {
+        this.menus.oa.forEach(element => {
+          if(element.id == item.id) {
+            element.isChecked ? element.isChecked = !element.isChecked : element.isChecked = true;
+          }
+        });
+      }
+    },
+
+    selectPayWay(item) {
+      this.form.payway = item.val;
+      this.payWayOptions.forEach(element => {
+        element.isChecked = false;
+        if(item.val == element.val) {
+          element.isChecked = true;
+        }
+      });
+    },
+
+    selectBuyDate(item) {
+      this.form.usetime = item.val;
+      this.useTimeOptions.forEach(element => {
+        element.isChecked = false;
+        if(item.val == element.val) {
+          element.isChecked = true;
+        }
+      });
+    },
+
+
+    getForm() {
+      let tempData = [];
+      let xm = this.menus.xmgl.filter(res => {return res.isChecked ==  true;})
+      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;
+    },
+
+  },
+
+  created() {
+  }
+
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
\ No newline at end of file
diff --git a/src/views/order/flagShip.vue b/src/views/order/flagShip.vue
new file mode 100644
index 00000000..9ed5628d
--- /dev/null
+++ b/src/views/order/flagShip.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="flagShip"> 
+    <h2>购买信息</h2>
+    <span class="desc">填写你的联系方式，我们产品顾问将会尽快联系你。</span>
+    <el-form class="form"  label-position="left" ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="联系人" prop="contacts">
+            <el-input class="inp" v-model="form.contacts"></el-input>
+        </el-form-item>
+
+         <el-form-item label="联系电话" prop="phone">
+            <el-input class="inp" v-model="form.phone"></el-input>
+        </el-form-item>
+
+        <el-form-item label="使用人数">
+            <el-select class="inp" v-model="form.usePeoples" placeholder="使用人数">
+                <el-option
+                v-for="item in usePeopleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+                </el-option>
+            </el-select>
+        </el-form-item>
+
+        <el-form-item label="服务需求">
+            <el-select class="inp" multiple  v-model="form.needs" placeholder="服务需求">
+                <el-option
+                v-for="item in needOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+                </el-option>
+            </el-select>
+        </el-form-item>
+        <span>想要我们提供哪些服务（可多选）</span>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            usePeopleOptions: [
+                {
+                    label: '51-100',
+                    value: '51-100'
+                },
+                {
+                    label: '101-500',
+                    value: '101-500'
+                },
+                {
+                    label: '501-1000',
+                    value: '501-1000'
+                },
+                {
+                    label: '1000以上',
+                    value: '1000以上'
+                }
+            ],
+            needOptions: [
+                {
+                    label: '预约演示',
+                    value: '预约演示'
+                },
+                {
+                    label: '产品报价',
+                    value: '产品报价'
+                },
+                {
+                    label: '部署方式',
+                    value: '部署方式'
+                },
+                {
+                    label: '新增功能',
+                    value: '新增功能'
+                },
+                {
+                    label: '其它',
+                    value: '其它'
+                }
+            ],
+            form: {
+                contacts: '',
+                usePeoples: '',
+                needs: [],
+            },
+            rules: {
+                contacts: [
+                    { required: true, message: '请输入联系人', trigger: 'blur' },
+                ],
+                phone: [
+                    { required: true, message: '请输入联系电话', trigger: 'blur' },
+                ],
+                usePeoples: [
+                    { required: true, message: '请选择使用人数', trigger: 'blur' },
+                ],
+                needs: [
+                    { required: true, message: '请选择服务需求', trigger: 'blur' },
+                ],
+            }
+        }
+    },
+
+    methods: {
+        getForm() {
+            //验证表单
+            console.log("验证表单");
+
+
+        },
+
+
+
+    },
+
+
+}
+</script>
+
+<style lang="scss" scoped>
+.flagShip {
+    margin-top: 30px;
+    h2 {
+        margin-bottom: 20px;
+    }
+    .desc {
+        color: #7D7D7D;
+    }
+    .form {
+        margin-top: 40px;
+        .inp {
+            width: 280px;
+        }
+        
+        span {
+            margin-left: 78px;
+            color: #7D7D7D;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/order/index.scss b/src/views/order/index.scss
index cffa4bf3..ebfb66c9 100644
--- a/src/views/order/index.scss
+++ b/src/views/order/index.scss
@@ -1,7 +1,7 @@
 .full_continer {
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    overflow: hidden; 
     position: relative;
     .banner {
         margin-top: 35px;
@@ -16,7 +16,7 @@
 }
 
 h2 {
-    font-size: 24px;
+    font-size: 28px;
     font-family: PingFang SC;
     font-weight: bold;
     color: #303030;
@@ -34,6 +34,7 @@ h2 {
             p {
                 margin-top: 34px;
                 color: #7D7D7D;
+                font-size: 20px;
             }
         }
 
@@ -50,233 +51,287 @@ h2 {
                     margin-top: 24px;
                     display: flex;
                     flex-direction: row;
-                    width: 172px;
-                    height: 86px;
+                    width: 220px;
+                    height: 110px;
                     margin-right: 20px;
                     border-radius: 5px;
                     background-color: #F4F5F8;
                     cursor: pointer;
                     img {
-                        width: 80px;
-                        height: 80px;
+                        width: 110px;
+                        height: 110px;
                     }
                     .desc {
-                        margin-left: 10px;
+                        margin-left: 8px;
                         display: flex;
                         flex-direction: column;
                         justify-content: center;
                         align-items: center;
+                        font-size: 16px;
                         p:nth-child(2) {
                             margin-top: 8px;
-                            font-size: 12px;
+                            font-size: 14px;
                         }
                     }
                 }
                 .select {
+                    font-size: 30px;
                     position: absolute;
                     right: 5px;
-                    top: 10px;
+                    top: 2px;
                     color: #409EFF;
                 }
             }
         }
 
-        .sys_type {
-            margin-top: 52px;
-            .sys_desc {
-                display: flex;
-                height: 46px;
+        .submit {
+            margin-top: 35px;
+        }
+    }
+}
+
+
+
+
+.enterprise {
+    .sys_type {
+        margin-top: 52px;
+        .sys_desc {
+            display: flex;
+            height: 46px;
+            width: 100%;
+            h2 {
+                margin-right: 44px;
                 line-height: 46px;
-                h2 {
-                    margin-right: 44px;
-                }
-                span {
+            }
+            .selectItem {
+                display: flex;
+                flex-direction: row;
+                .item {
+                    display: flex;
                     margin-right: 60px;
+                    height: 46px;
+                    align-items: center;
                     cursor: pointer;
                     font-size: 18px;
-                    font-weight: bold;
-                    color: #606060;
+                }
+                .active {
+                    font-size: 22px;
+                    color: rgb(116, 155, 242);
                 }
             }
-
-            .sys_modules {
-                margin-top: 30px;
+        }
+        .sys_modules {
+            margin-top: 30px;
+            display: flex;
+            flex-wrap: wrap;
+            .active {
+                border: 2px solid rgb(116, 155, 242) !important;
+            }
+            .module {
                 display: flex;
-                flex-direction: row;
-                .module {
-                    width: 161px;
-                    height: 189px;
+                flex-direction: column;
+                background: #FFFFFF;
+                margin-right: 30px;
+                .head {
+                    width: 180px;
+                    height: 200px;
+                    border: 1px solid #E3E4E6;
                     border-radius: 8px;
-                    margin-right: 20px;
-                    border: 2px solid #E3E4E6;
+                    margin-bottom: 20px;
+                    position: relative;
                     cursor: pointer;
                     .module_top {
-                        height: 120px;
                         display: flex;
+                        height: 170px;
+                        flex-direction: column;
                         justify-content: center;
                         align-items: center;
-                        flex-direction: column;
                         img {
-                            width: 73px;
-                            height: 73px;
+                            width: 90px;
+                            height: 90px;
                             margin-top: 20px;
                         }
                         span {
-                            margin-top: 20px;
-                            font-size: 14px;
                             color: #606060;
+                            margin-top: 20px;
+                            font-size: 18px;
                         }
                     }
                     .module_bottom {
                         height: 30px;
-                        text-align: center;
-                        line-height: 30px;
+                        border-radius: 8px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        .selected {
+                            color: #fff;
+                        }
+                    }
+                    .module_bottom_active {
+                        background-color: rgb(116, 155, 242);
                     }
+
+
                 }
-            }
-        }
 
-        .buy_count {
-            margin-top: 40px;
-            h2 {
-                span {
-                    font-size: 12px;
-                    margin-left: 5px;
-                    color: #C7C7C7;
+                .footer {
+                    margin-bottom: 20px;
                 }
             }
-            .buy_count_items {
+
+
+        }
+    }
+    .buy_count {
+        margin-top: 32px;
+        h2 {
+            span {
+                font-size: 18px;
+                margin-left: 5px;
+                color: #C7C7C7;
+            }
+        }
+        .buy_count_items {
+            display: flex;
+            flex-direction: row;
+            margin-top: 30px;
+            .oItem {
+                margin-right: 30px;
                 display: flex;
-                flex-direction: row;
-                margin-top: 30px;
-                .oItem {
-                    margin-right: 12px;
-                    display: flex;
-                    flex-direction: column;
-                    width: 204px;
-                    height: 110px;
-                    border: 3px solid rgb(245, 246, 246);
-                    justify-content: center;
-                    border-radius: 6px;
-                    .item_header {
-                        height: 40px;
-                        width: 100%;
-                        text-align: center;
-                        line-height: 30px;
-                        color: #606060;
-                        border-bottom: 2px solid rgb(245, 246, 246);
-                    }
-                    .item_bottom {
-                        height: 50px;
-                        width: 100%;
-                        text-align: center;
-                        line-height: 60px;
-                    }
+                flex-direction: column;
+                width: 200px;
+                height: 120px;
+                border: 2px solid #E3E4E6;
+                justify-content: center;
+                border-radius: 6px;
+                .item_header {
+                    height: 40px;
+                    width: 100%;
+                    text-align: center;
+                    line-height: 30px;
+                    color: #606060;
+                    border-bottom: 2px solid #E3E4E6;
+                }
+                .item_bottom {
+                    width: 100%;
+                    text-align: center;
+                    line-height: 60px;
                 }
-            }   
-            
-        }
-
-        .buy_date {
-            margin-top: 50px;
-            h2 {
-                margin-bottom: 30px;
             }
-            .buy_date_items {
+        }
+    }
+  
+    .buy_date {
+        margin-top: 50px;
+        h2 {
+            margin-bottom: 30px;
+        }
+        .buy_date_items {
+            display: flex;
+            flex-direction: row;
+            .oItem {
                 display: flex;
-                flex-direction: row;
-                .oItem {
+                flex-direction: column;
+                width: 200px;
+                height: 144px;
+                border-radius: 8px;
+                margin-right: 30px;
+                border: 2px solid #E3E4E6;
+                cursor: pointer;
+                .header {
+                    position: relative;
+                    height: 44px;
+                    width: 100%;
+                    text-align: center;
+                    line-height: 44px;
+                    color: #424141;
+                    border-bottom: 2px solid #E3E4E6;
+                    .select {
+                        font-size: 30px;
+                        position: absolute;
+                        right: 10px;
+                        top: 5px;
+                        color: #409EFF;
+                    }
+                }
+                .bottom {
+                    height: 100px;
+                    width: 100%;
+                    position: relative;
                     display: flex;
+                    justify-content: center;
                     flex-direction: column;
-                    width: 209px;
-                    height: 157px;
-                    border-radius: 8px;
-                    margin-right: 30px;
-                    border: 2px solid #E3E4E6;
-                    cursor: pointer;
-                    .header {
-                        position: relative;
-                        height: 60px;
-                        width: 100%;
-                        text-align: center;
-                        line-height: 60px;
-                        color: #424141;
-                        border-bottom: 2px solid #E3E4E6;
-                        .select {
-                            position: absolute;
-                            right: 10px;
-                            top: 10px;
-                        }
+                    align-items: center;                    
+                    img { 
+                        width: 113px;
+                        height: 40px;
                     }
-                    .bottom {
-                        height: 80px;
-                        width: 100%;
-                        text-align: center;
-                        position: relative;
-                        img {
-                            width: 113px;
-                            height: 40px;
-                        }
-                        p {
-                            margin-top: 12px;
-                        }
-                        .normal {
-                            margin-top: 57px;
-                        }
+                    p {
+                        margin-top: 12px;
+                    }
+                    .normal {
+                        margin-top: 57px;
                     }
-
                 }
+  
             }
         }
-        
-        .pay_way {
-            margin-top: 50px;
-            h2 {
-                margin-bottom: 20px;
-            }
-            .pay_way_items {
+    }
+  
+    .pay_way {
+        margin-top: 50px;
+        h2 {
+            margin-bottom: 20px;
+        }
+        .pay_way_items {
+            display: flex;
+            .oItem {
                 display: flex;
-                .oItem {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    width: 209px;
-                    height: 70px;
-                    margin-right: 20px;
-                    border: 2px solid #E3E4E6;
-                    border-radius: 8px;
-                    margin-top: 5px;
-                    img {
-                        width: 45px;
-                        height: 37px;
-                        margin: 13px 18px 13px 40px;
-                    }
+                flex-direction: row;
+                align-items: center;
+                width: 200px;
+                height: 80px;
+                margin-right: 30px;
+                border: 2px solid #E3E4E6;
+                border-radius: 8px;
+                margin-top: 5px;
+                position: relative;
+                cursor: pointer;
+                img {
+                    width: 50px;
+                    height: 50px;
+                    margin: 13px 18px 13px 40px;
+                }
+                .select {
+                    font-size: 30px;
+                    position: absolute;
+                    right: 5px;
+                    top: 5px;
+                    color: #409EFF;
                 }
-            }
-            .phone {
-                margin-top: 10px !important;
-                width: 440px;
             }
         }
 
-        .pay_allAmount {
-           margin-top: 30px;
-           h2 {
-               margin-bottom: 20px;
-           }
-           .allAmount {
-               font-size: 24px;
-               font-weight: bold;
-               color: #FA5A55;
-               margin-bottom: 20px;
-           }
+        .phone  {
+            margin-top: 10px !important;
+            width: 440px;
         }
-        
-        .submit {
-            margin-top: 35px;
+    }
+  
+    .pay_allAmount {
+        margin-top: 30px;
+        h2 {
+            margin-bottom: 20px;
+        }
+        .allAmount {
+            font-size: 22px;
+            font-weight: bold;
+            color: #FA5A55;
+            margin-bottom: 20px;
+            b {
+                font-size: 38px;
+            }
         }
-
-
-
     }
-}
\ No newline at end of file
+}  
\ No newline at end of file
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
index 23a94a92..f3f2c807 100644
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -1,11 +1,14 @@
 <template>
-  <div class="full_continer">
+  <div class="full_continer"> 
     <div class="banner">
-      <p>购买流程:&nbsp;&nbsp;&nbsp;1.选择模块 》 2.确认订单 》 3.支付 》 4.完成</p>
+      <p>购买流程:&nbsp;&nbsp;&nbsp;1.选择模块 》2.确认订单 》 3.支付 》 4.完成</p>
     </div>
-    
+
     <div class="flux_continer">
-      <div class="content">
+
+      <orderSkeleton v-if="menuLoading" />
+
+      <div class="content" v-else>
         <div class="top_desc">
           <h2>购买订单</h2>
           <p>团队名: 擎勤科技</p>
@@ -14,192 +17,159 @@
         <div class="version">
           <h2>选择版本</h2>
           <div class="version_item">
-            <div class="oItem">
-              <img src="@/assets/image/module/mo_enterprise.png" alt="">
+            <div @click="selectVersion(item)" class="oItem" v-for="(item, index) in version" :key="index">
+              <img :src='item.img'>
               <div class="desc">
-                <p>企业版</p>
-                <p>(10人起购)</p>
-              </div>
-              <i class="select el-icon-success"></i>
-            </div>
-            <div class="oItem">
-              <img src="@/assets/image/module/mo_flagship.png" alt="">
-              <div class="desc">
-                <p>旗舰版</p>
-                <p>(50人起购)</p>
+                <p>{{item.name}}</p>
+                <p>{{item.desc}}</p>
               </div>
+              <i v-if="item.isChecked" class="select el-icon-success"></i>
             </div>
           </div>
         </div>
 
-        <div class="sys_type">
-          <div class="sys_desc">
-            <h2>选择产品</h2>
-            <span>项目管理系统</span>
-            <span>协同办公系统</span>
-            <span>电商定制系统</span>
-          </div>
-
-          <div class="sys_modules">
-             <div class="module">
-                <div class="module_top">
-                  <img :src="xmgl" alt="">
-                  <span>督办管理</span>
-                </div>
-                <div class="module_bottom">
-                </div>
-             </div>
-
-             <div class="module">
-                <div class="module_top">
-                  <img :src="xmgl" alt="">
-                  <span>资产管理</span>
-                </div>
-                <div class="module_bottom">
-                </div>
-              </div>
-
-              <div class="module">
-                <div class="module_top">
-                  <img :src="csgl" alt="">
-                  <span>会议管理</span>
-                </div>
-                <div class="module_bottom">
-                </div>
-              </div>
-
-              <div class="module">
-                <div class="module_top">
-                  <img :src="csgl" alt="">
-                  <span>会议管理</span>
-                </div>
-                <div class="module_bottom">
-                </div>
-              </div>
-          </div>
-        </div>        
-
-        <div class="buy_count">
-          <h2>
-            购买数量
-            <span>(购买账号不能少于10人)</span>
-          </h2>
-
-          <div class="buy_count_items">
-            <div class="oItem">
-              <div class="item_header">
-                <p>项目管理系统</p>
-              </div>
-              <div class="item_bottom">
-                 <span>10</span>
-              </div>
-            </div>
-
-            <div class="oItem">
-              <div class="item_header">
-                <p>智慧协同办公系统</p>
-              </div>
-              <div class="item_bottom">
-                 <span>10</span>
-              </div>
-            </div>
-          </div>
+        <div class="version_all">
+          <flag-ship ref="flagship" v-if="currentSelectVersion == '旗舰版'"></flag-ship>
+          <enterprise ref="enterprise" :menus="menus" v-if="currentSelectVersion == '企业版'"></enterprise>
         </div>
 
-        <div class="buy_date">
-          <h2>期限选择</h2>
-          <div class="buy_date_items">
-            <div class="oItem">
-              <div class="header">
-                1年
-                <i class="select el-icon-success"></i>
-              </div>
-              <div class="bottom">
-                <img src="@/assets/image/module/hot.png" alt="">
-                <p>￥138.33/人月</p>
-              </div>
-            </div>
-
-            <div class="oItem">
-              <div class="header">
-                6个月
-                <i></i>
-              </div>
-              <div class="bottom">
-                <p class="normal">￥138.33/人月</p>
-              </div>
-            </div>
-
-            <div class="oItem">
-              <div class="header">
-                3个月
-                <i></i>
-              </div>
-              <div class="bottom">
-                <p class="normal">￥138.33/人月</p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="pay_way">
-          <h2>支付方式</h2>
-          <div class="pay_way_items">
-            <div class="oItem">
-              <img src="@/assets/image/module/alipay.png" alt="">
-              <span>支付宝</span>
-              <i></i>
-            </div>
-
-            <div class="oItem">
-              <img src="@/assets/image/module/weixin.png" alt="">
-              <span>微信</span>
-              <i></i>
-            </div>
-          </div>
-          <el-input class="phone" placeholder="输入手机号"></el-input>
-        </div>
-
-        <div class="pay_allAmount">
-          <h2>订单总额</h2>
-          <p class="allAmount">￥<b>299</b>.00/年</p>
-          <el-checkbox v-model="checked">同意<a>《服务协议》</a></el-checkbox>
-        </div>
-
-        <el-button size="larget" class="submit" type="primary">提交订单</el-button>
-
+        <el-button @click="submitOrder" size="larget" class="submit" type="primary">
+          {{currentSelectVersion == '企业版' ? '提交订单' : '提交信息'}}
+        </el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import xmgl from '@/assets/image/module/xm/xm_project_management.png'
-import csgl from '@/assets/image/module/xm/xm_test.png'
-import cpgh from '@/assets/image/module/xm/xm_product_management.png'
-import xngl from '@/assets/image/module/xm/xm_Efficiency_management.png'
-import lsx  from '@/assets/image/module/xm/xm_flow_line.png'
-import zzjg from '@/assets/image/module/xm/mo_org.png'
-import zb   from '@/assets/image/module/xm/xm_crowd-sourcing.png'
-import kfpt from '@/assets/image/module/xm/xm_development.png'
 
+//图标
+import EnterpriseVersionIcon from '@/assets/image/module/mo_enterprise.png'
+import FlagShipIcon from '@/assets/image/module/mo_flagship.png'
+//组件
+import FlagShip from './flagShip'
+import Enterprise from './enterprise'
+import orderSkeleton from './components/orderSkeleton'
+import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules'
+import {modulesOfIcon} from "@/components/ModulesMenu/modulesOfIcon";
 
 
 export default {
+  components: {FlagShip, Enterprise, orderSkeleton},
   data() {
     return {
-      xmgl: xmgl,
-      csgl: csgl,
-      cpgh: cpgh,
-      xngl: xngl,
-      lsx: lsx,
-      zzjg: zzjg,
-      zb: zb,
-      kfpt: kfpt,
+      version: [
+        {
+          name: '企业版',
+          desc: '(10人起购)',
+          isChecked: true,
+          img: EnterpriseVersionIcon
+        },
+        {
+          name: '旗舰版',
+          desc: '(50人起购)',
+          isChecked: false,
+          img: FlagShipIcon
+        }
+      ],
+      currentSelectVersion: '企业版',
+      menuLoading: false,
+      menus: null,
+    }
+  },
 
+  methods: {
+    selectVersion(item) {
+      this.currentSelectVersion = item.name;
+      this.version.forEach(element => {
+        element.isChecked = false;
+        if(item.name == element.name) {
+          element.isChecked = true;
+        }
+      });
+    },
+
+    submitOrder() {
+      //验证参数
+      if(this.currentSelectVersion = "企业版") {
+        let data = this.$refs.enterprise.getForm();
+        //验证手机号是否填写
+        // if(data.phone == "" || data.phone == null || data.phone == undefined) {
+        //   this.$message({
+        //     message: '请输入手机号',
+        //     type: 'warning'
+        //   });
+        //   return;
+        // }
+        //验证是否同意服务协议
+        // if(!data.checked) {
+        //   this.$message({
+        //     message: '请先同意服务协议',
+        //     type: 'warning'
+        //   });
+        //   return;
+        // }
+        //保存购买模块信息到本地
+        if(data.data.length < 0) {
+          this.$message({
+            message: '请选择要购买的模块',
+            type: 'warning'
+          });
+          return
+        }
+        console.log(data, "data");
+        window.localStorage.setItem("BUY_MODULES", undefined)
+        window.localStorage.setItem("BUY_MODULES", JSON.stringify(data))
+        this.$router.push('/my/order/create')
+      }else {
+        let data = this.$refs.flagship.getForm();
+      }
+    },
+
+    //获取所有模块
+    getAllModules() {
+        this.menuLoading = true
+        getAllMenuModule({}).then(res => {
+            let tempData = res.data.data;
+            getBuyMenuModule({}).then(res2 => {
+                let branchModules = res2.data.data;
+                tempData.forEach(k => {
+                    branchModules.forEach(element => {
+                        k.isChecked = false;
+                        k.num = 10;
+                        if(k.id == element.moduleId) {
+                            k.isBuy = true;
+                        }
+                    });
+                    modulesOfIcon.forEach(element => {
+                        if(k.id == element.id) {
+                            k.logoUrl = element.logoUrl;
+                        }
+                    });
+                })
+                let xmMenus = tempData.filter(res => {return res.mcate == '2'})
+                let oaMunus = tempData.filter(res => {return res.mcate == '1'})
+                let mallMenus = tempData.filter(res => {return res.mcate == '3'})
+                this.menus = {
+                    "xmgl": xmMenus,
+                    "oa" : oaMunus,
+                    "mall": mallMenus
+                }
+            })
+        }).finally(() => this.menuLoading = false)
     }
+
   },
 
+  created() {
+    this.getAllModules();
+  },
+
+
+
+
+
+
 }
 </script>
 
diff --git a/src/views/order/list.vue b/src/views/order/list.vue
new file mode 100644
index 00000000..6b0a2ee4
--- /dev/null
+++ b/src/views/order/list.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+      订单列表
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/order/paySuccess.vue b/src/views/order/paySuccess.vue
new file mode 100644
index 00000000..3a75555c
--- /dev/null
+++ b/src/views/order/paySuccess.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="result">
+        <el-result icon="success">
+            <template slot="title">
+                <p style="font-size: 24px;">恭喜您，支付成功！</p>
+            </template>
+            <template class="subTitle" slot="subTitle">
+                <p style="margin-bottom: 6px;font-size: 16px;">您已成功支付￥299.00元</p>
+                <p style="margin-bottom: 6px;font-size: 16px;">支付方式： 支付宝</p>
+                <p style="margin-bottom: 6px;font-size: 16px;">订单号：2022042417501233 （查看订单）</p>
+            </template>
+            <template slot="extra">
+                <el-button type="primary" size="larget">继续购买</el-button>
+                <el-button size="larget">返回首页</el-button>
+            </template>
+        </el-result>
+    </div>
+</template>
+
+<script>
+export default {
+
+
+}
+</script>
+
+<style lang="scss" scoped>
+.result {
+    height: 600px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+</style>
\ No newline at end of file