252 lines
5.5 KiB
Vue
252 lines
5.5 KiB
Vue
<template>
|
||
<up-navbar
|
||
title="电子发票"
|
||
bgColor="#00aa7f"
|
||
:autoBack="true"
|
||
leftIconColor="#fff"
|
||
titleStyle="color:#fff"
|
||
:placeholder="true"
|
||
/>
|
||
|
||
<!-- <view style="padding: 20rpx;background: #d09b24;color: #fff;">温馨提示:将为您开具增值税电子普通发票</view> -->
|
||
<view style="padding: 30rpx;">
|
||
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<up-form
|
||
labelPosition="left"
|
||
labelWidth="100"
|
||
:model="formdata"
|
||
:rules="rules"
|
||
ref="uFormRef"
|
||
>
|
||
<view style="margin-bottom: 50rpx;padding: 30rpx;border: 1px solid #50a100;border-radius: 20rpx;">
|
||
<view style="font-size: 34rpx;color: #50a100;">发票详情</view>
|
||
<up-form-item
|
||
label="抬头类型"
|
||
prop="type"
|
||
borderBottom
|
||
>
|
||
<up-radio-group
|
||
v-model="formdata.type"
|
||
placement="row"
|
||
activeColor="#00aa00"
|
||
@change="groupChange"
|
||
>
|
||
<up-radio
|
||
:customStyle="{marginBottom: '8px'}"
|
||
v-for="(item, index) in radiolist1"
|
||
:key="index"
|
||
:label="item.label"
|
||
:name="item.name"
|
||
>
|
||
</up-radio>
|
||
</up-radio-group>
|
||
</up-form-item>
|
||
<up-form-item
|
||
label="发票抬头"
|
||
prop="header"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.header" border="none" placeholder="请输入发票抬头" clearable />
|
||
</up-form-item>
|
||
<up-form-item
|
||
v-if="formdata.type == 3"
|
||
label="税号"
|
||
prop="shuihao"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.shuihao" border="none" placeholder="请输入税号" clearable />
|
||
</up-form-item>
|
||
<up-form-item
|
||
label="发票内容"
|
||
prop="shuihao"
|
||
borderBottom
|
||
>
|
||
<up-input border="none" disabled />
|
||
</up-form-item>
|
||
|
||
<up-form-item
|
||
label="发票金额"
|
||
prop="shuihao"
|
||
borderBottom
|
||
>
|
||
<view>200</view>
|
||
</up-form-item>
|
||
</view>
|
||
|
||
|
||
<view style="padding: 30rpx;border: 1px solid #50a100;border-radius: 20rpx;">
|
||
<view style="font-size: 34rpx;color: #50a100;">发票信息</view>
|
||
<up-form-item
|
||
label="邮箱"
|
||
prop="email"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.email" border="none" placeholder="请输入邮箱" clearable />
|
||
</up-form-item>
|
||
<up-form-item
|
||
label="手机号"
|
||
prop="phoneNumber"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.phoneNumber" border="none" placeholder="请输入手机号" clearable />
|
||
</up-form-item>
|
||
|
||
<up-form-item
|
||
label="备注"
|
||
prop="phoneNumber"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.phoneNumber" border="none" placeholder="请输入备注" clearable />
|
||
</up-form-item>
|
||
</view>
|
||
|
||
|
||
|
||
<up-button style="margin-top: 100rpx;" type="success" @tap="submit">提 交</up-button>
|
||
</up-form>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import { addrese,gethdz,getphone,carlist } from '@/utils/service'
|
||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||
import { isToday,getDateDaysAgo } from '@/utils/commen'
|
||
|
||
// 发票类型
|
||
const radiolist1 = reactive([
|
||
{
|
||
name: 1,
|
||
label:'个人',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: 2,
|
||
label:'非企业单位',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: 3,
|
||
label:'企业',
|
||
disabled: false
|
||
}
|
||
])
|
||
|
||
|
||
const groupChange = (n:any) => {
|
||
formdata.type = n
|
||
}
|
||
|
||
//const phoneNumber = uni.getStorageSync('PhoneNumber')
|
||
|
||
|
||
let userInfor = uni.getStorageSync('userInfor')
|
||
let formdata = reactive({
|
||
type:3,
|
||
header:'',
|
||
shuihao:'',
|
||
email:'',
|
||
phoneNumber:'',
|
||
default:false
|
||
})
|
||
|
||
|
||
onShow(() => {
|
||
|
||
})
|
||
const rules = {
|
||
header: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入抬头',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
shuihao: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入税号',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
email: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入邮箱',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
phoneNumber: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入手机号',
|
||
trigger: ['blur', 'change'],
|
||
}
|
||
// plateNum:[
|
||
// {
|
||
// type: 'string',
|
||
// required: true,
|
||
// message: '请选择车牌号',
|
||
// trigger: ['blur', 'change'],
|
||
// }
|
||
// {
|
||
// // 自定义验证函数，见上说明
|
||
// validator: (rule:any, value:any) => {
|
||
// const regExp = new RegExp(/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/)
|
||
// if (regExp.test(value)) {
|
||
// return true
|
||
// }
|
||
// return false
|
||
// },
|
||
// message: '车牌号格式不对',
|
||
// // 触发器可以同时用blur和change
|
||
// trigger: ['change','blur'],
|
||
// }
|
||
// ],
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
// 提交方法
|
||
const uFormRef = ref(null)
|
||
function submit() {
|
||
(uFormRef as any).value.validate().then((valid:any) => {
|
||
if(valid){
|
||
|
||
}
|
||
}).catch(() => {
|
||
// 处理验证错误
|
||
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background: #f4f4f4;
|
||
}
|
||
.content{
|
||
margin: 30rpx 20rpx;
|
||
padding: 50rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
.weidu{
|
||
|
||
}
|
||
.avatar {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
padding: 0;
|
||
border-radius: 50%;
|
||
.img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.actnub{
|
||
background: #bcca32;
|
||
color: #fff;
|
||
}
|
||
</style> |