xpz2018
4 years ago
30 changed files with 954 additions and 523 deletions
Unified View
Diff Options
-
5api/saas.js
-
BINassets/home/icon-report.png
-
43components/circle/canvas.js
-
185components/circle/index.js
-
3components/circle/index.json
-
9components/circle/index.wxml
-
1components/circle/index.wxss
-
3components/grid-item/index.js
-
7components/grid-item/index.wxml
-
215components/table/index.js
-
2components/table/index.json
-
43components/table/index.wxml
-
76components/table/index.wxss
-
2pages/home/index/index.wxml
-
BINxtends/image/icon-agent.png
-
BINxtends/image/icon-gross.png
-
BINxtends/image/icon-purchase.png
-
BINxtends/image/icon-sale.png
-
82xtends/statics/agent-report/index.js
-
26xtends/statics/agent-report/index.wxml
-
82xtends/statics/gross-report/index.js
-
27xtends/statics/gross-report/index.wxml
-
209xtends/statics/index/index.js
-
2xtends/statics/index/index.json
-
175xtends/statics/index/index.wxml
-
59xtends/statics/index/index.wxss
-
92xtends/statics/purchase-report/index.js
-
18xtends/statics/purchase-report/index.wxml
-
84xtends/statics/sale-report/index.js
-
27xtends/statics/sale-report/index.wxml
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 3.4 KiB |
@ -0,0 +1,43 @@ |
|||||
|
export function adaptor(ctx) { |
||||
|
// @ts-ignore
|
||||
|
return Object.assign(ctx, { |
||||
|
setStrokeStyle(val) { |
||||
|
ctx.strokeStyle = val; |
||||
|
}, |
||||
|
setLineWidth(val) { |
||||
|
ctx.lineWidth = val; |
||||
|
}, |
||||
|
setLineCap(val) { |
||||
|
ctx.lineCap = val; |
||||
|
}, |
||||
|
setFillStyle(val) { |
||||
|
ctx.fillStyle = val; |
||||
|
}, |
||||
|
setFontSize(val) { |
||||
|
ctx.font = String(val); |
||||
|
}, |
||||
|
setGlobalAlpha(val) { |
||||
|
ctx.globalAlpha = val; |
||||
|
}, |
||||
|
setLineJoin(val) { |
||||
|
ctx.lineJoin = val; |
||||
|
}, |
||||
|
setTextAlign(val) { |
||||
|
ctx.textAlign = val; |
||||
|
}, |
||||
|
setMiterLimit(val) { |
||||
|
ctx.miterLimit = val; |
||||
|
}, |
||||
|
setShadow(offsetX, offsetY, blur, color) { |
||||
|
ctx.shadowOffsetX = offsetX; |
||||
|
ctx.shadowOffsetY = offsetY; |
||||
|
ctx.shadowBlur = blur; |
||||
|
ctx.shadowColor = color; |
||||
|
}, |
||||
|
setTextBaseline(val) { |
||||
|
ctx.textBaseline = val; |
||||
|
}, |
||||
|
createCircularGradient() {}, |
||||
|
draw() {}, |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,185 @@ |
|||||
|
import { VantComponent } from '../common/component'; |
||||
|
import { BLUE, WHITE } from '../common/color'; |
||||
|
import { adaptor } from './canvas'; |
||||
|
import { isObj } from '../common/validator'; |
||||
|
import { getSystemInfoSync } from '../common/utils'; |
||||
|
function format(rate) { |
||||
|
return Math.min(Math.max(rate, 0), 100); |
||||
|
} |
||||
|
const PERIMETER = 2 * Math.PI; |
||||
|
const BEGIN_ANGLE = -Math.PI / 2; |
||||
|
const STEP = 1; |
||||
|
VantComponent({ |
||||
|
props: { |
||||
|
text: String, |
||||
|
lineCap: { |
||||
|
type: String, |
||||
|
value: 'round', |
||||
|
}, |
||||
|
value: { |
||||
|
type: Number, |
||||
|
value: 0, |
||||
|
observer: 'reRender', |
||||
|
}, |
||||
|
speed: { |
||||
|
type: Number, |
||||
|
value: 50, |
||||
|
}, |
||||
|
size: { |
||||
|
type: Number, |
||||
|
value: 100, |
||||
|
observer() { |
||||
|
this.drawCircle(this.currentValue); |
||||
|
}, |
||||
|
}, |
||||
|
fill: String, |
||||
|
layerColor: { |
||||
|
type: String, |
||||
|
value: WHITE, |
||||
|
}, |
||||
|
color: { |
||||
|
type: null, |
||||
|
value: BLUE, |
||||
|
observer() { |
||||
|
this.setHoverColor().then(() => { |
||||
|
this.drawCircle(this.currentValue); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
value: '', |
||||
|
}, |
||||
|
strokeWidth: { |
||||
|
type: Number, |
||||
|
value: 4, |
||||
|
}, |
||||
|
clockwise: { |
||||
|
type: Boolean, |
||||
|
value: true, |
||||
|
}, |
||||
|
}, |
||||
|
data: { |
||||
|
hoverColor: BLUE, |
||||
|
}, |
||||
|
methods: { |
||||
|
getContext() { |
||||
|
const { type, size } = this.data; |
||||
|
if (type === '') { |
||||
|
const ctx = wx.createCanvasContext('van-circle', this); |
||||
|
return Promise.resolve(ctx); |
||||
|
} |
||||
|
const dpr = getSystemInfoSync().pixelRatio; |
||||
|
return new Promise((resolve) => { |
||||
|
wx.createSelectorQuery() |
||||
|
.in(this) |
||||
|
.select('#van-circle') |
||||
|
.node() |
||||
|
.exec((res) => { |
||||
|
const canvas = res[0].node; |
||||
|
const ctx = canvas.getContext(type); |
||||
|
if (!this.inited) { |
||||
|
this.inited = true; |
||||
|
canvas.width = size * dpr; |
||||
|
canvas.height = size * dpr; |
||||
|
ctx.scale(dpr, dpr); |
||||
|
} |
||||
|
resolve(adaptor(ctx)); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
setHoverColor() { |
||||
|
const { color, size } = this.data; |
||||
|
if (isObj(color)) { |
||||
|
return this.getContext().then((context) => { |
||||
|
const LinearColor = context.createLinearGradient(size, 0, 0, 0); |
||||
|
Object.keys(color) |
||||
|
.sort((a, b) => parseFloat(a) - parseFloat(b)) |
||||
|
.map((key) => |
||||
|
LinearColor.addColorStop(parseFloat(key) / 100, color[key]) |
||||
|
); |
||||
|
this.hoverColor = LinearColor; |
||||
|
}); |
||||
|
} |
||||
|
this.hoverColor = color; |
||||
|
return Promise.resolve(); |
||||
|
}, |
||||
|
presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) { |
||||
|
const { strokeWidth, lineCap, clockwise, size } = this.data; |
||||
|
const position = size / 2; |
||||
|
const radius = position - strokeWidth / 2; |
||||
|
context.setStrokeStyle(strokeStyle); |
||||
|
context.setLineWidth(strokeWidth); |
||||
|
context.setLineCap(lineCap); |
||||
|
context.beginPath(); |
||||
|
context.arc(position, position, radius, beginAngle, endAngle, !clockwise); |
||||
|
context.stroke(); |
||||
|
if (fill) { |
||||
|
context.setFillStyle(fill); |
||||
|
context.fill(); |
||||
|
} |
||||
|
}, |
||||
|
renderLayerCircle(context) { |
||||
|
const { layerColor, fill } = this.data; |
||||
|
this.presetCanvas(context, layerColor, 0, PERIMETER, fill); |
||||
|
}, |
||||
|
renderHoverCircle(context, formatValue) { |
||||
|
const { clockwise } = this.data; |
||||
|
// 结束角度
|
||||
|
const progress = PERIMETER * (formatValue / 100); |
||||
|
const endAngle = clockwise |
||||
|
? BEGIN_ANGLE + progress |
||||
|
: 3 * Math.PI - (BEGIN_ANGLE + progress); |
||||
|
this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle); |
||||
|
}, |
||||
|
drawCircle(currentValue) { |
||||
|
const { size } = this.data; |
||||
|
this.getContext().then((context) => { |
||||
|
context.clearRect(0, 0, size, size); |
||||
|
this.renderLayerCircle(context); |
||||
|
const formatValue = format(currentValue); |
||||
|
if (formatValue !== 0) { |
||||
|
this.renderHoverCircle(context, formatValue); |
||||
|
} |
||||
|
context.draw(); |
||||
|
}); |
||||
|
}, |
||||
|
reRender() { |
||||
|
// tofector 动画暂时没有想到好的解决方案
|
||||
|
const { value, speed } = this.data; |
||||
|
if (speed <= 0 || speed > 1000) { |
||||
|
this.drawCircle(value); |
||||
|
return; |
||||
|
} |
||||
|
this.clearInterval(); |
||||
|
this.currentValue = this.currentValue || 0; |
||||
|
this.interval = setInterval(() => { |
||||
|
if (this.currentValue !== value) { |
||||
|
if (this.currentValue < value) { |
||||
|
this.currentValue += STEP; |
||||
|
} else { |
||||
|
this.currentValue -= STEP; |
||||
|
} |
||||
|
this.drawCircle(this.currentValue); |
||||
|
} else { |
||||
|
this.clearInterval(); |
||||
|
} |
||||
|
}, 1000 / speed); |
||||
|
}, |
||||
|
clearInterval() { |
||||
|
if (this.interval) { |
||||
|
clearInterval(this.interval); |
||||
|
this.interval = null; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.currentValue = this.data.value; |
||||
|
this.setHoverColor().then(() => { |
||||
|
this.drawCircle(this.currentValue); |
||||
|
}); |
||||
|
}, |
||||
|
destroyed() { |
||||
|
this.clearInterval(); |
||||
|
}, |
||||
|
}); |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
<wxs src="../wxs/utils.wxs" module="utils" /> |
||||
|
|
||||
|
<view class="van-circle"> |
||||
|
<canvas class="van-circle__canvas" type="{{ type }}" style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" id="van-circle" canvas-id="van-circle"></canvas> |
||||
|
<view wx:if="{{ !text }}" class="van-circle__text"> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
|
<cover-view wx:else class="van-circle__text">{{ text }}</cover-view> |
||||
|
</view> |
||||
@ -0,0 +1 @@ |
|||||
|
@import '../common/index.wxss';.van-circle{position:relative;display:inline-block;text-align:center}.van-circle__text{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#323233;color:var(--circle-text-color,#323233)} |
||||
@ -1,138 +1,89 @@ |
|||||
/** slot action 固定按钮操作 |
|
||||
* btnName 按钮名 |
|
||||
* valueCallback 按钮返回值 |
|
||||
按钮绑定事件 btnClick |
|
||||
|
|
||||
tr绑定事件 onRowClick |
|
||||
valueCallback tr返回值 |
|
||||
|
|
||||
columns 数组 { |
|
||||
key: '', |
|
||||
title: '', |
|
||||
width: 200, |
|
||||
fixed: 'left', //设置fixed 必须设置width
|
|
||||
align: 'center', |
|
||||
|
|
||||
// 按钮默认 slot action
|
|
||||
slot: 'action' |
|
||||
valueCallback: '', |
|
||||
btnName: '' |
|
||||
} |
|
||||
**/ |
|
||||
Component({ |
Component({ |
||||
options: { |
|
||||
multipleSlots: true, |
|
||||
|
/** |
||||
|
* 外部样式类 |
||||
|
*/ |
||||
|
externalClasses: ['header-row-class-name', 'row-class-name', 'cell-class-name'], |
||||
|
/** |
||||
|
* 组件样式隔离 |
||||
|
*/ |
||||
|
options: { |
||||
|
styleIsolation: "isolated", |
||||
|
multipleSlots: true // 支持多个slot
|
||||
|
}, |
||||
|
/** |
||||
|
* 组件的属性列表 |
||||
|
*/ |
||||
|
properties: { |
||||
|
data: { |
||||
|
type: Array, |
||||
|
value: [] |
||||
}, |
}, |
||||
// 自定义外部样式class th头部样式 tr样式 td样式
|
|
||||
externalClasses: ['thead-row-class', 'tbody-tow-class', 'td-class'], |
|
||||
properties: { |
|
||||
// td 数组
|
|
||||
data: { |
|
||||
type: Array, |
|
||||
value: [] |
|
||||
}, |
|
||||
// thead 数组
|
|
||||
columns: { |
|
||||
type: Array, |
|
||||
value: [] |
|
||||
}, |
|
||||
// table 高度
|
|
||||
height: { |
|
||||
type: String, |
|
||||
value: 'auto' |
|
||||
}, |
|
||||
// table 宽度
|
|
||||
width: { |
|
||||
type: Number || String, |
|
||||
value: 750 |
|
||||
}, |
|
||||
// 单元格的宽度
|
|
||||
tdWidth: { |
|
||||
type: Number, |
|
||||
value: 35 |
|
||||
}, |
|
||||
// 固定表头 thead达到Header的位置时就应该被fixed了
|
|
||||
offsetTop: { |
|
||||
type: Number, |
|
||||
value: 150 |
|
||||
}, |
|
||||
// 是否带有纵向边框
|
|
||||
isBorder: { |
|
||||
type: Boolean, |
|
||||
value: true |
|
||||
}, |
|
||||
// 是否带有斑马条纹
|
|
||||
isStripe: { |
|
||||
type: Boolean, |
|
||||
value: true |
|
||||
}, |
|
||||
// tr 返回值Key
|
|
||||
valueCallback: { |
|
||||
type: String, |
|
||||
value: '' |
|
||||
}, |
|
||||
// 无数据时信息
|
|
||||
msg: { |
|
||||
type: String, |
|
||||
value: '暂无数据~' |
|
||||
}, |
|
||||
// thead 固定
|
|
||||
isFixed: { |
|
||||
type: Boolean, |
|
||||
value: true |
|
||||
}, |
|
||||
|
headers: { |
||||
|
type: Array, |
||||
|
value: [] |
||||
}, |
}, |
||||
data: { |
|
||||
scrolWidth: '100%', |
|
||||
marginTopValue: 0, |
|
||||
leftWidth: 0, |
|
||||
leftIndex: 0, |
|
||||
rightWidth: 0, |
|
||||
rightIndex: 0, |
|
||||
|
// table的高度, 溢出可滚动
|
||||
|
height: { |
||||
|
type: Number || String, |
||||
|
value: 'auto' |
||||
|
}, |
||||
|
width: { |
||||
|
type: Number || String, |
||||
|
value: '100%' |
||||
}, |
}, |
||||
// 生命周期
|
|
||||
lifetimes: { |
|
||||
// 组件实例进入页面节点树时调用
|
|
||||
attached() { |
|
||||
const scrolWidth = this.properties.columns.reduce((total, item) => total + item.width, 0) |
|
||||
this.createSelectorQuery().selectAll(".thead .td").boundingClientRect((res) => { |
|
||||
if (!isNaN(scrolWidth)) { |
|
||||
this.properties.columns.map(item => { |
|
||||
item.width = item.width / scrolWidth * this.properties.width |
|
||||
}) |
|
||||
} else { |
|
||||
this.properties.columns.map((item, index) => { |
|
||||
item.width = res[index].width |
|
||||
}) |
|
||||
} |
|
||||
}).exec(res => { |
|
||||
let list = [], listLeft = [], listRight = [], leftWidth = 0, rightWidth = 0; |
|
||||
list = this.properties.columns.filter(item => !item.fixed) |
|
||||
listLeft = this.properties.columns.filter(item => item.fixed == 'left') |
|
||||
listLeft.map(item => { |
|
||||
leftWidth += item.width |
|
||||
}) |
|
||||
listRight = this.properties.columns.filter(item => item.fixed == 'right') |
|
||||
listRight.map(item => { |
|
||||
rightWidth += item.width |
|
||||
}) |
|
||||
this.setData({ |
|
||||
columns: [...listLeft, ...list, ...listRight], |
|
||||
marginTopValue: res[0][0].height, |
|
||||
leftWidth: leftWidth, |
|
||||
rightWidth: rightWidth, |
|
||||
leftIndex: listLeft.length ? listLeft.length : 0, |
|
||||
rightIndex: listRight.length ? this.properties.columns.length - listRight.length - 1 : 0 |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
// 单元格的宽度
|
||||
|
tdWidth: { |
||||
|
type: Number, |
||||
|
value: 35 |
||||
}, |
}, |
||||
methods: { |
|
||||
onRowClick(e) { |
|
||||
this.triggerEvent('rowClick', e.target.dataset) |
|
||||
}, |
|
||||
onBtnClick(e) { |
|
||||
this.triggerEvent('btnClick', e.target.dataset) |
|
||||
} |
|
||||
|
// 固定表头 thead达到Header的位置时就应该被fixed了
|
||||
|
offsetTop: { |
||||
|
type: Number, |
||||
|
value: 150 |
||||
}, |
}, |
||||
}) |
|
||||
|
// 是否带有纵向边框
|
||||
|
stripe: { |
||||
|
type: Boolean, |
||||
|
value: false |
||||
|
}, |
||||
|
// 是否带有纵向边框
|
||||
|
border: { |
||||
|
type: Boolean, |
||||
|
value: true |
||||
|
}, |
||||
|
msg: { |
||||
|
type: String, |
||||
|
value: '暂无数据~' |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 组件的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
scrolWidth: '100%' |
||||
|
}, |
||||
|
/** |
||||
|
* 组件的监听属性 |
||||
|
*/ |
||||
|
observers: { |
||||
|
// 在 numberA 或者 numberB 被设置时，执行这个函数
|
||||
|
'headers': function headers(_headers) { |
||||
|
var reducer = function reducer(accumulator, currentValue) { |
||||
|
return accumulator + Number(currentValue.width); |
||||
|
}; |
||||
|
var scrolWidth = _headers.reduce(reducer, 0); |
||||
|
|
||||
|
this.setData({ |
||||
|
scrolWidth: scrolWidth |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 组件的方法列表 |
||||
|
*/ |
||||
|
methods: { |
||||
|
onRowClick: function onRowClick(e) { |
||||
|
this.triggerEvent('rowClick', e, e.currentTarget.dataset.it); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -1,3 +1,3 @@ |
|||||
{ |
{ |
||||
"component": true |
"component": true |
||||
} |
|
||||
|
} |
||||
@ -1,22 +1,21 @@ |
|||||
<scroll-view scroll-x="true" enable-flex="true" class="table" style="width: 100%;"> |
|
||||
<view class="thead {{isBorder ? 'thead-border' : ''}} thead-row-class" style="width: {{width}}rpx; position: {{isFixed ? 'fixed' : 'static'}}"> |
|
||||
<view class="td" wx:for="{{columns}}" wx:key="index" style="width: {{item['width'] ? item['width'] : 200}}px; text-align: {{item.align ? item.align : 'center'}};">{{item.title}}</view> |
|
||||
</view> |
|
||||
<scroll-view scroll-y="true" class="tbody" style="width: {{width}}rpx; height: {{height ? height + 'rpx': 'auto'}};padding-top: {{marginTopValue}}px"> |
|
||||
<block wx:for="{{data}}" wx:key="index" wx:if="{{data.length > 0}}"> |
|
||||
<view class="tbody-tr {{ isStripe ? 'tbody-tr-stripe' : '' }} {{ isBorder ? 'tbody-tr-border' : ''}} tbody-tow-class"> |
|
||||
<view wx:for-item="thead" wx:for-index="theadIndex" wx:key="theadIndex" wx:for="{{columns}}" class="td td-class" |
|
||||
style="width: {{columns[theadIndex].width}}px; text-align:{{columns[theadIndex].align ? columns[theadIndex].align : 'center'}}" |
|
||||
data-value="{{valueCallback ? item[valueCallback]: item}}" bindtap="onRowClick"> |
|
||||
{{item[thead['key']]}} |
|
||||
<button wx:if="{{thead.slot}}" class='btn' plain="true" size='mini' data-value="{{item.valueCallback ? item[valueCallback]: item}}" |
|
||||
bindtap="onBtnClick">{{thead.btnName}}</button> |
|
||||
</view> |
|
||||
</view> |
|
||||
</block> |
|
||||
<block wx:if="{{data.length == 0}}"> |
|
||||
<view class="no-data"> {{msg}} </view> |
|
||||
</block> |
|
||||
</scroll-view> |
|
||||
</scroll-view> |
|
||||
<slot></slot> |
|
||||
|
<scroll-view scroll-x="true" style="width:100%;" class="table table-border"> |
||||
|
<!-- 表格头 start --> |
||||
|
<view class="thead {{ border ? 'thead-border' : ''}} header-row-class-name" style="width:{{ scrolWidth }}rpx;"> |
||||
|
<view wx:for="{{ headers }}" wx:key="index" class="td" style="width:{{ item.width }}rpx;line-height: 80rpx">{{ item.label }}</view> |
||||
|
</view> |
||||
|
<!-- 表格体 start --> |
||||
|
<scroll-view scroll-y="true" class="tbody" style="width:{{ scrolWidth }}rpx; height:{{ height ? height : 'auto' }}rpx;"> |
||||
|
<block wx:if="{{ data.length > 0 }}" wx:for-item="it" wx:for="{{ data }}" wx:for-index="idx" wx:key="idx"> |
||||
|
<view class="tbody-tr {{ stripe ? 'tbody-tr-stripe' : '' }} {{ border ? 'tbody-tr-border' : ''}} row-class-name"> |
||||
|
<view wx:for-item="head" wx:for="{{ headers }}" wx:key="index" class="td cell-class-name" data-it="{{it}}" |
||||
|
data-row="{{index}}" data-column="{{idx+1}}" style="width:{{ headers[index].width }}rpx;color:{{ headers[index].color }};" bindtap="onRowClick"> |
||||
|
{{it[head["prop"]]}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
<!-- 列表无数据处理 --> |
||||
|
<block wx:if="{{ data.length === 0 }}"> |
||||
|
<view class="no-data">{{ msg }}</view> |
||||
|
</block> |
||||
|
</scroll-view> |
||||
|
</scroll-view> |
||||
@ -1,68 +1,86 @@ |
|||||
|
|
||||
.table { |
.table { |
||||
|
position: relative; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
background: #fff; |
background: #fff; |
||||
border-right:none; |
border-right:none; |
||||
|
/* border-radius: 8rpx; */ |
||||
overflow: hidden; |
overflow: hidden; |
||||
} |
} |
||||
.thead{ |
.thead{ |
||||
|
border-bottom: none; |
||||
display: flex; |
display: flex; |
||||
border: 1px solid #ebeef5; |
|
||||
|
justify-content: flex-start; |
||||
|
/* border-top-right-radius: 8rpx; |
||||
|
border-top-left-radius: 8rpx; */ |
||||
|
overflow: visible; |
||||
|
color: #909399; |
||||
|
border: 1rpx solid #ebeef5; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
z-index: 9; |
|
||||
} |
} |
||||
.thead .td { |
.thead .td { |
||||
padding: 20rpx 10rpx; |
|
||||
|
/* padding: 20rpx 10rpx; */ |
||||
font-weight: bold; |
font-weight: bold; |
||||
display: inline-block; |
display: inline-block; |
||||
|
white-space:nowrap; |
||||
|
text-align: center; |
||||
border-right: 1rpx solid #fff; |
border-right: 1rpx solid #fff; |
||||
background: #fff; |
|
||||
} |
} |
||||
.thead-border .td, .tbody-tr-border .td { |
|
||||
|
.thead .td:last-child { |
||||
|
border-right: none; |
||||
|
} |
||||
|
.thead-border .td { |
||||
border-right: 1rpx solid #ebeef5; |
border-right: 1rpx solid #ebeef5; |
||||
} |
} |
||||
.thead .td:last-child, .tbody-tr-border .td:last-child{ |
|
||||
|
.thead-border .td:last-child { |
||||
border-right: none; |
border-right: none; |
||||
} |
} |
||||
|
/* .tr{ |
||||
|
display: flex; |
||||
|
white-space:nowrap; |
||||
|
} */ |
||||
.tbody { |
.tbody { |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
color: #666; |
color: #666; |
||||
border: 1px solid #ebeef5; |
|
||||
|
border: 1px solid #ebeef5; |
||||
border-top: none; |
border-top: none; |
||||
|
/* border-bottom-left-radius: 8rpx; |
||||
|
border-bottom-right-radius: 8rpx; */ |
||||
} |
} |
||||
.tbody-tr { |
.tbody-tr { |
||||
border-bottom: 1px solid #ebeef5; |
|
||||
display: flex; |
display: flex; |
||||
|
border-bottom: 1px solid #ebeef5; |
||||
} |
} |
||||
.tbody-tr .td { |
|
||||
padding: 20rpx 10rpx; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
/* .tbody-tr:last-child { |
||||
|
border-bottom-left-radius: 8rpx; |
||||
|
border-bottom-right-radius: 8rpx; |
||||
|
} */ |
||||
|
|
||||
.tbody-tr-stripe { |
.tbody-tr-stripe { |
||||
background: #fff; |
background: #fff; |
||||
border-bottom: none; |
border-bottom: none; |
||||
} |
} |
||||
.tbody-tr-stripe:nth-child(2n) .td{ |
|
||||
|
.tbody-tr-stripe:nth-child(2n) { |
||||
background: #F6F6F6; |
background: #F6F6F6; |
||||
} |
} |
||||
/* .tbody-tr .td text { |
|
||||
line-height: 0; |
|
||||
} */ |
|
||||
.tbody-tr .td .btn { |
|
||||
font-size: 28rpx; |
|
||||
padding:0 5rpx; |
|
||||
color: #666; |
|
||||
width: 30px; |
|
||||
|
.tbody-tr .td { |
||||
|
white-space: wrap; |
||||
|
height: 80rpx; |
||||
|
/* padding:20rpx 10rpx; */ |
||||
|
line-height: 80rpx; |
||||
|
text-align: center; |
||||
} |
} |
||||
.td { |
|
||||
overflow: hidden; |
|
||||
word-break: break-all; |
|
||||
|
|
||||
|
.tbody-tr-border .td { |
||||
|
border-right: 1rpx solid #F6F6F6; |
||||
|
} |
||||
|
.tbody-tr-border .td:last-child { |
||||
|
border-right: none; |
||||
} |
} |
||||
.no-data { |
.no-data { |
||||
text-align: center; |
|
||||
padding: 40rpx; |
|
||||
|
display: flex; |
||||
|
padding: 50rpx; |
||||
color: #666; |
color: #666; |
||||
|
justify-content: center; |
||||
} |
} |
||||
| Before | After |
|---|---|
|
|
| Width: 80 | Height: 80 | Size: 3.6 KiB |
| Before | After |
|---|---|
|
|
| Width: 80 | Height: 80 | Size: 4.3 KiB |
| Before | After |
|---|---|
|
|
| Width: 80 | Height: 80 | Size: 3.4 KiB |
| Before | After |
|---|---|
|
|
| Width: 80 | Height: 80 | Size: 4.5 KiB |
@ -1,20 +1,38 @@ |
|||||
<!--xtends//statics/index/index.wxml--> |
<!--xtends//statics/index/index.wxml--> |
||||
|
<wxs module="formate" src="../../../pages/formate.wxs"></wxs> |
||||
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
||||
<view slot="content">代卖报表</view> |
<view slot="content">代卖报表</view> |
||||
</cu-custom> |
</cu-custom> |
||||
|
|
||||
<view class="bg-white flex flex-justify" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
|
||||
|
<view class="bg-white flex flex-justify van-hairline--bottom" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
||||
<view class="flex flex-center" bindtap="showCalendar"> |
<view class="flex flex-center" bindtap="showCalendar"> |
||||
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view> |
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view> |
||||
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">出货信息</view> |
|
||||
|
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">代卖统计</view> |
||||
</view> |
</view> |
||||
<view class="flex flex-center" style="padding: 2rpx 0rpx"> |
<view class="flex flex-center" style="padding: 2rpx 0rpx"> |
||||
<view class="text-black text-df" style="margin-right:8rpx">{{vdateString}}</view> |
<view class="text-black text-df" style="margin-right:8rpx">{{vdateString}}</view> |
||||
<van-icon name="{{show ? 'arrow-up' : 'arrow-down'}}" /> |
<van-icon name="{{show ? 'arrow-up' : 'arrow-down'}}" /> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
<van-table columns="{{columns}}" height="{{height}}" data="{{data}}"></van-table> |
|
||||
|
<view class="bg-white flex" style="height:120rpx;padding-top:24rpx;"> |
||||
|
<view style="width:320rpx;padding-left:48rpx"> |
||||
|
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">代卖重量(吨)</view> |
||||
|
</view> |
||||
|
<view style="width:300rpx;"> |
||||
|
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">实收(元)</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="bg-white flex" style="height:120rpx;padding-top:8rpx"> |
||||
|
<view style="width:320rpx;padding-left:48rpx"> |
||||
|
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">代卖费(元)</view> |
||||
|
</view> |
||||
|
<view style="width:300rpx;"> |
||||
|
</view> |
||||
|
</view> |
||||
|
<van-table headers="{{columns}}" data="{{ data }}" height="{{ height }}" stripe="{{ true }}"/> |
||||
|
|
||||
<van-calendar show="{{ show }}" type="range" row-height="50" color="#008AFF" z-index="22" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ vdate }}" title="日期范围选择" show-subtitle="{{ false }}" show-confirm="{{ false }}" bind:close="onClose" bind:confirm="onSelect"/> |
<van-calendar show="{{ show }}" type="range" row-height="50" color="#008AFF" z-index="22" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ vdate }}" title="日期范围选择" show-subtitle="{{ false }}" show-confirm="{{ false }}" bind:close="onClose" bind:confirm="onSelect"/> |
||||
<notification id="qn-notification"/> |
<notification id="qn-notification"/> |
||||
@ -1,20 +1,39 @@ |
|||||
<!--xtends//statics/index/index.wxml--> |
<!--xtends//statics/index/index.wxml--> |
||||
|
<wxs module="formate" src="../../../pages/formate.wxs"></wxs> |
||||
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
||||
<view slot="content">毛利报表</view> |
<view slot="content">毛利报表</view> |
||||
</cu-custom> |
</cu-custom> |
||||
|
|
||||
<view class="bg-white flex flex-justify" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
|
||||
|
<view class="bg-white flex flex-justify van-hairline--bottom" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
||||
<view class="flex flex-center" bindtap="showCalendar"> |
<view class="flex flex-center" bindtap="showCalendar"> |
||||
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view> |
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view> |
||||
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">出货信息</view> |
|
||||
|
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">收支统计</view> |
||||
</view> |
</view> |
||||
<view class="flex flex-center" style="padding: 2rpx 0rpx"> |
<view class="flex flex-center" style="padding: 2rpx 0rpx"> |
||||
<view class="text-black text-df" style="margin-right:8rpx">{{vdateString}}</view> |
<view class="text-black text-df" style="margin-right:8rpx">{{vdateString}}</view> |
||||
<van-icon name="{{show ? 'arrow-up' : 'arrow-down'}}" /> |
<van-icon name="{{show ? 'arrow-up' : 'arrow-down'}}" /> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
<van-table columns="{{columns}}" height="{{height}}" data="{{data}}"></van-table> |
|
||||
|
<view class="bg-white flex" style="height:120rpx;padding-top:24rpx;"> |
||||
|
<view style="width:320rpx;padding-left:48rpx"> |
||||
|
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">总支出(元)</view> |
||||
|
</view> |
||||
|
<view style="width:300rpx;"> |
||||
|
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">总收入(元)</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="bg-white flex" style="height:120rpx;padding-top:8rpx"> |
||||
|
<view style="width:320rpx;padding-left:48rpx"> |
||||
|
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">总毛利(元)</view> |
||||
|
</view> |
||||
|
<view style="width:300rpx;"> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <van-table columns="{{columns}}" height="{{height}}" data="{{data}}"></van-table> --> |
||||
|
<van-table headers="{{columns}}" data="{{ data }}" height="{{ height }}" stripe="{{ true }}"/> |
||||
|
|
||||
<van-calendar show="{{ show }}" type="range" row-height="50" color="#008AFF" z-index="22" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ vdate }}" title="日期范围选择" show-subtitle="{{ false }}" show-confirm="{{ false }}" bind:close="onClose" bind:confirm="onSelect"/> |
<van-calendar show="{{ show }}" type="range" row-height="50" color="#008AFF" z-index="22" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ vdate }}" title="日期范围选择" show-subtitle="{{ false }}" show-confirm="{{ false }}" bind:close="onClose" bind:confirm="onSelect"/> |
||||
<notification id="qn-notification"/> |
<notification id="qn-notification"/> |
||||
@ -1,102 +1,151 @@ |
|||||
// xtends//statics/index/index.js
|
// xtends//statics/index/index.js
|
||||
import Scene from '../../../pages/index/scene' |
import Scene from '../../../pages/index/scene' |
||||
import uCharts from '../../libs/u-charts'; |
import uCharts from '../../libs/u-charts'; |
||||
|
import { getSummaryReport } from "../../../api/saas" |
||||
const math = require('../../../utils/math') |
const math = require('../../../utils/math') |
||||
|
import util from '../../../utils/util' |
||||
const app = getApp() |
const app = getApp() |
||||
|
|
||||
var that; |
|
||||
var canvaColumn = null; |
|
||||
var windowWidth = 0; |
|
||||
|
// var that;
|
||||
|
// var canvaColumn = null;
|
||||
|
// var windowWidth = 0;
|
||||
|
|
||||
Scene({ |
Scene({ |
||||
/** |
/** |
||||
* 页面的初始数据 |
* 页面的初始数据 |
||||
*/ |
*/ |
||||
data: { |
data: { |
||||
cWidth: '', |
|
||||
cHeight: '', |
|
||||
|
// cWidth: '',
|
||||
|
// cHeight: '',
|
||||
|
form1: {}, |
||||
|
form2: {}, |
||||
|
percent: 85, |
||||
|
show: false |
||||
}, |
}, |
||||
/** |
/** |
||||
* 生命周期函数--监听页面加载 |
* 生命周期函数--监听页面加载 |
||||
*/ |
*/ |
||||
onLoad: function (options) { |
onLoad: function (options) { |
||||
that = this |
|
||||
windowWidth = wx.getSystemInfoSync().windowWidth |
|
||||
this.data.cWidth = windowWidth - this.rpx2px(100) |
|
||||
// math.divide
|
|
||||
this.data.cHeight = this.rpx2px(400) |
|
||||
this.getServerData() |
|
||||
|
// that = this
|
||||
|
// windowWidth = wx.getSystemInfoSync().windowWidth
|
||||
|
// this.data.cWidth = windowWidth - this.rpx2px(100)
|
||||
|
// // math.divide
|
||||
|
// this.data.cHeight = this.rpx2px(400)
|
||||
|
// this.getServerData()
|
||||
|
wx.showLoading({ title: '加载中', mask: true }) |
||||
|
var min = new Date() |
||||
|
min.setFullYear(min.getFullYear() - 1, min.getMonth(), min.getDate()) |
||||
|
min.setHours(0, 0, 0) |
||||
|
var minDate = min.getTime() |
||||
|
var max = new Date(new Date().getTime() + 24 * 60 * 60 * 1000) |
||||
|
max.setHours(0, 0, 0) |
||||
|
var maxDate = max.getTime() |
||||
|
var today = new Date() |
||||
|
today.setHours(0, 0, 0) |
||||
|
var vdate = [today.getTime(), maxDate] |
||||
|
var vdateString = util.formatDate(new Date(), 'Y-M-D') + '至' + util.formatDate(max, 'Y-M-D') |
||||
|
this.data.form1.dimensionDateStart = util.formatDate(today, 'Y-M-D') |
||||
|
this.data.form1.dimensionDateEnd = util.formatDate(max, 'Y-M-D') |
||||
|
this.data.form2.startTime = util.formatDate(today, 'Y-M-D') + ' 00:00:00' |
||||
|
this.data.form2.endTime = util.formatDate(max, 'Y-M-D') + ' 00:00:00' |
||||
|
this.setData({ minDate, maxDate, vdate, vdateString }) |
||||
|
this.fetchSummaryInfo(this.data.form1) |
||||
}, |
}, |
||||
rpx2px: function(rpx) { |
|
||||
return rpx / 750 * windowWidth; |
|
||||
}, |
|
||||
getServerData: function() { |
|
||||
wx.request({ |
|
||||
url: 'https://www.ucharts.cn/data.json', |
|
||||
success: function (res) { |
|
||||
let Column = { categories: [], series: [] }; |
|
||||
Column.categories = res.data.data.Pie.categories; |
|
||||
Column.series = res.data.data.Pie.series; |
|
||||
// 自定义标签颜色和字体大小
|
|
||||
// Column.series[1].textColor = 'red';
|
|
||||
// Column.series[1].textSize = 18;
|
|
||||
that.showColumn("canvasColumn", Column); |
|
||||
}, |
|
||||
fail: () => { |
|
||||
console.log("请点击右上角【详情】，启用不校验合法域名"); |
|
||||
}, |
|
||||
|
fetchSummaryInfo: function(form){ |
||||
|
getSummaryReport(form).then(result => { |
||||
|
// this.setData({ })
|
||||
|
wx.hideLoading() |
||||
|
}).catch(err => { |
||||
|
wx.hideLoading() |
||||
}) |
}) |
||||
}, |
}, |
||||
showColumn(canvasId, chartData) { |
|
||||
let ctx = wx.createCanvasContext(canvasId, this); |
|
||||
canvaColumn = new uCharts({ |
|
||||
type: 'ring', |
|
||||
context: ctx, |
|
||||
// fontSize: 11,
|
|
||||
background: '#FFFFFF', |
|
||||
pixelRatio: 1, |
|
||||
// animation: true,
|
|
||||
// categories: chartData.categories,
|
|
||||
series: chartData.series, |
|
||||
color: [ "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ], |
|
||||
dataLabel: true, |
|
||||
width: that.data.cWidth, |
|
||||
height: that.data.cHeight, |
|
||||
legend: { |
|
||||
show: true, |
|
||||
position: "right", |
|
||||
float: "center", |
|
||||
padding: 5, |
|
||||
margin: 5, |
|
||||
fontSize: 13, |
|
||||
fontColor: "#666666", |
|
||||
lineHeight: 25, |
|
||||
hiddenColor: "#CECECE", |
|
||||
itemGap: 10 |
|
||||
}, |
|
||||
extra: { |
|
||||
ring: { |
|
||||
ringWidth: 30, |
|
||||
centerColor: "#FFFFFF", |
|
||||
activeOpacity: 0.5, |
|
||||
activeRadius: 10, |
|
||||
offsetAngle: 0, |
|
||||
customRadius: 0, |
|
||||
labelWidth: 15, |
|
||||
border: true, |
|
||||
borderWidth: 3, |
|
||||
borderColor: "#FFFFFF", |
|
||||
linearType: "none" |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
showCalendar: function(e){ |
||||
|
console.log(e.currentTarget.id) |
||||
|
this.setData({ show: true }) |
||||
}, |
}, |
||||
touchColumn(e) { |
|
||||
canvaColumn.showToolTip(e, { |
|
||||
formatter: function (item) { |
|
||||
console.log(item) |
|
||||
return item.name + ':' + item.data |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
onClose: function() { |
||||
|
this.setData({ show: false }) |
||||
|
}, |
||||
|
onSelect: function({detail}) { |
||||
|
var start = new Date(detail[0]) |
||||
|
var end = new Date(detail[1]) |
||||
|
var vdateString = util.formatDate(start, 'Y-M-D') + '至' + util.formatDate(end, 'Y-M-D') |
||||
|
this.data.form.startTime = util.formatDate(start, 'Y-M-D') + ' 00:00:00' |
||||
|
this.data.form.endTime = util.formatDate(end, 'Y-M-D') + ' 00:00:00' |
||||
|
this.setData({ show: false, vdateString }) |
||||
|
wx.showLoading({ title: '加载中', mask: true }) |
||||
|
this.fetchStatisticsInfo() |
||||
|
}, |
||||
|
// rpx2px: function(rpx) {
|
||||
|
// return rpx / 750 * windowWidth;
|
||||
|
// },
|
||||
|
// getServerData: function() {
|
||||
|
// wx.request({
|
||||
|
// url: 'https://www.ucharts.cn/data.json',
|
||||
|
// success: function (res) {
|
||||
|
// let Column = { categories: [], series: [] };
|
||||
|
// Column.categories = res.data.data.Pie.categories;
|
||||
|
// Column.series = res.data.data.Pie.series;
|
||||
|
// // 自定义标签颜色和字体大小
|
||||
|
// // Column.series[1].textColor = 'red';
|
||||
|
// // Column.series[1].textSize = 18;
|
||||
|
// that.showColumn("canvasColumn", Column);
|
||||
|
// },
|
||||
|
// fail: () => {
|
||||
|
// console.log("请点击右上角【详情】，启用不校验合法域名");
|
||||
|
// },
|
||||
|
// })
|
||||
|
// },
|
||||
|
// showColumn(canvasId, chartData) {
|
||||
|
// let ctx = wx.createCanvasContext(canvasId, this);
|
||||
|
// canvaColumn = new uCharts({
|
||||
|
// type: 'ring',
|
||||
|
// context: ctx,
|
||||
|
// // fontSize: 11,
|
||||
|
// background: '#FFFFFF',
|
||||
|
// pixelRatio: 1,
|
||||
|
// // animation: true,
|
||||
|
// // categories: chartData.categories,
|
||||
|
// series: chartData.series,
|
||||
|
// color: [ "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ],
|
||||
|
// dataLabel: true,
|
||||
|
// width: that.data.cWidth,
|
||||
|
// height: that.data.cHeight,
|
||||
|
// legend: {
|
||||
|
// show: false,
|
||||
|
// position: "right",
|
||||
|
// float: "center",
|
||||
|
// padding: 5,
|
||||
|
// margin: 5,
|
||||
|
// fontSize: 13,
|
||||
|
// fontColor: "#666666",
|
||||
|
// lineHeight: 25,
|
||||
|
// hiddenColor: "#CECECE",
|
||||
|
// itemGap: 10
|
||||
|
// },
|
||||
|
// extra: {
|
||||
|
// ring: {
|
||||
|
// ringWidth: 30,
|
||||
|
// centerColor: "#FFFFFF",
|
||||
|
// activeOpacity: 0.5,
|
||||
|
// activeRadius: 10,
|
||||
|
// offsetAngle: 0,
|
||||
|
// customRadius: 0,
|
||||
|
// labelWidth: 15,
|
||||
|
// border: true,
|
||||
|
// borderWidth: 3,
|
||||
|
// borderColor: "#FFFFFF",
|
||||
|
// linearType: "none"
|
||||
|
// }
|
||||
|
// }
|
||||
|
// });
|
||||
|
// },
|
||||
|
// touchColumn(e) {
|
||||
|
// canvaColumn.showToolTip(e, {
|
||||
|
// formatter: function (item) {
|
||||
|
// console.log(item)
|
||||
|
// return item.name + ':' + item.data
|
||||
|
// }
|
||||
|
// })
|
||||
|
// }
|
||||
}) |
}) |
||||
@ -1,20 +1,41 @@ |
|||||
<!--xtends//statics/index/index.wxml--> |
<!--xtends//statics/index/index.wxml--> |
||||
|
<wxs module="formate" src="../../../pages/formate.wxs"></wxs> |
||||
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
||||
<view slot="content">销售报表</view> |
<view slot="content">销售报表</view> |
||||
</cu-custom> |
</cu-custom> |
||||
|
|
||||
<view class="bg-white flex flex-justify" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
|
||||
|
<view class="bg-white flex flex-justify van-hairline--bottom" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
||||
<view class="flex flex-center" bindtap="showCalendar"> |
<view class="flex flex-center" bindtap="showCalendar"> |
||||
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view> |
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view> |
||||
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">出货信息</view> |
|
||||
|
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">销售统计</view> |
||||
</view> |
</view> |
||||
<view class="flex flex-center" style="padding: 2rpx 0rpx"> |
<view class="flex flex-center" style="padding: 2rpx 0rpx"> |
||||
<view class="text-black text-df" style="margin-right:8rpx">{{vdateString}}</view> |
<view class="text-black text-df" style="margin-right:8rpx">{{vdateString}}</view> |
||||
<van-icon name="{{show ? 'arrow-up' : 'arrow-down'}}" /> |
<van-icon name="{{show ? 'arrow-up' : 'arrow-down'}}" /> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
<view class="bg-white flex" style="height:120rpx;padding-top:24rpx;"> |
||||
|
<view style="width:320rpx;padding-left:48rpx"> |
||||
|
<view class="text-xxl text-bold" style="color:#278CC8">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">出货重量(吨)</view> |
||||
|
</view> |
||||
|
<view style="width:300rpx;"> |
||||
|
<view class="text-xxl text-bold" style="color:#278CC8">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">结算重量(吨)</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="bg-white flex" style="height:120rpx;padding-top:8rpx"> |
||||
|
<view style="width:320rpx;padding-left:48rpx"> |
||||
|
<view class="text-xxl text-bold" style="color:#278CC8">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">出货车数(车)</view> |
||||
|
</view> |
||||
|
<view style="width:300rpx;"> |
||||
|
<view class="text-xxl text-bold" style="color:#278CC8">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
||||
|
<view class="text-black text-sm">金额(元)</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
<van-table columns="{{columns}}" height="{{height}}" data="{{data}}"></van-table> |
|
||||
|
<van-table headers="{{columns}}" data="{{ data }}" height="{{ height }}" stripe="{{ true }}"/> |
||||
|
|
||||
<van-calendar show="{{ show }}" type="range" row-height="50" color="#008AFF" z-index="22" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ vdate }}" title="日期范围选择" show-subtitle="{{ false }}" show-confirm="{{ false }}" bind:close="onClose" bind:confirm="onSelect"/> |
<van-calendar show="{{ show }}" type="range" row-height="50" color="#008AFF" z-index="22" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ vdate }}" title="日期范围选择" show-subtitle="{{ false }}" show-confirm="{{ false }}" bind:close="onClose" bind:confirm="onSelect"/> |
||||
<notification id="qn-notification"/> |
<notification id="qn-notification"/> |
||||
Write
Preview
Loading…
Cancel
Save