|
@@ -0,0 +1,402 @@
|
|
|
+<template>
|
|
|
+ <view class="container" :style="{height: winHeight + 'px'}">
|
|
|
+ <!-- 状态栏高度 -->
|
|
|
+ <view :style="{ height: `${statusBarHeight}px`, width: '100%', backgroundColor: '#FF6702' }"></view>
|
|
|
+ <!-- 导航栏 -->
|
|
|
+ <view :style="{ height: `${navigationBarHeight}rpx`,lineHeight: `${navigationBarHeight}rpx`}" class="order-nav">
|
|
|
+ <!-- <view class="back-button" @tap="handBack()"></view> -->
|
|
|
+ {{activeRole == '0' ? '接单' : '我的' }}
|
|
|
+ </view>
|
|
|
+ <!-- <view class="content-dom"> -->
|
|
|
+ <view v-if="activeRole == '0'" style="width: 100%;height: 100%;display: flex;flex-direction: column;overflow: hidden;">
|
|
|
+ <view class="dom-top">
|
|
|
+ <view class="dom-item" v-for="(item, index) in domTopData" :key="index" @tap="statusClick(item.id)">
|
|
|
+ <text :class="item.id === riderStatus ? 'active-dom-top' : ''">{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-y style="overflow: hidden;">
|
|
|
+ <view v-for="item in riderData" :key="item.id" style="margin: 10rpx 0;">
|
|
|
+ <rider-order :orderInfo="item" @orderCilck="goOrderClick"></rider-order>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view v-if="activeRole == '1'" style="position: relative;flex: 1;width: 100%;">
|
|
|
+ <view class="item-me-bg"></view>
|
|
|
+ <view class="item-me">
|
|
|
+ <view class="item-row">
|
|
|
+ <view>
|
|
|
+ <view class="row-je">2031.7</view>
|
|
|
+ <view class="row-jf">累计小费</view>
|
|
|
+ </view>
|
|
|
+ <view style="width: 2rpx;height: 96rpx;border: 2rpx solid #D6D7DC;margin: 0 80rpx"></view>
|
|
|
+ <view>
|
|
|
+ <view class="row-je">68</view>
|
|
|
+ <view class="row-jf">跑腿订单</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-column">
|
|
|
+ <view v-for="(item, index) in riderInfo" :key="index" class="column-box" :style="{paddingTop: index !== 0 ? '27rpx' : ''}"
|
|
|
+ @tap="onRiderClick(item.id)">
|
|
|
+ <view class="column-name">
|
|
|
+ <image :src="item.img"></image>{{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class='iconfont icon-jiantou ' style="font-size: 30rpx;"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </view> -->
|
|
|
+ <!-- 底部导航 -->
|
|
|
+ <view class="page-footer">
|
|
|
+ <view class="foot-item" :class="item.pagePath == activeRouter?'active':''" v-for="(item,index) in footerList" :key="index"
|
|
|
+ @click="goRouter(item)">
|
|
|
+ <block v-if="item.pagePath == activeRouter">
|
|
|
+ <image :src="item.selectedIconPath"></image>
|
|
|
+ <view class="txt">{{item.text}}</view>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <image :src="item.iconPath"></image>
|
|
|
+ <view class="txt">{{item.text}}</view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ registerVerify,
|
|
|
+ } from '@/api/api.js';
|
|
|
+ import {
|
|
|
+ getRiderList
|
|
|
+ } from '@/api/rider.js';
|
|
|
+ import {
|
|
|
+ Debounce
|
|
|
+ } from '@/utils/validate.js'
|
|
|
+ import riderOrder from "@/components/riderOrder/index.vue";
|
|
|
+ var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
|
|
+ let app = getApp();
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ riderOrder,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ winHeight: 0,
|
|
|
+ activeRouter: '/pages/rider/rider_shipping/index',
|
|
|
+ activeRole: '0',
|
|
|
+ riderStatus: 1,
|
|
|
+ isReceiveId: null,
|
|
|
+ domTopData: [{
|
|
|
+ id: 1,
|
|
|
+ name: '待接单'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: '配送中'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: '已完成'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ riderInfo: [{
|
|
|
+ id: 1,
|
|
|
+ name: '跑腿记录',
|
|
|
+ img: require('./static/run-errands.png'),
|
|
|
+ pagePath: ''
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ name: '提现',
|
|
|
+ img: require('./static/withdrawal.png'),
|
|
|
+ pagePath: ''
|
|
|
+ }, {
|
|
|
+ id: 3,
|
|
|
+ name: '返回用户端',
|
|
|
+ img: require('./static/run-errands.png'),
|
|
|
+ pagePath: ''
|
|
|
+ }],
|
|
|
+ footerList: [{
|
|
|
+ pagePath: "/pages/rider/rider_shipping/index",
|
|
|
+ iconPath: require("./static/ddh.png"),
|
|
|
+ selectedIconPath: require("./static/ddl.png"),
|
|
|
+ text: "订单",
|
|
|
+ role: '0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pagePath: "/pages/rider/rider_me/index",
|
|
|
+ iconPath: require("./static/wdh.png"),
|
|
|
+ selectedIconPath: require("./static/wdl.png"),
|
|
|
+ text: "我的",
|
|
|
+ role: '1'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ statusBarHeight: app.globalData.statusBarHeight,
|
|
|
+ navigationBarHeight: 112,
|
|
|
+ riderData: [], // 订单数组
|
|
|
+ loading: false, //是否加载中
|
|
|
+ loadend: false, //是否加载完毕
|
|
|
+ loadTitle: '加载更多', //提示语
|
|
|
+ page: 1,
|
|
|
+ limit: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goRouter(item) {
|
|
|
+ if (this.activeRouter == item.pagePath) return
|
|
|
+ this.activeRouter = item.pagePath
|
|
|
+ this.activeRole = item.role
|
|
|
+ // uni.redirectTo({
|
|
|
+ // url: item.pagePath,
|
|
|
+ // animationType: 'none' // 关闭默认的滑动效果
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取订单列表
|
|
|
+ */
|
|
|
+ getRiderDataList: function() {
|
|
|
+ let that = this;
|
|
|
+ if (that.loadend) return;
|
|
|
+ if (that.loading) return;
|
|
|
+ that.loading = true;
|
|
|
+ that.loadTitle = "加载更多";
|
|
|
+ getRiderList({
|
|
|
+ status: that.riderStatus,
|
|
|
+ page: that.page,
|
|
|
+ limit: that.limit
|
|
|
+ }).then(res => {
|
|
|
+ let list = res.data.list || [];
|
|
|
+ let loadend = list.length < that.limit;
|
|
|
+ that.riderData = that.$util.SplitArray(list, that.riderData);
|
|
|
+ that.$set(that, 'riderData', that.riderData);
|
|
|
+ that.loadend = loadend;
|
|
|
+ that.loading = false;
|
|
|
+ that.loadTitle = loadend ? "我也是有底线的" : '加载更多';
|
|
|
+ that.page = that.page + 1;
|
|
|
+ }).catch(err => {
|
|
|
+ that.loading = false;
|
|
|
+ that.loadTitle = "加载更多";
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换类型
|
|
|
+ */
|
|
|
+ statusClick: function(status) {
|
|
|
+ if (status == this.riderStatus) return;
|
|
|
+ this.page = 1;
|
|
|
+ this.riderStatus = status;
|
|
|
+ this.loadend = false;
|
|
|
+ this.getRiderDataList();
|
|
|
+ },
|
|
|
+ onRiderClick(id) {
|
|
|
+ if (id === 3) {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/user/index'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goOrderClick(id) {
|
|
|
+ this.isReceiveId = id
|
|
|
+ console.log(id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ let that = this
|
|
|
+ // 隐藏TabBar
|
|
|
+ uni.hideTabBar({});
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: function(res) {
|
|
|
+ that.winHeight = res.windowHeight
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.getRiderDataList()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-dom {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dom-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 96rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 27rpx;
|
|
|
+ color: #141414;
|
|
|
+ background-color: #fff;
|
|
|
+ // padding: 19rpx 115rpx 38rpx 115rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .dom-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ height: 96rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .active-dom-top {
|
|
|
+ color: $bg-color-primary;
|
|
|
+ border-bottom: 9rpx solid $bg-color-primary;
|
|
|
+ border-bottom-top-radius: 6rpx;
|
|
|
+ border-bottom-bottom-radius: 6rpx;
|
|
|
+ border-bottom-left-radius: 6rpx;
|
|
|
+ border-bottom-right-radius: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-nav {
|
|
|
+ width: 100%;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 35rpx;
|
|
|
+ margin-top: -2rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ background-color: #FF6702;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .back-button {
|
|
|
+ position: absolute;
|
|
|
+ left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-footer {
|
|
|
+ // position: fixed;
|
|
|
+ // bottom: 0;
|
|
|
+ // z-index: 9;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
|
|
+ height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-top: solid 1rpx #F3F3F3;
|
|
|
+ background-color: #fff;
|
|
|
+ // box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
|
|
|
+ padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
|
|
|
+
|
|
|
+ .foot-item {
|
|
|
+ display: flex;
|
|
|
+ width: max-content;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ margin-top: 18rpx;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: $bg-color-primary
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot-item image {
|
|
|
+ height: 50rpx;
|
|
|
+ width: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot-item .txt {
|
|
|
+ font-size: 27rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-me-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ background-color: $bg-color-primary;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-me {
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ padding: 0 19rpx;
|
|
|
+
|
|
|
+ .item-row {
|
|
|
+ width: 100%;
|
|
|
+ height: 304rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 23rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .row-je {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 46rpx;
|
|
|
+ color: #141414;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-jf {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 27rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-column {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 23rpx;
|
|
|
+ padding: 20rpx 0 96rpx 39rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .column-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 39rpx 27rpx 0;
|
|
|
+ border-bottom: 2rpx solid #D6D7DC;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .column-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 27rpx;
|
|
|
+ color: #141414;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 38.5rpx;
|
|
|
+ height: 38.5rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|