|
|
@@ -1,310 +1,287 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
- <div class="rank-wrap">
|
|
|
- <div class="user-blo">
|
|
|
- <div class="user-wrap">
|
|
|
- <div class="user-wrap-left">
|
|
|
- <app-avatar-module :width="100" />
|
|
|
- <div class="user-det">
|
|
|
- <!-- <div class="user-name">{{ userInfo.merchantName }}</div> -->
|
|
|
- <div class="app-color-3">三级代理</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- #ifdef H5 -->
|
|
|
- <div
|
|
|
- class="user-wrap-right"
|
|
|
- @click="showShare = true">
|
|
|
- <img :src="`${constant.imgUrl}/retail/interest/invite-store.png`" alt mode="widthFix" />
|
|
|
- </div>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
- <button
|
|
|
- class="user-wrap-right"
|
|
|
- open-type='share'
|
|
|
- >
|
|
|
- <img :src="`${constant.imgUrl}/retail/interest/invite-store.png`" alt mode="widthFix" />
|
|
|
- </button>
|
|
|
- <!-- #endif -->
|
|
|
- </div>
|
|
|
- <!-- 数据 -->
|
|
|
- <div class="user-data">
|
|
|
- <div class="data-list" v-for="(item, index) in userData" :key="index">
|
|
|
- <div class="app-size-30 app-bold">{{ item.value }}</div>
|
|
|
- <div class="app-color-3">{{ item.name }}</div>
|
|
|
- <div class="app-color-1" v-if="item.btn" @click="withdrawFn">{{ item.btn }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="prompt-text">花店列表</div>
|
|
|
- <app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="20%" :padding="0" />
|
|
|
- </div>
|
|
|
- <!-- list -->
|
|
|
- <div class="rank-list">
|
|
|
- <block v-if="!$util.isEmpty(list.data)">
|
|
|
- <div class="list" v-for="(item, index) in list.data" :key="index">
|
|
|
- <app-avatar-module :src="item.userAvatar" :width="80" />
|
|
|
- <div class="list-det">
|
|
|
- <div class="list-det-right">
|
|
|
- <div class="list-name">{{ item.name }}</div>
|
|
|
- <div class="list-detail">
|
|
|
- <span>{{ item.userName }}</span>
|
|
|
- <span>{{ item.mobile }}</span>
|
|
|
- <span class="app-price">¥{{ item.fee }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <i v-if="item.status == 3" class="iconfont icondagou"></i>
|
|
|
- <span v-else class="app-price">{{ item.status | constantfilter('PROXY_STATUS') }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
- </block>
|
|
|
- </div>
|
|
|
- <app-share-mask :show="showShare" @click="showShare = false" />
|
|
|
- </div>
|
|
|
+ <div class="app-content">
|
|
|
+ <div class="rank-wrap">
|
|
|
+ <div class="user-blo">
|
|
|
+ <div class="user-wrap">
|
|
|
+ <div class="user-wrap-left">
|
|
|
+ <app-avatar-module :width="100" />
|
|
|
+ <div class="user-det">
|
|
|
+ <!-- <div class="user-name">{{ userInfo.merchantName }}</div> -->
|
|
|
+ <div class="app-color-3">三级代理</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <div class="user-wrap-right" @click="showShare = true">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/interest/invite-store.png`" alt mode="widthFix" />
|
|
|
+ </div>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <button class="user-wrap-right" open-type="share">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/interest/invite-store.png`" alt mode="widthFix" />
|
|
|
+ </button>
|
|
|
+ <!-- #endif -->
|
|
|
+ </div>
|
|
|
+ <!-- 数据 -->
|
|
|
+ <div class="user-data">
|
|
|
+ <div class="data-list" v-for="(item, index) in userData" :key="index">
|
|
|
+ <div class="app-size-30 app-bold">{{ item.value }}</div>
|
|
|
+ <div class="app-color-3">{{ item.name }}</div>
|
|
|
+ <div class="app-color-1" v-if="item.btn" @click="withdrawFn">{{ item.btn }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="prompt-text">花店列表</div>
|
|
|
+ <app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="20%" :padding="0" />
|
|
|
+ </div>
|
|
|
+ <!-- list -->
|
|
|
+ <div class="rank-list">
|
|
|
+ <block v-if="!$util.isEmpty(list.data)">
|
|
|
+ <div class="list" v-for="(item, index) in list.data" :key="index">
|
|
|
+ <app-avatar-module :src="item.userAvatar" :width="80" />
|
|
|
+ <div class="list-det">
|
|
|
+ <div class="list-det-right">
|
|
|
+ <div class="list-name">{{ item.name }}</div>
|
|
|
+ <div class="list-detail">
|
|
|
+ <span>{{ item.userName }}</span>
|
|
|
+ <span>{{ item.mobile }}</span>
|
|
|
+ <span class="app-price">¥{{ item.fee }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <i v-if="item.status == 3" class="iconfont icondagou"></i>
|
|
|
+ <span v-else class="app-price">{{ item.status | constantfilter('PROXY_STATUS') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
+ </block>
|
|
|
+ </div>
|
|
|
+ <app-share-mask :show="showShare" @click="showShare = false" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { mapGetters } from 'vuex'
|
|
|
- import AppTabs from '@/components/plugin/tabs'
|
|
|
- import AppAvatarModule from '@/components/module/app-avatar'
|
|
|
- import AppWrapperEmpty from '@/components/app-wrapper-empty'
|
|
|
- import AppShareMask from '@/components/module/app-share-mask'
|
|
|
- import { list, share } from '@/mixins'
|
|
|
- // api
|
|
|
- import { getUser } from '@/utils/auth'
|
|
|
- import { assetDet, applyList } from '@/api/proxy'
|
|
|
- export default {
|
|
|
- name: 'my-invite-list',
|
|
|
- components: {
|
|
|
- AppTabs,
|
|
|
- AppAvatarModule,
|
|
|
- AppWrapperEmpty,
|
|
|
- AppShareMask
|
|
|
- },
|
|
|
- mixins: [list, share],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- constant: this.$constant,
|
|
|
- showShare: false,
|
|
|
- data: {},
|
|
|
- tabIndex: 0,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: '全部'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '待审核'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '试用中'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已付费'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已到期'
|
|
|
- }
|
|
|
- ],
|
|
|
- // 用户数据
|
|
|
- userData: [
|
|
|
- {
|
|
|
- name: '账号余额(¥)',
|
|
|
- value: 0
|
|
|
- // btn: '提现'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '邀请花店',
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: '付费花店',
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: '累计收益(¥)',
|
|
|
- value: 0
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters({ userInfo: 'getUser' })
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- this.jweixinFn({
|
|
|
- title:'邀请开店',
|
|
|
- pagePath:'admin/interest/my-invite',
|
|
|
- imageUrl:''
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- // #ifdef H5
|
|
|
- // 微信二次分享
|
|
|
- let href = window.location.href
|
|
|
- if (href.indexOf('from=singlemessage') > 0) {
|
|
|
- location.href = `${this.$constant.formal}/#/admin/interest/my-invite${this.$util.parse(this.option)}`
|
|
|
- return false
|
|
|
- }
|
|
|
- // #endif
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import AppTabs from "@/components/plugin/tabs";
|
|
|
+import AppAvatarModule from "@/components/module/app-avatar";
|
|
|
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
+import AppShareMask from "@/components/module/app-share-mask";
|
|
|
+import { list, share } from "@/mixins";
|
|
|
+// api
|
|
|
+import { getUser } from "@/utils/auth";
|
|
|
+import { assetDet, applyList } from "@/api/proxy";
|
|
|
+export default {
|
|
|
+ name: "my-invite-list",
|
|
|
+ components: {
|
|
|
+ AppTabs,
|
|
|
+ AppAvatarModule,
|
|
|
+ AppWrapperEmpty,
|
|
|
+ AppShareMask
|
|
|
+ },
|
|
|
+ mixins: [list, share],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ showShare: false,
|
|
|
+ data: {},
|
|
|
+ tabIndex: 0,
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: "全部"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "待审核"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "试用中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已付费"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已到期"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 用户数据
|
|
|
+ userData: [
|
|
|
+ {
|
|
|
+ name: "账号余额(¥)",
|
|
|
+ value: 0
|
|
|
+ // btn: '提现'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "邀请花店",
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "付费花店",
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "累计收益(¥)",
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ userInfo: "getUser" })
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
|
|
|
- this._assetDet()
|
|
|
- this._applyList()
|
|
|
-
|
|
|
- getUser().then(res => {
|
|
|
- let redirectUrl = `${window.location.protocol}//www.${this.$constant.firstHost}.com/#/?introMerchantId=${this.userInfo.extend.merchantId}`
|
|
|
-
|
|
|
- let params = {
|
|
|
- title: '花卉宝花店管理系统', // 分享标题
|
|
|
- desc: '帮你轻松开店', // 分享内容
|
|
|
- imgUrl: this.userInfo.logoUrl,
|
|
|
- pagePath: `${window.location.protocol}//b.${this.$constant.firstHost}.com/#/common/redirect?redirectUrl=${encodeURIComponent(redirectUrl)}&type=invite`
|
|
|
- // pagePath: `${window.location.protocol}//www.${this.$constant.firstHost}.com/#/?introMerchantId=${this.userInfo.extend.merchantId}`
|
|
|
- }
|
|
|
- this.jweixinFn(params)
|
|
|
- })
|
|
|
- },
|
|
|
- _assetDet() {
|
|
|
- assetDet().then(res => {
|
|
|
- if (this.$util.isEmpty(res.data)) return false
|
|
|
- this.data = res.data
|
|
|
- this.userData[0].value = res.data.balance
|
|
|
- this.userData[1].value = res.data.inviteNum
|
|
|
- this.userData[2].value = res.data.payNum
|
|
|
- this.userData[3].value = res.data.income
|
|
|
- })
|
|
|
- },
|
|
|
- _applyList() {
|
|
|
- let status = this.getStatus(this.tabIndex)
|
|
|
- return applyList({ status: status }).then(res => {
|
|
|
- this.completes(res)
|
|
|
- })
|
|
|
- },
|
|
|
- // operate
|
|
|
- change(e) {
|
|
|
- if (this.tabIndex == e.index) {
|
|
|
- return false
|
|
|
- } else {
|
|
|
- this.tabIndex = e.index
|
|
|
- this.resetList()
|
|
|
- this._applyList()
|
|
|
- }
|
|
|
- },
|
|
|
- withdrawFn() {
|
|
|
- this.$msg('功能开发中...')
|
|
|
- },
|
|
|
- getStatus(e) {
|
|
|
- let val = ''
|
|
|
- switch (e) {
|
|
|
- case 0:
|
|
|
- val = -1
|
|
|
- break
|
|
|
- case 1:
|
|
|
- val = 0
|
|
|
- break
|
|
|
- case 2:
|
|
|
- val = 1
|
|
|
- break
|
|
|
- case 3:
|
|
|
- val = 3
|
|
|
- break
|
|
|
- case 4:
|
|
|
- val = 4
|
|
|
- break
|
|
|
- default:
|
|
|
- val = -1
|
|
|
- break
|
|
|
- }
|
|
|
- return val
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+
|
|
|
+ this._assetDet();
|
|
|
+ this._applyList();
|
|
|
+
|
|
|
+ getUser().then(res => {
|
|
|
+ let params = {
|
|
|
+ title: "更懂您的花卉宝",
|
|
|
+ desc: "",
|
|
|
+ imgUrl: this.constant.imgUrl+"/retail/official/banner-1.png",
|
|
|
+ pagePath: "admin/official/index"
|
|
|
+ };
|
|
|
+ this.jweixinFn(params);
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ _assetDet() {
|
|
|
+ assetDet().then(res => {
|
|
|
+ if (this.$util.isEmpty(res.data)) return false;
|
|
|
+ this.data = res.data;
|
|
|
+ this.userData[0].value = res.data.balance;
|
|
|
+ this.userData[1].value = res.data.inviteNum;
|
|
|
+ this.userData[2].value = res.data.payNum;
|
|
|
+ this.userData[3].value = res.data.income;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _applyList() {
|
|
|
+ let status = this.getStatus(this.tabIndex);
|
|
|
+ return applyList({ status: status }).then(res => {
|
|
|
+ this.completes(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // operate
|
|
|
+ change(e) {
|
|
|
+ if (this.tabIndex == e.index) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ this.tabIndex = e.index;
|
|
|
+ this.resetList();
|
|
|
+ this._applyList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ withdrawFn() {
|
|
|
+ this.$msg("功能开发中...");
|
|
|
+ },
|
|
|
+ getStatus(e) {
|
|
|
+ let val = "";
|
|
|
+ switch (e) {
|
|
|
+ case 0:
|
|
|
+ val = -1;
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ val = 0;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ val = 1;
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ val = 3;
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ val = 4;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ val = -1;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .app-content {
|
|
|
- // min-height: calc(100vh - 100px);
|
|
|
- // padding-top: 100px;
|
|
|
- }
|
|
|
- // 头部
|
|
|
- .rank-wrap {
|
|
|
- background-color: #fff;
|
|
|
- .user-blo {
|
|
|
- padding: 40px 30px 28px 30px;
|
|
|
- }
|
|
|
- .user-wrap {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- margin-bottom: 60px;
|
|
|
- .user-wrap-left {
|
|
|
- @include disFlex(center, flex-start);
|
|
|
- .user-det {
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- .user-name {
|
|
|
- font-size: 32px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .user-wrap-right {
|
|
|
- width: 230px;
|
|
|
- background-color: #fff;
|
|
|
- margin-right: 0;
|
|
|
- padding: 0;
|
|
|
- &::after {
|
|
|
- border: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .user-data {
|
|
|
- @include disFlex(flex-start, space-between);
|
|
|
- .data-list {
|
|
|
- text-align: center;
|
|
|
- & > div {
|
|
|
- margin-top: 10px;
|
|
|
- &:first-child {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .prompt-text {
|
|
|
- color: $fontColor3;
|
|
|
- padding: 26px 0 16px 30px;
|
|
|
- background-color: $backColor;
|
|
|
- }
|
|
|
- }
|
|
|
- // list
|
|
|
- .rank-list {
|
|
|
- background-color: #fff;
|
|
|
- .list {
|
|
|
- @include disFlex(center, flex-start);
|
|
|
- margin: 0 30px;
|
|
|
- padding: 24px 0;
|
|
|
- .list-det {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- width: calc(100% - 100px);
|
|
|
- margin-left: 20px;
|
|
|
- .list-det-right {
|
|
|
- color: $fontColor3;
|
|
|
- .list-name {
|
|
|
- color: #333;
|
|
|
- font-size: 30px;
|
|
|
- margin-bottom: 6px;
|
|
|
- }
|
|
|
- .list-detail {
|
|
|
- & > span {
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .icondagou {
|
|
|
- color: $mainColor;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+// 头部
|
|
|
+.rank-wrap {
|
|
|
+ background-color: #fff;
|
|
|
+ .user-blo {
|
|
|
+ padding: 40px 30px 28px 30px;
|
|
|
+ }
|
|
|
+ .user-wrap {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ margin-bottom: 60px;
|
|
|
+ .user-wrap-left {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ .user-det {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .user-name {
|
|
|
+ font-size: 32px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-wrap-right {
|
|
|
+ width: 230px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-right: 0;
|
|
|
+ padding: 0;
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-data {
|
|
|
+ @include disFlex(flex-start, space-between);
|
|
|
+ .data-list {
|
|
|
+ text-align: center;
|
|
|
+ & > div {
|
|
|
+ margin-top: 10px;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .prompt-text {
|
|
|
+ color: $fontColor3;
|
|
|
+ padding: 26px 0 16px 30px;
|
|
|
+ background-color: $backColor;
|
|
|
+ }
|
|
|
+}
|
|
|
+// list
|
|
|
+.rank-list {
|
|
|
+ background-color: #fff;
|
|
|
+ .list {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ margin: 0 30px;
|
|
|
+ padding: 24px 0;
|
|
|
+ .list-det {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ width: calc(100% - 100px);
|
|
|
+ margin-left: 20px;
|
|
|
+ .list-det-right {
|
|
|
+ color: $fontColor3;
|
|
|
+ .list-name {
|
|
|
+ color: #333;
|
|
|
+ font-size: 30px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ .list-detail {
|
|
|
+ & > span {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icondagou {
|
|
|
+ color: $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|