307 lines
7.5 KiB
Vue
307 lines
7.5 KiB
Vue
<template>
|
|
<!-- <view>填写发票信息</view> -->
|
|
<view class="container">
|
|
<view class="invoiceInfo">
|
|
<view class="invoiceList-item flex">
|
|
<view class="item-img">
|
|
<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" src="../../static/index/about.png"
|
|
mode=""></image>
|
|
</view>
|
|
<view class="item-con">
|
|
<view class="itenCon-actName" style="">活动名</view>
|
|
<view class="itenCon-actPrice" style="">￥ 价格</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 表单 -->
|
|
<view style="height: auto;">
|
|
<u-form :model="form" :rules="rules" ref="uForm" label-width="auto" labelPostition="left">
|
|
<view class="formBox">
|
|
<u-form-item label="发票类型" prop="username">
|
|
<view class="typeBOx">
|
|
<view class="normalInv">
|
|
<view class="typeImgs">
|
|
<image style="width: 44rpx;height: 44rpx;" src="../../static/fabu/check.png" mode=""></image>
|
|
<image style="width: 44rpx;height: 44rpx;" src="../../static/fabu/nocheck.png" mode=""></image>
|
|
</view>
|
|
<view class="typeText">普通发票</view>
|
|
</view>
|
|
<view class="specialInv"></view>
|
|
</view>
|
|
|
|
</u-form-item>
|
|
|
|
<u-form-item label="发票内容" prop="password" required>
|
|
<image style="width: 38rpx;height: 38rpx;" src="/static/tips.png" mode=""></image>
|
|
<!-- <u-input inputAlign="right" v-model="form.password" placeholder="请输入密码" border="none"/> -->
|
|
</u-form-item>
|
|
|
|
<u-form-item label="抬头类型" prop="confirmPassword" required>
|
|
<!-- name和range-key绑定的值都是抬头类型的字段-->
|
|
<picker @change="clickUpTypeShow" name="isUpType" :value="upTypelist" :range="upTypelist" range-key="isUpType">
|
|
<view class="form_right">
|
|
请选择抬头类型
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</picker>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="发票抬头" prop="email">
|
|
<u-input inputAlign="right" v-model="form.email" placeholder="请输入邮箱" border="none"/>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="抬头名称" prop="age">
|
|
<u-input inputAlign="right" v-model="form.age" type="number" placeholder="请输入抬头名称" border="none"/>
|
|
</u-form-item>
|
|
<u-form-item label="单位税号" prop="age">
|
|
<u-input inputAlign="right" v-model="form.age" type="number" placeholder="请输入单位税号" border="none"/>
|
|
</u-form-item>
|
|
<u-form-item label="注册地址" prop="age">
|
|
<u-input inputAlign="right" v-model="form.age" type="number" placeholder="必填" border="none"/>
|
|
</u-form-item>
|
|
<u-form-item label="注册电话" prop="age">
|
|
<u-input inputAlign="right" v-model="form.age" type="number" placeholder="必填" border="none"/>
|
|
</u-form-item>
|
|
<u-form-item label="开户银行" prop="age">
|
|
<u-input inputAlign="right" v-model="form.age" type="number" placeholder="必填" border="none"/>
|
|
</u-form-item>
|
|
<u-form-item label="银行账号" prop="age">
|
|
<u-input inputAlign="right" v-model="form.age" type="number" placeholder="必填" border="none"/>
|
|
</u-form-item>
|
|
</view>
|
|
<!-- <view style="background-color: #f5f5f5;height: 40rpx;"></view> -->
|
|
|
|
<view class="recipientInfo" >
|
|
<u-form-item label="手机号" prop="age">
|
|
<u-input inputAlign="right" v-model="form.age" type="number" placeholder="请输入手机号" border="none"/>
|
|
</u-form-item>
|
|
<u-form-item label="邮箱地址" prop="age">
|
|
<u-input inputAlign="right" v-model="form.age" type="number" placeholder="请输入邮箱地址" border="none"/>
|
|
</u-form-item>
|
|
</view>
|
|
|
|
|
|
<!--<u-form-item>
|
|
<u-button type="primary" @click="submit">申请开票</u-button>
|
|
<u-button @click="reset" style="margin-left: 30rpx">重置</u-button>
|
|
</u-form-item>-->
|
|
|
|
|
|
|
|
</u-form>
|
|
|
|
<view style="width: 100%;height: 140rpx;"></view>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="footer-btn">
|
|
<u-button color="#323232" shape="circle">申请开票</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
upTypelist:[],//抬头类型列表
|
|
id:1,
|
|
order_no:'',
|
|
form: {
|
|
username: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
email: '',
|
|
age: ''
|
|
},
|
|
rules: {
|
|
username: [{
|
|
required: true,
|
|
message: '请输入用户名',
|
|
trigger: 'blur'
|
|
},
|
|
{
|
|
min: 3,
|
|
max: 10,
|
|
message: '用户名长度在3到10个字符',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
|
|
email: [{
|
|
type: 'email',
|
|
message: '邮箱格式不正确',
|
|
trigger: 'blur'
|
|
}],
|
|
age: [{
|
|
type: 'number',
|
|
message: '年龄必须为数字',
|
|
trigger: 'blur'
|
|
},
|
|
{
|
|
min: 18,
|
|
max: 60,
|
|
type: 'number',
|
|
message: '年龄必须在18到60岁之间',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
// this.userInfo = uni.getStorageSync("userInfo")
|
|
this.id = options.id
|
|
this.order_no = options.order_no
|
|
console.log('id:',this.id,'order_no:',this.order_no);
|
|
},
|
|
methods: {
|
|
submit() {
|
|
this.$refs.uForm.validate(valid => {
|
|
if (valid) {
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'success'
|
|
})
|
|
console.log('表单数据:', this.form)
|
|
} else {
|
|
console.log('验证失败')
|
|
}
|
|
})
|
|
},
|
|
reset() {
|
|
this.$refs.uForm.resetFields()
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs.uForm.setRules(this.rules)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.form_right {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
color: #848484;
|
|
width: 300rpx;
|
|
padding: 0rpx 0rpx 0rpx 20rpx;
|
|
position: relative;
|
|
left:2rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
text-align: right;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.typeBOx {
|
|
width: 400rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
justify-content: center;
|
|
|
|
.normalInv {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.typeImgs {
|
|
width: 44rpx;
|
|
height:44rpx;
|
|
}
|
|
|
|
.typeText {
|
|
font-size:30rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.typeText2 {
|
|
font-size:30rpx;
|
|
font-weight: 400;
|
|
color: #323232;
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
padding: 40rpx 0;
|
|
background-color: #f5f5f5;
|
|
|
|
.invoiceInfo {
|
|
.invoiceList-item {
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
// margin-top: 20rpx;
|
|
// padding: 20rpx;
|
|
height: 220rpx;
|
|
|
|
.item-img {
|
|
width: 170rpx;
|
|
height: 170rpx;
|
|
margin-left: 40rpx;
|
|
|
|
}
|
|
|
|
.item-con {
|
|
margin-left: 20rpx;
|
|
width: 60%;
|
|
height: 160rpx;
|
|
position: relative;
|
|
color: #323232;
|
|
|
|
.itenCon-actName {
|
|
position: absolute;
|
|
top: 0;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.itenCon-actPrice {
|
|
position: absolute;
|
|
bottom: 0;
|
|
font-size: 32rpx;
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.formBox {
|
|
// width: 100%;
|
|
margin-top: 30rpx;
|
|
background-color: #ffffff;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.recipientInfo {
|
|
margin-top: 30rpx;
|
|
background-color: #ffffff;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.footer-btn {
|
|
width: 95%;
|
|
padding: 20rpx 20rpx 60rpx;
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 0;
|
|
// left: 0;
|
|
right: -2rpx;
|
|
z-index: 99;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
}
|
|
</style> |