hengmei-two/pagesA/peacockCoin/peacockCoin.vue

104 lines
4.7 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: statusHNH+'px'}" class="pad-zy30 fon28 col3">
<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">3000</view>
<view class="mar-s36" @tap="isTiX=true" style="width: 152rpx;height: 60rpx;line-height: 60rpx;text-align: center;color: #FFFFFF;background: #3875F6;border-radius: 30rpx;font-size: 26rpx;">提现</view>
</view>
<view class="disjcac fc width33">
<view class="fon36 bold">300 <span style="font-size: 26rpx;font-weight: 400;"></span></view>
<view class="mar-s36 fon26 col3" style="height: 60rpx;line-height: 60rpx;">审核中</view>
</view>
<view class="disjcac fc width33">
<view class="fon36 bold">0 <span style="font-size: 26rpx;font-weight: 400;"></span></view>
<view class="mar-s36 fon26 col3" style="height: 60rpx;line-height: 60rpx;">已提现</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" style="color: #3875F6;">+{{item.num}}</view>
<view v-show="!activeJF" class="fon36 bold">-{{item.num}}</view>
</view>
</view>
<!-- 分享按钮 -->
<view class="disjcac" style="width: 588rpx;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 20rpx;background: #38CE51;position: fixed;bottom: 76rpx;left: 50%;transform: translateX(-50%);">
<image src="/static/public/bottom-shear.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
<view class="fon40 colf bold mar-z10">分享给好友</view>
<button class="posia" open-type="share" style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;"></button>
</view>
<!-- 提现弹框 -->
<view v-if="isTiX" @tap="isTiX=false" class="disjcac tc" style="position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,.54);">
<view class="bacf width100 radius20 pad30" style="margin: 0 85rpx;" @tap.stop="isTiX=true">
<view class="fon28 bold" style="color: #343434;">孔雀币提现</view>
<view class="fon28 mar-sx30" style="color: #343434;font-weight: 500;">兑换比例100孔雀币兑换1元人民币</view>
<input type="text" value="" placeholder="请输入提现金额" class="width100 radius10" style="border: 2rpx solid #E0E0E0;margin-bottom: 80rpx;height: 60rpx;"/>
<view class="disjbac">
<view @tap.stop="isTiX=false" style="width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;border-radius: 10rpx;font-size: 28rpx;color: #FFFFFF;background-color: #3875F6;">立即提现</view>
<view @tap.stop="isTiX=false" style="width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;border-radius: 10rpx;font-size: 28rpx;color: #FFFFFF;background-color: #C8C8C8;"></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusHNH:uni.getStorageSync('statusHNH'),
publicColor:uni.getStorageSync('publicColor'),//主题颜色
activeJF:true,
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:true
}
},
onLoad() {
this.$toolAll.tools.isLogin()
},
methods: {
switchState(flag){
this.activeJF = flag;
if(flag) {
this.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'},
]
} else {
this.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'},
]
}
}
}
}
</script>
<style>
</style>