|
@@ -1,64 +1,112 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="app-list-content">
|
|
<div class="app-list-content">
|
|
|
- <cl-crud class="liu-crud-wrap" @load="onLoad">
|
|
|
|
|
- <template #slot-tabs="{ scope }">
|
|
|
|
|
- <el-tabs
|
|
|
|
|
- class="liu-tabs"
|
|
|
|
|
- type="border-card"
|
|
|
|
|
- v-model="tabIndex"
|
|
|
|
|
- @tab-click="handleClick"
|
|
|
|
|
- >
|
|
|
|
|
- <el-tab-pane
|
|
|
|
|
- v-for="(item, index) in tabsData"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- :label="`${item.text}(${item.val})`"
|
|
|
|
|
- :name="item.key"
|
|
|
|
|
- ></el-tab-pane>
|
|
|
|
|
- </el-tabs>
|
|
|
|
|
- </template>
|
|
|
|
|
-
|
|
|
|
|
- <template #table-column-name="{scope}">
|
|
|
|
|
- <div class="flex-center">
|
|
|
|
|
|
|
+ <div class="app-content-top flex-center">
|
|
|
|
|
+ <div class="avatar-wrap flex-center">
|
|
|
|
|
+ <div class="avatar-wrap-left">
|
|
|
<cl-avatar
|
|
<cl-avatar
|
|
|
- shape="square"
|
|
|
|
|
- :size="40"
|
|
|
|
|
- :src="scope.row.userAvatar | default_avatar"
|
|
|
|
|
|
|
+ shape="circle"
|
|
|
|
|
+ :size="60"
|
|
|
|
|
+ :src="shopInfo.smallLogoUrl | default_avatar"
|
|
|
></cl-avatar>
|
|
></cl-avatar>
|
|
|
- <div class="app-margin-left-10">{{ scope.row.name }}</div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
- </template>
|
|
|
|
|
|
|
+ <div class="avatar-wrap-right">
|
|
|
|
|
+ <div class="app-size-32 avatar-name">{{ shopInfo.merchantName }}</div>
|
|
|
|
|
+ <div class="app-size-24">三级代理</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="assets-list-wrap flex-center">
|
|
|
|
|
+ <div class="list" v-for="(item, index) in userData" :key="index">
|
|
|
|
|
+ <div class="assets-list-value">{{ item.value }}</div>
|
|
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="app-content-bottom">
|
|
|
|
|
+ <cl-crud class="liu-crud-wrap" @load="onLoad">
|
|
|
|
|
+ <template #slot-tabs="{ scope }">
|
|
|
|
|
+ <el-tabs
|
|
|
|
|
+ class="liu-tabs"
|
|
|
|
|
+ type="border-card"
|
|
|
|
|
+ v-model="tabIndex"
|
|
|
|
|
+ @tab-click="handleClick"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-tab-pane
|
|
|
|
|
+ v-for="(item, index) in tabsData"
|
|
|
|
|
+ :key="index"
|
|
|
|
|
+ :label="`${item.text}(${item.val})`"
|
|
|
|
|
+ :name="item.key"
|
|
|
|
|
+ ></el-tab-pane>
|
|
|
|
|
+ </el-tabs>
|
|
|
|
|
+ </template>
|
|
|
|
|
|
|
|
- <template #table-column-address="{scope}">
|
|
|
|
|
- <span>{{
|
|
|
|
|
- scope.row.province +
|
|
|
|
|
- scope.row.city +
|
|
|
|
|
- scope.row.dist +
|
|
|
|
|
- scope.row.address +
|
|
|
|
|
- scope.row.floor
|
|
|
|
|
- }}</span>
|
|
|
|
|
- </template>
|
|
|
|
|
|
|
+ <template #table-column-name="{scope}">
|
|
|
|
|
+ <div class="flex-center">
|
|
|
|
|
+ <cl-avatar
|
|
|
|
|
+ shape="square"
|
|
|
|
|
+ :size="40"
|
|
|
|
|
+ :src="scope.row.userAvatar | default_avatar"
|
|
|
|
|
+ ></cl-avatar>
|
|
|
|
|
+ <div class="app-margin-left-10">{{ scope.row.name }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
|
|
|
- <template #table-column-addTime="{scope}">
|
|
|
|
|
- <span>{{ scope.row.addTime | formatTime }}</span>
|
|
|
|
|
- </template>
|
|
|
|
|
|
|
+ <template #table-column-address="{scope}">
|
|
|
|
|
+ <span>
|
|
|
|
|
+ {{
|
|
|
|
|
+ scope.row.province +
|
|
|
|
|
+ scope.row.city +
|
|
|
|
|
+ scope.row.dist +
|
|
|
|
|
+ scope.row.address +
|
|
|
|
|
+ scope.row.floor
|
|
|
|
|
+ }}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </template>
|
|
|
|
|
|
|
|
- <template #table-column-status="{scope}">
|
|
|
|
|
- <span v-if="scope.row.status == 4">
|
|
|
|
|
- <i class="iconfont icondagou"></i>
|
|
|
|
|
- </span>
|
|
|
|
|
- <span v-else>{{ scope.row.status | constantfilter('PROXY_STATUS') }}</span>
|
|
|
|
|
- </template>
|
|
|
|
|
- </cl-crud>
|
|
|
|
|
|
|
+ <template #table-column-addTime="{scope}">
|
|
|
|
|
+ <span>{{ scope.row.addTime | formatTime }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
|
|
+ <template #table-column-status="{scope}">
|
|
|
|
|
+ <span v-if="scope.row.status == 4">
|
|
|
|
|
+ <i class="iconfont icondagou"></i>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span v-else>{{ scope.row.status | constantfilter('PROXY_STATUS') }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </cl-crud>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import { mapMutations, mapGetters } from 'vuex';
|
|
|
export default {
|
|
export default {
|
|
|
name: 'list-ad',
|
|
name: 'list-ad',
|
|
|
components: {},
|
|
components: {},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
app: null,
|
|
app: null,
|
|
|
|
|
+ // top =-=========
|
|
|
|
|
+ // 用户数据
|
|
|
|
|
+ userData: [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '账号余额(¥)',
|
|
|
|
|
+ value: 0,
|
|
|
|
|
+ btn: '提现'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '邀请花店',
|
|
|
|
|
+ value: 0
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '付费花店',
|
|
|
|
|
+ value: 0
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '累计收益(¥)',
|
|
|
|
|
+ value: 0
|
|
|
|
|
+ }
|
|
|
|
|
+ ],
|
|
|
|
|
+ // bottom =-=========
|
|
|
tabIndex: '-1',
|
|
tabIndex: '-1',
|
|
|
tabsData: [
|
|
tabsData: [
|
|
|
{
|
|
{
|
|
@@ -89,8 +137,25 @@ export default {
|
|
|
]
|
|
]
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ ...mapGetters(['shopInfo', 'userInfo'])
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ console.log(this.shopInfo);
|
|
|
|
|
+ this._getDet();
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
// api
|
|
// api
|
|
|
|
|
+ _getDet() {
|
|
|
|
|
+ this.$service.single.assetDet().then(res => {
|
|
|
|
|
+ if (this.$util.isEmpty(res)) return false;
|
|
|
|
|
+ this.data = res;
|
|
|
|
|
+ this.userData[0].value = res.balance;
|
|
|
|
|
+ this.userData[1].value = res.inviteNum;
|
|
|
|
|
+ this.userData[2].value = res.payNum;
|
|
|
|
|
+ this.userData[3].value = res.income;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
handleClick(tab, e) {
|
|
handleClick(tab, e) {
|
|
|
this.app.refresh({ type: this.tabIndex });
|
|
this.app.refresh({ type: this.tabIndex });
|
|
|
},
|
|
},
|
|
@@ -189,15 +254,40 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
-// module
|
|
|
|
|
-.ad-modal-content {
|
|
|
|
|
- .member-wrap {
|
|
|
|
|
- line-height: 1.4;
|
|
|
|
|
|
|
+.app-list-content {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ .app-content-top {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 80px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ padding: 10px;
|
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
|
- .member-det {
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- margin-left: 10px;
|
|
|
|
|
|
|
+ color: $fontColor2;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ .avatar-wrap {
|
|
|
|
|
+ margin-right: 40px;
|
|
|
|
|
+ .avatar-wrap-left {
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .avatar-wrap-right {
|
|
|
|
|
+ .avatar-name {
|
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .assets-list-wrap {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ .list {
|
|
|
|
|
+ margin-left: 40px;
|
|
|
|
|
+ .assets-list-value {
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ .app-content-bottom {
|
|
|
|
|
+ height: calc(100% - 110px);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|