基础接口调用

src/components/xuan-switch/xuan-switch.vue

@@ -0,0 +1,214 @@
+<template>
+    <view class="switch-container" :style="[{ background: bj_color }]">
+        <view class="switch_view">
+            <view
+                class="switch-item"
+                :class="{ checked_switch: isSwitch }"
+                :style="isSwitch ? `color:${checked_color}` : ''"
+                @click.prevent.stop="changeSwitch(true)"
+                :animation="animationData2"
+            >
+                {{ switchList[0] }}
+            </view>
+            <view
+                class="switch-item"
+                :class="{ checked_switch: !isSwitch }"
+                :style="!isSwitch ? `color:${checked_color}` : ''"
+                @click.prevent.stop="changeSwitch(false)"
+                :animation="animationData3"
+            >
+                {{ switchList[1] }}
+            </view>
+        </view>
+        <view class="disabled" v-if="disabled"></view>
+        <view
+            class="position_view"
+            :animation="animationData1"
+            :style="[{ background: checked_bj_color }]"
+        ></view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        switchList: {
+            type: Array,
+            default: () => {
+                return ["开", "关"];
+            },
+        },
+        defaultSwitch: {
+            type: Boolean,
+            default: true,
+        },
+        isShowModal: {
+            //改变开关时，是否弹框提醒
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        bj_color: {
+            type: String,
+            default: "#fff",
+        },
+        // checked_bj_color:{
+        //   type:String,
+        //   default:'rgb(0, 188, 38)',
+        // },
+        changeBgColor: {
+            type: Boolean,
+            default: true,
+        },
+        checked_color: {
+            type: String,
+            default: "#fff",
+        },
+    },
+    data() {
+        return {
+            isSwitch: true,
+            initAnimation: {},
+            animationData1: {},
+            animationData2: {},
+            animationData3: {},
+            checked_bj_color: "00bc26", //#f44336红 #00bc26绿
+        };
+    },
+    created() {
+        this.initAnimation = uni.createAnimation({
+            duration: 500,
+            timingFunction: "ease",
+        });
+        this.isSwitch = this.defaultSwitch;
+        this.changeAnimation();
+    },
+    methods: {
+        changeSwitch(isSwitch) {
+            if (isSwitch == this.isSwitch || this.disabled) {
+                return;
+            }
+            if (this.isShowModal) {
+                let index = isSwitch ? 0 : 1;
+                let text = this.switchList[index];
+                uni.showModal({
+                    title: "提示",
+                    content: `您确定要将其调整为${text}吗？`,
+                    success: (res) => {
+                        if (res.confirm) {
+                            this.isSwitch = isSwitch;
+                            this.changeAnimation();
+                            this.callParentEvent(isSwitch);
+                        }
+                    },
+                });
+            } else {
+                this.isSwitch = isSwitch;
+                this.changeAnimation();
+                this.callParentEvent(isSwitch);
+            }
+        },
+        changeAnimation() {
+            if (this.isSwitch) {
+                this.animationData1 = this.initAnimation
+                    .left(0)
+                    .width("60%")
+                    .step()
+                    .export();
+                this.animationData2 = this.initAnimation
+                    .width("60%")
+                    .step()
+                    .export();
+                this.animationData3 = this.initAnimation
+                    .width("40%")
+                    .step()
+                    .export();
+            } else {
+                this.animationData1 = this.initAnimation
+                    .left("40%")
+                    .width("60%")
+                    .step()
+                    .export();
+                this.animationData2 = this.initAnimation
+                    .width("40%")
+                    .step()
+                    .export();
+                this.animationData3 = this.initAnimation
+                    .width("60%")
+                    .step()
+                    .export();
+            }
+        },
+        callParentEvent() {
+            this.$emit("change", this.isSwitch);
+        },
+    },
+    watch: {
+        isSwitch(v) {
+            if (this.changeBgColor) {
+                if (v) {
+                    this.checked_bj_color = "#00bc26";
+                } else {
+                    this.checked_bj_color = "#f44336";
+                }
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.switch-container {
+    display: flex;
+    flex-direction: row;
+    width: 160upx;
+    height: 60upx;
+    border-radius: 100upx;
+    border: 1upx solid #ccc;
+    position: relative;
+    .switch_view {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        display: flex;
+        border-radius: 100upx;
+        .switch-item {
+            color: #666;
+            font-size: 24upx;
+            height: 100%;
+            width: 40%;
+            border-radius: 100upx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+    .position_view {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 60%;
+        height: 100%;
+        border-radius: 100upx;
+        background: rgb(0, 188, 38);
+        transition: all 0.3s;
+    }
+    .disabled {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 99;
+        background: #fff;
+        opacity: 0.6;
+        border-radius: 100upx;
+    }
+}
+</style>

src/pages.json

@@ -112,6 +112,37 @@
             "style": {
                 "navigationBarTitleText": "修改手机号"
             }
+        },
+        {
+            "path": "pages/yx/classify",
+            "style": {
+                "navigationBarTitleText": "分类管理"
+            }
+        },
+        {
+            "path": "pages/yx/brand",
+            "style": {
+                "navigationBarTitleText": "活动管理"
+            }
+        },
+        {
+            "path": "pages/yx/good",
+            "style": {
+                "navigationBarTitleText": "商品管理"
+            }
+        },
+        {
+            "path": "pages/yx/order/index",
+            "style": {
+                "navigationBarTitleText": "优选订单",
+                "enablePullDownRefresh": true
+            }
+        },
+        {
+            "path": "pages/yx/order/detail",
+            "style": {
+                "navigationBarTitleText": "订单详情"
+            }
         }
     ]
 }

src/pages/index/login.vue

@@ -21,7 +21,7 @@
             <button class="btn" @click="submit">确定</button>
             <div class="login-other">
                 <div class="register-box">
-                    <a class="go-register" @click="jumpRegister">去注册</a>
+                    <!-- <a class="go-register" @click="jumpRegister">去注册</a> -->
                     <!-- <a class="go-register register2" @click="jumpRegister2"
                         >无团长号注册</a
                     > -->

src/pages/manage/index.vue

@@ -10,35 +10,35 @@
                     ></my-image>
                     <span class="text">账号管理</span>
                 </li>
-                <li class="item" @click="jump('/pages/manage/user/index')">
+                <li class="item" @click="jump('/pages/yx/classify')">
                     <my-image
                         class="img"
-                        src="/static/icon/cashier.png"
+                        src="/static/icon/classify.png"
                     ></my-image>
-                    <span class="text">资金结算</span>
+                    <span class="text">分类管理</span>
                 </li>
-                <li class="item" @click="jump('/pages/manage/user/index')">
+                <li class="item" @click="jump('/pages/yx/brand')">
                     <my-image
                         class="img"
-                        src="/static/icon/bd.png"
+                        src="/static/icon/youxuan.png"
                     ></my-image>
-                    <span class="text">售后处理</span>
+                    <span class="text">活动管理</span>
                 </li>
-                <li class="item" @click="jump('/pages/manage/user/index')">
+                <li class="item">
                     <my-image
                         class="img"
-                        src="/static/icon/shop.png"
+                        src="/static/icon/cashier.png"
                     ></my-image>
-                    <span class="text">商品管理</span>
+                    <span class="text">资金结算</span>
                 </li>
-                <li class="item" @click="jump('/pages/manage/user/index')">
+                <li class="item">
                     <my-image
                         class="img"
-                        src="/static/icon/youxuan.png"
+                        src="/static/icon/bd.png"
                     ></my-image>
-                    <span class="text">活动管理</span>
+                    <span class="text">售后处理</span>
                 </li>
-                <li class="item" @click="jump('/pages/manage/user/index')">
+                <li class="item" @click="jump('/pages/yx/order/index')">
                     <my-image
                         class="img"
                         src="/static/icon/cashier-list.png"

src/pages/yx/classify.vue

@@ -0,0 +1,307 @@
+<template>
+    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
+        <ul class="classify-list">
+            <black v-for="item of classifyList" :key="item.categoryId">
+                <li class="item">
+                    <div
+                        class="con"
+                    >
+                        <div class="name">
+                            {{ item.name }}
+                        </div>
+                        <div class="des">
+                            <!-- {{ item.children ? item.children.length : 0 }}个品牌 -->
+                        </div>
+                        <my-image
+                            class="arrow"
+                            :class="{ up: item.showChildren }"
+                            src="/static/common/arrows_left.png"
+                        ></my-image>
+                    </div>
+                    <div class="tool">
+                        <!-- <selectSwitch class="switch" :defaultSwitch="item.display===1" @change="displaySwitch(item,$event)" :switchList="['显示','隐藏']"/> -->
+                        <!-- <selectSwitch class="switch" :defaultSwitch="item.top!==0" @change="setTopSwitch(item,$event)" :switchList="['置顶','取消']" :changeBgColor="false"/> -->
+                    </div>
+                </li>
+            </black>
+        </ul>
+        <!-- <div class="add-classify" @click="add">新建分类</div> -->
+
+        <uni-popup ref="popup" type="dialog">
+            <uni-popup-dialog
+                mode="input"
+                :title="'推荐等级'"
+                :content="false"
+                :inputType="'number'"
+                :value="level"
+                placeholder="请输入推荐等级"
+                @confirm="popupConfirm"
+            ></uni-popup-dialog>
+        </uni-popup>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../components/image/index";
+import uniPopup from "../../components/uni-popup/uni-popup";
+import uniPopupDialog from "../../components/uni-popup/uni-popup-dialog";
+import selectSwitch  from "../../components/xuan-switch/xuan-switch";
+
+export default {
+    name: "",
+    components: { MyImage, uniPopup, uniPopupDialog,selectSwitch  },
+
+    // 数据
+    data() {
+        return {
+            classifyList: [],
+            curData: {},
+            level: 0,
+        };
+    },
+
+    onLoad() {
+        if (this.user.storeId) {
+        }
+    },
+    async onShow() {
+        this.getClassify();
+    },
+    // 函数
+    methods: {
+        // 获取分类
+        getClassify() {
+            uni.showLoading({
+                title: "加载中...",
+            });
+            this.api.get("/Supplier/GetCateList", {}).then((res) => {
+                uni.hideLoading();
+                this.classifyList = res.data;
+            });
+        },
+
+        // 显示隐藏
+        displaySwitch(val,e) {
+            if (val.display === 0) {
+                //下架中，点击上架
+                this.api
+                    .post("/Yx/SetCategoryDisplay", {
+                        categoryId: val.categoryId,
+                        display: 1,
+                    })
+                    .then((res) => {
+                        if (res.success) {
+                            val.display = 1;
+                            this.$forceUpdate();
+                        } else {
+                            this.fn.showModal({
+                                title: "设置失败",
+                                content: res.message,
+                                showCancel: false,
+                            });
+                        }
+                    });
+            } else {
+                this.api
+                    .post("/Yx/SetCategoryDisplay", {
+                        categoryId: val.categoryId,
+                        display: 0,
+                    })
+                    .then((res) => {
+                        if (res.success) {
+                            // this.fn.showToast("下架成功");
+                            val.display = 0;
+                            this.$forceUpdate();
+                        } else {
+                            this.fn.showModal({
+                                title: "设置失败",
+                                content: res.message,
+                                showCancel: false,
+                            });
+                        }
+                    });
+            }
+        },
+
+        // 推荐等级设置
+        setTopSwitch(val) {
+            if (val.top === 0) {
+                // 置顶
+                this.api
+                    .post("/Yx/SetCategoryTop", {
+                        id: val.categoryId,
+                        query:true
+                    })
+                    .then((res) => {
+                        if (res.success) {
+                            val.top = 99;
+                            this.$forceUpdate();
+                        } else {
+                            this.fn.showModal({
+                                title: "设置失败",
+                                content: res.message,
+                                showCancel: false,
+                            });
+                        }
+                    });
+            } else {
+                // 取消置顶
+                this.api
+                    .post("/Yx/CancelCategoryTop", {
+                        id: val.categoryId,
+                        query:true
+                    })
+                    .then((res) => {
+                        if (res.success) {
+                            // this.fn.showToast("下架成功");
+                            val.top = 0;
+                            this.$forceUpdate();
+                        } else {
+                            this.fn.showModal({
+                                title: "设置失败",
+                                content: res.message,
+                                showCancel: false,
+                            });
+                        }
+                    });
+            }
+        },
+
+
+    },
+
+    // 数据计算
+    computed: {
+        user() {
+            return this.$store.state.user.user;
+        },
+    },
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+    padding-bottom: px(180);
+    min-height: 100vh;
+    background-color: #fff;
+}
+.add-classify {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: px(150);
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: px(44);
+    color: #fff;
+    background-color: rgb(0, 188, 38);
+}
+.page--iphoneX {
+    .add-classify {
+        padding-bottom: px(30);
+    }
+}
+.classify-list {
+    .item {
+        display: flex;
+        padding: px(30) px(35);
+        justify-content: space-between;
+        align-items: center;
+        border-top: 1px solid #f1f1f1;
+        .tool {
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .setting {
+            width: px(140);
+            height: px(80);
+            border: 1px solid #b7b7b7;
+            border-radius: px(8);
+            color: #666;
+            font-size: px(40);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .con {
+            width: 40%;
+            padding-right: px(44);
+            position: relative;
+        }
+        .link {
+            color: #4395ff;
+            font-size: px(42);
+            position: absolute;
+            right: 0;
+            top: 50%;
+            z-index: 10;
+            transform: translate(0, -50%);
+        }
+        .name {
+            font-size: px(44);
+            color: #333;
+        }
+
+        .des {
+            font-size: px(36);
+            margin-top: px(20);
+            color: #666;
+            @include omit(100%);
+        }
+        .arrow {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            z-index: 10;
+            transform: translate(0, -50%) rotate(180deg);
+            width: px(44);
+            height: px(44);
+            transition: all 0.3s;
+            /deep/ img {
+                height: px(44);
+                width: px(44);
+            }
+            &.up {
+                transform: translate(0, -50%) rotate(90deg);
+            }
+        }
+        .status {
+            width: px(120);
+            height: px(44);
+            background-color: #e7faf0;
+            border-radius: px(8);
+            border: 1px solid #d0f5e0;
+            font-size: px(32);
+            color: #13ce66;
+            padding: px(6) px(3);
+            margin-right: px(30);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &.status2 {
+                width: px(210);
+            }
+            &.up {
+                background-color: #ffeded;
+                border-color: #ffdbdb;
+                color: #ff4949;
+            }
+        }
+    }
+    .item-child {
+        padding-left: px(60);
+        background-color: #efefef;
+    }
+}
+.switch~.switch{
+    margin-left: px(40);
+}
+</style>

src/pages/yx/order/detail.vue

@@ -0,0 +1,375 @@
+<template>
+    <div class="page" v-if="data">
+        <div class="order-info">
+            <div class="info">
+                <div class="num">订单号：{{ data.orderNo }}</div>
+                <div class="status">{{ data.status | orderStatus }}</div>
+            </div>
+            <div class="con">
+                <my-image :src="data.headIcon" class="img"></my-image>
+                <div class="main">
+                    <div class="line">
+                        <div class="name">
+                            {{ data.nickName }}
+                        </div>
+                        <div class="money">
+                            合计：<span class="red-text"
+                                >￥{{ data.amount / 100 }}</span
+                            >
+                        </div>
+                    </div>
+                    <div class="line">
+                        <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 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">{{ item.productName }}</div>
+                    <div class="info">
+                        <div class="sku">规格：{{ item.productSpec }}</div>
+                        <div class="count">数量：{{ item.count }}</div>
+                    </div>
+                    <div class="money">
+                        <div class="price">金额：￥{{ item.amount / 100 }}</div>
+                        <div class="commission">
+                            佣金：￥{{ item.estimateComission / 100 }}
+                        </div>
+                    </div>
+                    <div class="status">
+                        <div></div>
+                        <div>{{ item.status | orderStatus }}</div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+        <section class="info-box">
+            <ul>
+                <li>
+                    <div class="key">总件数：</div>
+                    <div class="value">x{{ data.totalCount }}</div>
+
+                    <div class="key key-r">总金额：</div>
+                    <div class="value">￥{{ data.totalAmount / 100 }}</div>
+                </li>
+                <li>
+                    <div class="key">积分抵扣（{{ data.points }}分）：</div>
+                    <div class="value">-￥{{ data.pointsPrice / 100 }}</div>
+                </li>
+                <li>
+                    <div class="key">优惠券：</div>
+                    <div class="value">-￥{{ data.couponAmount }}</div>
+                </li>
+                <li>
+                    <div class="key">运费/配送费：</div>
+                    <div class="value">￥{{ data.postage }}</div>
+                </li>
+                <li>
+                    <div class="key">合计：</div>
+                    <div class="value red">￥{{ data.amount / 100 }}</div>
+                </li>
+                <li >
+                    <div class="key">团长佣金：</div>
+                    <div class="value blod">
+                        ￥{{ data.estimateComission / 100 }}（佣金）- ￥{{
+                            data.pointsPrice / 100
+                        }}（积分抵扣）= <span class="green">+￥{{ data.commission / 100 }}</span>
+                    </div>
+                </li>
+                <li v-if="dataType === 9">
+                    <div class="key">佣金回退：</div>
+                    <div class="value blod">
+                        ￥{{ data.estimateComission / 100 }}（佣金）- ￥{{
+                            data.pointsPrice / 100
+                        }}（积分抵扣）= <span class="red">-￥{{ data.commission / 100 }}（已退还）</span>
+                    </div>
+                </li>
+                <li v-if="dataType === 10">
+                    <div class="key">BD佣金：</div>
+                    <div class="value blod">
+                        ￥{{ data.commission / 100 }}(佣金) * 20% = 
+                        <span class="green">+￥{{(data.commission * 0.2) | minuteToRmb}}</span>
+                    </div>
+                </li>
+                <li v-if="dataType === 11">
+                    <div class="key">BD佣金回退：</div>
+                    <div class="value blod">
+                         ￥{{ data.commission / 100 }}(佣金) * 20% = 
+                        <span class="red">-￥{{(data.commission * 0.2) | minuteToRmb}}（已退还）</span>
+                    </div>
+                </li>
+                <li v-if="dataType === 12">
+                    <div class="key">BDM佣金：</div>
+                    <div class="value blod">
+                        ￥{{ data.commission / 100 }}(佣金) * 5% = 
+                        <span class="green">+￥{{
+                            (data.commission * 0.05) | minuteToRmb
+                        }}</span>
+                    </div>
+                </li>
+                <li v-if="dataType === 13">
+                    <div class="key">BDM佣金回退：</div>
+                    <div class="value blod">
+                        ￥{{ data.commission / 100 }}(佣金) * 5% = 
+                        <span class="green">-￥{{
+                            (data.commission * 0.05) | minuteToRmb
+                        }}（已退还）</span>
+                    </div>
+                </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 v-for="item of data.logs" :key="item.time">
+                    <div class="value">
+                        {{ item.time | dateFormat("yy-MM-dd hh:mm") }}：
+                    </div>
+                    <div class="key">{{ item.title }}</div>
+                </li>
+            </ul>
+        </section>
+    </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: {
+        orderStatus(v) {
+            return statusEnum[v] || "";
+        },
+    },
+    // 数据
+    data() {
+        return {
+            dataId: "",
+            data: null,
+            isBd: true,
+            dataType: 0,
+        };
+    },
+
+    onLoad(opts) {
+        this.dataId = opts.id;
+        if (opts.type) {
+            this.dataType = Number(opts.type);
+        }
+        this.getDetail();
+    },
+
+    onShow() {},
+
+    // 函数
+    methods: {
+        getDetail() {
+            uni.showLoading({
+                title: "加载中...",
+            });
+            this.api.get("/Yx/GetOrder", { id: this.dataId }).then((res) => {
+                uni.hideLoading();
+                this.data = res.data;
+            });
+        },
+    },
+
+    // 数据计算
+    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(230);
+            height: px(230);
+            flex-shrink: 0;
+            margin-right: px(20);
+            background-color: #f9f9f9;
+            /deep/ img {
+                width: px(230);
+                height: px(230);
+            }
+        }
+    }
+    .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,
+            .status {
+                margin-top: px(10);
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .count,
+            .sku {
+                color: #666;
+            }
+            .status {
+                font-size: px(36);
+                color: #f78819;
+            }
+        }
+    }
+}
+.info-box {
+    padding: px(60) px(30);
+    & ~ .info-box {
+        border-top: 1px solid #e9e9e9;
+    }
+    li {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        font-size: px(40);
+        padding: px(15) 0;
+    }
+    .key {
+        color: #666;
+        margin-left: px(20);
+    }
+    .red {
+        color: #ff4b26;
+    }
+    .key-r {
+        margin-left: px(50);
+    }
+    .value {
+        flex-shrink: 0;
+        margin-top: px(8);
+    }
+}
+.blod {
+    font-weight: bold;
+}
+.green {
+    color: #27a34f !important;
+}
+.red {
+    color: #f85e5e !important;
+}
+</style>

