优选订单页面

src/pages.json

@@ -533,6 +533,25 @@
             "style": {
                 "navigationBarTitleText": "商品详情"
             }
+        },
+        {
+            "path": "pages/youxuan/nav",
+            "style": {
+                "navigationBarTitleText": "优选管理"
+            }
+        },
+        {
+            "path": "pages/youxuan/order/index",
+            "style": {
+                "navigationBarTitleText": "优选订单",
+                "enablePullDownRefresh": true
+            }
+        },
+        {
+            "path": "pages/youxuan/order/detail",
+            "style": {
+                "navigationBarTitleText": "订单详情"
+            }
         }
     ]
 }

src/pages/manage/index.vue

@@ -38,7 +38,7 @@
                     <my-image class="img" :src="item.icon"></my-image>
                     <span class="text">{{ item.name }}</span>
                 </li>
-                <li class="item" @click="jump('/pages/youxuan/index')">
+                <li class="item" @click="jump('/pages/youxuan/nav')">
                     <my-image
                         class="img"
                         src="/static/icon/youxuan.png"

src/pages/youxuan/nav.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="page">
+        <ul class="list">
+            <li class="item" @click="jump('/pages/mina/set-data')">
+                <div class="name">记录收益</div>
+                <my-image
+                    class="arrow"
+                    src="/static/common/arrows_left.png"
+                ></my-image>
+            </li>
+            <li class="item" @click="jump('/pages/youxuan/order/index')">
+                <div class="name">优选订单</div>
+                <my-image
+                    class="arrow"
+                    src="/static/common/arrows_left.png"
+                ></my-image>
+            </li>
+            <li class="item" @click="jump('/pages/youxuan/brand')">
+                <div class="name">活动管理</div>
+                <my-image
+                    class="arrow"
+                    src="/static/common/arrows_left.png"
+                ></my-image>
+            </li>
+            <li class="item" @click="jump('/pages/youxuan/index')">
+                <div class="name">分类管理</div>
+                <my-image
+                    class="arrow"
+                    src="/static/common/arrows_left.png"
+                ></my-image>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../components/image/index";
+export default {
+    name: "",
+    components: { MyImage },
+
+    // 数据
+    data() {
+        return {
+            curShop: {},
+        };
+    },
+
+    onLoad() {},
+    async onShow() {},
+    // 函数
+    methods: {},
+
+    // 数据计算
+    computed: {
+        user() {
+            return this.$store.state.user.user;
+        },
+    },
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+    min-height: 100vh;
+    background-color: #fff;
+}
+.list {
+    border-top: 1px solid #f1f1f1;
+    .item {
+        height: px(120);
+        padding: 0 px(35);
+        font-size: px(44);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #f1f1f1;
+    }
+    .arrow {
+        width: px(40);
+        height: px(40);
+        flex-shrink: 0;
+        transform: rotate(180deg);
+        /deep/ img {
+            width: px(40);
+            height: px(40);
+        }
+    }
+}
+</style>

src/pages/youxuan/order/detail.vue

