363 lines
7.2 KiB
Vue
363 lines
7.2 KiB
Vue
<template>
|
||
<view class="invoice-info-page">
|
||
<!-- 状态栏 -->
|
||
<view class="status-bar">
|
||
<text class="time">9:41</text>
|
||
<view class="status-icons">
|
||
<view class="signal"></view>
|
||
<view class="wifi"></view>
|
||
<view class="battery"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 导航栏 -->
|
||
<view class="nav-bar">
|
||
<view class="back-btn" @click="goBack">
|
||
<text class="back-icon">‹</text>
|
||
</view>
|
||
<text class="title">填写发票信息</text>
|
||
<view class="info-btn" @click="showInfo">
|
||
<text class="info-icon">!</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主内容区域 -->
|
||
<view class="main-content">
|
||
<!-- 表单卡片 -->
|
||
<view class="form-card">
|
||
<!-- 发票抬头 -->
|
||
<view class="form-field">
|
||
<text class="field-label">发票抬头:</text>
|
||
<input
|
||
class="field-input"
|
||
placeholder="请输入抬头名称(必填)"
|
||
placeholder-class="placeholder"
|
||
v-model="formData.title"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 分隔线 -->
|
||
<view class="field-divider"></view>
|
||
|
||
<!-- 单位税号 -->
|
||
<view class="form-field">
|
||
<text class="field-label">单位税号:</text>
|
||
<input
|
||
class="field-input"
|
||
placeholder="请输入单位税号(必填)"
|
||
placeholder-class="placeholder"
|
||
v-model="formData.taxId"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 分隔线 -->
|
||
<view class="field-divider"></view>
|
||
|
||
<!-- 发票内容 -->
|
||
<view class="form-field">
|
||
<text class="field-label">发票内容:</text>
|
||
<text class="field-value">{{ formData.content }}</text>
|
||
</view>
|
||
|
||
<!-- 分隔线 -->
|
||
<view class="field-divider"></view>
|
||
|
||
<!-- 发票金额 -->
|
||
<view class="form-field">
|
||
<text class="field-label">发票金额:</text>
|
||
<text class="field-value amount">{{ formData.amount }}</text>
|
||
</view>
|
||
|
||
<!-- 分隔线 -->
|
||
<view class="field-divider"></view>
|
||
|
||
<!-- 电子邮箱 -->
|
||
<view class="form-field">
|
||
<text class="field-label">电子邮箱:</text>
|
||
<input
|
||
class="field-input"
|
||
placeholder="请输入您的邮箱(必填)"
|
||
placeholder-class="placeholder"
|
||
v-model="formData.email"
|
||
type="email"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部提交按钮 -->
|
||
<view class="submit-section">
|
||
<view class="submit-btn" @click="submitForm">
|
||
<text class="submit-text">提交</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'InvoiceInfo',
|
||
data() {
|
||
return {
|
||
formData: {
|
||
title: '',
|
||
taxId: '',
|
||
content: '培训费',
|
||
amount: '¥59.00',
|
||
email: ''
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
showInfo() {
|
||
uni.showToast({
|
||
title: '发票信息说明',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
submitForm() {
|
||
// 验证必填字段
|
||
if (!this.formData.title.trim()) {
|
||
uni.showToast({
|
||
title: '请输入发票抬头',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!this.formData.taxId.trim()) {
|
||
uni.showToast({
|
||
title: '请输入单位税号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!this.formData.email.trim()) {
|
||
uni.showToast({
|
||
title: '请输入电子邮箱',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 验证邮箱格式
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||
if (!emailRegex.test(this.formData.email)) {
|
||
uni.showToast({
|
||
title: '请输入正确的邮箱格式',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 提交表单
|
||
uni.showModal({
|
||
title: '确认提交',
|
||
content: '确认提交发票信息吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success'
|
||
})
|
||
|
||
// 延迟返回上一页
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.invoice-info-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
position: relative;
|
||
}
|
||
|
||
.status-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx 0;
|
||
height: 88rpx;
|
||
|
||
.time {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
}
|
||
|
||
.status-icons {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.signal, .wifi, .battery {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background-color: #000000;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 30rpx;
|
||
height: 88rpx;
|
||
|
||
.back-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.back-icon {
|
||
font-size: 48rpx;
|
||
color: #ff0000;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #ff0000;
|
||
}
|
||
|
||
.info-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
background-color: #ff0000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.info-icon {
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-content {
|
||
padding: 30rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.form-card {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.form-field {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
min-height: 80rpx;
|
||
|
||
.field-label {
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
font-weight: 500;
|
||
min-width: 160rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.field-input {
|
||
flex: 1;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
}
|
||
|
||
.field-value {
|
||
flex: 1;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
|
||
&.amount {
|
||
color: #ff0000;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.placeholder {
|
||
color: #cccccc;
|
||
}
|
||
}
|
||
|
||
.field-divider {
|
||
height: 1rpx;
|
||
background-color: #f0f0f0;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.submit-section {
|
||
padding: 30rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.submit-btn {
|
||
background-color: #20b2aa;
|
||
border-radius: 8rpx;
|
||
padding: 25rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.submit-text {
|
||
color: #ffffff;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 750rpx) {
|
||
.form-field {
|
||
padding: 25rpx;
|
||
|
||
.field-label {
|
||
font-size: 28rpx;
|
||
min-width: 140rpx;
|
||
}
|
||
|
||
.field-input, .field-value {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
padding: 20rpx;
|
||
|
||
.submit-text {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|