Skip to content

C
csssp-xcx-h5
提交 d9a9ddcb authored 作者: 劳广强's avatar 劳广强
浏览文件
操作

feat: 完成 我的 页面

上级 f50352de
隐藏空白字符变更
内嵌 并排
正在显示 包含 300 行增加 和 6 行删除
App.vue
浏览文件 @ d9a9ddcb
<script>
export default {
onLaunch: function () {
globalData: {},
onLaunch() {
console.log('App Launch');
},
onShow: function () {
onShow() {
console.log('App Show');
},
onHide: function () {
onHide() {
console.log('App Hide');
},
};
......
pages.json
浏览文件 @ d9a9ddcb
......@@ -35,6 +35,13 @@
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/mine-picture/index",
"style": {
"navigationBarTitleText": "我的随手拍",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
......
pages/mine/index.scss
浏览文件 @ d9a9ddcb
page {
background: #f6f6f6;
}
.mine {
position: relative;
}
.bg {
width: 750rpx;
position: absolute;
height: 240rpx;
background: #8171fc;
}
.content {
width: 100%;
position: absolute;
top: 94rpx;
}
.content_detail {
padding: 0 30rpx 84rpx 30rpx;
}
.head_box {
padding: 88rpx 30rpx 34rpx 30rpx;
border-radius: 16rpx;
background: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.head {
background-color: rgba(255, 255, 255, 0.4);
border-radius: 100rpx;
display: flex;
justify-content: center;
align-items: center;
width: 144rpx;
height: 144rpx;
position: absolute;
top: -70rpx;
z-index: 10;
}
.head_img {
width: 92%;
height: 92%;
border-radius: 100rpx;
position: absolute;
z-index: 20;
}
.name {
font-size: 32rpx;
font-weight: 400;
color: #000000;
}
.integral_msg {
width: 100%;
/* margin-top: 62rpx; */
margin-top: 48rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.msg_left {
display: flex;
justify-content: flex-start;
align-items: center;
}
.integral_icon {
width: 48rpx;
height: 48rpx;
}
.number {
font-size: 52rpx;
font-weight: 700;
color: #000000;
margin-left: 16rpx;
}
.msg_right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.withdrawal {
width: 94rpx;
height: 54rpx;
border: 2rpx solid #8171fc;
border-radius: 28rpx;
font-size: 24rpx;
font-weight: 400;
color: #8171fc;
display: flex;
justify-content: center;
align-items: center;
margin-right: 22rpx;
}
.arrow_right {
width: 16rpx;
height: 26rpx;
}
/* 我的任务 */
.my_task {
padding-bottom: 30rpx;
margin-top: 22rpx;
background: #ffffff;
border-radius: 16rpx;
}
.my_item {
padding: 36rpx 26rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 16rpx;
box-shadow: 0rpx 2rpx 0rpx 0rpx #f6f6f6;
}
.my_item_left {
display: flex;
justify-content: flex-start;
align-items: center;
}
.task_icon {
width: 40rpx;
height: 40rpx;
}
.item_name {
font-size: 28rpx;
font-weight: bold;
color: #000000;
margin-left: 28rpx;
}
.send_mask {
width: 84rpx;
height: 36rpx;
background: linear-gradient(270deg, #8171fc, #a471fc);
border-radius: 18rpx 18rpx 18rpx 0rpx;
font-size: 20rpx;
font-weight: 400;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
margin-left: 16rpx;
}
.my_item_list {
display: flex;
margin-top: 18rpx;
}
.list_project {
padding: 0 38rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.project_icon {
width: 96rpx;
height: 110rpx;
}
.project_name {
font-size: 28rpx;
font-weight: 400;
color: #000000;
}
.my_item_box {
margin-top: 28rpx;
background: #ffffff;
padding: 0 26rpx;
border-radius: 16rpx;
}
.my_items {
padding: 36rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #f6f6f6;
}
.unauthorized_box {
/* position: absolute;
width: 100%;
height: 100%; */
margin-top: 380rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.unauthorized_tip {
font-size: 32rpx;
font-weight: 500;
color: #000000;
}
.unauthorized_btn {
width: 274rpx;
height: 92rpx;
margin-top: 124rpx;
line-height: 92rpx;
text-align: center;
background: #ffffff;
border: 2rpx solid #000000;
border-radius: 46rpx;
font-size: 28rpx;
font-weight: 500;
color: #000000;
}
pages/mine/index.vue
浏览文件 @ d9a9ddcb
<template>
<view> 我的 </view>
<view>
<view class="mine" v-if="token">
<image class="bg" src="/static/pic-wd-bg@2x.png" />
<view class="content">
<view class="content_detail">
<!-- 头像信息 -->
<view class="head_box">
<view class="head">
<image mode="aspectFill" class="head_img" :src="userDetail.avatarUrl" />
</view>
<view class="name">{{ userDetail.nickName }}</view>
<view class="integral_msg" bindtap="myIntegral">
<view class="msg_left">
<image mode="aspectFill" class="integral_icon" src="/static/icon/ic_jifen1@2x.png" />
<view class="number">{{ userDetail.integral }}</view>
</view>
<view class="msg_right">
<view class="withdrawal">提现</view>
<image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
</view>
</view>
</view>
<view class="my_item_box">
<!-- 我的随手拍 -->
<view class="my_items" bindtap="myPhoto">
<view class="my_item_left">
<image mode="aspectFill" class="task_icon" src="/static/icon/ic_wd_ssp@2x.png" />
<view class="item_name">我的随手拍</view>
</view>
<image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right1@2x.png" />
</view>
<!-- 关于我们 -->
<view class="my_items" bindtap="about">
<view class="my_item_left">
<image mode="aspectFill" class="task_icon" src="/static/icon/ic_wd_gy@2x.png" />
<view class="item_name">关于我们</view>
</view>
<image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right1@2x.png" />
</view>
<!-- 注销登录 -->
<view class="my_items" bindtap="tailor">
<view class="my_item_left">
<image mode="aspectFill" class="task_icon" src="/static/icon/ic_wd_srdz@2x.png" />
<view class="item_name">注销登录</view>
</view>
<image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right1@2x.png" />
</view>
</view>
</view>
</view>
</view>
<view class="unauthorized" v-else>
<view class="unauthorized_box" v-if="canIUseGetUserProfile">
<view class="unauthorized_tip">未授权登录</view>
<button class="unauthorized_btn" bindtap="getUserProfile">去授权</button>
</view>
<view class="unauthorized_box" v-else>
<view class="unauthorized_tip">未授权登录</view>
<button class="unauthorized_btn" bindtap="getUserProfile">去授权</button>
</view>
</view>
</view>
</template>
<script>
import { userDetail } from '@/pages/mine/mock';
export default {
data() {
return {};
return {
token: null,
canIUseGetUserProfile: false,
userDetail,
};
},
methods: {},
};
</script>
<style scoped></style>
<style scoped lang="scss">
@import 'index.scss';
</style>
pages/mine/mock.js 0 → 100644
浏览文件 @ d9a9ddcb
export const userDetail = {
object_name: 'wxuser',
nickName: '\u5f3a',
openId: 'ofKlR5aXjsvCXrdG1U1DAyl1f5tU',
object_type: 'default',
avatarUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/KbsMOauZmxL64AVsAUp51XPacVMDQCtBd8uMzQyBKzrFTvKicicWJRPNTKXNgMyL9PEJGHibtGFEr8uliateTKAFAQ/132',
id: 533,
integral: 5198314,
created: '2021-05-07 10:24:27',
is_receive: true,
tag_name: '',
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论