添加页面代码
This commit is contained in:
kron
201
src/pages/profile.vue
Normal file
201
src/pages/profile.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import Avatar from "@/components/Avatar.vue";
|
||||
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
const store = useStore();
|
||||
const { user } = storeToRefs(store);
|
||||
|
||||
const editAvatar = ref(false);
|
||||
|
||||
const toEditPage = (type) => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/edit-profile?type=" + type,
|
||||
});
|
||||
};
|
||||
|
||||
const toSignInPage = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/signin",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<image :src="user.avatar" mode="widthFix" />
|
||||
<button hover-class="none" @click="editAvatar = true">
|
||||
<image src="../static/pen-yellow.png" mode="widthFix" />
|
||||
</button>
|
||||
</view>
|
||||
<view class="body">
|
||||
<view>
|
||||
<button hover-class="none" @click="toEditPage('Name')">
|
||||
<image src="../static/user-yellow.png" mode="widthFix" />
|
||||
<text>Name</text>
|
||||
<image src="../static/back-grey.png" mode="widthFix" />
|
||||
</button>
|
||||
<button hover-class="none" @click="toEditPage('Email')">
|
||||
<image src="../static/email-yellow.png" mode="widthFix" />
|
||||
<text>Email</text>
|
||||
<image src="../static/back-grey.png" mode="widthFix" />
|
||||
</button>
|
||||
<button hover-class="none" @click="toEditPage('Password')">
|
||||
<image src="../static/password-yellow.png" mode="widthFix" />
|
||||
<text>Password</text>
|
||||
<image src="../static/back-grey.png" mode="widthFix" />
|
||||
</button>
|
||||
</view>
|
||||
<button hover-class="none" @click="toSignInPage">Log out</button>
|
||||
<view>
|
||||
<text>Have questions? Please contact us through email: </text>
|
||||
<text>shelingxingqiu@163.com</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="edit-avatar"
|
||||
:style="{ height: editAvatar ? '100vh' : '0' }"
|
||||
@click="editAvatar = false"
|
||||
>
|
||||
<image :src="user.avatar" mode="widthFix" />
|
||||
<view>
|
||||
<button hover-class="none">
|
||||
<text>Take a photo</text>
|
||||
<image src="../static/back-grey.png" mode="widthFix" />
|
||||
</button>
|
||||
<button hover-class="none">
|
||||
<text>Choose photo</text>
|
||||
<image src="../static/back-grey.png" mode="widthFix" />
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
margin-top: -120rpx;
|
||||
}
|
||||
.header > image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #fff;
|
||||
}
|
||||
.header > button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.header > button > image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.body {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
.body > view:first-child {
|
||||
background-color: #fff;
|
||||
border-radius: 25px;
|
||||
padding: 0 20px;
|
||||
width: calc(100% - 80rpx);
|
||||
}
|
||||
.body > view:first-child > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.body > view:first-child > button:not(:last-child) {
|
||||
border-bottom: 1rpx solid #e3e3e3;
|
||||
}
|
||||
.body > view:first-child > button > image:first-child {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.body > view:first-child > button > text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
text-align: left;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.body > view:first-child > button > image:last-child {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
.body > button {
|
||||
margin-top: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #287fff;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.body > view:last-child {
|
||||
margin-top: auto;
|
||||
padding-bottom: 25rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.body > view:last-child > text:last-child {
|
||||
color: #287fff;
|
||||
}
|
||||
.edit-avatar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.edit-avatar > image {
|
||||
width: 85vw;
|
||||
height: 85vw;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.edit-avatar > view {
|
||||
border-radius: 25rpx;
|
||||
margin-top: 100rpx;
|
||||
width: calc(100% - 150rpx);
|
||||
padding: 0 40rpx;
|
||||
background: #404040;
|
||||
}
|
||||
.edit-avatar > view > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
.edit-avatar > view > button:not(:last-child) {
|
||||
border-bottom: 1rpx solid #fff3;
|
||||
border-radius: 0;
|
||||
}
|
||||
.edit-avatar > view > button > image {
|
||||
width: 28rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user