index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. <template>
  2. <!-- 奖励明细页面 -->
  3. <view class="header">
  4. <view class="header-one">
  5. </view>
  6. <view class="content">
  7. <u-tabs style="width: 500rpx;" bg-color="#0095ff" inactive-color="#FFFFFF" active-color="#fff" :list="list"
  8. :is-scroll="false" :current="current" @change="change"></u-tabs>
  9. <u-select :mask-close-able="false" @cancel="clear" style=" color: #fff;" @confirm="confirm" v-model="showBrand" value-name="brandId" label-name="brandName" :list="brandList"></u-select>
  10. <u-calendar style=" color: #fff;" @change="changetime" v-model="showDate" :mode="mode"></u-calendar>
  11. <view @click="search">
  12. <u-search placeholder="请输入胎号或规格" v-model="input" :clearabled="true" @change="handleSearch" :show-action="false" :animation="true"></u-search>
  13. </view>
  14. </view>
  15. <view v-if="count!=0">
  16. <view class="content-one" v-for="(item,index) in datalist" :key="index">
  17. <view class="content-one-view">
  18. </view>
  19. <view class="content-one-text">获得奖励:{{item.money}}元</view>
  20. <view class="content-two">
  21. <view class="">
  22. 轮胎型号
  23. </view>
  24. <view class="">
  25. {{item.tireModel}}
  26. </view>
  27. </view>
  28. <view class="content-two">
  29. <view class="">
  30. 扫码胎号
  31. </view>
  32. <view class="">
  33. {{item.tyreNum}}
  34. </view>
  35. </view>
  36. <view class="content-two">
  37. <view class="">
  38. 奖励类型
  39. </view>
  40. <view class="">
  41. {{getWay}}
  42. </view>
  43. </view>
  44. <view class="content-two">
  45. <view class="">
  46. 获得时间
  47. </view>
  48. <view class="">
  49. {{item.createTime}}
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <view v-else style="margin-top: 400rpx;">
  55. <u-empty text="暂无数据" mode="list"></u-empty>
  56. </view>
  57. <u-loadmore v-if="datalist.length>3" :status="status" />
  58. </view>
  59. </template>
  60. <script>
  61. import {
  62. request
  63. } from '../../../common/request/request'
  64. require("promise.prototype.finally").shim()
  65. export default {
  66. data() {
  67. return {
  68. datalist: [],
  69. status: 'loadmore',
  70. getWay: '',
  71. input: '',
  72. list: [{
  73. name: '全部'
  74. }, {
  75. name: '品牌'
  76. }, {
  77. name: '时间',
  78. }],
  79. brandList:JSON.parse(JSON.stringify([])),
  80. current: 0,
  81. // 默认页数
  82. current1: 1,
  83. showBrand: false,
  84. showDate: false,
  85. mode: 'range',
  86. // 开始时间
  87. startTime: '',
  88. // 结束时间
  89. endTime: '',
  90. pages: '',
  91. count:'',
  92. datalength: '',
  93. label: '',
  94. };
  95. },
  96. created() {
  97. this.data()
  98. this.getBrandList()
  99. },
  100. methods: {
  101. // 获取奖励明细
  102. data() {
  103. uni.showLoading({
  104. title: '加载中...'
  105. });
  106. request({
  107. url: '/myPage/getPageScanRewordList',
  108. method: 'post',
  109. data: {
  110. storeId:this.$store.state.storeInfo.storeId,
  111. userId:this.$store.state.storeInfo.userId,
  112. 'searchKey': this.input,
  113. 'current': this.current1,
  114. 'size': '10'
  115. }
  116. }).then(res => {
  117. console.log(res)
  118. // this.datalist = res.data.data
  119. this.count = res.data.count
  120. this.datalength = res.data.data.length
  121. this.datalist = this.datalist.concat(res.data.data)
  122. // 判断扫码类型
  123. for (var i = 0; i < res.data.data.length; i++) {
  124. if (res.data.data[i].getWay == 0) {
  125. this.getWay = "门店扫码"
  126. } else {
  127. this.getWay = "车主扫码"
  128. }
  129. }
  130. }).catch(err => {
  131. console.log(err)
  132. })
  133. .finally(() => {
  134. setTimeout(() => {
  135. uni.hideLoading();
  136. this.loading = false;
  137. }, 1000)
  138. })
  139. },
  140. // 时间选择器获取时间
  141. changetime(e) {
  142. console.log(e)
  143. this.startTime = e.startDate
  144. this.endTime = e.endDate
  145. this.datalist= []
  146. request({
  147. url: '/myPage/getPageScanRewordList',
  148. method: 'post',
  149. data: {
  150. storeId:this.$store.state.storeInfo.storeId,
  151. userId:this.$store.state.storeInfo.userId,
  152. 'current': '1',
  153. 'size': '10',
  154. 'startTime': this.startTime +' 00:00:00',
  155. 'endTime': this.endTime +' 23:59:59'
  156. }
  157. }).then(res => {
  158. console.log(res)
  159. this.datalist = this.datalist.concat(res.data.data)
  160. this.count = res.data.count
  161. // 判断扫码类型
  162. for (var i = 0; i < res.data.data.length; i++) {
  163. if (res.data.data[i].getWay == 0) {
  164. this.getWay = "车主扫码"
  165. } else {
  166. this.getWay = "门店扫码"
  167. }
  168. }
  169. console.log(res.data.data)
  170. }).catch(err => {
  171. console.log(err)
  172. })
  173. .finally(() => {
  174. setTimeout(() => {
  175. uni.hideLoading();
  176. this.loading = false;
  177. }, 1000)
  178. })
  179. },
  180. // 获取品牌列表
  181. getBrandList() {
  182. request({
  183. url: '/baseReq/getBrandList',
  184. method: 'post',
  185. data: {
  186. storeId:this.$store.state.storeInfo.storeId,
  187. userId:this.$store.state.storeInfo.userId
  188. }
  189. }).then(res => {
  190. this.brandList = JSON.parse(JSON.stringify(res.data.data))
  191. }).catch(err => {
  192. console.log(err)
  193. })
  194. .finally(() => {
  195. setTimeout(() => {
  196. uni.hideLoading();
  197. this.loading = false;
  198. }, 1000)
  199. })
  200. },
  201. // 搜索框
  202. handleSearch(e) {
  203. console.log(e)
  204. this.datalist = []
  205. this.data()
  206. },
  207. // 点击获取品牌
  208. confirm(e) {
  209. console.log(e)
  210. console.log(e[0].label)
  211. this.label = e[0].label
  212. request({
  213. url: '/myPage/getPageScanRewordList',
  214. method: 'post',
  215. data: {
  216. storeId:this.$store.state.storeInfo.storeId,
  217. userId:this.$store.state.storeInfo.userId,
  218. 'current': '1',
  219. 'size': '10',
  220. 'searchKey': this.label
  221. }
  222. }).then(res => {
  223. console.log(res)
  224. this.count = res.data.count
  225. this.datalength = res.data.data.length
  226. this.datalist = this.datalist.concat(res.data.data)
  227. // 判断扫码类型
  228. for (var i = 0; i < res.data.data.length; i++) {
  229. if (res.data.data[i].getWay == 0) {
  230. this.getWay = "车主扫码"
  231. } else {
  232. this.getWay = "门店扫码"
  233. }
  234. }
  235. console.log(res.data.data)
  236. }).catch(err => {
  237. console.log(err)
  238. })
  239. .finally(() => {
  240. setTimeout(() => {
  241. uni.hideLoading();
  242. this.loading = false;
  243. }, 1000)
  244. })
  245. },
  246. // 点击取消按钮
  247. clear() {
  248. this.current = 0
  249. console.log("@@")
  250. },
  251. search() {
  252. this.$u.route({
  253. url: 'pages/me/search/index',
  254. })
  255. },
  256. change(index) {
  257. this.current = index;
  258. if (this.current == 1) {
  259. this.showBrand = true
  260. this.datalist= []
  261. } else if (this.current == 2) {
  262. this.showDate = true
  263. this.datalist= []
  264. }
  265. this.current1 = 1
  266. this.datalist= []
  267. this.data()
  268. }
  269. },
  270. onReachBottom() {
  271. console.log("@@@")
  272. console.log(this.count)
  273. console.log(this.datalength)
  274. setTimeout(() => {
  275. if (this.count > this.datalength) {
  276. this.current1 = ++this.current1;
  277. this.data()
  278. this.status = 'nomore'
  279. } else {
  280. this.status = 'loading';
  281. console.log("@@@")
  282. // this.status = 'nomore'
  283. }
  284. }, 1000)
  285. }
  286. }
  287. </script>
  288. <style lang="scss" scoped>
  289. .header {
  290. height: 400rpx;
  291. width: 100%;
  292. background: #0094FE;
  293. color: #fff;
  294. font-size: 28rpx;
  295. }
  296. .header-one {
  297. text-align: center;
  298. padding-top: 10rpx;
  299. }
  300. .header-one>text {
  301. font-size: 52rpx;
  302. }
  303. .content {
  304. display: flex;
  305. justify-content: space-between;
  306. width: 700rpx;
  307. margin-top: 80rpx;
  308. }
  309. .content-one {
  310. width: 690rpx;
  311. height: 305rpx;
  312. background: #FFFFFF;
  313. box-shadow: 0px 0px 24px 0px rgba(101, 176, 249, 0.41);
  314. border-radius: 20rpx;
  315. margin: 0 auto;
  316. margin-top: 30rpx;
  317. }
  318. .content-one-view {
  319. width: 6rpx;
  320. height: 30rpx;
  321. background: #0292FD;
  322. position: relative;
  323. top: 20rpx;
  324. left: 30rpx;
  325. }
  326. .content-one-text {
  327. position: relative;
  328. top: -8rpx;
  329. left: 60rpx;
  330. font-size: 24rpx;
  331. font-weight: bold;
  332. color: #000;
  333. }
  334. .content-one-time {
  335. position: relative;
  336. top: -40rpx;
  337. left: 530rpx;
  338. font-size: 13rpx;
  339. color: #626262;
  340. }
  341. .content-two {
  342. display: flex;
  343. justify-content: space-between;
  344. font-size: 24rpx;
  345. color: #6A6A6A;
  346. margin-top: 25rpx;
  347. margin-left: 30rpx;
  348. margin-right: 30rpx;
  349. }
  350. </style>