Skip to content

飞
飞鹤小程序
Commit 38da9894 authored by tao.huang's avatar tao.huang
Browse files
Options

feat: my页面

parent ce34c007
Hide whitespace changes
Inline Side-by-side
Showing with 144 additions and 171 deletions
App.vue
View file @ 38da9894
......@@ -12,7 +12,7 @@ export default {
};
</script>
<style lang="less">
<style lang="scss">
/*每个页面公共css */
::-webkit-scrollbar {
display: none;
......@@ -20,4 +20,16 @@ export default {
height: 0;
color: transparent;
}
::-ms-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
::-moz-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
</style>
pages/index/index.vue
View file @ 38da9894
......@@ -18,7 +18,7 @@
export default {
data() {
return {
curTabIndex: 0,
curTabIndex: 3,
};
},
onLoad() {},
......
views/My.vue
View file @ 38da9894
......@@ -13,25 +13,28 @@
<!-- 用户信息区域 -->
<view class="user-info">
<view class="user-header">
<view class="avatar-container">
<image
class="avatar"
:src="userInfo.avatar || '/static/my/avatar.png'"
mode="aspectFill"
/>
</view>
<image
class="avatar"
:src="userInfo.avatar || '/static/my/avatar.png'"
mode="aspectFill"
class="avatar-modify"
src="/static/my/icon_modify.png"
mode="aspectFit"
lazy-load="false"
/>
<view class="user-detail">
<text class="nickname">{{ userInfo.nickname || "未登录" }}</text>
<view class="user-level">
<image
class="level-icon"
src="/static/my/level.png"
mode="aspectFit"
/>
<text class="level-text">Lv.{{ userInfo.level || 1 }}</text>
<text class="nickname">{{ userInfo.nickname || "暂无昵称" }}</text>
<!-- 积分账户 -->
<view class="integral-account">
<text class="integral-account-text"> 积分账户： </text>
<text class="integral-account-value"> --- </text>
</view>
</view>
<view class="edit-btn" @tap="handleEditProfile">
<image src="/static/my/edit.png" mode="aspectFit" />
</view>
</view>
<!-- user desc -->
<view class="user-desc">
......@@ -40,15 +43,19 @@
</view>
<!-- 工具 -->
<view class="tool-container">
<text class="tool-title" selectable="false" space="false" decode="false">
工具
</text>
<view class="tool-list">
<view class="tool-item" v-for="item in toolList" :key="item.title">
<image class="tool-icon" :src="item.icon" mode="aspectFit" />
<text class="tool-title"> 工具 </text>
<view class="tool-list">
<view class="tool-item" v-for="item in toolList" :key="item.title">
<image class="tool-icon" :src="item.icon" mode="aspectFit" />
</view>
</view>
</view>
</view>
<!-- 协议 -->
<view class="protocol-container">
<image src="/static/my/protocol.png" mode="aspectFit" />
<view class="hot-member" @click="handleHot" data-type="member"></view>
<view class="hot-privacy" @click="handleHot" data-type="privacy"></view>
</view>
</view>
</template>
......@@ -82,8 +89,6 @@ const toolList = ref([
title: "育儿百科",
url: "",
},
]);
// 用户信息
......@@ -105,6 +110,18 @@ const orderCounts = ref({
after: 0,
});
const handleHot = (e) => {
const type = e.currentTarget.dataset.type;
console.log("handleHot", type);
if (type === "member") {
// navigateTo("/pages/my/member");
} else if (type === "privacy") {
// navigateTo("/pages/my/privacy");
}
};
// 页面跳转
const navigateTo = (url) => {
uni.navigateTo({
......@@ -195,7 +212,7 @@ defineExpose({});
</script>
<style lang="less" scoped>
@import '@/common.less';
@import "@/common.less";
.my-container {
min-height: 100vh;
background-color: #f5f5f5;
......@@ -219,7 +236,6 @@ defineExpose({});
.user-info {
background-color: @color-white-soft;
padding: 30rpx;
width: 686rpx;
height: 343rpx;
......@@ -233,16 +249,45 @@ defineExpose({});
display: flex;
align-items: center;
margin-bottom: 40rpx;
position: relative;
.avatar-container {
width: 100rpx;
height: 100rpx;
background-color: #f6f6f6;
overflow: hidden;
border-radius: 50%;
position: absolute;
left: 32rpx;
top: 32rpx;
z-index: 1;
.avatar {
width: 100%;
height: 100%;
display: block;
}
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
margin-right: 20rpx;
.avatar-modify {
width: 64rpx;
height: 64rpx;
position: absolute;
left: 80rpx;
top: 84rpx;
z-index: 1;
display: block;
}
.user-detail {
flex: 1;
display: flex;
flex-direction: column;
position: absolute;
left: 148rpx;
top: 48rpx;
z-index: 1;
.nickname {
font-size: 32rpx;
......@@ -251,19 +296,12 @@ defineExpose({});
margin-bottom: 10rpx;
}
.user-level {
.integral-account {
display: flex;
align-items: center;
.level-icon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.level-text {
font-size: 24rpx;
color: #666;
font-size: 24rpx;
color: #1d1e25;
.integral-account-text {
color: #1d1e25;
}
}
}
......@@ -315,143 +353,66 @@ defineExpose({});
.tool-container {
margin: 0 auto;
margin-top: 48rpx;
width: 686rpx;
.tool-list {
display: flex;
flex-wrap: wrap;
margin: 32rpx 0;
}
.tool-title {
font-size: 32rpx;
font-weight: 500;
color: @color-black-deep;
margin-left: 21rpx;
}
.tool-item {
width: 152rpx;
height: 152rpx;
margin-left: 26rpx;
margin-bottom: 24rpx;
.tool-icon {
width: 100%;
height: 100%;
display: block;
};
&:nth-child(4n+1) {
margin-left: 0;
}
}
}
.order-section {
background-color: #fff;
padding: 30rpx;
margin-bottom: 20rpx;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.more {
display: flex;
align-items: center;
text {
font-size: 24rpx;
color: #666;
margin-right: 8rpx;
}
image {
width: 32rpx;
height: 32rpx;
}
}
width: 686rpx;
.tool-title {
font-size: 32rpx;
font-weight: 500;
color: @color-black-deep;
margin-left: 21rpx;
}
.order-types {
.tool-list {
display: flex;
justify-content: space-between;
.type-item {
display: flex;
flex-direction: column;
align-items: center;
image {
width: 48rpx;
height: 48rpx;
margin-bottom: 12rpx;
flex-wrap: wrap;
margin-top: 20rpx;
.tool-item {
width: 152rpx;
height: 152rpx;
margin-left: 26rpx;
margin-bottom: 24rpx;
.tool-icon {
width: 100%;
height: 100%;
display: block;
}
text {
font-size: 24rpx;
color: #666;
&:nth-child(4n + 1) {
margin-left: 0;
}
}
}
}
.function-list {
background-color: #fff;
padding: 0 30rpx;
.function-item {
display: flex;
align-items: center;
height: 100rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.protocol-container {
width: 360rpx;
height: 25rpx;
margin: 8rpx auto 130rpx;
position: relative;
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
display: block;
}
&.arrow {
width: 32rpx;
height: 32rpx;
margin-right: 0;
margin-left: auto;
}
}
.hot-member {
width: 142rpx;
height: 50rpx;
display: block;
position: absolute;
left: 53rpx;
top: -15rpx;
}
text {
font-size: 28rpx;
color: #333;
}
.hot-privacy {
width: 147rpx;
height: 50rpx;
display: block;
position: absolute;
left: 210rpx;
top: -15rpx;
}
}
}
.badge {
position: absolute;
top: -8rpx;
right: -8rpx;
background-color: #ff4d4f;
color: #fff;
font-size: 20rpx;
padding: 2rpx 8rpx;
border-radius: 16rpx;
min-width: 32rpx;
text-align: center;
}
.type-item {
position: relative;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment