|
@@ -31,276 +31,275 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import BScroll from 'better-scroll'
|
|
|
- import { Toast } from 'vant'
|
|
|
- import { walletList, postCashOut } from './api'
|
|
|
+import BScroll from 'better-scroll'
|
|
|
+import { Toast } from 'vant'
|
|
|
+import { walletList, postCashOut } from './api'
|
|
|
|
|
|
- const PAGESIZE = 20
|
|
|
- export default {
|
|
|
- name: 'wallet',
|
|
|
- data () {
|
|
|
- return {
|
|
|
- pager: {
|
|
|
- pagenum: 1,
|
|
|
- pagesize: PAGESIZE,
|
|
|
- pagecount: 1
|
|
|
- },
|
|
|
- totalPrice: 0,
|
|
|
- listData: [],
|
|
|
- scroll: null,
|
|
|
- numFetchStatus: 0,
|
|
|
- arrFetchStatus: ['正在加载,请稍后~', '到底了'],
|
|
|
- booFetchData: false,
|
|
|
- numPositionY: 0,
|
|
|
- booSubmit: false
|
|
|
- }
|
|
|
- },
|
|
|
- activated () {
|
|
|
- if (!this.$route.meta.isUseCache) {
|
|
|
- this.pager = {
|
|
|
- pagenum: 1,
|
|
|
- pagesize: PAGESIZE,
|
|
|
- pagecount: 1
|
|
|
- }
|
|
|
- this.listData = []
|
|
|
- this.numFetchStatus = 0
|
|
|
- this.booFetchData = false
|
|
|
- this.numPositionY = 0
|
|
|
- this.booSubmit = false
|
|
|
- this.funFetch()
|
|
|
- } else {
|
|
|
- this.$nextTick(() => {
|
|
|
- if (this.scroll) {
|
|
|
- this.scroll.refresh()
|
|
|
- this.scroll.scrollTo(0, this.numPositionY)
|
|
|
- }
|
|
|
- })
|
|
|
+const PAGESIZE = 20
|
|
|
+export default {
|
|
|
+ name: 'wallet',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ pager: {
|
|
|
+ pagenum: 1,
|
|
|
+ pagesize: PAGESIZE,
|
|
|
+ pagecount: 1
|
|
|
+ },
|
|
|
+ totalPrice: 0,
|
|
|
+ listData: [],
|
|
|
+ scroll: null,
|
|
|
+ numFetchStatus: 0,
|
|
|
+ arrFetchStatus: ['正在加载,请稍后~', '到底了'],
|
|
|
+ booFetchData: false,
|
|
|
+ numPositionY: 0,
|
|
|
+ booSubmit: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated () {
|
|
|
+ if (!this.$route.meta.isUseCache) {
|
|
|
+ this.pager = {
|
|
|
+ pagenum: 1,
|
|
|
+ pagesize: PAGESIZE,
|
|
|
+ pagecount: 1
|
|
|
}
|
|
|
+ this.listData = []
|
|
|
+ this.numFetchStatus = 0
|
|
|
+ this.booFetchData = false
|
|
|
+ this.numPositionY = 0
|
|
|
+ this.booSubmit = false
|
|
|
+ this.funFetch()
|
|
|
+ } else {
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refreshTitle('我的钱包')
|
|
|
+ if (this.scroll) {
|
|
|
+ this.scroll.refresh()
|
|
|
+ this.scroll.scrollTo(0, this.numPositionY)
|
|
|
+ }
|
|
|
})
|
|
|
- this.$route.meta.isUseCache = false
|
|
|
- },
|
|
|
- methods: {
|
|
|
- funFetch () {
|
|
|
- const vm = this
|
|
|
- vm.numFetchStatus = 0
|
|
|
- walletList(vm.pager.pagenum, vm.pager.pagesize).then(response => {
|
|
|
- if (response.status) {
|
|
|
- const data = response.data
|
|
|
- const temp = data.data
|
|
|
- vm.totalPrice = data.totalPrice
|
|
|
- vm.pager.pagecount = Math.ceil(data.count / PAGESIZE)
|
|
|
- vm.pager.pagenum++
|
|
|
- vm.booFetchData = true
|
|
|
- if (vm.pager.pagecount <= 1) {
|
|
|
- vm.numFetchStatus = 2
|
|
|
- } else {
|
|
|
- vm.numFetchStatus = 1
|
|
|
- }
|
|
|
- if (temp.length) {
|
|
|
- vm.listData = vm.listData.concat(temp)
|
|
|
- vm.$nextTick(() => {
|
|
|
- if (!vm.scroll) {
|
|
|
- vm.scroll = new BScroll(vm.$refs.wrapper, {
|
|
|
- click: true,
|
|
|
- pullUpLoad: {
|
|
|
- threshold: -20
|
|
|
- },
|
|
|
- scrollbar: true
|
|
|
- })
|
|
|
- vm.scroll.on('pullingUp', () => {
|
|
|
- if (vm.pager.pagenum > vm.pager.pagecount) {
|
|
|
- vm.numFetchStatus = 2
|
|
|
- return
|
|
|
- }
|
|
|
- vm.funFetch()
|
|
|
- })
|
|
|
- } else {
|
|
|
- vm.scroll.refresh()
|
|
|
- vm.scroll.finishPullUp()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refreshTitle('我的钱包')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ funFetch () {
|
|
|
+ const vm = this
|
|
|
+ vm.numFetchStatus = 0
|
|
|
+ walletList(vm.pager.pagenum, vm.pager.pagesize).then(response => {
|
|
|
+ if (response.status) {
|
|
|
+ const data = response.data
|
|
|
+ const temp = data.data
|
|
|
+ vm.totalPrice = data.totalPrice
|
|
|
+ vm.pager.pagecount = Math.ceil(data.count / PAGESIZE)
|
|
|
+ vm.pager.pagenum++
|
|
|
+ vm.booFetchData = true
|
|
|
+ if (vm.pager.pagecount <= 1) {
|
|
|
+ vm.numFetchStatus = 2
|
|
|
} else {
|
|
|
- Toast(response.msg)
|
|
|
- vm.numFetchStatus = 3
|
|
|
+ vm.numFetchStatus = 1
|
|
|
+ }
|
|
|
+ if (temp.length) {
|
|
|
+ vm.listData = vm.listData.concat(temp)
|
|
|
+ vm.$nextTick(() => {
|
|
|
+ if (!vm.scroll) {
|
|
|
+ vm.scroll = new BScroll(vm.$refs.wrapper, {
|
|
|
+ click: true,
|
|
|
+ pullUpLoad: {
|
|
|
+ threshold: -20
|
|
|
+ },
|
|
|
+ scrollbar: true
|
|
|
+ })
|
|
|
+ vm.scroll.on('pullingUp', () => {
|
|
|
+ if (vm.pager.pagenum > vm.pager.pagecount) {
|
|
|
+ vm.numFetchStatus = 2
|
|
|
+ return
|
|
|
+ }
|
|
|
+ vm.funFetch()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ vm.scroll.refresh()
|
|
|
+ vm.scroll.finishPullUp()
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- }).catch(() => {
|
|
|
- Toast('出错啦')
|
|
|
+ } else {
|
|
|
+ Toast(response.msg)
|
|
|
vm.numFetchStatus = 3
|
|
|
- })
|
|
|
- },
|
|
|
- // 提现
|
|
|
- funCashOut () {
|
|
|
- if (this.booSubmit) {
|
|
|
- return
|
|
|
}
|
|
|
- this.booSubmit = true
|
|
|
- postCashOut().then(res => {
|
|
|
- this.booSubmit = false
|
|
|
- if (res.status) {
|
|
|
- this.totalPrice = 0
|
|
|
- }
|
|
|
- Toast(res.msg)
|
|
|
- }).catch(err => {
|
|
|
- this.booSubmit = false
|
|
|
- Toast(err)
|
|
|
- })
|
|
|
+ }).catch(() => {
|
|
|
+ Toast('出错啦')
|
|
|
+ vm.numFetchStatus = 3
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提现
|
|
|
+ funCashOut () {
|
|
|
+ if (this.booSubmit) {
|
|
|
+ return
|
|
|
}
|
|
|
+ this.booSubmit = true
|
|
|
+ postCashOut().then(res => {
|
|
|
+ this.booSubmit = false
|
|
|
+ if (res.status) {
|
|
|
+ this.totalPrice = 0
|
|
|
+ }
|
|
|
+ Toast(res.msg)
|
|
|
+ }).catch(err => {
|
|
|
+ this.booSubmit = false
|
|
|
+ Toast(err)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+.container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 25px 0 21px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ width: 343px;
|
|
|
+ padding-left: 8px;
|
|
|
+ line-height: 33px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.count {
|
|
|
+ width: 343px;
|
|
|
+ padding-left: 5px;
|
|
|
+ margin-top: 6px;
|
|
|
+ line-height: 42px;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #EE0A23;
|
|
|
+}
|
|
|
|
|
|
- .header {
|
|
|
- position: relative;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
+.cashing {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ bottom: 24px;
|
|
|
+ width: 96px;
|
|
|
+ height: 45px;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 45px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%), linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
|
|
|
+ box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.balance {
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 32px;
|
|
|
+ margin: 31px 0 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 192px);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ ul {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
- padding: 25px 0 21px;
|
|
|
- background: #fff;
|
|
|
+ padding-bottom: 80px;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .title {
|
|
|
- width: 343px;
|
|
|
- padding-left: 8px;
|
|
|
- line-height: 33px;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+.list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 343px;
|
|
|
+ padding: 16px 0;
|
|
|
+ margin-top: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
|
- .count {
|
|
|
- width: 343px;
|
|
|
- padding-left: 5px;
|
|
|
- margin-top: 6px;
|
|
|
- line-height: 42px;
|
|
|
- font-size: 30px;
|
|
|
- font-weight: 500;
|
|
|
- color: #EE0A23;
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-top: 0;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .cashing {
|
|
|
- position: absolute;
|
|
|
- right: 16px;
|
|
|
- bottom: 24px;
|
|
|
- width: 96px;
|
|
|
- height: 45px;
|
|
|
- border-radius: 4px;
|
|
|
- line-height: 45px;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%), linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
|
|
|
- box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
|
|
|
- }
|
|
|
+.amount {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 311px;
|
|
|
|
|
|
- .balance {
|
|
|
- width: 100%;
|
|
|
- padding-left: 32px;
|
|
|
- margin: 31px 0 14px;
|
|
|
+ span {
|
|
|
line-height: 20px;
|
|
|
font-size: 15px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .wrapper {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh - 192px);
|
|
|
- overflow: hidden;
|
|
|
+ font-weight: 500;
|
|
|
|
|
|
- ul {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- padding-bottom: 80px;
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ color: #333;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .list {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- width: 343px;
|
|
|
- padding: 16px 0;
|
|
|
- margin-top: 16px;
|
|
|
- border-radius: 4px;
|
|
|
- background: #FFFFFF;
|
|
|
-
|
|
|
- &:nth-of-type(1) {
|
|
|
- margin-top: 0;
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ color: #EE0A23;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .amount {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 311px;
|
|
|
+.description {
|
|
|
+ width: 311px;
|
|
|
+ margin-top: 8px;
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
|
|
|
- span {
|
|
|
- line-height: 20px;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 500;
|
|
|
+.create-time {
|
|
|
+ width: 311px;
|
|
|
+ margin-top: 8px;
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
|
|
|
- &:nth-of-type(1) {
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+.load-status {
|
|
|
+ margin-top: 12px;
|
|
|
|
|
|
- &:nth-of-type(2) {
|
|
|
- color: #EE0A23;
|
|
|
- }
|
|
|
- }
|
|
|
+ p {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .description {
|
|
|
- width: 311px;
|
|
|
- margin-top: 8px;
|
|
|
- line-height: 17px;
|
|
|
- font-size: 12px;
|
|
|
+.bitmap {
|
|
|
+ p {
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
color: #333;
|
|
|
}
|
|
|
-
|
|
|
- .create-time {
|
|
|
- width: 311px;
|
|
|
- margin-top: 8px;
|
|
|
- line-height: 17px;
|
|
|
- font-size: 12px;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-
|
|
|
- .load-status {
|
|
|
- margin-top: 12px;
|
|
|
-
|
|
|
- p {
|
|
|
- line-height: 20px;
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bitmap {
|
|
|
- p {
|
|
|
- line-height: 22px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- }
|
|
|
+}
|
|
|
</style>
|