上传头像成功后关闭弹窗
This commit is contained in:
parent
43e61978d7
commit
30526b4694
|
|
@ -14,7 +14,7 @@
|
|||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view @click="uploadImg()">
|
||||
<view @click="toggle()">
|
||||
<jp-cropper-watermark :watermarkType="1" mode="ratio" :width="400" :height="500" :maxWidth="400" :maxHeight="500" :url="url" @cancel="oncancel" @ok="onok"></jp-cropper-watermark>
|
||||
<image src="../../static/logo.png" v-if="avatar==null" mode=""
|
||||
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
|
||||
|
|
@ -76,6 +76,24 @@
|
|||
<view class="footer-btn">
|
||||
<view class="usermain-btn" @click="messagebtn()">保存</view>
|
||||
</view>
|
||||
<view>
|
||||
<!-- 普通弹窗 -->
|
||||
<uni-popup ref="popup" type="bottom" background-color="#fff" @change="change">
|
||||
<view class="popup-content">
|
||||
<view class="popup-content-top">
|
||||
<view @click="uploadImg(0)" class="popup-content-top-btn" style="border-bottom: 1px solid #ccc;">
|
||||
查看头像
|
||||
</view>
|
||||
<view @click="uploadImg(1)" class="popup-content-top-btn">
|
||||
从相册选择图片
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-content-bottom" @click="quxiao">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -101,7 +119,8 @@
|
|||
zhiFuBaoName: '',
|
||||
sex: 1,
|
||||
age: 0,
|
||||
url:''
|
||||
url:'',
|
||||
upUrl:''
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
|
|
@ -199,7 +218,7 @@
|
|||
let userId = uni.getStorageSync('userId');
|
||||
uni.uploadFile({
|
||||
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
||||
filePath:that.url,
|
||||
filePath:that.upUrl,
|
||||
header: {
|
||||
token: token
|
||||
},
|
||||
|
|
@ -207,6 +226,7 @@
|
|||
success: uploadFileRes => {
|
||||
url = JSON.parse(uploadFileRes.data);
|
||||
// that.avatar = url.data
|
||||
that.$refs.popup.close('bottom')
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
|
|
@ -216,62 +236,56 @@
|
|||
// url设置为空，隐藏控件
|
||||
this.url = "";
|
||||
},
|
||||
uploadImg() {
|
||||
quxiao(){
|
||||
this.$refs.popup.close('bottom')
|
||||
},
|
||||
toggle(type) {
|
||||
this.$refs.popup.open('bottom')
|
||||
},
|
||||
uploadImg(index) {
|
||||
let token = uni.getStorageSync('token')
|
||||
|
||||
if (!token) {
|
||||
this.goLoginInfo();
|
||||
return;
|
||||
}
|
||||
let that = this;
|
||||
var url = null;
|
||||
uni.showActionSheet({
|
||||
// itemList按钮的文字接受的是数组
|
||||
itemList: ["查看头像", "从相册选择图片"],
|
||||
success(e) {
|
||||
var index = e.tapIndex
|
||||
if (index === 0) {
|
||||
// 用户点击了预览当前图片
|
||||
// 可以自己实现当前头像链接的读取
|
||||
let url = that.avatar;
|
||||
let arr = []
|
||||
arr.push(url)
|
||||
uni.previewImage({
|
||||
// 预览功能图片也必须是数组的
|
||||
urls: arr
|
||||
})
|
||||
} else if (index === 1) {
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: function(res) {
|
||||
uni.getImageInfo({
|
||||
src: res.tempFilePaths[0],
|
||||
success: (info) => {
|
||||
const size = info.size;
|
||||
if (size / 1024 / 1024 > 4) {
|
||||
// 图片大于2MB
|
||||
uni.showToast({
|
||||
icon:'error',
|
||||
title:'图片超出4MB限制,请重新选择'
|
||||
})
|
||||
} else {
|
||||
that.url = res.tempFilePaths[0];
|
||||
}
|
||||
if (index === 0) {
|
||||
// 用户点击了预览当前图片
|
||||
// 可以自己实现当前头像链接的读取
|
||||
let url = that.avatar;
|
||||
let arr = []
|
||||
arr.push(url)
|
||||
uni.previewImage({
|
||||
// 预览功能图片也必须是数组的
|
||||
urls: arr
|
||||
})
|
||||
} else if (index === 1) {
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: function(res) {
|
||||
uni.getImageInfo({
|
||||
src: res.tempFilePaths[0],
|
||||
success: (info) => {
|
||||
const size = info.size;
|
||||
if (size / 1024 / 1024 > 4) {
|
||||
// 图片大于2MB
|
||||
uni.showToast({
|
||||
icon:'error',
|
||||
title:'图片超出4MB限制,请重新选择'
|
||||
})
|
||||
} else {
|
||||
that.url = res.tempFilePaths[0];
|
||||
that.upUrl=res.tempFilePaths[0];
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, fail: function (err) {
|
||||
console.log('showActionSheet失败', err);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
getUserInfo() {
|
||||
|
|
@ -356,7 +370,28 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.popup-content-bottom{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 15px 0px;
|
||||
border-radius: 5px;
|
||||
background-color: #fcfcfd;
|
||||
margin: 7px 0px;
|
||||
}
|
||||
.popup-content-top{
|
||||
border-radius: 5px;
|
||||
background-color: #fcfcfd;
|
||||
}
|
||||
.popup-content-top-btn{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 15px 0px;
|
||||
|
||||
}
|
||||
.popup-content{
|
||||
padding: 0 36rpx;
|
||||
}
|
||||
page {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
|
@ -367,7 +402,7 @@
|
|||
|
||||
.usermain {
|
||||
background: #ffffff;
|
||||
padding: 0 36rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.usermain-item {
|
||||
|
|
|
|||
Loading…
Reference in New Issue