jgl
/
photo_uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化上传封装

Browse Source
main
JING 9 months ago
parent 872846b9f7
commit 3ac7ee1737
5 changed files with 245 additions and 101 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      App.vue
  2. 12
      config/api.js
  3. 2
      config/request.js
  4. 260
      pages/user/account/index.vue
  5. 60
      pages/user/index.vue

12
App.vue
Unescape View File

@ -53,13 +53,13 @@
// #ifdef H5 // #ifdef H5
post.login_type = 'official_account'; post.login_type = 'official_account';
// #endif // #endif
_this.$api.post('/api/login', post,function(res){ _this.$api.post('api/login', post,function(rs){
console.log(res); console.log(rs);
_this.$user.session('userInfo',res); _this.$user.session('userInfo',rs);
_this.$user.session('user_id',res.id); _this.$user.session('user_id',rs.id);
if(!_this.$com.isNull(res.token)) if(!_this.$com.isNull(rs.token))
{ {
_this.$user.session('token',res.token); _this.$user.session('token',rs.token);
} }
}); });
}, },

12
config/api.js
Unescape View File

@ -22,8 +22,9 @@ var api = {
/** /**
* oss上传图片 * oss上传图片
* *
* @param string fileBaseUrl url地址
* @param string scene //对应文件配置file->file_type列表类型 * @param {object} data 数据对象 {filePath:'',fileType:'image',scene:'user_small'}
* scene //对应文件配置file->file_type列表类型
* "back_icon": "后端图标", * "back_icon": "后端图标",
"back_small": "后端小图", "back_small": "后端小图",
"back_centre": "后端中图", "back_centre": "后端中图",
@ -32,15 +33,14 @@ var api = {
"user_centre": "用户端中图", "user_centre": "用户端中图",
"user_max": "用户端大图", "user_max": "用户端大图",
"user_portrait": "用户面部模型" "user_portrait": "用户面部模型"
* @param {object} data 数据对象 {filePath:'',fileType:'image'}
* @param function thenFun then回调 * @param function thenFun then回调
* @param function catchFun catch回调 * @param function catchFun catch回调
*/ */
ossUpload:function(fileBaseUrl,scene,data,ossthenFun,osscatchFun){ ossUpload:function(data,ossthenFun,osscatchFun){
//从http://tmp/IX45zGr8kI1Tb1fd2c2b3045e9bfce734869d2024805.png 中 //从http://tmp/IX45zGr8kI1Tb1fd2c2b3045e9bfce734869d2024805.png 中
//提取 IX45zGr8kI1Tb1fd2c2b3045e9bfce734869d2024805.png 文件名 //提取 IX45zGr8kI1Tb1fd2c2b3045e9bfce734869d2024805.png 文件名
var fileNameArr = fileBaseUrl.split('//tmp/'); var fileNameArr = data.filePath.split('//tmp/');
console.log(fileNameArr); console.log(fileNameArr);
//获取文件名 //获取文件名
var fileName = fileNameArr[1]; var fileName = fileNameArr[1];
@ -49,7 +49,7 @@ var api = {
var suffix = suffixArr[1]; var suffix = suffixArr[1];
//先获取oss签名 //先获取oss签名
api.post('api/aliSignature',{ api.post('api/aliSignature',{
scene:scene, scene:data.scene,
appoint:1, appoint:1,
filename:fileName, filename:fileName,
},function(res){ },function(res){

2
config/request.js
Unescape View File

@ -63,7 +63,7 @@ module.exports = (vm) => {
// 响应拦截 // 响应拦截
uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/ uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
console.log('请求返回',response); //console.log('请求返回',response);
//这里只针对阿里云oss上传没有返回值的时候做个处理 //这里只针对阿里云oss上传没有返回值的时候做个处理
if(response.header.Server == "AliyunOSS" && response.errMsg == "uploadFile:ok" && uni.$u.test.isEmpty(response.data)) if(response.header.Server == "AliyunOSS" && response.errMsg == "uploadFile:ok" && uni.$u.test.isEmpty(response.data))
{ {

260
pages/user/account/index.vue
Unescape View File

@ -50,6 +50,8 @@
color="#999999" color="#999999"
maxlength="10" maxlength="10"
v-model="info.nick_name" v-model="info.nick_name"
@focus="showEdit"
@change="nameChange"
></u--input> ></u--input>
</view> </view>
<view class='i_box_5'> <view class='i_box_5'>
@ -65,7 +67,7 @@
<!--input box end--> <!--input box end-->
<!--input box start--> <!--input box start-->
<view class='input_box'> <view class='input_box' @click="agreement">
<view class='i_box_1'>协议与说明</view> <view class='i_box_1'>协议与说明</view>
<view class='i_box_2'></view> <view class='i_box_2'></view>
<view class='i_box_3x'> <view class='i_box_3x'>
@ -108,6 +110,38 @@
</view> </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> </view>
</template> </template>
@ -123,10 +157,20 @@
}, },
uploadImg: [], uploadImg: [],
//弹窗
show: false,
content:'',
style: {
// 字符串的形式
p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
},
//修改
name_show:false,
} }
}, },
onLoad(option) { onShow(option) {
var _this = this; var _this = this;
_this.getUserInfo(); _this.getUserInfo();
@ -136,7 +180,6 @@
//获取用户信息 //获取用户信息
getUserInfo() getUserInfo()
{ {
var _this =this;
var _this =this; var _this =this;
var userInfo = _this.$user.session('userInfo'); var userInfo = _this.$user.session('userInfo');
if(_this.$com.isNull(userInfo.nick_name) ) if(_this.$com.isNull(userInfo.nick_name) )
@ -147,9 +190,16 @@
{ {
userInfo.avatar = '/static/img/user/avatar.png'; userInfo.avatar = '/static/img/user/avatar.png';
_this.uploadImg =[{url:userInfo.avatar}];
_this.info = userInfo;
} }
_this.info = userInfo; else
_this.uploadImg =[{url:userInfo.avatar}]; {
_this.uploadImg =[{url:_this.$api.ossurl(userInfo.avatar)}];
_this.info = userInfo;
}
}, },
// 删除图片 // 删除图片
@ -167,12 +217,14 @@
{ {
//上传 //上传
var upData = {filePath:edetail,fileType:'image'}; var upData = {filePath:edetail,fileType:'image',scene:'user_small'};
_this.$api.ossUpload(edetail,'user_small',upData,function(res){ _this.$api.ossUpload(upData,function(res){
console.log('ossUpload success',res); console.log('ossUpload success',res);
var d = res.data; var d = res.data;
_this.info.avatar = d.file_url; _this.info.avatar = d.file_url;
_this.uploadImg = [{url:_this.$api.ossurl(d.file_url)}];; _this.uploadImg = [{url:_this.$api.ossurl(d.file_url)}];
_this.updateUserInfo();
},function(err){ },function(err){
console.log('ossUpload fail',err); console.log('ossUpload fail',err);
}); });
@ -182,76 +234,46 @@
} }
}, },
uploadFilePromise(url) { //名称改变
nameChange(e)
}, {
loadData(){ console.log(e);
this.updateUserInfo();
},
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);
});
}, },
//更新用户信息
//提交表单 updateUserInfo()
add(){ {
var _this =this; var _this = this;
var info = _this.info; var info = _this.info;
if(_this.$com.isNull(info.avatar))
if(_this.$com.isNull(info.nick_name))
{
_this.$com.showError('请输入昵称');
return;
}
if(_this.$com.isNull(info.avatar) && _this.$com.isNull(info.imgBase64))
{ {
_this.$com.showError('请上传头像'); _this.$com.showError('用户头像必须');
return; return;
} }
if(_this.$com.isNull(info.phoneNumber)) if(_this.$com.isNull(info.nick_name))
{ {
_this.$com.showError('手机号必须'); _this.$com.showError('用户昵称必须');
return; return;
} }
_this.btn_loading = true;
_this.btn_disabled = true;
var post = info; var post = info;
_this.$api.put('ycl/user/wx-update',post,function(rs){ _this.$api.post('api/userInfoEdit', post,function(rs){
console.log('更新token'); console.log(rs);
_this.$user.session('token',rs.token);
_this.$com.alert('更新成功'); });
setTimeout(function(){ },
uni.$u.route({ //协议
type:'navigateBack', agreement(){
delta:1, var _this = this;
}); var post = {
},1000); 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);
}); });
//按钮还原
_this.btn_loading = false;
_this.btn_disabled = false;
}, },
//注销 //注销
@ -261,7 +283,27 @@
url:'/pages/user/account/logout' 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> </script>
@ -311,5 +353,87 @@ border-radius: 15rpx; margin: 0rpx auto; color:#3D3D3D;}
::v-deep .btn-big .u-button--info{ background-color: transparent !important; border: none !important; color: #FFFFFF !important; } ::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> </style>

60
pages/user/index.vue
Unescape View File

@ -13,10 +13,10 @@
<image class='background' src="/static/img/user/topbg.png" mode="aspectFill"></image> <image class='background' src="/static/img/user/topbg.png" mode="aspectFill"></image>
<view class="userInfo"> <view class="userInfo">
<view class="uleft"> <view class="uleft">
<u-image :src="userInfo.avatar" width="48px" height="48px" radius="50%" @error="imgErr"></u-image> <u-image :src="info.avatar" width="48px" height="48px" radius="50%" @error="imgErr"></u-image>
</view> </view>
<view class="ucenter"> <view class="ucenter">
<view class="name"><text class="username">{{userInfo.nick_name}}</text><!-- <text class="level">等级</text> --></view> <view class="name"><text class="username">{{info.nick_name}}</text><!-- <text class="level">等级</text> --></view>
</view> </view>
<view class="uright"> <view class="uright">
<view class="change" @click="goTo('/pages/user/account/index')"> <view class="change" @click="goTo('/pages/user/account/index')">
@ -160,12 +160,13 @@
</template> </template>
<script> <script>
import user from '../../config/user';
export default { export default {
data() { data() {
return { return {
isLogin:false, //登录 isLogin:false, //登录
userInfo:{ info:{
avatar:'/static/img/user/avatar.png', avatar:'/static/img/user/avatar.png',
nick_name:'点击登录', nick_name:'点击登录',
}, },
@ -189,12 +190,7 @@ export default {
}, },
onShow() { onShow() {
var _this =this; var _this =this;
var token = _this.$user.session('token'); _this.getUserInfo();
if(!_this.$com.isNull(token))
{
_this.isLogin = true;
_this.getUserInfo();
}
}, },
@ -213,22 +209,46 @@ export default {
methods:{ methods:{
//头像加载失败 //头像加载失败
imgErr(){ imgErr(){
this.userInfo.wxAvatar = '/static/img/user/avatar.png'; this.info.avatar = '/static/img/user/avatar.png';
}, },
//获取用户信息 //获取用户信息
getUserInfo() getUserInfo()
{ {
var _this =this; var _this =this;
var userInfo = _this.$user.session('userInfo'); var post ={};
if(_this.$com.isNull(userInfo.nick_name) ) _this.$api.get('api/userInfo',post,function(rs){
{ console.log('用户信息',rs);
userInfo.nick_name = '微信用户'; //先缓存
} _this.$user.session('userInfo',rs);
if(_this.$com.isNull(userInfo.avatar)) _this.$user.session('user_id',rs.id);
{ if(!_this.$com.isNull(rs.token))
userInfo.avatar = '/static/img/user/avatar.png'; {
} _this.$user.session('token',rs.token);
_this.userInfo = userInfo; }
//显示
var userInfo = rs;
if(_this.$com.isNull(userInfo.nick_name) )
{
userInfo.nick_name = '微信用户';
}
if(_this.$com.isNull(userInfo.avatar))
{
userInfo.avatar = '/static/img/user/avatar.png';
}
else
{
userInfo.avatar = _this.$api.ossurl(userInfo.avatar);
}
_this.info = userInfo;
},function(err){
console.log(err);
});
}, },
goTo(url) goTo(url)

Write Preview
Loading…
Cancel
Save