diff --git a/src/api/ss/vipOrder.js b/src/api/ss/vipOrder.js
new file mode 100644
index 0000000..09a2cbd
--- /dev/null
+++ b/src/api/ss/vipOrder.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询会员订单列表
+export function listVipOrder(query) {
+  return request({
+    url: '/ss/vipOrder/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询会员订单详细
+export function getVipOrder(id) {
+  return request({
+    url: '/ss/vipOrder/' + id,
+    method: 'get'
+  })
+}
+
+// 新增会员订单
+export function addVipOrder(data) {
+  return request({
+    url: '/ss/vipOrder',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改会员订单
+export function updateVipOrder(data) {
+  return request({
+    url: '/ss/vipOrder',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除会员订单
+export function delVipOrder(id) {
+  return request({
+    url: '/ss/vipOrder/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 0e00302..06824f8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -99,7 +99,21 @@ export const constantRoutes = [
   {
     path: '/liveness',
     component: () => import('@/views/mobile/liveness/index')
-  }
+  },
+  {
+    path: '/view',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'vipOrder/:id?',
+        component: () => import('@/views/ss/vipOrder/view/index'),
+        name: 'VipOrderView',
+        meta: { title: 'VIP订单详情' }
+      }
+    ]
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载
diff --git a/src/utils/constants.js b/src/utils/constants.js
index c7e7e86..b37abf6 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -8,7 +8,8 @@ export const views = {
   withdraw: 'withdraw', // 提现
   recharge: 'recharge', // 充值订单
   agent: 'agent', // 代理商
-
+  vipOrder: 'vipOrder', // 会员订单
+  
   mchStore: 'mchStore', // 商户中心的店铺
 }
 
@@ -121,6 +122,7 @@ export const SuitFeeMode = {
 export const PayBillBstType = {
   RECHARGE: "3",  // 充值订单
   RECHARGE_DEPOSIT: "4", // 充值订单押金
+  VIP_ORDER: "6", // 会员订单
 }
 
 export const PayBillStatus = {
@@ -332,3 +334,9 @@ export const VipLevelSkuLimitType = {
   MONTH: "3", // 月（30天）
 }
 
+// 会员订单状态
+export const VipOrderStatus = {
+  WAIT_PAY: "1", // 待支付
+  SUCCESS: "2", // 支付成功
+  CANCEL: "3", // 已取消
+}
diff --git a/src/views/ss/vipOrder/index.vue b/src/views/ss/vipOrder/index.vue
new file mode 100644
index 0000000..a6269e7
--- /dev/null
+++ b/src/views/ss/vipOrder/index.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="订单编号" prop="orderNo">
+        <el-input
+          v-model="queryParams.orderNo"
+          placeholder="请输入订单编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="商户" prop="mchName">
+        <el-input
+          v-model="queryParams.mchName"
+          placeholder="请输入商户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="VIP等级" prop="levelName">
+        <el-input
+          v-model="queryParams.levelName"
+          placeholder="请输入VIP等级名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="SKU" prop="skuName">
+        <el-input
+          v-model="queryParams.skuName"
+          placeholder="请输入sku名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="使用限制" prop="skuLimitType">
+        <el-select v-model="queryParams.skuLimitType" placeholder="请选择使用限制" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.vip_level_sku_limit_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="实付金额" prop="amount">
+        <el-input
+          v-model="queryParams.amount"
+          placeholder="请输入实付金额"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="支付订单" prop="payNo">
+        <el-input
+          v-model="queryParams.payNo"
+          placeholder="请输入支付订单编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="订单状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择订单状态" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.vip_order_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['ss:vipOrder:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="vipOrderList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <template v-for="column of showColumns">
+        <el-table-column
+            :key="column.key"
+            :label="column.label"
+            :prop="column.key"
+            :align="column.align"
+            :min-width="column.minWidth"
+            :sort-orders="orderSorts"
+            :sortable="column.sortable"
+            :show-overflow-tooltip="column.overflow"
+            :width="column.width"
+        >
+          <template slot-scope="d">
+            <template v-if="column.key === 'id'">
+              {{d.row[column.key]}}
+            </template>
+            <template v-else-if="column.key === 'skuLimitType'">
+              <dict-tag :options="dict.type.vip_level_sku_limit_type" :value="d.row[column.key]"/>
+            </template>
+            <template v-else-if="column.key === 'status'">
+              <dict-tag :options="dict.type.vip_order_status" :value="d.row[column.key]"/>
+            </template>
+            <template v-else-if="column.key === 'levelSolution'">
+              <dict-tag :options="dict.type.vip_level_solution" :value="d.row[column.key]"/>
+            </template>
+            <template v-else-if="column.key === 'userName'">
+              <user-link :id="d.row.userId" :name="d.row.userName"/>
+            </template>
+            <template v-else-if="column.key === 'mchName'">
+              <user-link :id="d.row.mchId" :name="d.row.mchName"/>
+            </template>
+            <template v-else-if="column.key === 'levelDiscount'">
+              {{d.row[column.key] | dv}} 折
+            </template>
+            <template v-else-if="column.key === 'skuTime'">
+              {{d.row[column.key]}} 天
+            </template>
+            <template v-else-if="column.key === 'skuLimitCount'">
+              {{d.row[column.key]}} 次
+            </template>
+            <template v-else-if="column.key === 'amount'">
+              {{d.row[column.key] | fix2 | dv}} 元
+            </template>
+            <template v-else>
+              {{d.row[column.key]}}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+            v-hasPermi="['ss:vipOrder:query']"
+          >详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listVipOrder, getVipOrder, delVipOrder, addVipOrder, updateVipOrder } from "@/api/ss/vipOrder";
+import UserLink from "@/components/Business/SmUser/UserLink.vue";
+import { $showColumns } from '@/utils/mixins';
+
+// 默认排序字段
+const defaultSort = {
+  prop: "createTime",
+  order: "descending"
+}
+
+export default {
+  name: "VipOrder",
+  mixins: [$showColumns],
+  components: { UserLink },
+  dicts: ['vip_level_sku_limit_type', 'vip_order_status','vip_level_solution'],
+  data() {
+    return {
+      // 字段列表
+      columns: [
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'orderNo', visible: true, label: '订单编号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'userName', visible: true, label: '用户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'mchName', visible: true, label: '商户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'levelName', visible: true, label: '等级', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'levelDiscount', visible: true, label: '折扣', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'levelSolution', visible: true, label: '续费方案', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'skuName', visible: true, label: 'SKU', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'skuTime', visible: true, label: '购买时长', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'skuLimitType', visible: true, label: '使用限制', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'skuLimitCount', visible: true, label: '限制次数', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'amount', visible: true, label: '金额', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '下单时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
+        {key: 'expireTime', visible: false, label: '过期时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
+        {key: 'payNo', visible: true, label: '支付订单', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        
+      ],
+      // 排序方式
+      orderSorts: ['ascending', 'descending', null],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 会员订单表格数据
+      vipOrderList: [],
+      defaultSort,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        orderByColumn: defaultSort.prop,
+        isAsc: defaultSort.order,
+        id: null,
+        orderNo: null,
+        userName: null,
+        mchName: null,
+        levelName: null,
+        levelDiscount: null,
+        levelSolution: null,
+        skuName: null,
+        skuTime: null,
+        skuLimitType: null,
+        skuLimitCount: null,
+        amount: null,
+        payNo: null,
+        status: null
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 当排序按钮被点击时触发 **/
+    onSortChange(column) {
+      if (column.order == null) {
+        this.queryParams.orderByColumn = defaultSort.prop;
+        this.queryParams.isAsc = defaultSort.order;
+      } else {
+        this.queryParams.orderByColumn = column.prop;
+        this.queryParams.isAsc = column.order;
+      }
+      this.getList();
+    },
+    /** 查询会员订单列表 */
+    getList() {
+      this.loading = true;
+      listVipOrder(this.queryParams).then(response => {
+        this.vipOrderList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加会员订单";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getVipOrder(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改会员订单";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateVipOrder(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addVipOrder(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除会员订单编号为"' + ids + '"的数据项？').then(function() {
+        return delVipOrder(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ss/vipOrder/export', {
+        ...this.queryParams
+      }, `vipOrder_${new Date().getTime()}.xlsx`)
+    },
+    /** 查看详情按钮操作 */
+    handleView(row) {
+      this.$router.push({ path: `/view/vipOrder/${row.id}` })
+    }
+  }
+};
+</script>
diff --git a/src/views/ss/vipOrder/view/index.vue b/src/views/ss/vipOrder/view/index.vue
new file mode 100644
index 0000000..fb2b3cd
--- /dev/null
+++ b/src/views/ss/vipOrder/view/index.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="app-container" v-loading="loading">
+    <!-- 顶部金额卡片 -->
+    <el-row :gutter="12" class="amount-cards">
+      <el-col :span="8">
+        <el-card shadow="hover" class="amount-card">
+          <div class="amount-title">
+            <i class="el-icon-money"></i>
+            订单金额
+          </div>
+          <div class="amount-value">¥ {{ detail.amount | fix2 | dv }}</div>
+          <div class="amount-extra">支付单号：{{ detail.payNo | dv}}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="hover" class="amount-card">
+          <div class="amount-title">
+            <i class="el-icon-discount"></i>
+            折扣信息
+          </div>
+          <div class="amount-value">{{ detail.levelDiscount | dv }} 折</div>
+          <div class="amount-extra">{{ detail.levelName }}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="hover" class="amount-card">
+          <div class="amount-title">
+            <i class="el-icon-time"></i>
+            购买时长
+          </div>
+          <div class="amount-value">{{ detail.skuTime | dv }} 天</div>
+          <div class="amount-extra">{{detail.skuName | dv}}</div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 主要信息卡片 -->
+    <el-card class="main-card">
+      <div class="card-header">
+        <div class="order-no">
+          <i class="el-icon-document"></i>
+          订单号：{{ detail.orderNo }}
+        </div>
+      </div>
+
+      <el-descriptions :column="4" border class="mt10">
+        <el-descriptions-item label="订单状态">
+          <dict-tag :options="dict.type.vip_order_status" :value="detail.status" size="small"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="用户">
+          <user-link :id="detail.userId" :name="detail.userName"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="商户">
+          <user-link :id="detail.mchId" :name="detail.mchName"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="下单时间">
+          {{ detail.createTime }}
+        </el-descriptions-item>
+        <el-descriptions-item label="过期时间">
+          {{ detail.expireTime }}
+        </el-descriptions-item>
+        <el-descriptions-item label="SKU名称">
+          {{ detail.skuName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="使用限制">
+          <div class="flex-row">
+            <dict-tag :options="dict.type.vip_level_sku_limit_type" :value="detail.skuLimitType" size="small"/>
+            <template v-if="detail.skuLimitCount">
+              <span class="limit-count">({{ detail.skuLimitCount }}次)</span>
+            </template>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="续费方案">
+          <dict-tag :options="dict.type.vip_level_solution" :value="detail.levelSolution" size="small"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="可用店铺" :span="2">
+            <el-tag v-for="store in detail.storeNameList" :key="store.storeId" size="small">{{store.name | dv}}</el-tag>
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <!-- 取消信息 -->
+      <template v-if="detail.status === VipOrderStatus.CANCEL">
+        <el-descriptions :column="2" border size="small" class="mt10">
+          <el-descriptions-item label="取消时间">{{ detail.cancelTime }}</el-descriptions-item>
+          <el-descriptions-item label="取消原因" class="cancel-reason">{{ detail.cancelReason }}</el-descriptions-item>
+        </el-descriptions>
+      </template>
+    </el-card>
+
+		<el-card class="box-card">
+			<el-tabs>
+        <el-tab-pane label="收益列表" lazy>
+          <bonus v-if="detail.id != null" :query="{billId: detail.id}"  :view="views.vipOrder"/>
+        </el-tab-pane>
+        <el-tab-pane label="支付信息" lazy>
+          <pay-bill :query="{bstId: detail.id, bstType: PayBillBstType.VIP_ORDER}" :view="views.vipOrder"/>
+        </el-tab-pane>
+			</el-tabs>
+		</el-card>
+  </div>
+</template>
+
+<script>
+import { getVipOrder } from "@/api/ss/vipOrder";
+import UserLink from "@/components/Business/SmUser/UserLink.vue";
+import { VipOrderStatus, PayBillBstType, views} from "@/utils/constants";
+import Bonus from "@/views/ss/bonus/index.vue";
+import PayBill from "@/views/ss/payBill/index.vue";
+
+export default {
+  name: "VipOrderView",
+  components: { UserLink, Bonus, PayBill },
+  dicts: ['vip_level_sku_limit_type', 'vip_order_status', 'vip_level_solution'],
+  data() {
+    return {
+			VipOrderStatus,
+      PayBillBstType,
+      detail: {},
+      loading: false,
+			views,
+    };
+  },
+  created() {
+    const id = this.$route.params.id;
+    if (id) {
+      this.getInfo(id);
+    }
+  },
+  methods: {
+    getInfo(id) {
+      this.loading = true;
+      getVipOrder(id).then(response => {
+        this.detail = response.data;
+      }).finally(() => {
+        this.loading = false;
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 10px;
+}
+
+.amount-cards {
+  margin-bottom: 12px;
+  .amount-card {
+    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
+    color: white;
+    ::v-deep .el-card__body {
+      padding: 15px;
+    }
+    .amount-title {
+      font-size: 13px;
+      opacity: 0.9;
+      i {
+        margin-right: 4px;
+      }
+    }
+    .amount-value {
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 28px;
+      margin: 8px 0;
+    }
+    .amount-extra {
+      font-size: 12px;
+      opacity: 0.8;
+    }
+  }
+}
+
+.main-card {
+  ::v-deep .el-card__body {
+    padding: 15px;
+  }
+  
+  .card-header {
+    margin-bottom: 15px;
+    .order-no {
+      font-size: 14px;
+      i {
+        margin-right: 6px;
+        color: #1890ff;
+      }
+    }
+  }
+}
+
+.mt10 {
+  margin-top: 10px;
+}
+
+.flex-row {
+  display: flex;
+  align-items: center;
+  .limit-count {
+    margin-left: 8px;
+    color: #909399;
+  }
+}
+
+::v-deep .el-descriptions {
+  .el-descriptions-item__label {
+    width: 100px;
+    color: #606266;
+  }
+  .cancel-reason {
+    color: #f56c6c;
+  }
+}
+
+.ml10 {
+  margin-left: 10px;
+}
+</style>
\ No newline at end of file