挂单ye'm

src/pages.json

@@ -298,6 +298,18 @@
             "style": {
                 "navigationBarTitleText": "退货"
             }
+        },
+        {
+            "path": "pages/manage/cashier/cache",
+            "style": {
+                "navigationBarTitleText": "挂单"
+            }
+        },
+        {
+            "path": "pages/manage/cashier/cache-detail",
+            "style": {
+                "navigationBarTitleText": "挂单详情"
+            }
         }
     ]
 }

src/pages/manage/cashier/cache-detail.vue

@@ -0,0 +1,265 @@
+<template>
+    <div class="page">
+        <div class="head">
+            <section class="item">
+                <!-- <my-image class="img" src=""></my-image> -->
+                订单号： {{ data.tradeNo }}
+            </section>
+            <section class="item">
+                <!-- <my-image class="img" src=""></my-image> -->
+                状态： {{ data.status | statusFilter }}
+            </section>
+            <section class="item">
+                <!-- <my-image class="img" src=""></my-image> -->
+                备注：
+                {{ data.payRemark || "" }}
+            </section>
+            <my-image class="line-img" src="/static/icon/line.jpg"></my-image>
+        </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"
+                    :class="{ invalid: item.status === 9 }"
+                >
+                    <div class="name">{{ item.productName }}</div>
+                    <div class="num">
+                        <span class="refund" v-if="item.status === 9"
+                            >已退货</span
+                        >
+                        {{ 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 - data.payAmount) | minuteToRmb2 }}
+                </div>
+            </section>
+            <section class="item color">
+                <div>应付</div>
+                <div>￥{{ data.payAmount | minuteToRmb2 }}</div>
+            </section>
+        </div>
+
+        <div class="tool">
+            <span class="btn" @click="">删除</span>
+            <span class="btn btn2" @click="">追加</span>
+            <span class="btn btn1" @click="">收银</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../../components/image/index";
+let statusEnum = {
+    2: "待支付",
+    3: "待发货",
+    4: "待收货",
+    6: "已取消",
+    7: "售后中",
+    8: "已删除",
+    9: "已完成",
+    10: "已评价",
+    11: "已售后",
+    12: "已退款",
+    20: "待接单",
+    21: "拣货中",
+    22: "拣货完成",
+    23: "待配送",
+    24: "配送中",
+    25: "已送达",
+    26: "待提货",
+    27: "已提货",
+    31: "订单已推单",
+    32: "订单已被骑手接单",
+    33: "骑手已到店",
+    34: "骑手已取餐",
+    35: "订单完成",
+    36: "订单失败",
+};
+export default {
+    name: "",
+    components: { MyImage },
+    filters: {
+        statusFilter(v) {
+            return statusEnum[v] || "";
+        },
+    },
+    // 数据
+    data() {
+        return {
+            pageIndex: 1,
+            pageSize: 20,
+            data: {},
+        };
+    },
+
+    onLoad(opts) {
+        this.orderNo = opts.orderNo;
+    },
+    async onShow() {
+        // this.getData(this.orderNo);
+    },
+    // 函数
+    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;
+    border-bottom: 1px solid #f1f1f1;
+    .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(40);
+    .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(40);
+    background-color: #fff;
+    padding: px(35);
+    .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: px(15) 0;
+    }
+}
+.color {
+    color: #0c89c9;
+}
+.line-img {
+    width: 100%;
+    height: px(10);
+    /deep/ img {
+        width: 100%;
+        height: px(10);
+    }
+}
+.tool {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: px(130);
+    z-index: 10;
+    border-top: 1px solid #f1f1f1;
+    display: flex;
+    padding: px(35);
+    align-items: center;
+    justify-content: flex-end;
+    background-color: #fff;
+    .btn {
+        width: px(190);
+        height: px(88);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: px(40);
+        border-radius: px(8);
+        border: 1px solid #f1f1f1;
+        margin-left: px(30);
+    }
+    .btn1{
+        background-color: #ff1135;
+        border-color: #ff1135;
+        color: #fff;
+    }
+    .btn2{
+        background-color: #a9998a;
+        border-color: #a9998a;
+        color: #fff;
+    }
+}
+.invalid {
+    background-color: #f9f9f9;
+    color: #666 !important;
+    .refund {
+        display: inline-block;
+        font-size: px(40);
+        margin-right: px(20);
+    }
+}
+</style>

