多语言功能开发 商品显示

.env.local

@@ -4,16 +4,16 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径  远端， 本地
-# VITE_BASE_URL='https://api.fasteatjp.com'
-VITE_BASE_URL='http://localhost:48081'
+VITE_BASE_URL='https://api.fasteatjp.com'
+# VITE_BASE_URL='http://localhost:48081'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server
 # 上传路径
 
 # 远端， 本地
-# VITE_UPLOAD_URL='https://api.fasteatjp.com/admin-api/infra/file/upload'
-VITE_UPLOAD_URL='http://localhost:48081/admin-api/infra/file/upload'
+VITE_UPLOAD_URL='https://api.fasteatjp.com/admin-api/infra/file/upload'
+# VITE_UPLOAD_URL='http://localhost:48081/admin-api/infra/file/upload'
 
 
 # 接口地址

.vscode/settings.json

@@ -86,7 +86,7 @@
     "source.fixAll.eslint": "explicit"
   },
   "[vue]": {
-    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "i18n-ally.localesPaths": ["src/locales"],
   "i18n-ally.keystyle": "nested",

prettier.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 100, // 每行代码长度（默认80）
+  printWidth: 140, // 每行代码长度（默认80）
   tabWidth: 2, // 每个tab相当于多少个空格（默认2）ab进行缩进（默认false）
   useTabs: false, // 是否使用tab
   semi: false, // 声明结尾使用分号(默认true)

src/locales/en.ts

@@ -54,7 +54,38 @@ export default {
     updateTime: 'Update Time',
     copy: 'Copy',
     copySuccess: 'Copy Success',
-    copyError: 'Copy Error'
+    copyError: 'Copy Error',
+    selectShop: 'Select Shop',
+    enterProductName: 'Please enter product name',
+    selectCategory: 'Select product category',
+    enterKeyword: 'Please enter keyword',
+    enterUnitName: 'Please enter unit name',
+    enterPrice: 'Please enter product price',
+    enterMarketPrice: 'Please enter market price',
+    enterStock: 'Please enter stock',
+    enterProductDescription: 'Please enter product description',
+    enterPoints: 'Please enter points',
+    addBasicInfo: 'Please add basic information',
+    selectAttribute: 'Please select attribute',
+    addCompleteSpec: 'Please add complete specification!',
+    addAttribute: 'Please add attribute!',
+    addSpec: 'Add specification',
+    confirm: 'Confirm',
+   
+    delete: 'Delete',
+
+    nextStep: 'Next step',
+    previousStep: 'Previous step',
+    uploadImage: 'Upload image',
+    addNewSpec: 'Add new specification',
+    generateNow: 'Generate now',
+    selectShopFirst: 'Please select shop first',
+    selectCategoryFirst: 'Please select category first',
+    selectSpec: 'Select specification',
+    enterSpecName: 'Please enter specification name',
+    enterSpecValue: 'Please enter specification value',
+    selectFreightTemplate: 'Select freight template',
+    enterFreight: 'Please enter freight',
   },
   lock: {
     lockScreen: 'Lock screen',
@@ -453,5 +484,53 @@ export default {
     btn_zoom_in: 'Zoom in',
     btn_zoom_out: 'Zoom out',
     preview: 'Preivew'
-  }
+  },
+  product: {
+    productName: "Product Name",
+    enterProductName: "Enter Product Name",
+    shopName: "Shop Name",
+    enterShopName: "Enter Shop Name",
+    productImage: "Product Image",
+    productPrice: "Product Price",
+    sales: "Sales",
+    stock: "Stock",
+    status: "Status",
+    onSale: "On Sale",
+    offSale: "Off Sale",
+    addTime: "Add Time",
+    actions: "Actions",
+    edit: "Edit",
+    delete: "Delete",
+    onSaleProducts: "Products On Sale",
+    pendingProducts: "Pending Products",
+    soldOutProducts: "Sold Out Products",
+    confirmSale: "Confirm Sale?",
+    operationSuccess: "Operation Success",
+    displayShop: "Display Shop",
+    productCategory: "Product Category",
+    keyword: "Keyword",
+    unitName: "Unit Name",
+    marketPrice: "Market Price",
+    coverImage: "Cover Image",
+    sliderImage: "Slider Image",
+    productStatus: "Product Status",
+    productDescription: "Product Description",
+    productSpec: "Product Specification",
+    singleSpec: "Single Spec",
+    multipleSpec: "Multiple Spec",
+    selectSpec: "Select Spec",
+    productAttributes: "Product Attributes",
+    productDetails: "Product Details",
+    marketingSettings: "Marketing Settings",
+    getPoints: "Get Points",
+    basicInfo: "Basic Info",
+    specSettings: "Spec Settings",
+    logisticsSettings: "Logistics Settings",
+    freightSettings: "Freight Settings",
+    postage: "Postage",
+    freightTemplate: "Freight Template",
+    newProduct: "Is New Product",
+    yes: "Yes",
+    no: "No"
+  },
 }

