/**
* @Author wangliang
* @date 20220726
*/
<template>
<div>
<div class="rarle">
<!--上部分-->
<div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
<tatle-bar :tatle="titleName" :tatleflag="titleflag" >
<div class="jfNumber">2134</div>
</tatle-bar>
</div>
<!--下部分-->
<div style="width: 100%;height: calc(65vh);background-color: #ebeef5;">
<div class="tab" style="border-radius: 10px;">
<van-tabs v-model:active="active" line-width="70px" line-height="2px" color="#007bff" style="margin-top: 10px;">
<van-tab title="积分收支明细" >
<van-divider style="background-color: #c6c8ca;margin-top: 0px;height: 0.5px" />
<!--按钮部分-->
<!-- <van-row>-->
<!-- <van-col span="24">-->
<!-- <van-row>-->
<!-- <van-col v-for="(item , index) in btn" :key="index" span="5" :class="item.flage ? 'van-color-blow':'van-color-graw' " @click="all(index)">{{ item.text }}</van-col>-->
<!-- </van-row>-->
<!-- </van-col>-->
<!-- </van-row>-->
<van-row>
<van-col v-for="(item , index) in btn" :key="index" span="5" :class="item.flage ? 'van-color-blow':'van-color-graw' " @click="all(index)" style="margin-left: 10px;border-radius: 5px;margin-top: -10px">{{ item.text }}</van-col>
</van-row>
<van-row class="ms-style" >
<van-col span="8" style="width: 90%;background-color: #ffffff;text-align: revert;margin-left: 14px;margin-top: 20px">本月获取积分<span style="color: #c69500">{{num}}</span> 已消耗3400</van-col>
</van-row>
<div style="width: 100%;height: 100%;">
<van-row v-if="showNow">
<van-col span="4" style="margin-top: 10px;font-size: smaller;margin-left: -22px;">存款积分奖励</van-col>
<van-col span="10" offset="4" style="margin-top: 10px;font-size: smaller;margin-left: 88px;color: #c69500">
{{numA}}</van-col>
</van-row>
<van-row v-if="showNow">
<van-col span="4" style="margin-top: 8px;font-size: smaller;margin-left: -2px">2022-07-24 15:38</van-col>
</van-row>
<div v-if="showNow" style="width: 100%;height:1px;border: 1px solid #f5f2f0;"></div>
<van-row v-if="showPast">
<van-col span="4" style="margin-top: 10px;font-size: smaller;margin-left: -34px;">过期积分</van-col>
<van-col span="10" offset="4" style="margin-top: 10px;font-size: smaller;margin-left: 100px;color: #171614">
{{numB}}</van-col>
</van-row>
<van-row v-if="showPast">
<van-col span="4" style="margin-top: 8px;font-size: smaller;margin-left: -2px">2022-07-24 15:38</van-col>
</van-row>
</div>
<div v-if="showPast" style="width: 100%;height:1px;border: 1px solid #f5f2f0;"></div>
</van-tab>
<van-tab title="积分兑换记录">
<van-divider style="background-color: #c6c8ca;margin-top: 0px;height: 0.5px"/>
<div style="text-align: left;margin-left: 10px;font-size: small;">
本月
</div>
<div class="littleCard d-flex mb-3" v-for="(item,index) in daijinquan" @click="changePage">
<div class="p-2">
<img :src="require('@/assets/images/daijinquan.png')" style="width: 90px;height: 90px;" />
</div>
<div class="p-2 wordposition">
<div class="d-flex flex-column" style="margin-top: 6px;">
<div class="p-2 "><span style="color: #212529;font-weight: bolder;">200元利息代金券</span></div>
<div class="p-2 ">
<div><span style="color: #606266;font-size: smaller;position: absolute;margin-top: 0px;">价格: 20000</span></div>
<div><span style="color: #606266;font-size: smaller;position: absolute;margin-top: 16px;">时间: 20220725 11:28:32 兑换</span></div>
</div>
</div>
</div>
</div>
</van-tab>
</van-tabs>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({
name: "ExchangeRecord",
})
export default class ExchangeRecord extends Vue {
showNow=true;
showPast=true;
active="";
num=3842;
numA="+3200";
numB="-2000";
titleName="积分收支明细";
titleflag= true;
daijinquan=[{},{},{}];
all(params:number){
if(params ==0){//点击全部
this.btn[0].flage=true;
this.btn[1].flage=false;
this.btn[2].flage=false;
this.showNow=true;
this.showPast=true;
//todo
} else if(params ==1){//点击全部
this.btn[0].flage=false;
this.btn[1].flage=true;
this.btn[2].flage=false;
this.showPast=false;
this.showNow=true;
//todo
}if(params ==2){//点击全部
this.btn[0].flage=false;
this.btn[1].flage=false;
this.btn[2].flage=true;
this.showNow=false;
this.showPast=true;
//todo
}
}
btn:any=[
{text:'全部',flage:true},
{text:'已获取',flage:false},
{text:'已消耗',flage:false},
];
changePage() {
this.$router.push({
name: "ExchangeDetail",
});
}
}
</script>
<style scoped lang="scss">
.body{
width: 96%;
background-color: #02a7f0;
border-radius: 6px;
margin-left: 2%;
z-index: 10;
}
.jfNumber{
font-size: 24px;
color: #ffffff;
font-weight: 900;
margin-left: 2%;
margin-top: 18%;
}
.tab{
position: fixed;
top: 24vh;
left: auto;
left: 2%;
width: 96%;
height: 74%;
margin: 0px auto;
text-align: center;
background-color: #ffffff;
}
.van-col--l {
margin-top: 10px;
background-color: #1989fa;
border-radius: 5px;
margin-left: 5px;
border: 1px solid;
}
.van-col--b {
margin-top: 10px;
background-color: #ffffff;
border-radius: 5px;
margin-left: 5px;
border: 1px solid;
}
.ms-style{
width: 90%;
text-align: initial;
background-color: #ffffff;
}
.van-col--4 {
width: 40%;
}
.littleCard {
background-color: #f5f7fa;
width: 94%;
margin-left: 3%;
height: fit-content;
border-radius: 10px;
box-shadow: 0px 0px 10px rgb(221 221 221);
margin-top: 10px;
}
.wordposition {
text-align: left;
margin-left: -16px;
}
.van-color-blow{
text-align: center;font-size: 12px;border: 1px solid;background-color: #02a7f0;width: 50px;
}
.van-color-graw{
text-align: center;font-size: 12px;border: 1px solid;background-color: #ffffff;width: 50px;
}
</style>