优选订单

src/pages.json

@@ -552,6 +552,13 @@
             "style": {
                 "navigationBarTitleText": "订单详情"
             }
+        },
+        {
+            "path": "pages/youxuan/profit",
+            "style": {
+                "navigationBarTitleText": "收益记录",
+                "enablePullDownRefresh": true
+            }
         }
     ]
 }

src/pages/youxuan/nav.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="page">
         <ul class="list">
-            <li class="item" @click="jump('/pages/mina/set-data')">
+            <li class="item" @click="jump('/pages/youxuan/profit')">
                 <div class="name">记录收益</div>
                 <my-image
                     class="arrow"
@@ -16,7 +16,7 @@
                 ></my-image>
             </li>
             <li class="item" @click="jump('/pages/youxuan/brand')">
-                <div class="name">活动管理</div>
+                <div class="name">优选品牌</div>
                 <my-image
                     class="arrow"
                     src="/static/common/arrows_left.png"

src/pages/youxuan/order/detail.vue

@@ -2,53 +2,39 @@
     <div class="page">
         <div class="order-info">
             <div class="info">
-                <div class="num">订单号：154546464666</div>
-                <div class="status">拣货中</div>
+                <div class="num">订单号：{{data.orderNo}}</div>
+                <div class="status">{{data.status | orderStatus}}</div>
             </div>
             <div class="con">
-                <my-image src="" class="img"></my-image>
+                <my-image :src="data.headIcon" class="img"></my-image>
                 <div class="main">
                     <div class="line">
                         <div class="name">
-                            商品名称xxxxxxx商品名称xxxxxxx商品名称xxxxxxx商品名称xxxxxxx
+                            {{data.nickName}}
                         </div>
                         <div class="money">
-                            合计：<span class="red-text">￥500.0</span>
+                            合计：<span class="red-text">￥{{data.amount / 100}}</span>
                         </div>
                     </div>
                     <div class="line">
-                        <div class="time">19：00</div>
-                        <div class="money">预估佣金：￥16.8</div>
+                        <div class="time"> {{ data.orderTime | dateFormat("hh:mm") }}</div>
+                        <div class="money">预估佣金：￥{{data.estimateComission / 100}}</div>
                     </div>
                 </div>
             </div>
         </div>
         <ul class="good-list">
-            <li>
-                <my-image class="good-img" src=""></my-image>
+            <li v-for="(item,index) of data.orderItems" :key="index">
+                <my-image class="good-img" :src="item.productImage"></my-image>
                 <div class="good-con">
-                    <div class="good-name">商品名称商品名称商品名称</div>
+                    <div class="good-name">{{item.productName}}</div>
                     <div class="info">
-                        <div class="sku">规格：43</div>
-                        <div class="count">数量：x1</div>
+                        <div class="sku">规格：{{item.productSpec}}</div>
+                        <div class="count">数量：{{item.count}}</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 class="price">金额：￥{{item.amount / 100}}</div>
+                        <div class="commission">佣金：￥{{item.estimateComission / 100}}</div>
                     </div>
                 </div>
             </li>
@@ -57,38 +43,42 @@
             <ul>
                 <li>
                     <div class="key">总件数：</div>
-                    <div class="value">x2</div>
+                    <div class="value">x{{data.totalCount}}</div>
 
                     <div class="key key-r">总金额：</div>
-                    <div class="value">￥50.0</div>
+                    <div class="value">￥{{data.totalAmount / 100}}</div>
                 </li>
-                <li>
-                    <div class="key">积分抵扣（2100分）：</div>
-                    <div class="value">-￥5.0</div>
+                <li v-if="data.points">
+                    <div class="key">积分抵扣（{{data.points}}分）：</div>
+                    <div class="value">-￥{{data.pointsPrice}}</div>
                 </li>
                 <li>
-                    <div class="key">优惠券（满50减5）：</div>
-                    <div class="value">-￥5.5</div>
+                    <div class="key">优惠券：</div>
+                    <div class="value">-￥{{data.couponAmount}}</div>
                 </li>
                 <li>
