libo
/
ztb-mini
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

--活动订单详情调整--

featrue/v4.4
DESKTOP-A1SENDA\HUzy 4 years ago
parent
d2d17b9911
commit
b35daa7d87
8 changed files with 554 additions and 18 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 237
      components/popover/index.js
  2. 7
      components/popover/index.json
  3. 17
      components/popover/index.wxml
  4. 193
      components/popover/index.wxss
  5. 66
      pages/agent/detail/item-money-info/money-info.js
  6. 4
      pages/agent/detail/item-money-info/money-info.json
  7. 40
      pages/agent/detail/item-money-info/money-info.wxml
  8. 8
      pages/agent/detail/pound-info/pound-info.wxml

237
components/popover/index.js
View File

@ -0,0 +1,237 @@
import baseComponent from '../helpers/baseComponent'
import classNames from '../helpers/classNames'
import styleToCssString from '../helpers/styleToCssString'
import { $wuxBackdrop } from '../index'
const getPlacements = ([a, s, b] = rects, placement = 'top') => {
switch (placement) {
case 'topLeft':
return {
top: s.scrollTop + a.top - b.height - 4,
left: s.scrollLeft + a.left,
}
case 'top':
return {
top: s.scrollTop + a.top - b.height - 4,
left: s.scrollLeft + a.left + (a.width - b.width) / 2,
}
case 'topRight':
return {
top: s.scrollTop + a.top - b.height - 4,
left: s.scrollLeft + a.left + a.width - b.width,
}
case 'rightTop':
return {
top: s.scrollTop + a.top,
left: s.scrollLeft + a.left + a.width + 4,
}
case 'right':
return {
top: s.scrollTop + a.top + (a.height - b.height) / 2,
left: s.scrollLeft + a.left + a.width + 4,
}
case 'rightBottom':
return {
top: s.scrollTop + a.top + a.height - b.height,
left: s.scrollLeft + a.left + a.width + 4,
}
case 'bottomRight':
return {
top: s.scrollTop + a.top + a.height + 4,
left: s.scrollLeft + a.left + a.width - b.width,
}
case 'bottom':
return {
top: s.scrollTop + a.top + a.height + 4,
left: s.scrollLeft + a.left + (a.width - b.width) / 2,
}
case 'bottomLeft':
return {
top: s.scrollTop + a.top + a.height + 4,
left: s.scrollLeft + a.left,
}
case 'leftBottom':
return {
top: s.scrollTop + a.top + a.height - b.height,
left: s.scrollLeft + a.left - b.width - 4,
}
case 'left':
return {
top: s.scrollTop + a.top + (a.height - b.height) / 2,
left: s.scrollLeft + a.left - b.width - 4,
}
case 'leftTop':
return {
top: s.scrollTop + a.top,
left: s.scrollLeft + a.left - b.width - 4,
}
default:
return {
left: 0,
top: 0,
}
}
}
baseComponent({
properties: {
prefixCls: {
type: String,
value: 'wux-popover',
},
classNames: {
type: null,
value: 'wux-animate--fadeIn',
},
theme: {
type: String,
value: 'light',
},
title: {
type: String,
value: '',
},
content: {
type: String,
value: '',
},
placement: {
type: String,
value: 'top',
},
trigger: {
type: String,
value: 'click',
},
bodyStyle: {
type: [String, Object],
value: '',
observer(newVal) {
this.setData({
extStyle: styleToCssString(newVal),
})
},
},
defaultVisible: {
type: Boolean,
value: false,
},
visible: {
type: Boolean,
value: false,
observer(newVal) {
if (this.data.controlled) {
this.updated(newVal)
}
},
},
controlled: {
type: Boolean,
value: false,
},
mask: {
type: Boolean,
value: false,
},
maskClosable: {
type: Boolean,
value: true,
},
},
data: {
extStyle: '',
popoverStyle: '',
popoverVisible: false,
},
computed: {
classes: ['prefixCls, theme, placement', function(prefixCls, theme, placement) {
const wrap = classNames(prefixCls, {
[`${prefixCls}--theme-${theme}`]: theme,
[`${prefixCls}--placement-${placement}`]: placement,
})
const content = `${prefixCls}__content`
const arrow = `${prefixCls}__arrow`
const inner = `${prefixCls}__inner`
const title = `${prefixCls}__title`
const innerContent = `${prefixCls}__inner-content`
const element = `${prefixCls}__element`
return {
wrap,
content,
arrow,
inner,
title,
innerContent,
element,
}
}],
},
methods: {
updated(popoverVisible) {
if (this.data.popoverVisible !== popoverVisible) {
this.setData({ popoverVisible })
this.setBackdropVisible(popoverVisible)
}
},
getPopoverStyle() {
const { prefixCls, placement } = this.data
const query = wx.createSelectorQuery().in(this)
query.select(`.${prefixCls}__element`).boundingClientRect()
query.selectViewport().scrollOffset()
query.select(`.${prefixCls}`).boundingClientRect()
query.exec((rects) => {
if (rects.filter((n) => !n).length) return
const placements = getPlacements(rects, placement)
const popoverStyle = styleToCssString(placements)
this.setData({
popoverStyle,
})
})
},
/**
* 当组件进入过渡的开始状态时，设置气泡框位置信息
*/
onEnter() {
this.getPopoverStyle()
},
onChange() {
const { popoverVisible, controlled } = this.data
const nextVisible = !popoverVisible
if (!controlled) {
this.updated(nextVisible)
}
this.triggerEvent('change', { visible: nextVisible })
},
onClick() {
if (this.data.trigger === 'click') {
this.onChange()
}
},
setBackdropVisible(visible) {
if (this.data.mask && this.$wuxBackdrop) {
this.$wuxBackdrop[visible ? 'retain' : 'release']()
}
},
onMaskClick() {
const { maskClosable, popoverVisible } = this.data
if (maskClosable && popoverVisible) {
this.onChange()
}
},
},
ready() {
const { defaultVisible, visible, controlled } = this.data
const popoverVisible = controlled ? visible : defaultVisible
if (this.data.mask) {
this.$wuxBackdrop = $wuxBackdrop('#wux-backdrop', this)
}
this.updated(popoverVisible)
},
})

