cbz/page_mine/pages/order/repair.vue

<template>
	<view class="content">
		<view class="top hflex acenter jbetween">
			<view class="top_item" :class="active1 == 1 ? 'active1':''" @click="changeType(1)">我是船老板</view>
			<view class="top_item" :class="active1 == 2 ? 'active1':''" @click="changeType(2)">我是维修工</view>
		</view>
		<view class="order">
			<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 @toDetail="toDetail" :active1="active1" :list="pageList" order_type="5"></my-order>
			</view>
			<view class="add vflex acenter jcenter" v-show="active1 == 1">
				<u-icon name="plus" color='#fff' size="16"></u-icon>
				<view class="add_text">发布维修单</view>
			</view>
		</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,
				active1: 1,
				pageList: [
					{
						id: 1,
						order_no: 'cbz1234567',
						type: '0',
						name: '昨天晚上开始船舱一直往里面漏水，早上忽冷忽热，不知道什么原因，请速来维修',
						repair_date: '2022-11-04~12-04',
						address: '浦东区 滨河路 江东造船厂',
						is_urgent: 1,
						offer: '1999.89'
					},
					{
						id: 1,
						order_no: 'cbz1234567',
						type: '2',
						name: '昨天晚上开始船舱一直往里面漏水，早上忽冷忽热，不知道什么原因，请速来维修',
						repair_date: '2022-11-04~12-04',
						address: '浦东区 滨河路 江东造船厂',
						is_urgent: 0,
						offer: '1999.89'
					}
				]
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 切换tabs
			changeTabs(id) {
				that.active = id
			},
			// 切换身份
			changeType(id) {
				that.active1 = id
			},
			toDetail(e) {
				console.log(e);
				$api.jump('/page_mine/pages/order/repairDetail')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f4f4f4;
		.top {
			width: 650rpx;
			height: 80rpx;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 40rpx;
			.top_item {
				width: 50%;
				height: 68rpx;
				text-align: center;
				font-size: 30rpx;
				color: #222;
				line-height: 68rpx;
			}
			.active1 {
				width: 320rpx;
				height: 68rpx;
				border-radius: 34rpx;
				background-color: #506dff;
				color: #fff;
			}
		}
		.order {
			width: 100%;
			background-color: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
			border-radius: 40rpx 40rpx 0 0;
		}
		.tabs {
			width: 100%;
			// background-color: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
			box-sizing: border-box;
			padding: 20rpx 40rpx;
			.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;
		}
		.add {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			background: linear-gradient(180deg, #88A6FF 0%, #506DFF 100%);
			position: fixed;
			right: 30rpx;
			bottom: 166rpx;
			.add_text {
				font-size: 14rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 18rpx;
			}
		}
	}
</style>