收银历史

src/pages.json

@@ -279,6 +279,18 @@
             "style": {
                 "navigationBarTitleText": "结算"
             }
+        },
+        {
+            "path": "pages/manage/cashier/list",
+            "style": {
+                "navigationBarTitleText": "历史单据"
+            }
+        },
+        {
+            "path": "pages/manage/cashier/detail",
+            "style": {
+                "navigationBarTitleText": "单据详情"
+            }
         }
     ]
 }

src/pages/manage/cashier/detail.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="page">
+        <div class="head">
+            <!-- <section class="item">
+                <my-image class="img" src=""></my-image>
+                0002
+            </section>
+            <section class="item">
+                <my-image class="img" src=""></my-image>
+                非会员
+            </section> -->
+            <section class="item">
+                <my-image class="img" src=""></my-image>
+                {{ data.payRemark }}
+            </section>
+        </div>
+        <div class="goods">
+            <div class="good-head">
+                <div>
+                    {{ data.payTime }} 销售{{
+                        data.orderItems ? data.orderItems.length : 0
+                    }}件
+                </div>
+                <!-- <div>{{ data.tradeNo }}</div> -->
+            </div>
+            <ul class="good-list">
+                <li class="item" v-for="item of data.orderItems" :key="item.id">
+                    <div class="name">{{ item.productName }}</div>
+                    <div class="num">{{ item.count }}</div>
+                </li>
+            </ul>
+        </div>
+        <div class="other-info">
+            <section class="item">
+                <div>商品数量</div>
+                <div>{{ data.orderItems ? data.orderItems.length : 0 }}</div>
+            </section>
+            <section class="item">
+                <div>商品总额</div>
+                <div>￥{{ data.amount |  minuteToRmb2}}</div>
+            </section>
+            <!-- <section class="item">
+                <div>折扣</div>
+                <div>￥{{ (data.amount/100)*(data.discount/100) }}</div>
+            </section> -->
+            <section class="item color">
+                <div>应付</div>
+                <div>￥{{ data.payAmount | minuteToRmb2}}</div>
+            </section>
+        </div>
+
+        <div class="tool">
+
+        </div>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../../components/image/index";
+
+export default {
+    name: "",
+    components: { MyImage },
+    filters: {},
+    // 数据
+    data() {
+        return {
+            pageIndex: 1,
+            pageSize: 20,
+            data: {},
+        };
+    },
+
+    onLoad(opts) {
+        console.log(opts);
+        this.getData(opts.orderNo);
+    },
+    async onShow() {},
+    // 函数
+    methods: {
+        getData(orderNo) {
+            this.api
+                .get("/Order/GetSettleDetail", {
+                    orderNo: orderNo,
+                })
+                .then((res) => {
+                    this.data = res.data;
+                });
+        },
+    },
+
+    // 数据计算
+    computed: {
+        user() {
+            return this.$store.state.user.user;
+        },
+    },
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.head {
+    background-color: #fff;
+    .item {
+        min-height: px(110);
+        display: flex;
+        align-items: center;
+        padding: 0 px(35);
+        border-bottom: 1px solid #f1f1f1;
+        font-size: px(40);
+    }
+    .img {
+        width: px(45);
+        height: px(45);
+        flex-shrink: 0;
+        margin-right: px(30);
+        /deep/ img {
+            width: px(45);
+            height: px(45);
+        }
+    }
+}
+.goods{
+    margin-top: px(30);
+    .good-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: px(90);
+        padding: 0 px(35);
+        font-size: px(38);
+        color: #666;
+        border-bottom: 1px solid #efefef;
+        background-color: #faf7f2;
+    }
+    .good-list {
+        background-color: #fff;
+        .item {
+            border-bottom: 1px solid #f1f1f1;
+            padding: px(20) px(35);
+
+            min-height: px(160);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+}
+.other-info {
+    margin-top: px(30);
+    background-color: #fff;
+    padding: px(35);
+    .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: px(15) 0;
+    }
+}
+.color {
+    color: #0c89c9;
+}
+</style>

src/pages/manage/cashier/list.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="page">
+        <ul class="list">
+            <li class="item" v-for="item of dataList" :key="item.id" @click="goDetail(item)">
+                <div class="main">
+                    <div class="trade-no">{{ item.tradeNo }}</div>
+                    <div class="info">
+                        共{{
+                            item.orderItems ? item.orderItems.length : 0
+                        }}件商品
+                        <span class="price">{{
+                            item.payAmount | minuteToRmb2
+                        }}元</span>
+                    </div>
+                    <div class="time">
+                        {{ item.payTime }}
+                    </div>
+                </div>
+                <div class="arrow">
+                    <my-image
+                        class="img"
+                        src="/static/common/arrows_left.png"
+                    ></my-image>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../../components/image/index";
+
+export default {
+    name: "",
+    components: { MyImage },
+    filters: {},
+    // 数据
+    data() {
+        return {
+            pageIndex: 1,
+            pageSize: 20,
+            dataList: [],
+        };
+    },
+
+    onLoad() {
+        this.getList();
+    },
+    async onShow() {},
+    // 函数
+    methods: {
+        getList() {
+            this.api
+                .get("/Order/GetSettleList", {
+                    pageIndex: this.pageIndex,
+                    pageSize: this.pageSize,
+                })
+                .then((res) => {
+                    let data = res.data;
+                    this.dataList = res.data.data;
+                });
+        },
+
+        goDetail(item){
+            this.router.push({
+                path:'/pages/manage/cashier/detail',
+                query:{
+                    orderNo:item.tradeNo
+                }
+            })
+        },
+    },
+
+    // 数据计算
+    computed: {
+        user() {
+            return this.$store.state.user.user;
+        },
+    },
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+    .item {
+        padding: px(30) px(35);
+        font-size: px(40);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        & ~ .item {
+            border-top: 1px solid #efefef;
+        }
+    }
+    .trade-no {
+        color: #333;
+        font-size: px(44);
+    }
+    .info {
+        margin-top: px(15);
+        color: #999;
+    }
+    .price {
+        margin-left: px(10);
+        color: #0099cb;
+    }
+    .time {
+        font-size: px(36);
+        margin-top: px(10);
+        color: #999;
+    }
+    .arrow {
+        .img {
+            display: block;
+            width: px(40);
+            height: px(40);
+            transform: rotate(180deg);
+            /deep/ img {
+                width: px(40);
+                height: px(40);
+            }
+        }
+    }
+}
+</style>

src/pages/manage/index.vue

@@ -45,10 +45,17 @@
                 <li class="item" @click="jump('/pages/manage/cashier/index')">
                     <my-image
                         class="img"
-                        src="/static/icon/user.png"
+                        src="/static/icon/cashier.png"
                     ></my-image>
                     <span class="text">收银</span>
                 </li>
+                <li class="item" @click="jump('/pages/manage/cashier/list')">
+                    <my-image
+                        class="img"
+                        src="/static/icon/cashier-list.png"
+                    ></my-image>
+                    <span class="text">历史单据</span>
+                </li>
               
             </ul>
         </div>