You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
439 lines
10 KiB
439 lines
10 KiB
<template>
|
|
<view class="container">
|
|
|
|
|
|
<view class="form">
|
|
<!--input box start-->
|
|
<view class='input_box'>
|
|
<view class='i_box_1'>头像</view>
|
|
<view class='i_box_2'></view>
|
|
<view class='i_box_3'>
|
|
|
|
</view>
|
|
<view class='i_box_4'></view>
|
|
<view class='i_box_5'>
|
|
<view class="up">
|
|
<view class="img">
|
|
<u-upload
|
|
:fileList="uploadImg"
|
|
@afterRead="afterRead"
|
|
@delete="deletePic"
|
|
name="avatar"
|
|
width="26"
|
|
height="26"
|
|
:sizeType="['compressed']"
|
|
:deletable="true"
|
|
:maxCount="1"
|
|
:previewFullImage="false"
|
|
>
|
|
|
|
</u-upload>
|
|
</view>
|
|
<view class="icon" @click="clearImg">
|
|
<u-icon name="arrow-right" top="5"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--input box end-->
|
|
|
|
|
|
<!--input box start-->
|
|
<view class='input_box'>
|
|
<view class='i_box_1'>昵称</view>
|
|
<view class='i_box_2'></view>
|
|
<view class='i_box_3x'>
|
|
<u--input
|
|
placeholder="请输入昵称"
|
|
inputAlign="right"
|
|
border="none"
|
|
color="#999999"
|
|
maxlength="10"
|
|
v-model="info.nick_name"
|
|
@focus="showEdit"
|
|
@change="nameChange"
|
|
></u--input>
|
|
</view>
|
|
<view class='i_box_5'>
|
|
<view class="up">
|
|
<view class="img">
|
|
</view>
|
|
<view class="icon">
|
|
<u-icon name="arrow-right" top="5"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--input box end-->
|
|
|
|
<!--input box start-->
|
|
<view class='input_box' @click="agreement">
|
|
<view class='i_box_1'>协议与说明</view>
|
|
<view class='i_box_2'></view>
|
|
<view class='i_box_3x'>
|
|
|
|
</view>
|
|
<view class='i_box_5'>
|
|
<view class="up">
|
|
<view class="img">
|
|
</view>
|
|
<view class="icon" >
|
|
<u-icon name="arrow-right" top="5"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--input box end-->
|
|
|
|
|
|
</view>
|
|
|
|
<view class="form" style="margin-top: 20rpx;" @click="logout">
|
|
<!--input box start-->
|
|
<view class='input_box'>
|
|
<view class='i_box_1'>注销账号</view>
|
|
<view class='i_box_2'></view>
|
|
<view class='i_box_3x'>
|
|
|
|
</view>
|
|
<view class='i_box_5'>
|
|
<view class="up">
|
|
<view class="img">
|
|
</view>
|
|
<view class="icon" >
|
|
<u-icon name="arrow-right" top="5"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--input box end-->
|
|
</view>
|
|
|
|
|
|
<u-popup :show="show" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
|
|
<view class="popupBox">
|
|
<view class="popupTop">
|
|
协议与说明
|
|
</view>
|
|
<view class="popupDesc">
|
|
<u-parse :content="content" :tagStyle="style"></u-parse>
|
|
|
|
</view>
|
|
<view class="popupBtn">
|
|
<view class="sbtnBox a3" @click="yes">我了解啦</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<u-popup :show="name_show" :round="10" mode="center" bgColor="transparent" @close="close1" @open="open1">
|
|
<view class="popupBox">
|
|
<view class="popupTop">
|
|
修改昵称
|
|
</view>
|
|
<view class="popupDesc1">
|
|
|
|
|
|
</view>
|
|
<view class="popupBtn">
|
|
<view class="sbtnBox1 a1" @click="close1">取消</view>
|
|
<view class="sbtnBox1 a2" @click="yes">确认</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
//form框
|
|
info: {
|
|
nick_name:'',
|
|
avatar:'',
|
|
|
|
},
|
|
uploadImg: [],
|
|
//弹窗
|
|
show: false,
|
|
content:'',
|
|
style: {
|
|
// 字符串的形式
|
|
p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
|
|
|
|
},
|
|
//修改
|
|
name_show:false,
|
|
|
|
}
|
|
},
|
|
onShow(option) {
|
|
var _this = this;
|
|
_this.getUserInfo();
|
|
|
|
},
|
|
methods: {
|
|
|
|
//获取用户信息
|
|
getUserInfo()
|
|
{
|
|
var _this =this;
|
|
var userInfo = _this.$user.session('userInfo');
|
|
if(_this.$com.isNull(userInfo.nick_name) )
|
|
{
|
|
userInfo.nick_name = '微信用户';
|
|
}
|
|
if(_this.$com.isNull(userInfo.avatar))
|
|
{
|
|
userInfo.avatar = '/static/img/user/avatar.png';
|
|
|
|
_this.uploadImg =[{url:userInfo.avatar}];
|
|
_this.info = userInfo;
|
|
}
|
|
else
|
|
{
|
|
_this.uploadImg =[{url:_this.$api.ossurl(userInfo.avatar)}];
|
|
_this.info = userInfo;
|
|
}
|
|
|
|
|
|
|
|
},
|
|
// 删除图片
|
|
deletePic(event) {
|
|
var _this = this;
|
|
_this.uploadImg = [];
|
|
},
|
|
// 新增图片
|
|
afterRead(event) {
|
|
|
|
var _this = this
|
|
console.log('event',event);
|
|
var edetail = event.file.thumb;
|
|
if (edetail.indexOf('http://tmp') != -1 || edetail.indexOf('wxfile://tmp') != -1)
|
|
{
|
|
|
|
//上传
|
|
var upData = {filePath:edetail,fileType:'image',scene:'user_small'};
|
|
_this.$api.ossUpload(upData,function(res){
|
|
console.log('ossUpload success',res);
|
|
var d = res.data;
|
|
_this.info.avatar = d.file_url;
|
|
_this.uploadImg = [{url:_this.$api.ossurl(d.file_url)}];
|
|
_this.updateUserInfo();
|
|
|
|
},function(err){
|
|
console.log('ossUpload fail',err);
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
//名称改变
|
|
nameChange(e)
|
|
{
|
|
console.log(e);
|
|
this.updateUserInfo();
|
|
},
|
|
//更新用户信息
|
|
updateUserInfo()
|
|
{
|
|
var _this = this;
|
|
var info = _this.info;
|
|
if(_this.$com.isNull(info.avatar))
|
|
{
|
|
_this.$com.showError('用户头像必须');
|
|
return;
|
|
}
|
|
if(_this.$com.isNull(info.nick_name))
|
|
{
|
|
_this.$com.showError('用户昵称必须');
|
|
return;
|
|
}
|
|
var post = info;
|
|
_this.$api.post('api/userInfoEdit', post,function(rs){
|
|
console.log(rs);
|
|
|
|
});
|
|
},
|
|
//协议
|
|
agreement(){
|
|
var _this = this;
|
|
var post = {
|
|
type:'user_protocol',
|
|
};
|
|
_this.$api.get('api/treatyInfo',post,function(rs){
|
|
console.log('协议',rs);
|
|
_this.content = rs.content;
|
|
_this.show = true;
|
|
},function(err){
|
|
console.log(err);
|
|
});
|
|
|
|
},
|
|
//注销
|
|
logout()
|
|
{
|
|
uni.navigateTo({
|
|
url:'/pages/user/account/logout'
|
|
})
|
|
},
|
|
open() {
|
|
console.log('open');
|
|
},
|
|
close() {
|
|
this.show = false;
|
|
|
|
},
|
|
yes(){
|
|
this.close();
|
|
},
|
|
showEdit(){
|
|
var _this = this;
|
|
_this.name_show = true;
|
|
},
|
|
open1() {
|
|
console.log('open');
|
|
},
|
|
close1() {
|
|
this.name_show = false;
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container{padding:10rpx 20rpx;}
|
|
.form{ padding:0rpx 20rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
}
|
|
/*form基本元素*/
|
|
/*input_box*/
|
|
.input_box{ display: flex;flex-direction:row; height: 100rpx; line-height: 100rpx;
|
|
border-radius: 15rpx; margin: 0rpx auto; color:#3D3D3D;}
|
|
|
|
.i_box_1{ width: 25%;height: 100rpx; font-size: 28rpx; text-align: left; }
|
|
.i_box_2{width: 0.3%;height: 80rpx; margin-top: 10rpx;}
|
|
.i_box_3{ height: 100rpx;min-width: 49.4%; width: auto;font-size: 26rpx;}
|
|
|
|
|
|
|
|
|
|
|
|
/*特殊的 改变部分*/
|
|
.i_box_3x{height: 100rpx;min-width: 65.7%; width: auto;font-size: 26rpx;}
|
|
::v-deep .u-input{ border:none !important; color:#3D3D3D !important; margin-top: 20rpx;}
|
|
.up{ width: 100%; height: auto; display: flex; margin-top: 20rpx;}
|
|
.up .img{width:80%; overflow: hidden; }
|
|
.up .img .u-upload{ margin-left: 80rpx;}
|
|
.up .icon{ width:20%;}
|
|
::v-deep .i_box_3x .u-button--info{ background-color: transparent !important; border: none !important; color: #FFFFFF !important; text-align: right !important;}
|
|
::v-deep .i_box_3x .u-button{display: block !important; padding:0rpx !important;}
|
|
::v-deep .u-upload__button{border-radius: 50% !important;}
|
|
::v-deep .u-upload__wrap__preview{border-radius: 50% !important;}
|
|
|
|
|
|
|
|
.btn-big{ width:100%;
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
margin:30rpx auto;
|
|
display:block;
|
|
border-radius:56rpx;
|
|
background:#00F0E2;
|
|
font-size:28rpx;
|
|
color:#fff;text-align: center;}
|
|
|
|
::v-deep .btn-big .u-button--info{ background-color: transparent !important; border: none !important; color: #FFFFFF !important; }
|
|
|
|
.popupBox{
|
|
width: 600rpx;
|
|
height: auto;
|
|
border-radius: 24rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.popupTop{
|
|
width: 600rpx;
|
|
height: 140rpx;
|
|
background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
|
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
line-height: 140rpx;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
}
|
|
.popupDesc{
|
|
width:480rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
height: 900rpx;
|
|
overflow-x:hidden;
|
|
overflow-y: scroll;
|
|
padding: 0rpx 60rpx;
|
|
}
|
|
|
|
.popupBtn{ width: 100%; height: auto;
|
|
display: flex; flex-wrap: wrap;
|
|
justify-content: space-around; /* 使子元素在容器中均匀分布 */
|
|
align-items: center; /* 如果需要垂直居中子元素 */
|
|
}
|
|
.sbtnBox{
|
|
margin: 30rpx auto;
|
|
width: 478rpx;
|
|
height: 80rpx;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
border: 2rpx solid #4D94FF;
|
|
text-align: center;
|
|
border-radius: 44rpx;
|
|
|
|
|
|
}
|
|
|
|
.popupDesc1{
|
|
width:480rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
height: auto;
|
|
padding: 0rpx 60rpx;
|
|
}
|
|
|
|
|
|
.sbtnBox1{
|
|
margin: 30rpx auto;
|
|
width: 226rpx;
|
|
height: 80rpx;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
border: 2rpx solid #4D94FF;
|
|
text-align: center;
|
|
border-radius: 44rpx;
|
|
|
|
}
|
|
|
|
.a1{
|
|
background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
|
|
color:#7A74F0;
|
|
}
|
|
.a2{
|
|
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
|
|
color:#FFFFFF;
|
|
}
|
|
.a3{
|
|
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
|
|
color:#FFFFFF;
|
|
}
|
|
|
|
</style>
|
|
|