You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

503 line
11 KiB

  1. <template>
  2. <div class='page-home'>
  3. <div class="back-box">
  4. <van-icon class="back-icon" @click="goBack" size=".6rem" name="arrow-left" color="#fff" />
  5. <span>积分操作记录</span>
  6. </div>
  7. <div class="btn-box">
  8. <button class="btn-tab" @click="dealType('type01')" :class="cardType==='type01'?'btn-tab-active':''">赠券库存</button>
  9. <button class="btn-tab" @click="dealType('type02')" :class="cardType==='type02'?'btn-tab-active':''">注券记录</button>
  10. </div>
  11. <div class="header-wrap" v-if="cardType==='type02'">
  12. <div class="header-box">
  13. <div class="text-left" @click="showPicker('startTime')">
  14. <span>开始日期</span>
  15. <span>{{startTime}}</span>
  16. </div>
  17. <p class="text-center">至</p>
  18. <div class="text-right" @click="showPicker('endTime')">
  19. <span>结束日期</span>
  20. <span>{{endTime}}</span>
  21. </div>
  22. <button class="search-btn" @click="doSearch">查询</button>
  23. </div>
  24. </div>
  25. <van-list
  26. v-if="cardType==='type01'"
  27. style="margin-bottom:2rem;height:calc(100vh - 7rem);overflow-y:auto;"
  28. v-model="loading"
  29. :finished="finished"
  30. finished-text="没有更多了"
  31. @load="loadMore"
  32. >
  33. <div class="item-record" v-for="(item,index) in recordList01" :key="index">
  34. <div class="item-detail">
  35. <div class="item-left">
  36. <span>{{item.title}}</span>
  37. <span v-if="item.validStartDate">有效期:{{dealTime(item.validStartDate)}}至{{dealTime(item.validEndDate)}}</span>
  38. <span v-if="!item.validStartDate">{{'有效期:自领取后'+ item.validDays+'日内有效'}}</span>
  39. </div>
  40. <div class="item-right">
  41. <span>库存:{{item.merchantRemain}}</span>
  42. <span v-if="item.status == 1">已作废</span>
  43. </div>
  44. </div>
  45. </div>
  46. </van-list>
  47. <van-list
  48. v-if="cardType==='type02'"
  49. style="margin-bottom:2rem;height:calc(100vh - 8.69rem);overflow-y:auto;"
  50. v-model="loading"
  51. :finished="finished"
  52. finished-text="没有更多了"
  53. @load="loadMore"
  54. >
  55. <div class="item-record02" v-for="(item,index) in recordList02" :key="index">
  56. <p class="item-time02">{{dealTime(item.createDate)}}</p>
  57. <div class="item-detail02">
  58. <div class="item-left02">
  59. <span>{{item.title}}</span>
  60. <span>{{item.userName}}</span>
  61. <span>操作人:{{item.operator}}</span>
  62. </div>
  63. <div class="item-right02">
  64. <span>用户手机:{{item.phone}}</span>
  65. <span></span>
  66. <span>注券时间:{{dealTime(item.createDate)}}</span>
  67. </div>
  68. </div>
  69. </div>
  70. </van-list>
  71. <div class="picker-bg" v-if="isShowPicker">
  72. <van-datetime-picker
  73. @confirm="changeTime"
  74. @cancel="isShowPicker=false"
  75. v-model="currentDate"
  76. type="date"
  77. title="选择年月日"
  78. :min-date="minDate"
  79. :max-date="maxDate"
  80. />
  81. </div>
  82. </div>
  83. </template>
  84. <script type="text/babel">
  85. import {formatDate} from '@/filters'
  86. // 组件
  87. export default {
  88. name: 'page-index',
  89. components: {
  90. },
  91. data() {
  92. return {
  93. isShowPicker: false,
  94. minDate: new Date(1990, 0, 1),
  95. maxDate: new Date(),
  96. currentDate: new Date(),
  97. startTime: formatDate(new Date(),'yyyy-MM-dd'),
  98. endTime: formatDate(new Date(),'yyyy-MM-dd'),
  99. timeType: 'startTime',
  100. pageNum: 1,
  101. recordList01: [],
  102. recordList02: [],
  103. loading: false,
  104. finished: false,
  105. cardType: 'type01',
  106. };
  107. },
  108. mounted() {
  109. this.wxMerchantcouponSend()
  110. },
  111. methods: {
  112. dealType (str) {
  113. console.log(str)
  114. this.cardType = str
  115. this.doSearch()
  116. },
  117. doSearch () {
  118. this.pageNum = 1
  119. this.recordList01 = []
  120. this.recordList02 = []
  121. this.wxMerchantcouponSend()
  122. },
  123. loadMore () {
  124. this.pageNum += 1
  125. this.wxMerchantcouponSend()
  126. },
  127. dealTime (time) {
  128. return formatDate(new Date(time), 'yyyy-MM-dd');
  129. },
  130. showPicker (str) {
  131. this.isShowPicker = true;
  132. this.timeType = str;
  133. this.currentDate = new Date(this[str])
  134. },
  135. changeTime (val) {
  136. this[this.timeType] = formatDate(new Date(val),'yyyy-MM-dd');
  137. this.isShowPicker = false;
  138. },
  139. /**
  140. * 检查用户是否有权限修改收款账户
  141. */
  142. wxMerchantcouponSend() {
  143. this.loading = true
  144. let url = ''
  145. let params = {}
  146. if (this.cardType === 'type01') {
  147. url = 'wxMerchantcouponSend'
  148. params = {
  149. pageNum: this.pageNum,
  150. pageSize: 10,
  151. sendType: 7,
  152. expired:'',
  153. status:'',
  154. }
  155. } else {
  156. url = 'wxMerchantcouponStory'
  157. params = {
  158. pageNum: this.pageNum,
  159. pageSize: 10,
  160. channelType:7,
  161. beginDate: this.startTime ,
  162. endDate: this.endTime,
  163. }
  164. }
  165. this.$http[url]({
  166. method: 'get',
  167. params: params
  168. }).then(res => {
  169. if (res.code === 200) {
  170. this.loading = false
  171. this.finished = res.data.list.length === 0
  172. if (this.cardType === 'type01') {
  173. this.recordList01 = this.recordList01.concat(res.data.list)
  174. } else {
  175. this.recordList02 = this.recordList02.concat(res.data.list)
  176. }
  177. }
  178. })
  179. },
  180. goBack() {
  181. this.$router.go(-1)
  182. }
  183. }
  184. }
  185. </script>
  186. <style lang="less" rel="stylesheet/less" >
  187. .floatR {
  188. float: right;
  189. }
  190. @font-face {
  191. font-family: 'iconfont'; /* project id 1353693 */
  192. src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot');
  193. src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'),
  194. url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'),
  195. url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'),
  196. url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'),
  197. url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg');
  198. }
  199. .page-home {
  200. background: #f8f8fa;
  201. .back-box {
  202. position: absolute;
  203. left: 0;
  204. top: 0;
  205. z-index: 1000;
  206. width: 100%;
  207. height: 1.3rem;
  208. line-height: 1.3rem;
  209. background: #52A0FD;
  210. color: #fff;
  211. font-size: @fontSize16;
  212. .back-icon {
  213. float: left;
  214. margin: .4rem 0 0 .1rem;
  215. }
  216. }
  217. }
  218. .header-wrap {
  219. width: 100%;
  220. height: 4rem;
  221. position: relative;
  222. top: -1rem;
  223. .header-bg {
  224. width: 100%;
  225. height: 4rem;
  226. }
  227. .header-box {
  228. position: absolute;
  229. left: 3.5%;
  230. top: 1.4rem;
  231. width: 93%;
  232. height: 3rem;
  233. background: url('../../assets/images/reviveimg.png') no-repeat;
  234. background-size: 100%;
  235. border-radius: .2rem;
  236. box-shadow: 2px 6px .3rem rgba(0,0,0,.15);
  237. overflow: hidden;
  238. .header-logo {
  239. float: left;
  240. width: 1.7rem;
  241. height: 1.7rem;
  242. margin: .7rem .5rem 0 .5rem;
  243. }
  244. .header-name-box {
  245. float: left;
  246. width: 5.5rem;
  247. margin-top: .7rem;
  248. .header-title {
  249. width: 100%;
  250. height: .75rem;
  251. line-height: .75rem;
  252. color: #333;
  253. font-size: @fontSize16;
  254. text-align: left;
  255. text-overflow: ellipsis;
  256. white-space: nowrap;
  257. overflow: hidden;
  258. &:nth-of-type(2) {
  259. color: #999;
  260. }
  261. }
  262. }
  263. .header-detail {
  264. float: right;
  265. width: .7rem;
  266. height: .7rem;
  267. margin-top: 1.2rem;
  268. margin-right: .3rem;
  269. }
  270. }
  271. }
  272. .text-left,.text-right {
  273. float: left;
  274. width: 4.4rem;
  275. height: 2rem;
  276. font-size: @fontSize16;
  277. span {
  278. display: block;
  279. margin-top: .3rem;
  280. &:nth-of-type(1) {
  281. color: #888;
  282. }
  283. }
  284. }
  285. .text-center {
  286. float: left;
  287. width: .5rem;
  288. height: 2rem;
  289. line-height: 2rem;
  290. }
  291. .search-btn {
  292. width: 100%;
  293. float: left;
  294. height:1rem;
  295. background: #51a0fc;
  296. color: #fff;
  297. }
  298. .picker-bg {
  299. width: 100vw;
  300. height: 100vh;
  301. background: rgba(0,0,0,.2);
  302. position: fixed;
  303. left: 0;
  304. top: 0;
  305. z-index: 100;
  306. /deep/ .van-picker {
  307. width: 100%;
  308. position:absolute!important;
  309. bottom: 0;
  310. left: 0;
  311. }
  312. }
  313. .item-record {
  314. width: 100%;
  315. font-size: @fontSize14;
  316. .item-time {
  317. width: 100%;
  318. height: .8rem;
  319. line-height: .8rem;
  320. color: #888;
  321. text-align: left;
  322. padding-left: .4rem;
  323. }
  324. .item-detail {
  325. margin: .35rem .4rem;
  326. padding: 0 .4rem;
  327. height: 2rem;
  328. border-radius: .1rem;
  329. background: rgba(0,0,0,0.08);
  330. .item-left,.item-right {
  331. float: left;
  332. span {
  333. display: block;
  334. margin-top: .4rem;
  335. font-size: @fontSize16;
  336. text-align: left;
  337. &:nth-of-type(1) {
  338. max-width: 6rem;
  339. text-overflow: ellipsis;
  340. white-space: nowrap;
  341. overflow: hidden;
  342. }
  343. &:nth-of-type(2) {
  344. margin-top: .2rem;
  345. color: #888;
  346. }
  347. }
  348. }
  349. .item-right {
  350. float: right;
  351. span {
  352. text-align: right;
  353. &:nth-of-type(2) {
  354. font-size: @fontSize14;
  355. color: red;
  356. }
  357. }
  358. }
  359. }
  360. }
  361. .item-record02 {
  362. width: 100%;
  363. font-size: @fontSize14;
  364. .item-time02 {
  365. width: 100%;
  366. height: .8rem;
  367. line-height: .8rem;
  368. color: #888;
  369. text-align: left;
  370. padding-left: .4rem;
  371. }
  372. .item-detail02 {
  373. padding: 0 .4rem;
  374. width: 100%;
  375. height: 2.2rem;
  376. background: #fff;
  377. .item-left02,.item-right02 {
  378. float: left;
  379. span {
  380. display: block;
  381. margin-top: .3rem;
  382. font-size: @fontSize14;
  383. text-align: left;
  384. &:nth-of-type(1) {
  385. max-width: 5rem;
  386. text-overflow: ellipsis;
  387. white-space: nowrap;
  388. overflow: hidden;
  389. }
  390. &:nth-of-type(2) {
  391. min-height: .4rem;
  392. margin-top: .2rem;
  393. color: #888;
  394. }
  395. &:nth-of-type(3) {
  396. margin-top: .2rem;
  397. color: #888;
  398. }
  399. }
  400. }
  401. .item-right02 {
  402. float: right;
  403. span {
  404. text-align: right;
  405. &:nth-of-type(1) {
  406. max-width: 5rem;
  407. text-overflow: ellipsis;
  408. white-space: nowrap;
  409. overflow: hidden;
  410. }
  411. &:nth-of-type(2) {
  412. min-height: .4rem;
  413. margin-top: .2rem;
  414. color: #888;
  415. }
  416. &:nth-of-type(3) {
  417. margin-top: .2rem;
  418. color: #888;
  419. }
  420. }
  421. }
  422. }
  423. }
  424. .btn-box {
  425. width: 100%;
  426. margin-top: 1.7rem;
  427. overflow: hidden;
  428. .btn-tab {
  429. float: left;
  430. width: 3.4rem;
  431. height: 1rem;
  432. border-radius: .1rem ;
  433. background: #fff;
  434. color: #333;
  435. margin-left: 1.6rem;
  436. &:last-child {
  437. margin-left:0;
  438. }
  439. }
  440. .btn-tab-active {
  441. background: #51a0fc;
  442. color: #fff;
  443. }
  444. }
  445. </style>