vip图标

store/src/admin/home/member.vue

@@ -1,236 +1,259 @@
 <template>
-	<div class="app-main app-content">
-		<app-tabs :tabs="tabs" :isFixed="true" :isAdd="true" :currentTab="tabIndex" :height="100" @add="pageTo('/admin/member/add')" @change="change" itemWidth="33.33%" />
-		<!-- list -->
-		<block v-if="!$util.isEmpty(list.data)">
-			<block v-for="(item,index) in list.data" :key="index">
-				<tui-list-cell :arrow="true" @click="pageTo({
+  <div class="app-main app-content">
+    <app-tabs
+      :tabs="tabs"
+      :isFixed="true"
+      :isAdd="true"
+      :currentTab="tabIndex"
+      :height="100"
+      @add="pageTo('/admin/member/add')"
+      @change="change"
+      itemWidth="33.33%"
+    />
+    <!-- list -->
+    <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.avatarUrl" class="tui-msg-pic" mode="widthFix" />
-						<div class="tui-msg-item">
-							<div class="tui-msg-name">
-                                <div>{{item.userName}}</div>
-							    <appVipModule v-if="item.isMember" class="level-img" :text="`VIP ${item.userAsset.memberLevel || ''}`" />
-								<div v-else class="normal-img">
-									<div class="vip-text">普通用户</div>
-								</div>
-                            </div>
-							<div class="tui-msg-content">
-                                <div class="icon-wrap">
-                                    <i class="iconfont iconzhifubao"></i>
-                                </div>
-                                <span>{{item.visitTimeFormat}}</span>
-                            </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>
-		<block v-else>
-			<app-wrapper-empty :is-empty="$util.isEmpty(list.data)" />
-		</block>
-	</div>
+				})"
+        >
+          <div class="tui-msg-box">
+            <img :src="item.avatarUrl" class="tui-msg-pic" mode="widthFix" />
+            <div class="tui-msg-item">
+              <div class="tui-msg-name">
+                <div class="tui-user-name">{{item.userName}}</div>
+                <appVipModule
+                  v-if="item.member >= 0"
+                  class="level-img"
+                  :vipImg="`${constant.imgUrl}/retail/interest/vip.png`"
+                  :text="`VIP ${item.userAsset.member}`"
+                />
+                <div v-else class="normal-img">
+                  <div class="vip-text">普通用户</div>
+                </div>
+              </div>
+              <div class="tui-msg-content">
+                <div class="icon-wrap">
+                  <i class="iconfont iconzhifubao" style="font-size:30rpx;"></i>
+                </div>
+                <span>{{item.visitTimeFormat}}</span>
+              </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>
+    <block v-else>
+      <app-wrapper-empty :is-empty="$util.isEmpty(list.data)" />
+    </block>
+  </div>
 </template>
 
 <script>
-import AppTabs from '@/components/plugin/tabs'
-import TuiListCell from '@/components/plugin/list-cell'
-import BadgeModule from '@/components/plugin/badge'
-import AppWrapperEmpty from '@/components/app-wrapper-empty'
-import appVipModule from '@/components/module/app-vip'
+import AppTabs from "@/components/plugin/tabs";
+import TuiListCell from "@/components/plugin/list-cell";
+import BadgeModule from "@/components/plugin/badge";
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
+import appVipModule from "@/components/module/app-vip";
 // api
