PixelAI-mobile/pages/mobile_web/my/child_pages/setting.vue

443 lines
11 KiB
Vue
Raw Normal View History

2024-12-29 16:09:08 +08:00
<!-- 个人信息 -->
2024-12-18 14:45:53 +08:00
<template>
<!-- #ifdef APP -->
<view class="setting" :style="{ background: `linear-gradient(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)), url(${myFileUrl+background}) no-repeat 0% 20%/ cover`,paddingTop: CustomBar+'rpx' }">
<view class="app-top" :style="{ height: CustomBar+'rpx',
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
<!-- #endif -->
<!-- #ifndef APP -->
<view class="setting" :style="{ background: `linear-gradient(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)), url(${myFileUrl+background}) no-repeat 0% 20%/ cover` }">
<!-- #endif -->
<view class="st-top">
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
<!-- #ifndef MP-WEIXIN -->
<u-icon name="arrow-left" size="40" class="back" @click="back"
:color="topLevel===0? '#60547d' : `rgba(9, 9, 9,${topLevel})`"></u-icon>
<image :src="homeFileUrl+logo"></image>
<view style="width: 75rpx;"></view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<image :src="myFileUrl+logo"></image>
<!-- #endif -->
</view>
<view class="detail-content">
<form @submit="submit">
2024-12-29 16:09:08 +08:00
<view class="dc-form">
<u-divider bgColor="#ffffff00" fontSize="35" color="#424242" borderColor="#f8f9f9">
个人资料
</u-divider>
2024-12-18 14:45:53 +08:00
2024-12-29 16:09:08 +08:00
<view class="blocks">
<view class="block_img">
<u-avatar :src="getAvatar" size="240"/>
<!-- show-sex
:sex-icon="form.gender?'woman':'man'" show-level -->
</view>
<view class="block_show">
昵称{{ form.realname || '战士不留姓名~' }}
</view>
<view class="block_show">
绑定电话{{ form.username }}
</view>
<view class="block_show">
生产日期{{ getEnrollDate }}
</view>
<!-- <view class="block_input">
<view><text>*</text>昵称</view>
<input type="text" name="realname" v-model="form.realname" placeholder="请输入您的昵称"/>
<view class="tip" v-show="tip.realname">请输入您的昵称</view>
</view> -->
<!-- <view class="block_input">
<view><text>*</text>邮箱</view>
<input type="tel" name="mail" v-model="form.mail" placeholder="请输入您的邮箱"/>
<view class="tip" v-show="tip.mail">请输入正确的邮箱</view>
</view> -->
<!-- <view class="block_input">
<view><text>*</text>性别</view>
<picker @change="bindGenderChange" :value="form.genders" :range="genderList">
<view>
<input @change="bindGenderChange" disabled type="text" name="type" :value="genderList[form.gender]" placeholder="请选择性别"/>
<u-icon class="type-icon" name="arrow-down" color="#CCCCCC" size="40"></u-icon>
</view>
</picker>
</view> -->
2024-12-18 14:45:53 +08:00
</view>
2024-12-29 16:09:08 +08:00
<view class="dcf-btn">
<!-- <u-button ripple :hairLine="false" class="messageSubmit" form-type="submit">修改</u-button> -->
<u-button ripple :hairLine="false" class="messageLoginOut" @click="logout">退出登录</u-button>
2024-12-18 14:45:53 +08:00
</view>
</view>
</form>
</view>
</view>
<u-toast ref="uToast"></u-toast>
<Loading :show="loading" />
</view>
</template>
<script>
import configService from '@/common/config.service.js';
export default {
data() {
return {
loading: true, // 加载
// 基础路径
ip: configService.ip,
homeFileUrl: configService.fileUrl + 'pixel/home/',
myFileUrl: configService.fileUrl + 'pixel/my/',
// 页面背景
background: 'silver-background.png',
// logo图标
logo: 'logo.png',
// 顶部距离等级
topLevel: 0,
// 默认头像
defaultAvatar: 'login-avatar.png',
form:{},
tip: {
realname: false,
mail: false,
message: false,
},
messageType: 0, //类型
genderList: [
"未知",
"男",
"女",
],
messageMaxlength: 300// 留言最长字数
}
},
// #ifndef H5
onPageScroll(e) {
const level = e.scrollTop / 60;
if (level <= 1) this.topLevel = level;
else this.topLevel = 1;
},
// #endif
// #ifdef H5
mounted() {
let that = this;
window.onscroll = function() {
//为了保证兼容性,这里取三个值,哪个有值取哪一个
//scrollTop就是触发滚轮事件时滚轮的高度
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const level = scrollTop / 60;
if (level <= 1) that.topLevel = level;
else that.topLevel = 1;
}
},
onHide() {
window.onscroll = null;
},
// #endif
computed:{
// 获取登录头像
getAvatar(){
return this.form.picture ? encodeURI(this.ip+this.form.picture) :
(this.myFileUrl+this.defaultAvatar);
},
2024-12-29 16:09:08 +08:00
// 注册日期
getEnrollDate(){
let date = new Date(this.form.createtime);
return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
2024-12-18 14:45:53 +08:00
},
methods: {
// 返回
back() {
uni.navigateBack();
},
// 提交申请
async submit(e){
// try{
// this.loading = true;
// const { name, phone, type, message } = this.form;
// this.tip = {
// name: name==='',
// phone: (phone==='') || (!(/^1[345789]\d{9}$/.test(phone))),
// message:message===''
// }
// if(name===''){
// this.$refs.uToast.show({type:'warning',title: "请输入姓名!"});
// return;
// }else if(!(/^1[345789]\d{9}$/.test(phone))){
// this.$refs.uToast.show({type:'warning',title: "联系方式不正确!"});
// return;
// }else if(message===''){
// this.$refs.uToast.show({type:'warning',title: "请输入留言内容!"});
// return;
// }
// let res = await this.$api.addMessage(e.detail.value);
// if(res.success){
// this.$refs.uToast.show({type:'success',title: "提交成功!"});
// }else{
// this.$refs.uToast.show({type:'error',title: "提交失败!"});
// }
// }catch(e){
// this.$refs.uToast.show({type:'error',title: "处理失败!"});
// }finally{
// this.loading = false;
// }
},
// 选择性别
bindGenderChange(e) {
this.form.gender = e.detail.value;
this.$forceUpdate();
},
// 注销
logout(){
let that = this;
uni.showModal({
title: '注销',
content: '是否确认退出登录?',
confirmColor: '#94d500',
success: function (res) {
if (res.confirm) {
that.$u.vuex('vuex_token', '');
that.$u.vuex('user_message', {});
that.form = {};
2024-12-29 16:09:08 +08:00
that.$api.logOut();
// that.$emit('userLogOut');
2024-12-18 14:45:53 +08:00
uni.navigateBack({complete() {
setTimeout(()=>{
uni.showToast({
icon: 'none',title: '退出登录成功!'
})
},300);
}})
}
}
})
}
},
onLoad(options) {
try{
this.form = JSON.parse(this.$store.state.user_message);
}catch(e){
this.form = {};
}finally{
this.loading = false;
}
},
}
</script>
<style scoped lang="scss">
.setting {
display: flex;
flex-direction: column;
min-height: 100vh;
background-size: cover;
opacity: 0.9;
2024-12-30 19:01:03 +08:00
// #ifdef APP
.app-top{
width: 100%;
position: fixed;
z-index: 81;
top: 0;
}
// #endif
2024-12-18 14:45:53 +08:00
.st-top {
// #ifdef APP
.app-top {
width: 100%;
position: fixed;
z-index: 81;
top: 0;
}
// #endif
.mobile-logo {
width: 100%;
display: flex;
justify-content: center;
// #ifndef MP-WEIXIN
justify-content: space-between;
align-items: center;
.back{
margin-left: 35rpx;
margin-top: 5rpx
}
// #endif
position: fixed;
z-index: 81;
padding: 15rpx 0;
image {
width: 200rpx;
height: 45rpx;
}
}
}
.detail-content{
margin: 80rpx 30rpx 32rpx;
2024-12-29 16:09:08 +08:00
min-height: 90vh;
2024-12-18 14:45:53 +08:00
background: linear-gradient(rgba(160, 160, 160, 0.4), rgba(0, 0, 0, 0.1));
border-radius: 40rpx;
padding: 40rpx 25rpx 0rpx;
color: #f9f9f9;
2024-12-29 16:09:08 +08:00
.dc-form{
min-height: 85vh;
2024-12-18 14:45:53 +08:00
display: flex;
flex-direction: column;
2024-12-29 16:09:08 +08:00
.blocks{
2024-12-18 14:45:53 +08:00
display: flex;
2024-12-29 16:09:08 +08:00
flex-direction: column;
.block_show{
font-size: 40rpx;
font-weight: bold;
margin: 18rpx 20rpx;
background-image: linear-gradient(to right, rgba(142, 84, 233,0.8) 0%, rgba(71, 118, 230,0.8) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
// text-shadow: 0 0 25rpx #eee;
2024-12-18 14:45:53 +08:00
}
2024-12-29 16:09:08 +08:00
.block_img{
display: flex;
justify-content: center;
margin: 30rpx 0 60rpx;
.u-avatar{
border: 2rpx solid #fff;
box-shadow: 0 0 20rpx #eee;
}
2024-12-18 14:45:53 +08:00
}
2024-12-29 16:09:08 +08:00
.block_title{
2024-12-18 14:45:53 +08:00
font-family: PingFang SC, PingFang SC;
2024-12-29 16:09:08 +08:00
font-weight: 800;
font-size: 36rpx;
2024-12-18 14:45:53 +08:00
color: #000000;
line-height: 40rpx;
2024-12-29 16:09:08 +08:00
}
.block_input{
margin-bottom: 32rpx;
.tip{
2024-12-18 14:45:53 +08:00
color: #FE020E;
2024-12-29 16:09:08 +08:00
margin-top: 4rpx;
font-size: small;
margin-bottom: 0rpx !important;
2024-12-18 14:45:53 +08:00
}
2024-12-29 16:09:08 +08:00
view{
font-family: PingFang SC, PingFang SC;
font-size: 32rpx;
color: #000000;
line-height: 40rpx;
margin-bottom: 16rpx;
text{
vertical-align: middle;
color: #FE020E;
font-weight: bold;
margin-right: 8rpx;
}
}
input{
height: 92rpx;
2024-12-18 14:45:53 +08:00
background: #F8F9FB;
border-radius: 4rpx;
color: rgba(0,0,0,0.8);
2024-12-29 16:09:08 +08:00
padding:0 32rpx;
2024-12-18 14:45:53 +08:00
font-size: 32rpx;
border-radius: 15rpx;
}
2024-12-29 16:09:08 +08:00
.message-textarea{
width: 100%;
position: relative;
textarea{
padding: 32rpx;
width: 100%;
height: 400rpx;
background: #F8F9FB;
border-radius: 4rpx;
color: rgba(0,0,0,0.8);
font-size: 32rpx;
border-radius: 15rpx;
}
.mt-tip{
position: absolute;
font-size: 28rpx;
right: 32rpx;
bottom: 10rpx;
z-index: 2;
background-color: #f8f9fb;
padding: 5rpx;
border-radius: 8rpx;
}
2024-12-18 14:45:53 +08:00
}
}
}
2024-12-29 16:09:08 +08:00
.dcf-btn{
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-end;
}
2024-12-18 14:45:53 +08:00
}
}
}
.messageSubmit{
width: 100%;
background-size: 200% auto;
transition: 0.5s;
animation-duration: 1s;
animation-fill-mode: both;
border: none;
background-image: -webkit-linear-gradient( to right, #36D1DC 0%, #5B86E5 51%, #36D1DC 100%);
background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5 51%, #36D1DC 100%);
box-shadow: 0 0 8rpx #eee;
height: 100rpx;
font-weight: bold;
color: #fff;
border-radius: 56rpx;
margin-top: 40rpx;
margin-bottom: 30rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 35rpx;
&::after{
display: none;
}
// &:active {
// background-position: right center;
// color: #f8f9fb;
// text-decoration: none;
// }
}
.messageLoginOut{
margin-bottom: 60rpx;
border-radius: 56rpx;
box-shadow: 0 0 10rpx #eee;
height: 100rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-size: 35rpx;
width: 100%;
border: none;
color: #e53636;
background-color: #F8F9FB;
}
.type-icon{
z-index:90;
position: absolute;
right: 50rpx;
margin-top: -60rpx;
}
</style>