## 上传图片
```
import uploadImage from '@/components/ossutil/uploadFile.js';
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(res) {
return new Promise((resolve, reject) => {
uploadImage(res, 'cardImages/',
result => {
that.cardInfo.headSculpture = result
resolve(res)
}
)
})
}
```
## 上拉加载、下拉刷新
```
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin],
}
data(){
return {
canReset:false
}
}
methods:{
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
downCallback() {
this.mescroll.resetUpScroll()
},
upCallback(page) {
uni.showLoading({
title: '数据加载中'
})
this.$request.baseRequest('admin.unimall.circleManagementInfo', 'list', {
commonId: this.userInfo.id,
pageNum: page.num,
pageSize: page.size,
}, failres => {
console.log('res+++++', failres.errmsg)
this.$refs.uToast.show({
type: 'error',
message: failres.errmsg,
})
uni.hideLoading()
}).then(res => {
uni.hideLoading()
let curPageData = res.data.items;
let totalPage = res.data.total;
let curPageLen = curPageData.length;
this.mescroll.endByPage(curPageLen, totalPage);
console.log(res.data)
if (page.num == 1) this.circleList = []; //如果是第一页需手动置空列表
this.circleList = this.circleList.concat(curPageData); //追加新数据
},
}
onShow(){
this.$nextTick(function() {
this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页
this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
});
}
重置列表数据 this.mescroll.resetUpScroll()
```
## 工具类
```
1、时间戳格式化
parseTime(gmtCreate)
2、地址拆分省市区详细地址
let _address = this.$helper.formatLocation("辽宁省营口市鲅鱼圈区日月大道8号")
```
## U-view 常用
```
1、toast提示
this.$refs.uToast.show({
type: 'error/success',
message: "message",
complete() {
params.url && uni.navigateTo({
url: params.url
})
}
})
2、Modal 模态框
打开
```
## 同步请求
```
async upCallback(page) {
await this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
commonId: this.userInfo.id
}, failres => {
console.log('res+++++', failres.errmsg)
this.$refs.uToast.show({
type: 'error',
message: failres.errmsg,
})
}).then(res => {
this.cardList = [res.data.items]
})
await this.$request.baseRequest('admin.unimall.circleManagementInfo', 'get', {
commonId: this.userInfo.id,
id: this.id
}, failres => {
console.log('res+++++', failres.errmsg)
this.$refs.uToast.show({
type: 'error',
message: failres.errmsg,
})
uni.hideLoading()
}).then(res => {
console.log(res.data)
this.dataObj = res.data
})
this.getCardList(page)
},
```
## 公共样式
```
static/styles/index.scss
.flex{
display: flex;
align-items: center;
}
.flex-row-center{
display: flex;
justify-content: center;
}
.flex-all-center{
display: flex;
justify-content: center;
align-items: center;
}
.flex-between{
display: flex;
justify-content: space-between;
}
.flex-evenly{
display: flex;
justify-content: space-evenly;
}
.relative{
position: relative;
}
.absolute{
position: absolute;
}
```
## 阻止冒泡
```
@click.native.stop="delSearchVal"
```
## showToast
```
uni.showToast({
icon: "success",
title: '保存成功!',
duration: 2000
});
```