323 lines
8.2 KiB
Vue
323 lines
8.2 KiB
Vue
<template>
|
||
<view style="height: 90vh;">
|
||
<u-navbar title-color="#fff" back-icon-color="#ffffff"
|
||
:is-fixed="true"
|
||
:is-back="true"
|
||
:background="topBackground"
|
||
:back-text-style="{color: '#fff'}"
|
||
:title="title"
|
||
:back-icon-name="backIconName"
|
||
:back-text="backText"
|
||
>
|
||
</u-navbar>
|
||
<view class="divison"></view>
|
||
<view class="myData">
|
||
<view class="datas">我的佣金：<text style="color: #ED1C24;font-size: 18px;margin: 5rpx;">￥{{ myMoney }}</text></view>
|
||
<view class="datas">已配送单数：<text style="color: #ED1C24;font-size: 18px;margin: 5rpx;">{{ orderNum }}</text>单</view>
|
||
</view>
|
||
|
||
<view class="pageContent">
|
||
<view class="u-tabs-box">
|
||
<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" ></u-tabs-swiper>
|
||
</view>
|
||
|
||
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
|
||
<!-- 待送达 -->
|
||
|
||
<swiper-item class="swiper-item">
|
||
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
||
<view class="orderList" v-for="(item,index) in ongoinglist" :key="index">
|
||
<view class="orderMassage">
|
||
<view class="storePicture">
|
||
<image :src="item.store_picture" border-radius="20px" style="width: 90%;height: 90%;"></image>
|
||
</view>
|
||
<view class="details">
|
||
<view class="orderText">
|
||
<text >取货地址：{{ item.take_addr }}</text>
|
||
</view>
|
||
<view class="orderText">
|
||
<text>配送地址：{{ item.go_addr }}</text>
|
||
</view>
|
||
<view class="orderText">
|
||
<text style="color: #ffaa00;">配送预计时间：{{ item.predict_time }}分钟</text>
|
||
</view>
|
||
<view class="orderText">
|
||
<view>佣金：<text style="color: #ff0000">￥</text><text style="font-size: 18px;color: #ff0000;">{{ item.earn_money }}</text></view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="giveUp">
|
||
<u-button shape="square" type="success" size="mini" :plain="true">放弃订单</u-button>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
<!-- 已送达 -->
|
||
<swiper-item class="swiper-item">
|
||
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" >
|
||
<view class="orderList2" v-for="(item,index) in completeorder" :key="index">
|
||
<view class="orderMassage2">
|
||
<view class="storePicture">
|
||
<image :src="item.store_picture" border-radius="20px" style="width: 90%;height: 80%;border-radius: 10rpx;"></image>
|
||
</view>
|
||
<view class="details">
|
||
<view>
|
||
<view class="orderText">
|
||
<text>取货地址：{{ item.take_addr }}</text>
|
||
</view>
|
||
<view class="orderText">
|
||
<text>配送地址：{{ item.go_addr }}</text>
|
||
</view>
|
||
|
||
<view class="orderText2">
|
||
<view>佣金：<text style="color: #ff0000">￥</text><text style="font-size: 18px;color: #ff0000;">{{ item.earn_money }}</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 顶部标题
|
||
title: '我的配送',
|
||
backText: '返回',
|
||
backIconName: 'nav-back',
|
||
isBack: true,
|
||
topBackground: {
|
||
backgroundImage: 'linear-gradient(to right, #146930 , #77b633)'
|
||
},
|
||
|
||
// 我的佣金和订单数
|
||
myMoney:888,
|
||
orderNum:55,
|
||
|
||
|
||
|
||
orderList: [[], []],
|
||
list:[
|
||
{
|
||
name:'待送达',
|
||
},
|
||
{
|
||
name:'已送达',
|
||
}
|
||
],
|
||
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
|
||
current: 0,
|
||
swiperCurrent: 0,
|
||
tabsHeight: 0,
|
||
dx: 0,
|
||
loadStatus: ['loadmore','loadmore'],
|
||
ongoinglist:[
|
||
{
|
||
store_id:1,
|
||
store_picture:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F006CjT3ggy1gvbdntuo3fj60n40d0abv02.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638519744&t=f9c70870945fb51eb9f4aa93ef5a3390',
|
||
take_addr:'北京天安门广场一号广场楼',
|
||
go_addr:'清华大学',
|
||
predict_time:18,
|
||
earn_money:18,
|
||
},
|
||
{
|
||
store_id:2,
|
||
store_picture:'https://pic.rmb.bdstatic.com/bjh/news/f8510dd27a49a7d30befaef266d0a9a5.png',
|
||
take_addr:'南宁市良庆区总部基地',
|
||
go_addr:'广西大学',
|
||
predict_time:18,
|
||
earn_money:18,
|
||
}
|
||
],
|
||
completeorder:[
|
||
{
|
||
store_id:1,
|
||
store_picture:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00555-2517.jpg',
|
||
go_addr:'清华大学',
|
||
predict_time:18,
|
||
earn_money:18,
|
||
take_addr:'南宁市良庆区总部基地',
|
||
},
|
||
{
|
||
store_id:2,
|
||
store_picture:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00555-2517.jpg',
|
||
take_addr:'南宁市良庆区总部基地',
|
||
go_addr:'广西大学',
|
||
predict_time:18,
|
||
earn_money:18,
|
||
}
|
||
],
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
// tab栏切换
|
||
change(index) {
|
||
this.swiperCurrent = index;
|
||
this.getOrderList(index);
|
||
},
|
||
transition({ detail: { dx } }) {
|
||
this.$refs.tabs.setDx(dx);
|
||
},
|
||
animationfinish({ detail: { current } }) {
|
||
this.$refs.tabs.setFinishCurrent(current);
|
||
this.swiperCurrent = current;
|
||
this.current = current;
|
||
},
|
||
// 页面数据 foodMaterialList
|
||
getOrderList(idx) {
|
||
|
||
if(idx==0){
|
||
for(let i = 0; i < 5; i++) {
|
||
let index = this.$u.random(0, this.ongoinglist.length - 1);
|
||
let data = JSON.parse(JSON.stringify(this.ongoinglist[index]));
|
||
data.id = this.$u.guid();
|
||
this.orderList[idx].push(data);
|
||
}
|
||
this.loadStatus.splice(this.current,3,"loadmore")
|
||
|
||
}else if(idx==1){
|
||
for(let i = 0; i < 5; i++) {
|
||
let index = this.$u.random(0, this.completeorder.length - 1);
|
||
let data = JSON.parse(JSON.stringify(this.completeorder[index]));
|
||
data.id = this.$u.guid();
|
||
this.orderList[idx].push(data);
|
||
}
|
||
this.loadStatus.splice(this.current,3,"loadmore")
|
||
}
|
||
},
|
||
reachBottom() {
|
||
// 此tab为空数据
|
||
if(this.current != 2) {
|
||
this.loadStatus.splice(this.current,10,"loading")
|
||
setTimeout(() => {
|
||
this.getOrderList(this.current);
|
||
}, 1200);
|
||
}
|
||
},
|
||
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style>
|
||
.myData{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
margin-bottom: 5px;
|
||
}
|
||
.datas{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 50%;
|
||
height: 40px;
|
||
font-size: 15px;
|
||
|
||
border-radius: 10px;
|
||
margin: 20rpx 10rpx;
|
||
}
|
||
.pageContent{
|
||
height: 100%;
|
||
}
|
||
.swiper-box {
|
||
height: 100%;
|
||
|
||
}
|
||
.swiper-item {
|
||
height: 100%;
|
||
}
|
||
.orderList{
|
||
margin-top: 20rpx;
|
||
height: 140px;
|
||
}
|
||
.orderList2{
|
||
margin-top: 20rpx;
|
||
|
||
}
|
||
.divison{
|
||
width: 100%;
|
||
height: 10rpx;
|
||
background-color: #e3e3e5;
|
||
}
|
||
|
||
.orderMassage{
|
||
display: flex;
|
||
flex-direction: row;
|
||
border: #f3f3f3 solid 1px;
|
||
border-radius: 10px;
|
||
height: 135px;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
}
|
||
.orderMassage2{
|
||
display: flex;
|
||
flex-direction: row;
|
||
border: #f3f3f3 solid 1px;
|
||
border-radius: 10px;
|
||
height: 120px;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
}
|
||
.storePicture{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 45%;
|
||
height: 260rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
.details{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
width: 55%;
|
||
}
|
||
.orderText{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
width: 100%;
|
||
margin-top: 10rpx;
|
||
padding-left: 10rpx;
|
||
|
||
|
||
}
|
||
.orderText2{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
padding-left: 10rpx;
|
||
|
||
|
||
}
|
||
.giveUp{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
align-items: flex-end;
|
||
position: relative;
|
||
top: -70rpx;
|
||
margin-right: 15rpx;
|
||
color: #FFFFFF;
|
||
|
||
}
|
||
</style>
|