vpUni/.svn/pristine/93/9323bc069b2e4c6150a61e8421953a8fddcbc59e.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="Service.GetMateUrlByImg(product.img)" mode="aspectFill" class="product-image"></image>
					<view class="product-details">
						<view class="product-header">
							<text class="product-name">{{ product.name }}</text>

						</view>
						<text class="product-price">¥{{ product.price }}</text>

					</view>
					<view class="tag" :style="{ 'background-color':product.status==0?'#D9D9D9':'#52C41A',  } "
						style="padding: 7rpx 24rpx;border-radius: 31rpx;font-size: 24rpx;  color: #fff;  height: fit-content;  ">
						{{ product.status==0?'已下架':'已上架' }}
					</view>
				</view>
				<view class="product-actions">
					<text class="action-btn edit-btn" @click="editProduct(product)">编辑</text>
					<text class="action-btn" :class="product.status === 0 ? '上架' : '下架'" @click="toggleStatus(product)">
						{{ product.status === 0? '上架' : '下架' }}
					</text>
					<text class="action-btn delete-btn" @click="deleteProduct(product)">删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { Service } from '@/Service/Service'
	import { vpMerchService } from '@/Service/vp/vpMerchService'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	// import { vpCommunityService } from '@/Service/vp/vpCommunityService'


	// 商品数据类型定义
	interface Product {
		goodsId : string
		name : string
		price : number
		status : number
		img : string
		brief : string
	}

	// 模拟商品数据
	const products = ref<Product[]>([
		{
			goodsId: '',
			name: '',
			price: null,
			status: null,
			img: '',
			brief: ''
		}
	])

	let status = ref('nomore')
	let page = ref(1)

	onLoad(() => {

	})

	onShow(() => {
		getData()
	})

	const getData = () => {
		products.value = []
		status.value = 'loadmore'
		page.value = 1
		getList()
	}

	const getList = () => {
		if (status.value !== 'loadmore') {
			return
		}
		status.value = 'loading'
		vpMerchService.GetMerchGoods(page.value).then(res => {
			products.value = [...products.value, ...res.data.list]
			status.value = res.data.list.length == 10 ? 'loadmore' : 'nomore'
			page.value++
		})
	}


	// 编辑商品
	const editProduct = (product : Product) => {
		Service.GoPage('/pages/goods/addGoods?goodsId=' + product.goodsId)
	}

	// 切换商品状态（上架/下架）
	const toggleStatus = (product : Product) => {
		vpMerchService.UpdateGoodsStatus(product.goodsId).then(res => {
			if (res.code == 0) {
				Service.Msg('修改成功!')
				getData()
			}else{
				Service.Msg(res.msg)
			}
		})
	}

	// 删除商品
	const deleteProduct = (product : Product) => {
		uni.showModal({
			title: '提示',
			content: '确认删除该商品么?',
			success: function (res) {
				if (res.confirm) {
					vpMerchService.DelGoods(product.goodsId).then(res=>{
						if (res.code == 0) {
							Service.Msg('删除成功!')
							getData()
						}else{
							Service.Msg(res.msg)
						}
					})
				} else {
					// 用户点击取消后的操作
				}
			}
		});
	}
</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>