7
components/popover/index.json
View File

@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"wux-animation-group": "../animation-group/index",
"wux-backdrop": "../backdrop/index"
}
}

17
components/popover/index.wxml
View File

@ -0,0 +1,17 @@
<wux-backdrop id="wux-backdrop" wx:if="{{ mask }}" bind:click="onMaskClick" />
<view class="wux-class {{ classes.wrap }}" style="{{ extStyle + popoverStyle }}">
<wux-animation-group in="{{ popoverVisible }}" classNames="{{ classNames }}" bind:enter="onEnter">
<view class="{{ classes.content }}">
<view class="{{ classes.arrow }}"></view>
<view class="{{ classes.inner }}">
<view class="{{ classes.title }}" wx:if="{{ title }}">{{ title }}</view>
<slot name="title" wx:else></slot>
<view class="{{ classes.innerContent }}" wx:if="{{ content }}">{{ content }}</view>
<slot name="content" wx:else></slot>
</view>
</view>
</wux-animation-group>
</view>
<view class="{{ classes.element }}" catchtap="onClick">
<slot></slot>
</view>

193
components/popover/index.wxss
View File

@ -0,0 +1,193 @@
.wux-popover {
font-family: Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 28rpx;
line-height: 1.5;
color: rgba(0,0,0,.65);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
left: 0;
z-index: 1030;
cursor: auto;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
white-space: normal;
font-weight: 400;
text-align: left
}
.wux-popover::after {
content: "";
position: absolute;
background: rgba(255,255,255,.01)
}
.wux-popover__container {
position: absolute;
top: 0;
left: 0;
width: 100%
}
.wux-popover__element {
display: inline-block;
line-height: 1
}
.wux-popover--theme-dark .wux-popover__inner {
background-color: #333
}
.wux-popover--theme-dark.wux-popover--placement-top .wux-popover__arrow,
.wux-popover--theme-dark.wux-popover--placement-topLeft .wux-popover__arrow,
.wux-popover--theme-dark.wux-popover--placement-topRight .wux-popover__arrow {
border-top-color: #333
}
.wux-popover--theme-dark.wux-popover--placement-right .wux-popover__arrow,
.wux-popover--theme-dark.wux-popover--placement-rightBottom .wux-popover__arrow,
.wux-popover--theme-dark.wux-popover--placement-rightTop .wux-popover__arrow {
border-right-color: #333
}
.wux-popover--theme-dark.wux-popover--placement-bottom .wux-popover__arrow,
.wux-popover--theme-dark.wux-popover--placement-bottomLeft .wux-popover__arrow,
.wux-popover--theme-dark.wux-popover--placement-bottomRight .wux-popover__arrow {
border-bottom-color: #333
}
.wux-popover--theme-dark.wux-popover--placement-left .wux-popover__arrow,
.wux-popover--theme-dark.wux-popover--placement-leftBottom .wux-popover__arrow,
.wux-popover--theme-dark.wux-popover--placement-leftTop .wux-popover__arrow {
border-left-color: #333
}
.wux-popover--theme-dark .wux-popover__inner,
.wux-popover--theme-dark .wux-popover__title {
color: #fff
}
.wux-popover--placement-top,
.wux-popover--placement-topLeft,
.wux-popover--placement-topRight {
padding-bottom: 10px
}
.wux-popover--placement-right,
.wux-popover--placement-rightBottom,
.wux-popover--placement-rightTop {
padding-left: 10px
}
.wux-popover--placement-bottom,
.wux-popover--placement-bottomLeft,
.wux-popover--placement-bottomRight {
padding-top: 10px
}
.wux-popover--placement-left,
.wux-popover--placement-leftBottom,
.wux-popover--placement-leftTop {
padding-right: 10px
}
.wux-popover__inner {
background-color: #fff;
background-clip: padding-box;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
color: rgba(0,0,0,.65)
}
.wux-popover__title {
position: relative;
min-width: 120px;
margin: 0;
padding: 5px 16px 4px;
min-height: 32px;
box-sizing: border-box;
color: rgba(0,0,0,.85);
font-weight: 500
}
.wux-popover__title::after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1PX;
border-bottom: 1PX solid #d9d9d9;
color: #d9d9d9;
transform-origin: 0 100%;
transform: scaleY(.5)
}
.wux-popover__inner-content {
padding: 24rpx 32rpx
}
.wux-popover__arrow {
width: 0;
height: 0;
position: absolute;
display: block;
border-color: transparent;
border-style: solid;
border-width: 16.97056274rpx
}
.wux-popover--placement-top .wux-popover__arrow,
.wux-popover--placement-topLeft .wux-popover__arrow,
.wux-popover--placement-topRight .wux-popover__arrow {
bottom: 8rpx;
border-bottom-width: 0;
border-top-color: #fff
}
.wux-popover--placement-top .wux-popover__arrow {
left: 50%;
transform: translateX(-50%)
}
.wux-popover--placement-topLeft .wux-popover__arrow {
left: 32rpx
}
.wux-popover--placement-topRight .wux-popover__arrow {
right: 32rpx
}
.wux-popover--placement-right .wux-popover__arrow,
.wux-popover--placement-rightBottom .wux-popover__arrow,
.wux-popover--placement-rightTop .wux-popover__arrow {
left: 8rpx;
border-left-width: 0;
border-right-color: #fff
}
.wux-popover--placement-right .wux-popover__arrow {
top: 50%;
transform: translateY(-50%)
}
.wux-popover--placement-rightTop .wux-popover__arrow {
top: 24rpx
}
.wux-popover--placement-rightBottom .wux-popover__arrow {
bottom: 24rpx
}
.wux-popover--placement-bottom .wux-popover__arrow,
.wux-popover--placement-bottomLeft .wux-popover__arrow,
.wux-popover--placement-bottomRight .wux-popover__arrow {
top: 8rpx;
border-top-width: 0;
border-bottom-color: #fff
}
.wux-popover--placement-bottom .wux-popover__arrow {
left: 50%;
transform: translateX(-50%)
}
.wux-popover--placement-bottomLeft .wux-popover__arrow {
left: 32rpx
}
.wux-popover--placement-bottomRight .wux-popover__arrow {
right: 32rpx
}
.wux-popover--placement-left .wux-popover__arrow,
.wux-popover--placement-leftBottom .wux-popover__arrow,
.wux-popover--placement-leftTop .wux-popover__arrow {
right: 8rpx;
border-right-width: 0;
border-left-color: #fff
}
.wux-popover--placement-left .wux-popover__arrow {
top: 50%;
transform: translateY(-50%)
}
.wux-popover--placement-leftTop .wux-popover__arrow {
top: 24rpx
}
.wux-popover--placement-leftBottom .wux-popover__arrow {
bottom: 24rpx
}

