提交 80ed031f authored 作者: 刘旭's avatar 刘旭

添加订单详情查询功能

上级 6df6e460
......@@ -76,6 +76,11 @@ let initHavePage = async () => {
currencyPage.value = res.data.currencyPage;
uni.$emit('previewData', { previewData: res.data });
};
uni.$on('updateData', function() {
initHavePage();
});
initHavePage();
</script>
......
......@@ -34,7 +34,7 @@
<text>订单编号:{{ item.orderSn }}</text>
<text>合计:¥{{ item.actualPrice.toFixed(2) }}</text>
</view>
<view v-for="(item1, i) in item.goodsList" class="or-bottom">
<view v-for="(item1, i) in item.goodsList" class="or-bottom" @click="toggle('right', item1.id)">
<view class="or-left"><image :src="item1.picUrl" class="or-left-image" /></view>
<view class="order-right">
<text class="details-top">{{ item1.goodsName }}</text>
......@@ -47,42 +47,53 @@
</view>
</view>
</view>
<uni-load-more status="no-more" style="width: 100%;"></uni-load-more>
<!-- <text style="font-size: 24rpx; padding: 0 30rpx; color:#ccc">订购 时间:2022.8.24</text> -->
<view class="qr-code">
<text style="margin-right: 60rpx;">科 技 赋 能</text>
<image src="../../static/msjf-picture/msjf-13.png" mode="widthFix" style="width: 144rpx;"></image>
<text style="margin-left: 60rpx;">高 端 酱 酒</text>
</view>
<!-- <view style="width: 100%; height: 200rpx;"></view> -->
<!-- <view class="footer">
<image src="../../static/msjf-picture/msjf-05.jpg" mode="" class="bg-imag"></image>
<image src="../../static/msjf-picture/msjf-10.png" mode="widthFix" class="btn-image"></image>
</view> -->
<uni-popup ref="popup" background-color="#f2f2f2">
<scroll-view v-if="JSON.stringify(detailData) != '[]'" scroll-y="true" style="height: 100vh; box-sizing: border-box; padding-bottom: 40rpx;">
<view v-for="(item, i) in detailData" class="msjf-detail">
<view class="detail-list">
<view class="label">序列号</view>
<view class="text">{{ item.sequenceCode }}</view>
</view>
<view class="detail-list">
<view class="label">是否开瓶</view>
<view class="text">{{ item.ifDeCap ? '已开瓶' : '未开瓶' }}</view>
</view>
<view class="detail-list">
<view class="label">开瓶时间</view>
<view class="text">{{ item.deCapTime }}</view>
</view>
<view class="detail-list">
<view class="label">开瓶手机号</view>
<view class="phone-list">
<view v-for="phone in item.phoneList.length" class="text">{{ item.phoneList[phone - 1] }}</view>
</view>
</view>
</view>
</scroll-view>
<uni-load-more v-else status="no-more"></uni-load-more>
</uni-popup>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getMSJFList } from '@/services/api';
import { getMSJFList, getMSJFDetail } from '@/services/api';
import headerVue from '@/pages/header/index.vue';
let color = ref('#a27443');
// 订单数据
let orderData = ref();
// 图片标题
// let titleImg = ref([
// {
// imgUrl: '/static/msjf-picture/msjf-14.png'
// },
// {
// imgUrl: '/static/msjf-picture/msjf-18.png'
// },
// {
// imgUrl: '/static/msjf-picture/msjf-19.png'
// }
// ]);
let detailData = ref();
let num = 1
// let add = () => {
// num.value++;
......@@ -92,6 +103,12 @@ let orderData = ref();
// if (num.value < 1) return;
// else num.value--;
// };
let popup = ref()
let toggle = (type: string, id: number) => {
popup.value?.open(type)
initMSJFDetail(id)
}
// 获取订单数据
let initMSJFList = async () => {
......@@ -100,6 +117,14 @@ let initMSJFList = async () => {
};
initMSJFList();
// 单个商品详情
let initMSJFDetail = async (id: any) => {
let res: any = await getMSJFDetail({orderGoodsId: id})
if(res.data.errno === 0 ) {
detailData.value = res.data.data.list
}
}
</script>
<style lang="scss" scoped>
......@@ -107,6 +132,11 @@ page {
background-color: #f2f2f2;
}
:deep(.uni-popup .uni-popup__wrapper) {
width: 500rpx;
// padding: 0 40rpx;
}
.status_bar {
height: var(--status-bar-height);
width: 100%;
......@@ -257,5 +287,45 @@ page {
width: 200rpx;
}
}
.msjf-detail {
font-size: 14px;
// padding: 20rpx;
background-color: #fff;
margin-bottom: 40rpx;
.detail-list {
box-sizing: border-box;
display: flex;
justify-content: flex-start;
border-bottom: 1px solid #ccc;
.label {
width: 168rpx;
height: 40rpx;
line-height: 40rpx;
text-align: right;
margin-right: 10rpx;
}
.text {
padding-left: 20rpx;
width: 280rpx;
min-height: 40rpx;
max-height: 80rpx;
line-height: 40rpx;
text-align: left;
overflow: hidden;
border-left: 1px solid #ccc;
}
.phone-list {
.text {
width: 230rpx;
min-height: 40rpx;
max-height: 80rpx;
line-height: 40rpx;
text-align: left;
overflow: hidden;
}
}
}
}
}
</style>
......@@ -6,24 +6,27 @@
<view class="query-record">
<view class="content"><uni-search-bar cancelButton="always" v-model="searchValue" placeholder="SN" @confirm="confirm" /></view>
</view>
<view v-for="(item, i) in queryRecord" :key="i">
<view class="query-list">
<image :src="baseURL + item.goodsPicUrl" mode="scaleToFill" />
<view class="record">
<text class="record-text">{{ item.goodsName }}</text>
<view class="record-center">
<text v-if="'phoneAndTime' in queryRecord[i]">扫码手机:{{ 'phoneAndTime' in queryRecord[i] ? item.phoneAndTime[0].phone : '' }}</text>
</view>
<view class="record-footer">
<text class="price">{{ item.goodsPrice }}</text>
<text style="color: #ccc; margin-top: 3%;">{{ item.sameDay }}</text>
<text v-if="item.used" style="color: #ccc; margin-top: 3%;">{{ item.strength }}</text>
<view v-if="queryRecord != '[]'">
<view v-for="(item, i) in queryRecord" :key="i">
<view class="query-list">
<image :src="baseURL + downUrl + item.goodsPicUrl" mode="scaleToFill" />
<view class="record">
<text class="record-text">{{ item.goodsName }}</text>
<view class="record-center">
<text v-if="'phoneAndTime' in queryRecord[i]">扫码手机:{{ 'phoneAndTime' in queryRecord[i] ? item.phoneAndTime[0].phone : '' }}</text>
</view>
<view class="record-footer">
<text class="price">{{ item.goodsPrice }}</text>
<text style="color: #ccc; margin-top: 3%;">{{ item.sameDay }}</text>
<text v-if="item.used" style="color: #ccc; margin-top: 3%;">{{ item.strength }}</text>
</view>
</view>
<view :class="item.used ? 'tag' : 'info-tag'">{{ item.used ? '已开瓶' : '未开瓶' }}</view>
</view>
<view :class="item.used ? 'tag' : 'info-tag'">{{ item.used ? '已开瓶' : '未开瓶' }}</view>
<text style="font-size: 26rpx; color: #313131; margin: 20rpx 60rpx">订单编号:{{ item.orderSn }}</text>
</view>
<text style="font-size: 26rpx; color: #313131; margin: 20rpx 60rpx">订单编号:{{ item.orderSn }}</text>
</view>
<uni-load-more v-else status="no-more"></uni-load-more>
</view>
<!-- <view class="footer">
<button class="btn-footer" @click="importExcel">
......@@ -43,28 +46,28 @@ import { ref } from 'vue';
import headerVue from '@/pages/header/index.vue';
import { searchSnInfo } from '@/services/api';
import { baseURL } from '@/services/request';
import { onLoad } from '@dcloudio/uni-app';
let color = ref('#a27443');
let used = ref(false);
let downUrl = '/wx/storage/fetch/';
// let used = ref(false);
let queryRecord = ref();
let queryPwd = () => {
uni.navigateTo({
url: './queryPwd'
});
};
// let queryPwd = () => {
// uni.navigateTo({
// url: './queryPwd'
// });
// };
let importExcel = () => {
uni.navigateTo({
url: './importExcel'
});
};
// let importExcel = () => {
// uni.navigateTo({
// url: './importExcel'
// });
// };
let confirm = async (data: any) => {
// MSJF-0000001
if (data.value) {
let res: any = await searchSnInfo({ code: data.value });
if (res.data.errno == 0) {
......
......@@ -34,7 +34,6 @@ let downUrl = '/wx/storage/fetch/';
onLoad((options: any) => {
if (options) {
console.log(options);
type.value = JSON.parse(options.type);
if (type.value == 'currency') {
// 通用定制模板
......@@ -77,6 +76,9 @@ let uploadImage = () => {
if (templateId.value) {
uni.chooseImage({
success(res: any) {
uni.showLoading({
title: '上传中...'
});
for (let i = 0; i < res.tempFilePaths.length; i++) {
uni.uploadFile({
url: baseURL + '/wx/storage/upload',
......@@ -89,7 +91,7 @@ let uploadImage = () => {
type: data.type,
sort: imageVideoData.value.length
});
console.log(imageVideoData.value);
uni.hideLoading();
},
fail(res: any) {
console.log(res);
......@@ -196,20 +198,18 @@ let save = () => {
success(res: any) {
if (res.data.errno != 502) {
uni.showLoading({
title: '上传中',
success: () => {
idArr.push(res.data);
if (Number(key) == imageVideoData.value.length - 1) {
saveCustomPage({ fileIds: idArr }).then((res: any) => {
if (res.statusCode == 200) {
uni.hideLoading();
imageVideoData.value = [];
close();
}
});
}
}
title: '上传中'
});
idArr.push(res.data);
if (Number(key) == imageVideoData.value.length - 1) {
saveCustomPage({ fileIds: idArr }).then((res: any) => {
if (res.statusCode == 200) {
uni.hideLoading();
imageVideoData.value = [];
close();
}
});
}
}
},
fail(res: any) {
......@@ -220,36 +220,6 @@ let save = () => {
}
};
let pro = (idArr: any) => {
// if (Number(key) == imageVideoData.value.length - 1) {
// console.log(key, count, imageVideoData.value.length - 1);
if (type.value == 'currency') {
console.log(idArr, '添加');
setTimeout(() => {
templateAdd({ pageComponentList: idArr }).then((res: any) => {
if (res.data.errno == 0) {
uni.hideLoading();
// imageVideoData.value = [];
// close();
}
});
}, 50);
} else {
console.log('編輯', idArr);
setTimeout(() => {
updateCustomPage({ id: templateId.value, pageComponentList: idArr }).then((res: any) => {
if (res.data.errno == 0) {
console.log('你快一点吗!', idArr);
uni.hideLoading();
// imageVideoData.value = [];
// close();
}
});
}, 50);
}
// }
};
// 替换图片
let replaceImg = (index: number) => {
if (imageVideoData.value[index]['type'] == 'image/jpeg') {
......@@ -264,7 +234,6 @@ let replaceImg = (index: number) => {
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera', 'album'], //从相册选择
success: function(res: any) {
console.log(res);
uni.uploadFile({
url: baseURL + '/wx/storage/upload',
filePath: res.tempFilePaths[0],
......@@ -272,7 +241,6 @@ let replaceImg = (index: number) => {
success: (res: any) => {
let data = JSON.parse(res.data).data;
imageVideoData.value[index]['path'] = baseURL + data.url;
console.log(imageVideoData.value);
},
fail(res: any) {
console.log(res);
......@@ -348,10 +316,11 @@ let close = () => {
uni.navigateBack({
delta: 1,
success: () => {
let pages: any = getCurrentPages();
// let currPage = pages[pages.length - 1]; //当前页面
let prePage = pages[pages.length - 2]; //上一个页面
prePage.initHavePage();
uni.$emit('updateData')
// let pages: any = getCurrentPages();
// // let currPage = pages[pages.length - 1]; //当前页面
// let prePage = pages[pages.length - 2]; //上一个页面
// prePage.$vm.initHavePage();
}
});
};
......
......@@ -4,7 +4,7 @@
<view v-for="(item, index) in previewData" :key="item.id">
<view class="preview-list">
<view style="transform:scale(0.7)">
<radio-group @change="change"><radio value="defValue" :checked="item.check" :disabled="item.check" @click="radioChange(item, index)" /></radio-group>
<radio-group><radio value="defValue" :checked="item.check" :disabled="item.check" @click="radioChange(item, index)" /></radio-group>
</view>
<view class="img"><image :src="baseURL + downUrl + item.cover" mode="aspectFill" class="preview-img" /></view>
<view class="preview-content">
......@@ -37,24 +37,19 @@ let previewData = ref();
// 模板子列表数据
let pageData = ref();
let change = (data: string) => {
console.log(data);
}
let radioChange = (data: any, i: number) => {
if (data.check == true) return;
uni.showModal({
content: '确认设为默认?',
success(res) {
if (res.confirm) {
console.log('默认');
customPageChecked({ customPageId: data.id }).then((res: any) => {
if (res.data.errno == 0) {
emits('initHavePage');
}
});
} else {
location.reload()
location.reload();
}
}
});
......@@ -104,8 +99,6 @@ let initHavePage = async () => {
if (previewData.value[s].id == data.previewData.checkedId) previewData.value[s]['check'] = true;
else previewData.value[s]['check'] = false;
}
// checkId.value = data.previewData.checkId;
console.log(previewData.value, 'zzz');
});
};
initHavePage();
......
......@@ -27,7 +27,7 @@ export let getPageComponent = (data: any) => request('/wx/customPage/getPageComp
export let deletePageComponent = (data: any) => request('/wx/customPage/delete', 'POST', data);
// 查询记录
export let searchSnInfo = (sn: string) => request('/wx/orderSequence/searchRecordInfo', 'GET', sn);
export let searchSnInfo = (data: any) => request('/wx/orderSequence/searchRecordInfo', 'GET', data);
// 下载接口
export let downLoad = (imgUrl: string) => request('/wx/storage/download/' + imgUrl, 'GET');
......@@ -37,3 +37,6 @@ export let singleUpload = (data: any) => request('/wx/customPage/update', 'POST'
// 设置默认 http://127.0.0.1:8080/wx/customPage/checked
export let customPageChecked = (data: any) => request('/wx/customPage/checked', 'POST', data)
// 获取开瓶信息
export let getMSJFDetail = (data: any) => request('/wx/order/MSJFDetail', 'GET', data)
## 1.3.3(2022-01-20)
- 新增 showText属性 ,是否显示文本
## 1.3.2(2022-01-19)
- 修复 nvue 平台下不显示文本的bug
## 1.3.1(2022-01-19)
- 修复 微信小程序平台样式选择器报警告的问题
## 1.3.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
## 1.2.1(2021-08-24)
- 新增 支持国际化
## 1.2.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.8(2021-05-12)
- 新增 组件示例地址
## 1.1.7(2021-03-30)
- 修复 uni-load-more 在首页使用时,h5 平台报 'uni is not defined' 的 bug
## 1.1.6(2021-02-05)
- 调整为uni_modules目录规范
{
"uni-load-more.contentdown": "Pull up to show more",
"uni-load-more.contentrefresh": "loading...",
"uni-load-more.contentnomore": "No more data"
}
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
{
"uni-load-more.contentdown": "上拉显示更多",
"uni-load-more.contentrefresh": "正在加载...",
"uni-load-more.contentnomore": "没有更多数据了"
}
{
"uni-load-more.contentdown": "上拉顯示更多",
"uni-load-more.contentrefresh": "正在加載...",
"uni-load-more.contentnomore": "沒有更多數據了"
}
<template>
<view class="uni-load-more" @click="onClick">
<!-- #ifdef APP-NVUE -->
<loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"
:style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"
class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
<!-- #endif -->
<!-- #ifdef H5 -->
<svg width="24" height="24" viewBox="25 25 50 50"
v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}"
class="uni-load-more__img uni-load-more__img--android-H5">
<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle>
</svg>
<!-- #endif -->
<!-- #ifndef APP-NVUE || H5 -->
<view
v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}"
class="uni-load-more__img uni-load-more__img--android-MP">
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view v-else-if="!webviewHide && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
<image :src="imgBase64" mode="widthFix"></image>
</view>
<!-- #endif -->
<text v-if="showText" class="uni-load-more__text"
:style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text>
</view>
</template>
<script>
let platform
setTimeout(() => {
platform = uni.getSystemInfoSync().platform
}, 16)
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const {
t
} = initVueI18n(messages)
/**
* LoadMore 加载更多
* @description 用于列表中,做滚动加载使用,展示 loading 的各种状态
* @tutorial https://ext.dcloud.net.cn/plugin?id=29
* @property {String} status = [more|loading|noMore] loading 的状态
* @value more loading前
* @value loading loading中
* @value noMore 没有更多了
* @property {Number} iconSize 指定图标大小
* @property {Boolean} iconSize = [true|false] 是否显示 loading 图标
* @property {String} iconType = [snow|circle|auto] 指定图标样式
* @value snow ios雪花加载样式
* @value circle 安卓唤醒加载样式
* @value auto 根据平台自动选择加载样式
* @property {String} color 图标和文字颜色
* @property {Object} contentText 各状态文字说明,值为:{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
* @event {Function} clickLoadMore 点击加载更多时触发
*/
export default {
name: 'UniLoadMore',
emits: ['clickLoadMore'],
props: {
status: {
// 上拉的状态:more-loading前;loading-loading中;noMore-没有更多了
type: String,
default: 'more'
},
showIcon: {
type: Boolean,
default: true
},
iconType: {
type: String,
default: 'auto'
},
iconSize: {
type: Number,
default: 24
},
color: {
type: String,
default: '#777777'
},
contentText: {
type: Object,
default () {
return {
contentdown: '',
contentrefresh: '',
contentnomore: ''
}
}
},
showText: {
type: Boolean,
default: true
}
},
data() {
return {
webviewHide: false,
platform: platform,
imgBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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'
}
},
computed: {
iconSnowWidth() {
return (Math.floor(this.iconSize / 24) || 1) * 2
},
contentdownText() {
return this.contentText.contentdown || t("uni-load-more.contentdown")
},
contentrefreshText() {
return this.contentText.contentrefresh || t("uni-load-more.contentrefresh")
},
contentnomoreText() {
return this.contentText.contentnomore || t("uni-load-more.contentnomore")
}
},
mounted() {
// #ifdef APP-PLUS
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
currentWebview.addEventListener('hide', () => {
this.webviewHide = true
})
currentWebview.addEventListener('show', () => {
this.webviewHide = false
})
// #endif
},
methods: {
onClick() {
this.$emit('clickLoadMore', {
detail: {
status: this.status,
}
})
}
}
}
</script>
<style lang="scss" >
.uni-load-more {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
height: 40px;
align-items: center;
justify-content: center;
}
.uni-load-more__text {
font-size: 14px;
margin-left: 8px;
}
.uni-load-more__img {
width: 24px;
height: 24px;
// margin-right: 8px;
}
.uni-load-more__img--nvue {
color: #666666;
}
.uni-load-more__img--android,
.uni-load-more__img--ios {
width: 24px;
height: 24px;
transform: rotate(0deg);
}
/* #ifndef APP-NVUE */
.uni-load-more__img--android {
animation: loading-ios 1s 0s linear infinite;
}
@keyframes loading-android {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.uni-load-more__img--ios-H5 {
position: relative;
animation: loading-ios-H5 1s 0s step-end infinite;
}
.uni-load-more__img--ios-H5 image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
@keyframes loading-ios-H5 {
0% {
transform: rotate(0deg);
}
8% {
transform: rotate(30deg);
}
16% {
transform: rotate(60deg);
}
24% {
transform: rotate(90deg);
}
32% {
transform: rotate(120deg);
}
40% {
transform: rotate(150deg);
}
48% {
transform: rotate(180deg);
}
56% {
transform: rotate(210deg);
}
64% {
transform: rotate(240deg);
}
73% {
transform: rotate(270deg);
}
82% {
transform: rotate(300deg);
}
91% {
transform: rotate(330deg);
}
100% {
transform: rotate(360deg);
}
}
/* #endif */
/* #ifdef H5 */
.uni-load-more__img--android-H5 {
animation: loading-android-H5-rotate 2s linear infinite;
transform-origin: center center;
}
.uni-load-more__img--android-H5 circle {
display: inline-block;
animation: loading-android-H5-dash 1.5s ease-in-out infinite;
stroke: currentColor;
stroke-linecap: round;
}
@keyframes loading-android-H5-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-H5-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120;
}
}
/* #endif */
/* #ifndef APP-NVUE || H5 */
.uni-load-more__img--android-MP {
position: relative;
width: 24px;
height: 24px;
transform: rotate(0deg);
animation: loading-ios 1s 0s ease infinite;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
border: solid 2px transparent;
border-top: solid 2px #777777;
transform-origin: center;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) {
animation: loading-android-MP-1 1s 0s linear infinite;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) {
animation: loading-android-MP-2 1s 0s linear infinite;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) {
animation: loading-android-MP-3 1s 0s linear infinite;
}
@keyframes loading-android {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-MP-1 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-MP-2 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-MP-3 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
/* #endif */
</style>
{
"id": "uni-load-more",
"displayName": "uni-load-more 加载更多",
"version": "1.3.3",
"description": "LoadMore 组件,常用在列表里面,做滚动加载使用。",
"keywords": [
"uni-ui",
"uniui",
"加载更多",
"load-more"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
### LoadMore 加载更多
> **组件名:uni-load-more**
> 代码块: `uLoadMore`
用于列表中,做滚动加载使用,展示 loading 的各种状态。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论