Browse Source

feat: 个人中心;

pull/1/head
Fox-33 2 months ago
parent
commit
105bdc66ef
25 changed files with 410 additions and 232 deletions
  1. +12
    -0
      pages.json
  2. +312
    -227
      pages/index/center.vue
  3. +2
    -1
      pages/index/record.vue
  4. +18
    -0
      pages_order/mine/service.vue
  5. +18
    -0
      pages_order/mine/setting.vue
  6. +18
    -0
      pages_order/mine/team.vue
  7. +18
    -0
      pages_order/mine/wallet.vue
  8. +3
    -1
      pages_order/record/articleSharing.vue
  9. +3
    -1
      pages_order/record/groupSharing.vue
  10. +3
    -1
      pages_order/record/personalSharing.vue
  11. +3
    -1
      pages_order/record/videoSharing.vue
  12. BIN
      static/image/center/2.png
  13. BIN
      static/image/center/agent-icon.png
  14. BIN
      static/image/center/btn-activate-again.png
  15. BIN
      static/image/center/btn-activate.png
  16. BIN
      static/image/center/notice.png
  17. BIN
      static/image/center/service.png
  18. BIN
      static/image/center/temp-avatar.png
  19. BIN
      static/image/center/temp.png
  20. BIN
      static/image/center/title-bg.png
  21. BIN
      static/image/center/tool-activate.png
  22. BIN
      static/image/center/tool-share.png
  23. BIN
      static/image/center/tool-team.png
  24. BIN
      static/image/center/tool-wallet.png
  25. BIN
      static/image/center/tools-bg.png

+ 12
- 0
pages.json View File