src/pages/manage/cashier/cache.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="page shop-cart-page" :class="{ page_red: theme === 1 }">
+        <div class="page__top">
+            <div class="search">
+                <i class="iconfont icontubiao- search__icon"></i>
+                <input
+                    class="search__text"
+                    v-model="searchVal"
+                    @confirm="search()"
+                    type="text"
+                    placeholder="搜索牌号"
+                />
+                <i
+                    class="iconfont iconclose_icon search__icon remove-icon"
+                    @click="closeSearchVal"
+                ></i>
+            </div>
+        </div>
+        <div class="page__content">
+            <ul class="list">
+                <li class="item" @click="goDetail">100</li>
+                <li class="item">12</li>
+                <li class="item">130</li>
+                <li class="item">1550</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../../components/image/index";
+export default {
+    name: "",
+    filters: {},
+    components: {
+        MyImage,
+    },
+    // 数据
+    data() {
+        return {
+            searchVal: "",
+            dataList: [],
+            pageIndex:1,
+            pageSize:20
+        };
+    },
+
+    onLoad() {},
+
+    async onShow() {},
+
+    onPullDownRefresh() {
+
+        this.getList();
+
+    },
+    onReachBottom(){
+        this.getMoreList();
+    },
+
+    // 函数
+    methods: {
+
+        getList() {
+            uni.showLoading({
+                title: "加载中...",
+                mask: true,
+            });
+            this.pageIndex = 1;
+            this.dataEnd = false;
+            this.api
+                .get("/Order/GetSettleList", {
+                    pageIndex: this.pageIndex,
+                    pageSize: this.pageSize,
+                })
+                .then((res) => {
+                    uni.hideLoading();
+                    this.dataList = res.data.data;
+                });
+        },
+        getMoreList() {
+            if (this.dataEnd) {
+                return;
+            }
+            this.pageIndex++;
+            this.api
+                .get("/Order/GetSettleList", {
+                    pageIndex: this.pageIndex,
+                    pageSize: this.pageSize,
+                })
+                .then((res) => {
+                    if (res.data.data.length === 0) {
+                        this.dataEnd = true;
+                    } else {
+                        this.dataList = [...this.dataList, ...res.data.data];
+                    }
+                });
+        },
+
+        goDetail(item) {
+            this.router.push({
+                path: "/pages/manage/cashier/cache-detail",
+                query: {
+                    
+                },
+            });
+        },
+
+        // 搜索
+        search() {
+            if (this.searchVal) {
+                this.getList();
+            }
+        },
+        closeSearchVal() {
+            this.searchVal = "";
+            this.getGoodsList();
+        },
+    },
+
+    // 数据计算
+    computed: {
+        user() {
+            return this.$store.state.user.user;
+        },
+    },
+    // 数据监听
+    watch: {},
+};
+</script>
+
+
+
+<style lang="scss" scoped>
+.page {
+    &__top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: px(145);
+        padding: 0 px(50);
+        background-color: #fff;
+        // box-shadow: 0 px(-5) px(10) #333;
+    }
+}
+.search {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: px(86);
+    padding: 0 px(35);
+    background-color: #f8f8f8;
+    border-radius: px(43);
+
+    &__icon {
+        margin-top: px(10);
+        font-size: px(60);
+        color: #999;
+    }
+
+    &__text {
+        margin-left: px(15);
+        font-size: px(36);
+        color: #999;
+        width: 100%;
+    }
+}
+.list {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 0 px(35);
+    margin-top: px(30);
+    .item {
+        width: px(300);
+        height: px(100);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: px(30);
+        background-color: #fff;
+        border-radius: px(8);
+    }
+}
+</style>

src/pages/manage/cashier/index.vue

@@ -2,6 +2,7 @@
     <div class="page shop-cart-page" :class="{ page_red: theme === 1 }">
         <div class="page__top">
             <span class="quick-text" @click="addNumGood">无码商品</span>
