|
|
@@ -0,0 +1,524 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="app-bg">
|
|
|
+ <image src="/static/img/detail_bg.png"></image>
|
|
|
+ <view class="body fx-h fx-bc fx-ac">
|
|
|
+ <view class="count">{{ user.integral || 0 }}</view>
|
|
|
+ <view class="label">我的余额</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="fukuan" @click="fukuan" style="position: absolute;right: 30rpx;top: 180rpx;">
|
|
|
+ <image src="/static/img/fukuan.png" style="width: 50rpx;height: 50rpx;"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left"
|
|
|
+ @clickLeft="utils.navigateBack()" fixed title="我的趣豆"></uni-nav-bar>
|
|
|
+ <view class="htop" :style="'height:calc(61vw - ' + statusBarHeight + 'px - 44px);'"></view>
|
|
|
+ <view class="app-body">
|
|
|
+
|
|
|
+
|
|
|
+ <view class="pannel fx-r fx-bc">
|
|
|
+ <view class="item fx-h fx-bc fx-ac" @tap="tapSc">
|
|
|
+ <image src="/static/img/detail_sc.png"></image>
|
|
|
+ <view class="text">闪兑</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="item fx-h fx-bc fx-ac" @tap="TapZc">
|
|
|
+ <image src="/static/img/detail_zc.png"></image>
|
|
|
+ <view class="text">转水果</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="item fx-h fx-bc fx-ac" @tap="TapZchu">
|
|
|
+ <image src="/static/img/detail_zchu.png" style="width: 50rpx;height: 50rpx;"></image>
|
|
|
+ <view class="text">转臻选</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!--列表数据-->
|
|
|
+ <view class="nav-list fx-r fx-bc">
|
|
|
+ <view class="item fx-h fx-bc" @tap="tapNav(item.code)" :class="form.type == item.code ? 'active' : ''"
|
|
|
+ v-for="(item,index) in navList">
|
|
|
+ <view class="label">{{ item.name }}</view>
|
|
|
+ <image class="icon" v-if="form.type == item.code" src="/static/img/detail_d.png"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="fx-g1"></view>
|
|
|
+
|
|
|
+ <view class="time fx-r fx-bc" @tap="openintegralDate()">
|
|
|
+ <view class="count">{{ form.dateStr || "" }}</view>
|
|
|
+ <image class="icon" src="/static/img/detail_next.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-y class="scroll" :style="'height: calc(100vh - 61vw - 100rpx - 130rpx);'"
|
|
|
+ @scrolltolower="loadMoreData">
|
|
|
+ <view class="sc-body">
|
|
|
+
|
|
|
+ <view class="detail-list" v-if="data.length > 0">
|
|
|
+ <view class="top fx-r">
|
|
|
+ <view class="label">{{ this.form.dateStr }}</view>
|
|
|
+ <view class="fx-g1"></view>
|
|
|
+ <view class="label">收入：{{ this.total.inMoney || '0.00' }}
|
|
|
+ 支出：{{ this.total.outMoney || '0.00' }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item fx-r fx-bc" v-for="(item,index) in data">
|
|
|
+ <image class="icon" v-if="item.type == 0" src="/static/img/detail_in.png"></image>
|
|
|
+ <image class="icon" v-if="item.type == 1" src="/static/img/detail_in.png"></image>
|
|
|
+ <image class="icon" v-if="item.type == 2" src="/static/img/detail_out.png"></image>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">{{ item.title }}</view>
|
|
|
+ <view class="tag">{{ item.content }}</view>
|
|
|
+ <view class="time">{{ item.time }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="fx-g1"></view>
|
|
|
+ <view class="right fx-h">
|
|
|
+ <view class="money" style="color:#e2a622;" v-if="item.type == 1">+{{item.v}}</view>
|
|
|
+ <view class="money" v-if="item.type == 2">-{{item.v}}</view>
|
|
|
+ <view class="fx-g1"></view>
|
|
|
+ <view class="balance">余额：{{ item.money }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="data.length > 0">
|
|
|
+ <view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
|
|
|
+ <image src="/static/img/xloading.png"></image>
|
|
|
+ <text>正在载入更多...</text>
|
|
|
+ </view>
|
|
|
+ <view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
|
|
|
+ </view>
|
|
|
+ <uv-empty v-if="data.length == 0 && isFirst" mode="data" icon="/static/img/no-empty.png"></uv-empty>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <PayDialog ref="payDialog" @getPassword="getPassword"></PayDialog>
|
|
|
+ <uv-datetime-picker ref='integralDate' v-model="datetime" @confirm="tapConfirm" mode="year-month"></uv-datetime-picker>
|
|
|
+ <uv-popup ref='payPopup' @close="payPopupClose()" mode="center">
|
|
|
+ <view class="codeBox">
|
|
|
+ <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="codePay" :size="size" :unit="unit"
|
|
|
+ :background="background" :foreground="foreground" :pdground="pdground" :icon="icon"
|
|
|
+ :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"
|
|
|
+ @result="qrR" />
|
|
|
+ </view>
|
|
|
+ </uv-popup>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .codeBox {
|
|
|
+ padding: 50rpx 50rpx;
|
|
|
+ border-radius: 25rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-bg {
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100vw;
|
|
|
+ height: 61vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ position: absolute;
|
|
|
+ height: 61vw;
|
|
|
+ width: 100vw;
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+
|
|
|
+ .count {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 64rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ margin-top: 4px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-body {
|
|
|
+ padding: 0px 20rpx;
|
|
|
+ position: relative;
|
|
|
+ top: -100rpx;
|
|
|
+
|
|
|
+ .pannel {
|
|
|
+ background: #fff;
|
|
|
+ width: calc(100% - 80rpx);
|
|
|
+ margin-left: 40rpx;
|
|
|
+ box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 40rpx 0;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: calc(33.3% - 1px);
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 62rpx;
|
|
|
+ height: 62rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 2rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: #DCDFE6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-list {
|
|
|
+ height: 100rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin-right: 50rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #5C5C5C;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ .label {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #2C2C2C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+
|
|
|
+ .count {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #2C2C2C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #2C2C2C;
|
|
|
+ margin-left: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 20rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-list {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 25rpx;
|
|
|
+ color: #979797;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 84rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ width: calc(100% - 280rpx);
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #979797;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #979797;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ text-align: right;
|
|
|
+ width: 160rpx;
|
|
|
+
|
|
|
+ .money {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #FF4C4C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #979797;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import PayDialog from "@/components/ui-pay/payDialog.vue";
|
|
|
+ import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ PayDialog,
|
|
|
+ tkiQrcode
|
|
|
+ },
|
|
|
+ computed: mapState(['user']),
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: 20,
|
|
|
+ isFirst: false,
|
|
|
+ datetime: "",
|
|
|
+ total: {},
|
|
|
+ data: [],
|
|
|
+ page: {
|
|
|
+ isFirst: false,
|
|
|
+ isLoad: false,
|
|
|
+ isFoot: false,
|
|
|
+ page: 1
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ dateStr: "",
|
|
|
+ date: "",
|
|
|
+ type: "all"
|
|
|
+ },
|
|
|
+ navList: [{
|
|
|
+ "name": "全部",
|
|
|
+ "code": "all"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "收入",
|
|
|
+ "code": "income"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "支出",
|
|
|
+ "code": "disburse"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ codePay: '', //付款码 // 要生成的二维码值
|
|
|
+ ifShow: true,
|
|
|
+ size: 400, // 二维码大小
|
|
|
+ unit: 'upx', // 单位
|
|
|
+ background: '#fff', // 背景色
|
|
|
+ foreground: '', // 前景色
|
|
|
+ pdground: '#FF4C4C', // 角标色
|
|
|
+ icon: '', // 二维码图标
|
|
|
+ iconsize: 40, // 二维码图标大小
|
|
|
+ lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
|
|
+ onval: false, // val值变化时自动重新生成二维码
|
|
|
+ loadMake: true, // 组件加载完成后自动生成二维码
|
|
|
+ src: '' // 二维码生成后的图片地址或base64
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
|
+ this.form.dateStr = this.utils.date('Y年m月');
|
|
|
+ this.form.date = this.utils.date('Y-m');
|
|
|
+ this.datetime = this.utils.strtotime() * 1000;
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.initView();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(['checkUserLogin']),
|
|
|
+ /**
|
|
|
+ * 加载基础配置
|
|
|
+ */
|
|
|
+ initView: function() {
|
|
|
+ this.totalData();
|
|
|
+ this.getData(true);
|
|
|
+ },
|
|
|
+ fukuan() {
|
|
|
+ this.$refs['payDialog'].show();
|
|
|
+ },
|
|
|
+ payPopupClose() {
|
|
|
+ this.$refs.payPopup.close()
|
|
|
+ },
|
|
|
+ getPassword(val) {
|
|
|
+ let obj = this
|
|
|
+ var password = val.password;
|
|
|
+ obj.request.post("tradeCode", {
|
|
|
+ payment: password,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ obj.$refs['payDialog'].cleanNum();
|
|
|
+ obj.$refs['payDialog'].hideFun();
|
|
|
+ obj.$refs.payPopup.open()
|
|
|
+ obj.codePay = res.data.rand_code
|
|
|
+ if (obj.codePay) {
|
|
|
+ setTimeout(function() {
|
|
|
+ obj.$refs.qrcode._makeCode()
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ obj.$refs['payDialog'].cleanNum();
|
|
|
+ obj.$refs['payDialog'].hideFun();
|
|
|
+ uni.showModal({
|
|
|
+ title: '系统提示',
|
|
|
+ content: res.msg,
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ qrR(res) {
|
|
|
+ this.src = res
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取数据
|
|
|
+ */
|
|
|
+ getData: function(isPull = false) {
|
|
|
+ if (this.page.isLoad) return;
|
|
|
+ this.page.isLoad = true;
|
|
|
+ if (isPull) {
|
|
|
+ this.page.page = 1;
|
|
|
+ this.page.isLoad = false;
|
|
|
+ this.page.isFoot = false;
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '获取数据中..'
|
|
|
+ });
|
|
|
+ var post = {};
|
|
|
+ post.page = this.page.page;
|
|
|
+
|
|
|
+ this
|
|
|
+ .request
|
|
|
+ .post("userIntegral", {
|
|
|
+ ...this.form,
|
|
|
+ page: this.page.page
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.page.isFirst = true;
|
|
|
+ this.page.isLoad = false;
|
|
|
+ this.isFirst = true;
|
|
|
+ if (isPull) {
|
|
|
+ this.data = res.data.list;
|
|
|
+ } else {
|
|
|
+ this.data = this.data.concat(res.data.list);
|
|
|
+ }
|
|
|
+ //是否到底
|
|
|
+ if (res.data.list.length != res.data.pageSize) {
|
|
|
+ this.page.isFoot = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((res) => {
|
|
|
+ console.log(res);
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showModal({
|
|
|
+ title: '系统提示',
|
|
|
+ content: '加载失败，返回在尝试',
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ totalData: function() {
|
|
|
+ this
|
|
|
+ .request
|
|
|
+ .post("userIntegralTotal", {
|
|
|
+ ...this.form
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.total = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ loadMoreData: function() {
|
|
|
+ if (this.page.isFoot || this.page.isLoad) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.page.page++;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+
|
|
|
+ tapNav: function(ev) {
|
|
|
+ this.form.type = ev;
|
|
|
+ this.getData(true);
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ tapConfirm: function(ev) {
|
|
|
+ this.form.dateStr = this.utils.date('Y年m月', ev.value / 1000);
|
|
|
+ this.form.date = this.utils.date('Y-m', ev.value / 1000);
|
|
|
+ this.isPicker = false;
|
|
|
+ this.totalData();
|
|
|
+ this.getData(true);
|
|
|
+ },
|
|
|
+ openintegralDate(){
|
|
|
+ this.$refs.integralDate.open()
|
|
|
+ },
|
|
|
+ tapSc: function() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/user/detail/integral_sc"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 趣豆转账
|
|
|
+ */
|
|
|
+ TapZc: function() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/user/detail/integral_gift"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ TapZchu() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/user/detail/integral_chu"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
