sellerInvoice.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679
  1. <template name="invoice">
  2. <view class="invoice-template">
  3. <!-- 发票信息 -->
  4. <view class="invoice-title" @tap.stop="hanldOperationConfim">
  5. <text class="text">发票信息:</text>
  6. <text class="iconfont icon-xiayibu"></text>
  7. </view>
  8. <view class="invoice-text">
  9. <text>{{invoiceText}}</text>
  10. </view>
  11. <!--底部选择模态层弹窗组件 -->
  12. <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="choiceaInvoiceConfim">
  13. <!-- 遮罩层 -->
  14. <view class="mask"></view>
  15. <view class="layer" @tap.stop="discard">
  16. <view class="content clearfix">
  17. <view class="invoice-ltitle">发票类型</view>
  18. <view class="invoice-radio">
  19. <radio-group class="row-group" @change="radioChange">
  20. <label class="row-input" v-for="(item, index) in invoiceTypeList" :key="item.value">
  21. <radio class="row-radio" :value="item.value" :checked="index === current" color="#E15616"/>
  22. <view class="row-text">{{item.name}}</view>
  23. </label>
  24. </radio-group>
  25. </view>
  26. <view class="invoice-main from" v-if="invoiceType == '2'">
  27. <view class="invoice-from">
  28. <view class="label">单位名称:</view>
  29. <input class="form-input" type="text" v-model="invoiceData.invoiceTitle" placeholder="请填写单位信息(必填)" maxlength="20">
  30. </view>
  31. <view class="invoice-from">
  32. <view class="label">纳税人识别号:</view>
  33. <input class="form-input" type="text" v-model="invoiceData.corporationTaxNum" placeholder="请填写纳税人识别号(必填)" maxlength="20">
  34. </view>
  35. <view class="invoice-from">
  36. <view class="label">注册地址:</view>
  37. <input class="form-input" type="text" v-model="invoiceData.registeredAddress" placeholder="请填写单位注册地址(必填)" maxlength="30">
  38. </view>
  39. <view class="invoice-from">
  40. <view class="label">注册电话:</view>
  41. <input class="form-input" type="text" v-model="invoiceData.registeredPhone" placeholder="请填写注册电话(必填)" maxlength="15">
  42. </view>
  43. <view class="invoice-from">
  44. <view class="label">开户银行:</view>
  45. <input class="form-input" type="text" v-model="invoiceData.openBank" placeholder="请填写开户银行(必填)" maxlength="10">
  46. </view>
  47. <view class="invoice-from">
  48. <view class="label">银行账号:</view>
  49. <input class="form-input"
  50. type="text"
  51. v-model="invoiceData.bankAccountNo"
  52. placeholder="请填写银行账号(必填)"
  53. maxlength="19">
  54. </view>
  55. </view>
  56. <view class="invoice-main" v-if="invoiceType == '3'">
  57. <view class="invoice-ltitle">发票内容</view>
  58. <view class="invoice-group tit">
  59. <checkbox-group class="row-group" @change="checkboxChange">
  60. <view class="text">商品明细</view>
  61. <checkbox class="row-radio" value="明细" :checked="inventoryChecked" color="#E15616"></checkbox>
  62. </checkbox-group>
  63. </view>
  64. <view class="invoice-ltitle">发票抬头</view>
  65. <view class="invoice-group tit">
  66. <radio-group class="row-group radio" @change="radioChangeTitle">
  67. <label class="row-input" v-for="(item, index) in invoiceTitleList" :key="item.value">
  68. <radio class="row-radio" :value="item.value" :checked="index === titleCurrent" color="#E15616"/>
  69. <view class="row-text">{{item.name}}</view>
  70. </label>
  71. </radio-group>
  72. </view>
  73. <view class="invoice-group from">
  74. <view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '0'">
  75. <input class="form-input" type="text" v-model="peopleInvoiceData.invoiceTitle" placeholder="请填写个人抬头" maxlength="20">
  76. </view>
  77. <view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
  78. <input class="form-input" type="text" v-model="peopleInvoiceData.invoiceTitle" placeholder="请填写公司抬头" maxlength="20">
  79. </view>
  80. <view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
  81. <input class="form-input" type="text" v-model="peopleInvoiceData.corporationTaxNum" placeholder="请填写纳税人识别号" maxlength="20">
  82. </view>
  83. </view>
  84. </view>
  85. <view class="invoice-main" v-if="invoiceType == '1'">
  86. <view class="invoice-none">不开具发票信息</view>
  87. </view>
  88. </view>
  89. <view class="btn">
  90. <view class="button add" @click="choiceaInvoiceConfim">完成</view>
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </template>
  96. <script>
  97. export default{
  98. name:"invoice",
  99. data() {
  100. return{
  101. invoiceText:'不要发票',
  102. specClass: '',//规格弹窗css类,控制开关动画
  103. invoiceType:'1',//发票类型
  104. current:0,
  105. titleCurrent:0,
  106. inventoryChecked:false,
  107. invoiceTypeList:[
  108. {value:'1',name:'不要发票'},
  109. {value:'2',name:'增值税发票'},
  110. ],
  111. invoiceTitleList:[
  112. {value:'0',name:'个人'},
  113. {value:'1',name:'公司'},
  114. ],
  115. peopleInvoiceData:{
  116. invoiceTitle:'',
  117. invoiceContent:'',
  118. corporationTaxNum:'',
  119. invoiceTitleType:'0'//发票抬头类型 1企业 0个人
  120. },
  121. invoiceData:{
  122. invoiceTitle:'', //单位名称
  123. corporationTaxNum:'',//纳税人识别号
  124. registeredAddress: '',//单位地址
  125. registeredPhone:'', //注册电话
  126. openBank:'', //开户银行
  127. bankAccountNo: '' ,//银行账号
  128. },
  129. }
  130. },
  131. created(){
  132. // this.initData(this.invoiceDatas)
  133. },
  134. computed: {
  135. },
  136. methods:{
  137. getUseFindInvoice(){//获取发票信息
  138. this.$api.getComStorage('orderUserInfo').then((resolve) =>{
  139. this.OrderService.GetFindInvoice({userId:resolve.userID}).then(response =>{
  140. if(response.data == null){
  141. this.invoiceData = Object.assign(this.invoiceData,'',{type:0})
  142. }else{
  143. this.invoiceData = response.data
  144. }
  145. })
  146. })
  147. },
  148. updateInvoiceFn(){//保存发票信息
  149. this.$api.getComStorage('orderUserInfo').then((resolve) =>{
  150. let params =Object.assign(this.invoiceData,'',{userId:resolve.userID})
  151. this.OrderService.UpdateInvoice(params).then(response =>{})
  152. })
  153. },
  154. choiceaInvoiceConfim(){
  155. switch(this.invoiceType){
  156. case '1':
  157. this.choiceaInvoiceThree()
  158. this.invoiceText = '不要发票'
  159. break;
  160. // case '2':
  161. // this.choiceaInvoiceTwo()
  162. // this.invoiceText = this.peopleInvoiceData.invoiceTitle
  163. // break;
  164. case '2':
  165. this.choiceaInvoiceFirst()
  166. this.invoiceText = this.invoiceData.invoiceTitle
  167. break;
  168. default:
  169. this.choiceaInvoiceThree()
  170. this.invoiceText = '不要发票'
  171. }
  172. },
  173. choiceaInvoiceFirst(){//增值税发票
  174. if(this.invoiceData.invoiceTitle == ""){
  175. this.$util.msg('请输入单位名称',2000)
  176. return
  177. }
  178. if(this.invoiceData.corporationTaxNum == ""){
  179. this.$util.msg('请输入纳税人识别号',2000)
  180. return
  181. }
  182. if(this.invoiceData.registeredAddress == ""){
  183. this.$util.msg('请输入单位地址',2000)
  184. return
  185. }
  186. if(this.invoiceData.registeredPhone == ""){
  187. this.$util.msg('请输入注册电话',2000)
  188. return
  189. }
  190. if(this.invoiceData.openBank == ""){
  191. this.$util.msg('请输入开户银行',2000)
  192. return
  193. }
  194. if(this.invoiceData.bankAccountNo == ""){
  195. this.$util.msg('请输入银行账号',2000)
  196. return
  197. }
  198. this.updateInvoiceFn()
  199. this.$emit('handleChoiceaInvoice',Object.assign(this.invoiceData,'',{type:2}))
  200. this.hideSpec()
  201. },
  202. choiceaInvoiceTwo(){//普通发票
  203. switch(this.peopleInvoiceData.invoiceTitleType){
  204. case '0':
  205. if(this.peopleInvoiceData.invoiceContent == ''){
  206. this.$util.msg('请选择商品明细',2000)
  207. return
  208. }
  209. if(this.peopleInvoiceData.invoiceTitle == ""){
  210. this.$util.msg('请输入个人抬头',2000)
  211. return
  212. }
  213. break;
  214. case '1':
  215. if(this.peopleInvoiceData.invoiceContent == ''){
  216. this.$util.msg('请选择商品明细',2000)
  217. return
  218. }
  219. if(this.peopleInvoiceData.invoiceTitle == ""){
  220. this.$util.msg('请输入公司抬头',2000)
  221. return
  222. }
  223. if(this.peopleInvoiceData.corporationTaxNum == ""){
  224. this.$util.msg('请输入纳税人识别号',2000)
  225. return
  226. }
  227. break;
  228. }
  229. this.$emit('handleChoiceaInvoice',Object.assign(this.peopleInvoiceData,'',{type:1}))
  230. this.hideSpec()
  231. },
  232. choiceaInvoiceThree(){//不要发票
  233. this.invoiceData = {}
  234. this.$emit('handleChoiceaInvoice',Object.assign(this.invoiceData,'',{type:0}))
  235. this.hideSpec()
  236. },
  237. hideSpec() {//关闭弹窗
  238. this.specClass = 'hide';
  239. setTimeout(() => {
  240. this.specClass = 'none';
  241. }, 200);
  242. },
  243. hanldOperationConfim(){//显示发票弹窗
  244. this.specClass = 'show';
  245. },
  246. radioChange(e) {
  247. this.invoiceType = e.target.value;
  248. for (let i = 0; i < this.invoiceTypeList.length; i++) {
  249. if (this.invoiceTypeList[i].value === this.invoiceType) {
  250. this.current = i;
  251. break;
  252. }
  253. }
  254. switch(this.invoiceType){
  255. case '2':
  256. this.getUseFindInvoice()
  257. break;
  258. }
  259. },
  260. radioChangeTitle(e) {
  261. this.peopleInvoiceData.invoiceTitleType = e.target.value;
  262. for (let i = 0; i < this.invoiceTitleList.length; i++) {
  263. if (this.invoiceTitleList[i].value === this.peopleInvoiceData.invoiceTitleType) {
  264. this.titleCurrent = i;
  265. break;
  266. }
  267. }
  268. switch(this.peopleInvoiceData.invoiceTitleType){
  269. case '1':
  270. this.inventoryChecked = false
  271. this.peopleInvoiceData.invoiceTitle = ""
  272. this.peopleInvoiceData.invoiceContent = ""
  273. break;
  274. }
  275. },
  276. checkboxChange(e){
  277. this.inventoryChecked = !this.inventoryChecked
  278. this.peopleInvoiceData.invoiceContent = e.detail.value[0]
  279. },
  280. inputBankNum(val) {
  281. if (/\S{5}/.test(val)) {
  282. this.invoiceData.bankAccountNo = val.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
  283. }
  284. },
  285. discard(){
  286. //丢弃
  287. }
  288. }
  289. }
  290. </script>
  291. <style lang="scss">
  292. .invoice-template{
  293. width: 100%;
  294. height: auto;
  295. background: #FFFFFF;
  296. float: left;
  297. margin-top: 24rpx;
  298. .invoice-title{
  299. width: 702rpx;
  300. padding: 0 24rpx;
  301. height: 88rpx;
  302. line-height: 88rpx;
  303. position: relative;
  304. border-bottom: 1px solid #EBEBEB;
  305. .text{
  306. font-size: $font-size-28;
  307. color: $text-color;
  308. font-weight: bold;
  309. }
  310. .iconfont{
  311. width: 50rpx;
  312. height: 88rpx;
  313. line-height: 88rpx;
  314. color: #999999;
  315. display: block;
  316. position: absolute;
  317. right: 0;
  318. top: 0;
  319. }
  320. }
  321. .invoice-text{
  322. width: 702rpx;
  323. padding: 0 24rpx;
  324. font-size: $font-size-24;
  325. color: #666666;
  326. line-height: 60rpx;
  327. }
  328. .invoice-ltitle{
  329. width: 100%;
  330. line-height: 60rpx;
  331. height: 60rpx;
  332. font-size: $font-size-28;
  333. color: #333333;
  334. }
  335. .invoice-radio{
  336. width: 100%;
  337. height: 88rpx;
  338. line-height: 88rpx;
  339. display: flex;
  340. border-bottom: 1px solid #EBEBEB;
  341. .row-group{
  342. flex:1;
  343. display: flex;
  344. }
  345. .row-input{
  346. flex: 1;
  347. height: 88rpx;
  348. line-height: 88rpx;
  349. }
  350. .row-radio{
  351. float: left;
  352. transform: scale(0.6);
  353. }
  354. .row-text{
  355. font-size: $font-size-24;
  356. color: $text-color;
  357. }
  358. }
  359. .invoice-main{
  360. width: 100%;
  361. height: auto;
  362. margin-top: 30rpx;
  363. &.from{
  364. padding-bottom: 40rpx;
  365. }
  366. .invoice-none{
  367. line-height: 60rpx;
  368. height: 60rpx;
  369. font-size: $font-size-24;
  370. color: #666666;
  371. text-align: center;
  372. }
  373. .invoice-from{
  374. width: 662rpx;
  375. height: 40rpx;
  376. padding: 20rpx;
  377. line-height: 40rpx;
  378. align-items: flex-start;
  379. font-size: $font-size-28;
  380. color: $text-color;
  381. background: #F7F7F7;
  382. border-radius: 14rpx;
  383. margin-bottom: 20rpx;
  384. .label{
  385. height: 40rpx;
  386. line-height: 40rpx;
  387. float: left;
  388. }
  389. .form-input{
  390. height: 40rpx;
  391. line-height: 40rpx;
  392. flex-grow: 1;
  393. padding-left: 20rpx;
  394. }
  395. }
  396. .invoice-group{
  397. width: 100%;
  398. height: 88rpx;
  399. display: flex;
  400. border-bottom: 1px solid #EBEBEB;
  401. &.tit{
  402. margin-bottom: 30rpx;
  403. }
  404. &.from{
  405. margin-bottom: 30rpx;
  406. border-bottom: 1px solid #FFFFFF;
  407. flex-direction: row;
  408. display: block;
  409. .group-from{
  410. flex: 1;
  411. height: 40rpx;
  412. padding: 20rpx;
  413. line-height: 40rpx;
  414. align-items: flex-start;
  415. font-size: $font-size-24;
  416. color: $text-color;
  417. background: #F7F7F7;
  418. border-radius: 14rpx;
  419. margin-bottom: 20rpx;
  420. .form-input{
  421. height: 40rpx;
  422. line-height: 40rpx;
  423. flex-grow: 1;
  424. }
  425. }
  426. }
  427. .row-group{
  428. line-height: 88rpx;
  429. flex: 1;
  430. .text{
  431. font-size: $font-size-24;
  432. color: $text-color;
  433. line-height: 88rpx;
  434. float: left;
  435. }
  436. .row-radio{
  437. float: right;
  438. transform: scale(0.8);
  439. border-radius: 50%;
  440. }
  441. &.radio{
  442. display: flex;
  443. .row-input{
  444. flex: 1;
  445. height: 88rpx;
  446. line-height: 88rpx;
  447. }
  448. .row-radio{
  449. float: left;
  450. transform: scale(0.6);
  451. }
  452. .row-text{
  453. font-size: $font-size-24;
  454. color: $text-color;
  455. }
  456. }
  457. }
  458. }
  459. }
  460. }
  461. /* 加入购物模态层*/
  462. @keyframes showPopup {
  463. 0% {
  464. opacity: 0;
  465. }
  466. 100% {
  467. opacity: 1;
  468. }
  469. }
  470. @keyframes hidePopup {
  471. 0% {
  472. opacity: 1;
  473. }
  474. 100% {
  475. opacity: 0;
  476. }
  477. }
  478. @keyframes showLayer {
  479. 0% {
  480. transform: translateY(0);
  481. }
  482. 100% {
  483. transform: translateY(-100%);
  484. }
  485. }
  486. @keyframes hideLayer {
  487. 0% {
  488. transform: translateY(-100%);
  489. }
  490. 100% {
  491. transform: translateY(0);
  492. }
  493. }
  494. @keyframes showAmnation {
  495. 0% {
  496. top: -12rpx;
  497. opacity: 0;
  498. }
  499. 50% {
  500. top: -60rpx;
  501. opacity: 1;
  502. }
  503. 100% {
  504. top: -100rpx;
  505. opacity: 0;
  506. }
  507. }
  508. @keyframes hideAmnation {
  509. 0% {
  510. top: -100rpx;
  511. opacity: 0;
  512. }
  513. 100% {
  514. top: -12rpx;
  515. opacity: 0;
  516. }
  517. }
  518. .popup {
  519. position: fixed;
  520. top: 0;
  521. width: 100%;
  522. height: 100%;
  523. z-index: 999;
  524. display: none;
  525. .mask{
  526. position: fixed;
  527. top: 0;
  528. width: 100%;
  529. height: 100%;
  530. z-index: 21;
  531. background-color: rgba(0, 0, 0, 0.6);
  532. }
  533. .layer {
  534. position: absolute;
  535. z-index: 22;
  536. bottom: -1010rpx;
  537. width: 702rpx;
  538. padding: 24rpx 24rpx 65rpx 24rpx;
  539. height: 920rpx;
  540. border-radius: 20rpx 20rpx 0 0;
  541. background-color: #fff;
  542. display: flex;
  543. flex-wrap: wrap;
  544. align-content: space-between;
  545. .content {
  546. width: 100%;
  547. }
  548. .btn {
  549. width: 100%;
  550. height: 88rpx;
  551. display: flex;
  552. .button {
  553. width: 702rpx;
  554. height: 88rpx;
  555. color: #fff;
  556. display: flex;
  557. align-items: center;
  558. justify-content: center;
  559. font-size: $font-size-28;
  560. border-radius: 14rpx;
  561. background: $btn-confirm;
  562. }
  563. }
  564. }
  565. &.show {
  566. display: block;
  567. .mask{
  568. animation: showPopup 0.2s linear both;
  569. }
  570. .layer {
  571. animation: showLayer 0.2s linear both;
  572. }
  573. }
  574. &.hide {
  575. display: block;
  576. .mask{
  577. animation: hidePopup 0.2s linear both;
  578. }
  579. .layer {
  580. animation: hideLayer 0.2s linear both;
  581. }
  582. }
  583. &.none {
  584. display: none;
  585. }
  586. &.service {
  587. .row {
  588. margin: 30upx 0;
  589. .title {
  590. font-size: 30upx;
  591. margin: 10upx 0;
  592. }
  593. .description {
  594. font-size: 28upx;
  595. color: #999;
  596. }
  597. }
  598. }
  599. .layer-smimg{
  600. width: 114rpx;
  601. height: 114rpx;
  602. float: left;
  603. border-radius: 10rpx;
  604. margin-right: 24rpx;
  605. image{
  606. width: 114rpx;
  607. height: 114rpx;
  608. border-radius: 10rpx;
  609. }
  610. }
  611. .layer-nunbox{
  612. justify-content: space-between;
  613. align-items: center;
  614. width: 536rpx;
  615. height: 88rpx;
  616. padding: 13rpx 0 0 0;
  617. float: left;
  618. .layer-nunbox-t{
  619. width: 100%;
  620. height:44rpx;
  621. position:relative;
  622. display: flex;
  623. .layer-nunbox-text{
  624. line-height: 44rpx;
  625. font-size: $font-size-28;
  626. }
  627. .number-box{
  628. display: flex;
  629. justify-content: center;
  630. align-items: center;
  631. .iconfont{
  632. font-size: $font-size-32;
  633. padding:0 20rpx;
  634. font-size: $text-color;
  635. }
  636. .btn-input{
  637. width: 62rpx;
  638. height: 48rpx;
  639. line-height: 48rpx;
  640. background: #F8F8F8;
  641. border-radius: 4rpx;
  642. text-align: center;
  643. font-size: $font-size-28;
  644. }
  645. }
  646. .product-step{
  647. position: absolute;
  648. left: 45rpx;
  649. bottom: 0;
  650. height: 44rpx;
  651. background: #FFFFFF;
  652. }
  653. }
  654. .layer-nunbox-b{
  655. width: 100%;
  656. height:44rpx;
  657. margin-top: 13rpx;
  658. }
  659. .text{
  660. line-height: 44rpx;
  661. font-size: $font-size-28;
  662. .p{
  663. color: #FF2A2A;
  664. }
  665. .p:first-child{
  666. margin-left: 30rpx;
  667. }
  668. .p.sm{
  669. font-size: $font-size-24;
  670. }
  671. }
  672. }
  673. }
  674. </style>