|
|
@@ -18,23 +18,24 @@
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
<block v-for="(item,index) in list.data" :key="index">
|
|
|
<tui-list-cell :arrow="true" @click="pageTo({ url: '/admin/member/detail', query: { id: item.id } })" >
|
|
|
- <div class="tui-msg-box">
|
|
|
- <img :src="item.avatar" class="tui-msg-pic" mode="widthFix" />
|
|
|
- <div class="tui-msg-item">
|
|
|
- <div class="tui-msg-name">
|
|
|
- <div class="tui-user-name">{{item.name}}</div>
|
|
|
+ <div class="user-card">
|
|
|
+ <div class="user-avatar">
|
|
|
+ <img :src="item.avatar" class="avatar-img" mode="aspectFill" />
|
|
|
+ </div>
|
|
|
+ <div class="user-info">
|
|
|
+ <div class="user-main">
|
|
|
+ <div class="user-name">{{item.name}}</div>
|
|
|
+ <div class="user-balance" v-if="Number(item.balance) !== 0">
|
|
|
+ <text v-if="Number(item.balance) > 0" class="balance positive">+￥{{ parseFloat(item.balance).toFixed(2) }}</text>
|
|
|
+ <text v-if="Number(item.balance) < 0" class="balance negative">-￥{{ parseFloat(Math.abs(item.balance)).toFixed(2) }}</text>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="tui-msg-content">
|
|
|
- <span>{{item.visitTime.substr(5,11)}}</span>
|
|
|
- <text v-if="Number(item.balance)>0" style="color:#049E2C;font-weight:bold;margin-left:20upx;">{{ parseFloat(item.balance) }}</text>
|
|
|
- <text v-if="Number(item.balance)<0" style="color:red;font-weight:bold;margin-left:20upx;">{{ parseFloat(item.balance) }}</text>
|
|
|
- <text v-if="!$util.isEmpty(item.memberName)" style="color:#049E2C;font-weight:bold;margin-left:20upx;">{{ item.memberName }}</text>
|
|
|
+ <div class="user-meta">
|
|
|
+ <div class="visit-time">{{item.visitTime.substr(5,11)}}</div>
|
|
|
+ <div v-if="!$util.isEmpty(item.memberName)" class="member-badge">{{ item.memberName }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="tui-msg-right">
|
|
|
- <badge-module type="danger" :dot="item.level==3?true:false" v-if="item.messageNum>0" >{{item.messageNum}}</badge-module>
|
|
|
- </div>
|
|
|
</tui-list-cell>
|
|
|
</block>
|
|
|
</block>
|
|
|
@@ -149,6 +150,11 @@ export default {
|
|
|
}
|
|
|
.list-wrap {
|
|
|
padding-top: 100upx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10upx;
|
|
|
+ margin: 0 20upx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
.list {
|
|
|
background-color: #fff;
|
|
|
margin-bottom: 20upx;
|
|
|
@@ -194,121 +200,97 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.tui-msg-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .user-card {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20upx 0;
|
|
|
|
|
|
- .tui-msg-pic {
|
|
|
+ .user-avatar {
|
|
|
width: 80upx;
|
|
|
height: 80upx;
|
|
|
border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
margin-right: 20upx;
|
|
|
+
|
|
|
+ .avatar-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .tui-msg-item {
|
|
|
- max-width: 500upx;
|
|
|
- min-height: 80upx;
|
|
|
- overflow: hidden;
|
|
|
+ .user-info {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- & > div {
|
|
|
- @include disFlex(center, flex-start);
|
|
|
- & > div:first-child {
|
|
|
- margin-right: 8upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .level-img {
|
|
|
- ::v-deep.vip-text {
|
|
|
- left: 70upx;
|
|
|
- top: 8upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .normal-img {
|
|
|
- width: 70upx;
|
|
|
- padding: 2upx 6upx;
|
|
|
- color: #999;
|
|
|
- background-color: #f0f2f6;
|
|
|
- border-radius: 20upx;
|
|
|
- .vip-text {
|
|
|
- font-size: 24upx;
|
|
|
- transform: scale(0.6);
|
|
|
- position: relative;
|
|
|
- top: -2upx;
|
|
|
- left: -8upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .member-img {
|
|
|
- width: 70upx;
|
|
|
- padding: 2upx 6upx;
|
|
|
- color: green;
|
|
|
- background-color: #f0f2f6;
|
|
|
- border-radius: 20upx;
|
|
|
- .vip-text {
|
|
|
- font-size: 24upx;
|
|
|
- transform: scale(0.6);
|
|
|
- position: relative;
|
|
|
- top: -2upx;
|
|
|
- left: -8upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .iconfont {
|
|
|
- color: #00aaed;
|
|
|
- }
|
|
|
+ height: 80upx;
|
|
|
}
|
|
|
|
|
|
- .tui-msg-name {
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- font-size: 30upx;
|
|
|
- line-height: 1;
|
|
|
- color: #262b3a;
|
|
|
- .tui-user-name {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- width: 260upx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .user-main {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ }
|
|
|
|
|
|
- .tui-msg-content {
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- font-size: 24upx;
|
|
|
- line-height: 1;
|
|
|
- color: #9397a4;
|
|
|
- .debt-amount{
|
|
|
- margin-left:20upx;
|
|
|
- .amount_num{
|
|
|
- color:red;
|
|
|
- margin-left:5upx;
|
|
|
- font-weight:bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .user-name {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20upx;
|
|
|
+ min-width: 0;
|
|
|
+ max-width: 300upx;
|
|
|
+ }
|
|
|
|
|
|
-.tui-msg-right {
|
|
|
- max-width: 120upx;
|
|
|
- height: 80upx;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: 24upx;
|
|
|
- text-align: right;
|
|
|
- display: flex;
|
|
|
- // flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.user_tag{
|
|
|
- border:1px solid #CCCCCC;
|
|
|
- padding:5upx 12upx 5upx 12upx;
|
|
|
- border-radius:25upx;
|
|
|
- color:#BBBBBB;
|
|
|
- margin-right:10upx;
|
|
|
- margin-bottom:12upx;
|
|
|
- display:inline-block;
|
|
|
- font-size:30upx;
|
|
|
+ .user-balance {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .positive {
|
|
|
+ color: #049E2C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .negative {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-meta {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #9397a4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .visit-time {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20upx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .member-badge {
|
|
|
+ background: linear-gradient(135deg, #049E2C, #06c235);
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 6upx 16upx;
|
|
|
+ border-radius: 20upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 20upx;
|
|
|
+ box-shadow: 0 2upx 8upx rgba(4, 158, 44, 0.25);
|
|
|
+ border: 1upx solid rgba(255, 255, 255, 0.3);
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
