hengmei-two/pagesA/integralManage/integralManage.vue

93 lines
3.9 KiB
Vue
Raw Normal View History

2021-10-22 03:07:32 +00:00
<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 bold">
<view class="mar-x30">当前积分</view>
<view style="font-size: 56rpx;">3000</view>
</view>
<view class="mar-s20 disjbac">
<view class="disjbac pad20 bacf radius20" style="width: 48%;box-sizing: border-box;">
<image src="../../static/public/integral-01-108.png" style="width: 108rpx;height: 108rpx;flex-shrink: 0;" mode=""></image>
<view class="width100" style="display: flex;justify-content: space-between;flex-direction: column;height: 108rpx;">
<view style="font-weight: 400;">我的分享人</view>
<view class="fon36 bold">100 <span style="font-size: 26rpx;font-weight: 400;"></span></view>
</view>
</view>
<view class="disjbac pad20 bacf radius20" style="width: 48%;box-sizing: border-box;">
<image src="../../static/public/integral-02-108.png" style="width: 108rpx;height: 108rpx;flex-shrink: 0;" mode=""></image>
<view class="disjbac fc width100"style="display: flex;justify-content: space-between;flex-direction: column;height: 108rpx;">
<view style="font-weight: 400;">签到记录</view>
<view style="width: 140rpx;height: 40rpx;line-height: 40rpx;text-align: center;color: #FFFFFF;background: #F6C338;border-radius: 30rpx;font-size: 24rpx;font-weight: 400;">立即签到</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>
</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'},
]
}
},
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'},
]
}
}
}
}
</script>
<style>
</style>