mobile-admin/store/goods/index.vue

<template>
	<view class="content">
		<view class=" bg-white sticky top-0 z-50">
			<wd-search @search="search" @clear="search({ value: '' })" v-model="params.keywords" hide-cancel>
				<template #prefix>
					<wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
						<view class="search-type">
							<text>{{ searchType }}</text>
							<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
						</view>
					</wd-popover>
				</template>
			</wd-search>

			<wd-drop-menu custom-class="flex w-full bg-white" v-show="classifyList.length">
				<wd-drop-menu-item @change="search({ value: params.keywords })" custom-class="flex-1" v-model="classify_id"
					:options="classifyList" label-key="name" value-key="id" />
			</wd-drop-menu>
		</view>

		<div class="goodsBox p-2">
			<yList height="78vh" ref="yListRef" :apiObj="goods.list" :params="{ ...params, classify_id }">
				<template #default="{ list }">
					<div>
						<div v-for="item of list" class="goods">
							<wd-card type="rectangle">
								<template #title>
									<view class="title">
										<view>库存：<span class="font-bold">{{ item.stock_num || 0 }}</span></view>
										<view v-if="!(item.stock_num > 0)" class="title-tip">
											<wd-icon name="warning" size="14px" custom-style="vertical-align: bottom" />
											商品库存不足
										</view>
									</view>
								</template>
								<view style="height: 60px;" class="content">
									<image :src="item.pic_url" width="40" height="40" alt="joy"
										style="border-radius: 4px; margin-right: 12px;width: 60px;height: 60px;min-width: 60px;" />
									<view>
										<view class="line2" style="color: rgba(0,0,0,0.85); font-size: 16px;">{{ item.name }}</view>
										<view class="font-bold" style="color: rgb(255, 0, 0); font-size: 16px;">￥{{ item.price_min }}</view>
									</view>
								</view>

								<template #footer>
									<view>
										<wd-button @click="changeS(item)" v-if="item.status == 1" size="small" plain
											style="margin-right: 8px;">下架</wd-button>
										<wd-button @click="changeS(item)" v-if="item.status !== 1" size="small"
											style="margin-right: 8px;">上架</wd-button>
										<wd-button @click="utils.toUrl('/store/goods/edit?id=' + item.id)" size="small">编辑</wd-button>
									</view>
								</template>
							</wd-card>
						</div>
					</div>
				</template>
			</yList>

			<view class="flex mt-2 fixed left-2 right-2 bottom-3 px-10">
				<wd-button @click="utils.toUrl('/store/cat/index')" class="flex-3">分类</wd-button>
				<wd-button @click="utils.toUrl('/store/goods/edit?id=' + 0)" class="flex-1 ml-4">发布商品</wd-button>
			</view>

		</div>

		<wd-toast />
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { useToast } from '@/uni_modules/wot-design-uni'
import yList from "/components/yList/index.vue"
import goods from '@/api/store/goods.js'
import utils from '@/utils/utils.js'

import {
	onLoad,
	onShow
} from "@dcloudio/uni-app";

const toast = useToast()

const classify_id = ref(0)

const params = ref({
	keywords: "",
	status: "",
})

const yListRef = ref(null)
const search = ({ value }) => {
	yListRef.value.upData({
		keywords: value,
		classify_id: classify_id.value,
		status: params.value.status
	})
}
const searchType = ref('全部')
const popover = ref(false)

const menu = ref([
	{
		content: '全部'
	},
	{
		content: '已上架'
	},
	{
		content: '已下架'
	}
])
function changeSearchType({ item, index }) {
	searchType.value = item.content

	if (item.content == '全部') {
		params.value.status = ""
	}

	if (item.content == '已上架') {
		params.value.status = 1
	}

	if (item.content == '已下架') {
		params.value.status = 0
	}

	console.log(params.value.status);
	search({
		value: ""
	})
}

const changeS = (row) => {
	goods.goodsEditAttribute({
		id: row.id,
		value: [1, 0][row.status],
		type: "status"
	}).then(res => {

		if (res.code == 0) {
			toast.success('操作成功')
			row.status = [1, 0][row.status]
		} else {
			showNotify({ type: 'error', message: '出错了' })
		}

	})
}

const classifyList = ref([])
const getClassify = () => {
	goods.classify.list().then(res => {
		classifyList.value = res.data
		classifyList.value.unshift({
			id: 0,
			name: "店铺分类"
		})
	})
}
getClassify()

onShow(() => {
	search({ value: '' })
})
</script>

<style lang="scss" scoped>
.search-type {
	position: relative;
	height: 30px;
	line-height: 30px;
	padding: 0 8px 0 16px;
	font-size: 24rpx;
	color: rgba(0, 0, 0, .45);
}

.search-type::after {
	position: absolute;
	content: '';
	width: 1px;
	right: 0;
	top: 5px;
	bottom: 5px;
	background: rgba(0, 0, 0, 0.25);
}

.search-type {
	:deep(.icon-arrow) {
		display: inline-block;
		font-size: 20px;
		vertical-align: middle;
	}
}

.goodsBox {

	.content,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.content {
		justify-content: flex-start;
	}

	.title {
		justify-content: space-between;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
}
</style>