cbz/page_shop/pages/order/outsourcing.vue

<template>
	<view class="content">
		<view class="tabs hflex acenter jbetween">
			<block v-for="(item,index) in tabs" :key="index">
				<view class="tabs_item" :class="active == item.id? 'active': ''" @click="changeTabs(item.id)">{{item.text}}</view>
			</block>
		</view>
		<view class="box">
			<my-order :list="pageList" @toDetail="toDetail" @toOffer="toOffer"></my-order>
		</view>
	</view>
	
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				tabs: [
					{
						id: 1,
						text: '未报价'
					},
					{
						id: 2,
						text: '已报价'
					},
					{
						id: 3,
						text: '已匹配'
					}
				],
				active: 1,
				pageList: [
					
				],
				page: 1,
				limit: 10,
				total: 1,
			}
		},
		onLoad() {
			that = this
		},
		onShow() {
			that.getList()
		},
		methods: {
			getList() {
				$api.req({
					url: '/data/api.auth.UserPurchase/list',
					data: {
						tab: 3,
						status: that.active,
						page: that.page,
						limit: that.limit
					}
				}, function(res) {
					if(res.code == 1) {
						if(that.page == 1) {
							that.pageList = res.data.data
						} else {
							that.pageList = that.pageList.concat(res.data.data)
						}
						that.total = res.data.total
					}
				})
			},
			// 切换tabs
			changeTabs(id) {
				that.active = id
				that.page = 1
				that.pageList = []
				that.getList()
			},
			// 查看详情
			toDetail(e) {
				$api.jump('/page_shop/pages/order/detail?id=' + e + '&tab=3')
			},
			toOffer(e) {
				$api.jump('/page_shop/pages/order/offer?id=' + e + '&tab=3')
			},
			onReachBottom() {
				if (Number(that.page) * Number(that.limit) >= Number(that.total)) {
					$api.info("没有更多了")
				} else {
					that.page++
					that.getList()
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f4f4f4;
		.tabs {
			width: 100%;
			background-color: #fff;
			box-sizing: border-box;
			padding: 20rpx 56rpx;
			.tabs_item {
				font-size: 32rpx;
				color: #242424;
			}
			.active {
				color: #222;
				position: relative;
			}
			.active::after {
				content: "";
				position: absolute;
				width: 48rpx;
				height: 8rpx;
				background-color: #506dff;
				border-radius: 4rpx;
				bottom: -14rpx;
				left: 24rpx;
			}
			
		}
		.box {
			padding: 0 30rpx;
		}
	}
</style>