429 lines
11 KiB
Vue
429 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="personal-page">
|
|||
|
|
<!-- 头部用户信息区域 -->
|
|||
|
|
<view class="header-section">
|
|||
|
|
<view class="user-info">
|
|||
|
|
<view class="user-name">潘1陈1勇</view>
|
|||
|
|
<view class="invite-code">
|
|||
|
|
<text>邀请码：</text>
|
|||
|
|
<text class="code">xmrkqq</text>
|
|||
|
|
<text class="copy-btn">📋</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<image class="header-icon" src="/static/images/kong1.png" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 买卖功能区 -->
|
|||
|
|
<view class="trade-section">
|
|||
|
|
<!-- 买方功能 -->
|
|||
|
|
<view class="trade-block">
|
|||
|
|
<view class="trade-title">买方</view>
|
|||
|
|
<view class="trade-functions">
|
|||
|
|
<view class="trade-function" @click="goToBuyerWarehouse">
|
|||
|
|
<image class="function-icon" src="/static/images/huo.png" mode="aspectFit"></image>
|
|||
|
|
<text class="function-text">买方仓库</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="trade-function" @click="goToTrade()">
|
|||
|
|
<image class="function-icon" src="/static/images/kong1.png" mode="aspectFit"></image>
|
|||
|
|
<text class="function-text">交易中</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="trade-function" @click="goToCompleted()">
|
|||
|
|
<image class="function-icon" src="/static/images/kong2.png" mode="aspectFit"></image>
|
|||
|
|
<text class="function-text">已完成</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 卖方功能 -->
|
|||
|
|
<view class="trade-block">
|
|||
|
|
<view class="trade-title">卖方</view>
|
|||
|
|
<view class="trade-functions">
|
|||
|
|
<view class="trade-function" @click="goToSellerWarehouse">
|
|||
|
|
<image class="function-icon" src="/static/images/huo.png" mode="aspectFit"></image>
|
|||
|
|
<text class="function-text">卖方仓库</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="trade-function" @click="goToTrade" data-from="seller">
|
|||
|
|
<image class="function-icon" src="/static/images/kong1.png" mode="aspectFit"></image>
|
|||
|
|
<text class="function-text">交易中</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="trade-function" @click="goToCompleted" data-from="seller">
|
|||
|
|
<image class="function-icon" src="/static/images/kong2.png" mode="aspectFit"></image>
|
|||
|
|
<text class="function-text">已完成</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 金额信息区 -->
|
|||
|
|
<view class="amount-section">
|
|||
|
|
<view class="amount-row">
|
|||
|
|
<view class="amount-item" @click="goToBalance">
|
|||
|
|
<text>余额:0.000</text>
|
|||
|
|
<text class="arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="amount-item" @click="goToCoupon">
|
|||
|
|
<text>优惠券:0.000</text>
|
|||
|
|
<text class="arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="amount-row">
|
|||
|
|
<view class="amount-item" @click="goToPrize">
|
|||
|
|
<text>我的奖金:289.377</text>
|
|||
|
|
<text class="arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="amount-item" @click="goToPromote">
|
|||
|
|
<text>推广奖金:0.000</text>
|
|||
|
|
<text class="arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 功能菜单区 -->
|
|||
|
|
<view class="menu-section">
|
|||
|
|
<view class="menu-item" @click="goToInvite">
|
|||
|
|
<image class="menu-icon" src="/static/images/kong3.png" mode="aspectFit"></image>
|
|||
|
|
<text>邀请好友</text>
|
|||
|
|
<text class="arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="menu-item" @click="goToMyFans">
|
|||
|
|
<image class="menu-icon" src="/static/images/kong4.png" mode="aspectFit"></image>
|
|||
|
|
<text>我的粉丝</text>
|
|||
|
|
<text class="arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="menu-item" @click="goToPayee">
|
|||
|
|
<image class="menu-icon" src="/static/images/kong5.png" mode="aspectFit"></image>
|
|||
|
|
<text>收款方式</text>
|
|||
|
|
<text class="arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="menu-item" @click="goToAgreement">
|
|||
|
|
<image class="menu-icon" src="/static/images/kong6.png" mode="aspectFit"></image>
|
|||
|
|
<text>我的合同</text>
|
|||
|
|
<text class="arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="menu-item" @click="goToSetting">
|
|||
|
|
<image class="menu-icon" src="/static/images/kong7.png" mode="aspectFit"></image>
|
|||
|
|
<text>设置</text>
|
|||
|
|
<text class="arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userInfo: {
|
|||
|
|
nickname: '潘1陈1勇',
|
|||
|
|
inviteCode: 'xmrkqq'
|
|||
|
|
},
|
|||
|
|
amounts: {
|
|||
|
|
balance: '0.000',
|
|||
|
|
coupon: '0.000',
|
|||
|
|
prize: '289.377',
|
|||
|
|
promote: '0.000'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onShow() {
|
|||
|
|
// 登录状态判断已移至API调用中实现
|
|||
|
|
// 实际项目中可以在此直接调用接口加载用户信息，无需提前判断token
|
|||
|
|
// this.loadUserInfo();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 登录状态判断已移至API调用中实现
|
|||
|
|
// 移除了checkLogin方法，避免重复判断
|
|||
|
|
|
|||
|
|
// 复制邀请码
|
|||
|
|
copyInviteCode() {
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: this.userInfo.inviteCode,
|
|||
|
|
success: () => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '复制成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 买方相关功能
|
|||
|
|
goToBuyerWarehouse() {
|
|||
|
|
// 导航到买方仓库页面
|
|||
|
|
// cate=1 表示买方仓库(我购买的), type=1 表示寄卖中/交易中
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/sub-pages/rushing-order/index?cate=1&type=1'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 卖方相关功能
|
|||
|
|
goToSellerWarehouse() {
|
|||
|
|
// 导航到卖方仓库页面
|
|||
|
|
// cate=2 表示卖方仓库(我寄卖的), type=1 表示寄卖中/交易中
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/sub-pages/rushing-order/index?cate=2&type=1'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 交易中
|
|||
|
|
goToTrade(e) {
|
|||
|
|
// 导航到交易中页面
|
|||
|
|
// 通过事件对象获取data-from属性，判断是买方还是卖方进入
|
|||
|
|
const fromSeller = e && e.currentTarget && e.currentTarget.dataset && e.currentTarget.dataset.from === 'seller';
|
|||
|
|
// cate=1 表示买方, cate=2 表示卖方, type=1 表示寄卖中/交易中
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/sub-pages/rushing-order/index?cate=${fromSeller ? 2 : 1}&type=1`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 已完成
|
|||
|
|
goToCompleted(e) {
|
|||
|
|
// 导航到已完成页面
|
|||
|
|
// 通过事件对象获取data-from属性，判断是买方还是卖方进入
|
|||
|
|
const fromSeller = e && e.currentTarget && e.currentTarget.dataset && e.currentTarget.dataset.from === 'seller';
|
|||
|
|
// cate=1 表示买方, cate=2 表示卖方, type=2 表示已完成
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/sub-pages/rushing-order/index?cate=${fromSeller ? 2 : 1}&type=2`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 余额
|
|||
|
|
goToBalance() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/sub-pages/balance/index'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 优惠券
|
|||
|
|
goToCoupon() {
|
|||
|
|
// 导航到优惠券页面
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 我的奖金
|
|||
|
|
goToPrize() {
|
|||
|
|
// 导航到奖金页面
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 推广奖金
|
|||
|
|
goToPromote() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/sub-pages/promote-prize/index'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 邀请好友
|
|||
|
|
goToInvite() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/sub-pages/invite/index'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 我的粉丝
|
|||
|
|
goToMyFans() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/sub-pages/my-fans/index'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 收款方式
|
|||
|
|
goToPayee() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/sub-pages/my-payee/index'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 我的合同
|
|||
|
|
goToAgreement() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/sub-pages/webview/sign'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 设置
|
|||
|
|
goToSetting() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/sub-pages/setting/index'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.personal-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
padding-bottom: 120rpx; /* 为底部导航栏留出空间 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 头部用户信息区域 */
|
|||
|
|
.header-section {
|
|||
|
|
background-color: #f44336;
|
|||
|
|
padding: 40rpx 30rpx 60rpx;
|
|||
|
|
margin-bottom: 60rpx;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.user-info {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.user-name {
|
|||
|
|
font-size: 42rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #ffffff;
|
|||
|
|
margin-bottom: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-code {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
|
|||
|
|
.code {
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin: 0 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.copy-btn {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-left: 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-icon {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 买卖功能区 */
|
|||
|
|
.trade-section {
|
|||
|
|
margin: -30rpx 30rpx 20rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.trade-block {
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trade-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trade-functions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.trade-function {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.function-icon {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.function-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 金额信息区 */
|
|||
|
|
.amount-section {
|
|||
|
|
margin: 0 30rpx 20rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 1px;
|
|||
|
|
|
|||
|
|
.amount-row {
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amount-item {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
border-right: 1px solid #f0f0f0;
|
|||
|
|
|
|||
|
|
&:nth-child(2) {
|
|||
|
|
border-right: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrow {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #cccccc;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 功能菜单区 */
|
|||
|
|
.menu-section {
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.menu-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 35rpx 30rpx;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-icon {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrow {
|
|||
|
|
margin-left: auto;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #cccccc;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|