tourism/uni_applet

上传图片

  <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
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)
						}
					)
				})
			}

上拉加载、下拉刷新

<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback"></mescroll-body>
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提示
<u-toast ref="uToast"></u-toast>
this.$refs.uToast.show({
	type: 'error/success',
	message: "message",
	complete() {
	params.url && uni.navigateTo({
		url: params.url
	})
}
})

2、Modal 模态框
<template>
	<view >
		<u-modal :show="show" :title="title" :content='content' closeOnClickOverlay @confirm="confirm" @cancel="show==false" @close="show==false"></u-modal>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show:false,
			title:'标题',
			content:'uView的目标是成为uni-app生态最优秀的UI框架'
		};
	}
};
</script>

同步请求

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
});