523 lines
12 KiB
Vue
523 lines
12 KiB
Vue
<template>
|
||
<view class="container">
|
||
<image src="/static/mineBanner.png" style="width: 750rpx; height: 762rpx; position: fixed; top: 0; left: 0; z-index: -1"></image>
|
||
|
||
<wd-navbar :bordered="false" custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>
|
||
|
||
<view class="p30">
|
||
<!-- 用户信息头部 -->
|
||
<view class="user-header">
|
||
<image class="avatar" :src="userInfo.avatar"></image>
|
||
<view class="user-info">
|
||
<view class="username">{{ userInfo.nickname || '微信用户' }}</view>
|
||
<view class="phone">{{ userInfo.mobile }}</view>
|
||
</view>
|
||
<view class="invite-code" v-if="userInfo.inviteCodeImg" @click="$refs.popup.open()">
|
||
<image style="width: 38rpx; height: 38rpx" src="/static/icons/code.png"></image>
|
||
<text>邀请码</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 优惠提示栏 -->
|
||
<view class="promo-bar">
|
||
<text>购买权益包至高享2.5折优惠</text>
|
||
<view class="go-shop" @click="navTo('/pages/equity/equity', true)">
|
||
<text>去下单</text>
|
||
<image src="/static/icons/youh.png" style="width: 26rpx; height: 26rpx"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的钱包 -->
|
||
<view class="wallet-section" @click="navTo('/pages/wallet/wallet', true)">
|
||
<view class="section-title">
|
||
<text>我的钱包</text>
|
||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||
</view>
|
||
|
||
<view class="wallet-cards">
|
||
<view class="wallet-item">
|
||
<text class="amount red">{{ userInfo.money || 0 }}</text>
|
||
<text class="label">余额</text>
|
||
<text class="desc">包含奖励</text>
|
||
</view>
|
||
<view class="wallet-item">
|
||
<text class="amount">{{ userInfo.performanceReward || 0 }}</text>
|
||
<text class="label">业绩奖励</text>
|
||
<text class="desc">售出分成</text>
|
||
</view>
|
||
<view class="wallet-item">
|
||
<text class="amount">{{ userInfo.directReferralReward || 0 }}</text>
|
||
<text class="label">直推奖励</text>
|
||
</view>
|
||
<view class="wallet-item">
|
||
<text class="amount">{{ userInfo.indirectReferralReward || 0 }}</text>
|
||
<text class="label">间推奖励</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的订单 -->
|
||
<!-- <view class="order-section">
|
||
<view class="section-title">
|
||
<text>我的订单</text>
|
||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||
</view>
|
||
|
||
<view class="order-types">
|
||
<view class="order-type">
|
||
<image src="/static/icons/wait-pay.png"></image>
|
||
<text>待付款</text>
|
||
</view>
|
||
<view class="order-type">
|
||
<image src="/static/icons/pre-order.png"></image>
|
||
<text>已预定</text>
|
||
</view>
|
||
<view class="order-type">
|
||
<image src="/static/icons/finished.png"></image>
|
||
<text>已完成</text>
|
||
</view>
|
||
<view class="order-type">
|
||
<image src="/static/icons/cancelled.png"></image>
|
||
<text>已取消</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 功能列表 -->
|
||
<view class="function-list">
|
||
<view class="function-item" @click="navTo('/pages/mine/sett', true)">
|
||
<image src="/static/icons/info.png"></image>
|
||
<text>个人信息</text>
|
||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||
</view>
|
||
<view class="function-item" @click="navTo('/pages/wallet/list', true)">
|
||
<image src="/static/icons/money.png"></image>
|
||
<text>我的账单</text>
|
||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||
</view>
|
||
|
||
<view class="function-item" @click="navTo('/pages/team/team', true)">
|
||
<image src="/static/icons/tj.png"></image>
|
||
<text>我的团队</text>
|
||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||
</view>
|
||
<view class="function-item" @click="navTo('/pages/address/list', true)">
|
||
<image src="/static/icons/address.png"></image>
|
||
<text>地址管理</text>
|
||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||
</view>
|
||
<!-- <view class="function-item">
|
||
<image src="/static/icons/tjr.png"></image>
|
||
<text>推荐人</text>
|
||
<text class="info">{{ userInfo.puser ? `${userInfo.puser.nickname} ${userInfo.puser.mobile}` : '无' }}</text>
|
||
</view> -->
|
||
<button class="function-item" open-type="contact">
|
||
<image src="/static/icons/kf.png"></image>
|
||
<text>联系客服</text>
|
||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="popup" type="center" border-radius="16rpx">
|
||
<view class="shareBlock">
|
||
<view style="width: 100%; text-align: right"><image @click="$refs.popup.close()" src="/static/icons/cha.png" class="shareBlock_close"></image></view>
|
||
<image class="shareBlock_code" :src="userInfo.inviteCodeImg"></image>
|
||
<view class="shareBlock_info">打开微信扫描二维码，注册时输入邀请码</view>
|
||
<view class="shareBlock_codeInfo">
|
||
<view class="shareBlock_codeInfo_left">
|
||
邀请码：
|
||
<text style="text-decoration: underline">{{ userInfo.inviteCode }}</text>
|
||
</view>
|
||
<view class="shareBlock_codeInfo_right" @click="copy(userInfo.inviteCode)">点击复制</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import { lookImg,copy } from '@/utils/fun.js';
|
||
|
||
import { Store } from '@/store';
|
||
|
||
import { useNav } from '@/hooks/useNav';
|
||
const { navTo } = useNav();
|
||
const store = Store();
|
||
|
||
const userInfo = computed(
|
||
() =>
|
||
store.userInfo || {
|
||
inviteCode: '',
|
||
nickname: '',
|
||
mobile: '',
|
||
avatar: '',
|
||
paywallet: {
|
||
balance: 0
|
||
}
|
||
}
|
||
);
|
||
|
||
onShow(async () => {
|
||
await store.usersGetInfo();
|
||
});
|
||
// export default {
|
||
// data() {
|
||
// return {
|
||
// userInfo: {
|
||
// nickname: '九天应援雷声普化天尊',
|
||
// phone: '1863****301'
|
||
// },
|
||
// wallet: {
|
||
// balance: '23万',
|
||
// performanceReward: '98456',
|
||
// directReward: '68230',
|
||
// indirectReward: '63314'
|
||
// },
|
||
// orderTypes: [
|
||
// { type: 'waitPay', name: '待付款' },
|
||
// { type: 'preOrder', name: '已预定' },
|
||
// { type: 'finished', name: '已完成' },
|
||
// { type: 'cancelled', name: '已取消' }
|
||
// ],
|
||
// functions: [
|
||
// { name: '我的账单', icon: 'bill' },
|
||
// { name: '我的推荐', icon: 'recommend' },
|
||
// { name: '联系客服', icon: 'service' },
|
||
// { name: '推荐人', info: '北极**大帝 1863****301', icon: 'referrer' },
|
||
// { name: '个人信息', icon: 'profile' }
|
||
// ]
|
||
// };
|
||
// },
|
||
// onLoad() {
|
||
// // 页面加载时执行的逻辑
|
||
// },
|
||
// methods: {
|
||
// // 点击钱包项目
|
||
// onWalletItemTap(e) {
|
||
// const { index } = e.currentTarget.dataset;
|
||
// const items = ['余额', '业绩奖励', '直推奖励', '间推奖励'];
|
||
// uni.showToast({
|
||
// title: `查看${items[index]}详情`,
|
||
// icon: 'none'
|
||
// });
|
||
// },
|
||
|
||
// // 点击订单类型
|
||
// onOrderTypeTap(e) {
|
||
// const { index } = e.currentTarget.dataset;
|
||
// const types = ['待付款', '已预定', '已完成', '已取消'];
|
||
// uni.showToast({
|
||
// title: `查看${types[index]}订单`,
|
||
// icon: 'none'
|
||
// });
|
||
// },
|
||
|
||
// // 点击功能项
|
||
// onFunctionTap(e) {
|
||
// const { index } = e.currentTarget.dataset;
|
||
// const names = ['我的账单', '我的推荐', '联系客服', '推荐人', '个人信息'];
|
||
// uni.showToast({
|
||
// title: `进入${names[index]}页面`,
|
||
// icon: 'none'
|
||
// });
|
||
// },
|
||
|
||
// // 进入个人中心
|
||
// goToProfile() {
|
||
// uni.navigateTo({
|
||
// url: '/pages/profile/index'
|
||
// });
|
||
// },
|
||
|
||
// // 查看邀请码
|
||
// viewInviteCode() {
|
||
// uni.showModal({
|
||
// title: '邀请码',
|
||
// content: '您的邀请码：123456',
|
||
// showCancel: false
|
||
// });
|
||
// },
|
||
|
||
// // 去下单
|
||
// goToOrder() {
|
||
// uni.navigateTo({
|
||
// url: '/pages/order/index'
|
||
// });
|
||
// }
|
||
// }
|
||
// };
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
|
||
}
|
||
|
||
/* 用户信息头部 */
|
||
.user-header {
|
||
background-size: cover;
|
||
padding: 40rpx 30rpx 60rpx;
|
||
display: flex;
|
||
/* align-items: center; */
|
||
position: relative;
|
||
}
|
||
|
||
.user-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.avatar {
|
||
width: 152rpx;
|
||
height: 152rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
background-color: #eee;
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
z-index: 1;
|
||
height: 152rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.username {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.phone {
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.invite-code {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
z-index: 1;
|
||
}
|
||
|
||
.invite-code text {
|
||
font-size: 24rpx;
|
||
color: #232323;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.qrcode-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.arrow {
|
||
margin-left: 6rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* 优惠提示栏 */
|
||
.promo-bar {
|
||
width: 638rpx;
|
||
height: 70rpx;
|
||
background: #799675;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
padding: 0 40rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
margin: 0 auto;
|
||
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #ffff94;
|
||
}
|
||
|
||
.go-shop {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 钱包区域 */
|
||
.wallet-section {
|
||
background-color: white;
|
||
margin: 0rpx 0 20rpx;
|
||
padding: 30rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10rpx 0 20rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
border-bottom: 1px solid #eee;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.wallet-cards {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.wallet-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.red {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 20rpx;
|
||
color: #999;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
/* 订单区域 */
|
||
.order-section {
|
||
background-color: white;
|
||
margin-bottom: 20rpx;
|
||
padding: 30rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
|
||
.order-types {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.order-type {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 22%;
|
||
}
|
||
|
||
.order-type image {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.order-type text {
|
||
font-size: 26rpx;
|
||
color: #232323;
|
||
}
|
||
|
||
/* 功能列表 */
|
||
.function-list {
|
||
background-color: white;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
|
||
.function-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f7f7f7;
|
||
}
|
||
|
||
.function-item image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.function-item text {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.info {
|
||
color: #232323 !important;
|
||
font-weight: 500 !important;
|
||
text-align: right;
|
||
}
|
||
|
||
button {
|
||
all: unset;
|
||
}
|
||
|
||
button::after {
|
||
all: unset;
|
||
}
|
||
|
||
.shareBlock {
|
||
margin: auto;
|
||
width: 650rpx;
|
||
height: 688rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
&_close {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
}
|
||
&_code {
|
||
width: 392rpx;
|
||
height: 392rpx;
|
||
}
|
||
&_info {
|
||
font-size: 24rpx;
|
||
color: #cccccc;
|
||
margin: 24rpx 0;
|
||
}
|
||
&_codeInfo {
|
||
display: flex;
|
||
align-items: center;
|
||
&_left {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #232323;
|
||
}
|
||
&_right {
|
||
margin-left: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
</style>
|