src/locales/ja.ts

@@ -54,7 +54,36 @@ export default {
     updateTime: '更新日時',
     copy: 'コピー',
     copySuccess: 'コピー成功',
-    copyError: 'コピー失敗'
+    copyError: 'コピー失敗',
+    selectShop: '店舗を選択',
+    enterProductName: '商品名を入力してください',
+    selectCategory: '商品カテゴリを選択',
+    enterKeyword: 'キーワードを入力してください',
+    enterUnitName: '単位名を入力してください',
+    enterPrice: '商品価格を入力してください',
+    enterMarketPrice: '市場価格を入力してください',
+    enterStock: '在庫を入力してください',
+    enterProductDescription: '商品説明を入力してください',
+    enterPoints: 'ポイントを入力してください',
+    addBasicInfo: '基本情報を追加してください',
+    selectAttribute: '属性を選択してください',
+    addCompleteSpec: '完全な仕様を追加してください！',
+    addAttribute: '属性を追加してください！',
+    addSpec: '仕様を追加',
+    confirm: '確認',
+    delete: '削除',
+    nextStep: '次へ',
+    previousStep: '前へ',
+    uploadImage: '画像をアップロード',
+    addNewSpec: '新しい仕様を追加',
+    generateNow: '今すぐ生成',
+    selectShopFirst: 'まず店舗を選択してください',
+    selectCategoryFirst: 'まずカテゴリを選択してください',
+    selectSpec: '仕様を選択',
+    enterSpecName: '仕様名を入力してください',
+    enterSpecValue: '仕様値を入力してください',
+    selectFreightTemplate: '運賃テンプレートを選択',
+    enterFreight: '運賃を入力してください',
   },
   lock: {
     lockScreen: '画面ロック',
@@ -465,5 +494,53 @@ export default {
     btn_zoom_out: '縮小',
     preview: 'プレビュー'
   },
+  product: {
+    productName: "商品名",
+    enterProductName: "商品名を入力してください",
+    shopName: "店舗名",
+    enterShopName: "店舗名を入力してください",
+    productImage: "商品画像",
+    productPrice: "商品価格",
+    sales: "売上",
+    stock: "在庫",
+    status: "ステータス",
+    onSale: "販売中",
+    offSale: "販売停止",
+    addTime: "追加時間",
+    actions: "操作",
+    edit: "編集",
+    delete: "削除",
+    onSaleProducts: "販売中の商品",
+    pendingProducts: "販売待ち商品",
+    soldOutProducts: "売り切れ商品",
+    confirmSale: "販売を確定しますか？",
+    operationSuccess: "操作成功",
+    displayShop: "店舗を表示",
+    productCategory: "商品カテゴリ",
+    keyword: "キーワード",
+    unitName: "単位名",
+    marketPrice: "市場価格",
+    coverImage: "表紙画像",
+    sliderImage: "スライダー画像",
+    productStatus: "商品ステータス",
+    productDescription: "商品説明",
+    productSpec: "商品仕様",
+    singleSpec: "単一仕様",
+    multipleSpec: "複数仕様",
+    selectSpec: "仕様を選択",
+    productAttributes: "商品属性",
+    productDetails: "商品詳細",
+    marketingSettings: "マーケティング設定",
+    getPoints: "ポイント獲得",
+    basicInfo: "基本情報",
+    specSettings: "仕様設定",
+    logisticsSettings: "物流設定",
+    freightSettings: "運賃設定",
+    postage: "郵便料金",
+    freightTemplate: "運賃テンプレート",
+    newProduct: "新商品かどうか",
+    yes: "はい",
+    no: "いいえ"
+  },
   'OAuth 2.0': 'OAuth 2.0'
 }

src/locales/zh-CN.ts