+            <span class="quick-text" @click="goCacheList">挂单列表</span>
             <div class="search">
                 <i class="iconfont icontubiao- search__icon"></i>
                 <input
@@ -329,6 +330,7 @@
                 <span class="price">￥ {{ selectPrice }}</span>
             </div>
             <div class="bottom-r">
+                <span class="btn cache" @click="viewCache">挂单</span>
                 <span class="btn" @click="submit">结算</span>
             </div>
         </div>
@@ -344,6 +346,34 @@
         </uni-popup>
         <!-- 规格选择 -->
         <g-spec-modal ref="spec" @change="modalCartChange()"></g-spec-modal>
+        <!-- 挂单 -->
+        <div class="cache-modal" v-if="cacheShow">
+            <div class="bg"></div>
+            <div class="cache-body">
+                <div class="head">
+                    <div class="tit">挂单</div>
+                    <div class="close">取消</div>
+                </div>
+                <div class="body">
+                    <div class="item">
+                        <input
+                            type="number"
+                            placeholder="牌号"
+                            v-model="cacheForm.num"
+                            :maxlength="8"
+                        />
+                    </div>
+                    <div class="item">
+                        <input
+                            type="text"
+                            placeholder="备注"
+                            v-model="cacheForm.remarks"
+                        />
+                    </div>
+                </div>
+                <div class="cache-btn" @click="cacheSubmit">确定</div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -402,6 +432,13 @@ export default {
             // 购物车选择
             selectList: [],
             showSelectList: false,
+
+            // 挂单
+            cacheShow: false,
+            cacheForm: {
+                num: "",
+                remarks: "",
+            },
         };
     },
 
@@ -769,6 +806,48 @@ export default {
         },
 
         modalCartChange() {},
+
+        // 挂单显示
+        viewCache() {
+            this.cacheForm.num === "";
+            this.cacheForm.remarks === "";
+            this.cacheShow = true;
+        },
+
+        cacheSubmit() {
+            this.cacheShow = false;
+            console.log(this.cacheForm,this.selectList);
+            // uni.showLoading({
+            //     title: "提交中...",
+            //     mask: true,
+            // });
+            // this.api
+            //     .post(
+            //         "/order/reverseSettle",
+            //         {
+            //             query: true,
+            //             id: this.data.id,
+            //         },
+            //         { pass: true }
+            //     )
+            //     .then((res) => {
+            //         this.btnLoading = false;
+            //         uni.hideLoading();
+            //         if (res.success) {
+            //             this.fn.showToast("挂单成功");
+            //             this.cacheShow = false;
+            //         } else {
+            //             this.fn.showModal({
+            //                 content: res.message,
+            //                 showCancel: false,
+            //             });
+            //         }
+            //     });
+        },
+
+        goCacheList(){
+            this.router.push('/pages/manage/cashier/cache')
+        }
     },
 
     // 数据计算
@@ -928,6 +1007,14 @@ page {
         }
     }
 }
+.bottom-r {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    .cache {
+        background-color: #343434;
+    }
+}
 .select-list {
     position: fixed;
     z-index: -1;
@@ -1698,4 +1785,57 @@ page {
     border-radius: px(30);
     flex-shrink: 0;
 }
+.cache-modal {
+    position: fixed;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1005;
+    .bg {
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+    }
+    .cache-body {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background-color: #fff;
+    }
+    .head {
+        background-color: #f4f4f4;
+        height: px(130);
+        padding: 0 px(35);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: px(40);
+        .close {
+            color: #149eba;
+        }
+    }
+    .body {
+    }
+    .item {
+        padding: px(10) px(35);
+        border-bottom: 1px solid #f1f1f1;
+        input {
+            height: px(120);
+            width: 100%;
+        }
+    }
+    .cache-btn {
+        width: 100%;
+        height: px(120);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #27a34f;
+        color: #fff;
+        font-size: px(40);
+    }
+}
 </style>

src/pages/manage/cashier/list.vue

@@ -104,7 +104,7 @@ export default {
     methods: {
         getList() {
             uni.showLoading({
-                title: "提交中...",
+                title: "加载中...",
                 mask: true,
             });
             this.pageIndex = 1;