Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

invoice-content.vue 7.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  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 value="cb" style="transform:scale(0.7)" />
  42. </view>
  43. <view class="content">
  44. <view class="title">订单号:{{item.orderNo}}</view>
  45. <view class="title">订单时间:{{item.orderTime}}</view>
  46. <view class="title">车牌号:{{item.vehiclePlate}}</view>
  47. <view class="title">订单金额:¥{{item.invoiceAmount}}</view>
  48. <view class="title">开票状态:{{item.status==1?'已开票':"可开票"}}</view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <view class="apply-wrap">
  55. <view>
  56. <checkbox value="cb" style="transform:scale(0.7)" />全选
  57. </view>
  58. <view class="apply" @click="apply">去申请</view>
  59. </view>
  60. </template>
  61. <script lang="ts" setup>
  62. import {
  63. navTo
  64. } from "@/utils/utils";
  65. import { reactive, ref } from "vue";
  66. import { onLoad, onReachBottom } from "@dcloudio/uni-app";
  67. import { queryEtcOrderApi, getUserMsg, trafficFlowApi } from "@/utils/network/api.js";
  68. import { stringToJson } from "@/utils/network/encryption";
  69. import { request } from "@/utils/network/request.js";
  70. import {
  71. getItem
  72. } from "@/utils/storage";
  73. const state = reactive({
  74. type: 1, //1 ETC产品订单 2通行流水服务费订单
  75. userMobile: "",
  76. data: [],
  77. businessTypeValOne: 9,
  78. businessRangeOne: [{
  79. 'value': 9,
  80. 'text': '可开票'
  81. }, {
  82. 'value': 1,
  83. 'text': '已开票'
  84. }],
  85. businessTypeVal: 9,
  86. businessRange: [{
  87. 'value': 9,
  88. 'text': '可开票'
  89. }, {
  90. 'value': 1,
  91. 'text': '已开票'
  92. }, {
  93. 'value': 2,
  94. 'text': '已开纸质票'
  95. }],
  96. etcCardNo: "",
  97. pageSize: 10, //每页数据量
  98. pageNo: 1, // 当前页
  99. })
  100. onLoad((option) => {
  101. state.type = option.type
  102. getUserinfo()
  103. })
  104. const value = ref('')
  105. const getUserinfo = () => {
  106. const options = {
  107. type: 2,
  108. data: {
  109. openId: getItem('openId'),
  110. },
  111. method: "POST",
  112. showLoading: true,
  113. };
  114. request(getUserMsg, options).then((res) => {
  115. const data = stringToJson(res.bizContent);
  116. console.log(data, "用户信息");
  117. state.userMobile = data.customerTel
  118. if (state.type == 1) {
  119. etcOrder()
  120. }
  121. });
  122. }
  123. const etcOrder = () => {
  124. const options = {
  125. type: 2,
  126. data: {
  127. userMobile: state.userMobile,
  128. page: state.pageNo,
  129. pageSize: state.pageSize
  130. },
  131. method: "POST",
  132. showLoading: true,
  133. };
  134. request(queryEtcOrderApi, options).then((res) => {
  135. const data = stringToJson(res.bizContent);
  136. state.data = data.orders
  137. console.log(data, "查询ETC产品订单");
  138. });
  139. }
  140. const trafficFlow = () => {
  141. const options = {
  142. type: 2,
  143. data: {
  144. etcCardNo: state.etcCardNo,
  145. userMobile: state.userMobile,
  146. pageNumber: state.pageNo,
  147. page: state.pageSize
  148. },
  149. method: "POST",
  150. showLoading: true,
  151. };
  152. request(trafficFlowApi, options).then((res) => {
  153. const data = stringToJson(res.bizContent);
  154. console.log(data, "通行");
  155. });
  156. }
  157. const changeBusiness = (e) => {
  158. state.businessTypeVal = e
  159. console.log(e)
  160. }
  161. const changeBusinessOne = (e) => {
  162. state.businessTypeValOne = e
  163. console.log(e)
  164. }
  165. const apply = () => {
  166. navTo(`/subpackage/orders/invoiceApply/invoice-step1?type=${state.type}`)
  167. }
  168. const searchOne = () => {
  169. state.pageNo = 1
  170. etcOrder()
  171. }
  172. const searchTwo = () => {
  173. state.pageNo = 1
  174. trafficFlow()
  175. }
  176. const invoiceRecord = () => {
  177. navTo(`/subpackage/orders/invoiceApply/invoiceList?userMobile=${state.userMobile}`)
  178. }
  179. </script>
  180. <style scoped lang="scss">
  181. .contentAll {
  182. font-size: 32rpx;
  183. background: #eef7f7;
  184. width: 100%;
  185. min-height: 100vh;
  186. }
  187. .titleOne {
  188. display: flex;
  189. align-items: center;
  190. justify-content: space-evenly;
  191. background-color: white;
  192. padding: 20rpx;
  193. }
  194. .line {
  195. color: #ccc;
  196. }
  197. .cardbox {
  198. width: 95%;
  199. margin: 0 auto;
  200. margin-top: 20rpx;
  201. .card {
  202. background: #FFFFFF;
  203. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  204. border-radius: 20rpx;
  205. display: flex;
  206. align-items: center;
  207. padding: 30rpx;
  208. margin-bottom: 30rpx;
  209. .content {
  210. margin-left: 30rpx;
  211. .title {
  212. font-size: 30rpx;
  213. font-family: Noto Sans S Chinese;
  214. font-weight: 400;
  215. color: #333333;
  216. margin-bottom: 15rpx;
  217. }
  218. text {
  219. font-size: 26rpx;
  220. font-family: Noto Sans S Chinese;
  221. font-weight: 400;
  222. color: #666666;
  223. }
  224. }
  225. .icon-active {
  226. width: 43rpx;
  227. height: 43rpx;
  228. background: #00B38B;
  229. border-radius: 50%;
  230. display: flex;
  231. justify-content: center;
  232. align-items: center;
  233. }
  234. .icon-no-active {
  235. width: 44rpx;
  236. height: 44rpx;
  237. background: #FFFFFF;
  238. border: 1px solid #00B38B;
  239. border-radius: 50%;
  240. }
  241. .edit {
  242. display: flex;
  243. justify-content: center;
  244. align-items: center;
  245. flex-direction: column;
  246. image {
  247. width: 40rpx;
  248. height: 40rpx;
  249. }
  250. view {
  251. font-size: 26rpx;
  252. font-family: Noto Sans S Chinese;
  253. font-weight: 400;
  254. color: #999999;
  255. }
  256. }
  257. }
  258. }
  259. .apply {
  260. width: 150rpx;
  261. height: 70rpx;
  262. background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
  263. border-radius: 40rpx;
  264. font-size: 32rpx;
  265. color: #FFFFFF;
  266. line-height: 70rpx;
  267. text-align: center;
  268. }
  269. .apply-wrap {
  270. width: 100%;
  271. position: fixed;
  272. bottom: 0;
  273. left: 0;
  274. background-color: white;
  275. font-family: Noto Sans S Chinese;
  276. font-weight: 400;
  277. display: flex;
  278. align-items: center;
  279. height: 100rpx;
  280. padding: 0 20rpx;
  281. justify-content: space-between;
  282. box-sizing: border-box;
  283. }
  284. ::deep.last .uni-stat__select {
  285. width: 360rpx !important;
  286. }
  287. .item {
  288. display: flex;
  289. font-size: 30rpx;
  290. margin-top: 10rpx;
  291. align-items: center;
  292. }
  293. .twoOne {
  294. background-color: white;
  295. margin-top: 10rpx;
  296. padding: 20rpx;
  297. display: flex;
  298. align-items: center;
  299. }
  300. .three {
  301. display: flex;
  302. align-items: center;
  303. }
  304. .two {
  305. background-color: white;
  306. margin-top: 10rpx;
  307. padding: 20rpx;
  308. }
  309. .input {
  310. display: flex;
  311. align-items: center;
  312. padding-left: 10prx;
  313. }
  314. .input>input {
  315. width: 45%;
  316. margin-top: 10rpx;
  317. font-size: 30rpx;
  318. border: 1rpx solid #ccc;
  319. padding: 0 10rpx;
  320. height: 28rpx;
  321. line-height: 28rpx;
  322. }
  323. </style>