|
@@ -2,39 +2,51 @@
|
|
|
<view>
|
|
|
<view class="searchBox">
|
|
|
<view class="searchBox_l"><u-search placeholder="请输入产品编码/产品名称" v-model="keyword" bg-color="#fff" :action-style="searchStyle"></u-search></view>
|
|
|
- <view class="searchBox_r" @click="sortShow=true">
|
|
|
+ <view class="searchBox_r" @click="sortShow = true">
|
|
|
<text>排序</text>
|
|
|
- <uni-icons color="#666666" type="paixu" @click="clear"></uni-icons>
|
|
|
- <!-- <u-icon name="https://cdn.uviewui.com/uview/example/button.png" color="#2979ff" size="28"></u-icon> -->
|
|
|
+ <u-icon color="#666666" name="paixu" custom-prefix="iscm-icon"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="listBox">
|
|
|
- <view class="listBox_l"><image src="../../static/default/def_img@2x.png" width="100%" height="100%"></image></view>
|
|
|
- <view class="listBox_r">
|
|
|
- <view class="type">ddiididid</view>
|
|
|
- <view class="tit">标题踢踢踢踢i</view>
|
|
|
- <view class="bot u-flex u-row-between">
|
|
|
- <view>
|
|
|
- 适配有货
|
|
|
- <text>3</text>
|
|
|
- 次
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- 适配无货
|
|
|
- <text>3</text>
|
|
|
- 次
|
|
|
+ <view v-if="list.length > 0">
|
|
|
+ <view class="listBox" v-for="(item, i) in list" :key="i">
|
|
|
+ <view class="listBox_l"><image :src="item.images" width="100%" height="100%"></image></view>
|
|
|
+ <view class="listBox_r">
|
|
|
+ <view class="type">{{ item.productCode }}</view>
|
|
|
+ <view class="tit">{{ item.productName }}i</view>
|
|
|
+ <view class="bot u-flex u-row-between">
|
|
|
+ <view>
|
|
|
+ 适配有货
|
|
|
+ <text>{{ item.isStockCount || 0 }}</text>
|
|
|
+ 次
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ 适配无货
|
|
|
+ <text>{{ item.notStockCount || 0}}</text>
|
|
|
+ 次
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view style="padding: 20rpx 0;"><u-loadmore :status="status" /></view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view v-else class="emptyStyle"><u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" text="暂无匹配产品" mode="list"></u-empty></view>
|
|
|
+
|
|
|
<!-- 排序弹窗 -->
|
|
|
- <u-popup v-model="sortShow" mode="right">
|
|
|
- <view>出淤泥而不染,濯清涟而不妖</view>
|
|
|
+ <u-popup v-model="sortShow" mode="right" width="60%">
|
|
|
+ <view class="sortPopup">
|
|
|
+ <view class="sortList" v-for="(item, i) in sortList" :key="i" :class="isSortFlag == i ? 'sortChecked' : ''" @click="chooseSort(i)">{{ item.name }}</view>
|
|
|
+ <view class="butBox u-flex u-row-between">
|
|
|
+ <u-button shape="circle" size="medium" @click="reset">重置</u-button>
|
|
|
+ <u-button shape="circle" size="medium" type="primary" @click="handelSort">确定</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { reportPage } from '@/api/vinLog';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -46,11 +58,116 @@ export default {
|
|
|
fontSize: '26rpx',
|
|
|
padding: '4rpx 10rpx'
|
|
|
},
|
|
|
- sortShow:false,
|
|
|
- keyword:''
|
|
|
+ sortShow: false,
|
|
|
+ keyword: '',
|
|
|
+ sortList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '最近次VIN扫描时间降序'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '适配有货降序'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: '适配无货降序'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ isSortFlag: -1,
|
|
|
+ list: [],
|
|
|
+ shelfSn: '',
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ noDataText: '暂无数据',
|
|
|
+ status: 'loading',
|
|
|
+ totalNum:0,
|
|
|
+ total:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.shelfSn = options.shelfSn;
|
|
|
+ let ajaxData = {
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ shelfSn: this.shelfSn
|
|
|
};
|
|
|
+ this.loadData(ajaxData);
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取数字货架列表
|
|
|
+ loadData(params) {
|
|
|
+ const _this = this;
|
|
|
+ _this.status = 'loading';
|
|
|
+ reportPage(params).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ if(this.pageNo>1){
|
|
|
+ this.list = this.list.concat(res.data.list || [])
|
|
|
+ }else{
|
|
|
+ this.list = res.data.list || []
|
|
|
+ }
|
|
|
+ this.totalNum = res.data.count || 0
|
|
|
+ } else {
|
|
|
+ this.list = []
|
|
|
+ this.totalNum = 0
|
|
|
+ this.noDataText = res.message
|
|
|
+ }
|
|
|
+ this.status = "loadmore"
|
|
|
+ });
|
|
|
+ },
|
|
|
+ chooseSort(i) {
|
|
|
+ this.isSortFlag = i;
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.isSortFlag = -1;
|
|
|
+ let ajaxData = {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ shelfSn: this.shelfSn
|
|
|
+ };
|
|
|
+ this.loadData(ajaxData);
|
|
|
+ },
|
|
|
+ handelSort() {
|
|
|
+ if (this.isSortFlag == -1) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择排序方式',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 4000
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ var ajaxData = {
|
|
|
+ shelfSn: this.shelfSn,
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ };
|
|
|
+ if (this.isSortFlag == 0) {
|
|
|
+ ajaxData.orderBy = 'xvfp.scan_vin_date desc,xp.code asc';
|
|
|
+ } else if (this.isSortFlag == 1) {
|
|
|
+ ajaxData.orderBy = 'xvfp.in_stock_count desc,xp.code asc';
|
|
|
+ } else {
|
|
|
+ ajaxData.orderBy = 'xvfp.not_stock_count desc,xp.code asc';
|
|
|
+ }
|
|
|
+ this.isSortFlag = -1;
|
|
|
+ this.sortShow=false;
|
|
|
+ this.loadData(ajaxData);
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {}
|
|
|
+ //到底部加载更多
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.list.length < this.totalNum) {
|
|
|
+ this.pageNo += 1;
|
|
|
+ let ajaxData = {
|
|
|
+ shelfSn: this.shelfSn,
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ };
|
|
|
+ this.loadData(ajaxData);
|
|
|
+ } else {
|
|
|
+ this.status = 'nomore';
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -71,7 +188,7 @@ page {
|
|
|
}
|
|
|
.searchBox_r {
|
|
|
width: 19%;
|
|
|
- color: #9da8b5;
|
|
|
+ color: #666666;
|
|
|
text-align: right;
|
|
|
text {
|
|
|
margin-right: 10rpx;
|
|
@@ -92,7 +209,6 @@ page {
|
|
|
image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-color: red;
|
|
|
}
|
|
|
}
|
|
|
.listBox_r {
|
|
@@ -112,21 +228,52 @@ page {
|
|
|
.bot {
|
|
|
width: 100%;
|
|
|
view {
|
|
|
- &::first-child {
|
|
|
+ &:first-child {
|
|
|
color: #999;
|
|
|
text {
|
|
|
color: green;
|
|
|
+ margin: 0 10rpx;
|
|
|
}
|
|
|
}
|
|
|
- &::last-child {
|
|
|
+ &:last-child {
|
|
|
color: #999;
|
|
|
text {
|
|
|
color: red;
|
|
|
+ margin: 0 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // 弹窗样式
|
|
|
+ .sortPopup {
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .sortList {
|
|
|
+ width: 100%;
|
|
|
+ height: 70rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ border-radius: 60rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ }
|
|
|
+ .butBox {
|
|
|
+ margin-top: 100rpx;
|
|
|
+ }
|
|
|
+ .sortChecked {
|
|
|
+ background-color: #999;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .emptyStyle {
|
|
|
+ margin-top: 280rpx;
|
|
|
+ }
|
|
|
+ .u-size-medium {
|
|
|
+ padding: 0 60rpx !important;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|