|
|
|
@ -28,6 +28,19 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="content-price"> |
|
|
|
<view>商品合计金额：<text>￥</text><text>{{ totalPrice }}</text></view> |
|
|
|
</view> |
|
|
|
<view class="content-mark"> |
|
|
|
<view> |
|
|
|
<text>收取金额</text> |
|
|
|
<input v-model="realPrice" type="digit" @change="onRealPriceChange" />元 |
|
|
|
</view> |
|
|
|
<view> |
|
|
|
<text>备注</text> |
|
|
|
<textarea v-model="mark" auto-height /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -35,7 +48,7 @@ |
|
|
|
<view> |
|
|
|
<view class="cg-footer-price"> |
|
|
|
<view>实付款：</view> |
|
|
|
<view><text>￥</text>{{ totalPrice }}</view> |
|
|
|
<view><text>￥</text>{{ realPrice }}</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="cg-footer-btn"> |
|
|
|
@ -61,6 +74,8 @@ |
|
|
|
cartListScroll: false, // 购物车列表是否能滚动 |
|
|
|
cartListFinalHeight: "0rpx", // 最终显示的列表高度 |
|
|
|
cartListFinalPaddingBottom: "0rpx", // 根据是否是异形屏来设置 |
|
|
|
realPrice: 0, |
|
|
|
mark: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
|
@ -68,15 +83,25 @@ |
|
|
|
this.curStore = data.curStore; |
|
|
|
this.cartListFinal = data.cartListFinal; |
|
|
|
this.totalPrice = data.totalPrice; |
|
|
|
this.realPrice = data.totalPrice; |
|
|
|
|
|
|
|
this.fixMainHeight(); // 适配主内容高度 |
|
|
|
util.showLoad(); |
|
|
|
setTimeout(util.hideLoad, 500); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onRealPriceChange() { |
|
|
|
let price = parseFloat(this.realPrice || this.totalPrice); |
|
|
|
this.realPrice = `${price}` != "NaN" ? price.toFixed(2) : this.totalPrice; |
|
|
|
}, |
|
|
|
// 提交订单 |
|
|
|
cartConfirm() { |
|
|
|
let data = { cartListFinal: this.cartListFinal, curStore: this.curStore, totalPrice: this.totalPrice }; |
|
|
|
let data = { |
|
|
|
cartListFinal: this.cartListFinal, |
|
|
|
curStore: this.curStore, |
|
|
|
totalPrice: this.realPrice, |
|
|
|
mark: this.mark |
|
|
|
}; |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/subpackage/retail/pages/confirm_order/confirm_order?data=${encodeURIComponent(JSON.stringify(data))}` |
|
|
|
}); |
|
|
|
@ -92,18 +117,19 @@ |
|
|
|
// 看看当前滚动框是否超出这个高度 |
|
|
|
let query = uni.createSelectorQuery().select(".cg-footer"); |
|
|
|
query.boundingClientRect(data => { |
|
|
|
sumHeight = sumHeight - data.height - uni.upx2px(100); // 可用高度减去footer 再减去顶部标题项 |
|
|
|
sumHeight = sumHeight - data.height - uni.upx2px(100); // 可用高度减去footer 再减去顶部标题项100 |
|
|
|
let contentHeight = sumHeight; |
|
|
|
|
|
|
|
query = uni.createSelectorQuery().select(".main-list"); |
|
|
|
query.boundingClientRect(data => { |
|
|
|
let itemSize = data.height; |
|
|
|
let limitCount = Math.floor(contentHeight / itemSize); |
|
|
|
let height = _this.cartListFinal.length >= limitCount ? contentHeight : _this.cartListFinal.length * itemSize; |
|
|
|
let height = _this.cartListFinal.length >= limitCount ? contentHeight : _this.cartListFinal.length * itemSize + 120; // 120商品合计金额 |
|
|
|
height = contentHeight; |
|
|
|
_this.cartListFinalHeight = `${tools.px2rpx(height)}rpx`; |
|
|
|
|
|
|
|
// 可以滚动，并且设置safeArea,大于等于44的为iphoneX及以上 |
|
|
|
if (height >= contentHeight) { |
|
|
|
// 可以滚动，并且设置safeArea,大于等于44的为iphoneX及以上 |
|
|
|
_this.cartListScroll = true; |
|
|
|
_this.cartListFinalPaddingBottom = `${res.safeArea.top >= 44 ? tools.px2rpx(res.safeArea.top) : 0}rpx`; |
|
|
|
} |
|
|
|
@ -163,13 +189,83 @@ |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: flex-start; |
|
|
|
padding: 0 24rpx; |
|
|
|
// padding: 0 24rpx; |
|
|
|
// background-color: white; |
|
|
|
|
|
|
|
.content-mark { |
|
|
|
width: 100%; |
|
|
|
margin-top: 20rpx; |
|
|
|
background-color: white; |
|
|
|
padding: 0 24rpx; |
|
|
|
@include centerFlex(flex-start); |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
>view { |
|
|
|
@include centerFlex(flex-start); |
|
|
|
&:first-child { |
|
|
|
width: 100%; |
|
|
|
// height: 130rpx; |
|
|
|
padding: 20rpx 0rpx; |
|
|
|
>input { |
|
|
|
width: 458rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
padding: 24rpx 20rpx; |
|
|
|
margin: 0rpx 20rpx; |
|
|
|
background-color: #F2F2F7; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
&:nth-child(2) { |
|
|
|
align-items: flex-start; |
|
|
|
width: 100%; |
|
|
|
border-top: 1px solid rgba(216, 216, 216, 0.3); |
|
|
|
padding: 20rpx 0rpx; |
|
|
|
>textarea { |
|
|
|
width: 448rpx; |
|
|
|
min-height: 164rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
padding: 24rpx 20rpx; |
|
|
|
margin: 0rpx 20rpx; |
|
|
|
background-color: #F2F2F7; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
>text { |
|
|
|
width: 140rpx; |
|
|
|
text-align: left; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.content-price { |
|
|
|
width: 100%; |
|
|
|
// height: 120rpx; |
|
|
|
background-color: white; |
|
|
|
padding: 0rpx 24rpx; |
|
|
|
@include centerFlex(center); |
|
|
|
>view { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
text-align: right; |
|
|
|
padding: 30rpx 0rpx; |
|
|
|
border-top: 1px solid rgba(216, 216, 216, 0.3); |
|
|
|
font-size: 28rpx; |
|
|
|
>text { |
|
|
|
color: $orange; |
|
|
|
&:first-child { |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
&:nth-child(2) { |
|
|
|
font-size: 40rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.main-list { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
padding: 23rpx 0; |
|
|
|
padding: 23rpx 24rpx; |
|
|
|
background-color: white; |
|
|
|
|
|
|
|
.item-left { |
|
|
|
width: 140rpx; |
|
|
|
|
