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.
611 lines
15 KiB
611 lines
15 KiB
<!-- 库存列表页 -->
|
|
<template>
|
|
<view class="page1">
|
|
<view class=""
|
|
style="width: 100%;border-top: 1px solid #eee;border-bottom: 1px solid #eee;position: fixed;background: #fff;top: 0;z-index: 99;">
|
|
<view class="title-right">
|
|
<view class="title-right-bottom title-btn" @tap.stop="onGridClick('2')">
|
|
新增商品
|
|
</view>
|
|
<view class="title-right-bottom title-btn" @tap.stop="onGridClick('0')">
|
|
分类管理
|
|
</view>
|
|
<view class="title-right-bottom title-btn" @tap.stop="onGridClick('5')">
|
|
批量下架
|
|
</view>
|
|
<view class="title-right-bottom title-btn" @tap.stop="onGridClick('6')">
|
|
批量删除
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="search">
|
|
<uni-search-bar class="uni-mt-10" radius="5" placeholder="商品名称" cancelButton="none" @input="search"
|
|
@clear="clearSearch" v-model="searchName" />
|
|
</view>
|
|
<view class="content-left" style="height: 100%;float: left;position: fixed;top: 13%;">
|
|
<view v-if="gateType == ''" class="left-box" v-for="(item, index) in indexList" :key="index"
|
|
:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)">
|
|
<text style="width: 100%;height: 90rpx;line-height: 90rpx;display: inline-block;overflow: hidden;"
|
|
:class="item.parentId ? 'red' :''">{{item.categoryName}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="content-right" style="width: 570rpx;background: #fff;margin-left:170rpx;margin-top: 200rpx;">
|
|
<view class="right-box" v-for="(item,index) in shopList" :key="index" @tap="goDetail(item)">
|
|
<view class="box-left" @tap.stop="largeImg(item)">
|
|
<img :src="item.productPicture" class="img-radius" alt="" v-if="item.productPicture">
|
|
<view class="noPic" v-else>暂无图片</view>
|
|
</view>
|
|
<view class="box-right">
|
|
<view class="box-right-num">货号:{{item.productSn==null?'':item.productSn}}</view>
|
|
<view class="box-right-name">名称:{{item.productName == null?'暂无':item.productName}}</view>
|
|
<view class="box-right-name">供应商:{{item.supplierName == null?'暂无':item.supplierName}}</view>
|
|
<!-- 1上架 0下架 -->
|
|
<view class="up-down" v-if="item.delFlag ==1" @tap.stop="upDown('0',item)">下架</view>
|
|
<view class="up-down" v-if="item.delFlag ==0" @tap.stop="upDown('1',item)">上架</view>
|
|
|
|
<view class="box-right-price">
|
|
<view class="price-box" v-if='type==0'>
|
|
<text
|
|
style="color: red;">{{item.purchasePrice}}</text>
|
|
<text>采购价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.wholesalePrice}}</text>
|
|
<text>批发价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.price}}</text>
|
|
<text>零售价</text>
|
|
</view>
|
|
<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
|
|
<text>{{item.stockCount + item.minusStockCount}}</text>
|
|
<view>
|
|
库存
|
|
<uni-icons type="help" size="15"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right-box" v-for="(item,index) in shopList1" :key="index" @tap="goDetail(item)">
|
|
<view class="box-left" @tap.stop="largeImg(item)">
|
|
<img :src="item.productPicture" class="img-radius" alt="" v-if="item.productPicture">
|
|
<view class="noPic" v-else>暂无图片</view>
|
|
</view>
|
|
<view class="box-right">
|
|
|
|
<view class="box-right-num">货号:{{item.productSn}}</view>
|
|
<view class="box-right-name">名称:{{item.productName == null?'暂无':item.productName}}</view>
|
|
<view class="box-right-name">供应商:{{item.supplierName == null?'暂无':item.supplierName}}</view>
|
|
<!-- 1上架 0下架 -->
|
|
<view class="up-down" v-if="item.delFlag ==1" @tap.stop="upDown('0',item)">下架</view>
|
|
<view class="up-down" v-if="item.delFlag ==0" @tap.stop="upDown('1',item)">上架</view>
|
|
|
|
<view class="box-right-price">
|
|
<view class="price-box" v-if='type==0'>
|
|
<text
|
|
style="color: red;">{{item.inStorageStatus==0?'待入库':item.purchasePrice==null?'新商品':item.purchasePrice}}</text>
|
|
<text>采购价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.wholesalePrice}}</text>
|
|
<text>批发价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.price}}</text>
|
|
<text>零售价</text>
|
|
</view>
|
|
<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
|
|
<text>{{item.stockCount + item.minusStockCount}}</text>
|
|
<view>
|
|
库存
|
|
<uni-icons type="help" size="15"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 弹出多图轮播 -->
|
|
<uni-popup ref="imgPopup" background-color="#fff">
|
|
<view class="showImg-box">
|
|
<swiper indicator-dots class="swiper-box" @change="lunbochange" circular autoplay
|
|
:current="swiperDotIndex">
|
|
<swiper-item v-for="(item, index) in bigImg" :key="index">
|
|
<view class="swiper-item">
|
|
<image mode='aspectFit' show-menu-by-longpress :src="item.productPicture" alt=""
|
|
style="width: 100%;height: 100%;border-radius: 10px;" />
|
|
</image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from 'vuex';
|
|
export default {
|
|
computed: mapState(['shopIndex', 'region']),
|
|
data() {
|
|
return {
|
|
size: 30,
|
|
indexList: [],
|
|
|
|
bigImg: [],
|
|
swiperDotIndex: 0,
|
|
pageNum: 1, //分页的页码
|
|
shopList: [],
|
|
categoryId: '', //分类id
|
|
shopId: '', //店铺id,
|
|
type: '',
|
|
orderSort: '',
|
|
sort: '',
|
|
searchName: '',
|
|
categoryIndex: 0,
|
|
shopList1: [],
|
|
gateType: '',
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
|
|
let that = this
|
|
this.type = uni.getStorageSync('type')
|
|
},
|
|
onReachBottom() {
|
|
if (this.pageNum >= this.pages) return;
|
|
this.pageNum++;
|
|
if (this.gateType == 'search') {
|
|
this.getShareList('search');
|
|
} else {
|
|
this.getShareList();
|
|
}
|
|
|
|
},
|
|
onShow() {
|
|
let that = this;
|
|
|
|
this.shopId = uni.getStorageSync('shopId')
|
|
|
|
this.searchName = ''
|
|
this.getGategoryList()
|
|
|
|
},
|
|
methods: {
|
|
lunbochange(e) {
|
|
this.current = e.detail.current
|
|
},
|
|
largeImg(img) {
|
|
if ((img.productPicture == null && img.productPictures == null) || (img.productPicture == '' && img.productPictures == null)) {
|
|
this.tui.toast("暂无可展示的图片", 300)
|
|
return
|
|
}
|
|
this.bigImg = []
|
|
if (img.productPicture != null) {
|
|
let data = {
|
|
productPicture: img.productPicture
|
|
}
|
|
this.bigImg.push(data)
|
|
}
|
|
if (img.productPictures != null) {
|
|
for (let i = 0; i < img.productPictures.length; i++) {
|
|
this.bigImg.push(img.productPictures[i])
|
|
}
|
|
}
|
|
this.$refs.imgPopup.open()
|
|
},
|
|
//初始化获取分类列表
|
|
getGategoryList() {
|
|
this.NB.sendRequest('/app/productCategory/list', {
|
|
|
|
}, false, 'get', 'application/json').then(res => {
|
|
if (res.code == 200) {
|
|
this.indexList = res.result;
|
|
for (var i = 0; i < this.indexList.length; i++) {
|
|
if (i == this.categoryIndex) {
|
|
this.indexList[i].parentId = true
|
|
} else {
|
|
this.indexList[i].parentId = false
|
|
}
|
|
}
|
|
this.categoryId = this.indexList[this.categoryIndex].id
|
|
this.pageNum = 1
|
|
this.searchName = ""
|
|
this.shopList1 = []
|
|
this.shopList = []
|
|
this.getShareList();
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
})
|
|
},
|
|
//点击左侧菜单切换
|
|
clickLeftBtn(index) {
|
|
uni.removeStorageSync('noReload')
|
|
for (var i = 0; i < this.indexList.length; i++) {
|
|
if (i == index) {
|
|
this.indexList[i].parentId = true
|
|
} else {
|
|
this.indexList[i].parentId = false
|
|
}
|
|
}
|
|
this.categoryIndex = index
|
|
this.categoryId = this.indexList[index].id
|
|
this.pageNum = 1
|
|
this.searchName = ""
|
|
this.orderSort = ""
|
|
this.sort = ''
|
|
this.shopList1 = []
|
|
this.shopList = []
|
|
this.getShareList()
|
|
},
|
|
//库存详情
|
|
goDetail(item) {
|
|
uni.setStorageSync('noReload', true)
|
|
uni.navigateTo({
|
|
url: '/package1/inventory/inventoryDetail?item=' + JSON.stringify(item)
|
|
})
|
|
},
|
|
//点击分类获取商品列表
|
|
getShareList(type) {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
let data = {}
|
|
if (type == 'search') {
|
|
this.gateType = 'search'
|
|
data = {
|
|
categoryId: "",
|
|
searchStr: this.searchName,
|
|
pageNum: this.pageNum,
|
|
pageSize: '10',
|
|
sort: "",
|
|
order: ""
|
|
}
|
|
} else {
|
|
this.gateType = ''
|
|
data = {
|
|
categoryId: this.categoryId,
|
|
searchStr: this.searchName,
|
|
pageNum: this.pageNum,
|
|
pageSize: '10',
|
|
sort: this.sort,
|
|
// supplierId: "1819981229722832896",
|
|
order: this.orderSort
|
|
|
|
}
|
|
}
|
|
this.NB.sendRequest('/app/product/getShareList', data, false, 'POST', 'application/json').then(res => {
|
|
if (res.code == 200) {
|
|
if (type == 'search') {
|
|
this.shopList = []
|
|
if (this.pages == 1) {
|
|
this.shopList1 = res.result.records
|
|
} else {
|
|
this.shopList1 = [...this.shopList1, ...res.result.records]
|
|
}
|
|
this.pages = res.result.pages
|
|
} else {
|
|
this.shopList1 = []
|
|
if (this.pages == 1) {
|
|
this.shopList = res.result.records
|
|
} else {
|
|
this.shopList = [...this.shopList, ...res.result.records]
|
|
}
|
|
this.pages = res.result.pages
|
|
}
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
})
|
|
uni.hideLoading()
|
|
},
|
|
//商品上下架
|
|
upDown(type, data) {
|
|
let that = this,
|
|
title = "确定将此款商品" + (type == 0 ? "下架" : "上架") + "吗？"
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: title,
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
that.pageNum = 1
|
|
that.searchName = ""
|
|
that.shopList1 = []
|
|
that.shopList = []
|
|
if (type == 0) { //下架
|
|
this.NB.sendRequest('/app/product/down', {
|
|
id: data.id
|
|
}, false, 'POST', 'application/json').then(res => {
|
|
if (res.code == 200) {
|
|
that.tui.toast("下架成功")
|
|
} else {
|
|
that.tui.toast(res.message)
|
|
}
|
|
that.categoryId = data.categoryId
|
|
that.getShareList()
|
|
})
|
|
} else { //上架
|
|
this.NB.sendRequest('/app/product/up', {
|
|
id: data.id
|
|
}, false, 'POST', 'application/json').then(res => {
|
|
if (res.code == 200) {
|
|
that.tui.toast("上架成功")
|
|
} else {
|
|
that.tui.toast(res.message)
|
|
}
|
|
that.categoryId = data.categoryId
|
|
that.getShareList()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//搜索接口
|
|
search(e) {
|
|
if (e == '') {
|
|
this.pageNum = 1
|
|
this.shopList1 = []
|
|
this.shopList = []
|
|
this.searchName = ""
|
|
this.getShareList()
|
|
} else {
|
|
this.pageNum = 1
|
|
this.shopList1 = []
|
|
this.shopList = []
|
|
this.searchName = e
|
|
this.getShareList('search')
|
|
|
|
}
|
|
},
|
|
//清空搜索条件
|
|
clearSearch() {
|
|
this.pageNum = 1
|
|
this.shopList1 = []
|
|
this.shopList = []
|
|
this.orderSort = ''
|
|
this.sort = ''
|
|
this.searchName = ''
|
|
this.getShareList()
|
|
},
|
|
//头部按钮
|
|
onGridClick(target) {
|
|
if (target == '0') {
|
|
uni.navigateTo({
|
|
url: '../goods/gategory'
|
|
})
|
|
} else if (target == '2') {
|
|
uni.navigateTo({
|
|
url: "../goods/addGoods"
|
|
})
|
|
} else if (target == '5') {
|
|
uni.navigateTo({
|
|
url: "/package1/inventory/goodsDelisting"
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/package1/inventory/goodsDelete"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page,.page1{
|
|
font-size: 28rpx;
|
|
}
|
|
.search {
|
|
width: 100%;
|
|
height: 7%;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 110rpx;
|
|
z-index: 99;
|
|
}
|
|
|
|
.title-right {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
}
|
|
|
|
.title-btn {
|
|
width: 140rpx;
|
|
height: 80rpx;
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
margin: 10rpx 0 0 20rpx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.title-right-bottom {
|
|
background: linear-gradient(90deg, #60F3FF, #088FEB);
|
|
}
|
|
|
|
.content-left {
|
|
width: 170rpx;
|
|
background: #eee;
|
|
height: 100%;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.left-box {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
|
|
.left-box-hover {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
border-bottom: 1px solid #fff;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.red {
|
|
border-right: 3px solid red;
|
|
}
|
|
|
|
.content-right {
|
|
width: 550rpx;
|
|
height: 78%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.right-box {
|
|
width: 100%;
|
|
height: 250rpx;
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
position: relative;
|
|
}
|
|
|
|
.box-left {
|
|
width: 130rpx;
|
|
height: 131rpx;
|
|
background-size: 100%;
|
|
margin: 25rpx 30rpx 35rpx 10rpx;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.box-left img {
|
|
width: 140rpx;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.box-right {
|
|
width: 100%;
|
|
margin-top: 17rpx;
|
|
}
|
|
|
|
.box-right-price {
|
|
width: 100%;
|
|
display: flex;
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.price-box {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.box-right-name {
|
|
font-size: 26rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.box-right-num {
|
|
padding: 5rpx 0;
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.price-box text:first-child {
|
|
color: #ffa200
|
|
}
|
|
|
|
.uni-mt-10 {
|
|
position: relative;
|
|
width: 100% !important;
|
|
float: left !important;
|
|
}
|
|
|
|
.uni-searchbar,
|
|
.uni-searchbar__box {
|
|
width: 100% !important;
|
|
padding: 5px 10px !important
|
|
}
|
|
|
|
.up-down {
|
|
position: absolute;
|
|
bottom: 10rpx;
|
|
left: 10rpx;
|
|
color: #fff;
|
|
background: #088FEB;
|
|
padding: 10rpx 10rpx;
|
|
border-radius: 5px;
|
|
width: 140rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.noPic {
|
|
border-radius: 10px;
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
// margin: 30rpx 0 0 30rpx;
|
|
text-align: center;
|
|
line-height: 140rpx;
|
|
color: #777;
|
|
background: #eee;
|
|
}
|
|
|
|
.showImg-box {
|
|
width: 700rpx;
|
|
height: 1000rpx;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.swiper-box {
|
|
height: 1000rpx;
|
|
}
|
|
|
|
.swiper-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 1000rpx;
|
|
color: #fff;
|
|
background-color: #cee1fd;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.vue-ref {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
@media screen and (min-width: 470px) {
|
|
|
|
/* 适配宽度为375px及以上的屏幕 */
|
|
.content-left {
|
|
height: 75% !important;
|
|
float: left;
|
|
position: fixed;
|
|
top: 25% !important;
|
|
}
|
|
|
|
}
|
|
@media screen and (min-width: 760px) {
|
|
|
|
/* 适配宽度为375px及以上的屏幕 */
|
|
.content-left {
|
|
height: 70% !important;
|
|
float: left;
|
|
position: fixed;
|
|
top: 29% !important;
|
|
padding-top:50px;
|
|
}
|
|
|
|
}
|
|
</style>
|