integral.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. <template>
  2. <view>
  3. <view class="app-bg">
  4. <image src="/static/img/detail_bg.png"></image>
  5. <view class="body fx-h fx-bc fx-ac">
  6. <view class="count">{{ user.integral || 0 }}</view>
  7. <view class="label">我的余额</view>
  8. </view>
  9. <view class="fukuan" @click="fukuan" style="position: absolute;right: 30rpx;top: 180rpx;">
  10. <image src="/static/img/fukuan.png" style="width: 50rpx;height: 50rpx;"></image>
  11. </view>
  12. </view>
  13. <uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left" @clickLeft="utils.navigateBack()" fixed title="我的趣豆"></uni-nav-bar>
  14. <view class="htop" :style="'height:calc(61vw - ' + statusBarHeight + 'px - 44px);'"></view>
  15. <view class="app-body">
  16. <view class="pannel fx-r fx-bc">
  17. <view class="item fx-h fx-bc fx-ac" @tap="tapSc">
  18. <image src="/static/img/detail_sc.png"></image>
  19. <view class="text">闪兑</view>
  20. </view>
  21. <view class="line"></view>
  22. <view class="item fx-h fx-bc fx-ac" @tap="TapZc">
  23. <image src="/static/img/detail_zc.png"></image>
  24. <view class="text">转账</view>
  25. </view>
  26. <view class="line"></view>
  27. <view class="item fx-h fx-bc fx-ac" @tap="TapZchu">
  28. <image src="/static/img/detail_zchu.png" style="width: 50rpx;height: 50rpx;"></image>
  29. <view class="text">转出</view>
  30. </view>
  31. </view>
  32. <!--列表数据-->
  33. <view class="nav-list fx-r fx-bc">
  34. <view class="item fx-h fx-bc" @tap="tapNav(item.code)" :class="form.type == item.code ? 'active' : ''" v-for="(item,index) in navList">
  35. <view class="label">{{ item.name }}</view>
  36. <image class="icon" v-if="form.type == item.code" src="/static/img/detail_d.png"></image>
  37. </view>
  38. <view class="fx-g1"></view>
  39. <view class="time fx-r fx-bc" @tap="isPicker = true">
  40. <view class="count">{{ form.dateStr || "" }}</view>
  41. <image class="icon" src="/static/img/detail_next.png"></image>
  42. </view>
  43. </view>
  44. <scroll-view scroll-y class="scroll" :style="'height: calc(100vh - 61vw - 100rpx - 130rpx);'" @scrolltolower="loadMoreData">
  45. <view class="sc-body">
  46. <view class="detail-list" v-if="data.length > 0">
  47. <view class="top fx-r">
  48. <view class="label">{{ this.form.dateStr }}</view>
  49. <view class="fx-g1"></view>
  50. <view class="label">收入:{{ this.total.inMoney || '0.00' }} 支出:{{ this.total.outMoney || '0.00' }}</view>
  51. </view>
  52. <view class="item fx-r fx-bc" v-for="(item,index) in data">
  53. <image class="icon" v-if="item.type == 0" src="/static/img/detail_in.png"></image>
  54. <image class="icon" v-if="item.type == 1" src="/static/img/detail_in.png"></image>
  55. <image class="icon" v-if="item.type == 2" src="/static/img/detail_out.png"></image>
  56. <view class="info">
  57. <view class="title">{{ item.title }}</view>
  58. <view class="tag">{{ item.content }}</view>
  59. <view class="time">{{ item.time }}</view>
  60. </view>
  61. <view class="fx-g1"></view>
  62. <view class="right fx-h">
  63. <view class="money" style="color:#e2a622;" v-if="item.type == 1">+{{item.v}}</view>
  64. <view class="money" v-if="item.type == 2">-{{item.v}}</view>
  65. <view class="fx-g1"></view>
  66. <view class="balance">余额:{{ item.money }}</view>
  67. </view>
  68. </view>
  69. </view>
  70. <view v-if="data.length > 0">
  71. <view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
  72. <image src="/static/img/xloading.png"></image>
  73. <text>正在载入更多...</text>
  74. </view>
  75. <view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
  76. </view>
  77. <u-empty
  78. v-if="data.length == 0 && isFirst"
  79. mode="data"
  80. icon="/static/img/no-empty.png"
  81. ></u-empty>
  82. </view>
  83. </scroll-view>
  84. </view>
  85. <PayDialog ref="payDialog" @getPassword="getPassword"></PayDialog>
  86. <u-datetime-picker :show="isPicker" v-model="datetime" @confirm="tapConfirm" @cancel="isPicker = false" @close="isPicker = false" mode="year-month"></u-datetime-picker>
  87. <u-popup :show="payCodeShow" @close="payCodeShow = false" @open="payCodeShow = true" mode="center">
  88. <view class="codeBox">
  89. <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="codePay" :size="size" :unit="unit"
  90. :background="background" :foreground="foreground" :pdground="pdground"
  91. :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake"
  92. :usingComponents="true" @result="qrR" />
  93. </view>
  94. </u-popup>
  95. </view>
  96. </view>
  97. </template>
  98. <style lang="scss">
  99. .codeBox{
  100. padding: 50rpx 50rpx;
  101. border-radius: 25rpx;
  102. }
  103. .app-bg{
  104. position: absolute;
  105. image{width: 100vw;height: 61vw;}
  106. .body{
  107. position: absolute;
  108. height: 61vw;
  109. width: 100vw;
  110. top: 0;
  111. .count{
  112. font-weight: 500;
  113. font-size: 64rpx;
  114. color: #fff;
  115. }
  116. .label{
  117. margin-top: 4px;
  118. color: #fff;
  119. }
  120. }
  121. }
  122. .app-body{
  123. padding: 0px 20rpx;
  124. position: relative;
  125. top: -100rpx;
  126. .pannel{
  127. background: #fff;
  128. width: calc(100% - 80rpx);
  129. margin-left: 40rpx;
  130. box-shadow: 0px 0px 20px 0px rgba(50,50,52,0.06);
  131. border-radius: 20px;
  132. padding: 40rpx 0;
  133. .item{
  134. width: calc(33.3% - 1px);
  135. image{width: 62rpx;height: 62rpx;}
  136. .text{
  137. font-weight: bold;
  138. font-size: 30rpx;
  139. color: #333333;
  140. margin-top: 4rpx;
  141. }
  142. }
  143. .line{
  144. width: 2rpx;
  145. height: 74rpx;
  146. background: #DCDFE6;
  147. }
  148. }
  149. }
  150. .nav-list{
  151. height: 100rpx;
  152. .item{
  153. margin-right: 50rpx;
  154. .label{
  155. font-weight: bold;
  156. font-size: 30rpx;
  157. color: #5C5C5C;
  158. }
  159. &.active{
  160. .label{
  161. font-weight: bold;
  162. font-size: 36rpx;
  163. color: #2C2C2C;
  164. }
  165. .icon{
  166. width: 36rpx;
  167. height: 14rpx;
  168. margin-top: 4rpx;
  169. }
  170. }
  171. }
  172. .time{
  173. .count{
  174. font-weight: bold;
  175. font-size: 28rpx;
  176. color: #2C2C2C;
  177. }
  178. .label{
  179. font-weight: bold;
  180. font-size: 30rpx;
  181. color: #2C2C2C;
  182. margin-left: 6rpx;
  183. }
  184. .icon{
  185. margin-left: 10rpx;
  186. width: 20rpx;
  187. height: 12rpx;
  188. }
  189. }
  190. }
  191. .detail-list{
  192. background: #FFFFFF;
  193. border-radius: 20rpx;
  194. padding: 40rpx 30rpx;
  195. .top{
  196. margin-bottom: 40rpx;
  197. .label{font-weight: 500;font-size: 25rpx;color: #979797;}
  198. }
  199. .item{
  200. margin-bottom: 40rpx;
  201. .icon{width: 84rpx;height: 84rpx;}
  202. .info{
  203. width: calc(100% - 280rpx);
  204. margin-left: 16rpx;
  205. .title{font-weight: bold;font-size: 28rpx;color: #333333;}
  206. .tag{font-size: 20rpx;color: #979797; margin-top: 6rpx;}
  207. .time{font-size: 24rpx;color: #979797;}
  208. }
  209. .right{
  210. text-align: right;
  211. width: 160rpx;
  212. .money{
  213. font-weight: bold;
  214. font-size: 34rpx;
  215. color: #FF4C4C;
  216. }
  217. .balance{
  218. font-weight: 500;
  219. font-size: 24rpx;
  220. color: #979797;
  221. }
  222. }
  223. }
  224. }
  225. </style>
  226. <script>
  227. import PayDialog from "@/components/ui-pay/payDialog.vue";
  228. import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
  229. import {mapState,mapMutations } from 'vuex';
  230. export default {
  231. components:{
  232. PayDialog,
  233. tkiQrcode
  234. },
  235. computed: mapState(['user']),
  236. data() {
  237. return {
  238. statusBarHeight : 20,
  239. isFirst:false,
  240. isPicker : false,
  241. datetime : "",
  242. total : {},
  243. data:[],
  244. page:{
  245. isFirst:false,
  246. isLoad:false,
  247. isFoot:false,
  248. page:1
  249. },
  250. form:{
  251. dateStr : "",
  252. date : "",
  253. type : "all"
  254. },
  255. navList : [
  256. {"name" : "全部","code" : "all"},
  257. {"name" : "收入","code" : "income"},
  258. {"name" : "支出","code" : "disburse"}
  259. ],
  260. codePay:'',//付款码 // 要生成的二维码值
  261. payCodeShow:false,//付款码弹窗
  262. ifShow: true,
  263. size: 400, // 二维码大小
  264. unit: 'upx', // 单位
  265. background: '#fff', // 背景色
  266. foreground: '', // 前景色
  267. pdground: '#FF4C4C', // 角标色
  268. icon: '', // 二维码图标
  269. iconsize: 40, // 二维码图标大小
  270. lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
  271. onval: false, // val值变化时自动重新生成二维码
  272. loadMake: true, // 组件加载完成后自动生成二维码
  273. src: '' // 二维码生成后的图片地址或base64
  274. }
  275. },
  276. onLoad(options) {
  277. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  278. this.form.dateStr = this.utils.date('Y年m月');
  279. this.form.date = this.utils.date('Y-m');
  280. this.datetime = this.utils.strtotime() * 1000;
  281. },
  282. onShow() {
  283. this.initView();
  284. },
  285. methods: {
  286. ...mapMutations(['checkUserLogin']),
  287. /**
  288. * 加载基础配置
  289. */
  290. initView:function(){
  291. this.totalData();
  292. this.getData(true);
  293. },
  294. fukuan(){
  295. this.$refs['payDialog'].show();
  296. },
  297. getPassword(val){
  298. let obj = this
  299. var password = val.password;
  300. obj.request.post("tradeCode",{
  301. payment: password,
  302. }).then(res => {
  303. if(res.code == 200) {
  304. obj.$refs['payDialog'].cleanNum();
  305. obj.$refs['payDialog'].hideFun();
  306. obj.payCodeShow = true
  307. obj.codePay = res.data.rand_code
  308. if(obj.codePay){
  309. setTimeout(function () {
  310. obj.$refs.qrcode._makeCode()
  311. }, 1000);
  312. }
  313. }else{
  314. obj.$refs['payDialog'].cleanNum();
  315. obj.$refs['payDialog'].hideFun();
  316. uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
  317. }
  318. })
  319. },
  320. qrR(res) {
  321. this.src = res
  322. },
  323. /**
  324. * 获取数据
  325. */
  326. getData:function(isPull = false){
  327. if(this.page.isLoad) return;
  328. this.page.isLoad = true;
  329. if(isPull) {
  330. this.page.page = 1;
  331. this.page.isLoad = false;
  332. this.page.isFoot = false;
  333. }
  334. uni.showLoading({ title: '获取数据中..' });
  335. var post = {};
  336. post.page = this.page.page;
  337. this
  338. .request
  339. .post("userIntegral",{
  340. ...this.form,
  341. page : this.page.page
  342. })
  343. .then(res => {
  344. uni.hideLoading();
  345. this.page.isFirst = true;
  346. this.page.isLoad = false;
  347. this.isFirst = true;
  348. if(isPull) {
  349. this.data = res.data.list;
  350. } else {
  351. this.data = this.data.concat(res.data.list);
  352. }
  353. //是否到底
  354. if(res.data.list.length != res.data.pageSize) {
  355. this.page.isFoot = true;
  356. }
  357. })
  358. .catch((res)=>{
  359. console.log(res);
  360. uni.hideLoading();
  361. uni.showModal({title: '系统提示',content: '加载失败,返回在尝试',showCancel: false});
  362. });
  363. },
  364. totalData:function(){
  365. this
  366. .request
  367. .post("userIntegralTotal",{
  368. ...this.form
  369. })
  370. .then(res => {
  371. if(res.code == 200) {
  372. this.total = res.data;
  373. }
  374. })
  375. },
  376. loadMoreData:function() {
  377. if(this.page.isFoot || this.page.isLoad) {
  378. return;
  379. }
  380. this.page.page ++;
  381. this.getData();
  382. },
  383. tapNav:function(ev) {
  384. this.form.type = ev;
  385. this.getData(true);
  386. },
  387. tapConfirm:function(ev) {
  388. this.form.dateStr = this.utils.date('Y年m月',ev.value / 1000);
  389. this.form.date = this.utils.date('Y-m',ev.value / 1000);
  390. this.isPicker = false;
  391. this.totalData();
  392. this.getData(true);
  393. },
  394. tapSc:function(){
  395. uni.navigateTo({
  396. url:"/pages/user/detail/integral_sc"
  397. })
  398. },
  399. /**
  400. * 趣豆转账
  401. */
  402. TapZc:function(){
  403. uni.navigateTo({
  404. url:"/pages/user/detail/integral_gift"
  405. })
  406. },
  407. TapZchu(){
  408. uni.navigateTo({
  409. url:"/pages/user/detail/integral_chu"
  410. })
  411. },
  412. },
  413. }
  414. </script>