Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

invoice-header-add.vue 6.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. <template>
  2. <view class="box">
  3. <view class="from">
  4. <u-form :model="form" ref="uForm">
  5. <u-form-item>
  6. <view class="from_item">
  7. <text>抬头类型:</text>
  8. <u-radio-group v-model="radiovalue1">
  9. <u-radio :customStyle="{marginBottom: '8px'}" activeColor="#2CE242"
  10. v-for="(item, index) in radiolist1" :key="index" :label="item.disabled"
  11. :name="item.name" @change="radioChange">
  12. {{item.name}}
  13. </u-radio>
  14. </u-radio-group>
  15. </view>
  16. </u-form-item>
  17. <u-form-item>
  18. <view class="from_item">
  19. <text><text style="color: red;">*</text>抬头名称:</text>
  20. <view style="display: flex;">
  21. <u-input v-model="form.buyerName" class="input" placeholder="请输入抬头名称" />
  22. </view>
  23. </view>
  24. </u-form-item>
  25. <u-form-item>
  26. <view class="from_item">
  27. <text><text style="color: red;">*</text>纳税人识别号:</text>
  28. <view style="display: flex;">
  29. <u-input v-model="form.buyerTaxNo" class="input" placeholder="请输入纳税人识别号" />
  30. </view>
  31. </view>
  32. </u-form-item>
  33. <u-form-item v-if="form.titleType==1">
  34. <view class="from_item">
  35. <text>单位地址</text>
  36. <view style="display: flex;">
  37. <u-input v-model="form.companyAddress" class="input" placeholder="请输入单位地址" />
  38. </view>
  39. </view>
  40. </u-form-item>
  41. <u-form-item v-if="form.titleType==1">
  42. <view class="from_item">
  43. <text>公司电话号码</text>
  44. <view style="display: flex;">
  45. <u-input v-model="form.companyTel" class="input" placeholder="请输入公司电话号码" type="number"
  46. maxlength="11" />
  47. </view>
  48. </view>
  49. </u-form-item>
  50. <u-form-item v-if="form.titleType==1">
  51. <view class="from_item">
  52. <text>开户银行</text>
  53. <view style="display: flex;">
  54. <u-input v-model="form.bankName" class="input" placeholder="请输入开户银行" />
  55. </view>
  56. </view>
  57. </u-form-item>
  58. <u-form-item v-if="form.titleType==1">
  59. <view class="from_item">
  60. <text>银行账户</text>
  61. <view style="display: flex;">
  62. <u-input v-model="form.bankAccount" class="input" placeholder="请输入银行账户" type="number" />
  63. </view>
  64. </view>
  65. </u-form-item>
  66. <view class="from_item">
  67. <text>设置默认抬头</text>
  68. <u-switch v-model="checked" active-color="#00B38B" inactive-color="#DCDCDC"
  69. @change='change'></u-switch>
  70. </view>
  71. </u-form>
  72. </view>
  73. <button class="submit" @click="submit()">保存</button>
  74. </view>
  75. </template>
  76. <script setup lang="ts">
  77. import {
  78. ref,
  79. reactive
  80. } from "vue";
  81. import { addInvoiceApi, queryEtcOrderApi } from "@/utils/network/api.js";
  82. import { request } from "@/utils/network/request.js";
  83. import { stringToJson } from "@/utils/network/encryption";
  84. import { msg, checkStr } from "@/utils/utils";
  85. import { onLoad } from "@dcloudio/uni-app";
  86. const form = reactive({
  87. titleType: 1, //抬头类型 1-单位抬头 2个人抬头
  88. buyerName: '',
  89. isDefault: -1, //1:默认抬头;-1:非默认抬头
  90. buyerTaxNo: "",//纳税人识别号
  91. companyAddress: "", //单位地址
  92. companyTel: "",//公司电话号码
  93. bankName: "",//开户银行
  94. bankAccount: "",//银行账号
  95. userMobile: "",//客户手机号
  96. })
  97. // 单选数据列表
  98. const radiolist1 = reactive([{
  99. name: '单位',
  100. disabled: false
  101. },
  102. {
  103. name: '个人',
  104. disabled: false
  105. },
  106. ])
  107. onLoad((options) => {
  108. form.userMobile = options.userMobile
  109. })
  110. const checked = ref(false)
  111. const change = (status) => {
  112. if (status) {
  113. form.isDefault = 1
  114. } else {
  115. form.isDefault = -1
  116. }
  117. console.log(status, form.isDefault);
  118. }
  119. // 单选默认数据
  120. const radiovalue1 = ref('单位')
  121. // 单选
  122. const radioChange = (n) => {
  123. console.log('radioChange', n);
  124. if (n == '单位') {
  125. form.titleType = 1
  126. console.log(form.titleType);
  127. } else {
  128. form.titleType = 2
  129. console.log(form.titleType);
  130. }
  131. empty()
  132. }
  133. const empty = () => {
  134. form.buyerName = "";
  135. form.isDefault = -1;
  136. form.buyerTaxNo = "";
  137. form.companyAddress = "";
  138. form.companyTel = "";
  139. form.bankName = "";
  140. form.bankAccount = "";
  141. checked.value = false
  142. }
  143. const submit = () => {
  144. if (!form.buyerName) {
  145. msg("请输入抬头名称!");
  146. return;
  147. }
  148. // 抬头类型为单位时必填 纳税人识别号
  149. if (!form.buyerTaxNo) {
  150. msg("请输入纳税人识别号!");
  151. return;
  152. }
  153. var data = {
  154. titleType: form.titleType,
  155. buyerName: form.buyerName,
  156. isDefault: form.isDefault,
  157. buyerTaxNo: form.buyerTaxNo,
  158. companyAddress: form.companyAddress,
  159. companyTel: form.companyTel,
  160. bankName: form.bankName,
  161. bankAccount: form.bankAccount,
  162. userMobile: form.userMobile,
  163. };
  164. const options = {
  165. type: 2,
  166. data: data,
  167. method: "POST",
  168. showLoading: true,
  169. };
  170. request(addInvoiceApi, options).then((res) => {
  171. const data = stringToJson(res.bizContent);
  172. console.log("data", data)
  173. uni.navigateBack({
  174. delta: 1
  175. })
  176. });
  177. }
  178. </script>
  179. <style>
  180. page {
  181. width: 100%;
  182. height: 100%;
  183. }
  184. </style>
  185. <style lang="scss" scoped>
  186. .box {
  187. width: 100%;
  188. height: 100%;
  189. background-color: #EEF7F7;
  190. border-top: 1rpx solid #DFDFDF;
  191. .from {
  192. background-color: #fff;
  193. margin-top: 30rpx;
  194. padding: 0 30rpx;
  195. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  196. ::v-deep .u-form-item {
  197. padding: 0;
  198. line-height: normal;
  199. .u-form-item__message {
  200. margin-bottom: 12rpx
  201. }
  202. }
  203. .from_item {
  204. display: flex;
  205. flex-wrap: nowrap;
  206. justify-content: space-between;
  207. border-bottom: #DCDCDC 1px solid;
  208. align-items: center;
  209. height: 80rpx;
  210. text {
  211. font-size: 28rpx;
  212. font-family: Noto Sans S Chinese;
  213. font-weight: 400;
  214. color: #999999;
  215. }
  216. ::v-deep .input {
  217. text-align: right;
  218. flex: 1;
  219. input {
  220. text-align: right;
  221. }
  222. }
  223. }
  224. .from_item1 {
  225. display: flex;
  226. flex-wrap: nowrap;
  227. flex-direction: column;
  228. justify-content: space-between;
  229. padding: 30rpx;
  230. border-bottom: #DCDCDC 1px solid;
  231. input {
  232. text-align: right;
  233. }
  234. .textarea {
  235. background-color: #F1F1F1;
  236. width: 100%;
  237. border-radius: 20rpx;
  238. margin-top: 10rpx;
  239. text-indent: 1rem;
  240. height: 180rpx;
  241. padding: 20rpx;
  242. box-sizing: border-box;
  243. }
  244. }
  245. }
  246. .submit {
  247. width: 670rpx;
  248. height: 80rpx;
  249. background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
  250. border-radius: 40rpx;
  251. font-size: 32rpx;
  252. font-family: Noto Sans S Chinese;
  253. font-weight: 400;
  254. color: #FFFFFF;
  255. line-height: 80rpx;
  256. position: fixed;
  257. left: 50%;
  258. transform: translate(-50%);
  259. bottom: 100rpx;
  260. }
  261. }
  262. ::v-deep .u-icon__icon {
  263. top: -4px !important;
  264. }
  265. </style>