Kaynağa Gözat

新增优惠券 订单详情 退款记录页面

zhangdan 4 yıl önce
ebeveyn
işleme
76b2189b36

+ 82 - 5
src/config/router.config.js

@@ -71,13 +71,90 @@ export const asyncRouterMap = [
         icon: 'snippets'
         // permission: 'M_setting_0'
       },
+      children: [
+        {
+          path: '/Order/OrderCenter',
+          name: 'OrderCenter',
+          component: () => import('@/views/Order/OrderCenter.vue'),
+          meta: {
+            title: '订单中心',
+            icon: 'snippets'
+          // permission: 'M_sys_dataDictionary'
+          }
+          // hideChildrenInMenu: true,
+          // children: [
+          //   {
+          //     path: '/Order/OrderCenter',
+          //     name: 'OrderCenter',
+          //     component: () => import('@/views/Order/OrderCenter.vue'),
+          //     meta: {
+          //       title: '订单中心',
+          //       icon: 'snippets'
+          //     // permission: 'M_sys_dataDictionary'
+          //     }
+          //   },
+          //   {
+          //     path: '/Order/OrderDetail',
+          //     name: 'OrderDetail',
+          //     component: () => import('@/views/Order/OrderDetail.vue'),
+          //     meta: {
+          //       title: '订单详情',
+          //       icon: 'snippets'
+          //     // permission: 'M_sys_dataDictionary'
+          //     }
+          //   }
+          // ]
+        },
+        {
+          path: '/Order/OrderDetail',
+          name: 'OrderDetail',
+          component: () => import('@/views/Order/OrderDetail.vue'),
+          meta: {
+            title: '订单详情',
+            icon: 'snippets'
+          // permission: 'M_sys_dataDictionary'
+          }
+        }
+
+      ]
+    },
+    {
+      path: '/RefundRecord',
+      redirect: '/RefundRecord/RefundRecord',
+      component: PageView,
+      meta: {
+        title: '退单记录',
+        icon: 'setting'
+        // permission: 'M_setting_0'
+      },
+      children: [{
+        path: '/RefundRecord/RefundRecord',
+        name: 'RefundRecord',
+        component: () => import('@/views/RefundRecord/RefundRecord.vue'),
+        meta: {
+          title: '退单记录',
+          icon: 'setting'
+          // permission: 'M_sys_dataDictionary'
+        }
+      }
+      ]
+    },
+    {
+      path: '/CouponStatistics',
+      redirect: '/CouponStatistics/CouponStatistics',
+      component: PageView,
+      meta: {
+        title: '优惠券统计',
+        icon: 'setting'
+        // permission: 'M_setting_0'
+      },
       children: [{
-        path: '/Order/OrderCenter',
-        name: 'OrderCenter',
-        component: () => import('@/views/Order/OrderCenter.vue'),
+        path: '/CouponStatistics/CouponStatistics',
+        name: 'CouponStatistics',
+        component: () => import('@/views/CouponStatistics/CouponStatistics.vue'),
         meta: {
-          title: '订单中心',
-          icon: 'snippets'
+          title: '优惠券统计',
+          icon: 'setting'
           // permission: 'M_sys_dataDictionary'
         }
       }

+ 150 - 0
src/views/CouponStatistics/CouponStatistics.vue

@@ -0,0 +1,150 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 搜索条件 -->
+    <div class="CouponStatistics-searchForm">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :span="6">
+            <a-form-item label="发券网点">
+              <a-input v-model.trim="searchForm.num" placeholder="请输入" allowClear style="width: 200px;"/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="优惠券名称">
+              <a-input v-model.trim="searchForm.num" placeholder="请输入" allowClear style="width: 200px;"/>
+              
+            </a-form-item>
+          </a-col> 
+          <a-col :span="6">
+            <a-form-item label="优惠券类型">
+              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button type="" @click="resetForm">重置</a-button>
+          </a-col>  
+        </a-row> 
+      </a-form>
+    </div>
+    <!-- 列表 -->
+    <s-table
+      ref="tableData"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 状态 -->
+      <span slot="status" slot-scope="text, record">
+        <template></template>
+      </span>
+      <!-- 操作 -->
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a-icon type="eye" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleEdit(record)" />
+        </template>
+      </span>
+    </s-table>
+  </a-card>
+</template>
+
+<script>
+  import { STable, VSelect } from '@/components'
+  export default{
+    components: { STable, VSelect },
+    data(){
+      return{
+        searchForm:{
+          name:'',
+          num:''
+        },
+        columns:[
+          {
+            title: '序号',
+            dataIndex: 'no',
+            width: '40',
+            align: 'center'
+          },
+          
+          {
+            title: '发券网点',
+            dataIndex: 'no',
+            width: '40',
+            align: 'center'
+          },
+          {
+            title: '优惠券名称',
+            dataIndex: 'no',
+            width: '40',
+            align: 'center'
+          },
+          {
+            title: '优惠券类型',
+            dataIndex: 'no',
+            width: '40',
+            align: 'center'
+          },
+          {
+            title: '已发数量',
+            dataIndex: 'no',
+            width: '40',
+            align: 'center'
+          },
+          {
+            title: '使用数量',
+            dataIndex: 'no',
+            width: '40',
+            align: 'center'
+          },
+          {
+            title: '关联消费金额',
+            dataIndex: 'no',
+            width: '40',
+            align: 'center'
+          },
+          {
+            title: '转化率',
+            dataIndex: 'no',
+            width: '40',
+            align: 'center'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            width: '40',
+            align: 'center',
+            scopedSlots: { customRender: 'status' }
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            width: '40',
+            align: 'center',
+            scopedSlots: { customRender: 'action' }
+          }
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          // return getTenantsList(Object.assign(parameter, this.searchForm)).then(res => {
+          //   if (res.status == 200) {
+          //     const no = (res.data.pageNo - 1) * res.data.pageSize
+          //     for (let i = 0; i < res.data.list.length; i++) {
+          //       const _item = res.data.list[i]
+          //       _item.no = no + i + 1
+          //       _item.status = _item.status + '' === '1'
+          //     }
+          //     return res.data
+          //   }
+          // })
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .CouponStatistics-searchForm .ant-form-inline .ant-form-item{
+    margin-bottom: 50px;
+  }
+</style>

+ 107 - 0
src/views/Order/OrderDetail.vue

@@ -0,0 +1,107 @@
+<template>
+  <a-card :bordered="false">
+    <div class="orderDetail-content">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+          <a-col :span="8">
+            <a-form-item label="创建时间">
+              <span>{{"123456789"}}</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="单号">
+              <span>{{"123456789"}}</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="门店名称">
+              <span>{{"123456789"}}</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+       <a-row :gutter="24">
+         <a-col :span="8">
+           <a-form-item label="服务名称">
+             <span>{{"123456789"}}</span>
+           </a-form-item>
+         </a-col>
+         <a-col :span="8">
+           <a-form-item label="手机号码">
+             <span>{{"123456789"}}</span>
+           </a-form-item>
+         </a-col>
+         <a-col :span="8">
+           <a-form-item label="状态">
+             <span>{{"123456789"}}</span>
+           </a-form-item>
+         </a-col>
+       </a-row>
+       <a-row :gutter="24">
+         <a-col :span="8">
+           <a-form-item label="应付(¥)">
+             <span>{{"123456789"}}</span>
+           </a-form-item>
+         </a-col>
+         <a-col :span="8">
+           <a-form-item label="优惠(¥)">
+             <span>{{"123456789"}}</span>
+           </a-form-item>
+         </a-col>
+         <a-col :span="8">
+           <a-form-item label="优惠券名称:">
+             <span>{{"123456789"}}</span>
+           </a-form-item>
+         </a-col>
+       </a-row>  
+       <a-row :gutter="24">
+         <a-col :span="8">
+           <a-form-item label="实付(¥)">
+             <span>{{"123456789"}}</span>
+           </a-form-item>
+         </a-col>
+         <a-col :span="8">
+           <a-form-item label="洗车照片">
+             <div style="display: flex;">
+                <div style="margin-right: 20px;">
+                  <div style="border: 1px solid #eee;overflow: hidden;padding: 8px">
+                    <img :src="advertisementImg" style="width: 100px; height: 100px;" alt=""/>
+                  </div>
+                  <div>洗车前</div> 
+                </div>
+                <div>
+                  <div style="border: 1px solid #eee;overflow: hidden;padding: 8px">
+                    <img :src="advertisementImg" style="width: 100px; height: 100px;" alt=""/>
+                  </div>
+                  <div>洗车后</div> 
+                </div>
+             </div>
+              
+           </a-form-item>
+         </a-col>
+       </a-row>
+         <a-row style="text-align: center;margin-top: 100px;">
+           <a-col>
+             <a-form-item>
+               <a-button type="default">返回列表</a-button>
+             </a-form-item>
+           </a-col>
+         </a-row>
+      </a-form>
+    </div>
+  </a-card>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+       
+      }
+    }
+  }
+</script>
+<style>
+  .orderDetail-content .ant-form-inline .ant-form-item{
+    margin-bottom: 20px;
+  }
+</style>

+ 167 - 0
src/views/RefundRecord/RefundRecord.vue

@@ -0,0 +1,167 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 搜索条件 -->
+    <div class="orderCenter-searchForm">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :span="8">
+            <a-form-item label="创建时间">
+              <a-range-picker v-model="time" :placeholder="['开始时间','结束时间']" @change="onChange"/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="关联订单号">
+              <a-input v-model.trim="searchForm.num" placeholder="请输入" allowClear style="width: 200px;"/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="网点名称">
+              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
+            </a-form-item>
+          </a-col> 
+          <a-col :span="4">
+            <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button type="" @click="resetForm">重置</a-button>
+          </a-col>  
+        </a-row>
+        <a-row :gutter="48">
+          <a-col :span="8">
+            <a-form-item label="服务项目">
+              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="退款状态" >
+              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
+            </a-form-item>
+          </a-col>
+        </a-row>  
+      </a-form>
+    </div>
+    <!-- 合计 -->
+    <div class="total">
+      <a-alert message="合计: 40单, 实收: 2000元" type="info" show-icon />
+    </div>
+    <!-- 列表 -->
+    <s-table 
+      ref="tableData"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 退款状态 -->
+      <span slot="status" slot-scope="text, record">
+        <template></template>
+      </span>
+    </s-table>
+  </a-card>
+</template>
+
+<script>
+  import { STable, VSelect } from '@/components'
+  export default{
+    components: { STable, VSelect },
+    data(){
+      return{
+        // 查询参数
+        searchForm: {
+          name: '',
+          num: ''
+        },
+        time:null,
+        columns:[
+          {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '交易流水号',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '关联订单号',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '网点名称',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '退款项目',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '退款金额(¥)',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '退款人',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '退款状态',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center',
+            scopedSlots: { customRender: 'status' }
+          },
+          {
+            title: '备注',
+            dataIndex: 'status',
+            width: '40',
+            align: 'center', 
+          },
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          // return getTenantsList(Object.assign(parameter, this.searchForm)).then(res => {
+          //   if (res.status == 200) {
+          //     const no = (res.data.pageNo - 1) * res.data.pageSize
+          //     for (let i = 0; i < res.data.list.length; i++) {
+          //       const _item = res.data.list[i]
+          //       _item.no = no + i + 1
+          //       _item.status = _item.status + '' === '1'
+          //     }
+          //     return res.data
+          //   }
+          // })
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .orderCenter-searchForm ,.addButton{
+    margin-bottom: 0;
+  }
+  .orderCenter-searchForm .ant-form-inline .ant-form-item{
+    margin-bottom: 15px;
+  }
+  .total{
+    margin-bottom:15px;
+  }
+</style>
+