add 消费明细

src/api/amount.js

@@ -19,4 +19,19 @@ export const getPayResult = ( params ) => {
 // 充值协议接口
 export const getExplain = ( params ) => {
   return get( 'app/common/explain', params )
+}
+
+// 我的优惠券(带分页)
+export const getCouponList = ( params ) => {
+  return get( 'app/coupon/list', params )
+}
+
+// 优惠券说明
+export const getCouponExplain = ( params ) => {
+  return get( 'app/coupon/explain', params )
+}
+
+// 消费明细列表
+export const getAccountFlow = ( params ) => {
+  return get( 'app/member/accountFlow', params )
 }

src/components/accountCompoents/consumption.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div style="min-height: 400px;">
+      <el-table :data="flowList">
+        <el-table-column prop="shopName" label="门店"></el-table-column>
+        <!-- <el-table-column prop="" label="订单来源/编号">
+          <template slot-scope="scope">
+            <div v-if="scope.row.payType == 1">支付宝</div>
+            <div v-if="scope.row.payType == 2">微信</div>
+            <div v-if="!scope.row.payType">--</div>
+          </template>
+        </el-table-column> -->
+        <!-- <el-table-column prop="createTime" label="平台订单号"></el-table-column> -->
+        <el-table-column prop="createTime" label="消费时间"></el-table-column>
+        <el-table-column prop="remark" label="用途"></el-table-column>
+        <!-- <el-table-column prop="" label="支付方式">
+          <template slot-scope="scope">
+            <div v-if="scope.row.payType == 1">支付宝</div>
+            <div v-if="scope.row.payType == 2">微信</div>
+            <div v-if="!scope.row.payType">--</div>
+          </template>
+        </el-table-column> -->
+        <el-table-column prop="amount" label="充值金额">
+          <template slot-scope="scope">
+            <div>￥{{ scope.row.amount.toFixed(2) }}</div>
+          </template>
+        </el-table-column>
+
+      </el-table>
+    </div>
+    <div style="text-align: center;margin-top: 20px;">
+      <el-pagination :current-page.sync="query.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAccountFlow } from "../../api/amount.js";
+export default {
+  data() {
+    return {
+      flowList: [],
+      query: {
+        source: 2,
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+    };
+  },
+  created() {
+    this.getAccountFlow();
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.query.pageNum = 1;
+      this.query.pageSize = val;
+      this.flowList = [];
+      this.getAccountFlow();
+    },
+    handleCurrentChange(val) {
+      this.query.pageNum = val;
+      this.flowList = [];
+      this.getAccountFlow();
+    },
+    getAccountFlow() {
+      getAccountFlow(this.query).then((res) => {
+        if (res.code == 200) {
+          this.flowList = res.data.data || [];
+          this.total = res.data.totalNums || 0;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-table td.el-table__cell {
+  text-align: center !important;
+}
+/deep/ .el-table th.el-table__cell.is-leaf {
+  text-align: center !important;
+}
+</style>

src/components/accountCompoents/coupon.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="coupon">
     <div class="list">
-      <div class="item">
+      <div class="item" v-for="(v,i) in couponList" :key="i">
         <div class="top-content">
           <div class="money">
             <span class="samll-size">￥</span>
@@ -24,70 +24,89 @@
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-
-      }
-    }
-  }
+import { getCouponList, getCouponExplain } from "../../api/amount.js";
+export default {
+  data() {
+    return {
+      couponList: [],
+    };
+  },
+  created() {
+    this.getCouponList();
+  },
+  methods: {
+    getCouponList() {
+      getCouponList({status: 0}).then((res) => {
+        if (res.code === 200) {
+          this.couponList = res.data.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .coupon {
-    height: calc(100vh - 274px);
-    background-color: #fff;
-    .list {
-      display: flex;
-      .item {
-        margin-right: 20px;
-        .top-content {
-          width: 244px;
-          height: 166px;
-          background: url(../../../static/image/coupon-bg.png) no-repeat;
-          background-size: cover;
-          text-align: center;
-          box-sizing: border-box;
-          padding: 30px;
-          .money {
-            font-family: PingFang SC;
-            font-weight: 600;
-            color: #FFFFFF;
-            .samll-size {
-              font-size: 22px;
-            }
-            .big-size {
-              font-size: 40px;
-            }
+.coupon {
+  height: calc(100vh - 274px);
+  background-color: #fff;
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    .item {
+      margin-right: 20px;
+      .top-content {
+        width: 244px;
+        height: 166px;
+        background: url(../../../static/image/coupon-bg.png) no-repeat;
+        background-size: cover;
+        text-align: center;
+        box-sizing: border-box;
+        padding: 30px;
+        .money {
+          font-family: PingFang SC;
+          font-weight: 600;
+          color: #ffffff;
+          .samll-size {
+            font-size: 22px;
           }
-          .man-jian {
-            font-size: 14px;
-            font-family: PingFang SC;
-            font-weight: 400;
-            color: #FFFFFF;
-          }
-          .time {
-            font-size: 12px;
-            font-family: PingFang SC;
-            font-weight: 400;
-            color: #28888A;
-            margin-top: 30px;
+          .big-size {
+            font-size: 40px;
           }
         }
-        .bottom {
-          padding: 10px;
-          .lei-xing {
-            font-size: 12px;
-            font-family: PingFang SC;
-            font-weight: 400;
-            color: #666666;
-            margin-bottom: 4px;
-            span {
-              color: #999;
-            }
+        .man-jian {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
+        }
+        .time {
+          font-size: 12px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #28888a;
+          margin-top: 30px;
+        }
+      }
+      .bottom {
+        padding: 10px;
+        .lei-xing {
+          font-size: 12px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          margin-bottom: 4px;
+          span {
+            color: #999;
           }
         }
       }
     }
   }
+}
 </style>

src/components/accountCompoents/wallet.vue

@@ -20,9 +20,14 @@
         <div @click="paymentType = 2" :class="paymentType === 2 ? 'item item_ac' : 'item'"><img src="../../../static/image/we-chat.png" alt="" srcset="">微信支付</div>
       </div>
       <el-button @click="recharge" class="recharge_color">去充值</el-button>
-      <div class="agreement">充值即同意 <span>《充值协议》</span> </div>
+      <div class="agreement">充值即同意 <span @click="getExplain">《充值协议》</span> </div>
     </el-col>
-    <qr-code v-if="showCode" @refreshCode="recharge" @closeCode="showCode = false" ref="code" :payAmount="payAmount" :link="link" :paymentType="paymentType" :orderSn="orderSn"></qr-code>
+    <!-- 支付二维码 -->
+    <qr-code v-if="showCode" @paySuccess="paySuccess" @refreshCode="recharge" @closeCode="showCode = false" ref="code" :payAmount="payAmount" :link="link" :paymentType="paymentType" :orderSn="orderSn"></qr-code>
+    <!-- 充值协议 -->
+    <el-dialog :visible.sync="centerDialogVisible" width="800px" center>
+      <div v-html="text"></div>
+    </el-dialog>
   </div>
 </template>
 
@@ -32,6 +37,7 @@ import {
   getRechargeList,
   recharge,
   getPayResult,
+  getExplain,
 } from "../../api/amount.js";
 import qrCode from "../../common/qrCode.vue";
 export default {
@@ -56,6 +62,8 @@ export default {
       orderSn: "",
       showCode: false,
       payAmount: 0,
+      centerDialogVisible: false,
+      text: "",
     };
   },
   components: {
@@ -66,6 +74,24 @@ export default {
     this.getRechargeList();
   },
   methods: {
+    paySuccess() {
+      this.showCode = false;
+      this.getWallet();
+    },
+    getExplain() {
+      getExplain({ type: 6 }).then((res) => {
+        console.log("object", res);
+        if (res.code === 200) {
+          this.text = res.data;
+          this.centerDialogVisible = true;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
     getRechargeList() {
       getRechargeList().then((res) => {
         if (res.code === 200) {
@@ -231,6 +257,7 @@ export default {
   margin-top: 10px;
   span {
     color: #3662a1;
+    cursor: pointer;
   }
 }
 .recharge_list {

src/components/orderComponents/sendOrderPopup.vue

@@ -22,7 +22,7 @@
               <span v-if="deliveryList && deliveryList.length < 1">--</span>
               &nbsp;元
             </div>
-            <div class="youhui">优惠合计2元</div>
+            <!-- <div class="youhui">优惠合计2元</div> -->
           </div>
           <img v-if="deliveryType == 1" src="../../../static/image/choose-icon.png" class="choose-icon" />
         </div>
@@ -46,7 +46,7 @@
               <div class="item-right">
                 <div>
                   <div class="item-price">预估&nbsp;<span>{{ computePrice(item.deliveryAmount, tipAmount, couponPrice, order.firstCoupon || 0, item.isMine) }}</span>&nbsp;元</div>
-                  <div class="item-coupon">优惠合计2元</div>
+                  <!-- <div class="item-coupon">优惠合计2元</div> -->
                 </div>
                 <div class="item-choose">
                   <img v-if="!item.isChoose" src="../../../static/image/item-choose-icon.png" />

src/components/shopAccount.vue

@@ -3,8 +3,7 @@
     <el-row class="order_tab">
       <el-col :span="15">
         <div class="tab_list">
-          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tab_ac==i?true:false}"
-               v-for="(item,i) in tab_list" :key="i">
+          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tab_ac==i?true:false}" v-for="(item,i) in tab_list" :key="i">
             <span>{{item.name}}</span>
             <div class="tab_line"></div>
           </div>
@@ -13,111 +12,111 @@
     </el-row>
 
     <el-row class="content">
-       <component :is="activeName"></component>
+      <component :is="activeName"></component>
     </el-row>
   </div>
 </template>
 
 <script>
-  import wallet from './accountCompoents/wallet.vue';
-  import coupon from './accountCompoents/coupon.vue';
-  import recharge from './accountCompoents/recharge.vue';
-  export default {
-    name: 'HelloWorld',
-    components: {
-     wallet,
-     coupon,
-     recharge
-    },
+import wallet from "./accountCompoents/wallet.vue";
+import coupon from "./accountCompoents/coupon.vue";
+import recharge from "./accountCompoents/recharge.vue";
+import consumption from "./accountCompoents/consumption.vue";
+export default {
+  name: "HelloWorld",
+  components: {
+    wallet,
+    coupon,
+    recharge,
+    consumption,
+  },
 
-    data() {
-      return {
-        activeName: 'wallet',
-        tab_list: [
-          {name: '我的钱包', index: 0},
-          {name: '优惠券', index: 1},
-          {name: '充值明细', index: 2},
-          {name: '消费明细', index: 3}
-        ],
-        tab_ac: 0,
-      }
-    },
-    methods: {
-      changeTabs(i) {
-        this.tab_ac = i;
-        switch(i) {
-          case 0:
-            this.activeName = 'wallet';
+  data() {
+    return {
+      activeName: "wallet",
+      tab_list: [
+        { name: "我的钱包", index: 0 },
+        { name: "优惠券", index: 1 },
+        { name: "充值明细", index: 2 },
+        { name: "消费明细", index: 3 },
+      ],
+      tab_ac: 0,
+    };
+  },
+  methods: {
+    changeTabs(i) {
+      this.tab_ac = i;
+      switch (i) {
+        case 0:
+          this.activeName = "wallet";
           break;
-          case 1:
-            this.activeName = 'coupon';
+        case 1:
+          this.activeName = "coupon";
           break;
-          case 2:
-            this.activeName = 'recharge';
+        case 2:
+          this.activeName = "recharge";
           break;
-          case 3:
-            this.activeName = 'consumption';
+        case 3:
+          this.activeName = "consumption";
           break;
-        }
       }
     },
-    mounted() {
-    }
-  }
+  },
+  mounted() {},
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-  .shopInfo {
-    .order_tab {
+.shopInfo {
+  .order_tab {
+    width: 100%;
+    height: 74px;
+    background: #fff;
+
+    .tab_list {
       width: 100%;
       height: 74px;
-      background: #FFF;
-
-      .tab_list {
-        width: 100%;
-        height: 74px;
-        padding-top: 20px;
-        padding-left: 36px;
-        box-sizing: border-box;
-        display: flex;
+      padding-top: 20px;
+      padding-left: 36px;
+      box-sizing: border-box;
+      display: flex;
 
-        .tab_item {
-          min-width: 58px;
-          margin-right: 56px;
-          font-size: 16px;
-          font-weight: 500;
-          color: #B1B1B1;
-          position: relative;
-          text-align: center;
-          cursor: pointer;
+      .tab_item {
+        min-width: 58px;
+        margin-right: 56px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #b1b1b1;
+        position: relative;
+        text-align: center;
+        cursor: pointer;
 
-          .tab_line {
-            width: 58px;
-            height: 6px;
-            background: #FFF;
-            border-radius: 3px;
-            margin: 15px auto 0;
-          }
+        .tab_line {
+          width: 58px;
+          height: 6px;
+          background: #fff;
+          border-radius: 3px;
+          margin: 15px auto 0;
         }
+      }
 
-        .tab_item_ac {
-          color: #FC7200;
+      .tab_item_ac {
+        color: #fc7200;
 
-          .tab_line {
-            background: #FC7200;
-          }
+        .tab_line {
+          background: #fc7200;
         }
       }
     }
+  }
 
-    .content {
-      width: 100%;
-      margin-top: 10px;
-      padding: 20px;
-      box-sizing: border-box;
-      background: #FFF;
-      
-    }
+  .content {
+    width: 100%;
+    margin-top: 10px;
+    padding: 20px;
+    box-sizing: border-box;
+    background: #fff;
   }
+}
 </style>