医废处置公司小程序
This commit is contained in:
@@ -0,0 +1,443 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="tui-header">
|
||||
<view class="tui-sub-title" style="padding-bottom: 10rpx;">累计转运批次(次)</view>
|
||||
<view class="tui-title">20</view>
|
||||
<view class="tui-sub-title" style="padding-top: 10rpx;">总重量:128 kg 总数量:72箱</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<qiun-title-bar title="转运统计"/>
|
||||
<view class="tui-flex-box">
|
||||
<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx"><text style="font-size:11px;">近15日</text></tui-tag>
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="column" :chartData="chartsDataColumn" :echartsH5="true" :echartsApp="true" :opts="opts"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tui-sticky :scrollTop="scrollTop" stickyHeight="104rpx" container>
|
||||
<template v-slot:header>
|
||||
<view class="sticky-item">
|
||||
<view class="date">本月</view>
|
||||
<view class="amount">
|
||||
<view>转运: <text style="color:#ff0000;font-size: 34rpx;font-weight: 600;"> 508.2kg 47箱</text></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<view class="tui-list-view" @tap="showDetail()">
|
||||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150">
|
||||
<view class="content-box">
|
||||
<image :src="apiHost+'/miniapp/static/car.png'" class="logo"></image>
|
||||
<view class="des-box">
|
||||
<view class="tit">重量:302kg 箱数:4</view>
|
||||
<view class="source">转运人员:李元</view>
|
||||
<view class="time">转运批次编码:0084001</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="money add">
|
||||
09-03 13:18
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tui-list-view" @tap="showDetail()">
|
||||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150">
|
||||
<view class="content-box">
|
||||
<image :src="apiHost+'/miniapp/static/car.png'" class="logo"></image>
|
||||
<view class="des-box">
|
||||
<view class="tit">重量:302kg 箱数:4</view>
|
||||
<view class="source">转运人员:李元</view>
|
||||
<view class="time">转运批次编码:0084001</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="money add">
|
||||
09-03 13:18
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tui-list-view" @tap="showDetail()">
|
||||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150">
|
||||
<view class="content-box">
|
||||
<image :src="apiHost+'/miniapp/static/car.png'" class="logo"></image>
|
||||
<view class="des-box">
|
||||
<view class="tit">重量:302kg 箱数:4</view>
|
||||
<view class="source">转运人员:李元</view>
|
||||
<view class="time">转运批次编码:0084001</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="money add">
|
||||
09-03 13:18
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tui-list-view" @tap="showDetail()">
|
||||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150">
|
||||
<view class="content-box">
|
||||
<image :src="apiHost+'/miniapp/static/car.png'" class="logo"></image>
|
||||
<view class="des-box">
|
||||
<view class="tit">重量:302kg 箱数:4</view>
|
||||
<view class="source">转运人员:李元</view>
|
||||
<view class="time">转运批次编码:0084001</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="money add">
|
||||
09-03 13:18
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</tui-sticky>
|
||||
<tui-sticky :scrollTop="scrollTop" stickyHeight="104rpx" container>
|
||||
<template v-slot:header>
|
||||
<view class="sticky-item">
|
||||
<view class="date">9月</view>
|
||||
<view class="amount">
|
||||
<view>转运: <text style="color:#ff0000;font-size: 34rpx;font-weight: 600;"> 508.2kg 47箱</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<!--内容 start-->
|
||||
<view class="tui-list-view" @tap="showDetail()">
|
||||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150">
|
||||
<view class="content-box">
|
||||
<image :src="apiHost+'/miniapp/static/car.png'" class="logo"></image>
|
||||
<view class="des-box">
|
||||
<view class="tit">重量:302kg 箱数:4</view>
|
||||
<view class="source">转运人员:李元</view>
|
||||
<view class="time">转运批次编码:0084001</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="money add">
|
||||
09-03 13:18
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tui-list-view" @tap="showDetail()">
|
||||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150">
|
||||
<view class="content-box">
|
||||
<image :src="apiHost+'/miniapp/static/car.png'" class="logo"></image>
|
||||
<view class="des-box">
|
||||
<view class="tit">重量:302kg 箱数:4</view>
|
||||
<view class="source">转运人员:李元</view>
|
||||
<view class="time">转运批次编码:0084001</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="money add">
|
||||
09-03 13:18
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tui-list-view" @tap="showDetail()">
|
||||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150">
|
||||
<view class="content-box">
|
||||
<image :src="apiHost+'/miniapp/static/car.png'" class="logo"></image>
|
||||
<view class="des-box">
|
||||
<view class="tit">重量:302kg 箱数:4</view>
|
||||
<view class="source">转运人员:李元</view>
|
||||
<view class="time">转运批次编码:0084001</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="money add">
|
||||
09-03 13:18
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tui-list-view" @tap="showDetail()">
|
||||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150">
|
||||
<view class="content-box">
|
||||
<image :src="apiHost+'/miniapp/static/car.png'" class="logo"></image>
|
||||
<view class="des-box">
|
||||
<view class="tit">重量:302kg 箱数:4</view>
|
||||
<view class="source">转运人员:李元</view>
|
||||
<view class="time">转运批次编码:0084001</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="money add">
|
||||
09-03 13:18
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</tui-sticky>
|
||||
<tui-loadmore style="position:relative;top:-20rpx" v-if="showloadmore"></tui-loadmore>
|
||||
<tui-nomore style="position:relative;top:-20rpx" v-if="shownomore"></tui-nomore>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myapp from '@/common/js/myapp.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
apiHost: myapp.apiHost,
|
||||
scrollTop: 0,
|
||||
showloadmore: false,
|
||||
shownomore: false,
|
||||
chartsDataColumn: {
|
||||
"categories": ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15'],
|
||||
"series": [{
|
||||
"name": "转运次数",
|
||||
"data": ['28','32','46','32','12','35','43','21','24','45','32','24','54','12','36'],
|
||||
"color": "#5087EC"
|
||||
}]
|
||||
},
|
||||
opts: {
|
||||
legend:{
|
||||
show: false
|
||||
},
|
||||
extra: {
|
||||
column:{
|
||||
width: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
onShow: function() {
|
||||
let user = myapp.checkLogin()
|
||||
uni.setStorageSync('lastPagePath', '/packagePage/pages/record/record')
|
||||
},
|
||||
methods: {
|
||||
showDetail: function() {
|
||||
uni.navigateTo({
|
||||
url:'/packagePage/pages/history_plan_trans_list/history_plan_trans_list'
|
||||
})
|
||||
},
|
||||
//页面滚动执行方式
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
}
|
||||
// onReachBottom: function() {
|
||||
// if (this.curId >= 30) {
|
||||
// this.shownomore = true
|
||||
// return false
|
||||
// }
|
||||
// this.showloadmore = true
|
||||
// uni.showLoading({
|
||||
// title: '加载中'
|
||||
// })
|
||||
// setTimeout(() => {
|
||||
// let records = this.records
|
||||
// for (let i = 0; i < 10; i++) {
|
||||
// this.curId++
|
||||
// let row = {id: this.curId}
|
||||
// records = records.concat([row])
|
||||
// }
|
||||
// this.records = records
|
||||
// this.showloadmore = false
|
||||
// uni.hideLoading()
|
||||
// }, 1000)
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '../../../static/style/thorui.css';
|
||||
|
||||
page {
|
||||
background-color: #F5F6FA;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tui-flex-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
top:-80rpx;
|
||||
}
|
||||
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.tips {
|
||||
background: #fff;
|
||||
padding: 30rpx 14rpx;
|
||||
color: #555;
|
||||
font-size: 24rpx;
|
||||
line-height: 42rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tips::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-top: 1rpx solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* sticky 容器 start */
|
||||
.sticky-item {
|
||||
width: 100%;
|
||||
height: 104rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #fafafa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* sticky 容器 end */
|
||||
|
||||
.date {
|
||||
height: 54rpx;
|
||||
font-size: 28rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 25rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
/* box-shadow: 0 0 1rpx #7A7A7A; */
|
||||
}
|
||||
|
||||
.date::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 200%;
|
||||
width: 200%;
|
||||
border: 1rpx solid #eaeef1;
|
||||
border-radius: 60rpx;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.amount {
|
||||
text-align: right;
|
||||
color: #686868;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.list-view {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-view::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-top: 1rpx solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tui-list-item {
|
||||
width: 100%;
|
||||
padding: 30rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tui-list-item::after {
|
||||
left: 120rpx
|
||||
}
|
||||
|
||||
.item-last::after {
|
||||
left: 0 !important
|
||||
}
|
||||
|
||||
.content-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.des-box {
|
||||
min-height: 130rpx;
|
||||
padding-left: 28rpx;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 28rpx;
|
||||
max-width: 420rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.source {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.add {
|
||||
color: #5677FC !important;
|
||||
}
|
||||
|
||||
.tui-color-primary {
|
||||
color: #5677fc;
|
||||
}
|
||||
|
||||
.tui-header {
|
||||
padding: 40rpx 40rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tui-title {
|
||||
font-size: 46rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tui-sub-title {
|
||||
font-size: 26rpx;
|
||||
color: #7a7a7a;
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user