66
pages/agent/detail/item-money-info/money-info.js
View File

@ -1,4 +1,5 @@
// pages/agent/detail/money-info/money-info.js
const math = require('../../../../utils/math')
Component({
options: {
@ -16,13 +17,76 @@ Component({
* 组件的初始数据
*/
data: {
isShowtotalOtherAmount:true,
firstMoneyStringTip:'',
secondMoneyStringTip:''
},
//组件的生命周期
lifetimes: {
created: function () {
// 在组件实例刚刚被创建时执行
},
attached: function() {
// 在组件实例进入页面节点树时执行
console.log(this.data.item)
this.data.item.otherAmountDtoList.forEach(element => {
if(element.amount!=null){
this.setData({
isShowtotalOtherAmount:false
})
}
});
//首笔货款金额tiptip提示
var firstFkbl=(this.data.item.activitySettleType==0?'(×首付70%)':(this.data.item.activitySettleType==1?'(×首付85%)':'(×首付100%)'))
var firstLeft='预估总金额'+firstFkbl+'-代码费总额'
var rightFkbl=(this.data.item.activitySettleType==0?'70%':(this.data.item.activitySettleType==1?'85%':'100%'))
var rightJsdj=(math.times(this.data.item.unitPrice, 1000)+'元/吨')
var rightJsjz=(math.divide(this.data.item.weightnoteInfo.netWeight, 1000)+'吨')
var rightDmf=this.data.item.unitSurcharge>0?('-'+math.times(this.data.item.unitSurcharge, 1000)+'元/吨'):(this.data.item.unitSurcharge<0?math.times(this.data.item.unitSurcharge, 1000)+'元/吨':'')
var rightJz=math.times(this.data.item.unitSurcharge, 1000)+'吨'
this.setData({
firstMoneyStringTip:firstLeft+'='+rightJsdj+'×'+rightJsjz+'×'+rightFkbl+rightDmf+'×'+rightJz
})
//尾款金额toptip提示
if(this.data.item.activityOrderAuditPassNum!=null&&this.data.item.activityOrderAuditPassNum >= 2){
var secondLeft='结算单价x结算重量-首笔货款金额+'+(this.data.isShowtotalOtherAmount==false?'isShowtotalOtherAmount':'')+'+返还补贴+调节费'
var secondJsdj=(math.times(this.data.item.unitPrice, 1000)+'元/吨')
var secondJszl=(math.divide(this.data.item.weightnoteInfo.settleWeight, 1000)+'吨')
var secondJsjz=(math.divide(this.data.item.weightnoteInfo.netWeight, 1000)+'吨')
var secondSbhkje=this.data.item.preSettleMoney+''
var secondzcbtykk=this.data.isShowtotalOtherAmount==true?'':(this.data.item.totalOtherAmount>0?'+'+this.data.item.totalOtherAmount:''+this.data.item.totalOtherAmount)
var secondbtdj=(math.times(this.data.item.unitRefundSubsidy, 1000)+'元/吨')
var secondfhbt=this.data.itemrefundSubsidy==0?'':(this.data.itemrefundSubsidy>0?'+'+this.data.itemrefundSubsidy:this.data.itemrefundSubsidy)
this.setData({
secondMoneyStringTip:secondLeft+'='+secondJsdj+'×'+secondJszl+'-'+this.data.item.preSettleMoney+secondzcbtykk+'+'+secondbtdj+'×'+secondJsjz+secondfhbt
})
}
console.log(this.data.firstMoneyStringTip)
console.log(this.data.secondMoneyStringTip)
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
/**
* 组件的方法列表
*/
methods: {
hide() {
this.setData({
visible: false,
})
},
onChange(e) {
console.log('onChange', e)
this.setData({
visible: e.detail.visible,
})
},
}
})

4
pages/agent/detail/item-money-info/money-info.json
View File

@ -1,4 +1,6 @@
{
"component": true,
"usingComponents": {}
"usingComponents": {
"wux-popover": "/components/popover/index"
}
}

40
pages/agent/detail/item-money-info/money-info.wxml
View File

@ -26,7 +26,7 @@
{{agent.getActivitySettleType(orderInfo.activitySettleType)}}</view>
</view>
<view class="flex flex-justify text-sg" style="margin-top:24rpx;border-top:2rpx solid #f3f3f3;padding-top:16rpx">
<text class="text-black">代卖费</text>
<text class="text-black">代卖费总额</text>
<text style="">{{formate.formateAmount(item.proxyAmount) || 0}}元</text>
</view>
<view class="flex flex-justify text-sm" style="margin-top:2rpx" wx:if="{{item.proxySellerSettleType==0}}">
@ -36,8 +36,12 @@
</view>
<view class="flex text-sg"
style="justify-content: flex-end;margin-top:24rpx;border-top:2rpx solid #f3f3f3;padding-top:24rpx">
<text class="text-black text-bold">首笔实收金额：</text>
<text class="text-gray" style="color:#F5222D">{{formate.formateAmount(item.preSettleMoney)}}元</text>
<text class="text-black text-bold">首笔货款金额：</text>
<wux-popover placement="topRight" content="{{firstMoneyStringTip}}" body-style="width: 300px;">
<text class="text-gray" style="color:#F5222D">{{formate.formateAmount(item.preSettleMoney)}}元<text
class="cuIcon-questionfill lg text-gray"></text></text>
</wux-popover>
</view>
</view>
<!-- 尾款 只有活动订单才会有这个字段,并且这个字段=2表示第二次审核了 -->
@ -65,7 +69,8 @@
<text class="text-black">调节费</text>
<text style="">-{{formate.formateAmount(item.adjustMoney)}}元</text>
</view> -->
<view wx:if="{{item.totalOtherAmount}}" class="flex flex-justify text-sg" style="margin-top:24rpx;border-top:2rpx solid #f3f3f3;padding-top:24rpx">
<view wx:if="{{isShowtotalOtherAmount==false}}" class="flex flex-justify text-sg"
style="margin-top:24rpx;border-top:2rpx solid #f3f3f3;padding-top:24rpx">
<text class="text-black">纸厂补贴与扣款</text>
<text style="color:#F5222D">{{formate.formateAmount(item.totalOtherAmount==null?0:item.totalOtherAmount)}}元</text>
</view>
@ -81,13 +86,17 @@
</view>
<view class="flex flex-justify text-sg" style="margin-top:24rpx;border-top:2rpx solid #f3f3f3;padding-top:24rpx">
<text class="text-black text-bold">尾款实收金额：</text>
<text style="color:#F5222D">{{formate.formateAmount(item.finalPayMoney)}}元</text>
<text class="text-black text-bold">尾款金额：</text>
<wux-popover placement="topRight" content="{{secondMoneyStringTip}}" body-style="width: 300px;">
<text style="color:#F5222D">{{formate.formateAmount(item.finalPayMoney)}}元<text
class="cuIcon-questionfill lg text-gray"></text></text>
</wux-popover>
</view>
<view class="flex flex-justify text-sg" style=";margin-top:24rpx;border-top:2rpx solid #f3f3f3;padding-top:24rpx">
<!-- <view class="flex flex-justify text-sg" style=";margin-top:24rpx;border-top:2rpx solid #f3f3f3;padding-top:24rpx">
<text class="text-black text-bold">总收款金额：</text>
<text style="color:#F5222D">{{formate.formateAmount(item.finalSettlePrice)}}元</text>
</view>
</view> -->
</view>
</view>
<!-- 全款 非活动订单,或者一次性付款的活动订单 , 在待审核和待结算,已完成下 , 显示全款信息, -->
@ -103,7 +112,7 @@
{{formate.formateWeight(item.weightnoteInfo.settleWeight)}}</view>
</view>
<view class="flex flex-justify text-sg" style="margin-top:20rpx;border-top:2rpx solid #f3f3f3;padding-top:16rpx">
<text class="text-black">代卖费</text>
<text class="text-black">代卖费总额</text>
<text style="">{{formate.formateAmount(item.surcharge) || 0}}元</text>
</view>
<view class="flex flex-justify text-xs" style="margin-top:2rpx" wx:if="{{item.proxySellerSettleType==1}}">
@ -121,12 +130,14 @@
<text class="text-black">调节费</text>
<text style="">{{item.adjustMoney > 0 ? '+' : ''}}{{formate.formateAmount(item.adjustMoney)}}元</text>
</view> -->
<view class="flex flex-justify text-sg" style="margin-top:20rpx;border-top:2rpx solid #f3f3f3;padding-top:16rpx"
wx:if="{{item.totalOtherAmount}}">
wx:if="{{isShowtotalOtherAmount==false}}">
<text class="text-black">纸厂补贴与扣款</text>
<text style="">{{formate.formateAmount(item.totalOtherAmount==null?0:item.totalOtherAmount)}}元</text>
</view>
<view class="flex flex-justify text-sg" style="margin-top:20rpx;border-top:2rpx solid #f3f3f3;padding-top:16rpx" >
<view class="flex flex-justify text-sg" style="margin-top:20rpx;border-top:2rpx solid #f3f3f3;padding-top:16rpx">
<text class="text-black">返还补贴</text>
<text style="">{{formate.formateAmount(item.refundSubsidy==null?0:item.refundSubsidy)}}元</text>
</view>
@ -142,6 +153,11 @@
</view>
<view class="flex flex-justify text-sg" style="margin-top:24rpx;border-top:2rpx solid #f3f3f3;padding-top:20rpx">
<text class="text-black text-bold">总收款金额：</text>
<text style="color:#F5222D">{{formate.formateAmount(item.weightnoteInfo.settlePrice)}}元</text>
<!-- <wux-popover placement="topRight" content="Content" body-style="width:300px;"> -->
<text style="color:#F5222D">{{formate.formateAmount(item.weightnoteInfo.settlePrice)}}元</text>
<!-- <text
class="cuIcon-questionfill lg text-gray"></text> -->
<!-- </wux-popover> -->
</view>
</view>

8
pages/agent/detail/pound-info/pound-info.wxml
View File

@ -12,14 +12,14 @@
<text class="text-black">净重</text>
<text class="text-gray">{{formate.formateWeight(item.weightnoteInfo.netWeight)}}</text>
</view>
<view class="flex flex-justify text-sg" style="margin-top:20rpx" wx:if="{{item.weightnoteInfo.settleWeight}}">
<text class="text-black">结算重量</text>
<text class="text-gray">{{formate.formateWeight(item.weightnoteInfo.settleWeight)}}</text>
</view>
<view class="flex flex-justify text-sg" style="margin-top:20rpx" wx:if="{{item.weightnoteInfo.deductedPoint}}">
<text class="text-black">扣点</text>
<text class="text-gray">{{item.weightnoteInfo.deductedPoint}}%</text>
</view>
<view class="flex flex-justify text-sg" style="margin-top:20rpx" wx:if="{{item.weightnoteInfo.settleWeight}}">
<text class="text-black">结算重量</text>
<text class="text-gray">{{formate.formateWeight(item.weightnoteInfo.settleWeight)}}</text>
</view>
<view class="flex flex-justify text-sg" style="margin-top:20rpx">
<text class="text-black">代卖费</text>
<text class="text-gray">{{formate.formatePrice2(item.unitSurcharge==null?0:item.unitSurcharge)}}</text>

Write Preview
Loading…
Cancel
Save