292 lines
11 KiB
Vue
292 lines
11 KiB
Vue
<template>
|
||
<view class="">
|
||
<!-- Header -->
|
||
<view class="header bg-white">
|
||
<u-search placeholder="输入商品名称" @change="change(current)" :show-action="false" v-model="keyword"></u-search>
|
||
</view>
|
||
|
||
<!-- Nav -->
|
||
<view class="nav bg-white">
|
||
<u-tabs name="name" :show-bar="false" :list="list" :is-scroll="true" :current="current" @change="change"
|
||
active-color="#40AFFA" />
|
||
</view>
|
||
|
||
<!-- Section -->
|
||
<view class="section" :style="{'height': height}">
|
||
<swiper :duration="400" style="height: 100%; overflow: hidden;" @change="change" :current="current">
|
||
<swiper-item v-for="(items, index) in list" :key="index">
|
||
<view v-show="index == current">
|
||
<mescroll-uni ref="mescrollRef" bottom="220rpx" height="100%" @init="mescrollInit"
|
||
@up="upCallback" :up="upOption" @down="downCallback">
|
||
|
||
<view class="title muted sm">
|
||
共{{ count }}件商品
|
||
</view>
|
||
|
||
<block v-for="(item2, index2) in items.lists" :key="index2">
|
||
<goods-card :data="item2">
|
||
<template v-if="btns.recycle_btn">
|
||
<button class="btn hollow br60 flex row-center normal"
|
||
@click="openFunc(item2, 'recycle')">移至回收站</button>
|
||
</template>
|
||
<template v-if="btns.edit_btn">
|
||
<router-link :to="'/bundle/pages/spec_edit/spec_edit?id='+item2.id">
|
||
<button class="btn hollow br60 flex row-center normal">编辑</button>
|
||
</router-link>
|
||
</template>
|
||
<template v-if="btns.delete_btn">
|
||
<button class="btn hollow br60 flex row-center normal"
|
||
@click.stop="openFunc(item2, 'del')">删除</button>
|
||
</template>
|
||
<template v-if="current==0">
|
||
<button class="btn solid br60 flex row-center normal"
|
||
@click.stop="openFunc(item2, 'off_shelf')">下架</button>
|
||
</template>
|
||
<template v-if="current==1">
|
||
<button class="btn solid br60 flex row-center normal"
|
||
@click.stop="openFunc(item2, 'on_shelf')"
|
||
style="background: #40AFFA;">上架</button>
|
||
</template>
|
||
<template v-if="btns.warehouse_btn">
|
||
<button class="btn solid br60 flex row-center normal"
|
||
@click.stop="openFunc(item2, 'warehouse')"
|
||
style="background: #40AFFA;">放入仓库</button>
|
||
</template>
|
||
</goods-card>
|
||
</block>
|
||
|
||
</mescroll-uni>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<modal height="200rpx" v-model="off_shelf" @confirm="goodsSetting">
|
||
<view class="black nr" style="height: 200rpx;">
|
||
确认下架：<text style="color:#FF4141;">{{curData.name}}</text>
|
||
</view>
|
||
</modal>
|
||
|
||
<modal height="200rpx" v-model="on_shelf" @confirm="goodsSetting">
|
||
<view class="black nr" style="height: 200rpx;">
|
||
确认上架：<text style="color:#FF4141;">{{curData.name}}</text>
|
||
</view>
|
||
</modal>
|
||
|
||
<modal height="200rpx" v-model="del" @confirm="goodsSetting">
|
||
<view class="black nr" style="height: 200rpx;">
|
||
确认删除：<text style="color:#FF4141;">{{curData.name}}</text>
|
||
</view>
|
||
</modal>
|
||
|
||
<modal height="200rpx" v-model="recycle" @confirm="goodsSetting">
|
||
<view class="black nr" style="height: 200rpx;">
|
||
确认移至回收站：<text style="color:#FF4141;">{{curData.name}}</text>
|
||
</view>
|
||
</modal>
|
||
|
||
<modal height="200rpx" v-model="warehouse" @confirm="goodsSetting">
|
||
<view class="black nr" style="height: 200rpx;">
|
||
确认放入仓库：<text style="color:#FF4141;">{{curData.name}}</text>
|
||
</view>
|
||
</modal>
|
||
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
import {
|
||
apiGoodsLists,
|
||
apiGoodsOperation
|
||
} from '@/api/goods'
|
||
import {
|
||
debounce
|
||
} from "@/utils/tools.js"
|
||
export default {
|
||
mixins: [MescrollMixin],
|
||
data() {
|
||
return {
|
||
height: '100%',
|
||
|
||
keyword: '',
|
||
list: [{
|
||
name: '销售中',
|
||
type: 1,
|
||
lists: []
|
||
},
|
||
{
|
||
name: '仓库中',
|
||
type: 2,
|
||
lists: []
|
||
},
|
||
{
|
||
name: '库存预警',
|
||
type: 3,
|
||
lists: []
|
||
},
|
||
{
|
||
name: '回收站',
|
||
type: 4,
|
||
lists: []
|
||
},
|
||
{
|
||
name: '待审核',
|
||
type: 5,
|
||
lists: []
|
||
},
|
||
{
|
||
name: '未通过',
|
||
type: 6,
|
||
lists: []
|
||
}
|
||
],
|
||
current: 0,
|
||
count: 0,
|
||
|
||
action: '',
|
||
curData: {},
|
||
|
||
btns: {},
|
||
|
||
off_shelf: false, //下架
|
||
on_shelf: false, // 上架
|
||
del: false, //删除
|
||
recycle: false, //回收站
|
||
warehouse: false, //放入仓库
|
||
|
||
upOption: {
|
||
empty: {
|
||
icon: '/static/images/empty/shop.png',
|
||
tip: '暂无商品！', // 提示
|
||
fixed: true,
|
||
top: "200rpx",
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
async onShow() {
|
||
// 使用防抖是为了防止v-show的时候出发多条数据，所以使用防抖触发多次的时候可以只成为触发一次，优化性能请求
|
||
this.upCallback = debounce(this.upCallback, 200, this)
|
||
this.$nextTick(() => {
|
||
this.$refs.mescrollRef[this.current].mescroll.resetUpScroll()
|
||
})
|
||
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
this.height = res.windowHeight - 107 + 'px';
|
||
}
|
||
});
|
||
},
|
||
|
||
methods: {
|
||
|
||
change(event) {
|
||
let index;
|
||
event.detail ? index = event.detail.current : index = event
|
||
this.current = Number(index)
|
||
this.$refs.mescrollRef[this.current].mescroll.resetUpScroll()
|
||
},
|
||
|
||
async upCallback(page) {
|
||
const index = this.current;
|
||
const pageNum = page.num
|
||
const pageSize = page.size
|
||
|
||
apiGoodsLists({
|
||
name: this.keyword,
|
||
type: this.list[index].type,
|
||
page_no: pageNum,
|
||
page_size: pageSize,
|
||
}).then(({
|
||
lists,
|
||
page_size,
|
||
btns,
|
||
more,
|
||
count,
|
||
}) => {
|
||
// 如果是第一页需手动置空列表
|
||
if (pageNum == 1 || this.keyword) this.list[index].lists = []
|
||
// 重置列表数据
|
||
this.btns = btns;
|
||
this.count = count;
|
||
const hasNext = !!more;
|
||
this.list[index].lists = [...this.list[index].lists, ...lists]
|
||
this.$refs.mescrollRef[index].mescroll.endSuccess(lists.length, hasNext);
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
this.mescroll.endErr()
|
||
})
|
||
},
|
||
|
||
openFunc(item, action) {
|
||
this.curData = item;
|
||
this.action = action;
|
||
this[action] = true;
|
||
},
|
||
|
||
// 操作商品
|
||
async goodsSetting() {
|
||
let id = this.curData.id,
|
||
action = this.action == 'del' ? 'delete' : this.action
|
||
await apiGoodsOperation({
|
||
action,
|
||
id
|
||
})
|
||
|
||
this.$refs.mescrollRef[this.current].mescroll.resetUpScroll()
|
||
this.$refs.uToast.show({
|
||
title: '操作成功',
|
||
type: 'success'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
/*根元素需要有固定的高度*/
|
||
page {
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.header {
|
||
padding: 16rpx 30rpx;
|
||
}
|
||
|
||
.nav {
|
||
padding: 15rpx 0;
|
||
}
|
||
|
||
.section {
|
||
overflow: hidden;
|
||
.title {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 20rpx;
|
||
margin-left: 20rpx;
|
||
width: 180rpx;
|
||
height: 64rpx;
|
||
// border-radius: 8rpx;
|
||
font-size: $-font-size-sm;
|
||
}
|
||
|
||
.solid {
|
||
color: $-color-white;
|
||
background-color: #FF4141;
|
||
}
|
||
|
||
.hollow {
|
||
color: $-color-lighter;
|
||
border: 1px solid #DBDBDB;
|
||
}
|
||
}
|
||
}
|
||
</style>
|