2024-04-07 11:10:47 +08:00
|
|
|
|
<template>
|
|
|
|
|
<view class="content">
|
2024-04-09 13:54:58 +08:00
|
|
|
|
<u-form :model="model">
|
|
|
|
|
<u-form-item label="姓名">
|
|
|
|
|
<u-input v-model="model.name" placeholder="请输入姓名" border="bottom" clearable></u-input>
|
|
|
|
|
</u-form-item>
|
|
|
|
|
|
|
|
|
|
<u-form-item label="性别">
|
|
|
|
|
<u-radio-group v-model="model.gender">
|
|
|
|
|
<u-radio label="男" name="男">男</u-radio>
|
|
|
|
|
<u-radio label="女" name="女">女</u-radio>
|
|
|
|
|
</u-radio-group>
|
|
|
|
|
</u-form-item>
|
|
|
|
|
|
|
|
|
|
<u-form-item label="简介">
|
|
|
|
|
<u-textarea v-model="model.intro" placeholder="请输入简介"></u-textarea>
|
|
|
|
|
</u-form-item>
|
|
|
|
|
|
|
|
|
|
<u-form-item label="上传图片" label-width='150rpx'>
|
|
|
|
|
<!-- <u-upload :fileList="model.FileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="2" :previewImage="true" deletable="true">
|
|
|
|
|
<!-- 这张图片就是自定义的图片,地址填写自己本地的就行 -->
|
|
|
|
|
<!-- </u-upload> -->
|
|
|
|
|
<view class="media-container">
|
|
|
|
|
<jade-image-upload :list="model.FileList1" :control="control" :maxCount="maxCount"
|
|
|
|
|
:compressSize="compressSize" :compressQuality="compressQuality" :compressWidth='compressWidth'
|
|
|
|
|
:imageSize="imageSize" @chooseFile="chooseFile" @imgDelete="mediaDelete">
|
|
|
|
|
</jade-image-upload>
|
|
|
|
|
|
2024-04-07 11:10:47 +08:00
|
|
|
|
</view>
|
2024-04-09 13:54:58 +08:00
|
|
|
|
|
|
|
|
|
</u-form-item>
|
|
|
|
|
<u-button type="primary" @click="submitForm">提交</u-button>
|
|
|
|
|
</u-form>
|
2024-04-07 11:10:47 +08:00
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-04-09 13:54:58 +08:00
|
|
|
|
import {
|
|
|
|
|
getConfig
|
|
|
|
|
} from '@/utils/auth';
|
2024-04-07 11:10:47 +08:00
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
2024-04-09 13:54:58 +08:00
|
|
|
|
model: {
|
|
|
|
|
name: '',
|
|
|
|
|
gender: '',
|
|
|
|
|
intro: '',
|
|
|
|
|
FileList1: [],
|
|
|
|
|
},
|
|
|
|
|
control: true,
|
|
|
|
|
maxCount: 6,
|
|
|
|
|
compressSize: 0.2,
|
|
|
|
|
imageSize: 2,
|
|
|
|
|
compressQuality: 0.8,
|
|
|
|
|
compressWidth: 375,
|
|
|
|
|
uploadTask: null,
|
|
|
|
|
media: [], //数据源
|
2024-04-07 11:10:47 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
2024-04-09 13:54:58 +08:00
|
|
|
|
// this.login()
|
2024-04-07 11:10:47 +08:00
|
|
|
|
},
|
|
|
|
|
methods: {
|
2024-04-09 13:54:58 +08:00
|
|
|
|
// login() {
|
|
|
|
|
// let that = this
|
|
|
|
|
// uni.login({
|
|
|
|
|
// provider: 'weixin',
|
|
|
|
|
// success: function(loginRes) {
|
|
|
|
|
// let form = {};
|
|
|
|
|
// form.code = loginRes.code; //用户code 注:用户的code每次登录都是随机的,所以不需要进行存储
|
|
|
|
|
// uni.showLoading({
|
|
|
|
|
// title: "登录中....",
|
|
|
|
|
// mask: true
|
|
|
|
|
// })
|
|
|
|
|
// that.request('wxlogin', form, 'POST').then(wxloginres => {
|
|
|
|
|
// console.log("wxloginres: ", wxloginres)
|
|
|
|
|
// if (wxloginres.code == 0) {
|
|
|
|
|
// uni.hideLoading()
|
|
|
|
|
// setTimeout(function() {
|
|
|
|
|
// uni.hideLoading();
|
|
|
|
|
// }, 2000);
|
|
|
|
|
// setToken(wxloginres.data.openid)
|
|
|
|
|
// setUserInfo(wxloginres.data); //模拟存储用户信息
|
|
|
|
|
// //成功后进入头像与昵称修改页面
|
|
|
|
|
// uni.navigateTo({
|
|
|
|
|
// url: '/pages/me/userinfo'
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// },
|
|
|
|
|
//上传
|
|
|
|
|
chooseFile(e) {
|
|
|
|
|
this.uploadFileToServe(e)
|
|
|
|
|
console.log(e, '----===');
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
//中断上传并删除
|
|
|
|
|
mediaDelete(e) {
|
|
|
|
|
this.uploadTask ? this.uploadTask.abort() : ''
|
|
|
|
|
this.media.splice(e, 1)
|
|
|
|
|
},
|
|
|
|
|
//上传逻辑处理
|
|
|
|
|
uploadFileToServe(urlList) {
|
|
|
|
|
if (!urlList || urlList.length <= 0) {
|
|
|
|
|
return
|
|
|
|
|
};
|
|
|
|
|
let url = getConfig().uploadUrl;
|
|
|
|
|
this.request(url, 'POST').then(res => {
|
|
|
|
|
console.log("res:", res)
|
|
|
|
|
// if (res) {
|
|
|
|
|
// console.log(res);
|
|
|
|
|
|
|
|
|
|
// }
|
2024-04-07 11:10:47 +08:00
|
|
|
|
})
|
2024-04-09 13:54:58 +08:00
|
|
|
|
//以七牛云为例,可根据实际需求灵活调整
|
|
|
|
|
// uni.request({
|
|
|
|
|
// url: getConfig().uploadUrl, //后端接口,仅为示例,并非真实接口地址。
|
|
|
|
|
// method: 'POST',
|
|
|
|
|
// success: (res) => {
|
|
|
|
|
// let token = res.data.data; //拿到上传七牛所必须的token
|
|
|
|
|
// urlList.forEach((item) => {
|
|
|
|
|
// this.uploadTask = uni.uploadFile({
|
|
|
|
|
// url: getConfig().uploadUrl, //七牛上传接口,仅为示例
|
|
|
|
|
// filePath: item.src,
|
|
|
|
|
// name: 'file',
|
|
|
|
|
// formData: {
|
|
|
|
|
// 'token': token
|
|
|
|
|
// },
|
|
|
|
|
// success: (res) => {
|
|
|
|
|
// let data = JSON.parse(res.data) //七牛返回的数据
|
|
|
|
|
// if (!data.data.url) {
|
|
|
|
|
// item.status = 'error'
|
|
|
|
|
// item.progress = '上传失败'
|
|
|
|
|
// } else {
|
|
|
|
|
// item.status = 'success'
|
|
|
|
|
// item.progress = '上传成功'
|
|
|
|
|
// item.src = data.data.url
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// this.uploadTask.Update((res) => {
|
|
|
|
|
// item.percent = res.progress
|
|
|
|
|
// this.media.splice(item.index,1,item)
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
submitForm() {
|
|
|
|
|
console.log(this.model, '----');
|
2024-04-07 11:10:47 +08:00
|
|
|
|
}
|
2024-04-09 13:54:58 +08:00
|
|
|
|
|
|
|
|
|
|
2024-04-07 11:10:47 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
2024-04-09 13:54:58 +08:00
|
|
|
|
.body {
|
|
|
|
|
background-color: #fff;
|
2024-04-07 11:10:47 +08:00
|
|
|
|
}
|
2024-04-09 13:54:58 +08:00
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
padding: 50rpx;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 1200rpx;
|
|
|
|
|
background-color: #fff;
|
2024-04-07 11:10:47 +08:00
|
|
|
|
}
|
2024-04-09 13:54:58 +08:00
|
|
|
|
|
|
|
|
|
.media-container {
|
|
|
|
|
padding: 30rpx 26rpx;
|
|
|
|
|
box-sizing: border-box;
|
2024-04-07 11:10:47 +08:00
|
|
|
|
}
|
2024-04-09 13:54:58 +08:00
|
|
|
|
</style>
|