15 changed files with 449 additions and 102 deletions
Unified View
Diff Options
-
+25 -18App.vue
-
+1 -1components/base/m-navbar.vue
-
+2 -2components/base/tabBar.vue
-
+65 -55components/popUpWindow/popUpWindow.vue
-
+270 -0components/virtualScroll/virtualScroll.vue
-
+6 -1locale/ar.js
-
+6 -1locale/en.js
-
+15 -10locale/es.js
-
+6 -1locale/fr.js
-
+9 -5locale/ru.js
-
+7 -5pages/home/home.vue
-
+1 -0pages/login/login.vue
-
+1 -1pages/loginRecord/loginRecord.vue
-
+35 -1pages/purse/purse.vue
-
+0 -1pages/withdraw/withdraw.vue
+ 25
- 18
App.vue
View File
+ 1
- 1
components/base/m-navbar.vue
View File
+ 2
- 2
components/base/tabBar.vue
View File
+ 65
- 55
components/popUpWindow/popUpWindow.vue
View File
+ 270
- 0
components/virtualScroll/virtualScroll.vue
View File
| @ -0,0 +1,270 @@ | |||||
| <!-- 首页虚拟滚动 --> | |||||
| <template> | |||||
| <view class="virtualScroll content"> | |||||
| <view class="success_info_body"> | |||||
| <!-- 标准title可以调用组件 --> | |||||
| <view class="title_view"> | |||||
| {{ $t('page.virtualScroll.title') }} | |||||
| </view> | |||||
| <!-- 参数名称、列数根据实际情况调整 --> | |||||
| <view class="table_body"> | |||||
| <view class="table_main_body"> | |||||
| <view class="table_inner_body" :class="{ animate }" :style="{top: tableTop + 'px'}"> | |||||
| <view class="table_tr" v-for="(item,index) in tableList" :key="index"> | |||||
| <view class="tr1 tr">{{item.planNo}}</view> | |||||
| <view class="tr2 tr">{{item.type}}</view> | |||||
| <view class="tr3 tr" v-if="item.startDate!='-'">{{item.startDate}} ~ {{item.endDate}}</view> | |||||
| <view class="tr3 tr" v-else>-</view> | |||||
| <view class="tr4 tr" v-if="item.process!='-'">{{Number(item.process).toFixed(2)}} %</view> | |||||
| <view class="tr4 tr" v-else>-</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| tableTimer: null, | |||||
| tableTop: 0, | |||||
| tableList: [{ | |||||
| "process": 0.0000, | |||||
| "planNo": "BP2022060701", | |||||
| "endDate": "2022-06-07", | |||||
| "type": "砌块", | |||||
| "startDate": "2022-06-07" | |||||
| }, | |||||
| { | |||||
| "process": 0.0000, | |||||
| "planNo": "WP2022061301", | |||||
| "endDate": "2022-06-13", | |||||
| "type": "墙板", | |||||
| "startDate": "2022-06-13" | |||||
| }, | |||||
| { | |||||
| "process": 0.0000, | |||||
| "planNo": "WP2022061301", | |||||
| "endDate": "2022-06-13", | |||||
| "type": "墙板", | |||||
| "startDate": "2022-06-13" | |||||
| }, | |||||
| { | |||||
| "process": 0.0000, | |||||
| "planNo": "WP2022061301", | |||||
| "endDate": "2022-06-13", | |||||
| "type": "墙板", | |||||
| "startDate": "2022-06-13" | |||||
| }, | |||||
| { | |||||
| "process": 0.0000, | |||||
| "planNo": "WP2022061301", | |||||
| "endDate": "2022-06-13", | |||||
| "type": "墙板", | |||||
| "startDate": "2022-06-13" | |||||
| }, | |||||
| { | |||||
| "process": 0.0000, | |||||
| "planNo": "WP2022061301", | |||||
| "endDate": "2022-06-13", | |||||
| "type": "墙板", | |||||
| "startDate": "2022-06-13" | |||||
| }, | |||||
| { | |||||
| "process": 0.0000, | |||||
| "planNo": "WP2022061301", | |||||
| "endDate": "2022-06-13", | |||||
| "type": "墙板", | |||||
| "startDate": "2022-06-13" | |||||
| } | |||||
| ], | |||||
| tableListSize: 0, | |||||
| componentTimer: null, | |||||
| //需要根据情况设置的参数 | |||||
| visibleSize: 3, //容器内可视最大完整行数 | |||||
| lineHeight: this.getRpxToPx(162), //每行的实际高度（包含margin-top/bottom,border等） | |||||
| componentTimerInterval: 3600000, //刷新数据的时间间隔 | |||||
| tableTimerInterval: 1000, //向上滚动 1px 所需要的时间，越小越快，推荐值 100 | |||||
| animate : true | |||||
| } | |||||
| }, | |||||
| //如果没有父元素传值，将watch内的内容搬至mounted中即可 | |||||
| props: ["activeFactoryId"], | |||||
| watch: { | |||||
| activeFactoryId(val, oldVal) { | |||||
| clearInterval(this.componentTimer); | |||||
| this.bsGetProductProcess(); | |||||
| this.componentTimerFun(); | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| clearInterval(this.componentTimer); | |||||
| this.bsGetProductProcess(); | |||||
| this.componentTimerFun(); | |||||
| }, | |||||
| beforeDestroy() { | |||||
| clearInterval(this.componentTimer); | |||||
| clearInterval(this.tableTimer); | |||||
| }, | |||||
| methods: { | |||||
| //调用数据接口，获取列表数据 | |||||
| bsGetProductProcess() { | |||||
| clearInterval(this.tableTimer); | |||||
| this.tableTop = 0; | |||||
| if (this.activeFactoryId != "") { | |||||
| // this.request('forgetPass').then(res => { | |||||
| // if(res.code == 200){ | |||||
| // this.serverList = res.result | |||||
| // } | |||||
| // }) | |||||
| this.tableActionFun(); | |||||
| } | |||||
| }, | |||||
| tableActionFun() { | |||||
| this.tableListSize = this.tableList.length; //数据总数 | |||||
| if (this.tableListSize > this.visibleSize) { //总数大于容器内可视最大完整行数 | |||||
| this.tableList = this.tableList.concat(this.tableList); //拼接一个数组数据 | |||||
| this.tableTimerFun(); | |||||
| } else { | |||||
| this.fillTableList(); | |||||
| } | |||||
| }, | |||||
| //当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可 | |||||
| fillTableList() { | |||||
| var addLength = this.visibleSize - this.tableListSize; | |||||
| for (var i = 0; i < addLength; i++) { | |||||
| this.tableList.push({ | |||||
| planNo: "-", | |||||
| type: "-", | |||||
| startDate: "-", | |||||
| endDate: "-", | |||||
| process: "-" | |||||
| }); | |||||
| } | |||||
| }, | |||||
| //控制元素滚动 | |||||
| tableTimerFun() { | |||||
| var count = 0; | |||||
| this.tableTimer = setInterval(() => { | |||||
| if (count < (this.tableList.length / 2) * this.lineHeight) { | |||||
| this.animate = true | |||||
| this.tableTop -= this.lineHeight; | |||||
| count += this.lineHeight; | |||||
| } else { | |||||
| this.animate = false | |||||
| this.tableTop = 0; | |||||
| count = 0; | |||||
| } | |||||
| }, this.tableTimerInterval); | |||||
| }, | |||||
| //更新数据 | |||||
| componentTimerFun() { | |||||
| this.componentTimer = setInterval(() => { | |||||
| this.bsGetProductProcess(); | |||||
| }, this.componentTimerInterval); | |||||
| }, | |||||
| //转换rpx单位 | |||||
| getRpxToPx(rpx) { | |||||
| // 获取系统信息，这里使用同步方法uni.getSystemInfoSync | |||||
| const systemInfo = uni.getSystemInfoSync(); | |||||
| // 假设设计稿宽度为750rpx | |||||
| const designWidth = 750; | |||||
| // 屏幕宽度，单位为px | |||||
| const screenWidth = systemInfo.screenWidth; | |||||
| // 计算1rpx等于多少px | |||||
| const rpxToPx = screenWidth / (designWidth / rpx); | |||||
| console.log(rpxToPx); | |||||
| return rpxToPx; | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .virtualScroll { | |||||
| width: 100%; | |||||
| height: 560rpx; | |||||
| } | |||||
| .content { | |||||
| width: 96%; | |||||
| margin: 0 auto; | |||||
| color: $uni-bg-color-app; | |||||
| } | |||||
| .title_view { | |||||
| width: 100%; | |||||
| font-size: 32rpx; | |||||
| } | |||||
| .table_body { | |||||
| width: 100%; | |||||
| margin-top: 15rpx; | |||||
| } | |||||
| .tr { | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| white-space: nowrap; | |||||
| box-sizing: border-box; | |||||
| padding: 0 5px; | |||||
| text-align: center; | |||||
| font-size: 30rpx; | |||||
| } | |||||
| .tr1 { | |||||
| width: 28%; | |||||
| } | |||||
| .tr2 { | |||||
| width: 15%; | |||||
| } | |||||
| .tr3 { | |||||
| width: 35%; | |||||
| font-size: 24rpx; | |||||
| } | |||||
| .tr4 { | |||||
| flex: 1; | |||||
| } | |||||
| .table_main_body { | |||||
| width: 100%; | |||||
| height: 480rpx; | |||||
| overflow: hidden; | |||||
| position: relative; | |||||
| } | |||||
| .table_inner_body { | |||||
| width: 98%; | |||||
| position: absolute; | |||||
| left: 1%; | |||||
| } | |||||
| .animate{ | |||||
| transition: all .3s; | |||||
| } | |||||
| .table_tr { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| height: 140rpx; | |||||
| color: $uni-bg-color-app; | |||||
| font-size: 30rpx; | |||||
| margin-bottom: 20rpx; | |||||
| // box-shadow: 2rpx 2rpx 6rpx 1rpx rgba(0, 0, 0, .1), | |||||
| // -2rpx -2rpx 6rpx 1rpx rgba(0, 0, 0, .1); | |||||
| border-radius: 10rpx; | |||||
| background: $uni-bg-color; | |||||
| border: 2rpx solid #ccc; | |||||
| } | |||||
| </style> | |||||