@@ -54,7 +54,41 @@ export default {
     updateTime: '更新时间',
     copy: '复制',
     copySuccess: '复制成功',
-    copyError: '复制失败'
+    copyError: '复制失败',
+    search: '搜索',
+    add: '新增',
+    yes: '是',
+    no: '否',
+    selectShop: '选择店铺',
+    enterProductName: '请输入商品名称',
+    selectCategory: '选择商品分类',
+    enterKeyword: '请输入关键字',
+    enterUnitName: '请输入单位名',
+    enterPrice: '请输入商品价格',
+    enterMarketPrice: '请输入市场价',
+    enterStock: '请输入库存',
+    enterProductDescription: '请输入商品简介',
+    enterPoints: '请输入获得积分',
+    addBasicInfo: '请添加基本信息',
+    selectAttribute: '请选择属性',
+    addCompleteSpec: '请添加完整的规格！',
+    addAttribute: '请添加属性！',
+    addSpec: '请添加规格',
+    confirm: '确认',
+    delete: '删除',
+    nextStep: '下一步',
+    previousStep: '上一步',
+    uploadImage: '上传图片',
+    addNewSpec: '添加新规格',
+    generateNow: '立即生成',
+    selectShopFirst: '请先选择店铺',
+    selectCategoryFirst: '请先选择分类',
+    selectSpec: '选择规格',
+    enterSpecName: '请输入规格',
+    enterSpecValue: '请输入规格值',
+    selectFreightTemplate: '选择运费模板',
+    enterFreight: '请输入邮费',
+   
   },
   lock: {
     lockScreen: '锁定屏幕',
@@ -310,7 +344,6 @@ export default {
     del: '删除',
     delete: '删除',
     edit: '编辑',
-    update: '编辑',
     preview: '预览',
     more: '更多',
     sync: '同步',
@@ -324,7 +357,8 @@ export default {
     typeCreate: '字典类型新增',
     typeUpdate: '字典类型编辑',
     dataCreate: '字典数据新增',
-    dataUpdate: '字典数据编辑'
+    dataUpdate: '字典数据编辑',
+    update: '更新'
   },
   dialog: {
     dialog: '弹窗',
@@ -464,5 +498,53 @@ export default {
     btn_zoom_out: '缩小',
     preview: '预览'
   },
+  product: {
+    productName: '商品名称',
+    enterProductName: '请输入商品名称',
+    shopName: '店铺名称',
+    enterShopName: '请输入店铺名称',
+    productImage: '商品图片',
+    productPrice: '商品价格',
+    sales: '销量',
+    stock: '库存',
+    status: '状态',
+    onSale: '已上架',
+    offSale: '已下架',
+    addTime: '添加时间',
+    actions: '操作',
+    edit: '编辑',
+    delete: '删除',
+    onSaleProducts: '出售中产品',
+    pendingProducts: '待上架产品',
+    soldOutProducts: '已售罄产品',
+    confirmSale: '确定要上下架？',
+    operationSuccess: '操作成功',
+    displayShop: '展示店铺',
+    productCategory: '商品分类',
+    keyword: '关键字',
+    unitName: '单位名',
+    marketPrice: '市场价',
+    coverImage: '封面图',
+    sliderImage: '轮播图',
+    productStatus: '商品状态',
+    productDescription: '商品简介',
+    productSpec: '商品规格',
+    singleSpec: '单规格',
+    multipleSpec: '多规格',
+    selectSpec: '选择规格',
+    productAttributes: '商品属性',
+    productDetails: '商品详情',
+    marketingSettings: '营销设置',
+    getPoints: '获得积分',
+    basicInfo: '基本信息',
+    specSettings: '规格设置',
+    logisticsSettings: '物流设置',
+    freightSettings: '运费设置',
+    postage: '邮费',
+    freightTemplate: '运费模板',
+    newProduct: '是否新品',
+    yes: '是',
+    no: '否',
+  },
   'OAuth 2.0': 'OAuth 2.0' // 避免菜单名是 OAuth 2.0 时，一直 warn 报错
 }

src/views/mall/product/storeProduct/index.vue

@@ -1,53 +1,57 @@
 <template>
   <el-row :gutter="20">
-  <!-- 左侧部门树 -->
-  <el-col :span="4" :xs="24">
-    <ContentWrap class="h-1/1">
-      <CateTree @node-click="handleDeptNodeClick" />
-    </ContentWrap>
-  </el-col>
-  <el-col :span="20" :xs="24">
-    <ContentWrap>
-      <!-- 搜索工作栏 -->
-      <el-form
-        class="-mb-15px"
-        :model="queryParams"
-        ref="queryFormRef"
-        :inline="true"
-        label-width="68px"
-      >
-        <el-form-item label="商品名称" prop="storeName">
-          <el-input
-            v-model="queryParams.storeName"
-            placeholder="请输入商品名称"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          />
-        </el-form-item>
-        <el-form-item label="店铺名称" prop="shopName">
-        <el-input
-          v-model="queryParams.shopName"
-          placeholder="请输入分类名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-          <!-- <router-link :to="{ path: '/product/store-product/product-crreate' }"> -->
-          <el-button
-            type="primary"
-            plain
-            @click="openForm('create')"
-            v-hasPermi="['shop:store-product:create']"
-          >
-            <Icon icon="ep:plus" class="mr-5px" /> 新增
-          </el-button>
-        <!-- </router-link> -->
-          <!-- <el-button
+    <!-- 左侧部门树 -->
+    <el-col :span="4" :xs="24">
+      <ContentWrap class="h-1/1">
+        <CateTree @node-click="handleDeptNodeClick" />
+      </ContentWrap>
+    </el-col>
+    <el-col :span="20" :xs="24">
+      <ContentWrap>
+        <!-- 搜索工作栏 -->
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="68px"
+        >
+          <el-form-item :label="$t('product.productName')" prop="storeName">
+            <el-input
+              v-model="queryParams.storeName"
+              :placeholder="$t('product.enterProductName')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('product.shopName')" prop="shopName">
+            <el-input
+              v-model="queryParams.shopName"
+              :placeholder="$t('product.enterShopName')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"
+              ><Icon icon="ep:search" class="mr-5px" /> {{ $t('common.search') }}</el-button
+            >
+            <el-button @click="resetQuery"
+              ><Icon icon="ep:refresh" class="mr-5px" /> {{ $t('common.reset') }}</el-button
+            >
+            <!-- <router-link :to="{ path: '/product/store-product/product-crreate' }"> -->
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['shop:store-product:create']"
+            >
+              <Icon icon="ep:plus" class="mr-5px" /> {{ $t('common.add') }}
+            </el-button>
+            <!-- </router-link> -->
+            <!-- <el-button
             type="success"
             plain
             @click="handleExport"
@@ -56,82 +60,101 @@
           >
             <Icon icon="ep:download" class="mr-5px" /> 导出
           </el-button> -->
-        </el-form-item>
-      </el-form>
-    </ContentWrap>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
 
-    <!-- 列表 -->
-    <ContentWrap>
-      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-        <el-tab-pane v-for="item in tableTabs" :label="item.title" :key="item.name" :name="item.name">
-          <el-table v-loading="loading" :data="list">
-            <el-table-column label="id" align="center" width="50" prop="id" />
-            <el-table-column label="商品图片" align="center" prop="image" >
-              <template #default="scope">
-                <el-image
-                  style="width: 100px; height: 100px"
-                  :src="scope.row.image"
-                  :zoom-rate="1.2"
-                  :preview-src-list="[scope.row.image]"
-                  :initial-index="0"
-                  :z-index="900"
-                  :hide-on-click-modal="true"
-                  :preview-teleported="true"
-                  fit="cover"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column label="所属门店" align="center" prop="shopName" />
-            <el-table-column label="商品名称" align="center" prop="storeName" />
-            <el-table-column label="商品价格" align="center" prop="price" />
-            <el-table-column label="销量" align="center"  width="80" prop="sales" />
-            <el-table-column label="库存" align="center"  width="80" prop="stock" />
-            <el-table-column label="状态" align="center" prop="isShow" >
-              <template #default="scope">
-                <div @click="onSale(scope.row.id,scope.row.isShow)">
-                  <el-tag v-if="scope.row.isShow === 1" style="cursor: pointer" type="success">已上架</el-tag>
-                  <el-tag v-else style="cursor: pointer" type="danger">已下架</el-tag>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="添加时间"
-              align="center"
-              prop="createTime"
-              :formatter="dateFormatter"
-            />
-            <el-table-column label="操作" align="center">
-              <template #default="scope">
-                <el-button
-                  link
-                  type="primary"
-                  @click="openForm('update', scope.row.id)"
-                  v-hasPermi="['shop:store-product:update']"
-                >
-                  编辑
-                </el-button>
-                <el-button
-                  link
-                  type="danger"
-                  @click="handleDelete(scope.row.id)"
-                  v-hasPermi="['shop:store-product:delete']"
-                >
-                  删除
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-tab-pane>
-      </el-tabs>
-      <!-- 分页 -->
-      <Pagination
-        :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </ContentWrap>
-   </el-col>
+      <!-- 列表 -->
+      <ContentWrap>
+        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+          <el-tab-pane
+            v-for="item in tableTabs"
+            :label="item.title"
+            :key="item.name"
+            :name="item.name"
+          >
+            <el-table v-loading="loading" :data="list">
+              <el-table-column label="id" align="center" width="50" prop="id" />
+              <el-table-column :label="$t('product.productImage')" align="center" prop="image">
+                <template #default="scope">
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="scope.row.image"
+                    :zoom-rate="1.2"
+                    :preview-src-list="[scope.row.image]"
+                    :initial-index="0"
+                    :z-index="900"
+                    :hide-on-click-modal="true"
+                    :preview-teleported="true"
+                    fit="cover"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('product.shopName')" align="center" prop="shopName" />
+              <el-table-column :label="$t('product.productName')" align="center" prop="storeName" />
+              <el-table-column :label="$t('product.productPrice')" align="center" prop="price" />
+              <el-table-column
+                :label="$t('product.sales')"
+                align="center"
+                width="80"
+                prop="sales"
+              />
+              <el-table-column
+                :label="$t('product.stock')"
+                align="center"
+                width="80"
+                prop="stock"
+              />
+              <el-table-column :label="$t('product.status')" align="center" prop="isShow">
+                <template #default="scope">
+                  <div @click="onSale(scope.row.id, scope.row.isShow)">
+                    <el-tag v-if="scope.row.isShow === 1" style="cursor: pointer" type="success">{{
+                      $t('product.onSale')
+                    }}</el-tag>
+                    <el-tag v-else style="cursor: pointer" type="danger">{{
+                      $t('product.offSale')
+                    }}</el-tag>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('product.addTime')"
+                align="center"
+                prop="createTime"
+                :formatter="dateFormatter"
+              />
+              <el-table-column :label="$t('product.actions')" align="center">
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    @click="openForm('update', scope.row.id)"
+                    v-hasPermi="['shop:store-product:update']"
+                  >
+                    {{ $t('product.edit') }}
+                  </el-button>
+                  <el-button
+                    link
+                    type="danger"
+                    @click="handleDelete(scope.row.id)"
+                    v-hasPermi="['shop:store-product:delete']"
+                  >
+                    {{ $t('product.delete') }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+        <!-- 分页 -->
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </ContentWrap>
+    </el-col>
   </el-row>
   <!-- 表单弹窗：添加/修改 -->
   <StoreProductForm ref="formRef" @success="getList" />
@@ -165,23 +188,20 @@ const exportLoading = ref(false) // 导出的加载中
 
 const activeName = ref('1')
 const tableTabs = ref([
-    {
-    title: '出售中产品',
-    name: '1',
-  },
-   {
-    title: '待上架产品',
-    name: '2',
+  {
+    title: t('product.onSaleProducts'), // 出售中产品
+    name: '1'
   },
-   {
-    title: '已售罄产品',
-    name: '3',
+  {
+    title: t('product.pendingProducts'), // 待上架产品
+    name: '2'
   },
-  
+  {
+    title: t('product.soldOutProducts'), // 已售罄产品
+    name: '3'
+  }
 ])
 
-
-
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -207,7 +227,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
     queryParams.stock = 1
     getList()
   }
-  
+
   if (tab.paneName == '2') {
     queryParams.isShow = 0
     queryParams.stock = 1
@@ -219,7 +239,6 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
     queryParams.stock = 0
     getList()
   }
-
 }
 
 /** 搜索按钮操作 */
@@ -240,13 +259,13 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 /** 上下架按钮操作 */
-const onSale = async (id,isShow) => {
+const onSale = async (id, isShow) => {
   try {
     // 删除的二次确认
-    await message.confirm('确定要上下架？')
+    await message.confirm(t('product.confirmSale')) // 确定要上下架？
     // 发起删除
-    await StoreProductApi.saleStoreProduct(id,isShow)
-    message.success('操作成功')
+    await StoreProductApi.saleStoreProduct(id, isShow)
+    message.success(t('product.operationSuccess')) // 操作成功
     // 刷新列表
     await getList()
   } catch {}
@@ -282,10 +301,6 @@ const handleExport = async () => {
 
 /** 初始化 **/
 onMounted(() => {
-
-  
   getList()
 })
-
-
 </script>