<template>
<div @click="chooseImage">
<slot></slot>
</div>
</template>
<script>
import configs from '@/config/config.js'
export default {
data() {
return {
show: false,
configs
}
},
props: {
name: {
type: String,
default () {
return '';
}
}
},
onShow() {
},
methods: {
chooseImage() {
var that = this;
console.log(123)
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
success: res => {
console.log(res);
// that.uploadimg(res.tempFilePaths[0]);
plus.zip.compressImage({
src: res.tempFilePaths[0],
dst: '_doc/a.jpg',
quality: 70, //压缩比例
overwrite: true,
width: '350px' //图片宽度
},
function(e) {
//执行上传
that.uploadimg(e.target);
},
function(error) {
console.log('Compress error!');
}
);
},
fail: err => {
// #ifdef MP
uni.getSetting({
success: res => {
let authStatus = res.authSetting['scope.album'] && res.authSetting[
'scope.camera'];
if (!authStatus) {}
}
});
// #endif
}
});
},
uploadimg(url) {
var that = this;
if (uni.getStorageSync('token')) {
let a = uni.uploadFile({
url: configs.upload, // 仅为示例，非真实的接口地址
filePath: url,
name: 'image',
header: {
Authorization: 'Bearer ' + uni.getStorageSync('token')
},
formData: {
upload_name: 'image'
},
success: (res) => {
console.log(res)
console.log(JSON.parse(res.data))
console.log(1234)
that.$emit('getdata', JSON.parse(res.data).data)
if (JSON.parse(res.data).code == 401) {
uni.redirectTo({
url: '/pages/login/login'
})
}
},
fail: (res) => {
if (res.code == 401) {
uni.redirectTo({
url: '/pages/login/login'
})
}
}
});
} else {
uni.redirectTo({
url: '/pages/login/login'
})
}
}
}
}
</script>
<style>
</style>
使用
<template>
<view class="formbody">
<u--form labelWidth="100" labelPosition="left" ref="form1">
<uploadImg @getdata="getprofile">
<u-form-item label="头像" prop="userInfo.qq" borderBottom ref="item1">
<div class="userhead">
<avatars :size='50' :src="data.profile"></avatars>
</div>
</u-form-item>
</uploadImg>
<u-form-item label="昵称" borderBottom ref="item1">
<u--input inputAlign="right" v-model="data.nickname" border="none"></u--input>
</u-form-item>
</u--form>
<u-button class="mt20" color="#20ACA7" type="primary" @click="add">保存</u-button>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import uploadImg from '@/components/uploadImg.vue'
import avatars from '@/components/avatars.vue'
import {
setUserInfo,
getUserInfo
} from '@/config/api.js'
export default {
components: {
uploadImg,
avatars
},
data() {
return {
data: {
nickname: '',
phone: '',
profile: ''
}
};
},
mounted() {
this.getUserInfo()
},
methods: {
getUserInfo() {
var that = this;
getUserInfo({
custom: {
auth: true
}
}).then(res => {
console.log(res)
that.data = res
}).catch(err => {
})
},
getprofile(e) {
this.data.profile = e
},
add() {
var that = this;
if (!that.data.nickname) {
uni.showToast({
title: '请输入昵称'
})
return
}
setUserInfo(that.data, {
custom: {
auth: true
}
}).then(res => {
console.log(res)
if (res.code == 1) {
this.$refs.uToast.show({
type: 'success',
title: '提示',
message: "更新成功",
complete() {
uni.navigateBack({})
}
})
}
}).catch(err => {
})
},
},
};
</script>
<style scoped lang="scss">
.container {
background-color: rgb(239, 239, 239);
width: 100vw;
height: 100vh;
overflow-y: auto;
.group_1 {
flex: 1 1 auto;
overflow-y: auto;
.section_1 {
padding: 41rpx 50rpx;
background: #fff;
.image_2 {
width: 127rpx;
height: 127rpx;
}
.group_2 {
margin-left: 31rpx;
flex: 1 1 auto;
align-self: center;
.text {
color: rgb(34, 34, 34);
font-size: 24rpx;
line-height: 23rpx;
white-space: nowrap;
}
.text_1 {
margin-top: 12rpx;
color: rgb(153, 153, 153);
font-size: 24rpx;
line-height: 19rpx;
white-space: nowrap;
}
}
}
.group_3 {
position: relative;
.section_2 {
padding: 47rpx 36rpx 47rpx 100rpx;
background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/619aed4a8611d00011b5a328/619f91da9eab8900119cd321/16378475921091096906.png');
background-size: 100% 100%;
.text_2 {
color: rgb(34, 34, 34);
font-size: 24rpx;
line-height: 23rpx;
white-space: nowrap;
}
.text_4 {
color: rgb(34, 34, 34);
font-size: 24rpx;
line-height: 18rpx;
white-space: nowrap;
}
}
.section_3 {
padding: 48rpx 36rpx 46rpx 100rpx;
background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/619aed4a8611d00011b5a328/619f91da9eab8900119cd321/16378475921091096906.png');
background-size: 100% 100%;
.text_8 {
color: rgb(34, 34, 34);
font-size: 24rpx;
line-height: 22rpx;
white-space: nowrap;
}
.text_9 {
margin-bottom: 3rpx;
color: rgb(34, 34, 34);
font-size: 24rpx;
line-height: 18rpx;
white-space: nowrap;
}
}
.section_4 {
position: absolute;
left: 50rpx;
top: 50%;
transform: translateY(-50%);
border: solid 2rpx rgb(0, 0, 0);
.image_3 {
width: 31rpx;
height: 28rpx;
}
.icon_1 {
margin-top: 86rpx;
width: 31rpx;
height: 27rpx;
}
.image_5 {
margin-top: 84rpx;
width: 30rpx;
height: 30rpx;
}
.image_7 {
margin-top: 91rpx;
width: 30rpx;
height: 27rpx;
}
.image_8 {
margin-top: 81rpx;
width: 27rpx;
height: 34rpx;
}
.icon_2 {
margin-top: 81rpx;
width: 28rpx;
height: 28rpx;
}
}
}
}
.tab-bar {
padding: 26rpx 39rpx 16rpx 49rpx;
background-color: rgb(255, 255, 255);
height: 130rpx;
border-left: solid 2rpx rgb(231, 231, 231);
border-right: solid 2rpx rgb(231, 231, 231);
border-top: solid 2rpx rgb(231, 231, 231);
border-bottom: solid 2rpx rgb(231, 231, 231);
position: relative;
.group_4 {
color: rgb(0, 172, 167);
font-size: 22rpx;
line-height: 22rpx;
white-space: nowrap;
width: 59rpx;
position: absolute;
left: 49rpx;
top: 26rpx;
.text_18 {
margin-top: 8rpx;
}
}
.group_5 {
color: rgb(0, 0, 0);
font-size: 22rpx;
line-height: 21rpx;
white-space: nowrap;
width: 60rpx;
position: absolute;
left: 248rpx;
top: 26rpx;
.text_19 {
margin-top: 9rpx;
}
}
.group_6 {
color: rgb(0, 0, 0);
font-size: 22rpx;
line-height: 22rpx;
white-space: nowrap;
width: 60rpx;
position: absolute;
left: 449rpx;
top: 26rpx;
.text_20 {
margin-top: 8rpx;
}
}
.group_7 {
color: rgb(0, 0, 0);
font-size: 22rpx;
line-height: 20rpx;
white-space: nowrap;
width: 59rpx;
position: absolute;
left: 649rpx;
top: 50%;
transform: translateY(-50%);
.text_21 {
margin-top: 9rpx;
}
}
.image_9 {
width: 54rpx;
height: 54rpx;
}
}
}
.groups {
background: #fff;
}
.icons {
display: flex;
justify-content: center;
align-items: center;
width: 69rpx;
flex-wrap: nowrap;
flex-direction: row;
image {
width: 30rpx;
}
}
.formbody {
width: 690rpx;
margin: auto;
background: #fff;
}
.w400 {
width: 400rpx;
}
.mt20 {
margin-top: 40rpx;
}
.userhead {
height: 70rpx;
width: 490rpx;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
image {
width: 70rpx;
height: 70rpx;
}
}
</style>
