java-mall-app/seller/product/lists.vue
2024-11-01 16:35:40 +08:00

776 lines
21 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<view class="sstouch-main-layout">
<view class="top">
<view right-icon="scan" style="width: 80%;float:left;;padding:10rpx 20rpx;">
<view class="input-view" style="width: 100%;">
<input style="font-size:26rpx;" class="input" type="text" :value="search_name" :placeholder="__('请输入商品标题进行搜索')" @input="inputSearch">
<image style="width:30rpx;height:30rpx;float:left;margin:12rpx auto;z-index:9" src="/static/images/false.png" mode="aspectFill" @click="gocancel" />
</view>
</view>
<image style="width:50rpx;height:50rpx;float:left;padding:26rpx 0;" src="/static/images/seach.png" mode="aspectFill" @click="goSearch" />
</view>
<view class="m-navbar">
<scroll-view class="scroll-view_S" scroll-x >
<block >
<view :class="(parent_id == 0 ?'m-navbar-mu':'m-navbar-item')" data-id="0" @click="all">
{{__('全部')}}
</view>
</block>
<block v-for="(val,index) in product_category" :key="index" >
<view :class="(parent_id ==val.category_id ?'m-navbar-mu':'m-navbar-item')" :data-id="val.category_id" @click="setparentcategoryid">
{{val.category_name}}
</view>
</block>
</scroll-view>
</view>
<view class="m-navbar" style="margin-top:4rpx;">
<scroll-view class="scroll-view_S" scroll-x >
<block v-for="(categorySec,key) in detail_second" :key="key" >
<view :class="(second_parent_id ==categorySec.category_id ?'m-navbar-mu':'m-navbar-item')" :data-id="categorySec.category_id" @click="setthirdcategoryid">
{{categorySec.category_name}}
</view>
</block>
</scroll-view>
</view>
<view class="m-navbar" style="margin-top:4rpx;" v-if="detail.length>0">
<scroll-view class="scroll-view_S" scroll-x >
<block v-for="(category,key) in detail" :key="key" >
<view :class="(category_id ==category.category_id ?'m-navbar-mu':'m-navbar-item')" :data-id="category.category_id" @click="setcategoryid">
{{category.category_name}}
</view>
</block>
</scroll-view>
</view>
<view class="m-tab">
<view class="m-navbar">
<view :class="['m-navbar-item', tapindex==1?'m-navbar-item-on':'']" @click="toInale">
{{__('出售中')}}
</view>
<view :class="['m-navbar-item', tapindex==2?'m-navbar-item-on':'']" @click="toWarehouse">
{{__('仓库中')}}
</view>
<view :class="['m-navbar-item', tapindex==3?'m-navbar-item-on':'']" @click="toViolation">
{{__('违规商品')}}
</view>
</view>
</view>
</view>
<scroll-view v-if="(productlist.length>0)" scroll-y="true" :class="(detail.length>0 ?'m-orderlistheight':'m-orderlist')" @scrolltolower="scrollbottom">
<view class="sstouch-order-list" >
<view class="ul" id="order-list" v-for="(items, i) in productlist" :key="i">
<view class="sstouch-order-item">
<view class="sstouch-order-item-con">
<navigator :url="'/seller/product/save?id='+items.product_id" class="goods-block">
<view class="goods-pic">
<img class="img" :src="items.product_image" style="border:solid 1px #ccc;padding:1px;"></view>
<view class="goods-info" style="padding-left:20rpx;">
<view class="goods-name" style="width:100%;height:66rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">{{items.product_name}}</view>
<view class="goods-type" style="font-size:26rpx;line-height: 40rpx;height: 40rpx;" v-if="false">{{__('库存')}}{{items.product_quantity}}</view>
<view class="goods-type" style="font-size:26rpx;line-height: 40rpx;height: 40rpx;">{{items.product_unit_price}}</view>
<view class="goods-type" style="font-size:26rpx;line-height: 40rpx;height: 40rpx;">{{__('日期')}}{{items.product_sale_time}}</view>
</view>
<view class="goods-subtotal">
<navigator class="hide" url="javascript:void(0)" :item_id="items.product_id">{{__('编辑')}}</navigator>
<block v-if="(items.product_state_id == 1001)">
<view class="btn offline-goods" :data-item_id="items.product_id" style="margin-bottom: 10px;" @click.stop="cancelLower">{{__('下架')}}
</view>
</block>
<block v-if="(items.product_state_id == 1002)">
<view class="btn offline-goods" :data-state_id="items.product_state_id" :data-item_id="items.product_id" style="margin-bottom: 10px;" @click.stop="Uppershelf">{{__('上架')}}
</view>
</block>
<block v-if="(items.product_state_id == 1000)">
<view class="btn offline-goods" :data-state_id="items.product_state_id" :data-item_id="items.product_id" style="margin-bottom: 10px;">{{__('修改')}}
</view>
</block>
<view class="btn delete-goods" :data-item_id="items.product_id" @click.stop="cancelproduct">{{__('删除')}}</view>
</view>
</navigator>
</view>
</view>
</view>
<view class="m-loading-box" style="padding-top:100rpx;">
<block v-if="(ispage)">
<view class="u-loadmore">
<label class="u-loading"></label>
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
</view>
<view>
<text></text>
</view>
</block>
<block v-else>
<view class="u-loadmore u-loadmore-line">
<text class="u-loadmore-tips">{{__('没有更多数据啦!')}}</text>
</view>
</block>
</view>
</view>
</scroll-view>
<view redirect="true" class="m-nullpage" v-else>
<view class="m-nullpage-middle">
<label class="iconfont icon-sousuo-sousuo"></label>
<view class="m-null-tip">
<text>{{__('亲~找不到您想要的商品')}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex'
export default {
data() {
return {
isdata: false,
tapindex: 1,
page: 1,
rows: 10,
ispage: true,
flag: true,
type: 0,
product_state_id:1001,
formId: "",
productlist: [],
imgLogo: "",
show: false,
Info: "",
sord: 'desc',
bannerShow:false,
iscancel:0,
search_name:'',
product_category:[],
category_id:0,
curIndex:0,
detail: [],
detail_second: [],
parent_id:0,
second_parent_id:0,
}
},
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
onLoad: function(options) {
uni.setNavigationBarTitle({
title:this.__('商品管理')
});
this.setData({
tapindex: options.sl ? options.sl : 1,
page: 1,
rows: 10,
productlist: [],
type: options.type ? options.type : 0,
product_state_id:options.type ? options.type : 1001
});
var t = this;
this.notice.addNotification("RefreshMessage", t.RefreshMessage, t);
t.$.request({
url: t.Config.URL.product.category,
loading: false,
ajaxCache: {
timeout: t.Config.CACHE_EXPIRE
},
success(data) {
t.setData({
product_category: data.items,
parent_id: data.items[t.curIndex].category_id
})
t.loadCategory(true)
}
});
// this.getProductlist()
},
methods: {
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
toInale:function (){
this.setData({
tapindex: 1,
page: 1,
rows: 10,
productlist: [],
ispage: true,
flag: true,
type: 0,
product_state_id: 1001
}), this.getProductlist()
},
toWarehouse:function (){
this.setData({
tapindex: 2,
page: 1,
rows: 10,
productlist: [],
ispage: true,
flag: true,
type: 0,
product_state_id: 1002
}), this.getProductlist()
},
toViolation:function (){
this.setData({
tapindex: 3,
page: 1,
rows: 10,
productlist: [],
ispage: true,
flag: true,
type: 0,
product_state_id: 1000
}), this.getProductlist()
},
getProductlist: function() {
var that = this;
var params = {
page: that.page,
product_state_id: that.product_state_id,
category_id:that.category_id,
product_name:that.search_name,
sidx:'product_add_time',
sord:that.sord,
};
that.$.request({
url: this.Config.URL.seller.lists_product,
data: params,
success: function(data, status, msg, code) {
if (200 == status && data.items.length > 0) {
//console.log(data)
if (data.page >= data.total) {
that.setData({
flag: false,
ispage: false,
productlist: that.productlist.concat(data.items)
})
} else {
that.setData({
flag: true,
ispage: true,
productlist: that.productlist.concat(data.items)
})
}
that.setData({
isdata: true
})
} else {
that.setData({
flag: false,
ispage: false,
isdata: false
})
}
}
});
},
inputSearch: function(e){
this.setData({
search_name:e.detail.value
})
},
gocancel: function(e){
this.setData({
search_name:''
})
},
goSearch: function(e){
this.setData({
page: 1,
rows: 10,
productlist: [],
ispage: true,
flag: true,
type: 0,
}), this.getProductlist()
},
all: function() {
this.loadCategory(true)
},
setparentcategoryid: function(e){
var that = this
that.parent_id = e.currentTarget.dataset.id
that.setData({
parent_id:e.currentTarget.dataset.id
})
that.loadCategory()
},
setcategoryid: function(e){
this.setData({
category_id:e.currentTarget.dataset.id,
page: 1,
productlist:[]
})
this.getProductlist()
},
setthirdcategoryid: function(e){
this.second_parent_id = e.currentTarget.dataset.id;
this.setData({
category_id:e.currentTarget.dataset.id,
page: 1,
productlist:[]
})
this.loadCategorySec()
},
loadCategorySec() {
var that = this;
that.$.request({
url: that.Config.URL.product.category,
data: {
category_id: that.second_parent_id,
recursive: 1
},
ajaxCache: {
timeout: that.Config.CACHE_EXPIRE
},
success(data) {
var category = []
for(var i=0;i < data.items.length; i++)
{
let thirdCategory = {
id: data.items[i].id,
value: data.items[i].value,
category_name: data.items[i].category_name,
category_show_type: data.items[i].category_show_type,
category_expanded: data.items[i].category_expanded,
type_id: data.items[i].type_id,
category_is_leaf: data.items[i].category_is_leaf,
category_id: data.items[i].category_id,
category_virtual_enable: data.items[i].category_virtual_enable,
category_is_enable: data.items[i].category_is_enable,
parent_id: data.items[i].parent_id,
category_parent_id: data.items[i].category_parent_id
}
category = category.concat(thirdCategory)
}
that.setData({
detail: category,
category_id: category.length==0 ? that.second_parent_id : category[0].category_id,
parent_id: category.length==0 ? 0 : that.parent_id,
second_parent_id: category.length==0 ? 0 : that.second_parent_id,
page: 1,
rows: 10,
productlist: [],
ispage: true,
flag: true,
type: 0,
})
that.getProductlist()
}
});
},
loadCategory(t) {
var that = this;
that.$.request({
url: that.Config.URL.product.category,
data: {
category_id: that.parent_id,
recursive: 1
},
ajaxCache: {
timeout: that.Config.CACHE_EXPIRE
},
success(data) {
let category = []
let categorySec = []
if(that.parent_id==0){
for(var i=0;i < data.items.length; i++)
{
for(var j=0;j < data.items[i].sub.length; j++){
category = category.concat(data.items[i].sub[j].sub)
let secondCategory = {
id: data.items[i].sub[j].id,
value: data.items[i].sub[j].value,
category_name: data.items[i].sub[j].category_name,
category_show_type: data.items[i].sub[j].category_show_type,
category_expanded: data.items[i].sub[j].category_expanded,
type_id: data.items[i].sub[j].type_id,
category_is_leaf: data.items[i].sub[j].category_is_leaf,
category_id: data.items[i].sub[j].category_id,
category_virtual_enable: data.items[i].sub[j].category_virtual_enable,
category_is_enable: data.items[i].sub[j].category_is_enable,
parent_id: data.items[i].sub[j].parent_id,
category_parent_id: data.items[i].sub[j].category_parent_id
}
categorySec = categorySec.concat(secondCategory)
}
}
}else{
for(var i=0;i < data.items.length; i++)
{
category = category.concat(data.items[i].sub)
let secondCategory = {
id: data.items[i].id,
value: data.items[i].value,
category_name: data.items[i].category_name,
category_show_type: data.items[i].category_show_type,
category_expanded: data.items[i].category_expanded,
type_id: data.items[i].type_id,
category_is_leaf: data.items[i].category_is_leaf,
category_id: data.items[i].category_id,
category_virtual_enable: data.items[i].category_virtual_enable,
category_is_enable: data.items[i].category_is_enable,
parent_id: data.items[i].parent_id,
category_parent_id: data.items[i].category_parent_id
}
categorySec = categorySec.concat(secondCategory)
}
}
that.setData({
detail: category,
detail_second: categorySec,
category_id: t ? 0 : that.parent_id,
parent_id:t ? 0 : that.parent_id,
page: 1,
rows: 10,
productlist: [],
ispage: true,
flag: true,
type: 0,
})
that.getProductlist()
}
});
},
scrollbottom: function() {
if (this.flag) {
var that = this;
that.setData({
flag: false
});
clearTimeout(t);
var t = setTimeout(function() {
that.setData({
state_type: that.type,
flag: false,
page: parseInt(that.page) + 1,
rows: 10
});
that.getProductlist()
}, 100)
}
},
cancelLower: function (e) {
var that = this;
that.$.confirm(that.__("是否下架商品?下架还可以在仓库中上架"), function (a) {
if (a.confirm)
{
var params = {
product_id: e.currentTarget.dataset.item_id,
product_state_id: 1002
};
that.$.request({
url: that.Config.URL.seller.edit_state,
data: params,
method:"POST",
success: function (data, status, msg, code) {
if (200 == status) {
that.$.showToast({title: that.__("操作成功"), icon: "success", duration: 2e3}), clearTimeout(t);
var t = setTimeout(function () {
that.toInale();
}, 1500)
} else {
}
}
});
}
},
true)
},
cancelproduct: function (e) {
var that = this;
that.$.confirm(that.__("是否删除商品?删除后系统将不再保存"), function (a) {
if (a.confirm)
{
var params = {
product_id: e.currentTarget.dataset.item_id,
};
that.$.request({
url: that.Config.URL.seller.remove_product,
data: params,
method:"POST",
success: function (data, status, msg, code) {
if (200 == status) {
that.$.showToast({title: that.__("操作成功"), icon: "success", duration: 2e3}), clearTimeout(t);
var t = setTimeout(function () {
that.setData({
page: 1,
rows: 10,
productlist: [],
ispage: true,
flag: true,
type: 0,
}), that.getProductlist()
}, 1500)
} else {
that.$.showToast({title: that.__(msg)})
}
}
});
}
},
true)
},
Uppershelf: function (e){
var that = this;
that.$.confirm(that.__("是否上架商品?上架后可以正常销售"), function (a) {
if (a.confirm)
{
var params = {
product_id: e.currentTarget.dataset.item_id,
product_state_id: 1001
};
that.$.request({
url: that.Config.URL.seller.edit_state,
data: params,
method:"POST",
success: function (data, status, msg, code) {
if (200 == status) {
that.$.showToast({title: that.__("操作成功"), icon: "success", duration: 2e3}), clearTimeout(t);
var t = setTimeout(function () {
that.toWarehouse();
}, 1500)
} else {
that.$.alert(that.__('未审核商品不能上架'))
}
}
});
}
},
true)
},
}
}
</script>
<style lang="scss">
@import "../../styles/base.scss";
@import "../../styles/sstouch_member.scss";
@import "../../styles/sstouch_common.scss";
@import "../../styles/_variables";
.input-view {
width: 100%;
display: flex;
background-color: #FFFFFF;
height: 30px;
flex-wrap: nowrap;
margin: 7px 0;
line-height: 30px;
// border:2rpx solid #ebebe7;
border-radius:15rpx;
}
.input-view .input {
height: 30px;
background-color: #FFFFFF;
border-radius: 15px;
line-height: 30px;
width: 80%;
border: 0; // 去除未选中状态边框
outline: none; // 去除选中状态边框
background-color: rgba(0, 0, 0, 0);// 透明背景
padding:0 20rpx;
}
input::placeholder{
width:357rpx;
height:25rpx;
font-size:26rpx;
font-family:Alibaba PuHuiTi;
font-weight:400;
color:#6DA62F;
}
.sstouch-main-layout{
position: fixed;
width: 100%;
top: var(--window-top);
z-index: 2;
}
.m-tab {
width: 100%;
}
.m-navbar-item {
padding: 20rpx 0;
font-size: 24rpx;
}
.m-orderlist {
position: absolute;
// top: calc(var(--status-bar-height) + 208rpx);
padding-top: 380rpx;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.m-orderlistheight {
position: absolute;
// top: calc(var(--status-bar-height) + 208rpx);
padding-top: 450rpx;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.m-navbar-item:after {
border: none;
}
.m-navbar-item.m-navbar-item-on {
background-color: #fff;
color: $default-skin-bg;
}
.m-navbar-item.m-navbar-item-on::before {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height:
6rpx;
border-bottom: 6rpx solid $default-skin-bg;
color: #CCCCCC;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 3;
}
.img {
width:140rpx;
height:140rpx;
}
.u-loadmore {
width:100%
}
.m-nullpage {
padding-top:100rpx;
}
.top {
width:100%;
height:82rpx;
background:#f5f5f5;
overflow:hidden;
z-index:99;
line-height:82rpx;
padding:20rpx 0;
}
.m-product-name {
height:100rpx;
}
.m-navbar-item:after {
border: none;
}
.m-navbar-item.m-navbar-item-on {
background-color: #fff;
color: $default-skin-bg;
}
.m-navbar-item.m-navbar-item-on::before {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height:
6rpx;
border-bottom: 6rpx solid $default-skin-bg;
color: #CCCCCC;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 3;
}
/*全部商品 start*/
.m-navbar-item {
// width:228rpx;
padding: 20rpx 30rpx;
font-size: 24rpx;
display: inline-block;
}
.m-navbar {
height:76rpx;
position: relative;
// margin-top:240rpx;
z-index:99;
}
.scroll-view_S{
white-space: nowrap;
}
.m-navbar-mu {
padding: 20rpx 30rpx;
font-size: 24rpx;
display: inline-block;
color:#DB384C;
}
.m-navbar:after {
border-bottom: 0px solid #CCCCCC;
}
.goods-name {
width:100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
</style>