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.
 
 
 
 
wuliu/pages/user/portrait/portrait.vue

293 lines
7.1 KiB

<template>
<view>
<view class="form">
<uni-row>
<uni-col :span="12">
头像:
</uni-col>
<uni-col :span='5' :offset="7">
<!--#ifdef MP-WEIXIN -->
<!-- <uni-file-picker @delete='touxiangimg' v-model="imageValue" fileMediatype="image" @select="select" :limit="1" mode="grid"
@success="success" :image-styles="imageStyles" @fail="fail" /> -->
<image class="avatar" v-if="FormData.avatar" :src="FormData.avatar" @click="select2()"></image>
<image class="avatar" v-else src="@/static/jia@x.png" @click="select2()"></image>
<!--#endif-->
<!--#ifdef APP-PLUS -->
<!-- <uni-file-picker @delete='touxiangimg' v-model="imageValue" fileMediatype="image" @select="select1" :limit="1" mode="grid"
@success="success" :image-styles="imageStyles" @fail="fail" /> -->
<image class="avatar" v-if="FormData.avatar" :src="FormData.avatar" @click="select1()"></image>
<image class="avatar" v-else src="@/static/jia@x.png" @click="select1()"></image>
<!--#endif-->
</uni-col>
</uni-row>
<view style="border-bottom: 1px solid #999999;"></view>
<uni-row>
<uni-col :span="12">
昵称:
</uni-col>
<uni-col :span='5' :offset="6">
<input class="uni-input" style="margin-top: 20px;text-align: right;" v-model="FormData.name"
placeholder="请输入昵称" />
</uni-col>
</uni-row>
</view>
<view class="subbtn" @click="subbtn">
确认
</view>
<uni-popup ref="permissions_box_popup" background-color="#fff" :mask-click='false'>
<view class="permissions_box">
当您使用APP时,为了提供图片上传的功能,我们需要申请相机/存储权限。
</view>
</uni-popup>
</view>
</template>
<script>
const systemInfoSync = uni.getSystemInfoSync()
import permision from "@/js_sdk/wa-permission/permission.js"
export default {
data() {
return {
FormData: {
name: '',
avatar:'',
id:''
},
title: '更新信息',
imageValue: [],
imageStyles: {
width: 64,
height: 64,
border: {
color: "#999999",
width: 1,
style: 'dashed',
radius: '100px'
}
},
statusBarHeight: 0
}
},
onReady() {
this.statusBarHeight = systemInfoSync.statusBarHeight;
this.memberInfo()
},
methods: {
select2() {
const that = this
console.log(333)
uni.chooseImage({
count: 1,
sizeType: ["original","complete"], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"],
success: (res1) => {
console.log(res1)
uni.uploadFile({
url: 'https://logistics.njrenzhou.cn/api/uploadFile',
filePath: res1.tempFilePaths[0],
name: 'file',
formData: {
file_path: res1.tempFilePaths[0],
file_type: '1',
storage: 'local',
file: res1.tempFilePaths[0]
},
success: (res) => {
let urldata = JSON.parse(res.data)
console.log(urldata)
that.FormData.avatar=urldata.data.url
that.FormData.id=urldata.data.id;
that.$forceUpdate();
},
fail(e) {
console.log(e)
}
});
},
fail(err){
console.log("fail",err)
}
});
},
memberInfo(){
this.$api.memberInfo().then(res=>{
this.FormData.avatar=res.data.avatar_url
this.FormData.name=res.data.nickname
})
},
recorderAuthModal: function () {
const that = this;
uni.showModal({
title: '温馨提示',
content: '为了提供图片上传的功能,我们需要申请相机/存储权限,请您确认授权,否则无法使用该功能~',
cancelText: '关闭',
confirmText: '去授权',
success(res) {
that.$refs.permissions_box_popup.close('top')
if (res.confirm) {
permision.gotoAppPermissionSetting()
}
}
})
},
select1() {
const that = this;
console.log(1111)
// APP检查权限
if(uni.getSystemInfoSync().platform == 'android') {
plus.android.checkPermission(
'android.permission.WRITE_EXTERNAL_STORAGE',
granted => {
if (granted.checkResult==-1){
that.$refs.permissions_box_popup.open('top')
}else{
that.$refs.permissions_box_popup.close('top')
that.select2();
}
},
error => {
console.error('Error checking permission:', error.message);
}
);
that.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE')
return ;
}
that.select2();
},
async requestAndroidPermission(permisionID) {
const that = this;
var result = await permision.requestAndroidPermission(permisionID);
if(result != 1){
that.recorderAuthModal();
}else{
that.$refs.permissions_box_popup.close('top')
// 此为uView的跳转方法,详见"文档-JS"部分,也可以用uni的uni.navigateTo
that.select2();
console.log(444)
}
},
select(e) {
console.log(123, e);
const tempFilePaths = e.tempFilePaths;
//获取图片临时路径
const imgUrl = tempFilePaths[0]
uni.uploadFile({
url: 'https://logistics.njrenzhou.cn/api/uploadFile',
filePath: imgUrl,
name: 'file',
formData: {
file_path: imgUrl,
file_type: '1',
storage: 'local',
file: imgUrl
},
success: (res) => {
this.imageValue = []
let urldata = JSON.parse(res.data)
this.FormData.avatar=urldata.data.id
this.imageValue.push({
url: urldata.data.url,
extname: 'png',
name: 'png'
})
}
});
},
touxiangimg(){
this.FormData.avatar=''
},
subbtn() {
console.log(787,this.imageValue[0]);
this.$api.memberUpdate({nickname:this.FormData.name,avatar:this.FormData.id}).then(res=>{
console.log(123,res);
if(res.code==200){
uni.switchTab({
url: "/pages/user/index"
})
}
})
},
// 上传成功
success(e) {
console.log(11111);
console.log('上传成功')
},
// 上传失败
fail(e) {
console.log('上传失败:', e)
},
detail() {
uni.navigateTo({
url: "/pages/user/notice/detail/detail"
})
},
handleBack() {
uni.navigateBack({
delta: 2
})
// console.log(1344444);
// uni.switchTab({
// url: "/pages/user/index"
// })
},
toPage() {
console.log(1111232)
uni.navigateTo({
url: "/pages/user/index"
})
},
}
}
</script>
<style scoped lang="scss">
.subbtn {
margin-top: 40rpx;
margin-left: 50rpx;
text-align: center;
line-height: 98rpx;
color: #fff;
width: 660rpx;
height: 98rpx;
background: #0D5DC9;
border-radius: 49rpx;
}
.avatar{
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: block;
margin: 0 auto;
}
.form {
width: 700rpx;
height: 250rpx;
background: #FFFFFF;
line-height: 120rpx;
padding: 25rpx;
}
.custom-navigation-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 220rpx;
/* #ifdef MP-WEIXIN */
margin-top: -230rpx;
/* #endif */
}
.left-button,
.right-button {
padding: 0 12px;
}
.title {
flex: 1;
// text-align: center;
color: #fff;
font-size: 18px;
font-weight: bold;
}
</style>