TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

个人中心

Browse Source
This commit is contained in:
唐明明
2022-01-05 16:06:01 +08:00
parent c810dbdb1d
commit 9bd227831c
456 changed files with 7476 additions and 51189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
pages/store/index.vue
View File

@@ -18,13 +18,14 @@
</view>
</view>
<!-- 健康产品分类 -->
<!-- <view class="">
<view class="">（icon）10斤挑战</view>
<view class="">（icon）控卡主食</view>
<view class="">（icon）轻卡小食</view>
<view class="">（icon）肠胃呵护</view>
<view class="">（icon）燃力嗨吃</view>
</view> -->
<u-scroll-list class="classify-box" indicatorColor="#ddd" indicatorActiveColor="#34CE98">
<view v-for="(item, index) in goodTabs" :key="index" class="classify-item">
<view class="classify-item-nav">
<image class="classify-item-cover" :src="item.cover"></image>
<view class="classify-item-title">{{item.name}}</view>
</view>
</view>
</u-scroll-list>
<!-- 每日上新 -->
<view class="new-box">
<view class="title">上新精选</view>
@@ -38,17 +39,30 @@
</view>
</view>
</view>
<!-- 卡片区 -->
<!-- <view class="">
<view class="">（卡片）宝贝爱吃</view>
<view class="">（卡片）轻卡小食</view>
</view> -->
<!-- 推荐品类 -->
<view class="card-box">
<view class="card-box-item">
<view class="card-title">宝贝爱吃</view>
<view class="card-subtitle">精选食谱 三餐美味</view>
<image class="card-cover" src="@/static/store/store_icon_00.png" mode="aspectFill"></image>
</view>
<view class="card-box-item">
<view class="card-title">轻卡小食</view>
<view class="card-subtitle">火热商品 一目了然</view>
<image class="card-cover" src="@/static/store/store_icon_01.png" mode="aspectFill"></image>
</view>
</view>
<!-- goods -->
<oct-goods
:lists="goodsArr"
color="#e6576b"
@onGoods="onGoods"
/>
<view class="goods-box">
<!-- <u-divider text="猜你喜欢"></u-divider> -->
<!-- <view class="title">猜你喜欢</view> -->
<oct-goods
:lists="goodsArr"
color="#e6576b"
@onGoods="onGoods"
/>
<u-loadmore status="loading" />
</view>
</view>
</template>
@@ -57,6 +71,15 @@
data() {
return {
swiperCount: 0,
goodTabs: [
{ name: "减脂小白", cover: "https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png"},
{ name: "10斤挑战", cover: "https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png"},
{ name: "控卡主食", cover: "https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png"},
{ name: "轻卡小食", cover: "https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png"},
{ name: "肠胃呵护", cover: "https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png"},
{ name: "燃力嗨吃", cover: "https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png"},
{ name: "10斤挑战", cover: "https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png"},
],
newGood : [
{
cover : "https://yanxuan-item.nosdn.127.net/0aabfb9974965f4983fcc71344022dc7.png",
@@ -156,8 +179,89 @@
.content{
background: $window-color;
}
// 商城列表
.goods-box{
padding-bottom: $padding;
&>.title{
padding: $padding $padding 0;
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
margin-bottom: -$margin/2;
}
}
// 商城分类
.classify-box{
.classify-item{
padding: 0 10rpx;
&:last-child{
padding-right: $padding;
}
&:first-child{
padding-left: $padding;
}
&-nav{
text-align: center;
width: 138rpx;
}
&-cover{
width: 86rpx;
height: 86rpx;
border-radius: 50%;
vertical-align: top;
margin-bottom: $margin/2;
}
&-title{
line-height: 40rpx;
font-size: $title-size-sm;
color: $text-color;
}
}
}
// 卡片推荐
.card-box{
padding: $padding $padding - 10;
padding-bottom: 0;
display: flex;
flex-wrap: wrap;
&-item{
margin: 0 10rpx;
width: calc(50% - 20rpx);
padding: $padding;
border-radius: $radius;
box-sizing: border-box;
position: relative;
.card-title{
font-size: $title-size-lg;
font-weight: bold;
color: $text-color;
line-height: 40rpx;
}
.card-subtitle{
font-size: 20rpx;
color: $text-gray;
line-height: 40rpx;
}
.card-cover{
width: 80rpx;
height: 80rpx;
position: absolute;
right: $margin;
top: $margin;
}
}
&-item:nth-child(1){
background: #fef2ae;
}
&-item:nth-child(2){
background: #c9ead9;
}
}
// 上新精选
.new-box{
padding: 0 $padding;
padding: 0 $margin;
border-radius: $radius;
// padding: $padding - 10;
.title{
font-size: $title-size-lg;
color: $text-color;
@@ -201,9 +305,6 @@
}
}
}
//
//
//
// swiper
.swiper{
background: linear-gradient(#FFF, #F3F6FB);

313
pages/user/index.vue
View File

@@ -1,9 +1,106 @@
<template>
<view class="">
<view class="user-demo">
<view class="content">
<!-- <view class="user-demo">
<view @click="$Router.push({name: 'Address'})">地址管理</view>
<view @click="$Router.push({name: 'Order'})">订单管理</view>
<view @click="$Router.push({name: 'Auth'})">登录</view>
</view> -->
<!-- 用户信息 -->
<view class="info-box">
<image src="@/static/user/user_back.png" mode="aspectFill"></image>
<view class="user-flex">
<image class="cover" src="@/static/dev/cover.jpg" mode="aspectFill"></image>
<view class="user-content">
<view class="name">唐明明</view>
<view class="tabs">
<view class="tabs-item"><image src="@/static/user/icon_07.png"></image>会员</view>
</view>
</view>
</view>
</view>
<!-- 会员卡 -->
<view class="vip-card">
<view class="title">
<image src="@/static/user/icon_06.png" mode="widthFix"></image>
ZH会员
</view>
<view class="subtitle">
<u-notice-bar
:text="cardText"
icon=""
bgColor=""
duration="3000"
color="#fcc692"
direction="column"
></u-notice-bar>
</view>
<view class="btn">开通</view>
</view>
<!-- 健康数据 -->
<view class="health-flex">
<view class="health-flex-item">
<view class="title">
体脂率
<image class="icon" src="@/static/user/icon_04.png" mode="widthFix"></image>
</view>
<view class="num">
22<text>%</text>
</view>
<view class="hith">处于正常范围</view>
</view>
<view class="health-flex-item">
<view class="title">
体重
<image class="icon" src="@/static/user/icon_05.png" mode="widthFix"></image>
</view>
<view class="num">
78.0<text>KG</text>
</view>
<view class="hith">你上周减少1.2kg</view>
</view>
</view>
<!-- 订单 -->
<view class="order-box">
<view class="order-box-item" @click="$Router.push({name: 'Order'})">
<image class="icon" src="@/static/user/order_icon_00.png" mode="widthFix"></image>
<view class="title">全部订单</view>
</view>
<view class="order-box-item" @click="$Router.push({name: 'Order'})">
<image class="icon" src="@/static/user/order_icon_01.png" mode="widthFix"></image>
<view class="title">待付款</view>
</view>
<view class="order-box-item" @click="$Router.push({name: 'Order'})">
<image class="icon" src="@/static/user/order_icon_02.png" mode="widthFix"></image>
<view class="title">待发货</view>
</view>
<view class="order-box-item" @click="$Router.push({name: 'Order'})">
<image class="icon" src="@/static/user/order_icon_03.png" mode="widthFix"></image>
<view class="title">待收货</view>
</view>
<view class="order-box-item" @click="$Router.push({name: 'Order'})">
<image class="icon" src="@/static/user/order_icon_04.png" mode="widthFix"></image>
<view class="title">已完成</view>
</view>
</view>
<!-- 功能块 -->
<view class="btns-box">
<view class="btns-box-item">
<image class="icon" src="@/static/user/icon_00.png" mode="widthFix"></image>
健康档案
<uni-icons class="forward" type="forward" color="#999"></uni-icons>
</view>
<view class="btns-box-item" @click="$Router.push({name: 'Address'})">
<image class="icon" src="@/static/user/icon_02.png" mode="widthFix"></image>
地址管理
<uni-icons class="forward" type="forward" color="#999"></uni-icons>
</view>
</view>
<view class="btns-box">
<view class="btns-box-item">
<image class="icon" src="@/static/user/icon_03.png" mode="widthFix"></image>
设置
<uni-icons class="forward" type="forward" color="#999"></uni-icons>
</view>
</view>
</view>
</template>
@@ -12,29 +109,215 @@
export default {
data() {
return {
cardText: ['老用户专属特权', '老用户专属健康会员']
};
},
mounted() {
console.log(this.$store.state)
uni.setNavigationBarTitle({
title: "唐明明"
})
}
}
</script>
<style lang="scss">
.user-demo{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 100vh;
view{
background: #2C405A;
color: white;
width: 50vw;
<style lang="scss" scoped>
.content{
background: $window-color;
min-height: 100vh;
}
// 用户信息
.info-box{
position: relative;
background: linear-gradient(to right, #34ce98, #22aa98);
color: white;
@extend .ios-top;
&>image{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.user-flex{
position: relative;
padding: $padding*2 $padding ($padding*2 + 60);
height: 108rpx;
.cover{
position: absolute;
width: 108rpx;
height: 108rpx;
border-radius: 50%;
border:solid 6rpx white;
box-sizing: border-box;
}
.user-content{
padding-left: 128rpx;
height: 108rpx;
display: flex;
flex-direction: column;
justify-content: center;
.name{
line-height: 40rpx;
font-weight: bold;
font-size: $title-size + 4;
}
.tabs{
padding-top: 5rpx;
&-item{
background: rgba($color: #000000, $alpha: .3);
font-size: $title-size-sm - 4;
display: inline-block;
line-height: 36rpx;
padding: 0 20rpx;
border-radius: 20rpx;
image{
width: 26rpx;
height: 26rpx;
vertical-align: middle;
margin-bottom: 2rpx;
margin-right: 8rpx;
}
}
}
}
}
}
// 会员卡
.vip-card{
position: relative;
margin: -60rpx $margin $margin;
background: linear-gradient(to right bottom, #3e5364, #31364a);
border-radius: $radius;
box-sizing: border-box;
color: #fcc692;
padding: $padding ($padding + 170) $padding $padding;
.title{
font-weight: bold;
font-size: $title-size-lg;
line-height: 40rpx;
image{
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
vertical-align: middle;
margin-bottom: 4rpx;
}
}
.subtitle{
font-size: $title-size-sm;
margin-top: 10rpx;
.u-notice-bar{
padding: 0;
}
}
.btn{
position: absolute;
right: $margin;
margin-top: -30rpx;
top: 50%;
height: 60rpx;
line-height: 60rpx;
background: linear-gradient(to right, #fce3c5, #fcc590);
color: #31364a;
font-weight: bold;
width: 150rpx;
text-align: center;
font-size: $title-size-m;
border-radius: 30rpx;
}
}
// 订单信息
.order-box{
margin: $margin;
background: white;
border-radius: $radius;
display: flex;
justify-content: space-between;
&-item{
width: 25%;
padding: $padding $padding/2;
text-align: center;
.icon{
width: 48rpx;
height: 48rpx;
vertical-align: top;
}
.title{
font-size: $title-size-sm;
margin-top: $margin/3;
}
}
}
// 健康数据
.health-flex{
display: flex;
margin: $margin ($margin - 10);
&-item{
margin: 0 10rpx;
background: white;
width: calc(50% - 20rpx);
border-radius: $radius;
padding: $padding;
box-sizing: border-box;
.title{
font-size: $title-size-lg;
.icon{
width: 32rpx;
height: 32rpx;
vertical-align: middle;
margin-left: 10rpx;
margin-bottom: 2rpx;
}
}
.num{
font-weight: bold;
font-size: $title-size + 10;
padding: $padding/3 0;
text{
font-size: 70%;
padding-left: 10rpx;
}
}
.hith{
font-size: $title-size-sm;
color: $text-gray;
}
}
}
// 模块
.btns-box{
background: white;
margin: $margin;
border-radius: $radius;
&-item{
position: relative;
line-height: 90rpx;
margin: $margin 0;
padding: 0 $padding;
font-size: $title-size-lg;
&::after{
position: absolute;
height: 1rpx;
content: " ";
left: $margin;
right: $margin;
bottom: 0;
background-color: $border-color;
}
&:last-child::after{
display: none;
}
.forward{
position: absolute;
right: $margin;
}
.icon{
width: 36rpx;
height: 36rpx;
vertical-align: middle;
margin-right: $margin/2;
margin-bottom: 8rpx;
}
}
}
</style>