景徳镇旅游微信小程序
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.
 
 
 

184 lines
3.8 KiB

<template>
<view class="page">
<navbar title="个人中心" />
<view class="head">
<view class="headImage">
<image :src="userInfo.headImage" mode="aspectFill"></image>
</view>
<view class="info">
<view class="name">
{{ userInfo.nickName || '微信用户'}}
</view>
<view class="tips"
v-if="userInfo.createTime">
加入时间{{ $dayjs(userInfo.createTime).format('YYYY-MM-DD') }}
</view>
</view>
<view class="setting">
<!-- <uv-icon name="setting" size="40rpx"></uv-icon> -->
</view>
</view>
<view class="line">
<uv-cell-group>
<!-- 我的收藏 -->
<uv-cell icon="setting-fill" title="我的收藏"
@click="$utils.navigateTo('/pages_order/mine/collect')"
isLink>
<template #icon>
<image src="/static/image/center/1.png"
class="uv-cell-icon"></image>
</template>
</uv-cell>
<!-- 我的预约 -->
<uv-cell icon="setting-fill" title="我的预约"
@click="$utils.navigateTo('/pages_order/mine/subscribe')"
isLink>
<template #icon>
<image src="/static/image/center/2.png"
class="uv-cell-icon"></image>
</template>
</uv-cell>
<!-- 我的订单 -->
<uv-cell icon="setting-fill" title="我的订单"
@click="$utils.navigateTo('/pages_order/order/order')"
isLink>
<template #icon>
<image src="/static/image/center/3.png"
class="uv-cell-icon"></image>
</template>
</uv-cell>
<!-- 我的地址 -->
<uv-cell icon="setting-fill" title="我的地址"
@click="$utils.navigateTo('/pages_order/mine/address')"
isLink>
<template #icon>
<image src="/static/image/center/1.png"
class="uv-cell-icon"></image>
</template>
</uv-cell>
<!-- 购物车 -->
<uv-cell icon="setting-fill" title="我的购物车"
@click="$utils.navigateTo('/pages_order/mine/cart')"
isLink>
<template #icon>
<image src="/static/image/center/1.png"
class="uv-cell-icon"></image>
</template>
</uv-cell>
<!-- 加入志愿者 -->
<uv-cell icon="setting-fill" title="加入志愿者"
isLink @click="$utils.navigateTo('/pages_order/mine/volunteer')">
<template #icon>
<image src="/static/image/center/4.png"
class="uv-cell-icon"></image>
</template>
</uv-cell>
<!-- 退出登录 -->
<uv-cell icon="setting-fill" title="退出登录"
isLink @click="$store.commit('logout')">
<template #icon>
<image src="/static/image/center/4.png"
class="uv-cell-icon"></image>
</template>
</uv-cell>
</uv-cell-group>
</view>
<tabber select="2" />
</view>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['userInfo']),
},
data() {
return {
show: false,
}
},
onShow() {
this.$store.commit('getUserInfo')
},
methods: {
}
}
</script>
<style scoped lang="scss">
.page {
.line{
margin: 30rpx;
background-color: #fff;
border-radius: 30rpx;
overflow: hidden;
box-shadow: 0 0 10rpx 10rpx #00000007;
.uv-cell-icon{
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
}
/deep/ .uv-cell__body{
padding: 40rpx 30rpx;
}
}
}
image {
width: 100%;
height: 100%;
}
.head {
display: flex;
background-color: $uni-color;
padding: 60rpx 40rpx;
align-items: center;
position: relative;
color: #fff;
.headImage {
width: 120rpx;
height: 120rpx;
background-image: url(/static/image/center/3.png);
background-size: 100% 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.info {
font-size: 28rpx;
.name {
font-size: 32rpx;
margin-bottom: 10rpx;
}
.tips {
font-size: 26rpx;
}
}
.setting {
position: absolute;
right: 50rpx;
top: 50rpx;
}
}
</style>