src/pages/yx/order/index.vue

@@ -0,0 +1,328 @@
+<template>
+    <div class="page">
+        <div class="filter">
+            <span class="key">时间：</span>
+            <picker
+                mode="date"
+                @change="dateChange($event, 'startDate')"
+                :end="filter.endDate || endDate"
+                ><input
+                    class="value"
+                    placeholder="开始日期"
+                    :disabled="true"
+                    v-model="filter.startDate"
+            /></picker>
+            <span class="row">至</span>
+            <picker
+                mode="date"
+                @change="dateChange($event, 'endDate')"
+                :start="filter.startDate"
+                :end="endDate"
+                ><input
+                    class="value"
+                    placeholder="结束日期"
+                    :disabled="true"
+                    v-model="filter.endDate"
+            /></picker>
+        </div>
+        <div class="card" v-for="(item, index) of listData" :key="index">
+            <h1 class="tit">{{ item.orderTime | dateFormat }}</h1>
+            <ul class="order-list">
+                <li
+                    @click="
+                        jump({
+                            path: '/pages/youxuan/order/detail',
+                            query: { id: item.id },
+                        })
+                    "
+                >
+                    <div class="info">
+                        <div class="num">订单号：{{ item.orderNo }}</div>
+                        <div class="status">
+                            {{ item.status | orderStatus }}
+                        </div>
+                    </div>
+                    <div class="con">
+                        <my-image class="img" :src="item.productImage"></my-image>
+                        <div class="main">
+                            <div class="line">
+                                <div class="name">{{ item.productName }}</div>
+                                <div class="money">
+                                    合计：<span class="red-text"
+                                        >￥{{ item.amount / 100 }}</span
+                                    >
+                                </div>
+                            </div>
+                            <!-- <div class="line">
+                                <div class="time">
+                                    {{ item.orderTime | dateFormat("hh:mm") }}
+                                </div>
+                                <div class="money">
+                                    预估佣金：￥{{
+                                        item.estimateComission / 100
+                                    }}
+                                </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 },
+    filters: {
+        orderStatus(v) {
+            return statusEnum[v] || "";
+        },
+    },
+    // 数据
+    data() {
+        return {
+            filter: {
+                startDate: "",
+                endDate: "",
+            },
+            pageIndex: 1,
+            dataEnd: false,
+            listData: [],
+            endDate: "",
+        };
+    },
+    onLoad() {
+        this.getList();
+        this.endDate = this.fn.dateFormat2(new Date());
+    },
+
+    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("/Supplier/GetOrderList", sendData).then((res) => {
+                if (isPull) {
+                    uni.stopPullDownRefresh();
+                }
+                uni.hideLoading();
+                this.listData = res.data.data;
+                console.log(this.listData);
+                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("/Supplier/GetOrderList", sendData).then((res) => {
+                uni.hideLoading();
+                this.listData = [...this.listData, ...res.data.data];
+                if (!res.data.data.length) {
+                    this.dataEnd = true;
+                }
+            });
+        },
+
+        dateChange(e, name) {
+            this.filter[name] = e.detail.value;
+            this.getList();
+        },
+    },
+
+    // 数据计算
+    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;
+        }
+    }
+}
+
+.more-text {
+    display: flex;
+    justify-content: center;
+    padding-bottom: px(60);
+    font-size: px(34);
+    color: #999;
+}
+</style>