Augcl
/
health-front
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat: page-center(when not login);

pull/2/head
Fox-33 1 month ago
parent
7145954517
commit
05faea8100
3 changed files with 160 additions and 75 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +113
    -40
      pages/index/center.vue
  2. +47
    -35
      pages_order/center/reportCard.vue
  3. BIN
      pages_order/static/center/avatar-default.png

+ 113
- 40
pages/index/center.vue View File

@ -11,53 +11,83 @@
<view class="content"> <view class="content">
<view class="flex user"> <view class="flex user">
<view class="user-avatar">
<image class="user-avatar-img" src="@/pages_order/static/report/avatar.png" mode="scaleToFill"></image>
</view>
<view class="user-info">
<view class="user-info-name">战斗世界</view>
<view class="user-info-desc">世界这么美，身体要健康～</view>
</view>
<!-- 用户信息 -->
<template v-if="isLogin">
<view class="user-avatar">
<image class="user-avatar-img" src="@/pages_order/static/report/avatar.png" mode="scaleToFill"></image>
</view>
<view class="user-info">
<view class="user-info-name">战斗世界</view>
<view class="user-info-desc">世界这么美，身体要健康～</view>
</view>
</template>
<template v-else>
<view class="user-avatar is-default">
<image class="user-avatar-img" src="@/pages_order/static/center/avatar-default.png" mode="scaleToFill"></image>
</view>
<view class="user-info">
<view class="user-info-tips">暂未登录 请先登录</view>
</view>
</template>
</view> </view>
<!-- 体检报告 -->
<report-card></report-card> <report-card></report-card>
<order-card></order-card>
<!-- 订单信息 -->
<template v-if="isLogin">
<order-card></order-card>
</template>
<!-- 微信公众号 -->
<account-card></account-card> <account-card></account-card>
<view class="card">
<view v-for="item in list1" :key="item.id">
<template v-if="item.key === 'service'">
<button plain class="flex btn-service" open-type="contact">
<view class="flex row">
<view class="flex label">
<image class="icon" :src="item.icon" mode="scaleToFill"></image>
<view>{{ item.label }}</view>
</view>
<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
</view>
</button>
</template>
<view v-else class="flex row" @click="onClick(item)">
<view class="flex label">
<image class="icon" :src="item.icon" mode="scaleToFill"></image>
<view>{{ item.label }}</view>
</view>
<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
</view>
<!-- 用户菜单 -->
<template v-if="isLogin">
<view class="card">
<view v-for="item in list1" :key="item.id">
<template v-if="item.key === 'service'">
<button plain class="flex btn-service" open-type="contact">
<view class="flex row">
<view class="flex label">
<image class="icon" :src="item.icon" mode="scaleToFill"></image>
<view>{{ item.label }}</view>
</view>
<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
</view>
</button>
</template>
<view v-else class="flex row" @click="onClick(item)">
<view class="flex label">
<image class="icon" :src="item.icon" mode="scaleToFill"></image>
<view>{{ item.label }}</view>
</view>
<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
</view>
</view>
</view> </view>
</view>
<view class="card">
<view v-for="item in list2" :key="item.id">
<view class="flex row" @click="onClick(item)">
<view class="flex label">
<image class="icon" :src="item.icon" mode="scaleToFill"></image>
<view>{{ item.label }}</view>
</view>
<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
</view>
<view class="card">
<view v-for="item in list2" :key="item.id">
<view class="flex row" @click="onClick(item)">
<view class="flex label">
<image class="icon" :src="item.icon" mode="scaleToFill"></image>
<view>{{ item.label }}</view>
</view>
<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
</view>
</view>
</view> </view>
</view>
</template>
<!-- 用户登陆 -->
<template v-else>
<view class="login">
<button class="btn" @click="$utils.toLogin">立即登录</button>
<view class="tips">暂未登录 请先登录</view>
</view>
</template>
</view> </view>
@ -104,6 +134,9 @@
}, },
computed: { computed: {
...mapState(['userInfo']), ...mapState(['userInfo']),
isLogin() {
return this.userInfo && this.userInfo.id
}
}, },
methods: { methods: {
onClick(target) { onClick(target) {
@ -176,6 +209,12 @@
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
&.is-default {
width: 108rpx;
height: 108rpx;
border: none;
}
&-img { &-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -201,6 +240,14 @@
line-height: 1.5; line-height: 1.5;
color: #F4F4F4; color: #F4F4F4;
} }
&-tips {
font-family: PingFang SC;
font-weight: 400;
font-size: 36rpx;
line-height: 1.2;
color: #FFFFFF;
}
} }
} }
@ -238,4 +285,30 @@
border: none; border: none;
padding: 0; padding: 0;
} }
.login {
margin-top: 307rpx;
padding: 0 128rpx;
.btn {
padding: 16rpx 0;
font-family: PingFang SC;
font-weight: 500;
font-size: 36rpx;
line-height: 1.4;
color: #FFFFFF;
background-image: linear-gradient(to right, #4B348F, #845CFA);
border-radius: 41rpx;
}
.tips {
margin-top: 16rpx;
text-align: center;
font-family: PingFang SC;
font-weight: 400;
font-size: 26rpx;
line-height: 1.4;
color: #A3A3A3;
}
}
</style> </style>

+ 47
- 35
pages_order/center/reportCard.vue View File

@ -2,49 +2,53 @@
<view class="card"> <view class="card">
<view class="flex header"> <view class="flex header">
<view class="title">体检报告</view> <view class="title">体检报告</view>
<button class="btn" @click="$utils.navigateTo('/pages_order/checkup/checkupRecords')">体检入口</button>
<template v-if="isLogin">
<button class="btn" @click="$utils.navigateTo('/pages_order/checkup/checkupRecords')">体检入口</button>
</template>
</view> </view>
<view class="flex cols"> <view class="flex cols">
<view class="flex flex-column col score">
<view class="flex">
<view class="score-value">{{ data.BMI || '--' }}</view>
<view v-if="data.BMIchange < 0" class="flex change">
<text>{{ data.BMIchange }}</text>
<image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
<template v-if="isLogin">
<view class="flex flex-column col score">
<view class="flex">
<view class="score-value">{{ data.BMI || '--' }}</view>
<view v-if="data.BMIchange < 0" class="flex change">
<text>{{ data.BMIchange }}</text>
<image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
</view>
<view v-else-if="data.BMIchange > 0" class="flex change rise">
<text>{{ data.BMIchange }}</text>
<image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
</view>
</view> </view>
<view v-else-if="data.BMIchange > 0" class="flex change rise">
<text>{{ data.BMIchange }}</text>
<image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
<view class="flex">
<view class="label">BMI</view>
<view class="tag">
{{ data.BMItag || '-' }}
</view>
</view> </view>
</view> </view>
<view class="flex">
<view class="label">BMI</view>
<view class="tag">
{{ data.BMItag || '-' }}
<view class="divider"></view>
<view class="flex flex-column col score">
<view class="flex">
<view class="score-value">{{ data.fat || '--' }}</view>
<view v-if="data.fatChange < 0" class="flex change">
<text>{{ data.fatChange }}</text>
<image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
</view>
<view v-else-if="data.fatChange > 0" class="flex change rise">
<text>{{ data.fatChange }}</text>
<image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
</view>
</view> </view>
</view>
</view>
<view class="divider"></view>
<view class="flex flex-column col score">
<view class="flex">
<view class="score-value">{{ data.fat || '--' }}</view>
<view v-if="data.fatChange < 0" class="flex change">
<text>{{ data.fatChange }}</text>
<image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
</view>
<view v-else-if="data.fatChange > 0" class="flex change rise">
<text>{{ data.fatChange }}</text>
<image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
<view class="flex">
<view class="label">脂肪</view>
<view class="tag">
{{ data.fatTag || '-' }}
</view>
</view> </view>
</view> </view>
<view class="flex">
<view class="label">脂肪</view>
<view class="tag">
{{ data.fatTag || '-' }}
</view>
</view>
</view>
<view class="divider"></view>
<view class="divider"></view>
</template>
<view class="flex flex-column col"> <view class="flex flex-column col">
<view class="label">解锁更多</view> <view class="label">解锁更多</view>
<view class="label">身体数据</view> <view class="label">身体数据</view>
@ -54,6 +58,8 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex'
export default { export default {
data() { data() {
return { return {
@ -67,6 +73,12 @@
}, },
} }
}, },
computed: {
...mapState(['userInfo']),
isLogin() {
return this.userInfo && this.userInfo.id
}
},
} }
</script> </script>


BIN
pages_order/static/center/avatar-default.png View File

Before After
Width: 156  |  Height: 156  |  Size: 7.8 KiB

Write Preview
Loading…
Cancel
Save