kxmall-ui/kxmall-rider-ui/pages/income/income.vue

<template>

  <view class="app">
    <view class="header">
      <view class="header_inner">
        <image src="../../static/order/clock.png"></image>
        <text class="txt1">累计收益<text class="txt2">{{ countIncome }}</text></text>
      </view>
      <view class="tip"></view>
    </view>
    <view class="goods" v-for="(item, index) in list" :key="index">
      <view class="goods_tit">
        <text class="txt3">订单号:{{ item.orderNo }}</text>
        <text class="txt4" style="font-size: small;">配送费：{{ item.freightPrice }} 元</text>
      </view>
      <view class="count">
        <view class="count_item">
          <text class="txt3">配送时间</text>
          <text class="txt4">{{ item.finishTime }}</text>
        </view>
        <view class="count_item">
          <text class="txt3">收货地址</text>
          <text class="txt4">{{ item.address }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniPopup
		},
		computed: {
			...mapState(['token', 'userInfo'])
		},
		data() {
			return {
				count:0,
        list: [],       // 任务列表
        pageNo:1,       // 页码
        pageSize: 10,    // 页数
        loadData: false,// 列表加载中
        finish: false,  // 列表全部加载完成
        countIncome: 0
			}
		},
		onLoad() {
			this.selectMoney()
		},
		onHide() {
			clearInterval(this.interval)
		},
    //上拉加载
    onReachBottom() {
      let that = this;
      if(that.userInfo.state && !that.finish){
        uni.showNavigationBarLoading()
        this.selectMoney()
      }
    },
		methods: {
			closePop(){
				this.$refs.popup.close()
			},
			open() {
				this.$refs.popup.open()
			},
			copy(msg){
			  uni.setClipboardData({
			      data: msg,
			      success: function () {
			          uni.showToast({
			          	title:'复制成功',
						icon:'none',
						duration:1500
			          })
			      }
			  });
			},
			selectMoney() {
        let that = this;
				let params = {
					riderId: that.userInfo.id,
          pageNum: this.pageNo,
          limit: this.pageSize
				}

        that.request("get","rider/task/income", that.token,params).then(res => {
					if (res.code == 200) {
            let newList = res.rows;
            newList.forEach(item => {
              if(item.gmtUpdate) {
                if(typeof(item.gmtUpdate) === 'number'){
                  item.finishTime = that.dateFtt('yyyy-MM-dd hh:mm:ss', new Date(item.gmtUpdate))
                }
              }
            })
            that.list = that.list.concat(newList);
            that.finish = newList.length <= res.total;
            if(newList.length !== 0){
              that.pageNo++;
            }
            that.loadData = false;  // 获取结束
          }else {
            that.loadData = false;  // 获取结束
          }
        })
        that.request("get","rider/task/countIncome",that.token,params).then(res => {
					if (res.code == 200) {
              this.countIncome = res.data;
          }
        })
			}
		}
	}
</script>

<style scoped>
	scroll-view {
		white-space: nowrap;
		height: 110rpx;
		width: 100%;
		margin-top: 42rpx;
		box-sizing: border-box;
	}
    .popup_mask{
		width: 690rpx;
		padding: 0 30rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: 6rpx;
	}
	.popup_mask_tit{
		height: 104rpx;
		line-height: 104rpx;
		position: relative;
	}
	.pop_t1{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	.pop_t2{
		font-size: 28rpx;
		color: #1B1C33;
		margin-left: 40rpx;
	}
	.popup_mask_tit image{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 20rpx;
		top: 38rpx;
	}
	.pop_item{
		height: 184rpx;
		border-bottom: 2rpx solid #F1F1F1;
		display: flex;
		flex-direction: row;
	}
	.pop_item_l{
		width: 520rpx;
		height: 184rpx;
		display: flex;
		flex-direction: row;
	}
	.item_l_l{
		width: 168rpx;
		height: 148rpx;
		padding-top: 36rpx;
	}
	.item_l_r{
		width: 452rpx;
		height: 148rpx;
		padding-top: 36rpx;
	}
	.pop_item_r{
		width: 150rpx;
		height: 148rpx;
		padding-top: 36rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		text-align: right;
	}
	.pil_img{
		width: 118rpx;
		height: 110rpx;
	}
	.item_l_r view{
		font-size: 32rpx;
		color: #333333;
	}
	.test {
		width: 220upx;
		height: 220upx;
		display: inline-block;
		background-color: red;
	}

	.app {
		background-color: #F6F6F6;
	}

	.header {
		text-align: center;
		background-color: #FFFFFF;
	}

	.header_inner {
		display: inline-block;
		padding-top: 90rpx;

	}

	.header_inner image {
		width: 48rpx;
		height: 48rpx;
		position: relative;
		top: 8rpx;
	}

	.txt1 {
		font-size: 40rpx;
		color: #000000;
		font-weight: bold;
		margin-left: 24rpx;
	}

	.txt2 {
		color: #3662DD;
		padding-left: 20rpx;
	}

	.tip {
		text-align: center;
		font-size: 32rpx;
		color: #717171;
		padding-top: 24rpx;
		padding-bottom: 70rpx;
	}

	.goods {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.goods_tit {
		height: 86rpx;
		line-height: 86rpx;
		border-bottom: 2rpx solid #F1F1F1;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.goods_details {
		height: 194rpx;
		display: flex;
		flex-direction: row;
	}

	.detials_l {
		width: 496rpx;
		height: 194rpx;
	}

	.detials_r {
		width: 174rpx;
		height: 194rpx;
	}

	.details_img {
		display: inline-block;
		width: 118rpx;
		height: 110rpx;
		margin-right: 36rpx;
	}

	.detials_r_inner {
		height: 110rpx;
		margin-top: 42rpx;
		line-height: 110rpx;
		font-size: 28rpx;
		color: #1B1C33;
		position: relative;
	}

	.detials_r_inner image {
		width: 44rpx;
		height: 10rpx;
		position: absolute;
		right: 0;
		top: 48rpx;
	}

	.count {
		margin-top: 20rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}

	.count_item {
		height: 99rpx;
		line-height: 99rpx;
		border-bottom: 2rpx solid #F1F1F1;
		font-size: 28rpx;

	}

	.txt3,
	.txt5 {
		font-weight: bold;
		color: #333333;
	}

	.txt4 {

		color: #666666;
		float: right;
	}

	.nobor {
		border: none;
	}

	.txt6 {
		color: #999999;
		font-weight: normal;
	}

	.txt7 {
		font-weight: normal;
		color: #333333;
	}
</style>