-                    <div class="key">配送费：</div>
-                    <div class="value">￥5.5</div>
+                    <div class="key">运费/配送费：</div>
+                    <div class="value">￥{{data.postage}}</div>
                 </li>
                 <li>
                     <div class="key">合计：</div>
-                    <div class="value red">￥50.5</div>
+                    <div class="value red">￥{{data.amount / 100}}</div>
                 </li>
-                <li>
+                <!-- <li>
                     <div class="key">佣金：</div>
                     <div class="value">
                         ￥50.5（佣金）-￥50.5（积分抵扣）=￥5
                     </div>
-                </li>
+                </li> -->
             </ul>
         </section>
         <section class="info-box">
             <ul>
                 <li>
+                    <div class="key">下单时间：</div>
+                    <div class="value">{{data.orderTime | dateFormat("yyyy-MM-dd hh:mm")}}</div>
+                </li>
+                <!-- <li>
                     <div class="key">支付时间：</div>
                     <div class="value">2021/01/01 11:00</div>
                 </li>
@@ -103,7 +93,7 @@
                 <li>
                     <div class="key">退款时间：</div>
                     <div class="value">2021/01/01 11:00</div>
-                </li>
+                </li> -->
             </ul>
         </section>
     </div>
@@ -111,19 +101,68 @@
 
 <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 },
 
+    filter: {
+        orderStatus(v) {
+            return statusEnum[v] || "";
+        },
+    },
     // 数据
     data() {
-        return {};
+        return {
+            dataId: "",
+            data: {},
+        };
+    },
+
+    onLoad(opts) {
+        this.dataId = opts.id;
+        this.getDetail();
     },
 
     onShow() {},
 
     // 函数
-    methods: {},
+    methods: {
+        getDetail() {
+            uni.showLoading({
+                title: "加载中...",
+            });
+            this.api.get("/Yx/GetOrder", { id: this.dataId }).then((res) => {
+                uni.hideLoading();
+                this.data = res.data;
+            });
+        },
+    },
 
     // 数据计算
     computed: {},

src/pages/youxuan/order/index.vue

@@ -18,117 +18,91 @@
                     v-model="filter.endDate"
             /></picker>
         </div>
-        <div class="card">
-            <h1 class="tit">今天</h1>
+        <div class="card" v-for="(item, index) of listData" :key="index">
+            <h1 class="tit">{{ item.date | dateFormat }}</h1>
             <ul class="order-list">
                 <li
+                    v-for="order of item.orderList"
+                    :key="order.id"
                     @click="
                         jump({
                             path: '/pages/youxuan/order/detail',
-                            query: { id: 1 },
+                            query: { id: order.id },
                         })
                     "
                 >
                     <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 class="num">订单号：{{ order.orderNo }}</div>
+                        <div class="status">
+                            {{ order.status | orderStatus }}
                         </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>
+                        <my-image class="img" :src="order.headIcon"></my-image>
                         <div class="main">
                             <div class="line">
-                                <div class="name">商品名称xxxxxxx</div>
+                                <div class="name">{{ order.nickName }}</div>
                                 <div class="money">
-                                    合计：<span class="red-text">￥500.0</span>
+                                    合计：<span class="red-text"
+                                        >￥{{ order.amount / 100 }}</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 class="time">
+                                    {{ order.orderTime | dateFormat("hh:mm") }}
                                 </div>
                                 <div class="money">
-                                    合计：<span class="red-text">￥500.0</span>
+                                    预估佣金：￥{{
+                                        order.estimateComission / 100
+                                    }}
                                 </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="more-text" v-if="dataEnd">- 没有更多数据了 -</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 },
+    filter: {
+        orderStatus(v) {
+            return statusEnum[v] || "";
+        },
+    },
     // 数据
     data() {
         return {
@@ -136,15 +110,76 @@ export default {
                 startDate: "",
                 endDate: "",
             },
+            pageIndex: 1,
+            dataEnd: false,
+            listData: [],
         };
     },
+    onLoad() {
+        this.getList();
+    },
 
     onShow() {},
