vpUni/.svn/pristine/c0/c0dc2a6d151b4b0e4bd0dc6f5595a1cddaf33dc2.svn-base

<template>
	<view class="page">
		<!-- 新增商品按钮 -->
		<view class="add-product-btn"  >
			<up-button   @click="Service.GoPage('/pages/goods/addGoods')" color="var(--nav-mian)" :customStyle="{'border-radius':'15rpx'}"  > + 新增商品 </up-button>
		</view>

		<!-- 商品列表 -->
		<view class="product-list">
			<view class="product-item" v-for="(product, index) in products" :key="index">
				<view class="product-info">
					<image :src="product.image" mode="aspectFill" class="product-image"></image>
					<view class="product-details">
						<view class="product-header">
							<text class="product-name">{{ product.name }}</text>
							<view class=" tag " style=" margin-left: 10rpx; padding: 2rpx 20rpx;border-radius: 31rpx;font-size: 20rpx;  color: #FF6B00; border: 3rpx solid #FF6B00; " >
								新品
							</view>
						</view>
						<text class="product-price">¥{{ product.price }}</text>
						<text class="product-sales">月销{{ product.monthlySales }}份</text>
					</view>
					<view class="tag"    :style="{ 'background-color':product.status=='已下架'?'#D9D9D9':'#52C41A',  } "    style="padding: 7rpx 24rpx;border-radius: 31rpx;font-size: 24rpx;  color: #fff;  height: fit-content;  " >
						{{ product.status }}
					</view>
				</view>
				<view class="product-actions">
					<text class="action-btn edit-btn" @click="editProduct(product)">编辑</text>
					<text class="action-btn" :class="product.status === '上架中' ? 'offline-btn' : 'online-btn'"
						@click="toggleStatus(product)">
						{{ product.status === '上架中' ? '下架' : '上架' }}
					</text>
					<text class="action-btn delete-btn" @click="deleteProduct(index)">删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { Service } from '@/Service/Service'

	// 商品数据类型定义
	interface Product {
		id : number
		name : string
		price : number
		monthlySales : number
		status : '上架中' | '已下架'
		image : string
		isNew ?: boolean
	}

	// 模拟商品数据
	const products = ref<Product[]>([
		{
			id: 1,
			name: '招牌牛肉面',
			price: 28,
			monthlySales: 248,
			status: '上架中',
			image: '/static/dele/dele4.jpg',
		},
		{
			id: 2,
			name: '香煎三明治',
			price: 22,
			monthlySales: 186,
			status: '已下架',
			image: '/static/dele/dele4.jpg',
		},
		{
			id: 3,
			name: '水果沙拉',
			price: 32,
			monthlySales: 156,
			status: '上架中',
			image: '/static/dele/dele4.jpg',
		},
		{
			id: 4,
			name: '红烧排骨',
			price: 38,
			monthlySales: 134,
			status: '上架中',
			image: '/static/dele/dele4.jpg',
		},
		{
			id: 5,
			name: '糖醋里脊',
			price: 35,
			monthlySales: 112,
			status: '已下架',
			image: '/static/dele/dele4.jpg',
			isNew: true,
		},
	])

	// 新增商品
	const addProduct = () => {
		// 在实际项目中，这里应该跳转到新增商品页面
		console.log('新增商品')
	}

	// 编辑商品
	const editProduct = (product : Product) => {
		// 在实际项目中，这里应该跳转到编辑商品页面，并传递商品信息
		console.log('编辑商品', product)
	}

	// 切换商品状态（上架/下架）
	const toggleStatus = (product : Product) => {
		product.status = product.status === '上架中' ? '已下架' : '上架中'
	}

	// 删除商品
	const deleteProduct = (index : number) => {
		// 在实际项目中，这里应该显示确认对话框
		products.value.splice(index, 1)
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}
	
	
	
	/* 新增商品按钮 */
	.add-product-btn {
		padding: 30rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	/* 商品列表 */
	.product-list {
		padding: 0 30rpx;
	}

	.product-item {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
	}

	.product-info {
		display: flex;
		// align-items: center;
		margin-bottom: 20rpx;
	}

	.product-image {
		width: 155rpx;
		height: 155rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.product-details {
		flex: 1;
	}

	.product-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.product-name {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
	}

	.product-price {
		font-size: 36rpx;
		color: #ff6600;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.product-sales {
		font-size: 26rpx;
		color: #999999;
	}

	.status-badge {
		margin-left: auto;
	}

	/* 操作按钮 */
	.product-actions {
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.action-btn {
		font-size: 28rpx;
		margin-left: 30rpx;
	}

	.edit-btn {
		color: #333333;
	}

	.online-btn {
		color: #4cd964;
	}

	.offline-btn {
		color: #999999;
	}

	.delete-btn {
		color: #ff3b30;
	}
</style>