|
|
@ -1,152 +1,66 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
<view class="head-box"></view> |
|
|
|
<uv-navbar title="个人中心" :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar> |
|
|
|
|
|
|
|
<navbar title="个人中心" /> |
|
|
|
|
|
|
|
<view class="head"> |
|
|
|
<view class="headImage"> |
|
|
|
<image :src="userInfo.headImage" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="info"> |
|
|
|
<view class="name"> |
|
|
|
<view class="one">{{ userInfo.nickName }}</view> |
|
|
|
<!-- <view class="two">黄金会员</view> --> |
|
|
|
<view class="two"> |
|
|
|
<image :src="configList[vipImage[userInfo.isPay]]" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
<view class="content"> |
|
|
|
<view class="head"> |
|
|
|
<view class="headImage"> |
|
|
|
<image :src="userInfo.headImage" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="vip"> |
|
|
|
ID:{{ userInfo.id }} |
|
|
|
<view class="info"> |
|
|
|
<view class="vip"> |
|
|
|
但愿人长久 |
|
|
|
</view> |
|
|
|
<view class="tips"> |
|
|
|
158123321 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="tips"> |
|
|
|
注册时间:{{ userInfo.createTime }} |
|
|
|
<view class="setting"> |
|
|
|
<uv-icon name="edit-pen" size="50rpx" color="#fff"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- <view class="setting"> |
|
|
|
<uv-icon name="setting" size="40rpx"></uv-icon> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="earnings"> |
|
|
|
<view class="member" |
|
|
|
v-if="userInfo.isPay" |
|
|
|
@click="$utils.navigateTo('/pages/index/member')"> |
|
|
|
<view>会员等级:{{ vipType[userInfo.isPay] }}</view> |
|
|
|
<view>查看权益></view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="myOrder"> |
|
|
|
<view>我的活动</view> |
|
|
|
</view> |
|
|
|
<view class="deposit"> |
|
|
|
<view class="box" |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/balance')"> |
|
|
|
<view> |
|
|
|
<view class="num">{{ riceInfo.income || 0 }}</view> |
|
|
|
<view class="text">收益明细(元)</view> |
|
|
|
</view> |
|
|
|
<view class="boxs">收益明细</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <view class="box"> |
|
|
|
<view |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/balance')"> |
|
|
|
<view class="num">{{ riceInfo.balance || 0 }}</view> |
|
|
|
<view class="text">余额(元)</view> |
|
|
|
|
|
|
|
<view class="order"> |
|
|
|
<view class="box"> |
|
|
|
<view class="boxs" |
|
|
|
@click="$utils.navigateTo('/pages/index/order?type=1')"> |
|
|
|
<image src="@/static/image/center/order-1.png" mode="aspectFill" /> |
|
|
|
<view>待参加</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/recharge')">去充值</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<view class="box" |
|
|
|
@click="clickNo"> |
|
|
|
<view> |
|
|
|
<view class="num">{{ riceInfo.balance || 0 }}</view> |
|
|
|
<view class="text">余额(元)</view> |
|
|
|
@click="$utils.navigateTo('/pages/index/order?type=2')"> |
|
|
|
<image src="@/static/image/center/order-2.png" mode="aspectFill" /> |
|
|
|
<view>已完成</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" |
|
|
|
>去充值</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="box"> |
|
|
|
<view |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/commission')"> |
|
|
|
<view class="num" style="border: none;">{{ riceInfo.canWithdraw || 0 }}</view> |
|
|
|
<view class="text">可提现(元)</view> |
|
|
|
@click="$utils.navigateTo('/pages/index/order?type=3')"> |
|
|
|
<image src="@/static/image/center/order-3.png" mode="aspectFill" /> |
|
|
|
<view>已取消</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/withdraw')">去提现</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="myOrder"> |
|
|
|
<view>我的订单</view> |
|
|
|
<view |
|
|
|
@click="$utils.navigateTo('/pages/index/order')"> |
|
|
|
查看全部> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="order"> |
|
|
|
<view class="box"> |
|
|
|
<view class="boxs" |
|
|
|
@click="$utils.navigateTo('/pages/index/order?type=1')"> |
|
|
|
<image src="../../static/image/center/13.png" mode="aspectFill" /> |
|
|
|
<view>待付款</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" |
|
|
|
@click="$utils.navigateTo('/pages/index/order?type=2')"> |
|
|
|
<image src="../../static/image/center/14.png" mode="aspectFill" /> |
|
|
|
<view>已付款</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" |
|
|
|
@click="$utils.navigateTo('/pages/index/order?type=3')"> |
|
|
|
<image src="../../static/image/center/15.png" mode="aspectFill" /> |
|
|
|
<view>待发货</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" |
|
|
|
@click="$utils.navigateTo('/pages/index/order?type=4')"> |
|
|
|
<image src="../../static/image/center/16.png" mode="aspectFill" /> |
|
|
|
<view>待收货</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" |
|
|
|
@click="$utils.navigateTo('/pages/index/order?type=5')"> |
|
|
|
<image src="../../static/image/center/17.png" mode="aspectFill" /> |
|
|
|
<view>已完成</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="myOrder"> |
|
|
|
<view>我的工具</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 酒店 --> |
|
|
|
<view class="user"> |
|
|
|
<view class="line grid"> |
|
|
|
<view class="title"> |
|
|
|
常用功能 |
|
|
|
<view class="user"> |
|
|
|
<view class="cell-bottom"> |
|
|
|
<view class="cell-line" v-for="(item,i) in cellList" :key="i" @click="jump(item)"> |
|
|
|
<view class="line-l"> |
|
|
|
<image :src="item.src" mode="widthFix"></image> |
|
|
|
<view>{{item.name}}</view> |
|
|
|
</view> |
|
|
|
<uv-icon size="35" name="arrow-right"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="cell-bottom"> |
|
|
|
<uv-cell-group> |
|
|
|
<uv-cell icon="grid" title="我的邀请码" |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/promotion')" |
|
|
|
:isLink="true" arrow-direction="right" /> |
|
|
|
|
|
|
|
<uv-cell icon="account" title="我的推荐" :isLink="true" arrow-direction="right" |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/recommend')" /> |
|
|
|
|
|
|
|
<uv-cell icon="kefu-ermai" title="联系客服" |
|
|
|
@click="$refs.customerServicePopup.open()" |
|
|
|
:isLink="true" arrow-direction="right" /> |
|
|
|
|
|
|
|
<uv-cell |
|
|
|
title="我的地址" |
|
|
|
icon="list-dot" |
|
|
|
:isLink="true" |
|
|
|
arrow-direction="right" |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/address')"> |
|
|
|
</uv-cell> |
|
|
|
|
|
|
|
<uv-cell icon="reload" title="退出登录" :isLink="true" arrow-direction="right" |
|
|
|
@click="$store.commit('logout')"/> |
|
|
|
</uv-cell-group> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <customerServicePopup ref="customerServicePopup"/> --> |
|
|
@ -168,12 +82,51 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
bgColor:'transparent', |
|
|
|
cellList:[ |
|
|
|
{ |
|
|
|
src:require('@/static/image/center/line-1.png'), |
|
|
|
name:'开票记录' |
|
|
|
}, |
|
|
|
{ |
|
|
|
src:require('@/static/image/center/line-2.png'), |
|
|
|
name:'我的收藏' |
|
|
|
}, |
|
|
|
{ |
|
|
|
src:require('@/static/image/center/line-3.png'), |
|
|
|
name:'关于我们' |
|
|
|
}, |
|
|
|
{ |
|
|
|
src:require('@/static/image/center/line-4.png'), |
|
|
|
name:'用户协议' |
|
|
|
}, |
|
|
|
{ |
|
|
|
src:require('@/static/image/center/line-5.png'), |
|
|
|
name:'隐私协议' |
|
|
|
}, |
|
|
|
{ |
|
|
|
src:require('@/static/image/center/line-6.png'), |
|
|
|
name:'主理人协议' |
|
|
|
}, |
|
|
|
{ |
|
|
|
src:require('@/static/image/center/line-7.png'), |
|
|
|
name:'主理人签到', |
|
|
|
url:'/pages_my/zlx-qiandao' |
|
|
|
} |
|
|
|
], |
|
|
|
vipType : ['普通会员', '黄金会员', '渠道商'], |
|
|
|
vipImage : ['vip_vip', 'vip_user', 'vip_shop'] |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
|
|
|
|
}, |
|
|
|
onPageScroll(e) { |
|
|
|
if(e.scrollTop > 50) { |
|
|
|
this.bgColor = '#49070c' |
|
|
|
}else{ |
|
|
|
this.bgColor = 'transparent' |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
clickNo(){ |
|
|
@ -181,75 +134,50 @@ |
|
|
|
title: '暂未开放', |
|
|
|
}) |
|
|
|
}, |
|
|
|
jump(item) { |
|
|
|
uni.navigateTo({ |
|
|
|
url:item.url |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
page { |
|
|
|
background-color: #060504; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.page { |
|
|
|
|
|
|
|
.warp { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
height: 100%; |
|
|
|
.head-box { |
|
|
|
background: url('@/static/image/nav-bg.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 100%; |
|
|
|
height: 534rpx; |
|
|
|
position: absolute; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
.content { |
|
|
|
padding: 0 30rpx; |
|
|
|
padding-top: calc(var(--status-bar-height) + 100rpx); |
|
|
|
padding-bottom: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.head { |
|
|
|
display: flex; |
|
|
|
background-color: #fff; |
|
|
|
padding: 40rpx 20rpx; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
margin-bottom: 40rpx; |
|
|
|
|
|
|
|
.headImage { |
|
|
|
width: 130rpx; |
|
|
|
height: 130rpx; |
|
|
|
width: 113rpx; |
|
|
|
height: 113rpx; |
|
|
|
background-image: url(/static/image/center/3.png); |
|
|
|
background-size: 100% 100%; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 50%; |
|
|
|
margin-right: 40rpx; |
|
|
|
margin-right: 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.info { |
|
|
@ -257,161 +185,78 @@ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 10rpx; |
|
|
|
flex: 1; |
|
|
|
.vip { |
|
|
|
color: #909294; |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.name { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.one { |
|
|
|
color: #343140; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
margin-right: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.two { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
flex-shrink: 0; |
|
|
|
// font-size: 24rpx; |
|
|
|
// margin-left: 10rpx; |
|
|
|
// padding: 3rpx 16rpx; |
|
|
|
// border-radius: 18rpx; |
|
|
|
// background-color: rgb(252, 213, 157); |
|
|
|
image{ |
|
|
|
width: 120rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
font-weight: 600; |
|
|
|
font-size: 32rpx; |
|
|
|
color: #E6E6E6; |
|
|
|
} |
|
|
|
|
|
|
|
.tips { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #ABABAB; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 22rpx; |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.setting { |
|
|
|
position: absolute; |
|
|
|
right: 50rpx; |
|
|
|
top: 50rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.earnings { |
|
|
|
width: 94%; |
|
|
|
margin-left: 3%; |
|
|
|
|
|
|
|
.member { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 90%; |
|
|
|
margin-left: 5%; |
|
|
|
height: 80rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
background-color: #000; |
|
|
|
color: #F9CF93; |
|
|
|
border-top-left-radius: 30rpx; |
|
|
|
border-top-right-radius: 30rpx; |
|
|
|
view { |
|
|
|
margin: 0 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.deposit { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
height: 300rpx; |
|
|
|
// margin-top: -20rpx; |
|
|
|
background-color: rgb(163, 201, 80); |
|
|
|
border-radius: 40rpx; |
|
|
|
|
|
|
|
.box { |
|
|
|
display: flex; |
|
|
|
height: 80%; |
|
|
|
padding: 0rpx 30rpx; |
|
|
|
text-align: center; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-around; |
|
|
|
color: #fff; |
|
|
|
border-right: 2rpx dashed; |
|
|
|
flex: 1; |
|
|
|
.num { |
|
|
|
font-size: 48rpx; |
|
|
|
// border-right: 2rpx dashed; |
|
|
|
width: 100%; |
|
|
|
padding: 0 30rpx 0 0; |
|
|
|
} |
|
|
|
|
|
|
|
.text { |
|
|
|
font-size: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.boxs { |
|
|
|
font-size: 32rpx; |
|
|
|
background-color: rgb(252, 213, 157); |
|
|
|
padding: 14rpx 20rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
color: #aa5500; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.myOrder { |
|
|
|
display: flex; |
|
|
|
width: 94%; |
|
|
|
margin-left: 3%; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 20rpx 0; |
|
|
|
|
|
|
|
view:nth-child(1) { |
|
|
|
font-weight: 600; |
|
|
|
font-size: 32rpx; |
|
|
|
border-left: 7rpx solid #A3D250; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
view:nth-child(2) { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #A3D250; |
|
|
|
justify-content: center; |
|
|
|
// position: absolute; |
|
|
|
// right: 50rpx; |
|
|
|
// top: 50rpx; |
|
|
|
width: 70rpx; |
|
|
|
height: 70rpx; |
|
|
|
background: #221D1D; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
view { |
|
|
|
padding: 0 20rpx; |
|
|
|
} |
|
|
|
.myOrder { |
|
|
|
font-weight: bold; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #E6E6E6; |
|
|
|
} |
|
|
|
|
|
|
|
.order { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 94%; |
|
|
|
margin-left: 3%; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 16rpx; |
|
|
|
|
|
|
|
height: 200rpx; |
|
|
|
background: #1B1713; |
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx; |
|
|
|
opacity: 0.7; |
|
|
|
color: #999999; |
|
|
|
font-size: 23rpx; |
|
|
|
margin-top: 22rpx; |
|
|
|
margin-bottom: 33rpx; |
|
|
|
.box { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
justify-content: space-around; |
|
|
|
padding: 70rpx 0 90rpx; |
|
|
|
|
|
|
|
.boxs { |
|
|
|
width: 33.33%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
border-right: 1px solid #2F2D2B; |
|
|
|
&:last-child { |
|
|
|
border: none; |
|
|
|
} |
|
|
|
image { |
|
|
|
width: 55rpx; |
|
|
|
height: 47rpx; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.user { |
|
|
|
|
|
|
|
margin-top: 25rpx; |
|
|
|
.grid { |
|
|
|
flex-direction: column; |
|
|
|
font-size: 26rpx; |
|
|
@ -425,12 +270,28 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.cell-bottom { |
|
|
|
width: 96%; |
|
|
|
margin-top: 20rpx; |
|
|
|
margin-left: 2%; |
|
|
|
background-color: #fff; |
|
|
|
background-color: #1B1713; |
|
|
|
border-radius: 20rpx; |
|
|
|
|
|
|
|
.cell-line { |
|
|
|
height: 100rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 30rpx; |
|
|
|
.line-l { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 29rpx; |
|
|
|
color: #E6E6E6; |
|
|
|
image { |
|
|
|
width: 45rpx; |
|
|
|
margin-right: 18rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |