shareList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. <template>
  2. <view class="container">
  3. <view class="header-block">
  4. <view class="tab-h flex">
  5. <view :class="['item',type == 1?'active':'']" @click="onChooseType(1)">全部</view>
  6. <view :class="['item',type == 2?'active':'']" @click="onChooseType(2)">今日</view>
  7. <view :class="['item',type == 3?'active':'']" @click="onChooseType(3)">筛选</view>
  8. </view>
  9. <view class="time-picker flex" v-if="type == 3">
  10. <view class="picker-box">
  11. <picker mode="date" @change="onChangeDate" data-type="start">
  12. <input class="date-box" :value="start" placeholder="开始日期" disabled></input>
  13. </picker>
  14. </view>
  15. <view class="and-box">至</view>
  16. <view class="picker-box">
  17. <picker mode="date" @change="onChangeDate" data-type="end">
  18. <input class="date-box" :value="end" placeholder="结束日期" disabled></input>
  19. </picker>
  20. </view>
  21. <view class="sub-btn" @click="onSearch">提交</view>
  22. </view>
  23. </view>
  24. <view class="data-block">
  25. <view class="title">分享获得积分</view>
  26. <view class="count">{{count}}</view>
  27. <view class="name" v-if="type != 3">{{type== 1?'全部积分':'今日积分'}}</view>
  28. <block v-else>
  29. <view class="name" v-if="!params.start&& !params.end ">全部积分</view>
  30. <view class="name" v-if="params.start && !params.end">{{params.start}}之后积分</view>
  31. <view class="name" v-if="!params.start && params.end">截至{{params.end}}积分</view>
  32. <view class="name" v-if="params.start && params.end">{{params.start}}至{{params.end}}积分</view>
  33. </block>
  34. </view>
  35. <view class="list">
  36. <view class="item" v-for="(item,index) in list">
  37. <view class="title-block flex flex-y-center">
  38. <image src="/static/wmtime.png" mode="aspectFit" class="icon-time"></image>
  39. <view class="time">{{item.create_time}}</view>
  40. </view>
  41. <view class="user flex flex-y-center">
  42. <image :src="item.user_avatar || '/static/avatar_def.png'" mode="aspectFill" class="avatar"></image>
  43. <view class="name">{{getUserName(item.user_name)}}</view>
  44. <!-- <view class="mobile">{{item.user_mobile}}</view> -->
  45. <view class="num">+{{item.share_score}}</view>
  46. </view>
  47. </view>
  48. </view>
  49. <block v-if="list.length <= 0 && !has_more">
  50. <view class="flex-x-center"><text style="margin-top:50rpx;color: #999;">暂无记录</text></view>
  51. </block>
  52. </view>
  53. </template>
  54. <script>
  55. import {
  56. mapState,
  57. mapMutations
  58. } from 'vuex';
  59. import {
  60. validTime
  61. } from "../../utils/util.js"
  62. export default {
  63. data() {
  64. return {
  65. type: 3,
  66. count: '--',
  67. list: [],
  68. page: 1,
  69. has_more: true,
  70. start: '',
  71. end: '',
  72. params: {
  73. }
  74. }
  75. },
  76. onLoad() {
  77. uni.setNavigationBarColor({
  78. frontColor: '#ffffff',
  79. backgroundColor: this.$store.state.color,
  80. })
  81. this.setColor = this.$store.state.color;
  82. this.getList()
  83. },
  84. onReachBottom() {
  85. if (this.has_more) {
  86. this.getList(this.page + 1)
  87. }
  88. },
  89. onPullDownRefresh() {
  90. this.getList()
  91. },
  92. computed: {
  93. ...mapState(['systemInfo', 'setColor', 'store_id', 'userInfo']),
  94. },
  95. methods: {
  96. getUserName(name) {
  97. if (name) {
  98. return name.substr(0, 1) + '**'
  99. } else {
  100. return '未知用户'
  101. }
  102. },
  103. onChooseType(e) {
  104. if (e == this.type) {
  105. return false
  106. }
  107. this.type = e
  108. if (e == 2) {
  109. let date = this.$utils.formatTime(new Date(), 'YYYY-mm-dd')
  110. this.params = {
  111. start: date,
  112. end: date
  113. }
  114. } else if (e == 3) {
  115. this.params = {}
  116. this.start = ''
  117. this.end = ''
  118. } else {
  119. this.params = {}
  120. }
  121. this.getList()
  122. },
  123. onChangeDate(e) {
  124. let type = e.currentTarget.dataset.type
  125. let val = e.detail.value
  126. if (type == 'start') {
  127. if (validTime(val, this.end) || this.end == '' || val == this.end) {
  128. this[type] = val
  129. } else {
  130. uni.showToast({
  131. title: "开始日期不能晚于结束日期",
  132. icon: 'none'
  133. })
  134. return false
  135. }
  136. } else if (type == 'end') {
  137. if (validTime(this.start, val) || this.start == '' || val == this.start) {
  138. this[type] = val
  139. } else {
  140. uni.showToast({
  141. title: "结束日期不能早于开始日期",
  142. icon: 'none'
  143. })
  144. return false
  145. }
  146. }
  147. },
  148. onSearch() {
  149. this.params = {
  150. start: this.start,
  151. end: this.end
  152. }
  153. this.getList()
  154. },
  155. getList(page = 1) {
  156. let params = Object.assign({
  157. store_id: this.store_id,
  158. user_id: this.userInfo.id,
  159. page,
  160. limit: 20,
  161. }, this.params)
  162. this.$http.request("yy/share_integral_data", params).then(res => {
  163. uni.stopPullDownRefresh()
  164. this.count = res.data.count
  165. this.has_more = res.data.list.length == 20
  166. if (page == 1) {
  167. uni.pageScrollTo({
  168. scrollTop:0,
  169. duration:0
  170. })
  171. this.list = res.data.list
  172. } else {
  173. this.list = this.list.concat(res.data.list)
  174. }
  175. }).catch(err => {
  176. uni.stopPullDownRefresh()
  177. })
  178. }
  179. }
  180. }
  181. </script>
  182. <style lang="scss">
  183. page {
  184. background: #f4f5f6;
  185. }
  186. .container {}
  187. .data-block {
  188. margin: 30rpx 24rpx 0rpx;
  189. background-color: #fff;
  190. border-radius: 12rpx;
  191. text-align: center;
  192. .title {
  193. height: 80rpx;
  194. border-bottom: 1rpx solid #f0f0f0;
  195. line-height: 80rpx;
  196. font-size: 28rpx;
  197. color: #333;
  198. font-weight: 500;
  199. }
  200. .count {
  201. font-size: 46rpx;
  202. font-weight: bold;
  203. color: #f00;
  204. padding: 20rpx 0 10rpx;
  205. }
  206. .name {
  207. font-size: 24rpx;
  208. color: #666;
  209. padding-bottom: 20rpx;
  210. }
  211. }
  212. .header-block {
  213. position: sticky;
  214. top: 0;
  215. z-index: 100;
  216. background-color: #fff;
  217. box-shadow: 0 10rpx 10rpx #f0f0f0;
  218. .tab-h {
  219. height: 80rpx;
  220. border-bottom: 2rpx solid #f0f0f0;
  221. .item {
  222. width: 33.333%;
  223. text-align: center;
  224. line-height: 80rpx;
  225. position: relative;
  226. font-size: 32rpx;
  227. }
  228. .item.active {
  229. color: $theme-color;
  230. font-weight: 500;
  231. &::after {
  232. display: block;
  233. content: "";
  234. width: 50%;
  235. height: 4rpx;
  236. border-radius: 2rpx;
  237. background-color: $theme-color;
  238. position: absolute;
  239. left: 50%;
  240. bottom: 0;
  241. transform: translateX(-50%);
  242. }
  243. }
  244. }
  245. .time-picker {
  246. padding: 24rpx;
  247. .picker-box {
  248. width: 240rpx;
  249. flex: none;
  250. .date-box {
  251. height: 60rpx;
  252. border-radius: 10rpx;
  253. background-color: #f0f0f0;
  254. box-sizing: border-box;
  255. padding: 0 20rpx;
  256. line-height: 60rpx;
  257. font-size: 26rpx;
  258. color: #666;
  259. }
  260. }
  261. .and-box {
  262. margin: auto;
  263. font-size: 26rpx;
  264. color: #000;
  265. }
  266. .sub-btn {
  267. margin-left: auto;
  268. height: 60rpx;
  269. color: #fff;
  270. background-color: $theme-color;
  271. padding: 0 30rpx;
  272. border-radius: 10rpx;
  273. font-size: 26rpx;
  274. line-height: 60rpx;
  275. font-weight: 500;
  276. }
  277. }
  278. }
  279. .list {
  280. padding: 30rpx 24rpx;
  281. .item {
  282. margin-bottom: 30rpx;
  283. border-radius: 12rpx;
  284. background-color: #fff;
  285. padding: 0 24rpx;
  286. .title-block {
  287. font-size: 24rpx;
  288. color: #666;
  289. line-height: 40rpx;
  290. border-bottom: 1rpx solid #f0f0f0;
  291. padding: 20rpx 0;
  292. .icon-time {
  293. display: block;
  294. width: 30rpx;
  295. height: 30rpx;
  296. margin-right: 10rpx;
  297. }
  298. }
  299. .user {
  300. padding: 24rpx 0;
  301. }
  302. .avatar {
  303. flex: none;
  304. display: block;
  305. width: 80rpx;
  306. height: 80rpx;
  307. border-radius: 50%;
  308. overflow: hidden;
  309. }
  310. .name {
  311. font-size: 26rpx;
  312. color: #333;
  313. width: 140rpx;
  314. overflow: hidden;
  315. text-overflow: ellipsis;
  316. white-space: nowrap;
  317. margin-left: 20rpx;
  318. }
  319. .mobile {
  320. font-size: 26rpx;
  321. color: #666;
  322. margin-left: 20rpx;
  323. }
  324. .num {
  325. font-size: 42rpx;
  326. color: #f00;
  327. font-weight: bold;
  328. margin-left: auto;
  329. }
  330. }
  331. // .item:not(:last-child){
  332. // border-bottom:2rpx solid #f0f0f0;
  333. // }
  334. }
  335. </style>