|
|
@@ -0,0 +1,343 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="card-box">
|
|
|
+ <view class="card-item-box">
|
|
|
+ <view class="required"></view>
|
|
|
+ <view class="label">
|
|
|
+ 开票金额
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ ￥{{ formData.form.price }}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-form :model="formData.form" ref="formRef">
|
|
|
+ <view class="card-box">
|
|
|
+ <view class="card-item-box">
|
|
|
+ <view class="required">*</view>
|
|
|
+ <view class="label">
|
|
|
+ 发票类型
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="type">
|
|
|
+ <u-radio-group v-model="formData.form.type">
|
|
|
+ <u-radio
|
|
|
+ @change="onTypeChange"
|
|
|
+ v-for="(item, index) in typeList" :key="index"
|
|
|
+ :name="item.name"
|
|
|
+ icon-size="26"
|
|
|
+ label-size="26"
|
|
|
+ >
|
|
|
+ {{item.name}}
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box">
|
|
|
+ <view class="required">*</view>
|
|
|
+ <view class="label">
|
|
|
+ 抬头类型
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="titleType">
|
|
|
+ <u-radio-group v-model="formData.form.titleType">
|
|
|
+ <u-radio
|
|
|
+ @change="onTitleTypeChange"
|
|
|
+ v-for="(item, index) in titleTypeList" :key="index"
|
|
|
+ :name="item.name"
|
|
|
+ icon-size="26"
|
|
|
+ label-size="26"
|
|
|
+ >
|
|
|
+ {{item.name}}
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box">
|
|
|
+ <view class="required">*</view>
|
|
|
+ <view class="label">
|
|
|
+ 抬头名称
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="titleName">
|
|
|
+ <u-input v-model="formData.form.titleName" type="text" :border="false" placeholder=""/>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box">
|
|
|
+ <view class="required">{{formData.form.titleType === '企业单位' ? '*' : ''}}</view>
|
|
|
+ <view class="label">
|
|
|
+ 纳税人识别号
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="number">
|
|
|
+ <u-input v-model="formData.form.number" type="text" :border="false" placeholder=""/>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box">
|
|
|
+ <view class="required">*</view>
|
|
|
+ <view class="label">
|
|
|
+ 收票人邮箱
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="email">
|
|
|
+ <u-input v-model="formData.form.email" type="text" :border="false" placeholder=""/>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box">
|
|
|
+ <view class="required">*</view>
|
|
|
+ <view class="label">
|
|
|
+ 手机号码
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="tel">
|
|
|
+ <u-input v-model="formData.form.tel" type="text" :border="false" placeholder=""/>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box" v-if="showMore">
|
|
|
+ <view class="required"></view>
|
|
|
+ <view class="label">
|
|
|
+ 地址
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="address">
|
|
|
+ <u-input v-model="formData.form.address" type="text" :border="false" placeholder=""/>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box" v-if="showMore">
|
|
|
+ <view class="required"></view>
|
|
|
+ <view class="label">
|
|
|
+ 开户银行
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="bank">
|
|
|
+ <u-input v-model="formData.form.bank" type="text" :border="false" placeholder=""/>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box" v-if="showMore">
|
|
|
+ <view class="required"></view>
|
|
|
+ <view class="label">
|
|
|
+ 银行账号
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="bankAccount">
|
|
|
+ <u-input v-model="formData.form.bankAccount" type="text" :border="false" placeholder=""/>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box" v-if="showMore">
|
|
|
+ <view class="required"></view>
|
|
|
+ <view class="label">
|
|
|
+ 备注说明
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <u-form-item prop="remark">
|
|
|
+ <u-input v-model="formData.form.remark" type="text" :border="false" placeholder=""/>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item-box func" @click="showMore = !showMore">
|
|
|
+ <view class="text">
|
|
|
+ {{ showMore ? '收起' : '展开' }}选项信息 <span class="iconfont icon-chevron-up" :class="{'reversal': !showMore}"></span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-box">
|
|
|
+ <u-button type="error" shape="circle" @click="onSubmit">提交申请</u-button>
|
|
|
+ </view>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { ref, reactive } from 'vue'
|
|
|
+ import { onReady, onLoad } from '@dcloudio/uni-app'
|
|
|
+
|
|
|
+ const showMore = ref(false)
|
|
|
+
|
|
|
+ const formRef = ref()
|
|
|
+ const formData = reactive({
|
|
|
+ form: {
|
|
|
+ orderIds: null, // 订单Id
|
|
|
+ price: '0.00', // 开票金额
|
|
|
+ type: '全电专票', // 发票类型
|
|
|
+ titleType: '企业单位', // 抬头类型
|
|
|
+ titleName: null, // 抬头名称
|
|
|
+ number: null, // 纳税人识别号
|
|
|
+ email: null, // 收票人邮箱
|
|
|
+ tel: null, // 手机号码
|
|
|
+ address: null, // 地址
|
|
|
+ bank: null, // 开户银行
|
|
|
+ bankAccount: null, // 银行账号
|
|
|
+ remark: null // 备注说明
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ type: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择发票类型',
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ['change','blur'],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ titleType: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择抬头类型',
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ['change','blur'],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ titleName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入抬头名称',
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: 'blur',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ number: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入纳税人识别号',
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: 'blur',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ email: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入收票人邮箱',
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: 'blur',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tel: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入手机号码',
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: 'blur',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const typeList = ref([
|
|
|
+ {
|
|
|
+ name: '全电专票'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '全店普票'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ const titleTypeList = ref([
|
|
|
+ {
|
|
|
+ name: '企业单位'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '个人/非企业单位'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ function onTypeChange(val) {}
|
|
|
+ function onTitleTypeChange(val) {
|
|
|
+ if (val !== '企业单位') {
|
|
|
+ formData.rules.number[0].required = false
|
|
|
+ } else {
|
|
|
+ formData.rules.number[0].required = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function onSubmit() {
|
|
|
+ formRef.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/invoiceResult/invoiceResult'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ onReady(() => {
|
|
|
+ formRef.value.setRules(formData.rules)
|
|
|
+ })
|
|
|
+ onLoad((load) => {
|
|
|
+ formData.form.orderIds = load.ids
|
|
|
+ formData.form.price = load.price
|
|
|
+
|
|
|
+ console.log('form', formData.form)
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .container {
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ background-color: $uni-bg-color;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .card-box {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background-color: $uni-text-color-inverse;
|
|
|
+ border-radius: $uni-card-border-radius;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ // &:first-child {
|
|
|
+ // .card-item-box {
|
|
|
+ // padding: 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ .card-item-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // padding: 20rpx 0;
|
|
|
+ font-size: $uni-title-font-size-2;
|
|
|
+ border-bottom: 1rpx solid #E6E6E6;
|
|
|
+ height: 82rpx;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .required {
|
|
|
+ width: 3%;
|
|
|
+ color: $uni-color-error;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ width: 27%;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ width: 70%;
|
|
|
+ ::v-deep .u-form-item {
|
|
|
+ padding: 0 !important;
|
|
|
+ line-height: 0;
|
|
|
+ font-size: $uni-title-font-size-2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .func {
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ color: $uni-text-color-grey;
|
|
|
+
|
|
|
+ .reversal {
|
|
|
+ display: inline-block;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-box {
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ bottom: 50rpx;
|
|
|
+ width: 95%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
