670 lines
20 KiB
Vue
670 lines
20 KiB
Vue
<template>
|
||
<view class="purse_warp">
|
||
<header-component :leftTitle="$t('purse.title')" left-path-type="switchTab" left-path="/pages/mine/mine" />
|
||
<view class="purse_content_warp">
|
||
<view v-for="(item, vIndex) in balanceList" :key="item.id" class="purse_warp_item" @click="jumpBonus(item)">
|
||
<view class="purse_item_title">
|
||
<view class="purse_item_title-left">
|
||
<up-image :src="`https://static.tbmall.xin/static/mine-purse/${item.categoty}.png`" width="22" height="22"
|
||
bgColor="#f1f6ff00" class="purse_amount"></up-image>
|
||
<view class="title">{{ item.name }}</view>
|
||
<up-image v-if="item.categoty != 'balance'" src="/pages/rwa_package/static/tips.png" width="16" height="16"
|
||
bgColor="#f1f6ff00" @click.stop="openTip(item.categoty)" />
|
||
<up-image src="/static/common/right_soild.png" width="10" height="10" bgColor="#fff"
|
||
class="right_soild"></up-image>
|
||
</view>
|
||
|
||
<view class="purse_item_title-right">
|
||
<!-- <view class="button exchange_button" @click.stop="jumpInfo(item, 'withdraw')" v-if="vIndex == 4">
|
||
提现
|
||
</view> -->
|
||
<view v-for="(btn, index) in getOperationButtons(item)" :key="index" :type="btn.code"
|
||
class="button exchange_button" @click.stop="jumpInfo(item, btn.code)">{{ btn.memo }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 下 -->
|
||
<view class="purse_item_bottom">
|
||
<view class="bottom_item">
|
||
<view class="bottom_item_amount">{{ item.curAmount || 0 }}</view>
|
||
<view class="bottom_item_title">{{
|
||
item.categoty === "raffle" ? "可用次数" : "可用余额"
|
||
}}</view>
|
||
</view>
|
||
|
||
<view class="bottom_item" v-if="item.categoty == 'vcoin'">
|
||
<view class="bottom_item_amount bottom_item_amount_center">{{ item.bonusAmount || 0 }}</view>
|
||
<view class="bottom_item_title bottom_item_title_center">
|
||
<text class="title_text">消费者权益</text>
|
||
<up-image v-if="item.categoty != 'balance'" src="/pages/rwa_package/static/tips.png" width="12" height="12"
|
||
bgColor="#f1f6ff00" class="tip_icon" @click.stop="openTip('rights')" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom_item" @click.stop="onTip(vIndex)">
|
||
<view class="bottom_item_lock">{{ item.lockAmount || 0 }}</view>
|
||
<view class="bottom_item_title bottom_item_title_right">
|
||
<text class="title_text">{{ item.categoty === "raffle" ? "不可用次数" : "不可用余额" }}</text>
|
||
<up-image v-if="item.categoty == 'balance' || item.categoty == 'raffle'"
|
||
src="/pages/rwa_package/static/tips.png" width="12" height="12" bgColor="#fff" class="tip_icon" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom_item_tip" v-if="item.categoty == 'balance' && activeTip == vIndex">抽奖7天后释放到可用余额中</view>
|
||
</view>
|
||
</view>
|
||
<!-- 归集弹窗 -->
|
||
<up-popup :show="collectShow" @close="closeCollect" position="bottom" :round="24">
|
||
<view class="popup_content">
|
||
<view class="popup_header">
|
||
<view class="popup_title">归集数字积分</view>
|
||
<view class="popup_close" @click="closeCollect">
|
||
<u-icon name="close" style="margin-left:32rpx" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- 表单界面 -->
|
||
<view class="popup_form" v-if="!collectSuccess">
|
||
<view class="form_item">
|
||
<view class="form_icon">
|
||
<up-image src="/static/common/phone-1.png" width="24" height="24" />
|
||
</view>
|
||
<input class="form_input" v-model="collectForm.mobile" placeholder="请输入省代理手机号" type="number" />
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_icon">
|
||
<up-image src="/static/common/amount-1.png" width="24" height="24" />
|
||
</view>
|
||
<input class="form_input" v-model="collectForm.amount" placeholder="请输入数量" type="digit" />
|
||
<view class="form_all" @click="fillAllAmount">全部</view>
|
||
</view>
|
||
<view class="form_tip">可用数量：{{ availableAmount }}</view>
|
||
<view class="form_item">
|
||
<view class="form_icon">
|
||
<up-image src="/static/common/password-1.png" width="24" height="24" />
|
||
</view>
|
||
<input class="form_input" v-model="collectForm.password" placeholder="请输入支付密码"
|
||
:type="collectForm.showPassword ? 'text' : 'password'" />
|
||
<view class="form_eye" @click="togglePassword">
|
||
<up-image
|
||
:src="collectForm.showPassword ? '/pages/login_package/static/login/show.png' : '/pages/login_package/static/login/hidden.png'"
|
||
width="24" height="24" />
|
||
</view>
|
||
</view>
|
||
<view class="popup_confirm" @click="collectConfirm">确定归集</view>
|
||
</view>
|
||
<!-- 成功界面 -->
|
||
<view class="popup_success" v-else>
|
||
<view class="success_icon">
|
||
<up-image src="/static/common/success-1.png" width="64" height="64" bgColor="#fff" />
|
||
</view>
|
||
<view class="success_title">归集成功</view>
|
||
<view class="success_amount">{{ collectForm.amount }}</view>
|
||
<view class="popup_confirm" @click="closeCollect">好的</view>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
<!-- 字段解释弹窗 -->
|
||
<up-popup :show="tipShow" mode="center" :round="16" @close="tipShow = false">
|
||
<view class="tip_popup_content">
|
||
<view class="tip_popup_title">字段解释</view>
|
||
<view class="tip_popup_body">
|
||
<view class="tip_subtitle">{{ currentTip.subTitle }}</view>
|
||
<view class="tip_detail">{{ currentTip.detail }}</view>
|
||
</view>
|
||
<view class="tip_popup_btn" @click="tipShow = false">我知道了</view>
|
||
</view>
|
||
</up-popup>
|
||
<qiaobao-assistant page-key="pages/mine_package/mine_purse/mine_purse" title="钱包与账户" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import CryptoJS from 'crypto-js';
|
||
import Header from "@/components/header.vue";
|
||
import { getAcctBalance, collectQuery } from "@/api/finance.js";
|
||
import { getValue } from "@/utils/enumUtils.js";
|
||
import { formatDate, handleAmount } from "@/utils/index.js";
|
||
|
||
export default {
|
||
options: {
|
||
styleIsolation: 'shared',
|
||
},
|
||
components: { headerComponent: Header },
|
||
data() {
|
||
return {
|
||
balanceLoading: false,
|
||
balanceList: [],
|
||
activeTip: -1,
|
||
collectShow: false,
|
||
collectSuccess: false,
|
||
availableAmount: 0,
|
||
tipShow: false,
|
||
tipCategory: "",
|
||
collectForm: {
|
||
mobile: "",
|
||
amount: "",
|
||
password: "",
|
||
showPassword: false,
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
currentTip() {
|
||
const map = {
|
||
expend: {
|
||
subTitle: "贡献值：",
|
||
detail: "购买商品确认签收后立即可获得贡献值。按毛利的1:1发放",
|
||
},
|
||
raffle: {
|
||
subTitle: "抽奖次数：",
|
||
detail: "购买商品可获得抽奖次数，抽奖次数可在抽奖活动中进行使用",
|
||
},
|
||
vcoin: {
|
||
subTitle: "数字积分：",
|
||
detail:
|
||
"根据贡献值按照比例进行转换获得1. 商城贡献值10W内的贡献值1:1转换成数字积分2. 商城贡献值10W外的根据数字积分数量和总贡献值及贡献值占比进行获得。",
|
||
},
|
||
rights: {
|
||
subTitle: "消费者权益：",
|
||
detail: "根据数字积分进行转换，根据消费者权益可获得共享计划权益",
|
||
},
|
||
};
|
||
return map[this.tipCategory] || { subTitle: "", detail: "" };
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.getAcctBalance();
|
||
},
|
||
methods: {
|
||
openTip(category) {
|
||
this.tipCategory = category;
|
||
this.tipShow = true;
|
||
},
|
||
getValue,
|
||
formatDate,
|
||
handleAmount,
|
||
getOperationButtons(item) {
|
||
// return [
|
||
// { type: 'recharge', text: '充值', show: item.isRecharge },
|
||
// { type: "withdraw", text: "提现", show: item.isWithdrawal },
|
||
//{ type: "exchange", text: "兑换", show: item.isExchange },
|
||
//].filter((btn) => btn.show);
|
||
let buttons = [];
|
||
const functionConfig = JSON.parse(item.functionConfig);
|
||
console.log("functionConfig---", functionConfig);
|
||
if (functionConfig && functionConfig.length > 0) {
|
||
buttons = functionConfig.filter((btn) => btn.status);
|
||
}
|
||
return buttons
|
||
},
|
||
// 跳转到详情
|
||
jumpBonus(item) {
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/mine_package/mine_purse_log/mine_purse_log?category=" +
|
||
item.categoty +
|
||
"&lockId=" +
|
||
item.lockId +
|
||
"&curId=" +
|
||
item.curId +
|
||
"&preId=" +
|
||
item.preId + "&bonusId=" + item.bonusId,
|
||
});
|
||
},
|
||
// 查询余额
|
||
async getAcctBalance() {
|
||
this.balanceLoading = true;
|
||
const resp = await getAcctBalance();
|
||
let data = [];
|
||
if (resp && resp.bizcode === 100) {
|
||
data = resp.data || [];
|
||
}
|
||
this.balanceList = data;
|
||
this.balanceLoading = false;
|
||
},
|
||
// 提现
|
||
jumpInfo(row, type) {
|
||
console.log("row", row, type);
|
||
if (type === "withdraw") {
|
||
// 提现
|
||
// uni.navigateTo({
|
||
// url: "/pages/mine_package/mine_purse_bonus_withdraw/mine_purse_bonus_withdraw?amount=" + row.curAmount + "&category=" + row.categoty,
|
||
|
||
// })
|
||
uni.navigateTo({
|
||
url: "/pages/rwa_package/account/withdraw?type=0",
|
||
});
|
||
} else if (type === "recharge") {
|
||
// 充值
|
||
uni.navigateTo({
|
||
url: "/pages/rwa_package/account/withdraw?type=1",
|
||
});
|
||
// uni.navigateTo({
|
||
// url: "/pages/mine_package/mine_purse_recharge/mine_purse_recharge?amount=" + row.curAmount + "&category=" + row.categoty,
|
||
// })
|
||
} else if (type === "exchange") {
|
||
// 兑换
|
||
// uni.navigateTo({
|
||
// url: "/pages/mine_package/mine_purse_exchange/mine_purse_exchange?amount=" + row.curAmount + "&category=" + row.categoty,
|
||
// })
|
||
uni.navigateTo({
|
||
url: "/pages/rwa_package/shop/points-shop",
|
||
});
|
||
} else if (type === "transfer") {
|
||
console.log("transfer转出...");
|
||
} else if (type === "collect") {
|
||
// 归集
|
||
console.log("collect归集...");
|
||
this.availableAmount = row ? (row.curAmount || 0) : 0;
|
||
this.collectSuccess = false;
|
||
this.collectShow = true;
|
||
} else if (type === "deduction") {
|
||
// 兑换
|
||
uni.navigateTo({
|
||
url: "/pages/rwa_package/shop/points-shop",
|
||
});
|
||
}
|
||
},
|
||
onTip(index) {
|
||
if (index == this.activeTip) {
|
||
this.activeTip = -1;
|
||
return;
|
||
}
|
||
this.activeTip = index;
|
||
},
|
||
// 填充全部数量
|
||
fillAllAmount() {
|
||
this.collectForm.amount = String(this.availableAmount);
|
||
},
|
||
// 切换密码显示
|
||
togglePassword() {
|
||
this.collectForm.showPassword = !this.collectForm.showPassword;
|
||
},
|
||
// 关闭弹窗
|
||
closeCollect() {
|
||
this.collectShow = false;
|
||
this.collectSuccess = false;
|
||
this.collectForm = { mobile: "", amount: "", password: "", showPassword: false };
|
||
},
|
||
// 归集确认
|
||
async collectConfirm() {
|
||
const { mobile, amount, password } = this.collectForm;
|
||
if (!mobile) {
|
||
uni.showToast({ title: '请输入省代理手机号', icon: 'none' });
|
||
return;
|
||
}
|
||
if (!/^1[3-9]\d{9}$/.test(mobile)) {
|
||
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
|
||
return;
|
||
}
|
||
if (!amount || parseFloat(amount) <= 0) {
|
||
uni.showToast({ title: '请输入有效数量', icon: 'none' });
|
||
return;
|
||
}
|
||
if (parseFloat(amount) > parseFloat(this.availableAmount)) {
|
||
uni.showToast({ title: '数量不能超过可用数量', icon: 'none' });
|
||
return;
|
||
}
|
||
if (!password) {
|
||
uni.showToast({ title: '请输入支付密码', icon: 'none' });
|
||
return;
|
||
}
|
||
// 调用归集接口
|
||
const resp = await collectQuery({ mobile, amount, password: CryptoJS.MD5(password).toString() });
|
||
if (resp && resp.bizcode === 100) {
|
||
uni.showToast({ title: '归集成功', icon: 'success' });
|
||
this.collectSuccess = true;
|
||
this.getAcctBalance();
|
||
} else {
|
||
uni.showToast({ title: resp.msg || '归集失败', icon: 'none' });
|
||
}
|
||
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.purse_warp {
|
||
height: 100%;
|
||
overflow-y: hidden;
|
||
background-color: $app-bj;
|
||
|
||
.purse_content_warp {
|
||
padding: 30rpx 30rpx 10rpx;
|
||
height: calc(100vh - 218rpx);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.purse_warp_item {
|
||
margin-bottom: 30rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 32rpx;
|
||
|
||
.purse_item_title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.purse_item_title-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin: 0 15rpx;
|
||
}
|
||
|
||
::v-deep(.purse_amount) {
|
||
margin-right: 15rpx;
|
||
margin-top: 6rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.u-image__image {
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
|
||
.right_soild {
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
|
||
.purse_item_title-right {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.button {
|
||
border-radius: 12rpx;
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.exchange_button {
|
||
background: #ffffff;
|
||
color: #7934f6;
|
||
border: 2rpx solid #7934f6;
|
||
}
|
||
|
||
.recharge_button {
|
||
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.purse_item_bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.bottom_item {
|
||
margin-top: 16rpx;
|
||
|
||
.bottom_item_amount {
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
|
||
&.bottom_item_amount_center {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.bottom_item_lock {
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #999999;
|
||
text-align: end;
|
||
}
|
||
|
||
.bottom_item_title {
|
||
margin-top: 16rpx;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
|
||
&.bottom_item_title_right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
&.bottom_item_title_center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.title_text {
|
||
white-space: nowrap;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
line-height: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
::v-deep(.tip_icon),
|
||
.tip_icon {
|
||
margin-left: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.u-image,
|
||
.u-image__image,
|
||
image {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
margin: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom_item_tip {
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
text-align: end;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
|
||
.popup_content {
|
||
background: #ffffff;
|
||
border-radius: 48rpx 48rpx 0 0;
|
||
padding: 30rpx 32rpx;
|
||
padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
|
||
|
||
.popup_header {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
margin-bottom: 48rpx;
|
||
|
||
.popup_title {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #71737C;
|
||
}
|
||
|
||
.popup_close {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.popup_form {
|
||
.form_item {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #f7f7f7;
|
||
border-radius: 20rpx;
|
||
padding: 0 28rpx;
|
||
height: 100rpx;
|
||
margin-bottom: 28rpx;
|
||
|
||
.form_icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.form_input {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.form_all {
|
||
font-size: 28rpx;
|
||
color: #7934f6;
|
||
margin-left: 20rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form_eye {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.form_tip {
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
text-align: right;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.popup_confirm {
|
||
margin-top: 20rpx;
|
||
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
|
||
border-radius: 20rpx;
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.popup_success {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 60rpx 0;
|
||
|
||
.success_icon {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.success_title {
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.success_amount {
|
||
font-weight: bold;
|
||
font-size: 48rpx;
|
||
color: #333333;
|
||
margin-bottom: 48rpx;
|
||
}
|
||
|
||
.popup_confirm {
|
||
width: 100%;
|
||
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
|
||
border-radius: 20rpx;
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tip_popup_content {
|
||
background: #ffffff;
|
||
width: 600rpx;
|
||
border-radius: 24rpx;
|
||
padding: 44rpx 36rpx;
|
||
box-sizing: border-box;
|
||
|
||
.tip_popup_title {
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.tip_popup_body {
|
||
margin-bottom: 48rpx;
|
||
|
||
.tip_subtitle {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.tip_detail {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
}
|
||
}
|
||
|
||
.tip_popup_btn {
|
||
width: 100%;
|
||
height: 84rpx;
|
||
background: #707070;
|
||
border-radius: 42rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
</style>
|