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.
551 lines
14 KiB
551 lines
14 KiB
<template>
|
|
<view class="cg-container">
|
|
<view class="final-cart-list">
|
|
<view class="final-cart-list-dialog-title">
|
|
<view>商品名称</view>
|
|
<view>售价</view>
|
|
<view>数量</view>
|
|
</view>
|
|
<scroll-view class="final-cart-list-dialog-content" :scroll-top="0" :scroll-y="cartListScroll" :style="{ height:cartListFinalHeight, paddingBottom:cartListFinalPaddingBottom }">
|
|
<view class="final-cart-list-dialog-content-for" :style="{ borderBottom:item.borderBottom }" v-for="item in cartListFinal" :key="item.id">
|
|
<view class="final-cart-list-dialog-content-col1">
|
|
<view>{{ item.erp_goods_name }}</view>
|
|
<view>{{ item.erp_goods_specs }}</view>
|
|
</view>
|
|
<view class="final-cart-list-dialog-content-col2">
|
|
<input v-if="isEdited" type="digit" :value="item.erp_goods_price" @confirm="cartInputConfirm($event, item.id)" @blur="cartInputConfirm($event, item.id)" />
|
|
<view v-if="!isEdited">{{item.erp_goods_price}}</view>
|
|
<view>元</view>
|
|
</view>
|
|
<view class="final-cart-list-dialog-content-col3">
|
|
<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="cartCountClick('sub', item.id)"></image>
|
|
<view>{{ item.count }}</view>
|
|
<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/add.png" @click="cartCountClick('add', item.id)"></image>
|
|
</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-reedit" v-if="!isEdited" @click="cartReedit"><button hover-class="hover-active">重新编辑</button></view>
|
|
<view class="cg-footer-btn-confirm" @click="cartConfirm"><button hover-class="hover-active">{{cartConfirmText}}</button></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<retailPayWay
|
|
:show="retailPayWayWin.show" :price="totalPrice" :storeId="curStore.id"
|
|
@update:onClose="showOrHidePayWay" @update:onConfirm="goodsRetail"
|
|
>
|
|
</retailPayWay>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import util from '../../../../utils/util.js';
|
|
import tools from '../../js/tools';
|
|
import retailServer from '../../js/retail_server';
|
|
import retailApi from '../../js/retail_api';
|
|
|
|
import retailPayWay from '../../components/retail_pay_way/retail_pay_way.vue';
|
|
|
|
export default {
|
|
components: {
|
|
'retailPayWay': retailPayWay
|
|
},
|
|
data() {
|
|
return {
|
|
isEdited: false, // 是否处于编辑模式
|
|
curStore: {}, // 当前店铺信息
|
|
cartListFinal: [], // 购物车最终列表数据
|
|
totalPrice: 0, // 最终价格
|
|
cartConfirmText: "收款出库", // 收款出库 || 确认
|
|
cartListScroll: false, // 购物车列表是否能滚动
|
|
cartListFinalHeight: "0rpx", // 最终显示的列表高度
|
|
cartListFinalPaddingBottom: "0rpx", // 根据是否是异形屏来设置
|
|
|
|
retailPayWayWin: {
|
|
show: false,
|
|
},
|
|
}
|
|
},
|
|
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.cartListFinal[i]["borderBottom"] = "1rpx solid rgb(216,216,216)";
|
|
}
|
|
|
|
// 最后一项默认不显示边框
|
|
this.cartListFinal[this.cartListFinal.length - 1]["borderBottom"] = "0rpx solid rgb(216,216,216)";
|
|
this.fixMainHeight(); // 适配主内容高度
|
|
this.calcTotalPrice(); // 计算总价
|
|
|
|
util.showLoad();
|
|
setTimeout(util.hideLoad, 1000);
|
|
},
|
|
methods: {
|
|
// 显示隐藏支付方式弹窗
|
|
showOrHidePayWay(status) {
|
|
this.retailPayWayWin.show = status;
|
|
},
|
|
|
|
// 重新编辑
|
|
cartReedit() {
|
|
this.isEdited = true;
|
|
this.cartConfirmText = "确认";
|
|
},
|
|
|
|
// 商品出库
|
|
goodsRetail(info) {
|
|
let _this = this;
|
|
let data = [];
|
|
for (let i = 0; i < this.cartListFinal.length; ++i) {
|
|
if (this.cartListFinal[i].count) {
|
|
data.push({
|
|
id: this.cartListFinal[i].id,
|
|
name: this.cartListFinal[i].erp_goods_name,
|
|
price: this.cartListFinal[i].erp_goods_price,
|
|
nums: this.cartListFinal[i].count,
|
|
unit: this.cartListFinal[i].erp_goods_unit,
|
|
});
|
|
}
|
|
}
|
|
|
|
if (!data.length) {
|
|
util.showNone("暂无商品数量！");
|
|
return;
|
|
}
|
|
|
|
let newData = {
|
|
store_id: _this.curStore.id,
|
|
goods_data: data,
|
|
pay_type: info.type,
|
|
};
|
|
if (info.inputValue) {
|
|
newData["other_pay_type"] = info.inputValue;
|
|
}
|
|
if (info.cardNo) {
|
|
newData["card_no"] = info.cardNo;
|
|
}
|
|
|
|
util.showLoad();
|
|
retailServer.post({
|
|
url: retailApi.assistantRetail,
|
|
data: newData,
|
|
isDefaultGet: false,
|
|
failMsg: '出库失败！'
|
|
}).then(res => {
|
|
if (res.data.code == 0) {
|
|
uni.setStorage({
|
|
key: "retailStatus",
|
|
data: "true",
|
|
success: function() {
|
|
util.hideLoad();
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});;
|
|
},
|
|
fail: function(err) {
|
|
util.hideLoad();
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
});
|
|
}
|
|
else {
|
|
util.showNone(res.data.message || '操作失败！');
|
|
}
|
|
});
|
|
},
|
|
|
|
// 确认 || 收款出库
|
|
cartConfirm() {
|
|
if (this.cartConfirmText == "确认") {
|
|
this.isEdited = false;
|
|
this.cartConfirmText = "收款出库";
|
|
return;
|
|
}
|
|
|
|
let mark = false;
|
|
for (let i = 0; i < this.cartListFinal.length; ++i) {
|
|
if (this.cartListFinal[i].count) {
|
|
mark = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!mark) {
|
|
util.showNone("暂无商品数量！");
|
|
return;
|
|
}
|
|
|
|
this.showOrHidePayWay(true); // 弹出支付方式选择框
|
|
// this.goodsRetail(); // 商品出库
|
|
},
|
|
|
|
// 购物车输入确认
|
|
cartInputConfirm(event, id) {
|
|
// 修改购物车列表对应的价格
|
|
let value = parseFloat(event.detail.value ? event.detail.value : 0).toFixed(2);
|
|
for (let i = 0; i < this.cartListFinal.length; ++i) {
|
|
if (this.cartListFinal[i].id == id) {
|
|
this.cartListFinal[i].erp_goods_price = value;
|
|
}
|
|
}
|
|
|
|
this.calcTotalPrice(); // 计算总价
|
|
},
|
|
|
|
// 购物车列表数量选项触发
|
|
cartCountClick(type, id) {
|
|
// 找点击的对应商品
|
|
let item = null;
|
|
for (let i = 0; i < this.cartListFinal.length; ++i) {
|
|
if (this.cartListFinal[i].id == id) {
|
|
item = this.cartListFinal[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (item) {
|
|
switch (type) {
|
|
case "add": {
|
|
// 判断库存
|
|
if (item.count + 1 > item.stock_num) {
|
|
util.showNone("库存就这么多了！");
|
|
return;
|
|
}
|
|
item.count += 1;
|
|
} break;
|
|
case "sub": {
|
|
if (item.count <= 0) {
|
|
return;
|
|
}
|
|
|
|
item.count -= 1;
|
|
} break;
|
|
}
|
|
|
|
this.calcTotalPrice(); // 计算总价
|
|
}
|
|
},
|
|
|
|
// 计算总价
|
|
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(90); // 可用高度减去footer 再减去顶部标题项
|
|
let contentHeight = sumHeight;
|
|
|
|
query = uni.createSelectorQuery().select(".final-cart-list-dialog-content-for");
|
|
query.boundingClientRect(data => {
|
|
let itemSize = (data.height + uni.upx2px(30)); // 30是margin
|
|
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">
|
|
page {
|
|
// background-color: rgb(237,237,245);
|
|
background-color: rgb(255,255,255);
|
|
}
|
|
|
|
.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 */
|
|
// border: 1px solid red;
|
|
z-index: 1;
|
|
|
|
.final-cart-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
flex-grow: 1;
|
|
background-color: rgb(237,237,245);
|
|
|
|
.final-cart-list-dialog-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
text-align: center;
|
|
padding-left: 34rpx;
|
|
padding-right: 36rpx;
|
|
background-color: rgb(255,255,255);
|
|
|
|
>view {
|
|
font-size: 32rpx;
|
|
color: rgb(51,51,51);
|
|
|
|
&:first-child {
|
|
width: 258rpx;
|
|
|
|
}
|
|
&:nth-child(2) {
|
|
width: 166rpx;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 126rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.final-cart-list-dialog-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
// flex-grow: 1;
|
|
// height: 428rpx;
|
|
padding-left: 34rpx;
|
|
padding-right: 36rpx;
|
|
background-color: rgb(255,255,255);
|
|
// 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 */
|
|
|
|
.final-cart-list-dialog-content-for {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
// flex-grow: 1;
|
|
height: 114rpx;
|
|
border-bottom: 1rpx solid rgb(216,216,216);
|
|
background-color: rgb(255,255,255);
|
|
margin-top: 30rpx;
|
|
|
|
.final-cart-list-dialog-content-col1 {
|
|
// display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 258rpx;
|
|
|
|
>view {
|
|
overflow: hidden;
|
|
word-break: nowrap;
|
|
text-overflow: ellipsis; /* 超出部分省略号 */
|
|
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
|
|
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
|
-webkit-line-clamp: 1; /** 显示的行数 **/
|
|
|
|
&:first-child {
|
|
font-size: 28rpx;
|
|
color: rgb(51,51,51);
|
|
margin-bottom: 8rpx;
|
|
}
|
|
&:nth-child(2) {
|
|
font-size: 24rpx;
|
|
color: rgb(154,154,157);
|
|
}
|
|
}
|
|
}
|
|
|
|
.final-cart-list-dialog-content-col2 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: rgb(51,51,51);
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
width: 166rpx;
|
|
|
|
>input {
|
|
width: 132rpx;
|
|
height: 48rpx;
|
|
border: 2rpx solid rgb(216,216,216);
|
|
border-radius: 4rpx;
|
|
}
|
|
>view {
|
|
&:first-child {
|
|
|
|
}
|
|
&:nth-child(2) {
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.final-cart-list-dialog-content-col3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 126rpx;
|
|
|
|
>image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
|
|
&:first-child {
|
|
|
|
}
|
|
&:nth-child(3) {
|
|
|
|
}
|
|
}
|
|
>view {
|
|
margin-left: 12rpx;
|
|
margin-right: 12rpx;
|
|
color: rgb(51,51,51);
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cg-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
// flex-grow: 1;
|
|
// opacity: 0.3;
|
|
|
|
position: fixed;
|
|
// bottom: 0rpx;
|
|
bottom: calc( 0rpx + constant(safe-area-inset-bottom));
|
|
bottom: calc( 0rpx + env(safe-area-inset-bottom));
|
|
// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
|
|
// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
|
|
width: 100%;
|
|
height: 188rpx;
|
|
// border: 1rpx solid blue;
|
|
background-color: rgb(255,255,255);
|
|
|
|
>view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: flex-end;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.cg-footer-price {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
width: 100%;
|
|
padding-right: 40rpx;
|
|
|
|
>view {
|
|
&:first-child {
|
|
font-size: 24rpx;
|
|
}
|
|
&:nth-child(2) {
|
|
color: rgb(255,135,61);
|
|
font-size: 32rpx;
|
|
|
|
>text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cg-footer-btn {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
width: 100%;
|
|
padding-right: 24rpx;
|
|
font-size: 32rpx;
|
|
|
|
> view {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.cg-footer-btn-reedit {
|
|
>button {
|
|
width: 242rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 44rpx;
|
|
padding: 0 0;
|
|
color: rgb(0,152,116);
|
|
background-color: rgb(255,255,255);
|
|
border: 2rpx solid rgb(0,152,116);
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.cg-footer-btn-confirm {
|
|
>button {
|
|
width: 242rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 44rpx;
|
|
padding: 0 0;
|
|
color: rgb(255,255,255);
|
|
background-color: rgb(0,152,116);
|
|
border: 2rpx solid rgb(0,152,116);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|