-import { list } from '@/mixins'
-import { getClass, getList } from '@/api/member'
+import { list } from "@/mixins";
+import { getClass, getList } from "@/api/member";
 export default {
-	name: 'admin-memebr',
-	components: {
-		AppTabs,
-		TuiListCell,
-		BadgeModule,
-		AppWrapperEmpty,
-		appVipModule
-	},
-	mixins: [list],
-	data() {
-		return {
-			tabIndex: 0,
-			tabs: [
-				{
-					name: '全部',
-					value: 0
-				},
-				{
-					name: '粉丝',
-					value: 0
-				},
-				{
-					name: '会员',
-					value: 0
-				}
-			]
-		}
-	},
-	onPullDownRefresh() {
-		this.resetList()
-		this._list().then(res => {
-			uni.stopPullDownRefresh()
-		})
-	},
-	onReachBottom() {
-		if (!this.list.finished) {
-			this._list().then(res => {
-				uni.stopPullDownRefresh()
-			})
-		} else {
-			uni.stopPullDownRefresh()
-		}
-	},
-	onLoad(option) {
-		// this.init()
-	},
-	methods: {
-		init() {
-			this._list()
-		},
-		// 列表
-		_list() {
-			let status = JSON.parse(JSON.stringify(this.tabIndex))
-			status = status == 0 ? -1 : status
-			return getList({
-				search: '',
-				page: this.list.page,
-				status: status,
-				...this.form
-			}).then(res => {
-				this.completes(res)
-				if (this.$util.isEmpty(res.data)) return false
-				this.tabs[0].value = res.data.asset.totalUser
-				this.tabs[1].value = res.data.asset.totalFans
-				this.tabs[2].value = res.data.asset.totalMember
-			})
-		},
-		change(e) {
-			if (this.tabIndex == e.index) {
-				return false
-			} else {
-				this.tabIndex = e.index
-				this.resetList()
-				this._list()
-			}
-		},
-		// 跳转
-		detail(item) {
-			this.$util.pageTo('/admin/member/detail')
-		}
-	}
-}
+  name: "admin-memebr",
+  components: {
+    AppTabs,
+    TuiListCell,
+    BadgeModule,
+    AppWrapperEmpty,
+    appVipModule
+  },
+  mixins: [list],
+  data() {
+    return {
+      tabIndex: 0,
+      tabs: [
+        {
+          name: "全部",
+          value: 0
+        },
+        {
+          name: "粉丝",
+          value: 0
+        },
+        {
+          name: "会员",
+          value: 0
+        }
+      ]
+    };
+  },
+  onPullDownRefresh() {
+    this.resetList();
+    this._list().then(res => {
+      uni.stopPullDownRefresh();
+    });
+  },
+  onReachBottom() {
+    if (!this.list.finished) {
+      this._list().then(res => {
+        uni.stopPullDownRefresh();
+      });
+    } else {
+      uni.stopPullDownRefresh();
+    }
+  },
+  onLoad(option) {
+    // this.init()
+  },
+  methods: {
+    init() {
+      this._list();
+    },
+    // 列表
+    _list() {
+      let status = JSON.parse(JSON.stringify(this.tabIndex));
+      status = status == 0 ? -1 : status;
+      return getList({
+        search: "",
+        page: this.list.page,
+        status: status,
+        ...this.form
+      }).then(res => {
+        this.completes(res);
+        if (this.$util.isEmpty(res.data)) return false;
+        this.tabs[0].value = res.data.asset.totalUser;
+        this.tabs[1].value = res.data.asset.totalFans;
+        this.tabs[2].value = res.data.asset.totalMember;
+      });
+    },
+    change(e) {
+      if (this.tabIndex == e.index) {
+        return false;
+      } else {
+        this.tabIndex = e.index;
+        this.resetList();
+        this._list();
+      }
+    },
+    // 跳转
+    detail(item) {
+      this.$util.pageTo("/admin/member/detail");
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.app-content {
-		padding-top: 120px;
-		padding-bottom: 20px;
-	}
-	.tabs-wrap {
-		position: fixed;
-		.tabs-left {
-			width: 80%;
-		}
-		.tabs-right {
-			width: 19%;
-			border-left: $borderColor;
-			@include disFlex(center, center);
-		}
-	}
-	// list
-	.tui-msg-box {
-		display: flex;
-		align-items: center;
+.app-content {
+  padding-top: 120px;
+  padding-bottom: 20px;
+}
+.tabs-wrap {
+  position: fixed;
+  .tabs-left {
+    width: 80%;
+  }
+  .tabs-right {
+    width: 19%;
+    border-left: $borderColor;
+    @include disFlex(center, center);
+  }
+}
+// list
+.tui-msg-box {
+  display: flex;
+  align-items: center;
 
-		.tui-msg-pic {
-			width: 80upx;
-			height: 80upx;
-			border-radius: 50%;
-            margin-right: 20upx;
-		}
+  .tui-msg-pic {
+    width: 80upx;
+    height: 80upx;
+    border-radius: 50%;
+    margin-right: 20upx;
+  }
 
-		.tui-msg-item {
-			max-width: 500upx;
-			min-height: 80upx;
-			overflow: hidden;
-			display: flex;
-			flex-direction: column;
-            justify-content: space-between;
-            & > div {
-                @include disFlex(center, flex-start);
-                & > div:first-child {
-                    margin-right: 8px;
-                }
-            }
-            .level-img {
-                width: 74px;
-                /deep/.vip-text {
-                    top: 0;
-                    left: 20px;
-                    font-weight: 400;
-                    transform: scale(0.5);
-                }
-            }
-			.normal-img {
-                width: 70px;
-				padding: 2px 6px;
-				color: #999;
-				background-color: #F0F2F6;
-				border-radius: 20px;
-				.vip-text {
-					font-size: 24px;
-                	transform: scale(0.6);
-					position: relative;
-					top: -2px;
-					left: -8px;
-				}
-			}
-            .iconfont {
-                color: #00AAED;
-            }
-		}
+  .tui-msg-item {
+    max-width: 500upx;
+    min-height: 80upx;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    & > div {
+      @include disFlex(center, flex-start);
+      & > div:first-child {
+        margin-right: 8px;
+      }
+    }
+    .level-img {
+      /deep/.vip-text {
+        left: 42px;
+      }
+    }
+    .normal-img {
+      width: 70px;
+      padding: 2px 6px;
+      color: #999;
+      background-color: #f0f2f6;
+      border-radius: 20px;
+      .vip-text {
+        font-size: 24px;
+        transform: scale(0.6);
+        position: relative;
+        top: -2px;
+        left: -8px;
+      }
+    }
+    .iconfont {
+      color: #00aaed;
+    }
+  }
 
-		.tui-msg-name {
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			font-size: 30upx;
-			line-height: 1;
-			color: #262b3a;
-		}
+  .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: 180rpx;
+    }
+  }
 
-		.tui-msg-content {
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			font-size: 24upx;
-			line-height: 1;
-			color: #9397a4;
-		}
-	}
+  .tui-msg-content {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 24upx;
+    line-height: 1;
+    color: #9397a4;
+  }
+}
 
-	.tui-msg-right {
-		max-width: 120upx;
-		height: 80upx;
-        margin-left: auto;
-        margin-right: 24px;
-		text-align: right;
-		display: flex;
-		// flex-direction: column;
-		justify-content: space-between;
-		align-items: center;
-	}
+.tui-msg-right {
+  max-width: 120upx;
+  height: 80upx;
+  margin-left: auto;
+  margin-right: 24px;
+  text-align: right;
+  display: flex;
+  // flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>

store/src/components/module/app-vip.vue

@@ -44,6 +44,7 @@ export default {
     left: 46px;
     color: #fff;
     transform: scale(0.9);
+    font-size:25rpx;
   }
 }
 </style>