admin模块接入数据库

pages/mall/admin/product/protection/index.uvue

@@ -104,25 +104,21 @@
 </template>
 
 <script setup lang="uts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
+import { 
+	fetchProductProtections, 
+	saveProductProtection, 
+	deleteProductProtection, 
+	setProductProtectionActive,
+	ProductProtection 
+} from '@/services/admin/productProtectionService.uts'
 
-interface ProtectionItem {
-	id: number;
-	name: string;
-	icon: string;
-	desc: string;
-	status: boolean;
-	sort: number;
-}
-
-const list = reactive<ProtectionItem[]>([
-	{ id: 1, name: '正品保障', icon: '/static/logo.png', desc: '该商品由平台认证，保证百分百正品。', status: true, sort: 0 },
-	{ id: 2, name: '七天无理由', icon: '/static/logo.png', desc: '商品在不影响二次销售的情况下，支持7天无理由退换。', status: true, sort: 0 }
-])
+const list = ref<ProductProtection[]>([])
+const isLoading = ref(false)
 
 const showModal = ref(false)
 const isEdit = ref(false)
-const editIndex = ref(-1)
+const editingId = ref<string | null>(null)
 
 const form = reactive({
 	name: '',
@@ -132,17 +128,34 @@ const form = reactive({
 	sort: 0
 })
 
-function openModal(item: ProtectionItem | null = null) {
-	if (item) {
+onMounted(() => {
+	loadData()
+})
+
+async function loadData() {
+	isLoading.value = true
+	try {
+		const res = await fetchProductProtections()
+		list.value = res
+	} catch (e) {
+		uni.showToast({ title: '加载失败', icon: 'none' })
+	} finally {
+		isLoading.value = false
+	}
+}
+
+function openModal(item: ProductProtection | null = null) {
+	if (item != null) {
 		isEdit.value = true
+		editingId.value = item.id ?? null
 		form.name = item.name
-		form.icon = item.icon
-		form.desc = item.desc
-		form.status = item.status
-		form.sort = item.sort
-		editIndex.value = list.indexOf(item)
+		form.icon = item.icon_url ?? ''
+		form.desc = item.description
+		form.status = item.is_active
+		form.sort = item.sort_order
 	} else {
 		isEdit.value = false
+		editingId.value = null
 		form.name = ''
 		form.icon = ''
 		form.desc = ''
@@ -161,43 +174,59 @@ function mockIconPicker() {
 	form.icon = '/static/logo.png'
 }
 
-function saveProtection() {
+async function saveProtection() {
 	if (!form.name || !form.desc) {
 		uni.showToast({ title: '请输入必填项', icon: 'none' })
 		return
 	}
-	if (isEdit.value) {
-		const item = list[editIndex.value]
-		item.name = form.name
-		item.icon = form.icon
-		item.desc = form.desc
-		item.status = form.status
-		item.sort = form.sort
-	} else {
-		list.unshift({
-			id: Date.now() % 1000,
-			name: form.name,
-			icon: form.icon || '/static/logo.png',
-			desc: form.desc,
-			status: form.status,
-			sort: form.sort
-		})
+
+	isLoading.value = true
+	const protectionData: ProductProtection = {
+		id: editingId.value ?? undefined,
+		name: form.name,
+		icon_url: form.icon || '/static/logo.png',
+		description: form.desc,
+		is_active: form.status,
+		sort_order: form.sort
+	}
+
+	try {
+		const success = await saveProductProtection(protectionData)
+		if (success) {
+			uni.showToast({ title: '保存成功', icon: 'success' })
+			closeModal()
+			loadData()
+		} else {
+			uni.showToast({ title: '保存失败', icon: 'none' })
+		}
+	} catch (e) {
+		uni.showToast({ title: '操作异常', icon: 'none' })
+	} finally {
+		isLoading.value = false
 	}
-	closeModal()
-	uni.showToast({ title: '保存成功', icon: 'success' })
 }
 
-function toggleStatus(index: number) {
-	list[index].status = !list[index].status
+async function toggleStatus(item: ProductProtection) {
+	if (item.id == null) return
+	const nextStatus = !item.is_active
+	const success = await setProductProtectionActive(item.id!, nextStatus)
+	if (success) {
+		item.is_active = nextStatus
+	}
 }
 
-function deleteItem(index: number) {
+async function deleteItem(id: string | undefined) {
+	if (id == null) return
 	uni.showModal({
 		title: '提示',
 		content: '确定删除该保障条款吗？',
-		success: (res) => {
+		success: async (res) => {
 			if (res.confirm) {
-				list.splice(index, 1)
+				const success = await deleteProductProtection(id)
+				if (success) {
+					uni.showToast({ title: '删除成功' })
+					loadData()
+				}
 			}
 		}
 	})