feat: 提交页面

src/views/SellerDashboard/MyListings/EditDetail/index.vue

@@ -12,11 +12,14 @@
 		>
 			<template #right>
 				<div class="operate-menu flex">
-					<div class="menu-btn flex align-center save">
+					<div class="menu-btn flex align-center save" @click="handleClickMenu('draft')">
 						<span>{{ $t("SellerListEdit.saveDraft") }}</span>
 						<SvgIcon name="CSave" size="16" />
 					</div>
-					<div class="menu-btn flex align-center publish">
+					<div
+						class="menu-btn flex align-center publish"
+						@click="handleClickMenu('publish')"
+					>
 						<span>{{ $t("SellerListEdit.publish") }}</span>
 						<SvgIcon name="CPublish" size="16" />
 					</div>
@@ -131,7 +134,9 @@
 			<div class="right">
 				<div class="form-container flex flex-col">
 					<div class="form-item">
-						<div class="form-item-label required">Product Name</div>
+						<div class="form-item-label required">
+							{{ $t("SellerListEdit.productName") }}
+						</div>
 						<div class="form-item-value product-name">
 							<a-input
 								v-model:value="currentListing.productName"
@@ -143,7 +148,7 @@
 						</div>
 					</div>
 					<div class="form-item">
-						<div class="form-item-label required">Price</div>
+						<div class="form-item-label required">{{ $t("SellerListEdit.price") }}</div>
 						<div class="form-item-value price flex align-center">
 							<span>HK$</span>
 							<a-input
@@ -154,7 +159,9 @@
 						</div>
 					</div>
 					<div class="form-item">
-						<div class="form-item-label required">Product Description</div>
+						<div class="form-item-label required">
+							{{ $t("SellerListEdit.productDescription") }}
+						</div>
 						<div class="form-item-value desc">
 							<a-textarea
 								v-model:value="currentListing.desc"
@@ -167,15 +174,17 @@
 						</div>
 					</div>
 					<div class="form-item">
-						<div class="form-item-label required">Design for</div>
+						<div class="form-item-label required">
+							{{ $t("SellerListEdit.designFor") }}
+						</div>
 						<div class="form-item-value no-border">
 							<Radio :options="genderOptions" v-model="currentListing.gender" />
 						</div>
 					</div>
 					<div class="form-item">
 						<div class="form-item-label with-tip">
-							<span class="required">Product Category</span>
-							<span class="help-text">select all that apply</span>
+							<span class="required">{{ $t("SellerListEdit.productCategory") }}</span>
+							<span class="help-text">{{ $t("SellerListEdit.categoryTips") }}</span>
 						</div>
 						<div class="form-item-value no-border">
 							<Radio :options="categoryOptions" v-model="currentListing.category" />
@@ -184,9 +193,8 @@
 					<div class="license-note flex align-center">
 						<img src="@/assets/images/seller/tips.png" class="info-icon" />
 						<div class="note-copy">
-							By default, all sales follow the platform's licensing policy — buyers
-							will receive a usage license upon download.
-							<a href="javascript:void(0)">Learn more</a>
+							{{ $t("SellerListEdit.policy") }}
+							<a href="javascript:void(0)">{{ $t("SellerListEdit.learnMore") }}</a>
 						</div>
 					</div>
 				</div>
@@ -207,13 +215,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue"
+import { computed, ref, watch, defineOptions } from "vue"
+import { useRouter } from "vue-router"
 import SellerHeader from "../../seller-header.vue"
 import testImg from "@/assets/images/test.png"
 import Radio from "./components/Radio.vue"
 import { Https } from "@/tool/https"
 import { useStore } from "vuex"
 
+const ROUTER = useRouter()
+
+defineOptions({
+	name: "EditDetail"
+})
+
 const STORE = useStore()
 
 type CategoryOption = {
@@ -245,7 +260,7 @@ const topImageTitleMap: Record<(typeof topImageList)[number], string> = {
 	cover: "Cover"
 }
 
-const genderOptions = STORE.state.UserHabit?.sex.value||[]
+const genderOptions = STORE.state.UserHabit?.sex.value || []
 
 const fallbackCategoryOptions: Record<string, CategoryOption[]> = {
 	MALE: STORE.state.UserHabit?.MalePosition || [],
@@ -362,6 +377,18 @@ const handleSelectProdImg = (index: number) => {
 		currentListing.value.mainProductImage = ""
 	}
 }
+
+const handleClickMenu = (status: "draft" | "publish") => {
+	if (status === "draft") {
+		// save draft logic
+		console.log("Saving draft...", currentListing.value)
+		ROUTER.push({ name: "Status", params: { status: "draft" } })
+	} else if (status === "publish") {
+		// publish logic
+		console.log("Publishing...", currentListing.value)
+		ROUTER.push({ name: "Status", params: { status: "publish" } })
+	}
+}
 </script>
 
 <style lang="less" scoped>
@@ -394,15 +421,15 @@ const handleSelectProdImg = (index: number) => {
 		cursor: pointer;
 		transition: all 0.25s ease;
 
-		&.save:hover {
+		&:hover {
 			background: #000;
 			color: #fff;
 		}
 
-		&.publish:hover {
-			background: #fff;
-			color: #000;
-		}
+		// &.publish:hover {
+		// 	background: #fff;
+		// 	color: #000;
+		// }
 	}
 
 	.edit-detail-header {
@@ -412,10 +439,10 @@ const handleSelectProdImg = (index: number) => {
 	.operate-menu {
 		column-gap: 2rem;
 
-		.publish {
-			background-color: #000000;
-			color: #ffffff;
-		}
+		// .publish {
+		// background-color: #000000;
+		// color: #ffffff;
+		// }
 	}
 }