358 lines
7.5 KiB
Vue
358 lines
7.5 KiB
Vue
<template>
|
||
<view class="personalCenter">
|
||
<view class="banner">
|
||
<view class="people">
|
||
<image src="https://weiapi.youbeiw.top/images/customizate/head.png" mode="widthFix" class="head">
|
||
</image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="p1" @click="changeBirthday">
|
||
生日：2024-07-13
|
||
<image src="@/static/editIcon.png" mode="widthFix" class="editIcon"></image>
|
||
</view>
|
||
<view class="p1">欢迎您 小李</view>
|
||
</view>
|
||
</view>
|
||
<view class="main main1">
|
||
<view class="title">我的服务</view>
|
||
<view class="list">
|
||
<view class="item">
|
||
<image src="@/static/person_icon1.png" mode="widthFix" class="icon"></image>
|
||
<view class="wz">我的信息</view>
|
||
</view>
|
||
<view class="item">
|
||
<image src="@/static/person_icon2.png" mode="widthFix" class="icon"></image>
|
||
<view class="wz">在线客服</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="main main2">
|
||
<view class="title">我的报告</view>
|
||
<view class="list">
|
||
<view class="item">
|
||
<view class="left">
|
||
<view class="tit">恋爱语言测试</view>
|
||
<view class="time">
|
||
<image src="@/static/time.png" mode="widthFix" class="icon"></image>
|
||
<view class="tips">2024-06-23 22：18：17</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn">查看报告</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="left">
|
||
<view class="tit">心理防御测评</view>
|
||
<view class="time">
|
||
<image src="@/static/time.png" mode="widthFix" class="icon"></image>
|
||
<view class="tips">2024-06-23 22：18：17</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn">查看报告</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 编辑基本信息 -->
|
||
<uni-popup ref="alertDialog" type="dialog">
|
||
<view class="form">
|
||
<view class="title">编辑个人信息</view>
|
||
<form class="info" @submit="formSubmit" @reset="formReset">
|
||
<view class="uni-form-item uni-column">
|
||
<view class="label">姓名</view>
|
||
<input class="uni-input" :value="form.name" placeholder="请输入姓名" />
|
||
</view>
|
||
<view class="uni-form-item uni-column">
|
||
<view class="label">性别</view>
|
||
<radio-group @change="radioChange">
|
||
<label>
|
||
<radio value="0" /><text>男</text>
|
||
</label>
|
||
<label>
|
||
<radio value="1" /><text>女</text>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
<view class="uni-form-item uni-column">
|
||
<view class="label">生日</view>
|
||
<picker style="width: 280rpx;" mode="date" :value="form.birthday" @change="bindDateChange">
|
||
<view class="uni-input">{{form.birthday}}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="uni-btn-v">
|
||
<button form-type="submit">提交</button>
|
||
<button type="default" form-type="reset" class="reset">关闭</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isMask: false,
|
||
form: {
|
||
sex: null,
|
||
name: null,
|
||
birthday: null
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
changeBirthday() {
|
||
this.$refs.alertDialog.open();
|
||
},
|
||
bindDateChange(e) {
|
||
this.form.birthday = e.detail.value
|
||
},
|
||
radioChange(evt) {
|
||
this.form.sex = evt.detail.value
|
||
},
|
||
formSubmit() {
|
||
//定义表单规则
|
||
uni.showToast({
|
||
title: "提交成功",
|
||
icon: "none"
|
||
});
|
||
this.$refs.alertDialog.close();
|
||
console.log('form',this.form)
|
||
},
|
||
formReset() {
|
||
this.$refs.alertDialog.close();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.personalCenter {
|
||
min-height: 100vh;
|
||
background-color: #e1e1e0;
|
||
|
||
.banner {
|
||
width: 100%;
|
||
background-color: #C13636;
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 200rpx;
|
||
background-image: url("https://weiapi.youbeiw.top/images/customizate/head_bg.png");
|
||
background-size: 252rpx auto;
|
||
background-repeat: no-repeat;
|
||
background-position: top right;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0px 30rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
|
||
.people {
|
||
width: 94rpx;
|
||
height: 94rpx;
|
||
background: #FFFBF4;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.head {
|
||
width: 50rpx;
|
||
height: auto;
|
||
}
|
||
|
||
.text {
|
||
margin-left: 40rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
|
||
.p1 {
|
||
margin: 5rpx 0px;
|
||
}
|
||
|
||
.editIcon {
|
||
width: 25rpx;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
background-color: #ffffff;
|
||
|
||
.title {
|
||
padding: 10px 30rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #e1e1e0;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.main1 {
|
||
.list {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
|
||
.item {
|
||
margin-right: 80rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.icon {
|
||
width: 50rpx;
|
||
height: auto;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main2 {
|
||
margin-top: 30rpx;
|
||
|
||
.title {
|
||
background-image: linear-gradient(to right, #C13636, #E65A5A);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.list {
|
||
padding: 20rpx 30rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.item {
|
||
width: 100%;
|
||
background-color: #f1f1ee;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
.tit {
|
||
font-size: 26rpx;
|
||
margin-bottom: 10rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
width: 25rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.tips {
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
background-color: #C13636;
|
||
color: #ffffff;
|
||
font-size: 24rpx;
|
||
padding: 5rpx 25rpx;
|
||
border-radius: 30rpx;
|
||
|
||
}
|
||
}
|
||
|
||
.form {
|
||
width: 550rpx;
|
||
|
||
.title {
|
||
width: 100%;
|
||
border-bottom: 1px solid #f1f1ee;
|
||
padding: 15rpx 0px;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
background-color: #C13636;
|
||
}
|
||
|
||
.info {
|
||
// padding: 20rpx 0px;
|
||
font-size: 25rpx;
|
||
|
||
.uni-form-item {
|
||
width: 100%;
|
||
padding: 0rpx 20rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin: 30rpx 0px;
|
||
}
|
||
|
||
.label {
|
||
width: 80rpx;
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
/deep/.uni-input {
|
||
border-bottom: 1px solid #f1f1ee !important;
|
||
}
|
||
|
||
/deep/.input-placeholder,
|
||
/deep/.uni-input-input {
|
||
font-size: 26rpx !important;
|
||
}
|
||
|
||
/deep/.uni-label-pointer {
|
||
margin-right: 30rpx !important;
|
||
}
|
||
|
||
/deep/.uni-radio-input-checked {
|
||
background-color: #C13636 !important;
|
||
border-color: #C13636 !important;
|
||
}
|
||
|
||
/deep/.uni-radio-input {
|
||
width: 30rpx !important;
|
||
height: 30rpx !important;
|
||
}
|
||
}
|
||
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.uni-btn-v {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-bottom: 30rpx;
|
||
padding-top: 10rpx;
|
||
|
||
/deep/uni-button {
|
||
width: 150rpx !important;
|
||
height: 60rpx !important;
|
||
line-height: 60rpx !important;
|
||
text-align: center !important;
|
||
background-color: #C13636 !important;
|
||
color: #fff !important;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
/deep/uni-button.reset {
|
||
background-color: #e1e1e0 !important;
|
||
color: #666 !important;
|
||
}
|
||
}
|
||
}
|
||
</style> |