-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (131 loc) · 6.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/vant/4.6.5/index.min.css" />
<title>扫码开票</title>
</head>
<body>
<div id="app" v-cloak>
<div class="container">
<van-notice-bar left-icon="volume-o">
您正在使用{{shopName}}二维码扫描开票服务，请仔细确认开票内容，一经开出无法退票重开。
</van-notice-bar>
<div class="invoice-type" v-if="invoiceCategoryList.length > 0">
<p class="title">
请选择发票类型
</p>
<div class="invoice-type-item" v-for="(item, index) in invoiceCategoryList" :key="index"
@click="changeInvoiceCategory(item)"
:style="invoiceForm.category === item ? `border:2px solid ${invoiceTag(item).color}` : 'border:2px solid #f8f8f8' ">
<van-tag class="invoice-tag" size="large" type="primary"
:color="invoiceForm.category === item ? invoiceTag(item).color : '#969799'">
{{ invoiceTag(item).name }}
</van-tag>
<span class="invoice-title"
:style="invoiceForm.category === item ? `color:${invoiceTag(item).color}` : 'color:#969799' ">{{ item}}</span>
</div>
</div>
<van-cell-group title="开票信息" inset>
<van-cell>
<template #title>
<span class="makeInvoce-required">*</span>
<span>抬头类型</span>
</template>
<van-radio-group v-model="invoiceForm.type" direction="horizontal" @change="selectType">
<van-radio name="企业">企业</van-radio>
<van-radio name="个人">个人/事业单位</van-radio>
</van-radio-group>
</van-cell>
<van-field v-model="invoiceForm.purchaserName" label="发票抬头"
:placeholder="this.invoiceForm.type === '个人'?'请输入姓名/事业单位':'请输入发票抬头'"
@compositionstart="handleCompositionStart" @compositionend="handleCompositionEnd" @input="handleInput"
@focus="inputFocus" @blur="inputBlur" required>
<template #right-icon>
<span class="wx-company" @click="selectWeiXinCompany">微信抬头</span>
</template>
</van-field>
<div class="helper"></div>
<div v-show="dropDownShow" class="searchList">
<ul>
<li v-for="(item, index) in searchList" :key="index" class="searchList-item"
@mousedown="chooseCompany(index)">
{{ item.name }}
</li>
</ul>
</div>
<van-field v-if="willShow" v-model="invoiceForm.purchaserTaxpayerNumber" label="税号" placeholder="请输入税号"
required>
</van-field>
<van-field v-if="willShow" v-show="isHide" label="更多" placeholder="地址、电话、开户行等" @click="purchaserMore"
right-icon="arrow-down"></van-field>
<div v-show="isShow">
<van-field v-if="willShow" v-model="invoiceForm.purchaserAddress" label="地址" placeholder="请输入地址"
right-icon="arrow-up" @click-right-icon="purchaserMoreHide"></van-field>
<van-field v-if="willShow" v-model="invoiceForm.purchaserPhone" label="电话" placeholder="请输入电话"></van-field>
<van-field v-if="willShow" v-model="invoiceForm.purchaserBank" label="开户行" placeholder="请输入开户行"></van-field>
<van-field v-if="willShow" v-model="invoiceForm.purchaserBankAccount" label="银行账号" placeholder="请输入开户行账号">
</van-field>
</div>
</van-cell-group>
<van-cell-group title="发票内容" inset>
<table>
<thead>
<tr>
<th>商品名称</th>
<th v-if="ifShowModel">规格型号</th>
<th v-if="ifShowUnit">单位</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr v-for="item in scanItems">
<td>{{item.name}}</td>
<td v-if="ifShowModel">{{item.model}}</td>
<td v-if="ifShowUnit">{{item.unit}}</td>
<td>{{item.number}}</td>
<td>{{item.price}}</td>
<td>{{item.sum}}</td>
</tr>
</tbody>
</table>
<van-field class="order_price" v-model="invoicePrice" label="发票金额" placeholder="" readonly></van-field>
<van-field v-model="invoiceForm.remark" label="备注" placeholder="可输入发票备注信息"></van-field>
</van-cell-group>
<van-cell-group title="接收方式" inset>
<van-field name="邮箱账号" label="邮箱账号" v-model="invoiceForm.email" placeholder="可接收电子发票邮件" :required="ifNeedEmail">
</van-field>
<van-field name="手机号码" label="手机号码" v-model="invoiceForm.mobile" placeholder="请输入手机号码" :required="ifNeedMobile">
</van-field>
</van-cell-group>
<div class="fixed-bottom">
<van-button @click="makeInvoice" type="primary" block>
提交
</van-button>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/vue/3.3.4/vue.global.min.js"></script>
<script src="https://cdn.staticfile.org/vant/4.6.5/vant.min.js"></script>
<script src="https://cdn.staticfile.org/axios/1.4.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="js/param.js"></script>
<script src="js/index.js"></script>
<script src="js/validate.js"></script>
<!-- <script src="https://static-card.dushu365.com/static/components/vConsole@v3.3.2/vconsole.min.js"></script>
<script>
window.onload = () => {
setTimeout(() => {
window.vConsole = new VConsole()
}, 10)
}
</script> -->
</body>
</html>