Skip to content

M
mcep-h5
提交 7941916e 编写于 作者: donghuawangliang0612's avatar donghuawangliang0612
浏览文件
操作

兑换记录,合作企业页面完善开发

上级 447e6c8e
显示空白字符变更
内嵌 并排
正在显示 包含 106 行增加 和 39 行删除
src/views/workbench/ExchangeRecord.vue
浏览文件 @ 7941916e
...@@ -9,31 +9,34 @@ ...@@ -9,31 +9,34 @@
</div> </div>
<!--下部分--> <!--下部分-->
<div style="width:100%;height: calc(100vh);background-color: #ebeef5;"> <div style="width: 100%;height: calc(65vh);background-color: #ebeef5;">
<van-tabs v-model:active="active" class="tab">
<van-tab title="积分收支明细"> <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-row>-->
<van-col span="8">全部</van-col> <!-- <van-col span="24">-->
<van-col span="8">已获取</van-col> <!-- <van-row>-->
<van-col span="8">已消耗</van-col> <!-- <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-row>-->
<van-row gutter="20" class="brn-DIV"> <!-- </van-col>-->
<van-col span="8">全部</van-col> <!-- </van-row>-->
<van-col span="8">已获取</van-col> <van-row>
<van-col span="8">已消耗</van-col> <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>
<van-row class="ms-style" > <van-row class="ms-style" >
<van-col span="8" style="width: 90%;background-color: #ffffff;text-align: revert;">本月获取积分3842 已消耗3400</van-col> <van-col span="8" style="width: 90%;background-color: #ffffff;text-align: revert;margin-left: 14px;margin-top: 20px">本月获取积分3842 已消耗3400</van-col>
</van-row> </van-row>
<div style="width: 100%;height: 100%;"> <div style="width: 100%;height: 100%;">
<van-row> <van-row>
<van-col span="4">存款积分奖励</van-col> <van-col span="4" style="margin-top: 10px;font-size: smaller;margin-left: -22px;">存款积分奖励</van-col>
<van-col span="10" offset="4">3211</van-col> <van-col span="10" offset="4" style="margin-top: 10px;font-size: smaller;margin-left: 40px;">3211</van-col>
</van-row> </van-row>
<van-row> <van-row>
<van-col span="4" style="margin-left: 6%;">2022-07-24 15:38</van-col> <van-col span="4" style="margin-top: 8px;font-size: smaller;">2022-07-24 15:38</van-col>
</van-row> </van-row>
</div> </div>
...@@ -41,11 +44,28 @@ ...@@ -41,11 +44,28 @@
</van-tab> </van-tab>
<van-tab title="积分兑换记录"> <van-tab title="积分兑换记录">
<div> <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">
<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> </div>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</div>
</div> </div>
</div> </div>
...@@ -60,6 +80,29 @@ import {Component, Vue} from "vue-property-decorator"; ...@@ -60,6 +80,29 @@ import {Component, Vue} from "vue-property-decorator";
export default class ExchangeRecord extends Vue { export default class ExchangeRecord extends Vue {
titleName="积分收支明细"; titleName="积分收支明细";
titleflag= true; titleflag= true;
all(params:number){
if(params ==0){//点击全部
this.btn[0].flage=true;
this.btn[1].flage=false;
this.btn[2].flage=false;
//todo
} else if(params ==1){//点击全部
this.btn[0].flage=false;
this.btn[1].flage=true;
this.btn[2].flage=false;
//todo
}if(params ==2){//点击全部
this.btn[0].flage=false;
this.btn[1].flage=false;
this.btn[2].flage=true;
//todo
}
}
btn:any=[
{text:'全部',flage:true},
{text:'已获取',flage:false},
{text:'已消耗',flage:false},
];
} }
</script> </script>
...@@ -84,20 +127,25 @@ export default class ExchangeRecord extends Vue { ...@@ -84,20 +127,25 @@ export default class ExchangeRecord extends Vue {
left: auto; left: auto;
left: 2%; left: 2%;
width: 96%; width: 96%;
height: 100%; height: 74%;
/* border-radius: 108px; */
margin: 0px auto; margin: 0px auto;
text-align: center; text-align: center;
background-color: #ffffff; background-color: #ffffff;
} }
.van-col--8 { .van-col--l {
width: 20%;
margin-top: 10px; margin-top: 10px;
background-color: #1989fa; background-color: #1989fa;
/* border: 1px solid;*/
margin: 7px;
border-radius: 5px; border-radius: 5px;
text-align: center; 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{ .ms-style{
width: 90%; width: 90%;
...@@ -107,4 +155,23 @@ export default class ExchangeRecord extends Vue { ...@@ -107,4 +155,23 @@ export default class ExchangeRecord extends Vue {
.van-col--4 { .van-col--4 {
width: 40%; 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> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或