125 lines
2.5 KiB
Vue
125 lines
2.5 KiB
Vue
<template>
|
|
<div class="distribution-container">
|
|
<!-- Header section -->
|
|
<div class="distribution-header">
|
|
<view class="hcolng">
|
|
<view>共</view>
|
|
<view :style="{ fontSize: '30px' }">{{ totle }}</view>
|
|
<view>人</view>
|
|
</view>
|
|
</div>
|
|
<div class="distribution-center">
|
|
<div>
|
|
<div>用户头像</div>
|
|
<div>昵称</div>
|
|
<div>绑定日期</div>
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in getlist"
|
|
:key="item.id"
|
|
:style="{ background: index % 2 == 0 ? '#fff' : '' }"
|
|
>
|
|
<div class="imgfn">
|
|
<img :src="imgfun(item.face) "
|
|
width="60"
|
|
height="60"
|
|
style="border-radius: 50%"
|
|
mode="" />
|
|
</div>
|
|
<div>{{ item.nickName }}</div>
|
|
<div>{{ timefun(item.lastLoginDate) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { bindUsers } from "@/api/point.js";
|
|
export default {
|
|
name: "MyDistribution",
|
|
data() {
|
|
return {
|
|
show: false,
|
|
totle: 0,
|
|
getlist: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getl();
|
|
},
|
|
methods: {
|
|
timefun(e) {
|
|
return e.split(" ")[0];
|
|
},
|
|
touni(e) {
|
|
uni.navigateTo({ url: e });
|
|
},
|
|
goToDepositPage() {
|
|
uni.navigateTo({ url: "/pages/mine/deposit/operation" });
|
|
},
|
|
getl() {
|
|
bindUsers({}).then((res) => {
|
|
this.getlist = res.data.result;
|
|
this.totle = res.data.result.length;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep{
|
|
.uni-image{
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
// .imgfn{
|
|
// width: 30px;
|
|
// height: 30px;
|
|
// border-radius: 50%;
|
|
// }
|
|
.distribution-container {
|
|
font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
|
width: 100%;
|
|
color: #333;
|
|
|
|
.distribution-header {
|
|
background-color: #ff7d00;
|
|
color: white;
|
|
padding: 25px 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.hcolng {
|
|
display: flex;
|
|
padding: 10px 20px;
|
|
margin-top: 50px;
|
|
& > view {
|
|
font-weight: 700;
|
|
display: flex;
|
|
font-size: 14px;
|
|
margin: 0 5px;
|
|
align-items: end;
|
|
}
|
|
}
|
|
}
|
|
.distribution-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
& > div {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
padding: 10px 0px 10px 0px;
|
|
& > div {
|
|
width: 30%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
// justify-content: space-evenly;
|
|
}
|
|
}
|
|
</style>
|