todayPoint.wpy 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. //今日积分
  2. <style lang="less">
  3. page {
  4. height: 100%;
  5. background-color: #EBF5FA;
  6. position: relative;
  7. }
  8. .page-container {
  9. width: 100%;
  10. min-height: 100%;
  11. padding-bottom: 282rpx;
  12. box-sizing: border-box;
  13. position: relative;
  14. font-family: PingFang SC;
  15. .energyHead {
  16. padding: 34rpx 44rpx 32rpx;
  17. display: flex;
  18. justify-content: space-between;
  19. .totalEnergy {
  20. display: flex;
  21. flex-direction: column;
  22. // align-items: flex-end;
  23. // justify-content: flex-end;
  24. height: 80px;
  25. line-height: 1;
  26. .name {
  27. color: #4d5262;
  28. font-size: 25rpx;
  29. }
  30. .value {
  31. padding-top: 12px;
  32. color: #000;
  33. font-size: 87rpx;
  34. font-family: Montserrat;
  35. }
  36. }
  37. .pointExplain {
  38. color: #4d5262;
  39. display: flex;
  40. align-items: start;
  41. padding-top: 20rpx;
  42. .text {
  43. font-size: 24rpx;
  44. margin-right: 8rpx;
  45. }
  46. .icon {
  47. font-size: 30rpx;
  48. }
  49. }
  50. }
  51. .eachMonth {
  52. background: #fff;
  53. padding-left: 44rpx;
  54. .dateTitle {
  55. padding: 50rpx 44rpx 50rpx 0;
  56. display: flex;
  57. justify-content: space-between;
  58. align-items: baseline;
  59. .allButton {
  60. display: flex;
  61. font-size: 24rpx;
  62. color:#4d5262;
  63. }
  64. }
  65. .eachItem {
  66. //padding-left: 44rpx;
  67. display: flex;
  68. flex-wrap: nowrap;
  69. // justify-content: flex-start;
  70. align-items: baseline;
  71. padding-top: 10rpx;
  72. padding-bottom: 20rpx;
  73. padding-right: 44rpx;
  74. // width: 100%;
  75. box-sizing: border-box;
  76. border-bottom: 1px solid #e6e6e6;
  77. .leftCont {
  78. color: #c4c4c4;
  79. font-size: 22rpx;
  80. width: 90rpx;
  81. // flex-shrink: 0;
  82. .date {
  83. white-space: nowrap;
  84. }
  85. .time {
  86. margin-top: 10rpx;
  87. }
  88. }
  89. .centerCont {
  90. flex: 1;
  91. overflow: hidden;
  92. .firstLine {
  93. padding-left: 37rpx;
  94. box-sizing: border-box;
  95. // width: 100%;
  96. color: #000;
  97. font-size: 28rpx;
  98. white-space: nowrap;
  99. text-overflow: ellipsis;
  100. overflow: hidden;
  101. }
  102. .secondLine {
  103. padding-left: 37rpx;
  104. box-sizing: border-box;
  105. // width: 100%;
  106. margin-top: 10rpx;
  107. color: #c4c4c4;
  108. font-size: 24rpx;
  109. overflow: hidden;
  110. white-space: nowrap;
  111. text-overflow: ellipsis;
  112. }
  113. }
  114. .addPoint {
  115. // flex-shrink: 0;
  116. text-align: right;
  117. width: 60rpx;
  118. color: #000;
  119. font-size: 29rpx;
  120. }
  121. }
  122. }
  123. .logo-text {
  124. position: absolute;
  125. bottom: 0;
  126. display: flex;
  127. justify-content: center;
  128. width: 100%;
  129. height: 24rpx;
  130. padding: 98rpx 0 80rpx;
  131. }
  132. .nodata {
  133. text-align: center;
  134. color: #c4c4c4;
  135. position: absolute;
  136. top: 50%;
  137. left: 0;
  138. width: 100%;
  139. transform: translate(0px, -100px);
  140. .nodataImg {
  141. width: 100%;
  142. image {
  143. width: 96px;
  144. height: 96px;
  145. }
  146. }
  147. .firstTitle {
  148. font-size: 34rpx;
  149. }
  150. .secondTitle {
  151. margin-top: 6px;
  152. font-size: 26rpx;
  153. .showExplain {
  154. text-decoration: underline;
  155. }
  156. }
  157. }
  158. }
  159. </style>
  160. <template>
  161. <div class="page-container">
  162. <div
  163. class="energyHead"
  164. v-if="!listNoData"
  165. >
  166. <div
  167. class="totalEnergy"
  168. @tap="showAllEnergy"
  169. >
  170. <div class="name">我的{{carbonCreditText}}</div>
  171. <div class="value">{{todayIntegral||todayIntegral==0?todayIntegral:'--'}}</div>
  172. </div>
  173. <div
  174. class="pointExplain"
  175. @tap="showPointExplain"
  176. >
  177. <span class="text">积分说明</span>
  178. <van-icon
  179. class="icon"
  180. name="question-o"
  181. />
  182. </div>
  183. </div>
  184. <div
  185. class="eachMonth"
  186. v-if="!listNoData"
  187. >
  188. <div class="dateTitle">
  189. <span>{{nowDate}}</span>
  190. <div
  191. class="allButton"
  192. @tap="showAll"
  193. ><span>查看全部</span>
  194. <van-icon name="arrow" />
  195. </div>
  196. </div>
  197. <div
  198. class="eachItem"
  199. v-for="item in todayData"
  200. >
  201. <div class="leftCont">
  202. <div class="date">{{item.showDate?item.showDate:'--'}}</div>
  203. <div class="time">{{item.showTime?item.showTime:'--'}}</div>
  204. </div>
  205. <div class="centerCont">
  206. <div class="firstLine">{{item.integralDetails?item.integralDetails:'--'}}</div>
  207. <div class="secondLine">{{item.spaceName?item.spaceName:'--'}}</div>
  208. </div>
  209. <div class="addPoint">
  210. +{{item.integral}}
  211. </div>
  212. </div>
  213. </div>
  214. <div>
  215. <image
  216. class="logo-text"
  217. src="{{h5StaticPath}}/page-home/tenatslink.svg"
  218. ></image>
  219. </div>
  220. <div
  221. class="nodata"
  222. v-show="listNoData"
  223. >
  224. <div class="nodataImg">
  225. <image
  226. :src="h5StaticPath+'/page-portrait/nodata.png'"
  227. mode="widthFix"
  228. />
  229. </div>
  230. <div class="firstTitle">您还没有{{ carbonCreditText }}</div>
  231. <div class="secondTitle">快去查看<span
  232. class="showExplain"
  233. @click="showPointExplain"
  234. >积分说明</span>来增加您的{{carbonCreditText}}吧</div>
  235. </div>
  236. </div>
  237. </template>
  238. <script>
  239. import wepy from '@wepy/core'
  240. import store from '@/store'
  241. import config from '@/config'
  242. import { mapState } from '@wepy/x'
  243. import { queryAllIntegral } from '@/packagesEnv/api/portrait'
  244. import moment from 'moment'
  245. import { carbonCredit } from '../common.js'
  246. wepy.page({
  247. store,
  248. data: {
  249. carbonCreditText: '',
  250. nowDate: '',
  251. todayData: [],
  252. todayIntegral: 0, // 今天节能总分
  253. listNoData: false,
  254. h5StaticPath: config.h5StaticPath
  255. },
  256. computed: {
  257. ...mapState({
  258. token: state => state.user.token,
  259. userInfo: state => state.user.userInfo,
  260. projectId: state => state.company && state.company.companyConfig && state.company.companyConfig.sagacareProjectId
  261. })
  262. },
  263. onLoad() {
  264. var _this = this
  265. _this.queryAllIntegral()
  266. this.nowDate = moment().format('YYYY年MM月DD日')
  267. this.carbonCreditText = carbonCredit(this.projectId)
  268. },
  269. onReady() { },
  270. methods: {
  271. queryAllIntegral() { // 获取今天所有积分记录
  272. var today = moment().format('YYYYMMDD')
  273. var _this = this
  274. var param = {
  275. criteria: {
  276. date: today,
  277. integral: {
  278. '$ne': 0
  279. }
  280. // "date": '20210923'
  281. },
  282. 'orders': [
  283. {
  284. 'column': 'updateTime',
  285. 'asc': false
  286. }
  287. ]
  288. }
  289. console.log('this.userInfo', this.userInfo)
  290. queryAllIntegral(param).then(function (res) {
  291. _this.todayData = res.content || []
  292. var total = 0
  293. _this.todayData.forEach(function (item) {
  294. item.showDate = moment(item.updateTime).format('MM月DD日')
  295. item.showTime = moment(item.updateTime).format('HH:mm')
  296. total = total + item.integral
  297. })
  298. let str = total.toString()
  299. const idx = str.indexOf('.')
  300. if (idx > 0) {
  301. str = str.slice(0, idx + 2)
  302. }
  303. _this.todayIntegral = str
  304. _this.listNoData = _this.todayData.length == 0
  305. })
  306. },
  307. showAll() {
  308. wx.uma.trackEvent('portrait_todaypoint_showall', { key: '使用统计-今日新增记录-查看全部按钮' })
  309. wx.navigateTo({
  310. url: './energyPoint'
  311. })
  312. },
  313. showPointExplain() {
  314. wx.uma.trackEvent('portrait_todaypoint_explainclick', { key: '使用统计-今日新增记录-积分说明' })
  315. wx.navigateTo({
  316. url: './pointExplain'
  317. })
  318. }
  319. }
  320. })
  321. </script>
  322. <config>
  323. {
  324. 'navigationBarBackgroundColor': '#EBF5FA',
  325. 'navigationBarTextStyle':'black',
  326. 'backgroundColor': '#f3f3f3',
  327. 'navigationBarTitleText': '',
  328. usingComponents: {
  329. "van-icon": "module:@vant/weapp/dist/icon",
  330. }
  331. }
  332. </config>