index.vue 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348
  1. <template>
  2. <view class="invoice">
  3. <nav-bar title="发票申请"></nav-bar>
  4. <view class="invoice__tabs">
  5. <u-tabs :list="list" sticky :current="current" @change="change" active-color="#007AFF"></u-tabs>
  6. </view>
  7. <view class="invoice__content">
  8. <view class="open" v-if="current == 0">
  9. <view class="form">
  10. <u-form :model="form" ref="uForm">
  11. <u-form-item label="发票类型" label-width="150" required prop="type" >
  12. <u-radio-group v-model="form.type" @change="formTypeChange">
  13. <u-radio v-for="(item, index) in typeList" :key="index" :name="item.value">
  14. {{ item.name }}
  15. </u-radio>
  16. </u-radio-group>
  17. </u-form-item>
  18. <!-- 增值税发票 -->
  19. <template v-if="form.type == 2">
  20. <u-form-item label="申请主体" label-width="150" required prop="subject">
  21. <u-radio-group v-model="form.subject">
  22. <u-radio :key="index" name="2">
  23. 企业
  24. </u-radio>
  25. </u-radio-group>
  26. </u-form-item>
  27. <u-form-item label="发票抬头" label-width="150" required prop="invoiceTitle" >
  28. <u-input placeholder="请输入发票抬头" v-model="form.invoiceTitle" />
  29. </u-form-item>
  30. <u-form-item label="纳税登记号" label-width="150" required prop="taxRegistryNumber" >
  31. <u-input placeholder="请输入纳税登记号" v-model="form.taxRegistryNumber" />
  32. </u-form-item>
  33. <u-form-item label="单位地址" label-width="150" required prop="companyAddress" >
  34. <u-input placeholder="请输入单位地址" v-model="form.companyAddress" />
  35. </u-form-item>
  36. <u-form-item label="电话号码" label-width="150" required prop="phone" >
  37. <u-input placeholder="请输入电话号码" type="number" v-model="form.phone" />
  38. </u-form-item>
  39. <u-form-item label="开户银行" label-width="150" required prop="bankName" >
  40. <u-input placeholder="请输入开户银行" v-model="form.bankName" />
  41. </u-form-item>
  42. <u-form-item label="银行账号" label-width="150" required prop="bankAccount" >
  43. <u-input placeholder="请输入银行账号" type="number" v-model="form.bankAccount" />
  44. </u-form-item>
  45. <u-form-item label="收件地址" label-width="150" required prop="receivingAddress" >
  46. <u-input placeholder="请输入收件地址" v-model="form.receivingAddress" />
  47. </u-form-item>
  48. <u-form-item label="收件人" label-width="150" required prop="receivingName" >
  49. <u-input placeholder="请输入收件人" v-model="form.receivingName" />
  50. </u-form-item>
  51. <u-form-item label="收件手机" label-width="150" required prop="receivingTel" >
  52. <u-input placeholder="请输入收件手机" v-model="form.receivingTel" />
  53. </u-form-item>
  54. </template>
  55. <!-- 增值税发票 -->
  56. <!-- 普通发票 -->
  57. <template v-else>
  58. <u-form-item label="申请主体" label-width="150" required prop="subject">
  59. <u-radio-group v-model="form.subject">
  60. <u-radio v-for="(item, index) in mainList" :key="index" :name="item.value">
  61. {{ item.name }}
  62. </u-radio>
  63. </u-radio-group>
  64. </u-form-item>
  65. <u-form-item label="发票抬头" label-width="150" required prop="invoiceTitle" >
  66. <u-input placeholder="请输入发票抬头" v-model="form.invoiceTitle" />
  67. </u-form-item>
  68. <u-form-item v-if="form.subject == '2'" label="纳税登记号" label-width="150" required prop="taxRegistryNumber" >
  69. <u-input placeholder="请输入纳税登记号" v-model="form.taxRegistryNumber" />
  70. </u-form-item>
  71. </template>
  72. <!-- 普通发票 -->
  73. <u-form-item label="选择订单" label-width="150" required prop="orderGoodsIds" right-icon="arrow-right" ref="orderGoodsIds">
  74. <view class="form-item" @click="selectOrderModal = true">
  75. <u-input placeholder="请选择" disabled @click="selectOrderModal = true" v-model="form.orderGoodsIds" />
  76. </view>
  77. </u-form-item>
  78. <view>
  79. <view class="check-order" v-for="(item,index) in orderList" :key="index" v-if="item.disabled">
  80. <view class="close" @click="deleteOrder(index)">
  81. <u-icon name="close-circle-fill" color="#FF2D55" size="40"></u-icon>
  82. </view>
  83. <view class="title">商品名称:{{item.goodsName}}</view>
  84. <view class="number">订单编号:{{item.orderSn}}</view>
  85. <view class="price">价格:¥ {{item.goodsPrice}}</view>
  86. </view>
  87. </view>
  88. </u-form>
  89. </view>
  90. <view class="order-text">
  91. <view class="order-text__label">本次申请开票金额:</view>
  92. <view class="order-text__price">¥ {{toFixed(invoicePirce)}}</view>
  93. </view>
  94. <view class="submit" @click="formSubmit">
  95. 提交申请
  96. </view>
  97. </view>
  98. <view class="record" v-if="current == 1">
  99. <view class="nodata" v-if="!recordList.length">
  100. 您暂无相关发票记录哦~
  101. </view>
  102. <view class="record__list">
  103. <view class="record-item" @click="showDetailModal(record);" v-for="(record,index) in recordList" :key="index">
  104. <view class="item__time">2021/10/29 09:30:00</view>
  105. <view class="item__content">
  106. <view class="top">
  107. <view class="state" :class="{wait:record.periodStatus == 1,refuse:record.periodStatus == 2,agree:record.periodStatus == 3}">
  108. <text v-if="record.periodStatus == 1">待审核</text>
  109. <text v-if="record.periodStatus == 2">驳回</text>
  110. <text v-if="record.periodStatus == 3">通过</text>
  111. <u-icon class="arrow" name="arrow-right" color="#ffffff" size="28"></u-icon>
  112. </view>
  113. </view>
  114. <view class="bottom">
  115. <view class="flex">
  116. <view class="text">发票类型</view>
  117. <view class="flex__auto">
  118. <text v-if="record.type == 1">普通发票</text>
  119. <text v-if="record.type == 2">增值税专用发票</text>
  120. </view>
  121. </view>
  122. <view class="flex">
  123. <view class="text">申请主体</view>
  124. <view class="flex__auto">
  125. <text v-if="record.subject == 1">个人</text>
  126. <text v-if="record.subject == 2">企业</text>
  127. </view>
  128. </view>
  129. <view class="flex">
  130. <view class="text">发票状态</view>
  131. <view class="flex__auto">
  132. <text class="red" v-if="record.invoiceStatus == 1">未开票</text>
  133. <text class="green" v-if="record.invoiceStatus == 2">已开票</text>
  134. <text class="red" v-if="record.invoiceStatus == -1">已退票</text>
  135. </view>
  136. </view>
  137. <view @click.stop="showOrder(record.checked,index)">
  138. <view class="flex noborder" >
  139. <view class="text">开票订单</view>
  140. <view class="flex__auto">
  141. <text style="margin-right:10rpx;">{{record.orderList.length}}</text>
  142. <u-icon v-if="!record.checked" name="arrow-down" color="#ccc" size="28"></u-icon>
  143. <u-icon v-if="record.checked" name="arrow-up" color="#ccc" size="28"></u-icon>
  144. </view>
  145. </view>
  146. <view class="order-list" v-if="record.checked">
  147. <view class="order-item" :key="orderIndex" v-for="(orderItem,orderIndex) in record.orderList">{{orderIndex+1}}.{{orderItem.goodsName}}</view>
  148. </view>
  149. </view>
  150. </view>
  151. </view>
  152. </view>
  153. </view>
  154. </view>
  155. </view>
  156. <u-popup class="modal" v-model="selectOrderModal" mode="bottom" border-radius="24">
  157. <view class="select-order">
  158. <view class="line"></view>
  159. <view class="title">选择订单</view>
  160. <u-line color="#D6D6DB" />
  161. <view>
  162. <scroll-view scroll-y="true" style="height: 500rpx;">
  163. <view>
  164. <u-checkbox-group>
  165. <view v-for="(item, index) in orderList" :key="index" >
  166. <view class="order-item">
  167. <view>
  168. <u-checkbox
  169. :disabled="item.disabled"
  170. shape="circle"
  171. :name="item.name"
  172. v-model="item.checked"
  173. >
  174. <view class="order-item__bg" :class="item.checked?'active':''" >
  175. <view>
  176. <view class="order-title">{{item.goodsName}}</view>
  177. <view class="order-number">{{item.orderSn}}</view>
  178. <view class="order-price">¥ {{item.goodsPrice}}元</view>
  179. </view>
  180. </view>
  181. </u-checkbox >
  182. </view>
  183. </view>
  184. </view>
  185. </u-checkbox-group>
  186. </view>
  187. </scroll-view>
  188. </view>
  189. <view class="confrim-btn">
  190. <view class="okBtn" @click="okPopup()">确定</view>
  191. </view>
  192. </view>
  193. </u-popup>
  194. <u-popup class="modal" v-model="orderDetailModal" mode="center" border-radius="40">
  195. <view class="order-detail">
  196. <view class="order-detail__content">
  197. <scroll-view scroll-y="true" style="height: 860rpx;">
  198. <view class="content">
  199. <view class="header">2021年10月29日 09:30:00</view>
  200. <view class="body">
  201. <view class="body__item">
  202. <view class="title">发票申请信息</view>
  203. <view class="content">
  204. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  205. <view slot="title">发票类型:</view>
  206. <text v-if="invoiceDetail.type == 1">普通发票</text>
  207. <text v-if="invoiceDetail.type == 2">增值税专用发票</text>
  208. </u-cell-item>
  209. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  210. <view slot="title">申请主体:</view>
  211. <text v-if="invoiceDetail.subject == 1">个人</text>
  212. <text v-if="invoiceDetail.subject == 2">企业</text>
  213. </u-cell-item>
  214. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  215. <view slot="title">发票抬头:</view>
  216. <text>{{invoiceDetail.invoiceTitle}}</text>
  217. </u-cell-item>
  218. <template v-if="invoiceDetail.type == 2">
  219. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  220. <view slot="title">纳税登记号:</view>
  221. <text>{{invoiceDetail.taxRegistryNumber || ''}}</text>
  222. </u-cell-item>
  223. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  224. <view slot="title">单位地址:</view>
  225. <text>{{invoiceDetail.companyAddress || ''}}</text>
  226. </u-cell-item>
  227. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  228. <view slot="title">电话号码:</view>
  229. <text>{{invoiceDetail.phone || ''}}</text>
  230. </u-cell-item>
  231. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  232. <view slot="title">开户银行:</view>
  233. <text>{{invoiceDetail.bankName || ''}}</text>
  234. </u-cell-item>
  235. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  236. <view slot="title">银行账号:</view>
  237. <text>{{invoiceDetail.bankAccount || ''}}</text>
  238. </u-cell-item>
  239. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  240. <view slot="title">收件地址:</view>
  241. <text>{{invoiceDetail.receivingAddress || ''}}</text>
  242. </u-cell-item>
  243. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  244. <view slot="title">收件人:</view>
  245. <text>{{invoiceDetail.receivingName || ''}}</text>
  246. </u-cell-item>
  247. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false" >
  248. <view slot="title">收件手机:</view>
  249. <text>{{invoiceDetail.receivingTel || ''}}</text>
  250. </u-cell-item>
  251. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false" >
  252. <view slot="title">开票订单:</view>
  253. </u-cell-item>
  254. </template>
  255. <view class="order-list">
  256. <view class="order-item" :key="orderIndex" v-for="(orderItem,orderIndex) in invoiceDetail.orderList">
  257. <view class="order-title">{{orderItem.goodsName}}</view>
  258. <view class="order-number">{{orderItem.orderSn}}</view>
  259. <view class="order-price">¥ {{orderItem.goodsRealPrice}}元</view>
  260. </view>
  261. </view>
  262. <view class="order-text">
  263. <view class="order-text__label">本次申请开票金额:</view>
  264. <view class="order-text__price">¥ {{toFixed(invoiceDetail.amount)}}</view>
  265. </view>
  266. </view>
  267. </view>
  268. <view class="body__item">
  269. <view class="title">发票申请结果</view>
  270. <view class="content">
  271. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  272. <view slot="title">审核结果:</view>
  273. <text class="text wait" v-if="invoiceDetail.periodStatus == 1">待审核</text>
  274. <text class="text agree" v-if="invoiceDetail.periodStatus == 3">通过</text>
  275. <text class="text refuse" v-if="invoiceDetail.periodStatus == 2">驳回</text>
  276. </u-cell-item>
  277. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  278. <view slot="title">审核反馈:</view>
  279. <text class="text">{{invoiceDetail.periodReason||''}}</text>
  280. </u-cell-item>
  281. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
  282. <view slot="title">发票状态:</view>
  283. <text class="text refuse" v-if="invoiceDetail.invoiceStatus == 1">未开票</text>
  284. <text class="text agree" v-if="invoiceDetail.invoiceStatus == 2">已开票</text>
  285. <text class="text refuse" v-if="invoiceDetail.invoiceStatus == -1">已退票</text>
  286. </u-cell-item>
  287. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false" v-if="invoiceDetail.invoiceImg">
  288. <view slot="title">发票预览:</view>
  289. <view>
  290. <image class="preview" @click="previewImg(invoiceDetail)" :src="$method.splitImgHost(invoiceDetail.invoiceImg)"></image>
  291. <view class="download-btn" @click="download(invoiceDetail)">下载电子发票</view>
  292. </view>
  293. </u-cell-item>
  294. <u-cell-item :border-bottom="false" hover-class="none" :arrow="false" v-if="invoiceDetail.periodStatus == 3 && invoiceDetail.invoiceStatus == 2 && invoiceDetail.type == 2 && invoiceDetail.subject == 2">
  295. <view slot="title">机构发票邮寄状态:</view>
  296. <text class="text" v-if="invoiceDetail.sendInvoice == 1">是</text>
  297. <text class="text" v-else>否</text>
  298. </u-cell-item>
  299. <u-cell-item v-if="invoiceDetail.periodStatus == 3 && invoiceDetail.invoiceStatus == 2 && invoiceDetail.sendInvoice == 1 && invoiceDetail.type == 2 && invoiceDetail.subject == 2" @click.stop="copy(invoiceDetail.trackingNum)" :border-bottom="false" hover-class="none" :arrow="false">
  300. <view slot="title">发票邮寄快递单号:(点击可复制)</view>
  301. <text class="text">{{invoiceDetail.trackingNum}}</text>
  302. </u-cell-item>
  303. </view>
  304. </view>
  305. </view>
  306. </view>
  307. </scroll-view>
  308. </view>
  309. <view class="order-detail__btns" v-if="invoiceDetail.periodStatus == 1">
  310. <view class="btn" @click="orderDetailModal = false;">知道了</view>
  311. <view class="btn warm" @click="orderCancelModal = true;">撤销申请</view>
  312. </view>
  313. <view class="order-detail__btns" v-else>
  314. <view class="btn ok" @click="orderDetailModal = false;">知道了</view>
  315. </view>
  316. </view>
  317. </u-popup>
  318. <u-popup class="modal" v-model="orderCancelModal" mode="center" border-radius="24">
  319. <view class="order-cancel">
  320. <view class="header">
  321. 温馨提示
  322. </view>
  323. <view class="body">
  324. <view>撤销申请后,</view>
  325. <view>本次的发票申请内容将不存在。</view>
  326. <view>请慎重考虑。 </view>
  327. <view>您确定要取消本次发票申请吗?</view>
  328. </view>
  329. <view class="footer">
  330. <view class="btn cancel" @click="orderCancelModal = false;">取消</view>
  331. <view class="btn ok" @click="orderCancel()">确定</view>
  332. </view>
  333. </view>
  334. </u-popup>
  335. </view>
  336. </template>
  337. <script>
  338. import { mapGetters } from 'vuex';
  339. export default {
  340. components: {},
  341. data() {
  342. return {
  343. checkOrderList:[],
  344. recordList:[],
  345. list: [
  346. {
  347. name: '发票申请'
  348. },
  349. {
  350. name: '发票记录'
  351. }
  352. ],
  353. invoiceDetail:{
  354. amount:0
  355. },
  356. form:{
  357. type:'1',
  358. subject:'1',
  359. invoiceTitle:'',
  360. orderGoodsIds:'',
  361. taxRegistryNumber:'',
  362. companyAddress:'',
  363. phone:'',
  364. bankName:'',
  365. bankAccount:'',
  366. receivingAddress:'',
  367. receivingName:'',
  368. receivingTel:'',
  369. },
  370. rules: {
  371. receivingTel: [
  372. {
  373. required: true,
  374. message: '请输入收件手机',
  375. // 可以单个或者同时写两个触发验证方式
  376. trigger: ['change'],
  377. },
  378. {
  379. validator: (rule, value, callback) => {
  380. // 上面有说,返回true表示校验通过,返回false表示不通过
  381. // this.$u.test.mobile()就是返回true或者false的
  382. return this.$u.test.mobile(value);
  383. },
  384. message: '手机号码格式不正确',
  385. // 触发器可以同时用blur和change
  386. trigger: ['change'],
  387. }
  388. ],
  389. type: [
  390. {
  391. required: true,
  392. message: '请选择发票类型',
  393. // 可以单个或者同时写两个触发验证方式
  394. trigger: ['change'],
  395. }
  396. ],
  397. subject: [
  398. {
  399. required: true,
  400. message: '请选择申请主体',
  401. // 可以单个或者同时写两个触发验证方式
  402. trigger: ['change'],
  403. }
  404. ],
  405. invoiceTitle: [
  406. {
  407. required: true,
  408. message: '请输入发票抬头',
  409. // 可以单个或者同时写两个触发验证方式
  410. trigger: ['change'],
  411. }
  412. ],
  413. taxRegistryNumber: [
  414. {
  415. required: true,
  416. message: '请输入纳税登记号',
  417. // 可以单个或者同时写两个触发验证方式
  418. trigger: ['change'],
  419. }
  420. ],
  421. companyAddress: [
  422. {
  423. required: true,
  424. message: '请输入单位地址',
  425. // 可以单个或者同时写两个触发验证方式
  426. trigger: ['change'],
  427. }
  428. ],
  429. phone: [
  430. {
  431. required: true,
  432. message: '请输入电话号码',
  433. // 可以单个或者同时写两个触发验证方式
  434. trigger: ['change'],
  435. }
  436. ],
  437. bankName: [
  438. {
  439. required: true,
  440. message: '请输入开户银行',
  441. // 可以单个或者同时写两个触发验证方式
  442. trigger: ['change'],
  443. }
  444. ],
  445. bankAccount: [
  446. {
  447. required: true,
  448. message: '请输入银行账号',
  449. // 可以单个或者同时写两个触发验证方式
  450. trigger: ['change'],
  451. }
  452. ],
  453. receivingAddress: [
  454. {
  455. required: true,
  456. message: '请输入收件地址',
  457. // 可以单个或者同时写两个触发验证方式
  458. trigger: ['change'],
  459. }
  460. ],
  461. receivingName: [
  462. {
  463. required: true,
  464. message: '请输入收件人',
  465. // 可以单个或者同时写两个触发验证方式
  466. trigger: ['change'],
  467. }
  468. ],
  469. orderGoodsIds: [
  470. {
  471. required: true,
  472. message: '请选择订单',
  473. // 可以单个或者同时写两个触发验证方式
  474. trigger: ['change'],
  475. }
  476. ],
  477. },
  478. orderValue:'',
  479. orderList:[],
  480. selectOrderModal:false,
  481. orderDetailModal:false,
  482. orderCancelModal:false,
  483. current: 0,
  484. invoicePirce:0,
  485. order: [],
  486. typeList:[{
  487. name:'普通发票',
  488. value:'1'
  489. },{
  490. name:'增值税专用发票',
  491. value:'2'
  492. }],
  493. mainList:[{
  494. name:'个人',
  495. value:'1'
  496. },{
  497. name:'企业',
  498. value:'2'
  499. }]
  500. };
  501. },
  502. // onPullDownRefresh() {},
  503. onLoad(option) {
  504. this.orderInvoiceCanInvoiceList();
  505. this.$refs.uForm.setRules(this.rules)
  506. },
  507. onShow() {
  508. },
  509. methods: {
  510. orderCancel() {
  511. let invoiceDetail = JSON.parse(JSON.stringify(this.invoiceDetail))
  512. invoiceDetail.status = -1;
  513. this.$api.orderInvoiceCancel(invoiceDetail).then(res => {
  514. if(res.data.code == 200) {
  515. this.orderInvoiceList();
  516. this.orderInvoiceCanInvoiceList();
  517. this.orderDetailModal = false;
  518. this.orderCancelModal = false;
  519. uni.showToast({
  520. title:'撤销成功',
  521. icon:'none'
  522. })
  523. } else {
  524. }
  525. })
  526. },
  527. showDetailModal(item) {
  528. this.orderDetailModal = true;
  529. this.invoiceDetail = item;
  530. },
  531. toFixed(number) {
  532. console.log(number.toFixed(2))
  533. return number.toFixed(2)
  534. },
  535. /**
  536. * 获取可开发票的订单
  537. */
  538. orderInvoiceCanInvoiceList() {
  539. this.$api.orderInvoiceCanInvoiceList().then(res => {
  540. if(res.data.code == 200) {
  541. res.data.rows.forEach(item => {
  542. item.checked = false;
  543. })
  544. this.orderList = res.data.rows;
  545. }
  546. })
  547. },
  548. /**
  549. * @param {Object} checkedState 显示状态
  550. * @param {Object} index 索引值
  551. * 修改开票订单列表显示状态
  552. */
  553. showOrder(showState,index) {
  554. this.$set(this.recordList[index],'checked',!showState)
  555. },
  556. /**
  557. * 发票申请提交
  558. */
  559. formSubmit() {
  560. this.$refs.uForm.validate(valid => {
  561. if(valid) {
  562. if(this.invoicePirce > 10000) {
  563. uni.showModal({
  564. title:'提示',
  565. content:'您所选的订单总开票金额,大于10000元,超出单张发票的开票额度,请修改开票订单',
  566. showCancel:false,
  567. })
  568. return
  569. }
  570. let data = JSON.parse(JSON.stringify(this.form));
  571. data.orderGoodsIds = data.orderGoodsIds.split(',')
  572. data.amount = this.invoicePirce;
  573. if(data.subject == '1') {
  574. data.taxRegistryNumber = '';
  575. data.companyAddress = '';
  576. data.phone = '';
  577. data.bankName = '';
  578. data.bankAccount = '';
  579. data.receivingAddress = '';
  580. data.receivingName = '';
  581. data.receivingTel = '';
  582. }
  583. this.$api.orderInvoice(data).then(res => {
  584. if(res.data.code == 200) {
  585. this.orderInvoiceCanInvoiceList();
  586. this.form = {
  587. type:'1',
  588. subject:'1',
  589. invoiceTitle:'',
  590. orderGoodsIds:'',
  591. taxRegistryNumber:'',
  592. companyAddress:'',
  593. phone:'',
  594. bankName:'',
  595. bankAccount:'',
  596. receivingAddress:'',
  597. receivingName:'',
  598. receivingTel:'',
  599. };
  600. this.invoicePirce = 0;
  601. uni.showToast({
  602. title:'申请成功'
  603. })
  604. } else {
  605. uni.showToast({
  606. icon:'none',
  607. title:res.data.msg
  608. })
  609. }
  610. })
  611. }
  612. })
  613. },
  614. /**
  615. * @param {Object} e value
  616. * 发票类型修改
  617. */
  618. formTypeChange(e) {
  619. console.log(e)
  620. if(e == '2') {
  621. this.$set(this.form,'subject','2')
  622. } else {
  623. }
  624. },
  625. /**
  626. * @param {Object} e
  627. * tabs 切换
  628. */
  629. change(e) {
  630. console.log(e)
  631. this.current = e;
  632. if(this.current == 1) {
  633. this.orderInvoiceList();
  634. }
  635. },
  636. orderInvoiceList() {
  637. this.$api.orderInvoiceList().then(res => {
  638. if(res.data.code == 200) {
  639. this.recordList = res.data.rows
  640. } else {
  641. uni.showToast({
  642. icon:'none',
  643. title:res.data.msg
  644. })
  645. }
  646. })
  647. },
  648. radioGroupChange(e) {
  649. console.log(e)
  650. },
  651. copy(str) {
  652. let newStr = String(str)
  653. uni.setClipboardData({
  654. data: newStr,
  655. success: function () {
  656. console.log('success');
  657. }
  658. });
  659. },
  660. okPopup() {
  661. this.selectOrderModal = false;
  662. let strArr = [];
  663. this.invoicePirce = 0;
  664. this.orderList.forEach((item,index) => {
  665. if(item.checked) {
  666. this.$set(this.orderList[index],'disabled',true)
  667. strArr.push(item.orderGoodsId)
  668. this.invoicePirce += item.goodsPrice
  669. }
  670. })
  671. this.form.orderGoodsIds = strArr.join(',')
  672. this.$nextTick(() => {
  673. this.$refs.orderGoodsIds.onFieldChange()
  674. })
  675. console.log(this.$refs.orderGoodsIds)
  676. },
  677. deleteOrder(index) {
  678. this.$set(this.orderList[index],'disabled',false)
  679. this.$set(this.orderList[index],'checked',false)
  680. let strArr = [];
  681. this.invoicePirce = 0;
  682. this.orderList.forEach((item,index) => {
  683. if(item.checked) {
  684. strArr.push(item.orderGoodsId)
  685. this.invoicePirce += item.goodsPrice
  686. }
  687. })
  688. this.form.orderGoodsIds = strArr.join(',')
  689. this.$nextTick(() => {
  690. this.$refs.orderGoodsIds.onFieldChange()
  691. })
  692. },
  693. previewImg(item) {
  694. // 预览图片
  695. uni.previewImage({
  696. urls: [this.$method.splitImgHost(item.invoiceImg,true,1000)],
  697. longPressActions: {
  698. itemList: ['发送给朋友', '保存图片', '收藏'],
  699. success: function(data) {
  700. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  701. },
  702. fail: function(err) {
  703. console.log(err.errMsg);
  704. }
  705. }
  706. });
  707. },
  708. download(item) {
  709. //获取相册授权
  710. uni.getSetting({
  711. success:(res) => {
  712. if (!res.authSetting['scope.writePhotosAlbum']) {
  713. uni.authorize({
  714. scope: 'scope.writePhotosAlbum',
  715. success() {
  716. //这里是用户同意授权后的回调
  717. this.saveImgToLocal(item);
  718. },
  719. fail() {//这里是用户拒绝授权后的回调
  720. }
  721. })
  722. } else {//用户已经授权过了
  723. this.saveImgToLocal(item);
  724. }
  725. }
  726. })
  727. },
  728. saveImgToLocal(item){
  729. uni.showModal({
  730. title: '提示',
  731. content: '确定保存到相册吗',
  732. success: (res) => {
  733. if (res.confirm) {
  734. uni.downloadFile({
  735. url: this.$method.splitImgHost(item.invoiceImg,true,1000),//图片地址
  736. success: (res) =>{
  737. if (res.statusCode === 200){
  738. uni.saveImageToPhotosAlbum({
  739. filePath: res.tempFilePath,
  740. success: function() {
  741. uni.showToast({
  742. title: "保存成功",
  743. icon: "none"
  744. });
  745. },
  746. fail: function() {
  747. uni.showToast({
  748. title: "保存失败",
  749. icon: "none"
  750. });
  751. }
  752. });
  753. }
  754. }
  755. })
  756. } else if (res.cancel) {
  757. }
  758. }
  759. });
  760. }
  761. },
  762. computed: { ...mapGetters(['userInfo']) }
  763. };
  764. </script>
  765. <style>
  766. page {
  767. background: #eaeef1;
  768. }
  769. </style>
  770. <style scoped lang="scss">
  771. .invoice {
  772. &__tabs {
  773. width: 100%;
  774. text-align: center;
  775. position: fixed;
  776. height: 96rpx;
  777. z-index: 999;
  778. }
  779. &__content {
  780. padding-top:96rpx;
  781. .open {
  782. padding-bottom:150rpx;
  783. margin:8rpx 24rpx 0;
  784. .form {
  785. padding:24rpx;
  786. width: 702rpx;
  787. background: #FFFFFF;
  788. border-radius: 24rpx;
  789. // /deep/ .u-input__input {
  790. // text-align: right;
  791. // }
  792. .form-item {
  793. height:78rpx;
  794. display: flex;
  795. align-items: center;
  796. .text {
  797. font-size: 28rpx;
  798. width:120rpx;
  799. // color: #999999;
  800. }
  801. .content {
  802. flex:1;
  803. text-align: left;
  804. color:#bbb;
  805. }
  806. }
  807. .check-order {
  808. margin-top:20rpx;
  809. width: 654rpx;
  810. height: 168rpx;
  811. background: #F5F5F5;
  812. border: 2px solid #F5F5F5;
  813. padding:20rpx;
  814. position:relative;
  815. .close {
  816. position:absolute;
  817. right:0;
  818. top:0;
  819. }
  820. .title,.number,.price {
  821. color:#333333;
  822. margin-top:10rpx;
  823. line-height: 30rpx;
  824. font-size: 30rpx;
  825. }
  826. .number {
  827. color:#999;
  828. }
  829. }
  830. }
  831. .order-text {
  832. margin-top:16rpx;
  833. padding:0 30rpx;
  834. width: 702rpx;
  835. height: 80rpx;
  836. background: #FFFFFF;
  837. border-radius: 24rpx;
  838. display: flex;
  839. align-items: center;
  840. &__label {
  841. font-size: 24rpx;
  842. }
  843. &__price {
  844. font-size: 30rpx;
  845. margin-left:20rpx;
  846. color:#FF2D55;
  847. }
  848. }
  849. .submit {
  850. text-align: center;
  851. line-height: 80rpx;
  852. color:#fff;
  853. font-size: 30rpx;
  854. width: 526rpx;
  855. height: 80rpx;
  856. background: #007AFF;
  857. box-shadow: 0rpx 8rpx 7rpx 1rpx rgba(0, 122, 255, 0.1);
  858. border-radius: 40rpx;
  859. position:fixed;
  860. left:50%;
  861. bottom:40rpx;
  862. z-index: 999;
  863. transform: translateX(-50%);
  864. }
  865. }
  866. .record {
  867. .nodata {
  868. padding-top:160rpx;
  869. font-size: 32rpx;
  870. text-align: center;
  871. color: #999999;
  872. }
  873. &__list {
  874. .record-item {
  875. margin:0 8rpx 10rpx;
  876. .item__time {
  877. padding:20rpx 0;
  878. text-align: center;
  879. font-size: 24rpx;
  880. color: #999999;
  881. }
  882. .item__content {
  883. background:#fff;
  884. border-radius: 16rpx;
  885. .top {
  886. padding:12rpx 0;
  887. border-bottom:1px solid #EEEEEE;
  888. .state {
  889. position:relative;
  890. text-align: center;
  891. color:#fff;
  892. font-size: 30rpx;
  893. margin:0 auto;
  894. width: 240rpx;
  895. height: 56rpx;
  896. line-height: 56rpx;
  897. background: #007AFF;
  898. border-radius: 28rpx;
  899. &.wait {
  900. background: #007AFF;
  901. }
  902. &.refuse {
  903. background: #FF3B30;
  904. }
  905. &.agree {
  906. background: #34C759;
  907. }
  908. .arrow {
  909. position:absolute;
  910. top:50%;
  911. transform: translateY(-50%);
  912. right:18rpx;
  913. }
  914. }
  915. }
  916. .bottom {
  917. padding:0 32rpx;
  918. .flex {
  919. height:80rpx;
  920. display: flex;
  921. align-items: center;
  922. border-bottom:1px solid #EEEEEE;
  923. &.noborder{
  924. border:0;
  925. }
  926. .text {
  927. font-size: 24rpx;
  928. color: #666666;
  929. }
  930. &__auto {
  931. text-align: right;
  932. flex:1;
  933. font-size: 30rpx;
  934. font-weight: bold;
  935. color: #666666;
  936. .red {
  937. color:#FF3B30;
  938. }
  939. .green {
  940. color:#34C759;
  941. }
  942. }
  943. }
  944. .order-list {
  945. padding-bottom:30rpx;
  946. .order-item {
  947. border-radius: 16rpx;
  948. padding:14rpx;
  949. background:#F5F5F5;
  950. font-size: 30rpx;
  951. color:#333;
  952. margin-top:16rpx;
  953. }
  954. }
  955. }
  956. }
  957. }
  958. }
  959. }
  960. }
  961. .modal {
  962. .select-order {
  963. .line {
  964. width: 80rpx;
  965. height: 8rpx;
  966. background: #999999;
  967. border-radius: 4rpx;
  968. margin:8rpx auto 0;
  969. }
  970. .title {
  971. margin:20rpx 0 15rpx;
  972. text-align: center;
  973. font-size: 24rpx;
  974. color: #999999;
  975. }
  976. .order-item {
  977. display: flex;
  978. align-items: center;
  979. padding: 20rpx;
  980. &__bg {
  981. width: 654rpx;
  982. height: 168rpx;
  983. background: #F5F5F5;
  984. border: 2px solid #F5F5F5;
  985. border-radius: 16rpx;
  986. padding:20rpx;
  987. &.active {
  988. background: #EBF5FF;
  989. border: 2px solid #007AFF;
  990. }
  991. .order-title,.order-number,.order-price {
  992. color:#333333;
  993. margin-top:10rpx;
  994. line-height: 30rpx;
  995. font-size: 30rpx;
  996. }
  997. .order-number {
  998. color:#999;
  999. }
  1000. }
  1001. }
  1002. .confrim-btn {
  1003. width: 750rpx;
  1004. height: 98rpx;
  1005. background: rgba(255, 255, 255, 0.98);
  1006. display: flex;
  1007. align-items: center;
  1008. justify-content: center;
  1009. .okBtn {
  1010. text-align: center;
  1011. line-height: 64rpx;
  1012. color:#fff;
  1013. font-size: 30rpx;
  1014. width: 200rpx;
  1015. height: 64rpx;
  1016. background: linear-gradient(0deg, #015EEA, #00C0FA);
  1017. border-radius: 32rpx;
  1018. }
  1019. }
  1020. }
  1021. .order-detail {
  1022. width: 640rpx;
  1023. height: 1000rpx;
  1024. background: #FFFFFF;
  1025. display: flex;
  1026. flex-direction: column;
  1027. &__content {
  1028. flex:1;
  1029. .content {
  1030. padding:24rpx 24rpx 0;
  1031. /deep/ .u-cell {
  1032. padding:10rpx;
  1033. &_title {
  1034. color:#999;
  1035. }
  1036. &__value {
  1037. color:#333;
  1038. text-align: left;
  1039. }
  1040. .text {
  1041. &.wait {
  1042. color:#007AFF;
  1043. }
  1044. &.agree {
  1045. color:#34C759;
  1046. }
  1047. &.refuse {
  1048. color:#FF3B30;
  1049. }
  1050. }
  1051. .preview {
  1052. width:240rpx;
  1053. height:160rpx;
  1054. }
  1055. .download-btn {
  1056. margin:10rpx 0 0;
  1057. text-align: center;
  1058. line-height: 56rpx;
  1059. color:#fff;
  1060. font-size: 30rpx;
  1061. width: 224rpx;
  1062. height: 56rpx;
  1063. background: #007AFF;
  1064. border-radius: 16rpx;
  1065. }
  1066. }
  1067. .header {
  1068. font-size: 30rpx;
  1069. font-weight: bold;
  1070. color: #333333;
  1071. line-height: 48rpx;
  1072. }
  1073. .body {
  1074. &__item {
  1075. border-bottom:1px solid #EEEEEE;
  1076. padding-bottom:30rpx;
  1077. &:last-child {
  1078. border:0;
  1079. }
  1080. .title {
  1081. margin-top:30rpx;
  1082. font-size: 24rpx;
  1083. color: #007AFF;
  1084. line-height: 48rpx;
  1085. &::before {
  1086. content:'';
  1087. width: 4rpx;
  1088. height: 24rpx;
  1089. background: #007AFF;
  1090. border-radius: 2rpx;
  1091. display: inline-block;
  1092. margin-right:10rpx;
  1093. }
  1094. }
  1095. .order-list {
  1096. .order-item {
  1097. overflow: hidden;
  1098. border-radius: 16rpx;
  1099. padding:0 14rpx 14rpx;
  1100. background:#F5F5F5;
  1101. font-size: 30rpx;
  1102. color:#333;
  1103. margin-top:16rpx;
  1104. .order-title,.order-number,.order-price {
  1105. color:#333333;
  1106. margin-top:20rpx;
  1107. line-height: 26rpx;
  1108. font-size: 26rpx;
  1109. }
  1110. .order-number {
  1111. color:#999;
  1112. }
  1113. }
  1114. }
  1115. .order-text {
  1116. margin-top:16rpx;
  1117. padding:0 30rpx;
  1118. height: 80rpx;
  1119. background: #F5F5F5;
  1120. border-radius: 16rpx;
  1121. display: flex;
  1122. align-items: center;
  1123. &__label {
  1124. font-size: 24rpx;
  1125. color:#999999;
  1126. }
  1127. &__price {
  1128. font-size: 30rpx;
  1129. margin-left:20rpx;
  1130. color:#FF2D55;
  1131. }
  1132. }
  1133. }
  1134. }
  1135. }
  1136. }
  1137. &__btns {
  1138. border-top:1px solid #EEEEEE;
  1139. padding:0 24rpx;
  1140. width: 100%;
  1141. height: 140rpx;
  1142. background: #FFFFFF;
  1143. display: flex;
  1144. justify-content: center;
  1145. align-items: center;
  1146. .btn {
  1147. text-align: center;
  1148. width: 200rpx;
  1149. height: 80rpx;
  1150. line-height: 80rpx;
  1151. background: #F5F5F5;
  1152. border-radius: 40rpx;
  1153. color:#007AFF;
  1154. font-size: 30rpx;
  1155. margin:0 10rpx;
  1156. &.warm {
  1157. background: #FF3B30;
  1158. color:#fff;
  1159. }
  1160. &.ok {
  1161. color:#fff;
  1162. width: 526rpx;
  1163. height: 80rpx;
  1164. background: #007AFF;
  1165. border-radius: 40rpx;
  1166. }
  1167. }
  1168. }
  1169. }
  1170. .order-cancel {
  1171. width: 640rpx;
  1172. height: 439rpx;
  1173. background: #FFFFFF;
  1174. padding:40rpx;
  1175. .header {
  1176. text-align: center;
  1177. font-size: 30rpx;
  1178. font-weight: bold;
  1179. color: #333333;
  1180. line-height: 48rpx;
  1181. }
  1182. .body {
  1183. margin-top:40rpx;
  1184. view {
  1185. font-size: 30rpx;
  1186. color: #666666;
  1187. line-height: 48rpx;
  1188. }
  1189. }
  1190. .footer {
  1191. margin-top:40rpx;
  1192. display: flex;
  1193. align-items: center;
  1194. justify-content: center;
  1195. .btn {
  1196. text-align: center;
  1197. line-height: 80rpx;
  1198. font-size: 30rpx;
  1199. color:#007AFF;
  1200. width: 200rpx;
  1201. height: 80rpx;
  1202. background: #F5F5F5;
  1203. border-radius: 40rpx;
  1204. margin:0 10rpx;
  1205. &.ok {
  1206. color:#fff;
  1207. background: #007AFF;
  1208. }
  1209. }
  1210. }
  1211. }
  1212. }
  1213. }
  1214. </style>