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>
|