|
|
@@ -0,0 +1,218 @@
|
|
|
+## 上传图片
|
|
|
+
|
|
|
+ ```
|
|
|
+ <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()
|
|
|
+ console.log(11)
|
|
|
+ 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)
|
|
|
+```
|
|
|
+
|
|
|
+##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;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+```
|
