|
@@ -26,22 +26,91 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="check-list">
|
|
|
- <productList ref="productList" noDataText="暂无产品" @updateNums="updateNums" @allChecked="allCheckedCallback"></productList>
|
|
|
+ <productList ref="productList" noDataText="暂无产品" @allChecked="allCheckedCallback"></productList>
|
|
|
</view>
|
|
|
<!-- 底部栏 -->
|
|
|
<view class="footer-bar flex align_center" v-if="partList.length">
|
|
|
<view class="f-left">
|
|
|
<u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
|
|
|
</view>
|
|
|
- <view class="f-mid">
|
|
|
- <view v-if="totalCategory">
|
|
|
+ <view class="f-mid" @click="openCart">
|
|
|
+ <view>
|
|
|
已选<text>{{totalCategory}}</text>款产品
|
|
|
</view>
|
|
|
+ <view>
|
|
|
+ 查看明细 <u-icon name="arrow-up"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="f-btns">
|
|
|
<u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >确定选择</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 已选配件 购物车 -->
|
|
|
+ <div class="cpb_cart-mask" v-if="showCart">
|
|
|
+ <div class="cpb_cart-box">
|
|
|
+ <div class="cpb_close flex align-center justify_center" @click="showCart=false">
|
|
|
+ <u-icon name="close"></u-icon>
|
|
|
+ </div>
|
|
|
+ <div class="cpb_cart-tit">
|
|
|
+ <view>已选配件</view>
|
|
|
+ <view class="cpb_heji flex align_center justify_between">
|
|
|
+ <text @click="clearDetail">清空列表</text>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ <div class="cpb_cart-list">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in chooseList"
|
|
|
+ :key="'cpb_'+item.id"
|
|
|
+ >
|
|
|
+ <view class="nav-right-item flex align_center">
|
|
|
+ <view class="uni-col-1" @click="delDetail(item,index)">
|
|
|
+ <u-icon name="close-circle" color="#999" size="35"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="uni-col-11 flex">
|
|
|
+ <view class="uni-col-2">
|
|
|
+ <u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-col-9">
|
|
|
+ <view class="item-name">
|
|
|
+ <text>{{item.shelfPlaceCode}}</text>
|
|
|
+ {{item.productCode}}
|
|
|
+ </view>
|
|
|
+ <view class="item-name">
|
|
|
+ {{item.productName}}
|
|
|
+ </view>
|
|
|
+ <view class="item-detail">
|
|
|
+ <view class="item-detail-info align_center flex justify_between">
|
|
|
+ <view></view>
|
|
|
+ <view class="flex justify_end">
|
|
|
+ <view class="item-detail-text">
|
|
|
+ 最大库容:<text class="pnums">{{item.maxQty||0}}</text>
|
|
|
+ 货架库存:<text class="pnums">{{item.qty||0}}</text>
|
|
|
+ 门店库存:<text class="pnums">{{item.qplsStockQty||0}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="nav-right-item">
|
|
|
+ <view class="item-detail">
|
|
|
+ <view class="item-detail-info">
|
|
|
+ <view class="flex justify_between">
|
|
|
+ <view class="item-detail-text flex">
|
|
|
+ <view v-if="item.replenishBillQty">补货在途:<text class="pnums1">{{item.replenishBillQty||0}}</text></view>
|
|
|
+ <view v-if="item.recallBillQty">调回在途:<text class="pnums1">{{item.recallBillQty||0}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="item-detail-text">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 筛选项 -->
|
|
|
<u-popup v-model="showTab" mode="right" width="70%">
|
|
|
<view class="tabBox flex flex_column">
|
|
@@ -84,6 +153,7 @@
|
|
|
status: 'loading',
|
|
|
partList: [],
|
|
|
allChecked: false,
|
|
|
+ showCart: false,
|
|
|
showTab: false,
|
|
|
customBtnStyle: { // 自定义按钮样式
|
|
|
borderColor: this.$config('primaryColor'),
|
|
@@ -121,8 +191,10 @@
|
|
|
}
|
|
|
},
|
|
|
onBackPress(e) {
|
|
|
- if(this.showTab) {
|
|
|
+ console.log(e)
|
|
|
+ if((this.showTab || this.showCart)&&e.from != 'navigateBack') {
|
|
|
this.showTab = false;
|
|
|
+ this.showCart = false;
|
|
|
return true;
|
|
|
}
|
|
|
},
|
|
@@ -166,17 +238,50 @@
|
|
|
// 是否全选
|
|
|
this.allChecked = isAllChecked
|
|
|
},
|
|
|
+ // 打开购物车
|
|
|
+ openCart(){
|
|
|
+ if(this.totalCategory){
|
|
|
+ this.showCart = !this.showCart
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请先添加产品'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除购物车产品
|
|
|
+ delDetail(item,i){
|
|
|
+ console.log(item.id,i)
|
|
|
+ this.$refs.productList.setChecked(item.id,false)
|
|
|
+ const index = this.chooseList.findIndex(k => k.id == item.id)
|
|
|
+ this.chooseList.splice(index,1)
|
|
|
+ // 全部清空
|
|
|
+ if(this.chooseList.length==0){
|
|
|
+ this.clearChoose()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 空列表
|
|
|
+ clearDetail(){
|
|
|
+ const _this = this
|
|
|
+ clzConfirm({
|
|
|
+ title: '提示',
|
|
|
+ content: '确认要清空列表吗?',
|
|
|
+ success (ret) {
|
|
|
+ if (ret.confirm || ret.index == 0) {
|
|
|
+ _this.clearChoose()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
// 清空已选数据
|
|
|
clearChoose(){
|
|
|
this.chooseList = []
|
|
|
+ this.showCart = false
|
|
|
this.allChecked = false
|
|
|
if(this.$refs.productList){
|
|
|
this.$refs.productList.allSelect(false)
|
|
|
}
|
|
|
},
|
|
|
- updateNums(){
|
|
|
- this.chooseList = this.$refs.productList.getAllChecked()
|
|
|
- },
|
|
|
clearSearch(){
|
|
|
this.queryWord = ''
|
|
|
this.changeSearch()
|
|
@@ -365,6 +470,7 @@
|
|
|
&:first-child{
|
|
|
text{
|
|
|
color: red;
|
|
|
+ margin: 0 5upx;
|
|
|
}
|
|
|
}
|
|
|
&:last-child{
|
|
@@ -414,5 +520,108 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // 购物车
|
|
|
+ .cpb_cart-mask{
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+ z-index: 900;
|
|
|
+ bottom: 100rpx;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ .cpb_cart-box{
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 1000;
|
|
|
+ bottom: 0;
|
|
|
+ border-radius: 30rpx 30rpx 0 0;
|
|
|
+ max-height: 70vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .cpb_close{
|
|
|
+ position: absolute;
|
|
|
+ top: 10rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .cpb_cart-tit{
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-bottom: 2rpx solid #eee;
|
|
|
+ .cpb_heji{
|
|
|
+ padding-top: 20rpx;
|
|
|
+ font-size: 26upx;
|
|
|
+ > text{
|
|
|
+ color: #00aaff;
|
|
|
+ }
|
|
|
+ > view{
|
|
|
+ color: #999;
|
|
|
+ > text{
|
|
|
+ color: #333;
|
|
|
+ &:first-child{
|
|
|
+ margin-right: 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cpb_cart-list{
|
|
|
+ padding: 20rpx 0;
|
|
|
+ overflow: auto;
|
|
|
+ flex-grow: 1;
|
|
|
+ > view{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .nav-right-item{
|
|
|
+ padding: 0 30upx;
|
|
|
+ &:last-child{
|
|
|
+ border-bottom:2rpx solid #eee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-name{
|
|
|
+ font-size: 26rpx;
|
|
|
+ text{
|
|
|
+ background: rgba(3, 54, 146, 0.15);
|
|
|
+ color: #1c588a;
|
|
|
+ border-radius: 1em;
|
|
|
+ font-size: 0.8em;
|
|
|
+ padding: 0 0.5em;
|
|
|
+ margin-right: 10upx;
|
|
|
+ }
|
|
|
+ margin-top: 10upx;
|
|
|
+ }
|
|
|
+ .item-info{
|
|
|
+ flex-grow: 1;
|
|
|
+ padding-left: 0.8em;
|
|
|
+ }
|
|
|
+ .item-detail{
|
|
|
+ .item-detail-info{
|
|
|
+ padding: 10upx 0 4upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ .pnums{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .pnums1{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ > view{
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ align-items: center;
|
|
|
+ .item-detail-text{
|
|
|
+ color: #999;
|
|
|
+ margin-left: 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|