xiaofangweibao-applet/pages/itemlist/itemlist.vue

177 lines
4.9 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<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>
</view>
</u-form-item>
<u-button type="primary" @click="submitForm">提交</u-button>
</u-form>
</view>
</template>
<script>
import {
getConfig
} from '@/utils/auth';
export default {
data() {
return {
model: {
name: '',
gender: '',
intro: '',
FileList1: [],
},
control: true,
maxCount: 6,
compressSize: 0.2,
imageSize: 2,
compressQuality: 0.8,
compressWidth: 375,
uploadTask: null,
media: [], //数据源
}
},
onLoad() {
// this.login()
},
methods: {
// 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);
// }
})
//以七牛云为例,可根据实际需求灵活调整
// 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, '----');
}
}
}
</script>
<style lang="scss">
.body {
background-color: #fff;
}
.content {
padding: 50rpx;
width: 100%;
height: 1200rpx;
background-color: #fff;
}
.media-container {
padding: 30rpx 26rpx;
box-sizing: border-box;
}
</style>