93 lines
3.9 KiB
Vue
93 lines
3.9 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 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>
|