employ-front/pages/order/component/enterprise.vue

<template>
	<view>
		<u-sticky bgColor="#ff7a31">
			<u-tabs :list="nav" :current="current" lineColor="#ffffff" :activeStyle="{
				color: '#ffffff',
				transform: 'scale(1.05)'
			}" :inactiveStyle="{
				color: '#f5f5f5',
				transform: 'scale(1)'
			}" :scrollable="true" itemStyle="padding-left: 60rpx; padding-right: 60rpx;font-size:22rpx; height: 100rpx;"
				@change="handleChangeTab"></u-tabs>
		</u-sticky>
		<view class="se-p-40">
			<view class="se-px-40 se-mb-30 se-py-30 se-bgc-white se-br-40 se-bs-b" v-for="item in list" :key="item.id">
				<view class="se-flex se-flex-h-sb se-fw-6 se-fs-32 se-pb-20">
					<view class="se-flex">
						<text>{{item.title}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="se-c-red">
						{{getOrderStatus(item.orderStatus)}}
					</view>
				</view>
				<view class="se-flex">
					<view class="se-w-160 se-h-160">
						<image class="se-w-160 se-h-160 se-br-10" src="https://cdn.uviewui.com/uview/album/1.jpg"
							mode=""></image>
					</view>
					<view class="se-ml-20 se-flex se-flex-v-sa se-flex-ai-fs">
						<view class="se-fw-6 se-c-black se-fs-30 se-display-ib">{{item.companyName}}</view>
						<view class="se-fs-24 se-c-text-third se-display-ib">所属行业:{{item.industryName}}</view>
						<view class="se-fs-24 se-c-text-third se-display-ib">所属工种:{{item.industryName}}</view>
					</view>
				</view>
				<view class="se-flex se-flex-h-sb se-w-p-100 se-pt-20">
					<view class="se-fs-24 se-display-ib">
						<text class="se-c-black">总价格：</text>
						<text class="se-c-orange se-fs-30 se-fw-6"><text
								class="se-fs-24">￥</text>{{item.payMoney}}</text>
					</view>
					<view
						class="po-r se-display-ib se-px-20 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-fs-24 se-c-66 se-b">
						<text>联系客服</text>
						<button open-type="contact" class="contact"></button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bossOrderList
	} from "@/common/api.js"
	export default {
		components: {

		},
		data() {
			return {
				current: 0,
				nav: [{
						name: '全部',
					},
					{
						name: '待聘用',
					},
					{
						name: '已接单',
					},
					{
						name: '进行中',
					},
					{
						name: '试工完成',
					},
					{
						name: '企业确认',
					},
					{
						name: '已支付',
					},
					{
						name: '已完成',
					},
					{
						name: '已取消',
					},
					{
						name: '发起支付',
					}
				],
				list: [],
				orderStatus: "",
				pageNo: 1,
				pageSize: 20,
			}
		},
		computed: {
			getOrderStatus() {
				return function(status) {
					let text = ''
					switch (status) {
						case 0:
							text = "待聘用"
							break;
						case 1:
							text = "已接单"
							break;
						case 2:
							text = "进行中"
							break;
						case 3:
							text = "试工完成"
							break;
						case 4:
							text = "企业确认"
							break;
						case 5:
							text = "已支付"
							break;
						case 6:
							text = "已完成"
							break;
						case 7:
							text = "已取消"
							break;
						case 8:
							text = "发起支付"
							break;
					}
					return text;
				}
			}
		},
		mounted() {
			this.onOrder();
		},
		methods: {
			onOrder(selectNew) {
				let that = this;
				let params = {
					orderStatus: that.orderStatus,
					pageNo: that.pageNo,
					pageSize: that.pageSize
				}
				bossOrderList(params).then(response => {
					const {
						code,
						result
					} = response
					if (code === 200) {
						if (selectNew) {
							this.list = response.result.records
						} else {
							this.list = [...this.list, ...response.result.records]
						}

					}
				}).catch(error => {

				})
			},
			handleChangeTab(item) {
				const {
					index
				} = item
				this.current = index
				this.orderStatus = index === 0 ? "" : index - 1
				this.pageNo = 1
				this.onOrder(true)
			},
		},
		onReachBottom() {
			console.log("触底加载")
		}
	}
</script>

<style scoped lang="scss">
	.po-r {
		position: relative;
	}

	.contact {
		width: 160rpx;
		height: 60rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}
</style>