精品课
This commit is contained in:
haomingming
@@ -0,0 +1,362 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user