|
|
@@ -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>
|
shish