Skip to content

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

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

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