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.
275 lines
6.7 KiB
275 lines
6.7 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="wxAvatar"
|
|
@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="#FFFFFF"
|
|
maxlength="10"
|
|
v-model="info.wxName"
|
|
></u--input>
|
|
</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
|
|
v-if="!this.$com.isNull(info.phoneNumber)"
|
|
inputAlign="right"
|
|
border="none"
|
|
color="#FFFFFF"
|
|
maxlength="11"
|
|
v-model="info.phoneNumber"
|
|
:readonly="true"
|
|
></u--input>
|
|
<u-button v-else :text="info.phoneNumber || '点击获取手机号'" openType="getPhoneNumber" @getphonenumber="getPhoneNumber"></u-button>
|
|
</view>
|
|
|
|
</view>
|
|
<!--input box end-->
|
|
|
|
</view>
|
|
|
|
<view class="btn-big"><u-button type="info" :loading="btn_loading" loadingText="加载中" :disabled="btn_disabled" text="保存" @click="add"></u-button></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
//form框
|
|
info: {
|
|
wxName:'',
|
|
wxAvatar:'',
|
|
phoneNumber:'点击获取手机号',
|
|
|
|
},
|
|
wxAvatar: [],
|
|
//按钮设置
|
|
btn_loading:false,
|
|
btn_disabled:false,
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
var _this = this;
|
|
_this.getUserInfo();
|
|
|
|
},
|
|
methods: {
|
|
|
|
//获取用户信息
|
|
getUserInfo()
|
|
{
|
|
var _this =this;
|
|
var post ={};
|
|
_this.$api.post('ycl/user/wx-info',post,function(rs){
|
|
console.log(rs);
|
|
_this.info = rs;
|
|
_this.wxAvatar =[{url:rs.wxAvatar}];
|
|
});
|
|
},
|
|
// 删除图片
|
|
deletePic(event) {
|
|
var _this = this;
|
|
_this.wxAvatar = [];
|
|
},
|
|
// 新增图片
|
|
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 FSM = uni.getFileSystemManager();
|
|
FSM.readFile({
|
|
filePath: edetail,
|
|
encoding: "base64",
|
|
success: function(data) {
|
|
_this.info.imgBase64 = "data:image/png;base64," + data.data
|
|
_this.wxAvatar = [{url:edetail}];
|
|
},
|
|
fail: function(err){
|
|
console.log('http://tmp',err)
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
uploadFilePromise(url) {
|
|
|
|
},
|
|
loadData(){
|
|
|
|
},
|
|
getPhoneNumber(e){
|
|
var _this =this;
|
|
var detail = e.detail;
|
|
console.log(detail);
|
|
if (detail.errMsg === 'getPhoneNumber:ok') {
|
|
|
|
_this.getPhoneApi(detail);
|
|
} else {
|
|
_this.$com.alert('授权失败')
|
|
}
|
|
},
|
|
getPhoneApi(detail){
|
|
var _this = this;
|
|
|
|
var post ={
|
|
|
|
code: detail.code,
|
|
};
|
|
_this.$api.post('ycl/user/wx-phone',post,function(rs){
|
|
console.log(rs);
|
|
_this.info.phoneNumber = rs;
|
|
},function(err){
|
|
console.log(err);
|
|
});
|
|
|
|
},
|
|
|
|
//提交表单
|
|
add(){
|
|
var _this =this;
|
|
var info = _this.info;
|
|
|
|
if(_this.$com.isNull(info.wxName))
|
|
{
|
|
_this.$com.showError('请输入昵称');
|
|
return;
|
|
}
|
|
if(_this.$com.isNull(info.wxAvatar) && _this.$com.isNull(info.imgBase64))
|
|
{
|
|
_this.$com.showError('请上传头像');
|
|
return;
|
|
}
|
|
if(_this.$com.isNull(info.phoneNumber))
|
|
{
|
|
_this.$com.showError('手机号必须');
|
|
return;
|
|
}
|
|
_this.btn_loading = true;
|
|
_this.btn_disabled = true;
|
|
var post = info;
|
|
_this.$api.put('ycl/user/wx-update',post,function(rs){
|
|
console.log('更新token');
|
|
_this.$user.session('token',rs.token);
|
|
_this.$com.alert('更新成功');
|
|
setTimeout(function(){
|
|
uni.$u.route({
|
|
type:'navigateBack',
|
|
delta:1,
|
|
});
|
|
},1000);
|
|
});
|
|
//按钮还原
|
|
_this.btn_loading = false;
|
|
_this.btn_disabled = false;
|
|
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container{padding:10rpx 20rpx;}
|
|
.form{ padding: 20rpx;
|
|
background: #082436;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
}
|
|
/*form基本元素*/
|
|
/*input_box*/
|
|
.input_box{ display: flex;flex-direction:row; height: 100rpx; line-height: 100rpx;
|
|
border-radius: 15rpx;box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.05); margin: 20rpx auto; color:#FFFFFF;}
|
|
|
|
.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: 74.7%; width: auto;font-size: 26rpx;}
|
|
::v-deep .u-input{ border:none !important; color:#FFFFFF !important; margin-top: 10rpx;}
|
|
.up{ width: 100%; height: auto; display: flex; margin-top: 20rpx;}
|
|
.up .img{width:80%; }
|
|
.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; }
|
|
|
|
|
|
</style>
|
|
|