daijia/司机端/pages/shunfeng/pub-list.vue

<template>
	<view class="pb-40">
		<empty v-if="list.length==0" text="暂无订单"></empty>
		<view class="mlr-36 item mt-30" v-for="(item,i) in list" :key="i">
			<view class="flex">
				<view class="bg-blue white ptb-20 plr-25 size-32 bold">
					我的行程 余座：{{item.more_seats}}座
				</view>
				<view class="size-28 pr-30">
					{{item.statusText}}
				</view>
			</view>
			<view class="plr-30 ptb-30">
				<view class="flex1 flex-middle">
					<view class="center flex-column">
						<view class="mt-7" style="width: 28rpx;height: 28rpx;background: #6340FF;border-radius: 50%;"></view>
						<view class="size-28 mt-17">
							起点
						</view>
					</view>
					<view class="ml-20">
						<view class="size-32 bold">
							{{item.start_city}}
						</view>
						<view class="size-28 mt-10">
							{{item.start_name}}（上车）
						</view>
					</view>
				</view>
				<view class="flex1 flex-middle mt-30">
					<view class="center flex-column">
						<view class="mt-7" style="width: 28rpx;height: 28rpx;background: #EA0000;border-radius: 50%;"></view>
						<view class="size-28 mt-17">
							终点
						</view>
					</view>
					<view class="ml-20">
						<view class="size-32 bold">
							{{item.end_city}}
						</view>
						<view class="size-28 mt-10">
							{{item.end_name}}（下车）
						</view>
					</view>
				</view>
				<view class="size-28 blue mt-20">
					时间：{{item.start_time.split(' ')[0]}}({{item.week}}) {{item.start_time.split(' ')[1]}}
				</view>
			</view>
			<view class="" v-if="item.status != -1&&item.more_seats*1>0">
				<u-button type="primary"  @click="cancel(item.id)">取消行程</u-button>
			</view>
		</view>
		<u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
		 margin-bottom="30" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				page:1,
				status: 'loadmore',
			};
		},
		onLoad() {
			this.init()
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.init()
		},
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.status = "loading";
			this.init()
		},
		methods: {
			init(){
				this.$http('/addons/ddrive/sforder/release_order',{
					page: this.page
				}).then(data=>{
					console.log(data);
					if (data.length < 10) {
						this.status = "nomore"
					} else {
						this.page = this.page + 1
						this.status = "loadmore"
					}
					this.list = this.list.concat(data)
					uni.stopPullDownRefresh();
				})
			},
			cancel(id){
				this.$http('/addons/ddrive/sforder/cancel',{
					order_id: id,
					cancel_type: ''
				},"POST").then(data=>{
					console.log(data);
					uni.showToast({
						title:'取消成功'
					})
					this.page = 1
					this.list = []
					this.init()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn--primary{
		border-radius: 0;
	}
	/deep/.u-primary-hover {
		background-color: $blue !important;
	}
	/deep/.u-size-default {
		width: 100% !important;
		height: 88rpx !important;
		font-weight: 700 !important;
	}
	.item {
		box-shadow: 0px 0px 13px 0px rgba(18, 0, 98, 0.2);
	}
</style>