您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

invoice-content.vue 9.4KB

1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. <template>
  2. <view class="contentAll">
  3. <view class="titleOne">
  4. <text @click="invoiceRecord">开票记录</text>
  5. <text class="line">|</text>
  6. <text @click="$util.navTo(`/subpackage/orders/invoiceApply/invoice-header-list?manage=1`,true)">管理抬头</text>
  7. </view>
  8. <view class="twoOne" v-if="state.type==1">
  9. <view class="item last">
  10. <text>开票状态:</text>
  11. <uni-data-select v-model="state.businessTypeValOne" :localdata="state.businessRangeOne"
  12. @change="changeBusinessOne"></uni-data-select>
  13. </view>
  14. <button size="mini" style="color: #ffffff;
  15. backgroundColor: rgb(118, 200, 77);
  16. borderColor: rgb(118, 200, 77);
  17. font-size: 26rpx;
  18. flex-shrink: 0;margin-left: 20rpx;" @click="searchOne()">查询</button>
  19. </view>
  20. <view class="two" v-if="state.type==2">
  21. <view class="input">
  22. ETC卡号:<input placeholder="请输入ETC卡号" v-model="state.etcCardNo" />
  23. </view>
  24. <view class="three">
  25. <view class="item last">
  26. <text>开票状态:</text>
  27. <uni-data-select v-model="state.businessTypeVal" :localdata="state.businessRange"
  28. @change="changeBusiness"></uni-data-select>
  29. </view>
  30. <button size="mini" style="color: #ffffff;
  31. backgroundColor: rgb(118, 200, 77);
  32. borderColor: rgb(118, 200, 77);
  33. font-size: 26rpx;
  34. flex-shrink: 0;margin-left: 20rpx;" @click="searchTwo">查询</button>
  35. </view>
  36. </view>
  37. <view>
  38. <view class="cardbox">
  39. <view class="card" v-for="(item,i) in state.data" :key="i">
  40. <view>
  41. <checkbox-group @change="checkboxChange">
  42. <checkbox :value="item.orderNo" :checked="state.checked" style="transform:scale(0.7)" />
  43. </checkbox-group>
  44. </view>
  45. <view class="content">
  46. <view class="title">订单号:{{item.orderNo}}</view>
  47. <view class="title">订单时间:{{item.orderTime}}</view>
  48. <view class="title">车牌号:{{item.vehiclePlate}}</view>
  49. <view class="title">订单金额:¥{{item.invoiceAmount}}</view>
  50. <view class="title">开票状态:{{item.status==1?'已开票':"可开票"}}</view>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="bottom-line" v-if="state.flags">我是有底线的~~~</view>
  57. <view class="apply-wrap">
  58. <view>
  59. <checkbox-group @change="checkboxAll">
  60. <checkbox value="ALL" style="transform:scale(0.7)" :checked="state.checkedAll" />全选
  61. </checkbox-group>
  62. </view>
  63. <view class="apply" @click="apply">去申请</view>
  64. </view>
  65. </template>
  66. <script lang="ts" setup>
  67. import {
  68. navTo, msg
  69. } from "@/utils/utils";
  70. import { reactive, ref } from "vue";
  71. import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
  72. import { queryEtcOrderApi, getUserMsg, trafficFlowApi } from "@/utils/network/api.js";
  73. import { stringToJson } from "@/utils/network/encryption";
  74. import { request } from "@/utils/network/request.js";
  75. import {
  76. getItem
  77. } from "@/utils/storage";
  78. const state = reactive({
  79. type: 1, //1 ETC产品订单 2通行流水服务费订单
  80. userMobile: "",
  81. data: [],
  82. businessTypeValOne: 9,
  83. businessRangeOne: [{
  84. 'value': 9,
  85. 'text': '可开票'
  86. }, {
  87. 'value': 1,
  88. 'text': '已开票'
  89. }],
  90. businessTypeVal: 9,
  91. businessRange: [{
  92. 'value': 9,
  93. 'text': '可开票'
  94. }, {
  95. 'value': 1,
  96. 'text': '已开票'
  97. }, {
  98. 'value': 2,
  99. 'text': '已开纸质票'
  100. }],
  101. etcCardNo: "",
  102. pageSize: 10, //每页数据量
  103. pageNo: 1, // 当前页
  104. ordersArr: [],
  105. checked: false,
  106. checkedAll: false,
  107. flags: false
  108. })
  109. onLoad((option) => {
  110. state.type = option.type
  111. getUserinfo()
  112. })
  113. // onShow(() => {
  114. // if (state.type == 1) {
  115. // etcOrder(1)
  116. // }
  117. // })
  118. const value = ref('')
  119. const getUserinfo = () => {
  120. const options = {
  121. type: 2,
  122. data: {
  123. openId: getItem('openId'),
  124. },
  125. method: "POST",
  126. showLoading: true,
  127. };
  128. request(getUserMsg, options).then((res) => {
  129. const data = stringToJson(res.bizContent);
  130. console.log(data, "用户信息");
  131. state.userMobile = data.customerTel
  132. if (state.type == 1) {
  133. etcOrder(1)
  134. }
  135. });
  136. }
  137. const etcOrder = (val) => {
  138. if (val == 1) {
  139. state.pageNo = 1
  140. }
  141. if (state.pageNo == 1 && state.data.length > 0) {
  142. state.data = []
  143. }
  144. const options = {
  145. type: 2,
  146. data: {
  147. userMobile: state.userMobile,
  148. page: state.pageNo,
  149. pageSize: state.pageSize,
  150. status: state.businessTypeValOne
  151. },
  152. method: "POST",
  153. showLoading: true,
  154. };
  155. request(queryEtcOrderApi, options).then((res) => {
  156. const data = stringToJson(res.bizContent);
  157. state.data = data.orders
  158. console.log(data, "查询ETC产品订单");
  159. });
  160. }
  161. const trafficFlow = (val) => {
  162. if (val == 1) {
  163. state.pageNo = 1
  164. }
  165. if (state.pageNo == 1 && state.data.length > 0) {
  166. state.data = []
  167. }
  168. const options = {
  169. type: 2,
  170. data: {
  171. etcCardNo: state.etcCardNo,
  172. userMobile: state.userMobile,
  173. pageNumber: state.pageNo,
  174. page: state.pageSize,
  175. status: state.businessTypeVal
  176. },
  177. method: "POST",
  178. showLoading: true,
  179. };
  180. request(trafficFlowApi, options).then((res) => {
  181. const data = stringToJson(res.bizContent);
  182. state.data = data.orders
  183. console.log(data, "通行");
  184. });
  185. }
  186. const changeBusiness = (e) => {
  187. state.businessTypeVal = e
  188. console.log(e)
  189. }
  190. const changeBusinessOne = (e) => {
  191. state.businessTypeValOne = e
  192. console.log(e)
  193. }
  194. const apply = () => {
  195. let newArr = []
  196. for (var i = 0; i < state.ordersArr.length; i++) {
  197. for (var k = 0; k < state.data.length; k++) {
  198. if (state.ordersArr[i] == state.data[k]['orderNo']) {
  199. newArr.push(state.data[k])
  200. }
  201. }
  202. }
  203. const params = encodeURIComponent(JSON.stringify(newArr))
  204. if (state.ordersArr.length >= 1) {
  205. navTo(`/subpackage/orders/invoiceApply/invoice-step1?type=${state.type}&&ordersArr=${params}&&userMobile=${state.userMobile}`)
  206. } else {
  207. msg("请选择订单开票")
  208. }
  209. }
  210. const searchOne = () => {
  211. state.pageNo = 1
  212. etcOrder(2)
  213. }
  214. const searchTwo = () => {
  215. state.pageNo = 1
  216. trafficFlow(1)
  217. }
  218. const invoiceRecord = () => {
  219. navTo(`/subpackage/orders/invoiceApply/invoiceList?userMobile=${state.userMobile}`)
  220. }
  221. const checkboxChange = (e) => {
  222. state.ordersArr = e.detail.value
  223. if (state.ordersArr.length == state.data.length) {
  224. console.log("进来了")
  225. state.checkedAll = true
  226. } else {
  227. state.checkedAll = false
  228. }
  229. console.log("e", e.detail.value)
  230. }
  231. const checkboxAll = (e) => {
  232. if (e.detail.value.toString() == 'ALL') {
  233. for (var i = 0; i < state.data.length; i++) {
  234. state.ordersArr.push(state.data[i]['orderNo'])
  235. state.checkedAll = true
  236. state.checked = true
  237. }
  238. } else {
  239. state.ordersArr = []
  240. state.checked = false
  241. }
  242. console.log("全部", e.detail.value)
  243. }
  244. // 触底加载
  245. onReachBottom(() => {
  246. if (state.data.length < state.pageNo * 10) return state.flags = true
  247. console.log("触底了")
  248. state.pageNo++
  249. if (state.type == 1) {
  250. etcOrder(2)
  251. } else {
  252. trafficFlow(2)
  253. }
  254. })
  255. </script>
  256. <style scoped lang="scss">
  257. .contentAll {
  258. font-size: 32rpx;
  259. background: #eef7f7;
  260. width: 100%;
  261. min-height: 100vh;
  262. }
  263. .titleOne {
  264. display: flex;
  265. align-items: center;
  266. justify-content: space-evenly;
  267. background-color: white;
  268. padding: 20rpx;
  269. }
  270. .line {
  271. color: #ccc;
  272. }
  273. .cardbox {
  274. width: 95%;
  275. margin: 0 auto;
  276. margin-top: 20rpx;
  277. .card {
  278. background: #FFFFFF;
  279. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  280. border-radius: 20rpx;
  281. display: flex;
  282. align-items: center;
  283. padding: 30rpx;
  284. margin-bottom: 30rpx;
  285. .content {
  286. margin-left: 30rpx;
  287. .title {
  288. font-size: 30rpx;
  289. font-family: Noto Sans S Chinese;
  290. font-weight: 400;
  291. color: #333333;
  292. margin-bottom: 15rpx;
  293. }
  294. text {
  295. font-size: 26rpx;
  296. font-family: Noto Sans S Chinese;
  297. font-weight: 400;
  298. color: #666666;
  299. }
  300. }
  301. .icon-active {
  302. width: 43rpx;
  303. height: 43rpx;
  304. background: #00B38B;
  305. border-radius: 50%;
  306. display: flex;
  307. justify-content: center;
  308. align-items: center;
  309. }
  310. .icon-no-active {
  311. width: 44rpx;
  312. height: 44rpx;
  313. background: #FFFFFF;
  314. border: 1px solid #00B38B;
  315. border-radius: 50%;
  316. }
  317. .edit {
  318. display: flex;
  319. justify-content: center;
  320. align-items: center;
  321. flex-direction: column;
  322. image {
  323. width: 40rpx;
  324. height: 40rpx;
  325. }
  326. view {
  327. font-size: 26rpx;
  328. font-family: Noto Sans S Chinese;
  329. font-weight: 400;
  330. color: #999999;
  331. }
  332. }
  333. }
  334. }
  335. .apply {
  336. width: 150rpx;
  337. height: 70rpx;
  338. background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
  339. border-radius: 40rpx;
  340. font-size: 32rpx;
  341. color: #FFFFFF;
  342. line-height: 70rpx;
  343. text-align: center;
  344. }
  345. .apply-wrap {
  346. width: 100%;
  347. position: fixed;
  348. bottom: 0;
  349. left: 0;
  350. background-color: white;
  351. font-family: Noto Sans S Chinese;
  352. font-weight: 400;
  353. display: flex;
  354. align-items: center;
  355. height: 100rpx;
  356. padding: 0 20rpx;
  357. justify-content: space-between;
  358. box-sizing: border-box;
  359. }
  360. ::deep.last .uni-stat__select {
  361. width: 360rpx !important;
  362. }
  363. .item {
  364. display: flex;
  365. font-size: 30rpx;
  366. margin-top: 10rpx;
  367. align-items: center;
  368. }
  369. .twoOne {
  370. background-color: white;
  371. margin-top: 10rpx;
  372. padding: 20rpx;
  373. display: flex;
  374. align-items: center;
  375. }
  376. .three {
  377. display: flex;
  378. align-items: center;
  379. }
  380. .two {
  381. background-color: white;
  382. margin-top: 10rpx;
  383. padding: 20rpx;
  384. }
  385. .input {
  386. display: flex;
  387. align-items: center;
  388. padding-left: 10prx;
  389. }
  390. .input>input {
  391. width: 45%;
  392. margin-top: 10rpx;
  393. font-size: 30rpx;
  394. border: 1rpx solid #ccc;
  395. padding: 0 10rpx;
  396. height: 28rpx;
  397. line-height: 28rpx;
  398. }
  399. </style>