mechanicStore-app/pages/myEdit/offsiteSign.uvue

<template>
	<view class="page-container">
		<!-- 头部 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<u-icon name="arrow-left" size="24" color="#333"/>
			</view>
			<view class="header-title">
				异地签证
			</view>
			<view class="header-right"></view>
		</view>
		
		<!-- 标签页 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: activeTab === 0 }" @click="activeTab = 0">签证申请</view>
			<view class="tab-item" :class="{ active: activeTab === 1 }" @click="activeTab = 1">申请记录</view>
		</view>
		
		<!-- 签证申请内容 -->
		<view class="content" v-if="activeTab === 0">
			<!-- 意向城市 -->
			<view class="form-item">
				<text class="label">意向城市</text>
				<view class="value">请选择</view>
				<u-icon name="arrow-right" size="16" color="#999"/>
			</view>
			
			<!-- 开始日期 -->
			<view class="form-item">
				<text class="label">开始日期</text>
				<view class="value">请选择</view>
				<u-icon name="arrow-right" size="16" color="#999"/>
			</view>
			
			<!-- 结束日期 -->
			<view class="form-item">
				<text class="label">结束日期</text>
				<view class="value">请选择</view>
				<u-icon name="arrow-right" size="16" color="#999"/>
			</view>
			
			<!-- 签证理由 -->
			<view class="reason-section">
				<text class="section-title">签证理由</text>
				<textarea class="reason-input" placeholder="请输入签证理由"></textarea>
			</view>
			
			<!-- 按钮区域 -->
			<view class="button-section">
				<button class="submit-btn" @click="submitAudit">提交审核</button>
				<button class="return-btn" @click="returnCity">回原城市</button>
			</view>
		</view>
		
		<!-- 申请记录内容 -->
		<view class="content" v-if="activeTab === 1">
			<view class="record-empty">暂无申请记录</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	
	const activeTab = ref(0);
	
	const goBack = () => {
		uni.navigateBack();
	};
	
	const submitAudit = () => {
		uni.showToast({ title: '提交审核成功', icon: 'success' });
	};
	
	const returnCity = () => {
		uni.showToast({ title: '返回原城市', icon: 'none' });
	};
</script>

<style scoped>
	.page-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.header-left, .header-right {
		width: 60rpx;
	}
	
	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.tabs {
		display: flex;
		background-color: #ffffff;
		padding: 0 30rpx;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx;
		font-size: 28rpx;
		color: #666;
		position: relative;
	}
	
	.tab-item.active {
		color: #ffc107;
		font-weight: bold;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #ffc107;
		border-radius: 2rpx;
	}
	
	.content {
		padding: 30rpx;
	}
	
	.form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}
	
	.label {
		font-size: 28rpx;
		color: #333;
	}
	
	.value {
		font-size: 28rpx;
		color: #999;
	}
	
	.reason-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 40rpx;
	}
	
	.section-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
	}
	
	.reason-input {
		width: 100%;
		min-height: 120rpx;
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
	}
	
	.button-section {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.submit-btn {
		background-color: #ffc107;
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 50rpx;
		padding: 20rpx;
		border: none;
	}
	
	.return-btn {
		background-color: #ffffff;
		color: #333;
		font-size: 30rpx;
		border-radius: 50rpx;
		padding: 20rpx;
		border: 1rpx solid #d9d9d9;
	}
	
	.record-empty {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		margin-top: 100rpx;
	}
</style>