record.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <template>
  2. <view class="page" :style="{'min-height':(h)+'px','padding-top':mt+'px'}">
  3. <c-nav-bar title="核销记录"></c-nav-bar>
  4. <view class="top">
  5. <view style="display: flex;align-items: center;">
  6. <view class="time" @click="show=true">
  7. <u-icon name="calendar" :label="dateStr" labelPos="right" labelColor="#666" color="#666" space="3px"
  8. size="25px"></u-icon>
  9. <u-icon name="arrow-right" color="#999" size="32rpx" style="margin:2rpx 0 0 20rpx;"></u-icon>
  10. </view>
  11. <view style="margin: 0 14rpx 0 10rpx;font-size: 30rpx;color: #666;">至</view>
  12. <view class="time" @click="show2=true">
  13. <u-icon :label="dateStr2" labelPos="right" labelColor="#666" color="#666" space="3px"
  14. size="25px"></u-icon>
  15. <u-icon name="arrow-right" color="#999" size="32rpx"></u-icon>
  16. </view>
  17. </view>
  18. <view class="right">共{{totalNum}}单 收入¥{{totalAmount}}</view>
  19. </view>
  20. <view class="list">
  21. <block v-if="data.length>0">
  22. <view class="item" v-for="(item,index) in data" :key="index" @tap="toDetails(item)">
  23. <image :src="item.goodsType==2?'../../static/bao.png':'../../static/pin.png'"></image>
  24. <view class="mid">
  25. <text>{{item.playDate}} {{item.playTime}}出发/{{item.goodsType==2?'包船':'拼船'}}/{{item.boatNo}}</text>
  26. <text>{{item.num}}人 · 出游{{item.playLength}}小时</text>
  27. <text>核销时间:{{item.updateDate}}</text>
  28. </view>
  29. <view class="price">¥{{item.realPrice}}</view>
  30. </view>
  31. </block>
  32. <block v-else>
  33. <NoData/>
  34. </block>
  35. </view>
  36. <u-datetime-picker @confirm="confirmDate" @cancel="show=false" :show="show" v-model="value1"
  37. visibleItemCount="6" mode="date"></u-datetime-picker>
  38. <u-datetime-picker @confirm="confirmDate2" @cancel="show2=false" :show="show2" v-model="value2"
  39. visibleItemCount="6" mode="date"></u-datetime-picker>
  40. </view>
  41. </template>
  42. <script>
  43. export default {
  44. data() {
  45. return {
  46. dateStr: new Date().Format('yyyy-MM-dd'),
  47. dateStr2: new Date().Format('yyyy-MM-dd'),
  48. date: new Date().Format('yyyy-MM-dd'),
  49. date2: new Date().Format('yyyy-MM-dd'),
  50. show: false,
  51. show2: false,
  52. k: '',
  53. data: [],
  54. value1: Number(new Date()),
  55. value2: Number(new Date()),
  56. merchantId: uni.getStorageSync('merchantId'),
  57. totalAmount: 0,
  58. totalNum: 0
  59. }
  60. },
  61. onLoad() {
  62. this.getdata();
  63. },
  64. methods: {
  65. getdata() {
  66. this.$api.get('/scenic/order/writeOffRecordPage', {
  67. limit:50,
  68. page:1,
  69. merchantId: this.merchantId,
  70. // queryDate: this.date,
  71. startDate: this.date,
  72. endDate: this.date2
  73. }).then(res => {
  74. if (res.data.code == 0) {
  75. this.totalAmount = res.data.data.totalAmount;
  76. this.totalNum = res.data.data.totalNum;
  77. this.data=res.data.data.pageData.list;
  78. }
  79. })
  80. },
  81. confirmDate(e) {
  82. // 创建一个Date对象并传入时间戳
  83. const date = new Date(e.value);
  84. // 使用Date对象的方法获取年、月、日、小时、分钟和秒
  85. const year = date.getFullYear();
  86. const month = ('0' + (date.getMonth() + 1)).slice(-2);
  87. const day = ('0' + date.getDate()).slice(-2);
  88. // 格式化时间
  89. let formattedTime = "";
  90. formattedTime = `${year}-${month}-${day}`;
  91. if(Date.parse(formattedTime) - Date.parse(this.date2)>0){
  92. return this.$showToast('开始日期不能大于结束日期');
  93. }
  94. this.dateStr = `${year}-${month}-${day}`
  95. this.date = formattedTime;
  96. this.show = false;
  97. this.getdata()
  98. },
  99. confirmDate2(e) {
  100. // 创建一个Date对象并传入时间戳
  101. const date = new Date(e.value);
  102. // 使用Date对象的方法获取年、月、日、小时、分钟和秒
  103. const year = date.getFullYear();
  104. const month = ('0' + (date.getMonth() + 1)).slice(-2);
  105. const day = ('0' + date.getDate()).slice(-2);
  106. // 格式化时间
  107. let formattedTime = "";
  108. formattedTime = `${year}-${month}-${day}`;
  109. if(Date.parse(formattedTime) - Date.parse(this.date)<0){
  110. return this.$showToast('结束日期不能小于开始日期');
  111. }
  112. this.dateStr2 = `${year}-${month}-${day}`
  113. this.date2 = formattedTime;
  114. this.show2 = false;
  115. this.getdata()
  116. },
  117. toDetails(item){
  118. uni.navigateTo({
  119. url:'/pagesHouse/Verification/recordDetails?orderCode='+item.orderCode
  120. })
  121. }
  122. }
  123. }
  124. </script>
  125. <style lang="less" scoped>
  126. /deep/ .uicon-arrow-right{
  127. margin-top: 4rpx !important;
  128. }
  129. .page{
  130. box-sizing: border-box;
  131. }
  132. .top {
  133. padding: 24rpx 30rpx;
  134. .time {
  135. display: flex;
  136. align-items: center;
  137. gap: 0 10rpx;
  138. }
  139. .right {
  140. color: #999;
  141. font-size: 24rpx;
  142. margin-top: 10rpx;
  143. margin-left: 6rpx;
  144. }
  145. }
  146. .list {
  147. padding: 0 30rpx;
  148. .item {
  149. padding: 30rpx 0;
  150. border-bottom: 1rpx solid #EFEFEF;
  151. display: flex;
  152. justify-content: space-between;
  153. image {
  154. width: 80rpx;
  155. min-width: 80rpx;
  156. height: 80rpx;
  157. }
  158. .mid {
  159. margin: 0 30rpx 0 20rpx;
  160. text {
  161. display: inline-block;
  162. font-size: 28rpx;
  163. color: #777;
  164. &:first-child {
  165. font-size: 30rpx;
  166. color: #111;
  167. font-weight: bold;
  168. }
  169. &:nth-child(2) {
  170. margin: 18rpx 0;
  171. }
  172. }
  173. }
  174. .price {
  175. font-size: 32rpx;
  176. }
  177. }
  178. }
  179. </style>