flow-record.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. <template>
  2. <view class="">
  3. <view id="header-id">
  4. <view class="header-content flex-y-center">
  5. <view class="flex-y-center header">
  6. <icon type="search" size="15" style="margin-right: 10rpx;"></icon>
  7. <input type="text" value="" @input="onInput" @confirm="search" confirm-type="search" placeholder="输入订单编号查询" />
  8. </view>
  9. </view>
  10. <view class="tabs">
  11. <liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
  12. </view>
  13. </view>
  14. <view class="hg226"></view>
  15. <view class="home">
  16. <view class="box-pack-between total">
  17. <text class="price-color ft32">总计:¥{{total_money}}</text>
  18. <view class="total-right flex-y-center">
  19. <picker :range="type_arr" @change="bindCge">
  20. <view class="flex-y-center">
  21. {{type_arr[type_index]}}
  22. <image src="../static/images/san.png" mode=""></image>
  23. </view>
  24. </picker>
  25. </view>
  26. </view>
  27. <view style="height:100rpx;"></view>
  28. <no-none v-if='list.length<=0'></no-none>
  29. <block v-else>
  30. <view class="list" v-for="(item,index) in list" :key="index">
  31. <view class="box-pack-between top">
  32. <text>{{item.out_trade_no}}</text>
  33. <view class="flex-center stutas">
  34. <image :src="item.pay_type==1?pay_type:pay_type1" mode=""></image>
  35. {{item.order_status=='SUCCESS'?'支付成功':'未支付'}}
  36. </view>
  37. </view>
  38. <view class="text-color ft28 center">
  39. 付款时间:<text>{{item.pay_time}}</text>
  40. </view>
  41. <view class="text-color ft28">
  42. 付款金额:<text class="price-color ft28">{{item.pay_price}}</text>
  43. </view>
  44. </view>
  45. <loading :is_load="is_load" :is_load_more='is_load_more'></loading>
  46. </block>
  47. </view>
  48. <uni-popup-top ref="popup" type="top" :top="top" :maskClass="maskClass">
  49. <view class="model">
  50. <view class="flex-y-center box-pack-between model-date">
  51. <view class="model-item " :class="act_index==1?'act':''">
  52. <picker mode='date' :value="start" :start="startDate" :end="endDate" @change="bindDateChange1" data-index="1">
  53. <view class="flex-center">
  54. <text>{{start}}</text>
  55. </view>
  56. </picker>
  57. </view>
  58. <text>至</text>
  59. <view class="model-item" :class="act_index2==2?'act':''">
  60. <picker mode='date' :value="end" :start="startDate" :end="endDate" @change="bindDateChange2" data-index="2">
  61. <view class="flex-center">
  62. <text>{{end}}</text>
  63. </view>
  64. </picker>
  65. </view>
  66. </view>
  67. <view class="model-btn flex-center" @click="sure">
  68. 确定
  69. </view>
  70. </view>
  71. </uni-popup-top>
  72. </view>
  73. </template>
  74. <script>
  75. import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
  76. import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
  77. export default {
  78. components: {
  79. uniPopupTop,
  80. liuyunoTabs
  81. },
  82. data() {
  83. return {
  84. tabs: [
  85. "今日",
  86. "昨日",
  87. "本周",
  88. "筛选"
  89. ],
  90. defaultIndex: 0,
  91. startDate: "2020-10-01",
  92. endDate: "2030-10-01",
  93. start: "开始时间",
  94. end: "结束时间",
  95. act_index: 0,
  96. act_index2: 0,
  97. type_arr: [
  98. "全部", "微信", "支付宝",
  99. ],
  100. type_index: 0,
  101. list: [],
  102. page: 1,
  103. is_load: false,
  104. is_load_more: false,
  105. total_money: 0,
  106. time: "",
  107. pay_type: "../static/images/wx.png",
  108. pay_type1: "../static/images/ali.png",
  109. keywords:"",
  110. top:"226rpx",
  111. maskClass: {
  112. 'position': 'fixed',
  113. 'bottom': 0,
  114. 'top': "226rpx",
  115. 'left': 0,
  116. 'right': 0,
  117. 'backgroundColor': 'rgba(0, 0, 0, 0.4)'
  118. },
  119. }
  120. },
  121. onLoad() {
  122. this.http();
  123. },
  124. onReady() {},
  125. onReachBottom() {
  126. console.log("dddd")
  127. if (!this.is_load) {
  128. this.page = this.page + 1;
  129. this.http();
  130. }
  131. },
  132. methods: {
  133. tabClick(e) {
  134. this.defaultIndex = e;
  135. if (e == 3) {
  136. this.$refs.popup.open();
  137. return
  138. } else {
  139. this.act_index = 0;
  140. this.act_index2 = 0;
  141. this.start = "开始时间";
  142. this.end = "结束时间";
  143. this.time = "";
  144. this.clear();
  145. }
  146. this.$refs.popup.close();
  147. },
  148. clear() {
  149. this.page = 1;
  150. this.list = [];
  151. this.http();
  152. },
  153. bindDateChange1(e) {
  154. this.act_index = e.currentTarget.dataset.index;
  155. this.start = e.target.value;
  156. },
  157. bindDateChange2(e) {
  158. this.act_index2 = e.currentTarget.dataset.index;
  159. this.end = e.target.value;
  160. },
  161. sure(e) {
  162. this.time = this.start + " - " + this.end;
  163. this.clear();
  164. this.$refs.popup.close();
  165. },
  166. bindCge(e) {
  167. console.log(e, "e")
  168. this.type_index = e.detail.value;
  169. this.clear();
  170. },
  171. search(e){
  172. this.keywords=e.detail.value;
  173. this.clear();
  174. },
  175. onInput(e)
  176. {
  177. if(!e.detail.value){
  178. this.keywords="";
  179. this.clear();
  180. }
  181. },
  182. http() {
  183. let type = this.defaultIndex,
  184. pay_type = this.type_index;
  185. this.request({
  186. url: "user/getList",
  187. data: {
  188. token: uni.getStorageSync('token'),
  189. page: this.page,
  190. limit: 5,
  191. time: this.time,
  192. paytime: type == 0 ? "today" : type == 1 ? "yesterday" : type == 2 ? "week" : "",
  193. pay_type,
  194. keywords:this.keywords,
  195. },
  196. }).then(res => {
  197. console.log(res, "res")
  198. if (res.code === '200') {
  199. if (res.data.data.length == 0) {
  200. this.is_load = true,
  201. this.is_load_more = true,
  202. setTimeout(() => {
  203. this.is_load_more = false
  204. }, 1e3);
  205. return
  206. }
  207. this.total_money += res.data.total_money;
  208. this.is_load = false;
  209. this.list = this.list.concat(res.data.data);
  210. }
  211. }).catch((res) => {
  212. uni.showToast({
  213. title: res.message,
  214. icon: 'none'
  215. })
  216. });
  217. },
  218. }
  219. }
  220. </script>
  221. <style lang="scss">
  222. $yellow: #FFA024;
  223. page {
  224. background: #F5F7FA;
  225. }
  226. #header-id {
  227. position: fixed;
  228. top: 0;
  229. width: 100%;
  230. z-index: 999;
  231. }
  232. .hg226 {
  233. height: 226rpx;
  234. }
  235. .header-content {
  236. background: #FFFFFF;
  237. height: 126rpx;
  238. .header {
  239. width: 670rpx;
  240. height: 70rpx;
  241. opacity: 1;
  242. background: #f5f6f9;
  243. border-radius: 4rpx;
  244. font-size: 28rpx;
  245. padding: 0 30rpx;
  246. margin: 0 auto;
  247. }
  248. }
  249. .tabs {
  250. font-size: 32rpx;
  251. }
  252. .price-color {
  253. color: $yellow;
  254. }
  255. .text-color {
  256. color: #99A0AD
  257. }
  258. .home {
  259. width: 670rpx;
  260. margin: 0 auto;
  261. position: relative;
  262. .total {
  263. padding: 24rpx 0;
  264. position: fixed;
  265. width: 670rpx;
  266. background: #F5F7FA;
  267. z-index: 99;
  268. .total-right {
  269. font-size: 28rpx;
  270. color: #666666;
  271. image {
  272. width: 15rpx;
  273. height: 10rpx;
  274. margin-left: 10rpx;
  275. }
  276. }
  277. }
  278. .list {
  279. width: 670rpx;
  280. height: 227rpx;
  281. opacity: 1;
  282. background: #ffffff;
  283. border-radius: 8rpx;
  284. box-shadow: 0px 6rpx 10rpx 0px rgba(213, 213, 213, 0.04);
  285. margin: 0 auto;
  286. padding: 20rpx 32rpx;
  287. margin-bottom: 20rpx;
  288. .top {
  289. margin-bottom: 43rpx;
  290. }
  291. .center {
  292. margin-bottom: 22rpx;
  293. }
  294. .stutas {
  295. image {
  296. width: 32rpx;
  297. height: 32rpx;
  298. margin-right: 10rpx;
  299. }
  300. }
  301. }
  302. }
  303. .model {
  304. width: 100%;
  305. z-index: 155;
  306. background: #FFFFFF;
  307. padding-bottom: 20rpx;
  308. .model-date {
  309. width: 100%;
  310. padding: 20rpx 80rpx;
  311. border-bottom: 1rpx solid #F1F1F1;
  312. .model-item {
  313. width: 225rpx;
  314. text-align: center;
  315. font-size: 28rpx;
  316. color: #999;
  317. position: relative;
  318. padding: 10rpx 0;
  319. text-align: center;
  320. border-radius: 8rpx;
  321. border: 1rpx solid #999;
  322. }
  323. .act {
  324. color: #FFFFFF;
  325. background: #FFBE2C;
  326. border: 1rpx solid #FFBE2C;
  327. }
  328. }
  329. .model-btn {
  330. text-align: center;
  331. color: #FFFFFF;
  332. height: 80rpx;
  333. border-radius: none;
  334. width: 80%;
  335. opacity: 1;
  336. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  337. border-radius: 8rpx;
  338. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
  339. margin: 0 auto;
  340. margin-top: 20rpx;
  341. }
  342. }
  343. </style>