You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
7.7 KiB
299 lines
7.7 KiB
<template>
|
|
<view class="cg-container">
|
|
<view class="cg-header">
|
|
<view class="cg-header-title">
|
|
<view class="icon-line">
|
|
<image mode="aspectFit" src="/static/images/icon/retail/storeIcon.png"></image>
|
|
<view>{{ curStore.name ? curStore.name : '' }}</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="cg-header-content" :scroll-top="0" :scroll-y="true" :style="{ height:cartListFinalHeight, paddingBottom:cartListFinalPaddingBottom }">
|
|
<view class="main-list" v-for="item in cartListFinal" :key="item.id">
|
|
<view class="item-left">
|
|
<image mode="aspectFit" src="/static/images/icon/author_modal.png"></image>
|
|
</view>
|
|
<view class="item-right">
|
|
<view class="item-right-top">
|
|
<view class="item-right-name">{{ item.erp_goods_name }}</view>
|
|
<view class="item-right-spec">
|
|
<view>{{ `${item.erp_goods_specs}/${item.erp_goods_specs}/${item.erp_goods_specs}` }}</view>
|
|
<view>x{{ item.count }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-right-price-count">
|
|
<view class="item-right-price-row">
|
|
<view><text>￥</text>{{ item.erp_goods_price }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="cg-footer">
|
|
<view>
|
|
<view class="cg-footer-price">
|
|
<view>实付款：</view>
|
|
<view><text>￥</text>{{ totalPrice }}</view>
|
|
</view>
|
|
|
|
<view class="cg-footer-btn">
|
|
<view class="cg-footer-btn-confirm" @click="cartConfirm"><button hover-class="hover-active">提交订单</button></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import util from '../../../../utils/util.js';
|
|
import tools from '../../js/tools';
|
|
import retailServer from '../../js/retail_server';
|
|
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
curStore: {}, // 当前店铺信息
|
|
cartListFinal: [], // 购物车最终列表数据
|
|
totalPrice: 0, // 最终价格
|
|
cartListScroll: false, // 购物车列表是否能滚动
|
|
cartListFinalHeight: "0rpx", // 最终显示的列表高度
|
|
cartListFinalPaddingBottom: "0rpx", // 根据是否是异形屏来设置
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
let data = JSON.parse(decodeURIComponent(option.data));
|
|
this.curStore = data.curStore;
|
|
this.cartListFinal = [];
|
|
for (let i = 0; i < data.cartListFinal.length; ++i)
|
|
this.cartListFinal.push(tools.getNewObj(data.cartListFinal[i]));
|
|
|
|
this.fixMainHeight(); // 适配主内容高度
|
|
this.calcTotalPrice(); // 计算总价
|
|
util.showLoad();
|
|
setTimeout(util.hideLoad, 500);
|
|
},
|
|
methods: {
|
|
// 提交订单
|
|
cartConfirm() {
|
|
let data = { cartListFinal: this.cartListFinal, curStore: this.curStore };
|
|
uni.navigateTo({
|
|
url: `/subpackage/retail/pages/confirm_order/confirm_order?data=${encodeURIComponent(JSON.stringify(data))}`
|
|
});
|
|
},
|
|
// 计算总价
|
|
calcTotalPrice() {
|
|
let price = 0.0;
|
|
for (let i = 0; i < this.cartListFinal.length; ++i)
|
|
price += (this.cartListFinal[i].count * this.cartListFinal[i].erp_goods_price);
|
|
|
|
this.totalPrice = price.toFixed(2);
|
|
},
|
|
// 适配主内容高度
|
|
fixMainHeight() {
|
|
let _this = this;
|
|
uni.getSystemInfo({
|
|
success: res => {
|
|
console.log(res);
|
|
let sumHeight = res.windowHeight; // 获取可用的总高度
|
|
|
|
// 看看当前滚动框是否超出这个高度
|
|
let query = uni.createSelectorQuery().select(".cg-footer");
|
|
query.boundingClientRect(data => {
|
|
sumHeight = sumHeight - data.height - uni.upx2px(100); // 可用高度减去footer 再减去顶部标题项
|
|
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;
|
|
_this.cartListFinalHeight = `${tools.px2rpx(height)}rpx`;
|
|
|
|
// 可以滚动，并且设置safeArea,大于等于44的为iphoneX及以上
|
|
if (height >= contentHeight) {
|
|
_this.cartListScroll = true;
|
|
_this.cartListFinalPaddingBottom = `${res.safeArea.top >= 44 ? tools.px2rpx(res.safeArea.top) : 0}rpx`;
|
|
}
|
|
}).exec();
|
|
}).exec();
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
$orange: #FF873D;
|
|
page {
|
|
background-color: white;
|
|
}
|
|
|
|
.cg-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding-bottom: 0rpx;
|
|
padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
|
|
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
|
|
|
|
.cg-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
background-color: #F2F2F7;
|
|
|
|
.cg-header-title {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background-color: white;
|
|
padding: 0 24rpx;
|
|
|
|
.icon-line {
|
|
@include centerFlex(flex-start);
|
|
width: 100%;
|
|
height: 100%;
|
|
font-weight: 500;
|
|
border-bottom: 1rpx solid rgba(216, 216, 216, 0.3);
|
|
|
|
>image {
|
|
width: 32rpx;
|
|
height: 30rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
.cg-header-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding: 0 24rpx;
|
|
background-color: white;
|
|
|
|
.main-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 23rpx 0;
|
|
|
|
.item-left {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
margin-right: 20rpx;
|
|
position: relative;
|
|
border-radius: 10rpx;
|
|
|
|
>image {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
.item-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex-grow: 1;
|
|
|
|
.item-right-top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item-right-name {
|
|
font-size: 28rpx;
|
|
}
|
|
.item-right-spec {
|
|
margin: 8rpx 0 14rpx 0;
|
|
font-size: 24rpx;
|
|
color: #9A9A9D;
|
|
@include centerFlex(space-between);
|
|
}
|
|
}
|
|
.item-right-price-count {
|
|
@include centerFlex(space-between);
|
|
|
|
.item-right-price-row {
|
|
color: $orange;
|
|
|
|
>view {
|
|
&:first-child {
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
|
|
>text {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cg-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: fixed;
|
|
bottom: calc( 0rpx + constant(safe-area-inset-bottom));
|
|
bottom: calc( 0rpx + env(safe-area-inset-bottom));
|
|
width: 100%;
|
|
height: 108rpx;
|
|
background-color: white;
|
|
|
|
>view {
|
|
@include centerFlex(space-between);
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.cg-footer-price {
|
|
@include centerFlex(flex-start);
|
|
height: 88rpx;
|
|
width: 100%;
|
|
padding-left: 28rpx;
|
|
|
|
>view {
|
|
&:first-child {
|
|
font-size: 28rpx;
|
|
}
|
|
&:nth-child(2) {
|
|
color: $orange;
|
|
font-size: 36rpx;
|
|
|
|
>text {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cg-footer-btn {
|
|
@include centerFlex(flex-end);
|
|
height: 88rpx;
|
|
padding-right: 24rpx;
|
|
font-size: 32rpx;
|
|
|
|
> view {
|
|
@include centerFlex(center);
|
|
}
|
|
.cg-footer-btn-confirm {
|
|
>button {
|
|
width: 240rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 44rpx;
|
|
padding: 0 0;
|
|
color: white;
|
|
background-color: $themeColor;
|
|
border: 2rpx solid $themeColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|