Browse Source

页面编写

zhangdan 4 years ago
parent
commit
9c7eac501c

+ 18 - 0
src/config/router.config.js

@@ -170,6 +170,24 @@ export const asyncRouterMap = [
       }
       ]
     },
+    {
+      path: '/AvailableCoupon',
+      redirect: '/AvailableCoupon/AvailableCoupon',
+      component: PageView,
+      meta: {
+        title: '可使用优惠券',
+        icon: 'setting'
+        // permission: 'M_setting_0'
+      },
+      children: [
+        {
+          path: '/AvailableCoupon/AvailableCoupon',
+          name: 'AvailableCoupon',
+          component: () => import(/* webpackChunkName: "auth" */ '@/views/AvailableCoupon/AvailableCoupon.vue'),
+          meta: { title: '可使用优惠券', icon: 'user' }
+        }
+      ]
+    },
     {
       path: '/auth',
       redirect: '/auth/userList',

+ 88 - 0
src/views/AvailableCoupon/AvailableCoupon.vue

@@ -0,0 +1,88 @@
+<template>
+  <!-- <a-card class="card-content">
+    <div class="AvailableCoupon-content">
+      <div class="coupon-type">
+        <div class="arc-left"></div>
+        <div class="arc-right"></div>
+      </div>
+      <div class="coupon-content">
+        <div class="arc-top"></div>
+        <div class="arc-bottom"></div>
+      </div>
+    </div>
+  </a-card> -->
+  <a-card hoverable style="width: 240px">
+      <!-- <img
+        slot="cover"
+        alt="example"
+        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
+      /> -->
+      <a-card-meta title="Europe Street beat">
+        <template slot="description">
+          www.instagram.com
+        </template>
+      </a-card-meta>
+      <a-card-meta title="Europe Street beat">
+        <template slot="description">
+          www.instagram.com
+        </template>
+      </a-card-meta>
+    </a-card>
+</template>
+
+<script>
+</script>
+
+<style lang="less">
+  .card-content{
+    height:100vh;
+    padding: 20px;
+    background-color: #fff;
+    .coupon-type{
+      width:200px;
+      height:100px;
+      background-color: red;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      border-radius:10px 10px 0 0;
+      .arc-left{
+        width: 15px;
+        height: 15px;
+        background-color: #fff;
+        /*四分之一圆*/
+        border-radius: 0 100% 0  0;
+        /*定位*/
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+      .arc-right{
+        width: 15px;
+        height: 15px;
+        background-color: #fff;
+        /*四分之一圆*/
+        border-radius: 100%  0 0  0;
+        /*定位*/
+        position: absolute;
+        right: 0;
+        bottom: 0;
+      }
+    }
+    .coupon-content{
+      width:200px;
+      height:100px;
+      background-color: #fff;
+      border:1px soild #FF0000;
+      border-radius:0 0 10px 10px;
+      position: absolute;
+      top: 100px;
+      bottom: 0;
+      left: 200px;
+      right: 0;
+    }
+  }
+   
+</style>

+ 0 - 1
src/views/CouponStatistics/CouponStatisticsDetail.vue

@@ -14,7 +14,6 @@
           <a-col :span="6">
             <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
               <a-input v-model.trim="searchForm.name" placeholder="请输入" allowClear/>
-          
             </a-form-item>
           </a-col>
           <a-col :span="6">

+ 16 - 2
src/views/Order/OrderCenter.vue

@@ -44,8 +44,9 @@
       </a-form>
     </div>
     <!-- 合计 -->
-    <div class="total">
-      <a-alert message="合计: 40单, 实收: 2000元" type="info" show-icon />
+    <div class="total" >
+      <a-icon type="info-circle" class="iconImg"/>
+      <strong>合计:</strong><span v-model="countHJ">{{countHJ}} 单</span><strong style="margin-left: 15px;">实收:</strong><span v-model="incomeHJ">{{incomeHJ}} 元</span>
     </div>
     <!-- 列表 -->
     <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
@@ -83,6 +84,8 @@
           phone:'',         // 手机号码
           status:''         // 状态
         },
+        countHJ:'40',
+        incomeHJ:'2000',
         time: [
           moment(getDate.getToday().starttime, this.dateFormat),
 					moment(getDate.getToday().endtime, this.dateFormat)
@@ -185,6 +188,8 @@
         }
         console.log(this.searchForm.beginDate, this.searchForm.endDate)
       },
+      // 合计
+      getTotal(){},
       // 查看详情--跳转到对应的详情页
       seeDetail(row) {
         this.$router.push({name: 'OrderDetail',query: {id: row.id}
@@ -230,5 +235,14 @@
 
   .total {
     margin-bottom: 15px;
+    width:100%;
+    background-color: #e6f7ff;
+    border: 1px solid #91d5ff;
+    padding: 8px 15px 8px 27px;
+    border-radius: 4px;
+    .iconImg{
+      color: #1890FF;
+      margin-right: 10px;
+    }
   }
 </style>

+ 13 - 1
src/views/RefundRecord/RefundRecord.vue

@@ -40,7 +40,8 @@
     </div>
     <!-- 合计 -->
     <div class="total">
-      <a-alert message="合计: 40单, 实收: 2000元" type="info" show-icon />
+      <a-icon type="info-circle" class="iconImg"/>
+      <strong>合计:</strong><span v-model="countHJ">{{countHJ}} 单</span><strong style="margin-left: 15px;">实收:</strong><span v-model="incomeHJ">{{incomeHJ}} 元</span>
     </div>
     <!-- 列表 -->
     <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
@@ -77,6 +78,8 @@
           moment(getDate.getToday().endtime, this.dateFormat)
         ],
         dateFormat: 'YYYY-MM-DD',
+        countHJ:'40',
+        incomeHJ:'2000',
         columns: [{
             title: '创建时间',
             dataIndex: 'createTime',
@@ -190,5 +193,14 @@
 
   .total {
     margin-bottom: 15px;
+    width:100%;
+    background-color: #e6f7ff;
+    border: 1px solid #91d5ff;
+    padding: 8px 15px 8px 27px;
+    border-radius: 4px;
+    .iconImg{
+      color: #1890FF;
+      margin-right: 10px;
+    }
   }
 </style>