historySpend.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  1. <template>
  2. <view class="box">
  3. <homenav :iStatusBarHeight="iStatusBarHeight" :title="'历史消费'" ></homenav>
  4. <view class="screenBox">
  5. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  6. <view style="height: 44px;"></view>
  7. <picker @change="bindPickerChange" :value="index" :range="array">
  8. <view class="screenName"> <span>车牌号:{{array[index]}}</span>
  9. <image src="../../static/timg/icon_arrow_right.png" mode="" class="jtImg"></image>
  10. </view>
  11. </picker>
  12. </view>
  13. <view style="height: 90rpx;"></view>
  14. <view class="itemHistory" v-for="(item,index) in itemData" :key="index" @click="goDetail(item)">
  15. <view class="topBox">
  16. <view class="dan">{{item.code}}</view>
  17. <!-- SheetType单据类型(1维修单 2销售单3洗车单4销售退货) -->
  18. <view class="stateBox" v-if="item.SheetType == 1">
  19. <!-- 0待施工(已保存)1施工中(已派工)2已完工 3已质检 4 已作废 -->
  20. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 0">待施工</view>
  21. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 1">施工中</view>
  22. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 2">已完工</view>
  23. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 3">已质检</view>
  24. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 4">已作废</view>
  25. <!-- 结算状态 -->
  26. <view class="danState" v-if="item.PayState == 0">/未结算</view>
  27. <view class="danState2" v-if="item.PayState == 2">/已结算</view>
  28. </view>
  29. <view class="stateBox" v-if="item.SheetType == 2">
  30. <!-- 0待施工(已保存)1施工中(已派工)2已审核 3已质检 4 已作废 -->
  31. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState < 2 ">未审核</view>
  32. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 2">已审核</view>
  33. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 4">已作废</view>
  34. <!-- 结算状态 -->
  35. <view class="danState" v-if="item.PayState == 0">/未结算</view>
  36. <view class="danState2" v-if="item.PayState == 2">/已结算</view>
  37. </view>
  38. <view class="stateBox" v-if="item.SheetType == 3">
  39. <!-- 0待施工(已保存)1施工中(已派工)2已完工 3已质检 4 已作废 -->
  40. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 0">已保存</view>
  41. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 4">已作废</view>
  42. <!-- 结算状态 -->
  43. <view class="danState" v-if="item.PayState == 0">/未结算</view>
  44. <view class="danState2" v-if="item.PayState == 2">/已结算</view>
  45. </view>
  46. </view>
  47. <view class="carPlate">
  48. <view class="plateBox">
  49. <view class="plate">{{item.PlateNumber}}</view>
  50. <view class="mileage" v-if="item.CurrentMileage>0">{{item.CurrentMileage}}km</view>
  51. </view>
  52. <view v-if="ReceiptsMoney" class="price"><span style="font-size: 22rpx;">¥</span>{{item.money?item.money:0}}</view>
  53. </view>
  54. <view class="time">{{item.time}}</view>
  55. <view class="shopName">{{item.ShopName}}</view>
  56. <!-- <view class="itemN" v-if="item.listItems.length != 0">
  57. <view class="itemContent" v-if="item.listItems.length != 0" v-for="(v,i) in item.listItems">{{v.ItemName}},</view>
  58. </view>
  59. <view class="itemN" v-if="item.listParts.length != 0">
  60. <view class="itemContent" v-if="item.listParts.length != 0" v-for="(v,i) in item.listParts">{{v.GoodsName}},</view>
  61. </view> -->
  62. <view class="itemN" v-if="item.ItemName">
  63. <view class="itemContent" >{{item.ItemName}}</view>
  64. </view>
  65. <view class="itemN" v-if="item.GoodsName">
  66. <view class="itemContent" >{{item.GoodsName}}</view>
  67. </view>
  68. <view v-if="((item.PayState == 2) && (appraise == true) && ((item.lastDay <= 30 && item.EvaluateState == 0) || item.EvaluateState == 1))" class="bottom">
  69. <view v-if="(item.EvaluateState == 0) && (item.lastDay <= 30) && appraise == true && item.PayState == 2" @click.stop="goAppraise(item)" class="ping">评价</view>
  70. <view v-if="item.EvaluateState == 1" @click.stop="goAppraiseDetail(item)" class="kan">查看评价</view>
  71. </view>
  72. </view>
  73. <view class="itemHistory" v-for="(item,index) in oldlist" :key="index" @click="goDetail(item)">
  74. <view class="topBox">
  75. <view class="dan">{{item.code}}</view>
  76. <!-- SheetType单据类型(1维修单 2销售单3洗车单4销售退货) -->
  77. <view class="stateBox" v-if="item.SheetType == 1">
  78. <!-- 0待施工(已保存)1施工中(已派工)2已完工 3已质检 4 已作废 -->
  79. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 0">待施工</view>
  80. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 1">施工中</view>
  81. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 2">已完工</view>
  82. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 3">已质检</view>
  83. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 4">已作废</view>
  84. <!-- 结算状态 -->
  85. <view class="danState" v-if="item.PayState == 0">/未结算</view>
  86. <view class="danState2" v-if="item.PayState == 2">/已结算</view>
  87. </view>
  88. <view class="stateBox" v-if="item.SheetType == 2">
  89. <!-- 0待施工(已保存)1施工中(已派工)2已审核 3已质检 4 已作废 -->
  90. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState < 2 ">未审核</view>
  91. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 2">已审核</view>
  92. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 4">已作废</view>
  93. <!-- 结算状态 -->
  94. <view class="danState" v-if="item.PayState == 0">/未结算</view>
  95. <view class="danState2" v-if="item.PayState == 2">/已结算</view>
  96. </view>
  97. <view class="stateBox" v-if="item.SheetType == 3">
  98. <!-- 0待施工(已保存)1施工中(已派工)2已完工 3已质检 4 已作废 -->
  99. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 0">已保存</view>
  100. <view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 4">已作废</view>
  101. <!-- 结算状态 -->
  102. <view class="danState" v-if="item.PayState == 0">/未结算</view>
  103. <view class="danState2" v-if="item.PayState == 2">/已结算</view>
  104. </view>
  105. </view>
  106. <view class="carPlate">
  107. <view class="plateBox">
  108. <view class="plate">{{item.PlateNumber}}</view>
  109. <view class="mileage" v-if="item.CurrentMileage>0">{{item.CurrentMileage}}km</view>
  110. </view>
  111. <view v-if="ReceiptsMoney" class="price"><span style="font-size: 22rpx;">¥</span>{{item.money?item.money:0}}</view>
  112. </view>
  113. <view class="time">{{item.time}}</view>
  114. <view class="shopName">{{item.ShopName}}</view>
  115. <view class="itemN" v-if="item.ItemName">
  116. <view class="itemContent" >{{item.ItemName}}</view>
  117. </view>
  118. <view class="itemN" v-if="item.GoodsName">
  119. <view class="itemContent" >{{item.GoodsName}}</view>
  120. </view>
  121. </view>
  122. <!-- 上拉 加载更多 -->
  123. <view class="noMore" v-if="noMoreShow && (itemData.length!=0)">没有更多数据</view>
  124. <!-- 无数据空白页 -->
  125. <nodata v-if="itemData.length==0&&oldlist.length==0"></nodata>
  126. </view>
  127. </template>
  128. <script>
  129. import nodata from '../../components/nodata/nodata.vue'
  130. import homenav from "../../components/homenav/nav.vue"
  131. export default {
  132. components: {
  133. nodata,homenav
  134. },
  135. data() {
  136. return {
  137. page: 1,
  138. itemData: [],
  139. oldlist:[],
  140. noMoreShow: false,
  141. appraise:false,
  142. ReceiptsMoney:false,//支付金额
  143. iStatusBarHeight:'',
  144. array: [],
  145. index: 0,
  146. wxOpenData: '',
  147. plateNumber:'',
  148. }
  149. },
  150. onLoad() {
  151. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  152. this.page = 1
  153. this.myOrderCoupon()
  154. this.myPower()
  155. this.showPower()
  156. this.getplateNumber()
  157. },
  158. methods: {
  159. bindPickerChange: function(e) {
  160. console.log('picker发送选择改变,携带值为', e.detail)
  161. this.index = e.detail.value
  162. this.plateNumber=this.array[this.index]
  163. if(this.index==0){
  164. this.plateNumber=''
  165. }
  166. this.myOrderCoupon()
  167. },
  168. getplateNumber(){
  169. console.log("444")
  170. this.wxOpenData= this.$store.state.wxOpenData;
  171. this.$http('openweiXinCardInfoController/plateNumber-by-customerId', {
  172. customerId:this.wxOpenData.loginInfo.uid
  173. }, 'GET').then(res => {
  174. this.array=res.data.split(',')
  175. this.array.unshift('全部')
  176. })
  177. },
  178. //显示权限
  179. showPower() {
  180. this.$http('openweiXinCardInfoController/getShowSetting', {
  181. }, 'GET').then(res => {
  182. var list = res.data
  183. list.forEach((item, index) => {
  184. if (item.fieldValue == 'ReceiptsMoney') {
  185. this.ReceiptsMoney = item.isChecked
  186. }
  187. })
  188. })
  189. },
  190. //评价权限
  191. myPower() {
  192. this.$http('openMiniEvaluate/getEvaluateSetting', {
  193. }, 'GET').then(res => {
  194. // var list = res.data.Items
  195. this.appraise = res.data
  196. })
  197. },
  198. goAppraiseDetail(item) {
  199. uni.navigateTo({
  200. url: 'myAppraiseDetail?sheetId=' + item.id
  201. })
  202. },
  203. goAppraise(item){
  204. uni.navigateTo({
  205. url: 'appraise?sheetID=' + item.id + '&shopID=' + item.shopID
  206. })
  207. },
  208. goDetail(item) {
  209. /* uni.navigateTo({
  210. url: 'historyDetail?id=' + item.id + '&lastDay=' + item.lastDay
  211. }) */
  212. uni.navigateTo({
  213. url: '../subPack/oldhistoryDetail?id=' + item.id + '&lastDay=' + item.lastDay
  214. })
  215. },
  216. myOrderCoupon() {
  217. let that = this
  218. uni.showLoading({
  219. title: '加载中'
  220. })
  221. /* this.$http('openweiXinCardInfoController/queryConsumptionList', {
  222. plateNumber:this.plateNumber
  223. // page: this.page,
  224. // limit: 10,
  225. }, 'POST').then(res => {
  226. uni.hideLoading();
  227. // var list = res.data.Items
  228. var list = res.data
  229. if (this.page == 1) {
  230. this.itemData = list
  231. } else {
  232. this.itemData = this.itemData.concat(list)
  233. }
  234. if (list.length < 10) {
  235. this.noMoreShow = true
  236. } else {
  237. this.noMoreShow = false
  238. }
  239. }) */
  240. this.$http('openweiXinCardInfoController/queryConsumptionListV2', {
  241. plateNumber:this.plateNumber
  242. // page: this.page,
  243. // limit: 10,
  244. }, 'POST').then(res => {
  245. uni.hideLoading();
  246. var list = res.data.list
  247. this.oldlist=res.data.oldlist
  248. this.itemData = list
  249. if (list.length < 10) {
  250. this.noMoreShow = true
  251. } else {
  252. this.noMoreShow = false
  253. }
  254. })
  255. },
  256. //时间对比
  257. getDateBeforeNow(stringTime) {
  258. console.log("传参未格式化", stringTime);
  259. stringTime = new Date(stringTime.replace(/-/g, '/'))
  260. // 统一单位换算
  261. var minute = 1000 * 60;
  262. var hour = minute * 60;
  263. var day = hour * 24;
  264. var week = day * 7;
  265. var month = day * 30;
  266. var year = month * 12;
  267. var time1 = new Date().getTime(); //当前的时间戳
  268. console.log("当前时间", time1);
  269. // 对时间进行毫秒单位转换
  270. var time2 = new Date(stringTime).getTime(); //指定时间的时间戳
  271. console.log("传过来的时间", time2);
  272. var time = time1 - time2;
  273. console.log("计算后的时间", time);
  274. var result = null;
  275. // if (time < 0) {
  276. // // alert("传过来的时间的时间不能晚于当前时间!");
  277. // result = stringTime;
  278. // } else if (time / year >= 1) {
  279. // result = parseInt(time / year) + "年前";
  280. // } else if (time / month >= 1) {
  281. // result = parseInt(time / month) + "月前";
  282. // } else if (time / week >= 1) {
  283. // result = parseInt(time / week) + "周前";
  284. // } else if (time / day >= 1) {
  285. // result = parseInt(time / day) + "天前";
  286. // } else if (time / hour >= 1) {
  287. // result = parseInt(time / hour) + "小时前";
  288. // } else if (time / minute >= 1) {
  289. // result = parseInt(time / minute) + "分钟前";
  290. // } else {
  291. // result = "刚刚";
  292. // }
  293. if (time < 0) {
  294. // alert("传过来的时间的时间不能晚于当前时间!");
  295. result = -1;
  296. } else if (time / day >= 0) {
  297. result = parseInt(time / day);//多少天前
  298. }
  299. console.log("多少天前", result);
  300. return result;
  301. },
  302. },
  303. // 下拉刷新
  304. onPullDownRefresh() {
  305. this.page = 1
  306. this.myOrderCoupon()
  307. setTimeout(function() {
  308. uni.stopPullDownRefresh();
  309. }, 1000);
  310. },
  311. // 上拉加载更多
  312. onReachBottom() {
  313. // this.page++;
  314. this.myOrderCoupon()
  315. },
  316. }
  317. </script>
  318. <style>
  319. .box {
  320. min-height: 100vh;
  321. background-color: #F4F5F7;
  322. padding-top: 20rpx;
  323. }
  324. .jtImg{
  325. width: 12rpx;height: 20rpx;
  326. margin-top: 10rpx;
  327. }
  328. .screenBox{
  329. background: #FFFFFF;
  330. margin-bottom: 20rpx;
  331. position: fixed;
  332. width: 100vw;
  333. top: 0;left: 0;
  334. }
  335. .screenName{
  336. padding: 24rpx;font-size: 28rpx;
  337. display: flex;
  338. justify-content: space-between;
  339. }
  340. .itemHistory {
  341. margin: 0rpx 24rpx 20rpx;
  342. padding: 20rpx;
  343. background-color: #FFFFFF;
  344. border-radius: 10rpx;
  345. }
  346. .topBox{
  347. display: flex;
  348. justify-content: space-between;
  349. align-items: center;
  350. }
  351. .dan {
  352. font-size: 24rpx;
  353. color: #999999;
  354. }
  355. .stateBox{
  356. display: flex;
  357. }
  358. .danState{
  359. font-size: 24rpx;
  360. color: #FF4F00;
  361. }
  362. .danState2{
  363. font-size: 24rpx;
  364. color: #999999;
  365. }
  366. .time {
  367. font-size: 24rpx;
  368. color: #999999;
  369. }
  370. .carPlate {
  371. margin: 20rpx 0rpx 15rpx;
  372. display: flex;
  373. align-items: center;
  374. justify-content: space-between;
  375. }
  376. .plateBox {
  377. display: flex;
  378. }
  379. .plate {
  380. font-size: 30rpx;
  381. color: #3C3C3C;
  382. font-weight: bold;
  383. margin-right: 20rpx;
  384. }
  385. .mileage {
  386. font-size: 24rpx;
  387. color: #F19D01;
  388. padding: 0rpx 10rpx;
  389. border: 1px solid #F19D01;
  390. border-radius: 4rpx;
  391. height: 33rpx;
  392. }
  393. .price{
  394. font-size: 32rpx;
  395. font-weight: 500;
  396. color: #FF0000;
  397. }
  398. .itemN {
  399. margin-top: 15rpx;
  400. display: flex;
  401. /* 隐藏文字显示 ...不换行 */
  402. overflow: hidden;
  403. text-overflow: ellipsis;
  404. white-space: nowrap;
  405. }
  406. .shopName{
  407. color: #666666;
  408. font-size: 24rpx;
  409. margin-top: 15rpx;
  410. /* 隐藏文字显示 ...不换行 */
  411. overflow: hidden;
  412. text-overflow: ellipsis;
  413. white-space: nowrap;
  414. }
  415. .itemContent {
  416. color: #666666;
  417. font-size: 24rpx;
  418. }
  419. .bottom{
  420. padding-top: 20rpx;
  421. border-top: 1rpx solid #EEEEEE;
  422. margin-top: 20rpx;
  423. display: flex;
  424. justify-content: flex-end;
  425. font-size: 28rpx;
  426. margin-left: -24rpx;
  427. margin-right: -24rpx;
  428. }
  429. .ping{
  430. text-align: center;
  431. color: #FF4F00;
  432. width: 150rpx;
  433. height: 56rpx;
  434. line-height: 56rpx;
  435. border-radius: 36rpx;
  436. border: 2rpx solid #FF4F00;
  437. margin-right: 24rpx;
  438. }
  439. .kan{
  440. text-align: center;
  441. color: #3C3C3C;
  442. width: 150rpx;
  443. height: 56rpx;
  444. line-height: 56rpx;
  445. border-radius: 36rpx;
  446. border: 2rpx solid #DDDDDD;
  447. margin-right: 24rpx;
  448. }
  449. .noMore {
  450. text-align: center;
  451. line-height: 50rpx;
  452. color: #999999;
  453. font-size: 28rpx;
  454. }
  455. </style>