jiuyiUniapp/jiuyi/pages/index/wallet.vue

318 lines
6.7 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script setup>
/**
* 我的钱包
*/
import {
onMounted,
computed,
reactive,
ref,
getCurrentInstance,
} from 'vue'
import {
onLoad,
onReachBottom,
onPullDownRefresh
} from '@dcloudio/uni-app'
import {
useStore,
} from 'vuex'
import api from "@/api/index.js"
// 代理
const {
proxy
} = getCurrentInstance()
//积分变动记录
const scrollLog = reactive({
data: [],
pageNum: 1,
pageSize: 30,
total: 0,
})
// 冻结
const freeze = ref({
score: 0,
fruit: 0,
})
const store = useStore()
onLoad(() => {
// 获取列表
getList()
// 获取我的冻结
getFreeze()
})
onPullDownRefresh(() => {
// 刷新列表
refreshList()
})
onReachBottom(() => {
// 获取更多列表
getMoreList()
})
const userinfo = computed(() => {
let result = store.state.userinfo
return result
})
// 刷新列表
function refreshList() {
scrollLog.homePageSize = 1
getList()
}
// 获取更多列表
function getMoreList() {
if (scrollLog.total <= scrollLog.data.length) return
scrollLog.pageNum++
getList()
}
function navigateToPage(path) {
uni.navigateTo({
url: path
});
}
// 积分变动明细
function getList() {
api.mine.getBalanceLog({
query: {
pageNum: scrollLog.pageNum,
pageSize: scrollLog.pageSize,
}
}).then(rs => {
if (rs.code == 200) {
// 第一页
if (scrollLog.pageNum == 1) scrollLog.data.length = 0
// 合并
scrollLog.data.push(...rs.rows)
// 总数
scrollLog.total = rs.total
console.log(scrollLog)
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
}).finally(() => {
// 停止下拉刷新
uni.stopPullDownRefresh()
})
}
// 获取冻结
function getFreeze() {
//
api.mine.myfreeze().then(rs => {
console.log('myfreeze', rs)
if (rs.code == 200 && rs.data) {
//
freeze.value = rs.data
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
})
}
// 展示冻结
function showFreeze() {
proxy.$refs.freeze.open()
}
</script>
<template>
<view class="appbw plr60">
<!-- 我的钱包 -->
<view class="board mt60 ptb25 plr30 cfff f28 br25">
<view class="">总资产(余额)</view>
<view class="balance rows">
<view class="price dib mtb10 ptb10 plr15 c333 f48 bfff br15">
<text>{{userinfo.balance || 0}}</text>
</view>
<view class="rows">
<navigator url="/pages/index/topUp" hover-class="none" class="btn sm bar black plr20">充值</navigator>
</view>
</view>
<view class="mtb10">可用积分{{userinfo.score || 0}}</view>
<view class="df jcsb aic mt40" v-if="0">
<!-- 还没有成为商家 -->
<view v-if="userinfo.isShop===0" @click="$refs.settledRef.open()">
<text class="f36 mr10">入驻商家</text>
<uni-icons type="right" color="" />
</view>
<!-- 商家被驳回 -->
<view class="" v-else>退出押金</view>
</view>
</view>
<view class="more df aic mtb30" @click="showFreeze">
<view class="f34 mr10">待释放</view>
<uni-icons type="right" />
</view>
<!-- <view class="mtb30 cFF4242 tac">驳回原因xxxxxxxxxxxxxxxxxxx</view> -->
<!-- 使用明细 -->
<view class="logBox mt30 mb60">
<view class="title c333 f28 b">使用明细</view>
<view class="list mtb30 c666 f24">
<view class="item df aic mtb15" v-for="(item,index) in scrollLog.data" :key="index">
<view class="content f1">{{item.context}}</view>
<view class="date">
<text>{{item.createTime}}</text>
</view>
</view>
</view>
</view>
<!-- 展示冻结金额 -->
<uni-popup ref="freeze" type="center">
<view class="freezeAlt popMid bfff br20">
<view class="header rows mtb30 plr20">
<view class="">所有冻结金额</view>
<view class="" @click="$refs.freeze.close()">
<uni-icons type="closeempty" />
</view>
</view>
<view class="main mtb30 plr30">
<view class="">冻结积分{{freeze.score}}</view>
<view class="mt5">冻结榴莲果{{freeze.fruit}}</view>
</view>
</view>
</uni-popup>
<!-- 商家入驻 -->
<uni-popup ref="settledRef" type="center">
<view class="setted pr">
<!-- 标题 -->
<view class="title pa cfff f52">
<view>入驻商家需</view>
<view>缴纳999押金</view>
</view>
<!-- 卡通人物 -->
<view class="cartoon pa">
<image src="/static/settedCartoon.png" mode="aspectFill" />
</view>
<!-- 福利 -->
<view class="weal pa l0 r0 b0">
<image class="bg" src="/static/settedBoard.png" mode="aspectFill" />
<view class="pfull fdc fmid c333 f36">
<view>完成商家认证</view>
<view>即可享受视频挂链接等福利</view>
</view>
</view>
</view>
<!-- 按钮 -->
<view class="button btn lg colourful mtb30" @click="navigateToPage('/pages/shop/settle')">立即入驻</view>
<!-- 关闭 -->
<view class="close fmid" @click="$refs.settledRef.close()">
<uni-icons type="closeempty" color="#fff" size="34rpx" />
</view>
</uni-popup>
<!-- 商家退出 -->
<uni-popup ref="offRef" type="center">
<view class="setted pr">
<!-- 标题 -->
<view class="title pa cfff f52">
<view>确认提交</view>
<view>退出押金吗</view>
</view>
<!-- 卡通人物 -->
<view class="cartoon pa">
<image src="/static/settedCartoon1.png" mode="aspectFill" />
</view>
<!-- 福利 -->
<view class="weal pa l0 r0 b0">
<image class="bg" src="/static/settedBoard.png" mode="aspectFill" />
<view class="pfull fdc fmid c333 f36">
<view>退出押金</view>
<view>将不可享受会员专属福利</view>
</view>
</view>
</view>
<!-- 按钮 -->
<view class="button btn lg disabled mtb30">确认</view>
<!-- 关闭 -->
<view class="close fmid" @click="$refs.offRef.close()">
<uni-icons type="closeempty" color="#fff" size="34rpx" />
</view>
</uni-popup>
</view>
</template>
<style lang="scss">
// 板子
.board {
background-image: linear-gradient(116deg, #27EFE2 0%, #6D00FF 48%, #FF004F 100%);
}
// 入驻
.setted {
width: 562rpx;
height: 516rpx;
background-image: linear-gradient(143deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
border-radius: 20rpx;
// 标题
.title {
top: 80rpx;
left: 30rpx;
}
// 卡通
.cartoon {
top: 20rpx;
right: -50rpx;
width: 280rpx;
height: 400rpx;
}
// 福利
.weal {
width: 562rpx;
height: 268rpx;
// 背景
.bg {
border-radius: 20rpx;
}
}
}
// 立即入驻
.button {
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .3);
}
// 关闭
.close {
width: 86rpx;
height: 86rpx;
margin: 0 auto;
border-radius: 50%;
background-color: #999999;
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
}
</style>