第一次提交
This commit is contained in:
gxwebsoft
322
package/deliver/my-order.vue
Normal file
322
package/deliver/my-order.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user