@ -39,6 +39,18 @@
{
"path": "record/articleSharing"
},
{
"path": "mine/setting"
},
{
"path": "mine/wallet"
},
{
"path": "mine/team"
},
{
"path": "mine/service"
},
{


+ 312
- 227
pages/index/center.vue View File

@ -1,125 +1,136 @@
<template>
<view class="page">
<navbar title="个人中心" />
<navbar title="个人中心" bgColor="#001B3C" color="#FFFFFF" />
<view class="head">
<view class="headImage">
<image src="" mode=""></image>
<!-- todo: 换回接口提供的 -->
<image src="@/static/image/center/temp-avatar.png" mode=""></image>
</view>
<view class="info">
<view class="name">
倾心.
<!-- todo: 换回接口提供的 -->
裂变星1号
</view>
<!-- <view class="vip">
VIP1
</view> -->
<view class="tips">
今天是您来的的第32天
<view class="tags">
<!-- todo: 换回接口提供的 -->
<view class="tag">
<text class="tag-label">ID:</text>
<text>12345678</text>
</view>
<view v-if="isAgent" style="display: inline-block; width: 172rpx; height: 63rpx; vertical-align: top; margin-top: -6rpx;">
<image src="@/static/image/center/agent-icon.png"></image>
</view>
<view v-else class="tag">
普通会员
</view>
</view>
</view>
<!-- <view class="headBtn" @click="headBtn">
角色切换
</view> -->
<view class="setting">
<uv-icon name="setting" size="40rpx"></uv-icon>
<view class="setting" @click="goSetting">
<uv-icon name="setting" color="#FFFFFF" size="48rpx"></uv-icon>
</view>
</view>
<!-- 水洗店 -->
<view class="userShop" v-if="userShop">
<userShopCommission />
<view class="userList">
<view class="title">
我的用户
</view>
<view class="list">
<view class="item" v-for="(item, index) in 20" :key="index">
<view class="name">
客户王生
</view>
<view class="num">
剩余水洗布198
<view class="tools-box">
<image class="tools-bg" src="@/static/image/center/tools-bg.png"></image>
<view class="flex activate">
<template v-if="isAgent">
<view class="activate-tips" style="padding-left: 27rpx;">
<view>代理商权益</view>
<view>
将于<text class="activate-highlight">{{ agentDeadline }}</text>到期
</view>
</view>
</view>
<view class="btn-activate">
<image src="@/static/image/center/btn-activate-again.png"></image>
</view>
</template>
<template v-else>
<view class="activate-tips">
升级成为代理商享受更多权益
</view>
<view class="btn-activate">
<image src="@/static/image/center/btn-activate.png"></image>
</view>
</template>
</view>
</view>
<!-- 酒店 -->
<view class="user" v-else>
<view class="line">
<view class="item">
<view class="image">
<image src="/static/image/center/1.png" mode=""></image>
<view class="tools flex">
<view class="tool" @click="onShare">
<view class="tool-icon">
<image src="@/static/image/center/tool-share.png"></image>
</view>
<view class="">
余额3000
<text>分享好友</text>
</view>
<view class="tool" @click="onActivate">
<view class="tool-icon">
<image src="@/static/image/center/tool-activate.png"></image>
</view>
<text>激活码</text>
</view>
<view class="item">
<view class="image">
<image src="/static/image/center/4.png" mode=""></image>
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/wallet')">
<view class="tool-icon">
<image src="@/static/image/center/tool-wallet.png"></image>
</view>
<view class="">
押金30000
<text>我的钱包</text>
</view>
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/team')">
<view class="tool-icon">
<image src="@/static/image/center/tool-team.png"></image>
</view>
<text>我的团队</text>
</view>
</view>
<view class="line grid">
<view class="title">
常用功能
</view>
<view class="content">
<view class="card notice">
<view class="notice-icon">
<image src="@/static/image/center/notice.png"></image>
</view>
<uv-grid :col="4" :border="false">
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
<image class="image" src="/static/image/center/7.png" mode=""></image>
<text class="grid-text">地址管理</text>
</uv-grid-item>
<uv-grid-item @click="$utils.redirectTo('/index/order')">
<image class="image" src="/static/image/center/8.png" mode=""></image>
<text class="grid-text">订单管理</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/record/refundsOrExchange?index='+0)">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">换货</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/record/refundsOrExchange?index='+1)">
<image class="image" src="/static/image/center/7.png" mode=""></image>
<text class="grid-text">退货</text>
</uv-grid-item>
</uv-grid>
<uv-notice-bar
:text="notice"
bgColor="transparent"
color="#001B3C"
:icon="false"
fontSize="28rpx"
:customStyle="{
padding: 0,
}"
></uv-notice-bar>
</view>
<view class="line grid">
<uv-grid :col="4" :border="false">
<uv-grid-item @click="contactUs">
<image class="image" src="/static/image/center/9.png" mode=""></image>
<text class="grid-text">联系客服</text>
</uv-grid-item>
<uv-grid-item>
<image class="image" src="/static/image/center/6.png" mode=""></image>
<text class="grid-text">我的租赁</text>
</uv-grid-item>
<uv-grid-item @click="$utils.redirectTo('/index/cart')">
<image class="image" src="/static/image/center/7.png" mode=""></image>
<text class="grid-text">租赁车</text>
</uv-grid-item>
<uv-grid-item
@click="$utils.navigateTo('/pages_order/auth/loginAndRegisterAndForgetPassword?index='+2)">
<image class="image" src="/static/image/center/7.png" mode=""></image>
<text class="grid-text">申请成为水洗店</text>
</uv-grid-item>
</uv-grid>
<view class="card updates">
<view class="updates-header">
<view class="updates-header-bg">
<image src="@/static/image/center/title-bg.png"></image>
</view>
<view class="updates-header-content">
动态更新
</view>
</view>
<view class="updates-content">
<view class="card updates-item"
v-for="item in updateList"
:key="item.id"
@click="goToSharingDetail(item.id, item.state)"
>
<view class="updates-item-img">
<image :src="item.imageUrl"></image>
</view>
<view class="updates-item-info">
<view class="updates-item-title">{{ item.title }}</view>
<view class="updates-item-desc">{{ item.description }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="service" @click="$utils.navigateTo('/pages_order/mine/service')">>
<image src="@/static/image/center/service.png" mode=""></image>
</view>
<tabber select="center" />
</view>
</template>
@ -130,6 +141,14 @@
mapGetters
} from 'vuex'
import userShopCommission from '@/components/userShop/userShopCommission.vue'
const URL_MAPPING = { // state -> url
'-1': '/pages_order/record/personalSharing',
'1': '/pages_order/record/videoSharing',
'2': '/pages_order/record/groupSharing',
'3': '/pages_order/record/articleSharing',
}
export default {
components: {
tabber,
@ -140,8 +159,52 @@
},
data() {
return {
isAgent: true,
agentDeadline: '2025年12月31日',
notice: '如果您在使用中有任何问题或建议,请联系客服',
updateList: [
{
id: '001',
imageUrl: '../../static/image/center/temp.png',
times: 10,
qrCode: null,
title: '裂变星轻松获客',
description: '如此好用的赚钱项目,赶快加入吧!',
auditStatus: 2,
createTime: '2025年2月1日',
state: -1,
},
{
id: '002',
imageUrl: '../../static/image/center/temp.png',
times: 10,
qrCode: null,
title: '裂变星轻松获客',
description: '如此好用的赚钱项目,赶快加入吧!',
auditStatus: 2,
createTime: '2025年2月1日',
state: 0,
},
{
id: '003',
imageUrl: '../../static/image/center/temp.png',
times: 10,
qrCode: null,
title: '裂变星轻松获客',
description: '如此好用的赚钱项目,赶快加入吧!',
auditStatus: 2,
createTime: '2025年2月1日',
state: 1,
},
]
}
},
onShow() {
// todo:
},
onReachBottom() {
// todo:
},
methods: {
headBtn() {
let self = this
@ -154,6 +217,20 @@
}
})
},
goSetting() {
// todo
},
onShare() {
// todo
},
onActivate() {
// todo
},
goToSharingDetail(id, state) {
uni.navigateTo({
url: `${URL_MAPPING[state]}?id=${id}`
})
}
}
}
</script>
@ -161,49 +238,10 @@
<style scoped lang="scss">
.page {
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 600rpx;
height: 300rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
.title {
padding: 10rpx 0 0 15rpx;
background-color: #fd5100;
color: #FFF;
text-align: left;
width: 100%;
height: 18%;
font-size: 36rpx;
}
.center {
height: 40%;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
}
.bottom {
display: flex;
justify-content: center;
gap: 50rpx;
}
}
background-color: #001B3C;
min-height: 100vh;
}
image {
width: 100%;
height: 100%;
@ -211,43 +249,27 @@
.head {
display: flex;
background-color: #fff;
padding: 40rpx 20rpx;
padding: 20rpx 26rpx 18rpx 40rpx;
align-items: center;
position: relative;
.headImage {
width: 120rpx;
height: 120rpx;
background-image: url(/static/image/center/3.png);
background-size: 100% 100%;
width: 143rpx;
height: 143rpx;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.info {
font-size: 28rpx;
.vip {
background-color: #FCCC92;
color: #FA6239;
width: 100rpx;
display: flex;
justify-content: center;
align-items: center;
height: 40rpx;
border-radius: 20rpx;
margin-top: 20rpx;
}
.name {
font-size: 32rpx;
color: #FFFFFF;
font-size: 38rpx;
margin-bottom: 12rpx;
}
.tips {
font-size: 26rpx;
color: #ABABAB;
.tags {
}
}
@ -262,92 +284,155 @@
.setting {
position: absolute;
right: 50rpx;
top: 50rpx;
right: 26rpx;
top: 37rpx;
}
}
.tag {
display: inline-block;
padding: 6rpx 21rpx;
border: 1rpx solid #999999;
color: #FFFFFF;
font-size: 24rpx;
border-radius: 23rpx;
margin-right: 20rpx;
vertical-align: top;
&-label {
color: #999999;
}
}
.userShop {
.userList {
.title {
font-size: 32rpx;
font-weight: 900;
padding: 20rpx;
}
.list {
display: flex;
flex-wrap: wrap;
.item {
width: 270rpx;
margin: 20rpx;
display: flex;
flex-direction: column;
padding: 40rpx 30rpx;
background-color: #fff;
border-radius: 30rpx;
line-height: 60rpx;
.name {}
.num {
color: $uni-color;
font-weight: 600;
font-size: 28rpx;
}
}
}
.tools {
&-box {
width: 100vw;
height: 406rpx;
padding: 0 5rpx;
box-sizing: border-box;
position: relative;
}
position: absolute;
width: calc(100vw - 69rpx*2);
left: 69rpx;
bottom: 64rpx;
justify-content: space-between;
}
.activate {
position: absolute;
width: calc(100% - 199rpx);
height: 80rpx;
top: 31rpx;
right: 37rpx;
&-tips {
flex: 1;
color: #976224;
font-size: 28rpx;
}
.user {
.line {
display: flex;
background-color: #fff;
margin-top: 20rpx;
padding: 20rpx 0;
.item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0;
&:nth-child(1) {
border-right: 1px solid #00000013;
}
.image {
width: 100rpx;
height: 70rpx;
margin-right: 20rpx;
}
&-highlight {
color: #FF6868;
}
.btn-activate {
width: 172rpx;
height: 80rpx;
}
}
.tool {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #57595B;
font-size: 28rpx;
&-icon {
width: 88rpx;
height: 88rpx;
margin-bottom: 10rpx;
}
}
.content {
padding: 0 20rpx 20rpx 20rpx;
}
.notice {
padding: 22rpx 21rpx;
display: flex;
&-icon {
width: 49rpx;
height: 49rpx;
margin-right: 20rpx;
}
}
.updates {
margin-top: 20rpx;
padding: 20rpx;
&-header {
position: relative;
&-bg {
height: 51rpx;
width: 58rpx;
margin-left: 40rpx;
}
&-content {
color: #262626;
font-size: 38rpx;
font-weight: 900;
position: absolute;
top: 0;
}
}
.grid {
flex-direction: column;
font-size: 26rpx;
padding: 20rpx;
&-item {
padding: 0;
border-radius: 16rpx;
box-shadow: 0 0 32rpx 0 rgba($color: #808080, $alpha: 0.16);
margin-top: 20rpx;
&-img {
width: 100%;
height: 252rpx;
}
.title {
margin-bottom: 30rpx;
font-size: 28rpx;
font-weight: 600;
&-info {
padding: 15rpx 18rpx 8rpx 18rpx;
}
.image {
width: 70rpx;
height: 70rpx;
margin-bottom: 10rpx;
&-title {
color: #474747;
font-size: 32rpx;
}
text {
text-align: center;
width: 120rpx;
&-desc {
color: #CCCCCC;
font-size: 20rpx;
}
}
}
.service {
position: fixed;
right: 29rpx;
bottom: 312rpx;
width: 149rpx;
height: 158rpx;
}
</style>

+ 2
- 1
pages/index/record.vue View File

@ -63,6 +63,7 @@
@click="toSharingDetail(item.id)"
:key="item.id"
>
// todo: video?
<image class="left" :src="item.imageUrl"></image>
<view class="right">
<view class="title">{{ item.title }}</view>
@ -165,7 +166,7 @@
createTime: '2025年2月1日',
},
{
id: '002',
id: '003',
imageUrl: '../../static/image/record/temp.png',
times: 10,
qrCode: null,


+ 18
- 0
pages_order/mine/service.vue View File

@ -0,0 +1,18 @@
<template>
<view>
<navbar title="客服" leftClick @leftClick="$utils.navigateBack" />
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style scoped lang="scss">
</style>

+ 18
- 0
pages_order/mine/setting.vue View File

@ -0,0 +1,18 @@
<template>
<view>
<navbar title="设置" leftClick @leftClick="$utils.navigateBack" />
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style scoped lang="scss">
</style>

+ 18
- 0
pages_order/mine/team.vue View File

@ -0,0 +1,18 @@
<template>
<view>
<navbar title="分销" leftClick @leftClick="$utils.navigateBack" />
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style scoped lang="scss">
</style>

+ 18
- 0
pages_order/mine/wallet.vue View File

@ -0,0 +1,18 @@
<template>
<view>
<navbar title="我的钱包" leftClick @leftClick="$utils.navigateBack" />
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style scoped lang="scss">
</style>

+ 3
- 1
pages_order/record/articleSharing.vue View File

@ -105,10 +105,12 @@
</uv-form>
</view>
<!-- 审核通过 -->
<button v-if="auditStatus === 1" class="button-submit" @click="onPublish">
发布
</button>
<button v-else-if="auditStatus !== 0" class="button-submit" @click="onSubmit">
<!-- 不是 审核中 已发布 -> 创建分享 审核不通过 -->
<button v-else-if="![0,2].includes(auditStatus)" class="button-submit" @click="onSubmit">
提交审核
</button>
</view>


+ 3
- 1
pages_order/record/groupSharing.vue View File

@ -91,10 +91,12 @@
</uv-form>
</view>
<!-- 审核通过 -->
<button v-if="auditStatus === 1" class="button-submit" @click="onPublish">
发布
</button>
<button v-else-if="auditStatus !== 0" class="button-submit" @click="onSubmit">
<!-- 不是 审核中 已发布 -> 创建分享 审核不通过 -->
<button v-else-if="![0,2].includes(auditStatus)" class="button-submit" @click="onSubmit">
提交审核
</button>
</view>


+ 3
- 1
pages_order/record/personalSharing.vue View File

@ -87,10 +87,12 @@
</uv-form>
</view>
<!-- 审核通过 -->
<button v-if="auditStatus === 1" class="button-submit" @click="onPublish">
发布
</button>
<button v-else-if="auditStatus !== 0" class="button-submit" @click="onSubmit">
<!-- 不是 审核中 已发布 -> 创建分享 审核不通过 -->
<button v-else-if="![0,2].includes(auditStatus)" class="button-submit" @click="onSubmit">
提交审核
</button>
</view>


+ 3
- 1
pages_order/record/videoSharing.vue View File

@ -105,10 +105,12 @@
</uv-form>
</view>
<!-- 审核通过 -->
<button v-if="auditStatus === 1" class="button-submit" @click="onPublish">
发布
</button>
<button v-else-if="auditStatus !== 0" class="button-submit" @click="onSubmit">
<!-- 不是 审核中 已发布 -> 创建分享 审核不通过 -->
<button v-else-if="![0,2].includes(auditStatus)" class="button-submit" @click="onSubmit">
提交审核
</button>
</view>


BIN
static/image/center/2.png View File

Before After
Width: 112  |  Height: 126  |  Size: 6.1 KiB

BIN
static/image/center/agent-icon.png View File

Before After
Width: 172  |  Height: 63  |  Size: 8.8 KiB

BIN
static/image/center/btn-activate-again.png View File

Before After
Width: 172  |  Height: 80  |  Size: 9.2 KiB

BIN
static/image/center/btn-activate.png View File

Before After
Width: 172  |  Height: 80  |  Size: 6.9 KiB

BIN
static/image/center/notice.png View File

Before After
Width: 49  |  Height: 45  |  Size: 1.4 KiB

BIN
static/image/center/service.png View File

Before After
Width: 149  |  Height: 158  |  Size: 22 KiB

BIN
static/image/center/temp-avatar.png View File

Before After
Width: 143  |  Height: 143  |  Size: 40 KiB

BIN
static/image/center/temp.png View File

Before After
Width: 673  |  Height: 252  |  Size: 138 KiB

BIN
static/image/center/title-bg.png View File

Before After
Width: 58  |  Height: 51  |  Size: 1.1 KiB

BIN
static/image/center/tool-activate.png View File

Before After
Width: 88  |  Height: 88  |  Size: 2.2 KiB

BIN
static/image/center/tool-share.png View File

Before After
Width: 88  |  Height: 88  |  Size: 2.1 KiB

BIN
static/image/center/tool-team.png View File

Before After
Width: 88  |  Height: 88  |  Size: 2.1 KiB

BIN
static/image/center/tool-wallet.png View File

Before After
Width: 88  |  Height: 88  |  Size: 1.4 KiB

BIN
static/image/center/tools-bg.png View File

Before After
Width: 740  |  Height: 406  |  Size: 44 KiB

Loading…
Cancel
Save