diff --git a/src/views/order/addUsersIndex.vue b/src/views/order/addUsersIndex.vue
new file mode 100644
index 0000000..158b297
--- /dev/null
+++ b/src/views/order/addUsersIndex.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="full_continer">
+    <div class="banner">
+      <p>购买流程:&nbsp;&nbsp;&nbsp;1.选择模块 》2.确认订单 》 3.支付 》 4.完成</p>
+    </div>
+
+    <div class="flux_continer">
+      <div class="content">
+        <div class="top_desc">
+          <h2>升级所有已购买产品可用人数</h2>
+          <p>团队名: {{userInfo.branchName?userInfo.branchName:userInfo.branchId}}</p>
+        </div>
+        <div class="version_all">
+          <div class="enterprise">
+            <div class="buy_count">
+              <h2>
+                购买总人数
+                <span>(10人起购) &nbsp;当前企业已有<font color="red">{{branchUsersCpd.maxUsers}}</font>个账户可用 </span>
+              </h2>
+
+              <div class="buy_count_items">
+                <el-input type="number" style="width:30%;"  v-model="data.ousers" :min="10" @change="formOusersChange"></el-input>
+
+               </div>
+            </div>
+
+            <div class="buy_count">
+              <h2>
+                产品明细
+                <span> 增加人数将自动分配人员额度给企业已购买的产品，涉及的产品明细如下 </span>
+              </h2>
+
+              <div class="buy_count_items">
+                  <el-table
+                    size="larget"
+                    border
+                    :data="orders.modules"
+                    style="width: 100%" >
+                    <!--
+                    <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="产品名称" min-width="150"
+                      >
+                      <template slot-scope="scope">
+                        <div class="avatar-container">
+                          <div class="avatar-wrapper">
+                            <img v-if=" scope.row.logoUrl" class="user-avatar" :src="scope.row.logoUrl">
+                            <span class="username">  {{scope.row.name}}</span>
+                          </div>
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      prop="ousers"
+                      label="可使用人数"
+                      min-width="120">
+                    </el-table-column>
+                    <el-table-column
+                      prop="musers"
+                      label="计价人数"
+                      min-width="120">
+                    </el-table-column>
+                    <el-table-column
+                      prop="orginFee"
+                      label="原价"
+                      min-width="120">
+                      <template slot-scope="scope">
+                        ￥{{scope.row.orginFee}}
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      prop="finalFee"
+                      label="折扣价"
+                      min-width="120">
+                      <template slot-scope="scope">
+                        ￥{{scope.row.finalFee}}
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </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" style="width:30%;" v-model="data.phone" class="phone" placeholder="输入手机号"></el-input>
+            </div>
+
+            <div class="pay_allAmount">
+              <h2>订单总额</h2>
+              <p class="allAmount">￥<b>{{orders.order?orders.order.ofinalFee:''}}</b>/{{data.label}}</p>
+              <el-checkbox v-model="data.checked">同意</el-checkbox> <a style="font-size: 14px;color: #409EFF">《服务协议》</a>
+            </div>
+          </div>
+      </div>
+
+        <el-button :loading="load.add" @click="createOrder" size="larget" class="submit" type="primary">
+          提交
+        </el-button>
+      </div>
+    </div>
+
+    <el-dialog
+      title="微信支付"
+      :visible.sync="weixinPayVisible"
+      :show-close="false"
+      @close="closeDialog"
+       width="350px"
+     >
+      <qriously :value="codeUrl" :size="300" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules'
+import {modulesOfIcon} from "../layout/ModulesMenu/modulesOfIcon.js";
+import {createAddUsersOrder,calcAddUsersOrder} from '@/api/mdp/sys/order';
+
+import aliPayImg from '@/assets/image/module/alipay.png';
+import weixinPayImg from '@/assets/image/module/weixin.png';
+
+import { mapGetters } from 'vuex'
+import {aliPay, weixinPay, checkWxPayStatus} from '@/api/mdp/pay/pay'
+
+export default {
+  components: {  },
+
+  computed: {
+      ...mapGetters([ 'userInfo'  ]),
+
+  },
+  data() {
+    return {
+
+      payWayOptions: [
+        {
+          label: '支付宝',
+          val: '2',
+          icon: aliPayImg,
+          isChecked: true
+        },
+        {
+          label: '微信',
+          val: '1',
+          icon: weixinPayImg,
+          isChecked: false
+        }
+      ],
+      load:{add:false,calc:false,list:false},
+      orders:{
+        modules: null,
+        order:null,
+      },
+      data:{
+        phone:'',
+        name:'',
+        ousers:10,
+        payType:'1',
+        checked:true,//是否同意协议
+      },
+
+      branchUsersCpd:{istatus:'1',maxUsers:50,ilvlId:'2',ilvlName:'黄金会员'},
+      weixinPayVisible: false,
+      codeUrl: ""
+    }
+  },
+
+  methods: {
+
+    formOusersChange(val){
+       this.calcOrder();
+    },
+    calcOrder:function() {
+      if(!this.data.ousers){
+         return;
+      }
+      var params={ousers:this.data.ousers}
+       calcAddUsersOrder(params).then(res=>{
+         this.orders.order=res.data.data
+         var modules=res.data.modules
+         var defIcon=modulesOfIcon[0]
+         modules.forEach(i=>{
+           var e=modulesOfIcon.find(k=>k.id==i.moduleId)
+           if(e && e.id){
+              i.logoUrl = e.logoUrl;
+           }else{
+              i.logoUrl=defIcon.logoUrl
+           }
+         })
+         this.orders.modules=modules
+       })
+    },
+    selectPayWay(item) {
+      this.data.payType = item.val;
+      this.payWayOptions.forEach(element => {
+        element.isChecked = false;
+        if(item.val == element.val) {
+          element.isChecked = true;
+        }
+      });
+    },
+    createOrder() {
+      //来源
+      this.data.osource = "1";
+      //订单类型
+      this.data.otype = "1";
+      //备注
+      this.data.remark = "";
+      this.data.name = "模块开通订单"
+      this.load.add = true;
+      createAddUsersOrder(this.data).then(res => {
+        if(res.data.tips.isOk){
+          //获取订单号
+          let orderId = res.data.data.id;
+          if(this.data.payType == '2') {
+            this.toAliPay(orderId);
+            return;
+          }
+          if(this.data.payType == '1') {
+            this.toWeixinPay(orderId);
+            return;
+          }
+        }else{
+          this.$notify.error(res.data.tips.msg);
+        }
+      }).catch(err => {
+        this.$notify.error(err.msg);
+      }).finally(() => {
+      })
+    },
+
+    toAliPay(orderId) {
+      let params = {
+        id: orderId,
+        otype: 1,
+        returnUrl: `${window.location.protocol+"//"+window.location.host}/${process.env.CONTEXT}/${process.env.VERSION}/#/my/order/paySuccess`
+      }
+      aliPay(params).then(res => {
+        if(res.data.tips.isOk) {
+          const div = document.createElement("divform");
+          div.innerHTML = res.data.data.htmlStr;
+          document.body.appendChild(div);
+          document.forms[0].submit();
+        }else {
+          this.$notify.error(res.data.tips.msg);
+        }
+      }).finally(() => {
+        setTimeout(() => {
+          this.load.add = false;
+        }, 2000);
+      })
+    },
+
+    toWeixinPay(orderId) {
+      let params = {
+        id: orderId,
+        otype: 1,
+        returnUrl: ""
+      }
+      weixinPay(params).then(res => {
+        if(res.data.tips.isOk) {
+          this.codeUrl = res.data.data.codeUrl;
+          this.weixinPayVisible = true;
+          this.timer = setInterval(() => {
+            this.queryOrderStatus(orderId)
+          }, 3000)
+        }else {
+          this.$notify.error(res.data.tips.msg);
+        }
+      }).finally(() => {
+         setTimeout(() => {
+          this.load.add = false;
+        }, 2000);
+      })
+    },
+
+    //查询订单支付状态
+    queryOrderStatus(orderId) {
+      console.log("查询订单");
+      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);
+        }else {
+        }
+      }).finally(() => {
+
+      })
+    },
+
+    closeDialog() {
+      clearInterval(this.timer);
+    }
+  },
+
+    mounted(){
+      this.calcOrder();
+      getBranchInterestsDetail().then(res=>{
+        this.branchUsersCpd=res.data.data
+      })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/views/order/components/orderSkeleton.vue b/src/views/order/components/orderSkeleton.vue
new file mode 100644
index 0000000..e888727
--- /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>
diff --git a/src/views/order/createOrder.vue b/src/views/order/createOrder.vue
new file mode 100644
index 0000000..ae36df5
--- /dev/null
+++ b/src/views/order/createOrder.vue
@@ -0,0 +1,284 @@
+<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="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="购买版本">企业版 ( {{data.ousers}} 人 )</el-descriptions-item>
+                    <el-descriptions-item label="企业">{{data.order && data.order.obranchName?data.order.obranchName: ''}}</el-descriptions-item>
+                    <!-- <el-descriptions-item label="手机号码">18826103122</el-descriptions-item> -->
+                    <el-descriptions-item label="支付方式">{{data.payType == '2' ? '支付宝' : '微信'}}</el-descriptions-item>
+                  </el-descriptions>
+                </div>
+                <div class="table">
+                  <el-table
+                    size="larget"
+                    border
+                    :data="data.modules"
+                    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="产品名称" min-width="150"
+                      >
+                    </el-table-column>
+                    <el-table-column
+                      prop="ousers"
+                      label="可用人数"
+                      min-width="120">
+                    </el-table-column>
+                    <el-table-column
+                      prop="musers"
+                      label="计价人数"
+                      min-width="120">
+                    </el-table-column>
+                    <el-table-column
+                      prop="orginFee"
+                      label="原价"
+                      min-width="120">
+                      <template slot-scope="scope">
+                        ￥{{scope.row.orginFee}}
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      prop="finalFee"
+                      label="折扣价"
+                      min-width="120">
+                      <template slot-scope="scope">
+                        ￥{{scope.row.finalFee}}
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </div>
+
+              <div class="bottom">
+                <span class="allAmount">
+                  总金额: <b>{{data.order?data.order.ofinalFee:''}}￥</b>
+                </span>
+                <el-button size="larget" @click="returnPage">上一步</el-button>
+                <el-button size="larget" type="primary" :loading="load.add" @click="createOrder">确认支付</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      title="微信支付"
+      :visible.sync="weixinPayVisible"
+      :show-close="false"
+      @close="closeDialog"
+       width="350px"
+     >
+      <qriously :value="codeUrl" :size="300" />
+
+
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+import { mapGetters } from 'vuex';
+import {createOrder} from '@/api/mdp/sys/order'
+import {aliPay, weixinPay, checkWxPayStatus} from '@/api/mdp/pay/pay'
+
+export default {
+
+
+  computed: {
+    ...mapGetters([
+      'userInfo'
+    ]),
+  },
+  data() {
+    return {
+      data: {},
+      load:{add:false,},
+      weixinPayVisible: false,
+      codeUrl: ""
+    }
+  },
+  methods: {
+    returnPage() {
+      this.$router.back();
+    },
+
+    createOrder() {
+      //来源
+      this.data.osource = "1";
+      //订单类型
+      this.data.otype = "1";
+      //备注
+      this.data.remark = "";
+      this.data.name = "模块开通订单"
+      this.load.add = true;
+      var params={...this.data}
+      params.order=null
+      params.modules=null
+
+      createOrder(params).then(res => {
+        if(res.data.tips.isOk){
+          //获取订单号
+          let orderId = res.data.data.id;
+          if(this.data.payType == '2') {
+            this.toAliPay(orderId);
+            return;
+          }
+          if(this.data.payType == '1') {
+            this.toWeixinPay(orderId);
+            return;
+          }
+        }else{
+          this.$notify.error(res.data.tips.msg);
+        }
+      }).catch(err => {
+        this.$notify.error(err.msg);
+      }).finally(() => {
+      })
+    },
+
+    toAliPay(orderId) {
+      let params = {
+        id: orderId,
+        otype: 1,
+        returnUrl: `${window.location.protocol+"//"+window.location.host}/${process.env.CONTEXT}/${process.env.VERSION}/#/my/order/paySuccess`
+      }
+      aliPay(params).then(res => {
+        if(res.data.tips.isOk) {
+          const div = document.createElement("divform");
+          div.innerHTML = res.data.data.htmlStr;
+          document.body.appendChild(div);
+          document.forms[0].submit();
+        }else {
+          this.$notify.error(res.data.tips.msg);
+        }
+      }).finally(() => {
+        setTimeout(() => {
+          this.load.add = false;
+        }, 2000);
+      })
+    },
+
+    toWeixinPay(orderId) {
+      let params = {
+        id: orderId,
+        otype: 1,
+        returnUrl: ""
+      }
+      weixinPay(params).then(res => {
+        if(res.data.tips.isOk) {
+          this.codeUrl = res.data.data.codeUrl;
+          this.weixinPayVisible = true;
+          this.timer = setInterval(() => {
+            this.queryOrderStatus(orderId)
+          }, 3000)
+        }else {
+          this.$notify.error(res.data.tips.msg);
+        }
+      }).finally(() => {
+         setTimeout(() => {
+          this.load.add = false;
+        }, 2000);
+      })
+    },
+
+    //查询订单支付状态
+    queryOrderStatus(orderId) {
+      console.log("查询订单");
+      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);
+        }else {
+        }
+      }).finally(() => {
+
+      })
+    },
+
+    closeDialog() {
+      clearInterval(this.timer);
+    }
+
+  },
+
+  created() {
+    let data = JSON.parse(window.localStorage.getItem("BUY_MODULES"));
+    this.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 {
+        .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>
diff --git a/src/views/order/enterprise.vue b/src/views/order/enterprise.vue
new file mode 100644
index 0000000..8d20b2d
--- /dev/null
+++ b/src/views/order/enterprise.vue
@@ -0,0 +1,297 @@
+<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" v-if="this.modules != null">
+        <div v-for="(item, index) in modules[active]" :key="index">
+          <div v-if="ooper==='2' && item.billMode!=='0' && item.isBuy" class="module">
+            <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.isBuy" class="module_bottom">
+                  <i v-if="item.isChecked" class="selected el-icon-success"></i>
+                  <span> <font color="red">  待续费 </font> <font  title="到期" style="font-size:10px;">  {{formatDate(item.endTime)}} </font></span>
+                </div>
+              </div>
+          </div>
+          <div v-else-if="ooper!=='2' && item.billMode!=='0' " class="module">
+            <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.billMode==='0'"  class="module_bottom">
+                <span> <font color="red">免费 </font> <font color="blue">已开通</font></span>
+              </div>
+              <div v-else-if="item.isBuy" class="module_bottom">
+                <span> <font color="blue">已开通</font></span>
+              </div>
+              <div v-else class="module_bottom" >
+                  <i v-if="item.isChecked" class="selected el-icon-success"></i>
+                  <span> <font color="red">待开通</font></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="buy_count">
+      <h2>
+        购买总人数
+        <span>(10人起购,请按企业(团队)总人数填写，企业(团队)总人数代表了企业在唛盟平台可开立免费账户的总个数)</span>
+      </h2>
+
+      <div class="buy_count_items">
+         <el-input-number v-if="branchUsersCpd.ilvlId>1" v-model="form.ousers" :min="branchUsersCpd.maxUsers" @change="formOusersChange"></el-input-number>
+
+         <el-input-number v-else  v-model="form.ousers" :min="10" @change="formOusersChange"></el-input-number>
+      </div>
+    </div>
+
+    <div class="buy_date">
+      <h2>期限选择</h2>
+      <div class="buy_date_items">
+        <div class="oItem" @click="selectBuyDate(item)" v-for="(item, index) in odaysOptions" :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>{{orders.order?orders.order.ofinalFee:''}}</b>/{{form.label}}</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 {calcOrder} from '@/api/mdp/sys/order'
+
+import aliPay from '@/assets/image/module/alipay.png';
+import weixinPay from '@/assets/image/module/weixin.png'
+import Decimal from "decimal.js"  // 具体文件中引入
+import getDecimal from '@/utils/decimalUtil.js'
+
+export default {
+  props: ['modules', 'ooper'],
+  data() {
+    return {
+      menuLoading: false,
+      active: "xmgl",
+      payWayOptions: [
+        {
+          label: '支付宝',
+          val: '2',
+          icon: aliPay,
+          isChecked: true
+        },
+        {
+          label: '微信',
+          val: '1',
+          icon: weixinPay,
+          isChecked: false
+        }
+      ],
+      odaysOptions: [
+        {
+          label: '1年',
+          val: '360',
+          isHot: true,
+          isChecked: true,
+          price: '2'
+        },
+        {
+          label: '6个月',
+          val: '180',
+          isHot: false,
+          isChecked: false,
+          price: '2'
+        },
+        {
+          label: '3个月',
+          val: '90',
+          isHot: false,
+          isChecked: false,
+          price: '2'
+        },
+      ],
+      form: {
+        moduleIds:[],
+        payType: '1',
+        odays: '360',
+        label:'1年',
+        ousers:10,
+        phone: '',
+        checked: false,
+      },
+      orders:{order:{ofinalFee:0},modules:[]},
+      branchUsersCpd:{istatus:'1',maxUsers:50,ilvlId:'2',ilvlName:'黄金会员'}
+    }
+  },
+
+  computed: {
+    ...mapGetters([
+      'userInfo'
+    ]),
+  },
+
+  watch: {
+
+    'form.ousers':function(val,oldValue){
+      this.calcOrder();
+    }
+  },
+
+  methods: {
+    formatDate(dateStr){
+      if(dateStr){
+        return dateStr.substring(0,10)
+      }else{
+        return '';
+      }
+    },
+    formOusersChange(val){
+      if(this.branchUsersCpd && this.branchUsersCpd.istatus=='1'){
+        if(val<=this.branchUsersCpd.maxUsers){
+          this.form.ousers=this.branchUsersCpd.maxUsers
+          this.$notify({position:"bottom-left",message:"您当前已拥有创建"+this.branchUsersCpd.maxUsers+"个账户资格，企业总人数不能低于"+this.branchUsersCpd.maxUsers,type:"warning"})
+
+          return false;
+        }
+
+      }
+    },
+    calcOrder:function() {
+      if(!this.form.moduleIds || this.form.moduleIds.length==0){
+        if(this.orders && this.orders.order){
+          this.orders={order:{ofinalFee:0},moduleIds:[]}
+        }
+         return;
+      }
+      this.form.ooper=this.ooper;
+       calcOrder(this.form).then(res=>{
+         var tips = res.data.tips;
+         if(tips.isOk){
+            this.orders.order=res.data.data
+            this.orders.modules=res.data.modules
+            this.odaysOptions.forEach(i=>{
+                i.price=parseInt(this.orders.order.ofinalFee/this.form.ousers/this.form.odays  )
+            })
+         }else{
+            this.$notify({position:"bottom-left",message:tips.msg,type:"error"})
+         }
+
+       })
+    },
+    selectItem(item) {
+
+      if(this.ooper!='2' && item.isBuy){
+        this.$notify({position:"bottom-left",message:"【"+item.name+"】已购买，如需调整，请进入【我的订单->加购】 处理",type:"warning"})
+        return;
+      }
+
+        if(  item.billMode==='0'){
+          this.$notify({position:"bottom-left",message:"【"+item.name+"】为免费开通，无须下单。",type:"warning"})
+          return false;
+        }
+       item.isChecked=!item.isChecked;
+       if(item.isChecked==false){
+          this.form.moduleIds=this.form.moduleIds.filter(i=>i!=item.id)
+       }else  if(item.isChecked==true && !this.form.moduleIds.some(i=>i==item.id)){
+         this.form.moduleIds.push(item.id)
+       }
+       this.calcOrder();
+    },
+
+    selectPayWay(item) {
+      this.form.payType = item.val;
+      this.payWayOptions.forEach(element => {
+        element.isChecked = false;
+        if(item.val == element.val) {
+          element.isChecked = true;
+        }
+      });
+    },
+
+    selectBuyDate(item) {
+      this.form.odays = item.val;
+      this.odaysOptions.forEach(element => {
+        element.isChecked = false;
+        if(item.val == element.val) {
+          element.isChecked = true;
+        }
+      });
+      this.form.odays=item.val
+      this.form.label=item.label
+       this.calcOrder();
+    },
+
+
+    getData() {
+      let obj = {
+        ...this.orders,
+        ...this.form,
+        opper:this.ooper,
+      }
+      return obj;
+    },
+  },
+
+  mounted() {
+    this.form.phone = this.userInfo.phoneno;
+    this.$mdp.getBranchInterestsDetail().then(res=>{
+      Object.assign(this.branchUsersCpd,res.data.data);
+      if(this.branchUsersCpd.branchId && this.branchUsersCpd.istatus=='1'){
+         this.form.ousers=this.branchUsersCpd.maxUsers
+         //this.calcOrder();
+      }
+
+    })
+  }
+
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/views/order/flagShip.vue b/src/views/order/flagShip.vue
new file mode 100644
index 0000000..7a26cb4
--- /dev/null
+++ b/src/views/order/flagShip.vue
@@ -0,0 +1,164 @@
+<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() {
+        // 自定义验证
+        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: [
+                {
+                    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: {
+                phone: '',
+                contacts: '',
+                usePeoples: '',
+                needs: [],
+            },
+            rules: {
+                contacts: [
+                    { required: true, message: '请输入联系人', trigger: 'blur' },
+                ],
+                phone: [
+                    { required: true, trigger: 'blur', validator: validPhone }
+                ],
+                usePeoples: [
+                    { required: true, message: '请选择使用人数', trigger: 'blur' },
+                ],
+                needs: [
+                    { required: true, message: '请选择服务需求', trigger: 'blur' },
+                ],
+            }
+        }
+    },
+
+    methods: {
+        getData() {
+            //验证表单
+            return new Promise((resolve, reject) => {
+                this.$refs['form'].validate((valid) => {
+                    if (valid) {
+                        resolve(this.form);
+                    } else {
+                        reject(new Error('前检查表单项是否填写正确'))
+                    }
+                });
+            })
+        },
+        clearForm() {
+            this.form.phone = "";
+            this.form.contacts = "";
+            this.form.usePeoples = "";
+            this.form.needs = [];
+        }
+    },
+
+
+}
+</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>
diff --git a/src/views/order/index.scss b/src/views/order/index.scss
new file mode 100644
index 0000000..a302315
--- /dev/null
+++ b/src/views/order/index.scss
@@ -0,0 +1,367 @@
+.full_continer {
+    width: 100%;
+    height: 100%;
+    overflow: hidden; 
+    position: relative;
+    .banner {
+        margin-top: 35px;
+        height: 32px;
+        text-align: center;
+        border-bottom: 32px solid;
+        border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#D8E0F5 40%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
+        p {
+            line-height: 32px;
+        }
+    }
+}
+
+h2 {
+    font-size: 28px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #303030;
+}
+
+.flux_continer {
+    width: 80%;
+    height: 100%;
+    margin: 0 auto;
+    .content {
+        .top_desc {
+            h2 {
+                margin-top: 60px;
+            }
+            p {
+                margin-top: 34px;
+                color: #7D7D7D;
+                font-size: 20px;
+            }
+        }
+
+        .version {
+            margin-top: 38px;
+            .version_item {
+                display: flex;
+                flex-direction: row;
+                .oItem:nth-child(2) {
+                    background-color: #F8F6F4;
+                }
+                .oItem {
+                    position: relative;
+                    margin-top: 24px;
+                    display: flex;
+                    flex-direction: row;
+                    width: 220px;
+                    height: 110px;
+                    margin-right: 20px;
+                    border-radius: 5px;
+                    background-color: #F4F5F8;
+                    cursor: pointer;
+                    img {
+                        width: 110px;
+                        height: 110px;
+                    }
+                    .desc {
+                        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: 14px;
+                        }
+                    }
+                }
+                .select {
+                    font-size: 30px;
+                    position: absolute;
+                    right: 5px;
+                    top: 2px;
+                    color: #409EFF;
+                }
+            }
+        }
+
+        .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;
+            }
+            .selectItem {
+                display: flex;
+                flex-direction: row;
+                .item {
+                    display: flex;
+                    margin-right: 60px;
+                    height: 46px;
+                    align-items: center;
+                    cursor: pointer;
+                    font-size: 18px;
+                }
+                .active {
+                    font-size: 22px;
+                    color: rgb(116, 155, 242);
+                }
+            }
+        }
+        .sys_modules {
+            margin-top: 30px;
+            display: flex;
+            flex-wrap: wrap;
+            .active {
+                border: 2px solid rgb(116, 155, 242) !important;
+            }
+            .module {
+                display: flex;
+                flex-direction: column;
+                background: #FFFFFF;
+                margin-right: 30px;
+                margin-top:30px;
+                .head {
+                    width: 180px;
+                    height: 200px;
+                    border: 1px solid #E3E4E6;
+                    border-radius: 8px; 
+                    position: relative;
+                    cursor: pointer;
+                    .module_top {
+                        display: flex;
+                        height: 170px;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                        text-align: center;
+                        img {
+                            width: 90px;
+                            height: 90px;
+                            margin-top: 20px;
+                        }
+                        span {
+                            color: #606060;
+                            margin-top: 20px;
+                            font-size: 18px;
+                        }
+                    }
+                    .module_bottom {  
+                        .selected { 
+                            font-size: 30px;
+                            position: absolute;
+                            right: 10px;
+                            top:5px;
+                            color: #409EFF;
+                        }
+                        span{ 
+                            font-size: 14px;
+                            position: absolute;
+                            left: 10px;
+                            top: 5px;
+                            color: #409EFF;
+                        }
+                    } 
+
+                }
+
+                .footer {
+                    margin-bottom: 20px;
+                }
+            }
+
+
+        }
+    }
+    .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: 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 {
+            display: flex;
+            flex-direction: row;
+            .oItem {
+                display: flex;
+                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;
+                    align-items: center;                    
+                    img { 
+                        width: 113px;
+                        height: 40px;
+                    }
+                    p {
+                        margin-top: 12px;
+                    }
+                    .normal {
+                        margin-top: 57px;
+                    }
+                }
+  
+            }
+        }
+    }
+  
+    .pay_way {
+        margin-top: 50px;
+        h2 {
+            margin-bottom: 20px;
+        }
+        .pay_way_items {
+            display: flex;
+            .oItem {
+                display: flex;
+                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: 22px;
+            font-weight: bold;
+            color: #FA5A55;
+            margin-bottom: 20px;
+            b {
+                font-size: 38px;
+            }
+        }
+    }
+}
+
+
+.avatar-container {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    .avatar-wrapper {
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .user-avatar {
+            height: 34px;
+            width: 34px;
+            border-radius: 50%;
+            margin-right: 12px;
+        }
+        .username{
+            color: #7D7D7D;
+            font-size: 18px;
+            margin-right: 2px;
+        }
+        .el-icon-caret-bottom {
+            font-size: 22px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
new file mode 100644
index 0000000..5d94381
--- /dev/null
+++ b/src/views/order/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="full_continer">
+    <div class="banner">
+      <p>购买流程:&nbsp;&nbsp;&nbsp;1.选择模块 》2.确认订单 》 3.支付 》 4.完成</p>
+    </div>
+
+    <div class="flux_continer">
+
+      <orderSkeleton v-if="menuLoading" />
+
+      <div class="content" v-else>
+        <div class="top_desc">
+          <h2>购买订单</h2>
+          <p>团队名: {{userInfo.branchName?userInfo.branchName:userInfo.branchId}}</p>
+        </div>
+
+        <div class="version">
+          <h2>选择版本</h2>
+          <div class="version_item">
+            <div @click="selectVersion(item)" class="oItem" v-for="(item, index) in version" :key="index">
+              <img :src='item.img'>
+              <div class="desc">
+                <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="version_all">
+          <flag-ship ref="flagship" v-if="currentSelectVersion == '旗舰版'"></flag-ship>
+          <enterprise ref="enterprise" :modules="modules" v-if="currentSelectVersion == '企业版'"  :ooper="'1'"></enterprise>
+        </div>
+
+        <el-button :loading="submitLoading" @click="submitOrder" size="larget" class="submit" type="primary">
+          {{currentSelectVersion == '企业版' ? '提交订单' : '提交信息'}}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+//图标
+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 "../layout/ModulesMenu/modulesOfIcon.js";
+import {createFlagShipOrder} from '@/api/mdp/sys/order';
+
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {FlagShip, Enterprise, orderSkeleton},
+
+  computed: {
+      ...mapGetters([ 'userInfo'  ]),
+
+  },
+  data() {
+    return {
+      version: [
+        {
+          name: '企业版',
+          desc: '(10人起购)',
+          isChecked: true,
+          img: EnterpriseVersionIcon
+        },
+        {
+          name: '旗舰版',
+          desc: '(50人起购)',
+          isChecked: false,
+          img: FlagShipIcon
+        }
+      ],
+      currentSelectVersion: '企业版',
+      menuLoading: false,
+      modules: null,
+      submitLoading: false,
+    }
+  },
+
+  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.getData();
+        //验证手机号是否填写
+        if(data.phone == "" || data.phone == null || data.phone == undefined) {
+          this.$notify({
+            message: '请输入手机号',
+            type: 'warning'
+          });
+          return;
+        }
+
+        //验证是否同意服务协议
+        if(!data.checked) {
+          this.$notify({
+            message: '请先同意服务协议',
+            type: 'warning'
+          });
+          return;
+        }
+
+        //保存购买模块信息到本地
+        if(data.moduleIds.length <= 0) {
+          this.$notify({
+            message: '请选择要购买的模块',
+            type: 'warning'
+          });
+          return
+        }
+
+        window.localStorage.setItem("BUY_MODULES",  JSON.stringify(data))
+        this.$router.push('/my/order/create')
+      }else {
+        let flagData = this.$refs.flagship.getData();
+        flagData.then((res) => {
+          //创建订单
+          res.needs = JSON.stringify(res.needs);
+          this.submitLoading = true;
+          createFlagShipOrder(res).then(res => {
+            if(res.data.tips.isOk){
+              this.$notify.success("信息已提交，稍后我们将会联系您");
+              this.$refs.flagship.clearForm();
+            }else{
+              this.$notify.error(res.data.tips.msg);
+            }
+          }).catch(err => {
+            this.$notify.error(err.msg);
+          }).finally(() => {
+            this.submitLoading = false;
+          })
+        }).catch(err => {
+
+        })
+
+      }
+    },
+
+    //获取所有模块
+    getAllModules() {
+        this.menuLoading = true
+        getAllMenuModule({}).then(res => {
+            let tempData = res.data.data;
+            tempData.forEach(i=>{
+              i.isChecked=false
+              i.musers=10
+              i.isBuy=false
+              i.endTime=''
+            })
+            getBuyMenuModule({}).then(res2 => {
+                let branchModules = res2.data.data;
+                tempData.forEach(k => {
+                    branchModules.forEach(element => {
+                        if(k.id == element.moduleId && element.status=='1') {
+                            k.isBuy = true;
+                            k.musers=element.musers
+                            k.endTime=element.endTime
+                        }
+                    });
+                    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.modules = {
+                    "xmgl": xmMenus,
+                    "oa" : oaMunus,
+                    "mall": mallMenus
+                }
+            })
+        }).finally(() => this.menuLoading = false)
+    }
+
+  },
+
+    mounted(){
+         this.getAllModules();
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/views/order/list.vue b/src/views/order/list.vue
new file mode 100644
index 0000000..df250a5
--- /dev/null
+++ b/src/views/order/list.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+      订单列表
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/order/paySuccess.vue b/src/views/order/paySuccess.vue
new file mode 100644
index 0000000..34a9cff
--- /dev/null
+++ b/src/views/order/paySuccess.vue
@@ -0,0 +1,65 @@
+<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;">您已成功支付￥ {{params.total_amount}} 元</p>
+                <p style="margin-bottom: 6px;font-size: 16px;">订单号：{{params.out_trade_no}} （查看订单）</p>
+            </template>
+            <template slot="extra">
+                <el-button type="primary" size="larget" @click="goBuyAgain()">继续购买</el-button>
+                <el-button size="larget" @click="returnHome()">返回首页</el-button>
+            </template>
+        </el-result>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+       return {
+            params: {},
+       }
+    },
+
+    created() {
+        const href = window.location.href;
+        this.params = this.urlParamsHash(href);
+        console.log(this.params, "params");
+    },
+
+    methods: {
+        returnHome() {
+            this.$router.push({path:'/dashboard'})
+        },
+
+        goBuyAgain() {
+            this.$router.push({path:'/my/order/index'})
+        },
+
+        urlParamsHash(url) {
+            var params = {}
+            var h
+            var hash = url.slice(url.indexOf('?') + 1).split('&')
+            for(var i = 0; i < hash.length; i++) {
+                h = hash[i].split('=')
+                params[h[0]] = h[1]
+            }
+            return params;
+        }
+
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.result {
+    height: 600px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+</style>
diff --git a/src/views/order/renewIndex.vue b/src/views/order/renewIndex.vue
new file mode 100644
index 0000000..271bfbe
--- /dev/null
+++ b/src/views/order/renewIndex.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="full_continer">
+    <div class="banner">
+      <p>购买流程:&nbsp;&nbsp;&nbsp;1.选择模块 》2.确认订单 》 3.支付 》 4.完成</p>
+    </div>
+
+    <div class="flux_continer">
+
+      <orderSkeleton v-if="menuLoading" />
+
+      <div class="content" v-else>
+        <div class="top_desc">
+          <h2>续费订单</h2>
+          <p>团队名: {{userInfo.branchName?userInfo.branchName:userInfo.branchId}}</p>
+        </div>
+        <div class="version_all">
+           <enterprise ref="enterprise" :modules="modules" :ooper="'2'"></enterprise>
+        </div>
+        <el-button :loading="submitLoading" @click="submitOrder" size="larget" class="submit" type="primary">
+          提交订单
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//组件
+import Enterprise from './enterprise'
+import orderSkeleton from './components/orderSkeleton'
+import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules'
+import {modulesOfIcon} from "../layout/ModulesMenu/modulesOfIcon.js";
+
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {Enterprise, orderSkeleton},
+
+  computed: {
+      ...mapGetters([ 'userInfo'  ]),
+
+  },
+  data() {
+    return {
+      menuLoading: false,
+      modules: null,
+      submitLoading: false,
+    }
+  },
+
+  methods: {
+    submitOrder() {
+        let data = this.$refs.enterprise.getData();
+        //验证手机号是否填写
+        if(data.phone == "" || data.phone == null || data.phone == undefined) {
+          this.$notify({
+            message: '请输入手机号',
+            type: 'warning'
+          });
+          return;
+        }
+
+        //验证是否同意服务协议
+        if(!data.checked) {
+          this.$notify({
+            message: '请先同意服务协议',
+            type: 'warning'
+          });
+          return;
+        }
+
+        //保存购买模块信息到本地
+        if(data.moduleIds.length <= 0) {
+          this.$notify({
+            message: '请选择要购买的模块',
+            type: 'warning'
+          });
+          return
+        }
+
+        window.localStorage.setItem("BUY_MODULES",  JSON.stringify(data))
+        this.$router.push('/my/order/create')
+    },
+
+    //获取所有模块
+    getAllModules() {
+        this.menuLoading = true
+        getAllMenuModule({}).then(res => {
+            let tempData = res.data.data;
+            tempData.forEach(i=>{
+              i.isChecked=false
+              i.musers=10
+              i.isBuy=false
+              i.endTime=''
+            })
+            getBuyMenuModule({}).then(res2 => {
+                let branchModules = res2.data.data;
+                tempData.forEach(k => {
+                    branchModules.forEach(element => {
+                        if(k.id == element.moduleId && element.status=='1') {
+                            k.isBuy = true;
+                            k.musers=element.musers
+                            k.endTime=element.endTime
+                        }
+                    });
+                    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.modules = {
+                    "xmgl": xmMenus,
+                    "oa" : oaMunus,
+                    "mall": mallMenus
+                }
+            })
+        }).finally(() => this.menuLoading = false)
+    }
+
+  },
+
+    mounted(){
+         this.getAllModules();
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>