545 lines
13 KiB
Vue
545 lines
13 KiB
Vue
<template>
|
||
<view class="mine-container" :style="{ height: `${windowHeight}px` }">
|
||
|
||
<!-- 添加tabs管理槟榔资产 -->
|
||
<view class="header">
|
||
<v-tabs
|
||
v-model="current"
|
||
:tabs="icons"
|
||
field="name"
|
||
height="90rpx"
|
||
fontSize="30rpx"
|
||
:fixed="true"
|
||
:scroll="false"
|
||
:zIndex="1000"
|
||
:topOffset="windowTop"
|
||
@change="changeTab">
|
||
</v-tabs>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<!-- 选中 Tab 对应页面渲染区域（小程序端不支持动态组件，改为静态分支） -->
|
||
<account v-if="currentKey === 'account'" :embedded="true"></account>
|
||
<record-index v-else-if="currentKey === 'record'" :embedded="true"></record-index>
|
||
<earn-index v-else-if="currentKey === 'earn'" :embedded="true"></earn-index>
|
||
<coupon-list v-else-if="currentKey === 'coupon'" :embedded="true"></coupon-list>
|
||
</view>
|
||
<view class="cardContent" style="display: none;">
|
||
<view class="card">
|
||
<view class="info">
|
||
<!-- 多少棵 -->
|
||
<view class="line">
|
||
<view class="logo">
|
||
<image src="@/static/ic_bl.png" />
|
||
</view>
|
||
<view class="label">槟榔:</view>
|
||
<view class="value">{{ statistics["ljNum"] }}</view>
|
||
<view class="label">棵</view>
|
||
</view>
|
||
<u-gap height="5"></u-gap>
|
||
<!-- 级别 -->
|
||
<view class="line">
|
||
<view class="logo_no"> </view>
|
||
<view class="label">级别:</view>
|
||
<view class="value" v-if="pageload">
|
||
{{ abc_level.find(i => i.dictValue == chuzhonggao).dictLabel || '无级别' }}
|
||
</view>
|
||
<view v-else>正在获取中...</view>
|
||
</view>
|
||
<u-gap height="5"></u-gap>
|
||
<!-- 推广商 -->
|
||
<view class="line">
|
||
<view class="logo_no"> </view>
|
||
<view class="label">代理:</view>
|
||
<view class="value" v-if="pageload">
|
||
{{agency_level.find(i => i.dictValue == agencyLevel).dictLabel || '无级别'}}
|
||
</view>
|
||
<view v-else>正在获取中...</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- 顶部卡片END -->
|
||
<view class="container" style="display: none;">
|
||
<!-- 按钮组START -->
|
||
<view class="btn_group">
|
||
<u-gap height="10"></u-gap>
|
||
<view class="content">
|
||
<view class="item" v-for="(v, i) in icons" :key="i" @click="handleBuilding(v.link)">
|
||
<view class="icon">
|
||
<image :src="v.icon" mode="heightFix" />
|
||
</view>
|
||
<view class="name">{{ v.name }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 按钮组END -->
|
||
</view>
|
||
|
||
<!-- 代理等级 -->
|
||
<u-popup :show="dldjShow" mode="center" round="10">
|
||
<view class="dldj-box">
|
||
<view class="dldj-title">{{ dlInfo.status == 0?'代理等级申请中':dlInfo.status == 1? '代理等级申请被驳回':'申请代理等级' }}
|
||
</view>
|
||
<view class="dldj-input" @click="dlPickerShow = true">
|
||
<text>
|
||
{{dlLevel != null ? agency_level.find(i => i.dictValue == dlLevel).dictLabel || '请选择':'请选择' }}
|
||
</text>
|
||
<u-icon name="arrow-right" size="12"></u-icon>
|
||
</view>
|
||
<view class="dldj-btns">
|
||
<u-button size="mini" :text="dlInfo.status == 0? '修改申请':'申请' " type="success"
|
||
@click="applyBlAgency"></u-button>
|
||
<u-button size="mini" text="关闭" type="info" @click="closeDldj"></u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-picker v-if="agency_level.length" :show="dlPickerShow" :columns="[agency_level.slice(1)]" keyName="dictLabel"
|
||
@confirm="dlConfirm" @cancel="dlPickerShow = false"></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getUserBalance,
|
||
getMyRecordsStatistics,
|
||
getIdentity,
|
||
getAbclevel,
|
||
getAgencylevel,
|
||
applyBlAgency,
|
||
getMyAgencyRecord
|
||
} from "@/api/system/user.js";
|
||
import {
|
||
mapMutations
|
||
} from "vuex";
|
||
import vTabs from "@/components/v-tabs/v-tabs.vue";
|
||
// 引入需要内嵌展示的页面组件
|
||
import Account from "@/pages/licai/mine/account/account.vue";
|
||
import RecordIndex from "@/pages/licai/mine/record/index.vue";
|
||
import EarnIndex from "@/pages/licai/mine/earn/index.vue";
|
||
import CouponList from "@/pages/licai/mine/account/couponList.vue";
|
||
export default {
|
||
components: { vTabs, Account, RecordIndex, EarnIndex, CouponList },
|
||
data() {
|
||
return {
|
||
icons: [{
|
||
icon: require("@/static/my1.png"),
|
||
name: "我的资产",
|
||
link: "/pages/licai/mine/account/account",
|
||
},
|
||
// {
|
||
// icon: require("@/static/my2.png"),
|
||
// name: "打款",
|
||
// link: "/pages/licai/mine/recharge/recharge",
|
||
// },
|
||
{
|
||
icon: require("@/static/my3.png"),
|
||
name: "购买记录",
|
||
link: "/pages/licai/mine/record/index",
|
||
},
|
||
{
|
||
icon: require("@/static/my4.png"),
|
||
name: "收益记录",
|
||
link: "/pages/licai/mine/earn/index",
|
||
},
|
||
// {
|
||
// icon: require("@/static/my5.png"),
|
||
// name: "分红收益",
|
||
// link: "/pages/licai/mine/account/withDraw",
|
||
// },
|
||
{
|
||
icon: require("@/static/my6.png"),
|
||
name: "资产明细",
|
||
link: "/pages/licai/mine/account/couponList",
|
||
},
|
||
// {
|
||
// icon: require("@/static/my5.png"),
|
||
// name: "代理申请",
|
||
// link: "dldj",
|
||
// },
|
||
// {
|
||
// icon: require("@/static/my7.png"),
|
||
// name: "绿色积分明细",
|
||
// link: "/pages/licai/mine/recharge/lsjf",
|
||
// },
|
||
// {
|
||
// icon: require("@/static/my8.png"),
|
||
// name: "贡献值明细",
|
||
// link: "/pages/licai/mine/recharge/xf",
|
||
// },
|
||
],
|
||
balance: 0,
|
||
pageload:false,
|
||
chuzhonggao: 0,
|
||
tuiguang: 0,
|
||
agencyLevel: 0,
|
||
statistics: {
|
||
ljNum: 0,
|
||
},
|
||
name: this.$store.state.user.name,
|
||
// version: getApp().globalData.config.appInfo.version,
|
||
userInfo: JSON.parse(uni.getStorageSync("App-UserInfo")),
|
||
abc_level: [],
|
||
agency_level: [],
|
||
dldjShow: false,
|
||
dlInfo: {},
|
||
dlLevel: null,
|
||
dlPickerShow: false,
|
||
|
||
current: 0,
|
||
// key 映射，兼容小程序端
|
||
keysMap: {
|
||
"/pages/licai/mine/account/account": "account",
|
||
"/pages/licai/mine/record/index": "record",
|
||
"/pages/licai/mine/earn/index": "earn",
|
||
"/pages/licai/mine/account/couponList": "coupon"
|
||
},
|
||
currentKey: "account"
|
||
};
|
||
},
|
||
computed: {
|
||
avatar() {
|
||
return this.$store.state.user.avatar;
|
||
},
|
||
windowHeight() {
|
||
return uni.getSystemInfoSync().windowHeight;
|
||
},
|
||
// 顶部原生导航（或状态栏）高度，用于 fixed 元素偏移
|
||
windowTop() {
|
||
return 'var(--window-top)'
|
||
}
|
||
},
|
||
created() {
|
||
// 初始化默认渲染第一个 tab 对应的页面（映射为 key）
|
||
const first = this.icons && this.icons[0] ? this.icons[0].link : null;
|
||
this.currentKey = first ? (this.keysMap[first] || "account") : "account";
|
||
},
|
||
async onShow() {
|
||
await this.getAbclevel();
|
||
await this.getAgencylevel();
|
||
await this.getUserBalance();
|
||
await this.getIdentity();
|
||
await this.getMyRecordsStatistics();
|
||
await this.checkToken()
|
||
this.pageload = true
|
||
},
|
||
methods: {
|
||
...mapMutations(["logout"]),
|
||
// 顶部 v-tabs 切换时，切换内嵌组件
|
||
changeTab(i) {
|
||
this.current = i;
|
||
const link = this.icons[i] && this.icons[i].link ? this.icons[i].link : null;
|
||
this.currentKey = link ? (this.keysMap[link] || this.currentKey) : this.currentKey;
|
||
},
|
||
//就是点击下边四个tab的时候调用一下这个接口，返回false的话就调用一下退出登录，给他退掉
|
||
checkToken() {
|
||
this.$http("GET", "/user/userCache").then((res) => {
|
||
if (!res.data) {
|
||
this.logout();
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
async getAbclevel() {
|
||
let res = await getAbclevel();
|
||
if (res.code == 200) {
|
||
this.abc_level = res.data
|
||
}
|
||
},
|
||
async getAgencylevel() {
|
||
let res = await getAgencylevel();
|
||
if (res.code == 200) {
|
||
this.agency_level = res.data
|
||
}
|
||
},
|
||
async getIdentity() {
|
||
let res = await getIdentity();
|
||
if (res.code == 200) {
|
||
this.tuiguang = res.data.tuiguang;
|
||
this.chuzhonggao = res.data.abcLevel;
|
||
this.agencyLevel = res.data.blAgencyLevel;
|
||
}
|
||
},
|
||
|
||
async getUserBalance() {
|
||
let res = await getUserBalance();
|
||
if (res.code == 200) this.balance = res.data.money;
|
||
console.log("res", res);
|
||
},
|
||
async getMyRecordsStatistics() {
|
||
let res = await getMyRecordsStatistics({
|
||
type: 2
|
||
});
|
||
console.log(res, "槟榔统计")
|
||
if (res.code == 200) {
|
||
for (let key in res.data) {
|
||
if (key == "槟榔") this.statistics.ljNum = res.data[key];
|
||
}
|
||
}
|
||
console.log("res", this.statistics);
|
||
},
|
||
|
||
handleToEditInfo() {
|
||
console.log("1");
|
||
// this.$tab.navigateTo('/pages/licai/mine/info /edit')
|
||
},
|
||
handleToSetting() {
|
||
this.$tab.navigateTo("/pages/licai/mine/setting/index");
|
||
},
|
||
handleToLogin() {
|
||
console.log("1");
|
||
// this.$tab.reLaunch('/pages/licai/login')
|
||
},
|
||
|
||
handleToAvatar() {
|
||
this.$tab.navigateTo("/pages/licai/mine/avatar/index");
|
||
},
|
||
handleLogout() {
|
||
this.$modal.confirm("确定注销并退出系统吗？").then(() => {
|
||
this.$store.dispatch("LogOut").then(() => {
|
||
this.$tab.reLaunch("/pages/licai/index");
|
||
});
|
||
});
|
||
},
|
||
handleHelp() {
|
||
this.$tab.navigateTo("/pages/licai/mine/help/index");
|
||
},
|
||
handleAbout() {
|
||
this.$tab.navigateTo("/pages/licai/mine/about/index");
|
||
},
|
||
handleJiaoLiuQun() {
|
||
this.$modal.showToast("QQ群：133713780");
|
||
},
|
||
handleBuilding(url) {
|
||
if (url == 'dldj') {
|
||
this.openDldj()
|
||
return
|
||
}
|
||
|
||
if (!url) return this.$msg("暂未开放");
|
||
this.$tab.navigateTo(url);
|
||
},
|
||
openDldj() {
|
||
getMyAgencyRecord().then(res => {
|
||
if (res.code == 200) {
|
||
|
||
if(res.data.status == 1){
|
||
this.$msg("你已申请过代理等级");
|
||
return
|
||
}
|
||
|
||
this.dlInfo = res.data
|
||
this.dldjShow = true
|
||
this.dlLevel = res.data.newLevel
|
||
}
|
||
})
|
||
},
|
||
closeDldj() {
|
||
this.dldjShow = false
|
||
},
|
||
dlConfirm(e) {
|
||
this.dlLevel = e.value[0].dictValue
|
||
this.dlPickerShow = false
|
||
},
|
||
applyBlAgency() {
|
||
if (this.dlLevel == null) {
|
||
return this.$msg("请选择会员等级")
|
||
}
|
||
applyBlAgency({
|
||
id: this.dlInfo.id,
|
||
applyLevel: this.dlLevel
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.$modal.showToast("操作成功，请等待审核");
|
||
this.dldjShow = false
|
||
}
|
||
}).catch(err => {
|
||
return this.$msg(err.message)
|
||
})
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #f4f4f4;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
@import "../common/style/base.scss";
|
||
|
||
/deep/.u-navbar__content__title {
|
||
color: #fff;
|
||
}
|
||
|
||
.team_count {
|
||
font-size: 36rpx;
|
||
margin-left: 178rpx;
|
||
}
|
||
|
||
.mine-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.cardContent {
|
||
min-height: 200px;
|
||
background-image: linear-gradient(to bottom,
|
||
rgba(75, 178, 46, 1) 0%,
|
||
rgba(75, 178, 46, 1) 70%,
|
||
rgba(75, 178, 46, 0) 100%);
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.card {
|
||
width: 100%;
|
||
height: 358rpx;
|
||
background-image: url("~@/static/cardContent.png");
|
||
background-size: 100% 100%;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
padding-top: 40rpx;
|
||
padding-left: 40rpx;
|
||
|
||
.line {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.logo_no {
|
||
width: 45rpx;
|
||
}
|
||
|
||
.logo {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 26rpx;
|
||
height: 35rpx;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
color: #ccc;
|
||
margin: 0 12rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.value {
|
||
color: #efe3bc;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.level {
|
||
width: 42rpx;
|
||
height: 34rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 已移除 three_data 模块，删除对应样式 */
|
||
|
||
|
||
.container {
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 已移除 two_link 模块，删除对应样式 */
|
||
|
||
.btn_group {
|
||
background: #fff;
|
||
border-radius: 15rpx;
|
||
padding: 20rpx 30rpx 0 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.item {
|
||
width: 25%;
|
||
margin-bottom: 50rpx;
|
||
// border: 1px solid red;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
height: 60rpx;
|
||
|
||
// border: 1px solid red;
|
||
image {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
color: #111;
|
||
margin-top: 12rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dldj-box {
|
||
padding: 30rpx 20rpx 40rpx;
|
||
width: 600rpx;
|
||
|
||
.dldj-title {
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.dldj-input {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
border: solid 1rpx #eee;
|
||
padding: 10rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.dldj-btns {
|
||
.u-button {
|
||
margin-top: 20rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bl-subsection {
|
||
padding: 9rpx 18rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
/* 内嵌页面时，统一隐藏子页面内部的 u-navbar（仅作用于本页的 .content 容器内） */
|
||
.content {
|
||
/deep/ .u-navbar {
|
||
display: none !important;
|
||
}
|
||
/deep/ .u-navbar__placeholder {
|
||
display: none !important;
|
||
}
|
||
}
|
||
</style> |