616 lines
16 KiB
Vue
616 lines
16 KiB
Vue
<template>
|
|
<base-page>
|
|
<view class="goodslist">
|
|
<view class="screen-warp common-form">
|
|
<view class="common-form-item">
|
|
<view class="form-inline">
|
|
<label class="form-label">商品名称</label>
|
|
<view class="form-input-inline"><input type="text" v-model="option.search_text" placeholder="请输入商品名称" class="form-input" /></view>
|
|
</view>
|
|
<view class="form-inline goods-category">
|
|
<label class="form-label">商品类型</label>
|
|
<view class="form-input-inline">
|
|
<select-lay :zindex="10" :value="goods_class" name="names" placeholder="请选择商品类型" :options="goodsClass" @selectitem="selectClass"></select-lay>
|
|
</view>
|
|
</view>
|
|
<view class="form-inline goods-category">
|
|
<label class="form-label">商品状态</label>
|
|
<view class="form-input-inline">
|
|
<select-lay :zindex="10" :value="status" name="names" placeholder="请选择商品状态" :options="statusList" @selectitem="selectStatus"></select-lay>
|
|
</view>
|
|
</view>
|
|
<view class="form-inline common-btn-wrap">
|
|
<button type="default" class="screen-btn" @click="searchFn()">筛选</button>
|
|
<button type="default" @click="resetFn()">重置</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uniDataTable url="/cashier/storeapi/goods/page" :option="option" :cols="cols" ref="goodsListTable">
|
|
<template v-slot:action="dataTable">
|
|
<view class="action-btn-wrap">
|
|
<text class="action-item" @click="getDetail(dataTable.value.goods_id)">详情</text>
|
|
<text
|
|
class="action-item"
|
|
v-if="dataTable.value.store_status == 0 || dataTable.value.store_status == null"
|
|
@click="goodsStatus(dataTable.value.goods_id, 1)"
|
|
>
|
|
上架
|
|
</text>
|
|
<text class="action-item" v-else @click="goodsStatus(dataTable.value.goods_id, 0)">下架</text>
|
|
<text class="action-item" @click="goodsSku(dataTable.value.goods_id)" v-if="(store && store.stock_type == 'store') || dataTable.value.is_unify_pirce != 1">
|
|
价格库存
|
|
</text>
|
|
<text class="action-item" @click="recordopen(dataTable.value.goods_id)" v-if="dataTable.value.is_virtual != 1 && store && store.stock_type == 'store'">
|
|
库存记录
|
|
</text>
|
|
</view>
|
|
</template>
|
|
<template v-slot:batchaction="dataTable">
|
|
<text class="batch-item" @click="goodsStatus(dataTable, 1)">批量上架</text>
|
|
<text class="batch-item" @click="goodsStatus(dataTable, 0)">批量下架</text>
|
|
</template>
|
|
</uniDataTable>
|
|
|
|
<unipopup ref="goodsDetail" type="center">
|
|
<view class="goods-detail-wrap">
|
|
<view class="detail-head">
|
|
商品详情
|
|
<text class="iconfont iconguanbi1" @click="$refs.goodsDetail.close()"></text>
|
|
</view>
|
|
<view class="detail-body">
|
|
<block v-if="JSON.stringify(goods_detail) != '{}'">
|
|
<view class="title">基本信息</view>
|
|
<view class="information-box">
|
|
<view class="box-left">
|
|
<view class="information">
|
|
<view>商品名称：</view>
|
|
<view>{{ goods_detail.goods_name }}</view>
|
|
</view>
|
|
<view class="information" v-if="goods_detail.introduction">
|
|
<view>促销语：</view>
|
|
<view>{{ goods_detail.introduction }}</view>
|
|
</view>
|
|
<view class="information">
|
|
<view>商品类型：</view>
|
|
<view>{{ goods_detail.goods_class_name }}</view>
|
|
</view>
|
|
<view class="information" v-if="goods_detail.brand_name">
|
|
<view>商品品牌：</view>
|
|
<view>{{ goods_detail.brand_name }}</view>
|
|
</view>
|
|
<view class="information" v-if="goods_detail.unit">
|
|
<view>单位：</view>
|
|
<view>{{ goods_detail.unit }}</view>
|
|
</view>
|
|
<view class="information">
|
|
<view>商品状态：</view>
|
|
<view>{{ goods_detail.store_status == 0 || goods_detail.store_status == null ? '仓库中' : '已上架' }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- <image class="goods-img" :src="$util.img(goods_detail.goods_image.split(',')[0], {'size':'big'})" mode="aspectFit" @error="goodsImageError(goods_detail)"></image> -->
|
|
</view>
|
|
<block v-if="goods_detail.sku_list.length > 1">
|
|
<view class="title title2">价格库存</view>
|
|
<view class="table">
|
|
<view class="table-th table-all">
|
|
<view class="table-td" style="width:25%">商品规格</view>
|
|
<block v-if="goods_detail.is_unify_pirce"><view class="table-td" style="width:30%">销售价格</view></block>
|
|
<block v-else>
|
|
<view class="table-td" style="width:15%">平台价格</view>
|
|
<view class="table-td" style="width:15%">门店价格</view>
|
|
</block>
|
|
|
|
<view class="table-td" style="width:20%;">商品编码</view>
|
|
<view class="table-td" style="width:10%;">商品库存</view>
|
|
</view>
|
|
<scroll-view class="table-tb" scroll-y="true">
|
|
<view class="table-tr table-all" v-for="(item, index) in goods_detail.sku_list" :key="index">
|
|
<view class="table-td" style="width:25%">{{ item.spec_name }}</view>
|
|
<block v-if="goods_detail.is_unify_pirce">
|
|
<view class="table-td" style="width:30%">￥{{ item.discount_price }}</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="table-td" style="width:15%">￥{{ item.price }}</view>
|
|
<view class="table-td" style="width:15%">￥{{ item.store_price }}</view>
|
|
</block>
|
|
<view class="table-td" style="width:20%;">{{ item.sku_no }}</view>
|
|
<view class="table-td" style="width:10%;">{{ item.stock }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="title title2">规格详情</view>
|
|
<view class="table">
|
|
<view class="single-specification">
|
|
<view class="item">
|
|
<view class="name">商品售价：</view>
|
|
<view class="message" v-if="goods_detail.is_unify_pirce == 1 || goods_detail.sku_list[0].store_price == null">
|
|
￥{{ goods_detail.sku_list[0].discount_price }}
|
|
</view>
|
|
<view class="message" v-else>{{ goods_detail.sku_list[0].store_price }}</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="name">商品编码：</view>
|
|
<view class="message">{{ goods_detail.sku_list[0].sku_no ? goods_detail.sku_list[0].sku_no : '无' }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="name">商品库存：</view>
|
|
<view class="message">{{ goods_detail.sku_list[0].stock || 0 }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
<block v-else><image class="cart-empty" :src="$util.img('public/uniapp/cashier/cart_empty.png')" mode="widthFix"></image></block>
|
|
</view>
|
|
</view>
|
|
</unipopup>
|
|
|
|
<unipopup ref="goodssku" type="center">
|
|
<view class="record-body">
|
|
<nsgoodssku
|
|
v-if="sku_list.length"
|
|
@close="close('goodssku')"
|
|
:goods_id="goodsId"
|
|
:is_unify_pirce="goods_detail.is_unify_pirce"
|
|
:sku_list="sku_list"
|
|
></nsgoodssku>
|
|
</view>
|
|
</unipopup>
|
|
|
|
<unipopup ref="record" type="center">
|
|
<view class="record-body"><nsrecord @close="close" :goods_id="goodsId" :sku_list="sku_list"></nsrecord></view>
|
|
</unipopup>
|
|
</view>
|
|
</base-page>
|
|
</template>
|
|
|
|
<script>
|
|
import nsExwarehouse from '@/components/ns-exwarehouse/ns-exwarehouse.vue';
|
|
import nsrecord from '@/components/ns-record/ns-record.vue';
|
|
import nsgoodssku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
|
import uniDataTable from '@/components/uni-data-table/uni-data-table.vue';
|
|
|
|
import unipopup from '@/components/uni-popup/uni-popup.vue';
|
|
export default {
|
|
components: { nsExwarehouse, unipopup, nsrecord, nsgoodssku, uniDataTable },
|
|
data() {
|
|
return {
|
|
//选中的商品下标
|
|
selectGoodsKeys: 0,
|
|
//搜索的数据
|
|
search_text: '',
|
|
// 初始是请求第几页
|
|
page: 1,
|
|
// 每次返回数据数
|
|
page_size: 20,
|
|
//商品列表数据
|
|
goods_list: [],
|
|
// 第一次请求列表做详情渲染判断
|
|
one_judge: true,
|
|
//商品详情数据
|
|
goods_detail: {},
|
|
//获取文档数据
|
|
documentTypeList: [],
|
|
// 弹窗中所需要获取到的sku列表数据
|
|
sku_list: [],
|
|
//入库出库
|
|
keys: 'input',
|
|
goodsClass: [
|
|
{
|
|
value: 1,
|
|
label: '实物商品'
|
|
},
|
|
{
|
|
value: 4,
|
|
label: '服务项目'
|
|
},
|
|
{
|
|
value: 5,
|
|
label: '卡项套餐'
|
|
}
|
|
],
|
|
statusList: [
|
|
{
|
|
value: 1,
|
|
label: '仓库中'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '销售中'
|
|
}
|
|
],
|
|
currGoodsClass: 'all',
|
|
store: null,
|
|
timeout: '', //节流，关闭定时器
|
|
|
|
cols: [
|
|
{
|
|
width: 6,
|
|
align: 'center',
|
|
checkbox: true
|
|
},
|
|
{
|
|
field: 'account_data',
|
|
width: 20,
|
|
title: '商品信息',
|
|
align: 'left',
|
|
templet: data => {
|
|
let img = this.$util.img(data.goods_image);
|
|
let html = `
|
|
<view class="goods-content">
|
|
<image class="goods-img" src="${img}" mode="aspectFit"></image>
|
|
<text class="goods-name multi-hidden">${data.goods_name}</text>
|
|
</view>
|
|
`;
|
|
return html;
|
|
}
|
|
},
|
|
{
|
|
width: 14,
|
|
title: '商品类型',
|
|
align: 'center',
|
|
field: 'goods_class_name'
|
|
},
|
|
{
|
|
width: 10,
|
|
title: '价格',
|
|
align: 'center',
|
|
templet: function(data) {
|
|
return '￥' + data.discount_price;
|
|
}
|
|
},
|
|
{
|
|
field: 'stock',
|
|
width: 15,
|
|
title: '库存',
|
|
align: 'center'
|
|
},
|
|
{
|
|
width: 15,
|
|
title: '状态',
|
|
align: 'center',
|
|
templet: function(data) {
|
|
var str = '';
|
|
if (data.store_status == 1) {
|
|
str = '销售中';
|
|
} else if (data.store_status == 0) {
|
|
str = '仓库中';
|
|
}
|
|
return str;
|
|
}
|
|
},
|
|
{
|
|
width: 20,
|
|
title: '操作',
|
|
align: 'left',
|
|
action: true
|
|
}
|
|
],
|
|
option: {
|
|
page_size: 9,
|
|
search_text: '',
|
|
goods_class: 'all',
|
|
status: 'all'
|
|
},
|
|
status: '',
|
|
goods_class: '',
|
|
goodsId: ''
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.store = uni.getStorageSync('store_info');
|
|
},
|
|
methods: {
|
|
selectClass(index) {
|
|
this.goods_class = index == -1 ? '' : this.goodsClass[index].value.toString();
|
|
},
|
|
selectStatus(index) {
|
|
this.status = index == -1 ? '' : this.statusList[index].value.toString();
|
|
},
|
|
// 搜索商品
|
|
searchFn() {
|
|
this.option.status = (this.status == 1 && 0) || (this.status == 2 && 1) || (!this.status ? 'all' : '');
|
|
this.option.goods_class = this.goods_class ? this.goods_class : 'all';
|
|
this.$refs.goodsListTable.load();
|
|
},
|
|
resetFn() {
|
|
this.status = '';
|
|
this.goods_class = '';
|
|
this.option.status = 'all';
|
|
this.option.goods_class = 'all';
|
|
this.option.search_text = '';
|
|
this.$refs.goodsListTable.load();
|
|
},
|
|
// 查询商品详情
|
|
getDetail(id, type = '') {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
this.goods_detail = {};
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/goods/detail',
|
|
data: {
|
|
goods_id: id
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.goods_detail = res.data;
|
|
this.goods_detail.sku_list[0].goods_name = this.goods_detail.goods_name;
|
|
this.sku_list = this.goods_detail.sku_list;
|
|
if (!type) this.$refs.goodsDetail.open();
|
|
}
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
},
|
|
goodsStatus(id, status) {
|
|
let arr;
|
|
if (typeof id == 'object') {
|
|
arr = [];
|
|
id.value.length &&
|
|
id.value.forEach((item, index) => {
|
|
arr.push(item.goods_id);
|
|
});
|
|
} else arr = id;
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/goods/setstatus',
|
|
data: {
|
|
goods_id: arr.toString(),
|
|
status: status
|
|
},
|
|
success: res => {
|
|
this.$util.showToast({
|
|
title: res.message
|
|
});
|
|
if (res.code >= 0) {
|
|
this.$refs.goodsListTable.load();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
goodsSku(id) {
|
|
this.goodsId = id;
|
|
this.getDetail(id, 'goodsSku');
|
|
this.$refs.goodssku.open();
|
|
},
|
|
getDocumentType(type = '') {
|
|
this.$api.sendRequest({
|
|
url: '/stock/storeapi/manage/records',
|
|
data: {
|
|
goods_id: this.goods_detail.goods_id
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.documentTypeList = res.data.list;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 日志记录弹窗
|
|
recordopen(id) {
|
|
this.goodsId = id;
|
|
this.$refs.record.open();
|
|
},
|
|
|
|
// 弹窗关闭
|
|
close(type) {
|
|
this.$refs[type].close();
|
|
},
|
|
goodsImageError(item) {
|
|
item.goods_image = 'public/uniapp/default_img/goods.png';
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import './public/css/goods.scss';
|
|
// 筛选面板
|
|
.screen-warp {
|
|
padding: 0.15rem 0.15rem 0;
|
|
background-color: #f2f3f5;
|
|
margin-bottom: 0.15rem;
|
|
.common-form-item .form-label {
|
|
width: 1.2rem;
|
|
}
|
|
.common-btn-wrap {
|
|
margin-left: 1.2rem;
|
|
}
|
|
.goods-category .form-input-inline {
|
|
width: 2.8rem;
|
|
}
|
|
.form-inline {
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
.common-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.goodslist {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0.15rem 0.15rem 0;
|
|
background-color: #fff;
|
|
/deep/ .goods-content {
|
|
display: flex;
|
|
.goods-img {
|
|
margin-right: 0.1rem;
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
}
|
|
.goods-name {
|
|
white-space: break-spaces;
|
|
align-self: baseline;
|
|
}
|
|
}
|
|
.action-btn-wrap {
|
|
.action-item {
|
|
margin-left: 0.1rem;
|
|
color: $primary-color;
|
|
&:first-of-type {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
/deep/ .batch-action {
|
|
position: absolute;
|
|
z-index: 2;
|
|
padding-top: 0.15rem;
|
|
display: flex;
|
|
.batch-item {
|
|
margin-right: 0.15rem;
|
|
border: 0.01rem solid #999;
|
|
padding: 0.05rem;
|
|
border-radius: 0.03rem;
|
|
}
|
|
}
|
|
}
|
|
// 商品详情
|
|
.goods-detail-wrap {
|
|
background-color: #fff;
|
|
border-radius: 0.05rem;
|
|
padding-bottom: 0.15rem;
|
|
.detail-head {
|
|
padding: 0 0.15rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 0.15rem;
|
|
height: 0.45rem;
|
|
border-bottom: 0.01rem solid #e8eaec;
|
|
.iconguanbi1 {
|
|
font-size: $uni-font-size-lg;
|
|
}
|
|
}
|
|
.detail-body {
|
|
width: 9rem;
|
|
height: 4.9rem;
|
|
padding: 0.2rem 0.2rem 0 0.2rem;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
.title {
|
|
font-size: 0.15rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.information-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.box-left {
|
|
width: 5rem;
|
|
.information {
|
|
width: 100%;
|
|
padding-left: 0.1rem;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 0.15rem;
|
|
|
|
view {
|
|
color: #303133;
|
|
font-size: 0.14rem;
|
|
}
|
|
view:nth-child(1) {
|
|
width: 0.7rem;
|
|
margin-right: 0.16rem;
|
|
text-align: right;
|
|
}
|
|
view:nth-child(2) {
|
|
flex: 1;
|
|
margin-right: 0.23rem;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.information:last-child {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
}
|
|
.goods-img {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
}
|
|
.table {
|
|
width: 100%;
|
|
max-height: 2.7rem;
|
|
box-sizing: border-box;
|
|
.single-specification {
|
|
width: 100%;
|
|
max-height: 100%;
|
|
padding-left: 0.1rem;
|
|
box-sizing: border-box;
|
|
.item {
|
|
width: 100%;
|
|
margin-bottom: 0.15rem;
|
|
display: flex;
|
|
align-items: center;
|
|
image {
|
|
width: 0.5rem;
|
|
}
|
|
.name {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 0.16rem;
|
|
width: 0.7rem;
|
|
text-align: right;
|
|
}
|
|
.message {
|
|
width: 74%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
.table-all {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 0.38rem;
|
|
box-sizing: border-box;
|
|
.table-td {
|
|
font-size: 0.14rem;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.table-th {
|
|
height: 0.56rem;
|
|
background: #f7f8fa;
|
|
}
|
|
.table-tb {
|
|
width: 100%;
|
|
height: calc(100% - 0.56rem);
|
|
.table-tr {
|
|
height: 0.7rem;
|
|
border-bottom: 0.01rem solid #e6e6e6;
|
|
box-sizing: border-box;
|
|
.table-td {
|
|
image {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
}
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|