+    onPullDownRefresh() {
+        this.getList(true);
+    },
+    onReachBottom() {
+        this.getMoreList();
+    },
 
     // 函数
     methods: {
+        getList(isPull) {
+            uni.showLoading({
+                title: "加载中...",
+            });
+            this.pageIndex = 1;
+            this.dataEnd = false;
+            let sendData = {
+                pageIndex: this.pageIndex++,
+            };
+            if (this.filter.startDate) {
+                sendData.startTime = this.filter.startDate;
+            }
+            if (this.filter.endDate) {
+                sendData.endTime = this.filter.endDate;
+            }
+            this.api.get("/Yx/GetOrderList", sendData).then((res) => {
+                if (isPull) {
+                    uni.stopPullDownRefresh();
+                }
+                uni.hideLoading();
+                this.listData = res.data;
+                if (!this.listData.length) {
+                    this.dataEnd = true;
+                }
+            });
+        },
+        getMoreList() {
+            uni.showLoading({
+                title: "加载中...",
+            });
+            let sendData = {
+                pageIndex: this.pageIndex++,
+            };
+            if (this.filter.startDate) {
+                sendData.startTime = this.filter.startDate;
+            }
+            if (this.filter.endDate) {
+                sendData.endTime = this.filter.endDate;
+            }
+            this.api.get("/Yx/GetOrderList", sendData).then((res) => {
+                uni.hideLoading();
+                this.listData = [...this.listData, ...res.data];
+                if (!this.listData.length) {
+                    this.dataEnd = true;
+                }
+            });
+        },
+
         dateChange(e, name) {
             this.filter[name] = e.detail.value;
+            this.getList();
         },
     },
 
@@ -274,4 +309,12 @@ export default {
         }
     }
 }
+
+.more-text {
+    display: flex;
+    justify-content: center;
+    padding-bottom: px(60);
+    font-size: px(34);
+    color: #999;
+}
 </style>

src/pages/youxuan/profit.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="page">
+        <div class="profit-info">
+            <h6 class="tit">累计优选佣金</h6>
+            <div class="money">4505.8</div>
+        </div>
+
+        <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>
+
+        <ul class="list">
+            <li>
+                <div class="top">
+                    <div class="tit">订单佣金</div>
+                    <div class="money">+12.90</div>
+                </div>
+                <div class="info">
+                    <div class="date">2021/03/29</div>
+                    <div class="formula">￥16(佣金)-￥2(积分抵扣) = ￥16</div>
+                </div>
+                <div class="bottom">
+                    <div class="num">订单号：154546464666</div>
+                    <div class="link">查看订单</div>
+                </div>
+            </li>
+            <li>
+                <div class="top">
+                    <div class="tit">订单佣金</div>
+                    <div class="money">+12.90</div>
+                </div>
+                <div class="info">
+                    <div class="date">2021/03/29</div>
+                    <div class="formula">￥16(佣金)-￥2(积分抵扣) = ￥16</div>
+                </div>
+                <div class="bottom">
+                    <div class="num">订单号：154546464666</div>
+                    <div class="link">查看订单</div>
+                </div>
+            </li>
+        </ul>
+    </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>
+.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%;
+    }
+}
+
+.profit-info {
+    text-align: center;
+    padding: px(60) px(40);
+    background-color: #fff;
+    .tit {
+        font-size: px(44);
+    }
+    .money {
+        font-size: px(56);
+        color: #ff4b26;
+        margin-top: px(30);
+    }
+}
+.list {
+    padding: px(50) 0;
+    border-top: 1px solid #f1f1f1;
+    background-color: #fff;
+    li {
+        border-bottom: 1px solid #f1f1f1;
+        padding: px(30) px(40);
+    }
+    .top,.info,.bottom{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .tit{
+        font-size: px(48);
+    }
+    .money{
+        color:#ff4b26;
+    }
+    .info,.bottom{
+        font-size: px(40);
+        color: #666;
+        margin-top: px(10);
+    }
+    .formula{
+        font-weight: bold;
+    }
+    .link{
+        color: #4395ff;
+    }
+    .num{
+        color: #999;
+    }
+}
+</style>