079076a70e
- 从 main 获取 single_uniapp22miao 子项目 - dart-sass: /deep/ -> ::v-deep，calc 运算符加空格 - DEPLOY.md 采用 shccd159 版本（4 子项目架构说明） Made-with: Cursor
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>
|
||
|