|
@@ -4,8 +4,8 @@
|
|
|
<u-search placeholder="请输入产品名称/轮胎规格" shape="round" :clearabled="true" show-action v-model="queryWord" @clear="pageInit" @search="pageInit" @custom="pageInit"></u-search>
|
|
|
</view>
|
|
|
<view class="tab-body">
|
|
|
- <scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom">
|
|
|
- <view class="product-list">
|
|
|
+ <!-- <scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom"> -->
|
|
|
+ <view class="product-list" v-if="list.length">
|
|
|
<view
|
|
|
class="check-order-list"
|
|
|
v-for="(item,index) in list"
|
|
@@ -13,12 +13,12 @@
|
|
|
>
|
|
|
<view class="video-item">
|
|
|
<view>
|
|
|
- <u-image :src="item.productImage" height="140px" width="100%"></u-image>
|
|
|
+ <u-image :src="item.productImage+'?x-oss-process=image/resize,p_50'" height="140px" width="100%"></u-image>
|
|
|
<view class="back-price">返¥<text>{{item.promoRuleValue}}</text></view>
|
|
|
+ <view class="product-code">{{item.productCode}}</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<view class="product-name">{{item.productName}}</view>
|
|
|
- <view class="product-code">{{item.productCode}}</view>
|
|
|
<view class="product-guige ellipsis-two">{{item.productOrigCode}}</view>
|
|
|
<view class="product-button">
|
|
|
<view class="price-txt">¥<text>{{item.cost}}</text></view>
|
|
@@ -35,76 +35,75 @@
|
|
|
<u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
|
|
|
<u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
- <!-- 底部栏 -->
|
|
|
- <view class="bottom-bar" @click="clearAction">
|
|
|
- <view class="bottom-bar-left">
|
|
|
- <view class="bottom-bar-left-item">
|
|
|
- <view class="bottom-bar-left-item-icon" @click="openChoose">
|
|
|
- <u-icon name="shopping-cart" size="40"></u-icon>
|
|
|
- <u-badge type="error" :count="totalNum" :offset="[-7,-8]"></u-badge>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="bottom-bar-left-item" v-if="showChoosePopu">
|
|
|
- 合计:<view class="price-txt">¥<text>{{totalAmount}}</text></view>
|
|
|
+ <!-- </scroll-view> -->
|
|
|
+ </view>
|
|
|
+ <!-- 底部栏 -->
|
|
|
+ <view class="bottom-bar" @click="clearAction">
|
|
|
+ <view class="bottom-bar-left">
|
|
|
+ <view class="bottom-bar-left-item">
|
|
|
+ <view class="bottom-bar-left-item-icon" @click="openChoose">
|
|
|
+ <u-icon name="shopping-cart" size="40"></u-icon>
|
|
|
+ <u-badge type="error" :count="totalNum" :offset="[-7,-8]"></u-badge>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view :class="'bottom-bar-right bg-'+(showChoosePopu?'1':'0')" @click="submitOrder">
|
|
|
- <view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
|
|
|
+ <view class="bottom-bar-left-item" v-if="showChoosePopu">
|
|
|
+ 合计:<view class="price-txt">¥<text>{{totalAmount}}</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 已选列表 -->
|
|
|
- <u-popup
|
|
|
- v-model="showChoosePopu"
|
|
|
- closeable
|
|
|
- :zIndex="100"
|
|
|
- mode="bottom"
|
|
|
- border-radius="14"
|
|
|
- height="80%"
|
|
|
- @scrolltolower="onreachPopuBottom"
|
|
|
- @open="openRender"
|
|
|
- @close="closePopu">
|
|
|
- <view :style="{width:screenWidth + 'px'}" @click="clearAction">
|
|
|
- <view class="choose-title">
|
|
|
+ <view :class="'bottom-bar-right bg-'+(showChoosePopu?'1':'0')" @click="submitOrder">
|
|
|
+ <view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 已选列表 -->
|
|
|
+ <page-container
|
|
|
+ :show="showChoosePopu"
|
|
|
+ :round="true"
|
|
|
+ position="bottom"
|
|
|
+ custom-style="height:80%"
|
|
|
+ @enter="openRender"
|
|
|
+ @leave="closePopu">
|
|
|
+ <scroll-view :style="{width:screenWidth + 'px',height:'100%'}" scroll-y="true" @scrolltolower="onreachPopuBottom">
|
|
|
+ <view class="choose-title">
|
|
|
+ <view class="flex align_center">
|
|
|
<view>已选<text class="p-nums">{{chooseLength}}</text>款产品 </view>
|
|
|
<u-button @click="claerChoose" size="mini" type="error" plain style="margin: 0 20upx;">清空列表</u-button>
|
|
|
<text class="choose-inf">左滑删除产品</text>
|
|
|
</view>
|
|
|
- <view class="choose-product-list" v-if="showSwipeAction">
|
|
|
- <u-swipe-action
|
|
|
- :show="item.show"
|
|
|
- v-for="(item, index) in chooseProductList"
|
|
|
- :index="item.id"
|
|
|
- :key="item.id"
|
|
|
- @click="chooseClick"
|
|
|
- @open="chooseOpen"
|
|
|
- :options="chooseOptions"
|
|
|
- >
|
|
|
- <view class="choose-product-item">
|
|
|
- <view>
|
|
|
- <view class="choose-product-item-img">
|
|
|
- <u-image :src="item.productImage" height="200rpx" width="100%"></u-image>
|
|
|
- <view class="back-price">返¥<text>{{item.promoRuleValue}}</text></view>
|
|
|
- </view>
|
|
|
- <view class="choose-product-item-info">
|
|
|
- <view class="choose-product-item-left-info-name">{{item.productName}}</view>
|
|
|
- <view class="choose-product-item-left-info-code">{{item.productCode}}</view>
|
|
|
- <view class="choose-product-item-left-info-guige ellipsis-two">{{item.productOrigCode}}</view>
|
|
|
- <view class="choose-product-item-left-info-price">
|
|
|
- <view class="price-txt">¥<text>{{item.cost}}</text></view>
|
|
|
- <view>
|
|
|
- <u-number-box v-model="item.qty" :index="item.id" :input-width="60" :input-height="60" size="mini" :min="1" @change="changeQty"></u-number-box>
|
|
|
- </view>
|
|
|
+ <u-icon name="close" size="30" @click="showChoosePopu=false"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-list" v-if="showSwipeAction">
|
|
|
+ <u-swipe-action
|
|
|
+ :show="item.show"
|
|
|
+ v-for="(item, index) in chooseProductList"
|
|
|
+ :index="item.id"
|
|
|
+ :key="item.id"
|
|
|
+ @click="chooseClick"
|
|
|
+ @open="chooseOpen"
|
|
|
+ :options="chooseOptions"
|
|
|
+ >
|
|
|
+ <view class="choose-product-item" :style="{width:(screenWidth-20) + 'px'}">
|
|
|
+ <view>
|
|
|
+ <view class="choose-product-item-img">
|
|
|
+ <u-image :src="item.productImage+'?x-oss-process=image/resize,p_50'" height="200rpx" width="100%"></u-image>
|
|
|
+ <view class="back-price">返¥<text>{{item.promoRuleValue}}</text></view>
|
|
|
+ <view class="choose-product-item-left-info-code">{{item.productCode}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-item-info">
|
|
|
+ <view class="choose-product-item-left-info-name">{{item.productName}}</view>
|
|
|
+ <view class="choose-product-item-left-info-guige ellipsis-two">{{item.productOrigCode}}</view>
|
|
|
+ <view class="choose-product-item-left-info-price">
|
|
|
+ <view class="price-txt">¥<text>{{item.cost}}</text></view>
|
|
|
+ <view>
|
|
|
+ <u-number-box v-model="item.qty" :index="item.id" :input-width="60" :input-height="60" size="mini" :min="1" @change="changeQty"></u-number-box>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </u-swipe-action>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-swipe-action>
|
|
|
</view>
|
|
|
- </u-popup>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </scroll-view>
|
|
|
+ </page-container>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -123,7 +122,7 @@
|
|
|
queryWord: '',// 关键词查询列表
|
|
|
// 查询条件
|
|
|
pageNo: 1, // 当前页
|
|
|
- pageSize: 8,//每页条数
|
|
|
+ pageSize: 6,//每页条数
|
|
|
list: [], // 产品列表
|
|
|
total: 0, // 总记录
|
|
|
showChoosePopu: false,//已选列表弹框
|
|
@@ -193,6 +192,19 @@
|
|
|
this.$store.state.vuex_cartList.push({sn:this.promoActiveSn,list: this.chooseList})
|
|
|
}
|
|
|
this.$u.vuex('vuex_cartList', this.$store.state.vuex_cartList)
|
|
|
+
|
|
|
+ // 清空数据
|
|
|
+ this.chooseList = null
|
|
|
+ this.list = null
|
|
|
+ },
|
|
|
+ // 到底部加载更多
|
|
|
+ onReachBottom() {
|
|
|
+ if(this.list.length < this.total){
|
|
|
+ this.pageNo += 1
|
|
|
+ this.getRow()
|
|
|
+ }else{
|
|
|
+ this.status = "nomore"
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化页面
|
|
@@ -239,26 +251,33 @@
|
|
|
if(this.showChoosePopu){
|
|
|
console.log(this.chooseList)
|
|
|
// 默认加载第一页数据
|
|
|
- this.choosePageNo = 1
|
|
|
this.chooseTotal = this.chooseList.length
|
|
|
- this.chooseProductList = this.chooseTotal > this.choosePageSize ? this.chooseList.slice(0,this.choosePageSize) : this.chooseList
|
|
|
+ this.choosePageNo = 0
|
|
|
+ this.onreachPopuBottom()
|
|
|
}
|
|
|
}else{
|
|
|
this.$u.toast(`请选择产品`);
|
|
|
}
|
|
|
},
|
|
|
// 已选产品滚动到底部
|
|
|
- onreachPopuBottom(e){
|
|
|
+ onreachPopuBottom(){
|
|
|
const totalPages = Math.ceil(this.chooseTotal/this.choosePageSize)
|
|
|
if(this.choosePageNo>=totalPages){
|
|
|
return
|
|
|
}
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
this.choosePageNo = this.choosePageNo + 1
|
|
|
const start = (this.choosePageNo-1)*this.choosePageSize
|
|
|
const end = this.choosePageNo*this.choosePageSize
|
|
|
- const list = this.chooseList.slice(start,end>this.chooseTotal?this.chooseTotal:end)
|
|
|
+ const list = this.chooseTotal > this.choosePageSize ? this.chooseList.slice(start,end>this.chooseTotal?this.chooseTotal:end) : this.chooseList
|
|
|
this.chooseProductList = this.chooseProductList.concat(list)
|
|
|
this.chooseProductList.splice()
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ uni.hideLoading()
|
|
|
+ })
|
|
|
},
|
|
|
// 已选产品变更数量
|
|
|
changeQty(e){
|
|
@@ -297,6 +316,10 @@
|
|
|
this.chooseProductList.splice(rindex, 1);
|
|
|
this.chooseList.splice(rindex, 1);
|
|
|
}
|
|
|
+ // 如果数量小于每页数量,自动加载下一页
|
|
|
+ if(this.chooseProductList.length < this.choosePageSize){
|
|
|
+ this.onreachPopuBottom()
|
|
|
+ }
|
|
|
this.$u.toast(`删除成功!`);
|
|
|
}
|
|
|
},
|
|
@@ -344,15 +367,6 @@
|
|
|
item.qty = 0
|
|
|
})
|
|
|
},
|
|
|
- // scroll-view到底部加载更多
|
|
|
- onreachBottom() {
|
|
|
- if(this.list.length < this.total){
|
|
|
- this.pageNo += 1
|
|
|
- this.getRow()
|
|
|
- }else{
|
|
|
- this.status = "nomore"
|
|
|
- }
|
|
|
- },
|
|
|
// 查询列表
|
|
|
getRow () {
|
|
|
let _this = this
|
|
@@ -444,61 +458,21 @@
|
|
|
}
|
|
|
.video-pagesCons{
|
|
|
height: 100vh;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ position: relative;
|
|
|
.tab-search{
|
|
|
padding: 15rpx 20rpx;
|
|
|
background: #fff;
|
|
|
+ position: fixed;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ width:100%;
|
|
|
+ z-index:20;
|
|
|
}
|
|
|
.tab-body{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
flex-grow: 1;
|
|
|
- overflow: auto;
|
|
|
- .bottom-bar{
|
|
|
- height: 130upx;
|
|
|
- z-index: 500;
|
|
|
- background-color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 32upx;
|
|
|
- .bottom-bar-left{
|
|
|
- padding: 0 30upx;
|
|
|
- flex-grow: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .bottom-bar-left-item{
|
|
|
- padding-right: 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .bottom-bar-left-item-icon{
|
|
|
- position: relative;
|
|
|
- background: #2196F3;
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 100%;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .bottom-bar-right{
|
|
|
- padding: 0 50rpx;
|
|
|
- height: 100%;
|
|
|
- background: #2196F3;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .bottom-bar-right-item{
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .bg-0{
|
|
|
- background: #2196F3;
|
|
|
- }
|
|
|
- .bg-1{
|
|
|
- background: #f44336;
|
|
|
- }
|
|
|
- }
|
|
|
+ padding: 90rpx 0 130rpx 0;
|
|
|
.product-list{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
@@ -518,6 +492,15 @@
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
+ .product-code{
|
|
|
+ color: #2196F3;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ left:0;
|
|
|
+ bottom:0;
|
|
|
+ background: rgba(255,255,255,0.7);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
&:last-child{
|
|
|
padding: 20rpx 20rpx 70rpx 20rpx;
|
|
@@ -526,10 +509,6 @@
|
|
|
.product-name{
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
- .product-code{
|
|
|
- margin: 10rpx 0 0;
|
|
|
- color: #2196F3;
|
|
|
- }
|
|
|
.product-guige{
|
|
|
margin: 10rpx 0 20rpx 0;
|
|
|
color: #888;
|
|
@@ -552,6 +531,54 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .bottom-bar{
|
|
|
+ height: 130upx;
|
|
|
+ z-index: 200;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 32upx;
|
|
|
+ position: fixed;
|
|
|
+ bottom:0;
|
|
|
+ left:0;
|
|
|
+ width:100%;
|
|
|
+ .bottom-bar-left{
|
|
|
+ padding: 0 30upx;
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .bottom-bar-left-item{
|
|
|
+ padding-right: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .bottom-bar-left-item-icon{
|
|
|
+ position: relative;
|
|
|
+ background: #2196F3;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .bottom-bar-right{
|
|
|
+ padding: 0 50rpx;
|
|
|
+ height: 100%;
|
|
|
+ background: #2196F3;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .bottom-bar-right-item{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bg-0{
|
|
|
+ background: #2196F3;
|
|
|
+ }
|
|
|
+ .bg-1{
|
|
|
+ background: #f44336;
|
|
|
+ }
|
|
|
+ }
|
|
|
.price-txt{
|
|
|
color: red;
|
|
|
text{
|
|
@@ -561,11 +588,13 @@
|
|
|
.choose-title{
|
|
|
display: flex;
|
|
|
align-items:center;
|
|
|
+ justify-content: space-between;
|
|
|
padding: 25rpx;
|
|
|
position: fixed;
|
|
|
background: #fff;
|
|
|
width: 100%;
|
|
|
z-index: 3;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
.p-nums{
|
|
|
color: #2196F3;
|
|
|
margin: 0 6rpx;
|
|
@@ -601,6 +630,15 @@
|
|
|
.back-price{
|
|
|
zoom: calc(0.8);
|
|
|
}
|
|
|
+ .choose-product-item-left-info-code{
|
|
|
+ color: #2196F3;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ left:0;
|
|
|
+ bottom:0;
|
|
|
+ background: rgba(255,255,255,0.7);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
.choose-product-item-info{
|
|
|
margin-right: 10rpx;
|
|
@@ -620,10 +658,6 @@
|
|
|
.choose-product-item-left-info-name{
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
- .choose-product-item-left-info-code{
|
|
|
- color: #2196F3;
|
|
|
- margin: 10rpx 0;
|
|
|
- }
|
|
|
.choose-product-item-left-info-guige{
|
|
|
color: #666;
|
|
|
margin: 10rpx 0;
|