|
@@ -5,27 +5,39 @@
|
|
<view class="avatar-wrap" @tap="$Router.push('/pages/client/personalCenter/index')">
|
|
<view class="avatar-wrap" @tap="$Router.push('/pages/client/personalCenter/index')">
|
|
<u-avatar :src="user_info.avatar" size="80"></u-avatar>
|
|
<u-avatar :src="user_info.avatar" size="80"></u-avatar>
|
|
</view>
|
|
</view>
|
|
- <view class="user-base">
|
|
|
|
- <view class="user-nickname" @tap="$Router.push('/pages/login/index')">{{ user_info.nickname }}</view>
|
|
|
|
- <view class="btn-wrap">
|
|
|
|
- <view class="btn-content" @tap="$Router.push('/pages/client/settings/index')">设置</view>
|
|
|
|
- <view class="btn-content">认证</view>
|
|
|
|
|
|
+ <view>
|
|
|
|
+ <!-- 已登录 -->
|
|
|
|
+ <view class="user-base" v-if="user_info.nickname">
|
|
|
|
+ <view class="user-nickname">{{ user_info.nickname }}</view>
|
|
|
|
+ <view class="btn-wrap">
|
|
|
|
+ <view class="btn-content" @tap="$Router.push('/pages/client/settings/index')">设置</view>
|
|
|
|
+ <view class="btn-content">认证</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- 未登录 -->
|
|
|
|
+ <view class="clickLogin" v-else @tap="$Router.push('/pages/login/index')">
|
|
|
|
+ 点击登录
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view>
|
|
|
|
|
|
+
|
|
|
|
+ <!-- 收藏 -->
|
|
|
|
+ <view class="Collect">
|
|
<u-grid :border="false" col="4">
|
|
<u-grid :border="false" col="4">
|
|
<u-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex" @tap="$Router.push(listItem.url)">
|
|
<u-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex" @tap="$Router.push(listItem.url)">
|
|
- <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></u-icon>
|
|
|
|
|
|
+ <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="24" color="#fff" />
|
|
<text class="grid-text">{{ listItem.title }}</text>
|
|
<text class="grid-text">{{ listItem.title }}</text>
|
|
</u-grid-item>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</u-grid>
|
|
</view>
|
|
</view>
|
|
|
|
+
|
|
|
|
+ <!-- 我的订单 -->
|
|
<view class="order-out-box">
|
|
<view class="order-out-box">
|
|
<view class="order-inner-box">
|
|
<view class="order-inner-box">
|
|
<u-grid :border="false" col="4" style="background-color: #fff">
|
|
<u-grid :border="false" col="4" style="background-color: #fff">
|
|
<u-grid-item v-for="(listItem, listIndex) in list2" :key="listIndex">
|
|
<u-grid-item v-for="(listItem, listIndex) in list2" :key="listIndex">
|
|
- <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></u-icon>
|
|
|
|
|
|
+ <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="34"></u-icon>
|
|
<text class="grid-text">{{ listItem.title }}</text>
|
|
<text class="grid-text">{{ listItem.title }}</text>
|
|
</u-grid-item>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</u-grid>
|
|
@@ -33,14 +45,15 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
+ <!-- 我的收益 -->
|
|
<view class="income-out-box">
|
|
<view class="income-out-box">
|
|
<view class="income-inner-box">
|
|
<view class="income-inner-box">
|
|
<view class="income-head">
|
|
<view class="income-head">
|
|
<text class="my-income">我的收益</text>
|
|
<text class="my-income">我的收益</text>
|
|
- <u-icon name="arrow-right"></u-icon>
|
|
|
|
|
|
+ <u-icon name="arrow-right" />
|
|
</view>
|
|
</view>
|
|
<view class="income-content">
|
|
<view class="income-content">
|
|
- <u-grid :border="false" col="4">
|
|
|
|
|
|
+ <u-grid :border="false" col="4" bgColor="#fff">
|
|
<u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
|
|
<u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
|
|
<view class="num-box">{{ listItem.num }}元</view>
|
|
<view class="num-box">{{ listItem.num }}元</view>
|
|
<view class="num-title">{{ listItem.title }}</view>
|
|
<view class="num-title">{{ listItem.title }}</view>
|
|
@@ -50,6 +63,11 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
+ <!-- 预约列表 -->
|
|
|
|
+ <view class="appointList">
|
|
|
|
+ <u-cell icon="setting-fill" title="预约列表" isLink url="/pages/componentsB/tag/tag" />
|
|
|
|
+ </view>
|
|
|
|
+
|
|
<view class="other-out-box">
|
|
<view class="other-out-box">
|
|
<view class="other-inner-box">
|
|
<view class="other-inner-box">
|
|
<u-cell-group :border="false">
|
|
<u-cell-group :border="false">
|
|
@@ -72,11 +90,12 @@ export default {
|
|
{
|
|
{
|
|
name: 'photo',
|
|
name: 'photo',
|
|
title: '收藏',
|
|
title: '收藏',
|
|
|
|
+ url: '/pages/my/collect/index',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: 'lock',
|
|
name: 'lock',
|
|
title: '积分',
|
|
title: '积分',
|
|
- url: '/pages/client/score/index'
|
|
|
|
|
|
+ url: '/pages/client/score/index',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: 'star',
|
|
name: 'star',
|
|
@@ -85,7 +104,7 @@ export default {
|
|
{
|
|
{
|
|
name: 'hourglass',
|
|
name: 'hourglass',
|
|
title: '优惠券',
|
|
title: '优惠券',
|
|
- url: '/pages/client/coupon/index',
|
|
|
|
|
|
+ url: '/pages/my/coupon/index',
|
|
},
|
|
},
|
|
],
|
|
],
|
|
list2: [
|
|
list2: [
|
|
@@ -126,9 +145,9 @@ export default {
|
|
],
|
|
],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
- computed:{
|
|
|
|
- ...mapGetters(['user_info'])
|
|
|
|
- }
|
|
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters(['user_info']),
|
|
|
|
+ },
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -136,15 +155,22 @@ export default {
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
background-color: #efefef;
|
|
background-color: #efefef;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+/* 顶部登录 */
|
|
.head-wrap {
|
|
.head-wrap {
|
|
- background-color: $uni-color-primary;
|
|
|
|
- height: 416rpx;
|
|
|
|
|
|
+ background-color: #347caf;
|
|
|
|
+ height: 390rpx;
|
|
|
|
|
|
.content {
|
|
.content {
|
|
display: flex;
|
|
display: flex;
|
|
padding: 38rpx 0 0 36rpx;
|
|
padding: 38rpx 0 0 36rpx;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
+ .clickLogin {
|
|
|
|
+ font-size: 48rpx;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ }
|
|
|
|
+
|
|
.avatar-wrap {
|
|
.avatar-wrap {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
@@ -157,12 +183,14 @@ export default {
|
|
justify-content: space-evenly;
|
|
justify-content: space-evenly;
|
|
|
|
|
|
.user-nickname {
|
|
.user-nickname {
|
|
|
|
+ margin-top: 20rpx;
|
|
font-size: 40rpx;
|
|
font-size: 40rpx;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
|
|
.btn-wrap {
|
|
.btn-wrap {
|
|
width: 160rpx;
|
|
width: 160rpx;
|
|
|
|
+ margin-top: 20rpx;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
|
|
@@ -175,35 +203,53 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .Collect {
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
+
|
|
|
|
+ // 宫格颜色
|
|
|
|
+ .grid-text {
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: #fff;
|
|
|
|
+ margin-top: 5rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
.order-out-box {
|
|
.order-out-box {
|
|
- margin-top: 20rpx;
|
|
|
|
- padding: 0 16rpx;
|
|
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
+ padding: 10rpx 16rpx;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
+
|
|
.order-inner-box {
|
|
.order-inner-box {
|
|
- padding-bottom: 20rpx;
|
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ padding-bottom: 30rpx;
|
|
background-color: $uni-bg-color;
|
|
background-color: $uni-bg-color;
|
|
- border-radius: 20rpx;
|
|
|
|
|
|
+ border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.income-out-box {
|
|
.income-out-box {
|
|
- margin-top: 60rpx;
|
|
|
|
- padding: 0 16rpx;
|
|
|
|
|
|
+ margin-top: 110rpx;
|
|
|
|
+ padding: 10rpx 16rpx;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
+
|
|
.income-inner-box {
|
|
.income-inner-box {
|
|
padding: 20rpx;
|
|
padding: 20rpx;
|
|
background-color: $uni-bg-color;
|
|
background-color: $uni-bg-color;
|
|
- border-radius: 20rpx;
|
|
|
|
|
|
+
|
|
.income-head {
|
|
.income-head {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
+
|
|
.my-income {
|
|
.my-income {
|
|
color: $uni-color-primary;
|
|
color: $uni-color-primary;
|
|
font-size: 32rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.income-content {
|
|
.income-content {
|
|
.num-box {
|
|
.num-box {
|
|
padding: 20rpx 0;
|
|
padding: 20rpx 0;
|
|
@@ -211,6 +257,7 @@ export default {
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
color: $uni-text-color;
|
|
color: $uni-text-color;
|
|
}
|
|
}
|
|
|
|
+
|
|
.num-title {
|
|
.num-title {
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
color: $uni-text-color-grey;
|
|
color: $uni-text-color-grey;
|
|
@@ -220,12 +267,17 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.other-out-box {
|
|
.other-out-box {
|
|
- margin-top: 60rpx;
|
|
|
|
- padding: 0 16rpx;
|
|
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
+ padding: 20rpx 16rpx;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
+
|
|
.other-inner-box {
|
|
.other-inner-box {
|
|
background-color: $uni-bg-color;
|
|
background-color: $uni-bg-color;
|
|
- border-radius: 20rpx;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.appointList {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ margin: 10rpx 16rpx 0 16rpx;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|