@@ -0,0 +1,266 @@
+<template>
+    <div class="page">
+        <div class="order-info">
+            <div class="info">
+                <div class="num">订单号：154546464666</div>
+                <div class="status">拣货中</div>
+            </div>
+            <div class="con">
+                <my-image src="" class="img"></my-image>
+                <div class="main">
+                    <div class="line">
+                        <div class="name">
+                            商品名称xxxxxxx商品名称xxxxxxx商品名称xxxxxxx商品名称xxxxxxx
+                        </div>
+                        <div class="money">
+                            合计：<span class="red-text">￥500.0</span>
+                        </div>
+                    </div>
+                    <div class="line">
+                        <div class="time">19：00</div>
+                        <div class="money">预估佣金：￥16.8</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <ul class="good-list">
+            <li>
+                <my-image class="good-img" src=""></my-image>
+                <div class="good-con">
+                    <div class="good-name">商品名称商品名称商品名称</div>
+                    <div class="info">
+                        <div class="sku">规格：43</div>
+                        <div class="count">数量：x1</div>
+                    </div>
+                    <div class="money">
+                        <div class="price">金额：￥13.4</div>
+                        <div class="commission">佣金：￥13.4</div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <my-image class="good-img" src=""></my-image>
+                <div class="good-con">
+                    <div class="good-name">商品名称</div>
+                    <div class="info">
+                        <div class="sku">规格：43</div>
+                        <div class="count">数量：x1</div>
+                    </div>
+                    <div class="money">
+                        <div class="price">金额：￥13.4</div>
+                        <div class="commission">佣金：￥13.4</div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+        <section class="info-box">
+            <ul>
+                <li>
+                    <div class="key">总件数：</div>
+                    <div class="value">x2</div>
+
+                    <div class="key key-r">总金额：</div>
+                    <div class="value">￥50.0</div>
+                </li>
+                <li>
+                    <div class="key">积分抵扣（2100分）：</div>
+                    <div class="value">-￥5.0</div>
+                </li>
+                <li>
+                    <div class="key">优惠券（满50减5）：</div>
+                    <div class="value">-￥5.5</div>
+                </li>
+                <li>
+                    <div class="key">配送费：</div>
+                    <div class="value">￥5.5</div>
+                </li>
+                <li>
+                    <div class="key">合计：</div>
+                    <div class="value red">￥50.5</div>
+                </li>
+                <li>
+                    <div class="key">佣金：</div>
+                    <div class="value">
+                        ￥50.5（佣金）-￥50.5（积分抵扣）=￥5
+                    </div>
+                </li>
+            </ul>
+        </section>
+        <section class="info-box">
+            <ul>
+                <li>
+                    <div class="key">支付时间：</div>
+                    <div class="value">2021/01/01 11:00</div>
+                </li>
+                <li>
+                    <div class="key">发货时间：</div>
+                    <div class="value">2021/01/01 11:00</div>
+                </li>
+                <li>
+                    <div class="key">订单完成：</div>
+                    <div class="value">2021/01/01 11:00</div>
+                </li>
+                <li>
+                    <div class="key">退款时间：</div>
+                    <div class="value">2021/01/01 11:00</div>
+                </li>
+            </ul>
+        </section>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../../components/image/index";
+export default {
+    name: "",
+    components: { MyImage },
+
+    // 数据
+    data() {
+        return {};
+    },
+
+    onShow() {},
+
+    // 函数
+    methods: {},
+
+    // 数据计算
+    computed: {},
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+    background-color: #fff;
+}
+.order-info {
+    padding: px(30) px(30) px(50);
+    border-bottom: 1px solid #e9e9e9;
+    .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .num {
+            color: #666;
+        }
+        .status {
+            color: #409eff;
+        }
+    }
+
+    .con {
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between;
+        margin-top: px(30);
+        .img {
+            width: px(200);
+            height: px(200);
+            flex-shrink: 0;
+            margin-right: px(20);
+            background-color: #f9f9f9;
+            /deep/ img {
+                width: px(200);
+                height: px(200);
+            }
+        }
+    }
+    .main {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        padding: px(25) 0;
+        .money {
+            flex-shrink: 0;
+        }
+        .name {
+            @include omits(2);
+        }
+        .line {
+            display: flex;
+            justify-content: space-between;
+            & ~ .line {
+                margin-top: px(10);
+            }
+        }
+        .red-text {
+            color: #ff4b26;
+        }
+        .time,
+        .money {
+            font-size: px(40);
+            color: #666;
+        }
+    }
+}
+
+.good-list {
+    li {
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+        padding: px(20) px(40);
+        border-bottom: 1px solid #e9e9e9;
+        background-color: #f9f9f9;
+        .good-img {
+            width: px(220);
+            height: px(220);
+            flex-shrink: 0;
+            margin-right: px(20);
+            background-color: #f1f1f1;
+            /deep/ img {
+                width: px(220);
+                height: px(220);
+            }
+        }
+        .good-con {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+            font-size: px(40);
+            .good-name {
+                @include omits(2);
+            }
+            .info,
+            .money {
+                margin-top: px(10);
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .count,
+            .sku {
+                color: #666;
+            }
+        }
+    }
+}
+.info-box {
+    padding: px(60) px(30);
+    & ~ .info-box {
+        border-top: 1px solid #e9e9e9;
+    }
+    li {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: px(40);
+        padding: px(10) 0;
+    }
+    .key {
+        color: #666;
+    }
+    .red {
+        color: #ff4b26;
+    }
+    .key-r {
+        margin-left: px(50);
+    }
+}
+</style>

src/pages/youxuan/order/index.vue

@@ -0,0 +1,277 @@
+<template>
+    <div class="page">
+        <div class="filter">
+            <span class="key">时间：</span>
+            <picker mode="date" @change="dateChange($event, 'startDate')"
+                ><input
+                    class="value"
+                    placeholder="开始日期"
+                    :disabled="true"
+                    v-model="filter.startDate"
+            /></picker>
+            <span class="row">至</span>
+            <picker mode="date" @change="dateChange($event, 'endDate')"
+                ><input
+                    class="value"
+                    placeholder="结束日期"
+                    :disabled="true"
+                    v-model="filter.endDate"
+            /></picker>
+        </div>
+        <div class="card">
+            <h1 class="tit">今天</h1>
+            <ul class="order-list">
+                <li
+                    @click="
+                        jump({
+                            path: '/pages/youxuan/order/detail',
+                            query: { id: 1 },
+                        })
+                    "
+                >
+                    <div class="info">
+                        <div class="num">订单号：154546464666</div>
+                        <div class="status">拣货中</div>
+                    </div>
+                    <div class="con">
+                        <my-image class="img" src=""></my-image>
+                        <div class="main">
+                            <div class="line">
+                                <div class="name">商品名称xxxxxxx</div>
+                                <div class="money">
+                                    合计：<span class="red-text">￥500.0</span>
+                                </div>
+                            </div>
+                            <div class="line">
+                                <div class="time">19：00</div>
+                                <div class="money">预估佣金：￥16.8</div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class="info">
+                        <div class="num">订单号：154546464666</div>
+                        <div class="status">拣货中</div>
+                    </div>
+                    <div class="con">
+                        <my-image src="" class="img"></my-image>
+                        <div class="main">
+                            <div class="line">
+                                <div class="name">商品名称xxxxxxx</div>
+                                <div class="money">
+                                    合计：<span class="red-text">￥500.0</span>
+                                </div>
+                            </div>
+                            <div class="line">
+                                <div class="time">19：00</div>
+                                <div class="money">预估佣金：￥16.8</div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="card">
+            <h1 class="tit">2021/09/05</h1>
+            <ul class="order-list">
+                <li>
+                    <div class="info">
+                        <div class="num">订单号：154546464666</div>
+                        <div class="status">拣货中</div>
+                    </div>
+                    <div class="con">
+                        <my-image class="img" src=""></my-image>
+                        <div class="main">
+                            <div class="line">
+                                <div class="name">商品名称xxxxxxx</div>
+                                <div class="money">
+                                    合计：<span class="red-text">￥500.0</span>
+                                </div>
+                            </div>
+                            <div class="line">
+                                <div class="time">19：00</div>
+                                <div class="money">预估佣金：￥16.8</div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class="info">
+                        <div class="num">订单号：154546464666</div>
+                        <div class="status">拣货中</div>
+                    </div>
+                    <div class="con">
+                        <my-image src="" class="img"></my-image>
+                        <div class="main">
+                            <div class="line">
+                                <div class="name">
+                                    商品名称xxxxxxx商品名称xxxxxxx商品名称xxxxxxx商品名称xxxxxxx
+                                </div>
+                                <div class="money">
+                                    合计：<span class="red-text">￥500.0</span>
+                                </div>
+                            </div>
+                            <div class="line">
+                                <div class="time">19：00</div>
+                                <div class="money">预估佣金：￥16.8</div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../../components/image/index";
+export default {
+    name: "",
+    components: { MyImage },
+    // 数据
+    data() {
+        return {
+            filter: {
+                startDate: "",
+                endDate: "",
+            },
+        };
+    },
+
+    onShow() {},
+
+    // 函数
+    methods: {
+        dateChange(e, name) {
+            this.filter[name] = e.detail.value;
+        },
+    },
+
+    // 数据计算
+    computed: {},
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+    margin: px(40) px(40);
+    border: 1px solid #e9e9e9;
+    background-color: #fff;
+    .tit {
+        font-size: px(44);
+        font-weight: bold;
+        padding: px(30);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: #f1f1f1;
+    }
+    .more {
+        color: #409eff;
+        font-size: px(40);
+        display: flex;
+        align-items: center;
+        font-weight: normal;
+        .arrow {
+            width: px(30);
+            height: px(30);
+            transform: rotate(180deg);
+            /deep/ img {
+                width: px(30);
+                height: px(30);
+            }
+        }
+    }
+}
+.filter {
+    display: flex;
+    align-items: center;
+    padding: px(40);
+    font-size: px(44);
+    background-color: #fff;
+    .row {
+        padding: 0 px(20);
+        flex-shrink: 0;
+    }
+    .key {
+        flex-shrink: 0;
+    }
+    .value {
+        border: 1px solid #f1f1f1;
+        height: px(80);
+        width: px(200);
+        padding: 0 px(10);
+        width: 90%;
+    }
+}
+.order-list {
+    padding: px(30);
+    li {
+        padding: px(30) 0;
+        & ~ li {
+            border-top: 1px solid #e9e9e9;
+        }
+    }
+    .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .num {
+            color: #666;
+        }
+        .status {
+            color: #409eff;
+        }
+    }
+
+    .con {
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between;
+        margin-top: px(30);
+        .img {
+            width: px(200);
+            height: px(200);
+            flex-shrink: 0;
+            margin-right: px(20);
+            background-color: #f9f9f9;
+            /deep/ img {
+                width: px(200);
+                height: px(200);
+            }
+        }
+    }
+    .main {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        padding: px(25) 0;
+        .money {
+            flex-shrink: 0;
+        }
+        .name {
+            @include omits(2);
+        }
+        .line {
+            display: flex;
+            justify-content: space-between;
+            & ~ .line {
+                margin-top: px(10);
+            }
+        }
+        .red-text {
+            color: #ff4b26;
+        }
+        .time,
+        .money {
+            font-size: px(40);
+            color: #666;
+        }
+    }
+}
+</style>