You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
6.4 KiB
320 lines
6.4 KiB
<template>
|
|
<view class="page">
|
|
<view class="head-box"></view>
|
|
<uv-navbar title="个人中心" leftIcon=" " :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
|
|
|
|
<view class="content">
|
|
<view class="head" @click="toInfo">
|
|
<view class="headImage" @click="toInfo">
|
|
<image :src="userInfo.headImage" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="info" @click="toInfo">
|
|
<view class="vip">
|
|
{{isLogin ? userInfo.nickName : '请点击登录'}}
|
|
</view>
|
|
<view class="tips">
|
|
{{isLogin ? userInfo.phone : ''}}
|
|
</view>
|
|
</view>
|
|
<view class="setting" @click="jump({url:'/pages_my/user-msg'})">
|
|
<uv-icon name="edit-pen" size="50rpx" color="#fff"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="myOrder">
|
|
<view>我的活动</view>
|
|
</view>
|
|
|
|
<view class="order">
|
|
<view class="box">
|
|
<view class="boxs"
|
|
@click="$utils.navigateTo('/pages_my/activeList')">
|
|
<image src="@/static/image/center/order-1.png" mode="aspectFill" />
|
|
<view>待参加</view>
|
|
</view>
|
|
<view class="boxs"
|
|
@click="$utils.navigateTo('/pages_my/activeList')">
|
|
<image src="@/static/image/center/order-2.png" mode="aspectFill" />
|
|
<view>已完成</view>
|
|
</view>
|
|
<view class="boxs"
|
|
@click="$utils.navigateTo('/pages_my/activeList')">
|
|
<image src="@/static/image/center/order-3.png" mode="aspectFill" />
|
|
<view>已取消</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="myOrder">
|
|
<view>我的工具</view>
|
|
</view>
|
|
<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>
|
|
|
|
<!-- <customerServicePopup ref="customerServicePopup"/> -->
|
|
|
|
<tabber select="center" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import { mapState,mapGetters } from 'vuex'
|
|
import customerServicePopup from '@/components/config/customerServicePopup.vue'
|
|
export default {
|
|
components: {
|
|
tabber,
|
|
customerServicePopup,
|
|
},
|
|
computed: {
|
|
...mapGetters(["userInfo","isLogin"]),
|
|
},
|
|
data() {
|
|
return {
|
|
bgColor:'transparent',
|
|
cellList:[
|
|
{
|
|
src:require('@/static/image/center/line-1.png'),
|
|
name:'开票记录'
|
|
},
|
|
{
|
|
src:require('@/static/image/center/line-2.png'),
|
|
name:'我的收藏',
|
|
url:'/pages_my/collection'
|
|
},
|
|
{
|
|
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() {
|
|
|
|
},
|
|
onLoad() {
|
|
if(this.isLogin) {
|
|
this.$store.commit('getUserInfo')
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
if(e.scrollTop > 50) {
|
|
this.bgColor = '#49070c'
|
|
}else{
|
|
this.bgColor = 'transparent'
|
|
}
|
|
},
|
|
methods: {
|
|
clickNo(){
|
|
uni.showModal({
|
|
title: '暂未开放',
|
|
})
|
|
},
|
|
jump(item) {
|
|
uni.navigateTo({
|
|
url:item.url
|
|
})
|
|
},
|
|
toInfo() {
|
|
if(!this.isLogin) {
|
|
uni.navigateTo({
|
|
url:'/pages_login/wxLogin'
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/pages_my/user-info'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #060504;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.page {
|
|
|
|
.head-box {
|
|
background: url('@/static/image/nav-bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 534rpx;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
.content {
|
|
padding: 0 30rpx;
|
|
padding-top: calc(var(--status-bar-height) + 110rpx);
|
|
padding-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.headImage {
|
|
width: 113rpx;
|
|
height: 113rpx;
|
|
background-image: url(/static/image/center/3.png);
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
margin-right: 22rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
flex: 1;
|
|
.vip {
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #E6E6E6;
|
|
}
|
|
|
|
.tips {
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.setting {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// position: absolute;
|
|
// right: 50rpx;
|
|
// top: 50rpx;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
background: #221D1D;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
|
|
.myOrder {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #E6E6E6;
|
|
}
|
|
|
|
.order {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
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;
|
|
.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;
|
|
padding: 20rpx;
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
padding: 10rpx;
|
|
border-left: 6rpx solid #A3D250;
|
|
}
|
|
}
|
|
|
|
.cell-bottom {
|
|
margin-top: 20rpx;
|
|
margin-left: 2%;
|
|
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>
|