414 lines
8.9 KiB
Vue
414 lines
8.9 KiB
Vue
<template>
|
|
<view class="safe-page">
|
|
<view class="goods-list u-p-30">
|
|
<view class="u-m-b-32" v-for="(item,index) in pageData.list" :key="index">
|
|
<my-category
|
|
@del="categoryDel"
|
|
@useTypeClick="categoryUseTypeClick"
|
|
@changeClick="goodsChangeClick"
|
|
@radioClick="goodsRadioClick"
|
|
:index="index" :data="item"
|
|
:showChecked="showChecked"
|
|
:showDetail="pageData.showGoodsDetail"></my-category>
|
|
</view>
|
|
<view class="u-m-t-44">
|
|
<my-pagination :size="pageData.query.size" :totalElements="pageData.totalElements" @change="pageChange"></my-pagination>
|
|
<view style="height: 200rpx;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 删除弹窗 -->
|
|
<my-model desc="请确保此分类下没有任何商品确认删除?" ref="delModel" @confirm="delModelConfirm"></my-model>
|
|
|
|
<!-- 分类修改排序弹窗 -->
|
|
<my-model ref="goodsSortModel" title="修改排序" @close="goodsSortModelClose">
|
|
<template #desc>
|
|
<view class="u-p-40 u-text-left">
|
|
<view>
|
|
<view class="">排序:</view>
|
|
<view class="u-m-t-24">
|
|
<uni-easyinput v-model="sort" placeholder="请输入排序"></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
<template #btn>
|
|
<view class="stock-btns u-p-b-40">
|
|
<my-button shape="circle" @tap="goodsSortModelSave">确认修改</my-button>
|
|
<my-button shape="circle" type="default" @tap="goodsSortModelCancel">取消</my-button>
|
|
</view>
|
|
</template>
|
|
</my-model>
|
|
<!-- 分类修改排序弹窗 -->
|
|
<my-model mode="bottom" ref="goodsTypeModel" :title="goodsTypeModelData.title" >
|
|
<template #desc>
|
|
<view class="u-p-30 u-m-t-30">
|
|
<view class="u-flex u-m-b-20 u-row-between u-p-t-10 u-p-b-10" v-for="(item,index) in goodsTypeModelData.useTypes" :key="index">
|
|
<view class="font-bold color-000">{{item.name}}</view>
|
|
<my-switch v-model="item.isOpen"></my-switch>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
<template #btn>
|
|
<view class="u-flex gap-20 u-p-30 u-p-b-40 ">
|
|
<view class="u-flex-1">
|
|
<my-button shape="circle" color="#000" type="default" @tap="hideAllUseTypes">一键隐藏</my-button>
|
|
</view>
|
|
<view class="u-flex-1">
|
|
<my-button shape="circle" @tap="showAllUseTypes">一键显示</my-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</my-model>
|
|
|
|
<view class="fixed-b">
|
|
<my-button :height="80" shape="circle" showShadow @tap="toAddCategory">新建分类</my-button>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive, ref, watch
|
|
} from 'vue';
|
|
import {onShow} from '@dcloudio/uni-app'
|
|
import go from '@/commons/utils/go.js';
|
|
import myCategory from './components/category.vue'
|
|
import infoBox from "@/commons/utils/infoBox.js"
|
|
import myPagination from '@/components/my-components/my-pagination.vue'
|
|
import myModel from "@/components/my-components/my-model.vue"
|
|
import myButton from "@/components/my-components/my-button.vue"
|
|
import mySwitch from "@/components/my-components/my-switch.vue"
|
|
import {$productCategory} from '@/http/yskApi/goods.js'
|
|
|
|
|
|
const tabsList = ['简洁', '详情']
|
|
const statesTabsList = ['在售中', '已下架']
|
|
const states1TabsList = ['全部', '已售罄']
|
|
const control=ref(null)
|
|
const delModel=ref(null)
|
|
const goodsSortModel=ref(null)
|
|
const goodsTypeModel=ref(null)
|
|
let sort=ref(0)
|
|
const goodsTypeModelData=reactive({
|
|
title:'',
|
|
index:null,
|
|
useTypes:[
|
|
{name:'堂食',isOpen:true},
|
|
{name:'自取',isOpen:true},
|
|
{name:'外卖',isOpen:true},
|
|
{name:'快递',isOpen:true}
|
|
]
|
|
})
|
|
const pageData = reactive({
|
|
stateCurrent:0,
|
|
stateCurrent1:0,
|
|
componentBottom:264,
|
|
search: {
|
|
value: '',
|
|
placeholder: '输入搜索的商品'
|
|
},
|
|
showGoodsDetail:false,
|
|
query:{
|
|
page: 0,
|
|
size:10
|
|
},
|
|
totalElements:0,
|
|
list:[]
|
|
|
|
})
|
|
|
|
async function init() {
|
|
const res=await $productCategory.get(pageData.query)
|
|
pageData.list=res.content.map(v=>{
|
|
return {
|
|
...v,
|
|
isSellNone:false,
|
|
checked:false,
|
|
showDetail:false,
|
|
useTypes:[
|
|
{name:'堂食',isOpen:true},
|
|
{name:'自取',isOpen:true},
|
|
{name:'外卖',isOpen:true},
|
|
{name:'快递',isOpen:true}
|
|
]
|
|
}
|
|
})
|
|
pageData.totalElements=res.totalElements
|
|
}
|
|
onShow(()=>{
|
|
init()
|
|
})
|
|
function toAddCategory(){
|
|
go.to('PAGES_CATEGORY_EDIT',{type:'add'})
|
|
}
|
|
|
|
function hideAllUseTypes(){
|
|
goodsTypeModelData.useTypes.map(v=>{
|
|
v.isOpen=false
|
|
})
|
|
pageData.list[goodsTypeModelData.index].useTypes.map(v=>{
|
|
v.isOpen=false
|
|
})
|
|
}
|
|
|
|
function showAllUseTypes(){
|
|
goodsTypeModelData.useTypes.map(v=>{
|
|
v.isOpen=true
|
|
})
|
|
pageData.list[goodsTypeModelData.index].useTypes.map(v=>{
|
|
v.isOpen=true
|
|
})
|
|
}
|
|
|
|
function goodsSortModelCancel(){
|
|
console.log('goodsSortModelCancel');
|
|
goodsSortModel.value.close()
|
|
}
|
|
function goodsSortModelSave(){
|
|
console.log('goodsSortModelSave');
|
|
// $productCategory.update()
|
|
}
|
|
|
|
|
|
function categoryUseTypeClick(index){
|
|
goodsTypeModelData.index=index
|
|
goodsTypeModelData.useTypes=pageData.list[index].useTypes
|
|
goodsTypeModel.value.open()
|
|
}
|
|
|
|
|
|
//点击修改按钮弹出修改商品弹窗
|
|
function goodsChangeClick(index){
|
|
console.log(index);
|
|
sort.value=pageData.list[index].sort
|
|
goodsSortModel.value.open()
|
|
}
|
|
|
|
function statesTableClick(index){
|
|
pageData.stateCurrent=index
|
|
}
|
|
function states1TableClick(index){
|
|
pageData.stateCurrent1=index
|
|
}
|
|
|
|
let test=ref(false)
|
|
|
|
function tabsChange(i) {
|
|
console.log(i);
|
|
pageData.showGoodsDetail=i?true:false
|
|
}
|
|
|
|
|
|
//改变商品的选中状态
|
|
function changeGoodsChecked(checked,index){
|
|
if(index!==undefined){
|
|
pageData.list[index].checked=checked
|
|
}else{
|
|
pageData.list.map(v=>{
|
|
v.checked=checked
|
|
})
|
|
}
|
|
control.value.setisSelectAll(isAllChecked()?true:false)
|
|
}
|
|
|
|
|
|
// 获取已经选中的商品
|
|
function getChechkedlist(){
|
|
return pageData.list.filter(v=>v.checked)
|
|
}
|
|
//是否全部选中
|
|
function isAllChecked(){
|
|
return getChechkedlist().length===pageData.list.length
|
|
}
|
|
// 是否有商品选中
|
|
function isHasChekdGoods(){
|
|
return getChechkedlist().length?true:false
|
|
}
|
|
|
|
function searchFunc() {
|
|
console.log('searchFunc');
|
|
}
|
|
|
|
let showChecked=ref(false)
|
|
|
|
//商品start
|
|
|
|
function goodsRadioClick(index){
|
|
var checked=!pageData.list[index].checked
|
|
changeGoodsChecked(checked,index)
|
|
}
|
|
|
|
|
|
//下架
|
|
function offShelf(){
|
|
const hasCheckedArr=getChechkedlist()
|
|
const hasChecked=isHasChekdGoods()
|
|
if(!hasChecked){
|
|
return infoBox.showToast('您还没有选中商品！')
|
|
}
|
|
model.value.open()
|
|
}
|
|
let nowCateIndex=null
|
|
function categoryDel(index){
|
|
nowCateIndex=index
|
|
delModel.value.open()
|
|
}
|
|
//删除分类确认
|
|
function delModelConfirm(){
|
|
console.log('confirm');
|
|
pageData.list.splice(nowCateIndex,1)
|
|
delModel.value.close()
|
|
}
|
|
|
|
//商品end
|
|
|
|
//控制条
|
|
function controlChange(bol){
|
|
console.log(bol);
|
|
showChecked.value=bol
|
|
}
|
|
|
|
|
|
|
|
// 全选
|
|
function allCheckedChange(checked){
|
|
changeGoodsChecked(checked)
|
|
}
|
|
|
|
// 页数改变事件
|
|
function pageChange(page) {
|
|
pageData.query.page=page-1
|
|
init()
|
|
}
|
|
|
|
|
|
//分类
|
|
const category=ref(null)
|
|
function toggleCategory(){
|
|
category.value.toggle()
|
|
}
|
|
function cateClick(cate){
|
|
console.log(cate);
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
page{
|
|
background: #F9F9F9;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.stock-btns{
|
|
padding: 0 100rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
.safe-page{
|
|
background: #F9F9F9;
|
|
}
|
|
.icon-guige{
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
.bg-fff{
|
|
background-color:#fff;
|
|
}
|
|
.myTabs {
|
|
margin: 0 auto;
|
|
width: 434rpx;
|
|
height: 64rpx;
|
|
}
|
|
|
|
.input-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 26rpx;
|
|
background-color: $J-bg-ff;
|
|
|
|
.input-main {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 64rpx;
|
|
|
|
image {
|
|
padding: 22rpx;
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
::v-deep uni-button {
|
|
font-size: 28rpx;
|
|
color: $my-main-color;
|
|
background: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
::v-deep.uni-easyinput {
|
|
.uni-easyinput__content {
|
|
background-color: $J-bg-f5 !important;
|
|
border-radius: $J-b-r12;
|
|
|
|
.uni-easyinput__content-input {
|
|
padding-left: 0 !important;
|
|
|
|
.uni-input-input {
|
|
border-radius: $J-b-r12 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
|
|
.uni-input-placeholder {
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.uni-icons {
|
|
color: rgba(230, 230, 230, 1) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-icon {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.search-button {
|
|
position: absolute;
|
|
right: 0;
|
|
background-color: transparent !important;
|
|
color: transparent !important;
|
|
}
|
|
.states1{
|
|
margin-top: 78rpx;
|
|
.item{
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-right: 70rpx;
|
|
background: #F4F4F4;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
}
|
|
.item.active{
|
|
background: #E6F0FF;
|
|
color: $my-main-color;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
}
|
|
}
|
|
.fixed-b{
|
|
position: fixed;
|
|
left: 110rpx;
|
|
right: 110rpx;
|
|
bottom: 110rpx;
|
|
}
|
|
</style> |