first commit
This commit is contained in:
PC-202306242200\Administrator
522
pages/mine/mine.vue
Normal file
522
pages/mine/mine.vue
Normal file
@@ -0,0 +1,522 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user