104 lines
4.7 KiB
Vue
104 lines
4.7 KiB
Vue
|
<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>
|