hm-examples/pagesA/peacockCoin/peacockCoin.vue

188 lines
6.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<!-- 状态栏 -->
<status-nav :titleVal="'孔雀币管理'" :statusTitle="true"></status-nav>
<view :style="{paddingTop: statusHeight+'px'}" class="pad-zy30 fon28 col3 pad-x180">
<view class="mar-s20 bacf pad20 radius20">
<view class="mar-x30">当前孔雀币</view>
<view class="disjbac">
<view class="disjcac fc width33" style="align-items: flex-start;">
<view class="fon36 bold mar-z20">{{dangKQ}}</view>
<view class="mar-s36 coin-tx-btn" @tap="isTiX=true"></view>
</view>
<view class="disjcac fc width33">
<view class="fon36 bold">{{shenHZ}}<span class="coin-yuan"></span></view>
<view class="mar-s36 fon26 col3 coin-miao">审核中</view>
</view>
<view class="disjcac fc width33">
<view class="fon36 bold">{{yiTKQ}}<span class="coin-yuan"></span></view>
<view class="mar-s36 fon26 col3 coin-miao">已提现</view>
</view>
</view>
</view>
<!-- 获取列表提现列表 -->
<view class="mar-s20 bacf pad20 radius20">
<view class="mar-x50 fon28 disja">
<view @tap="switchState(true)" :class="activeJF?'col3 bold':'col9'">获取列表</view>
<view @tap="switchState(false)" :class="!activeJF?'col3 bold':'col9'">支出列表</view>
</view>
<view v-for="(item,index) in dataList" :key="index" class="disjbac bbot pad-sx10">
<view>
<view class="fon26 col3">{{item.title}}</view>
<view class="mar-s10 fon20 col9">{{item.time}}</view>
</view>
<view v-show="activeJF" class="fon36 bold pcol">+{{item.num}}</view>
<view v-show="!activeJF" class="fon36 bold">{{item.num}}</view>
</view>
</view>
<!-- 分享按钮 -->
<view class="disjcac coin-share-box">
<image src="/static/public/bottom-shear.png" mode=""></image>
<view class="fon40 colf bold mar-z10">分享给好友</view>
<button class="posia-op" open-type="share"></button>
</view>
<!-- 提现弹框 -->
<view v-if="isTiX" @tap="isTiX=false" class="disjcac tc tx-tk-box">
<view class="bacf width100 radius20 pad30 mar-zy85" @tap.stop="isTiX=true">
<view class="fon28 bold col34">孔雀币提现</view>
<view class="fon28 mar-s30 col34 font5">兑换比例{{kqbl}}孔雀币兑换{{whatPrice}}元人民币</view>
<view class="fon24 mar-s10 mar-x30 colf8 font5">最低提现金额为:{{limit_price}}元。</view>
<input type="number" v-model="kNum" placeholder="请输入孔雀币" class="width100 radius10"/>
<view class="disjbac">
<view @tap.stop="confrimT" class="tk-btn pbackc">立即提现</view>
<view @tap.stop="isTiX=false" class="tk-btn"></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
activeJF:true,
kNum:'',//输入框孔雀币数量
dataList:[
// {title:'积分兑换',time:'2021.09.06 10:30:10',num:'1'},
// {title:'分享订单',time:'2021.09.06 10:30:10',num:'1'},
// {title:'订单分享',time:'2021.09.06 10:30:10',num:'1'},
// {title:'任务完成',time:'2021.09.06 10:30:10',num:'1'},
],
isTiX:false,
dangKQ:3000,//当前孔雀币
shenHZ:300 ,//审核中的孔雀币
yiTKQ:0 ,//已提孔雀币
kqbl:0,//兑换比例
whatPrice:0,//多少元
ntype:'in',//默认coin:孔雀币记录获取 withdrawal提现记录获取
times:0,//次数
page:1,
size:10,
total:'',//总数
isZanw:true,
realPrice:0,//实际的钱
limit_price:0//最低限制金额
}
},
computed:{
statusHeight() {
return this.$store.state.statusHeight
}
},
onReachBottom() {
if(this.total!=this.dataList.length){
this.page++
this.checkList(this.ntype)//调用自主预约列表事件
} else {
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多记录','none',1000)
this.isZanw = false
}
},
onShow() {
// 禁用小程序分享
this.$toolAll.tools.disableShareEv();
},
onLoad(options) {
this.checkInfo();
this.checkList(this.ntype);
},
methods: {
confrimT(){//确定提现事件、
this.realPrice = this.whatPrice / this.kqbl * this.kNum;
if(this.kNum=='' || this.kNum<=0){
this.$toolAll.tools.showToast('请输入孔雀币数量');
} else if(this.kNum > this.dangKQ){
this.$toolAll.tools.showToast('请输入正确的孔雀币数量');
} else if((this.limit_price - this.realPrice) > 0 ){
this.$toolAll.tools.showToast(`最低提现${this.limit_price}`);
} else {
if(this.times==0){
this.times++;
this.$requst.post('user/withdrawal-coin',{coin:this.kNum}).then(res=>{
if(res.code==0){
this.isTiX = false;
this.$toolAll.tools.showToast('提现已提交审核');
setTimeout(()=>{
this.dataList = [];
this.page =1;
this.isZanw = true;
this.ntype = 'out';
this.checkInfo();//查询账户信息
this.checkList(this.ntype);//查询已提现列表
this.activeJF = false;
this.times = 0;//可点
this.kNum = '';//清空输入框
},1500)
} else this.$toolAll.tools.showToast(res.msg);
})
}
}
},
checkList(ntype){//查询数据列表
this.$requst.post('user/coin-log',{type:ntype,page:this.page,size:this.size}).then(res=>{
if(res.code==0){
if(this.page==1) this.dataList = [];
this.total = res.data.total;
if(res.data.list.length!=0){
res.data.list.forEach(item=>{
let obj = {
title:item.name,
time:item.created_at,
num:item.num
}
this.dataList.push(obj);
})
}
}
})
},
checkInfo(){//查询账户详情
this.$requst.post('user/coin-load').then(res=>{
if(res.code==0){
this.dangKQ = res.data.coin;//当前孔雀币
this.shenHZ = res.data.withdrawal_ing;//审核中的孔雀币
this.yiTKQ = res.data.withdrawald;//已提孔雀币
this.limit_price = res.data.limit_price*1;//限制金额
this.kqbl = res.data.withdrawal_proportion.coin;//孔雀币比例
this.whatPrice = res.data.withdrawal_proportion.money;//兑换后的钱
}
})
},
switchState(flag){//切换事件
this.dataList = [];
this.activeJF = flag;
this.page =1;
this.isZanw = true;
if(flag) {
this.ntype ='in';
this.checkList(this.ntype);
} else {
this.ntype ='out';
this.checkList(this.ntype);
}
},
}
}
</script>