Explorar o código

```
feat(workflowTrade): 添加工作流需求发布页面国际化支持

- 添加英文和中文本地化配置,支持工作流需求发布页面的所有文本内容
- 新增电话号码和邮箱格式验证的国际化提示信息
- 实现工作流需求发布页面的完全国际化,包括标题、表单字段、验证消息等
- 替换硬编码的中文文本为对应的国际化键值
- 添加预算上下限格式验证的国际化错误提示
```

zhangningning hai 1 mes
pai
achega
824ebc7667
Modificáronse 3 ficheiros con 122 adicións e 50 borrados
  1. 38 0
      src/locales/en.js
  2. 38 0
      src/locales/zh-CN.js
  3. 46 50
      src/pages/workflowTrade/workflowTradeAdd.vue

+ 38 - 0
src/locales/en.js

@@ -97,6 +97,8 @@ export default {
     dragUpload:"Drag Upload",
     basicInfo:"Basic Info",
     coverImage:"Cover Image",
+    pleaseInputRightPhoneNumber:"Please input right phone number",
+    pleaseInputRightEmail:"Please input right email",
   },
   login: {
     smsLogin: 'SMS Login',
@@ -152,6 +154,42 @@ export default {
     placeholderPrice:"Please input boom mibit quantity",
     placeholderWorkflowContent:"Please input workflow content",
   },
+  workflowTradeAdd:{
+    publishDemand:"Publish Workflow Demand",
+    publishDemandTip:"Fill in the following information to let more professional people know your needs",
+    basicInfo:"Basic Info",
+    demandTitle:"Demand Title",
+    demandTitleTip:"A good title can attract more professional people to pay attention",
+    placeholderDemandTitle:"Please input workflow demand title",
+    workflowType:"Workflow Type",
+    workflowTypeTip:"Select the most fitting workflow category",
+    placeholderWorkflowType:"Please select workflow type",
+    detailInfo:"Detail Info",
+    background:"Demand Background",
+    placeholderBackground:"Please input demand background",
+    requirements:"Specific Requirements",
+    placeholderRequirements:"Please input specific requirements",
+    requirementsTip:"Detailed description of functional requirements, technical requirements, etc. (50-2000 words)",
+    requirementsTip1:"Suggested points of description: 1.functional requirements 2.technical requirements 3.Experience requirements 4.other instructions",
+    projectInfo:"Project Info",
+    budgetLowerLimit:"Budget Lower Limit ",
+    budgetUpperLimit:"Budget Upper Limit ",
+    budgetLowerLimitTip:"Optional, helps attract suitable service providers",
+    placeholderBudgetLowerLimit:"Please input minimum budget",
+    placeholderBudgetUpperLimit:"Please input maximum budget",
+    selectSignUpDeadline:"Select Sign Up Deadline",
+    contactInfo:"Contact Info",
+    phoneNumber:"Phone Number",
+    placeholderPhoneNumber:"Please input phone number",
+    wechat:"Wechat",
+    placeholderWechat:"Please input wechat",
+    email:"Email",
+    placeholderEmail:"Please input email",
+    publishTip:"Publish Tip",
+    publishRules:"Publish Rules",
+    pleaseInputRightBudgetLowerLimit:"Please input right budget lower limit (up to 2 decimal places)",
+    pleaseInputRightBudgetUpperLimit:"Please input right budget upper limit (up to 2 decimal places)",
+  },
   personalCenter:{
     personalCenter: 'Personal Center',
     phoneNumber: 'Phone Number',

+ 38 - 0
src/locales/zh-CN.js

@@ -101,6 +101,8 @@ export default {
     dragUpload:"将文件拖到此处,或",
     basicInfo:"基本信息",
     coverImage:"封面图",
+    pleaseInputRightPhoneNumber:"请输入正确的手机号",
+    pleaseInputRightEmail:"请输入正确的邮箱",
   },
   login: {
     smsLogin: '短信登录',
@@ -155,6 +157,42 @@ export default {
     placeholderPrice:"请输入暴米币数量",
     placeholderWorkflowContent:"请输入工作流详情内容",
   },
+  workflowTradeAdd:{
+    publishDemand:"发布工作流需求",
+    publishDemandTip:"填写以下信息,让更多专业人士了解您的需求",
+    basicInfo:"基本信息",
+    demandTitle:"需求标题",
+    demandTitleTip:"一个好的标题能吸引更多专业人士关注",
+    placeholderDemandTitle:"请输入工作流标题",
+    workflowType:"工作流类型",
+    workflowTypeTip:"选择最贴合的工作流分类",
+    placeholderWorkflowType:"请选择工作流类型",
+    detailInfo:"详细内容",
+    background:"需求背景",
+    placeholderBackground:"请输入需求背景",
+    requirements:"具体要求",
+    placeholderRequirements:"请输入具体要求",
+    requirementsTip:"详细描述功能要求、技术要求等(50-2000字)",
+    requirementsTip1:"建议分点说明:1.功能需求 2.技术要求 3.经验要求 4.其他说明",
+    projectInfo:"项目信息",
+    budgetLowerLimit:"预算下限",
+    budgetUpperLimit:"预算上限",
+    budgetLowerLimitTip:"选填,有助于吸引合适的服务者",
+    placeholderBudgetLowerLimit:"请输入最低预算",
+    placeholderBudgetUpperLimit:"请输入最高预算",
+    selectSignUpDeadline:"选择报名截止时间",
+    contactInfo:"联系方式",
+    phoneNumber:"手机号",
+    placeholderPhoneNumber:"请输入手机号",
+    wechat:"微信号",
+    placeholderWechat:"请输入微信号",
+    email:"邮箱",
+    placeholderEmail:"请输入邮箱",
+    publishTip:"发布提示",
+    publishRules:"发布规则",
+    pleaseInputRightBudgetLowerLimit:"请输入正确的预算下限(最多两位小数)",
+    pleaseInputRightBudgetUpperLimit:"请输入正确的预算上限(最多两位小数)",
+  },
   personalCenter:{
     personalCenter: '个人中心',
     phoneNumber: '手机号',

+ 46 - 50
src/pages/workflowTrade/workflowTradeAdd.vue

@@ -2,8 +2,8 @@
   <div class="workflowTradeDetail container-height">
     <Breadcrumb />
     <div class="flex-column-center">
-      <div class="font_size30 bold">发布工作流需求</div>
-      <div class="gray font_size20">填写以下信息,让更多专业人士了解您的需求</div>
+      <div class="font_size30 bold">{{t('workflowTradeAdd.publishDemand')}}</div>
+      <div class="gray font_size20">{{t('workflowTradeAdd.publishDemandTip')}}</div>
     </div>
     <div class="flex-between mt10">
       <div class="flex_1 mr20">
@@ -12,28 +12,28 @@
           <div class="padding16 bg_color_fff border_radius_10 box_shadow_card">
             <div class="gap10">
               <div class="line_vertical"></div>
-              <div class="font_size20 bold">基本信息</div>
+              <div class="font_size20 bold">{{t('workflowTradeAdd.basicInfo')}}</div>
             </div>
             <div class="mt10">
               <el-form-item label="" prop="title">
                 <div>
                   <span class="color_required font_size16">*</span>
-                  <span class="font_size16 bold">需求标题</span>
-                  <span class="font_size14 gray999 ml20">一个好的标题能吸引更多专业人士关注</span>
+                  <span class="font_size16 bold">{{t('workflowTradeAdd.demandTitle')}}</span>
+                  <span class="font_size14 gray999 ml20">{{t('workflowTradeAdd.demandTitleTip')}}</span>
                 </div>
-                <el-input v-model="ruleForm.title" placeholder="请输入工作流标题"  maxlength="50"/>
+                <el-input v-model="ruleForm.title" :placeholder="t('workflowTradeAdd.placeholderDemandTitle')"  maxlength="50"/>
               </el-form-item>
               <el-form-item label="" prop="categoryId3">
                 <div>
                   <span class="color_required font_size16">*</span>
-                  <span class="font_size16 bold">工作流类型</span>
-                  <span class="font_size14 gray999 ml20">选择最贴合的工作流分类{{ruleForm.categoryId3}}</span>
+                  <span class="font_size16 bold">{{t('workflowTradeAdd.workflowType')}}</span>
+                  <span class="font_size14 gray999 ml20">{{t('workflowTradeAdd.workflowTypeTip')}}</span>
                 </div>
                 <!-- 树形选择 -->
                 <el-cascader 
                   v-model="categoryIdList"
                   :options="categoryListTree"
-                  placeholder="请选择工作流类型"
+                  :placeholder="t('workflowTradeAdd.placeholderWorkflowType')"
                   style="width:100%"
                   :props="{
                     label: 'categoryName',
@@ -48,21 +48,17 @@
           <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
             <div class="gap10">
               <div class="line_vertical"></div>
-              <div class="font_size20 bold">详细内容</div>
+              <div class="font_size20 bold">{{t('workflowTradeAdd.detailInfo')}}</div>
             </div>
             <div class="mt10">
-              <el-form-item label="需求背景" prop="background">
-                <el-input v-model="ruleForm.background" placeholder="说明您的需求来源和目的"  maxlength="500" type="textarea" show-word-limit/>
+              <el-form-item :label="$t('workflowTradeAdd.background')" prop="background">
+                <el-input v-model="ruleForm.background" :placeholder="t('workflowTradeAdd.placeholderBackground')"  maxlength="500" type="textarea" show-word-limit/>
               </el-form-item>
-              <el-form-item label="具体要求" prop="requirements">
+              <el-form-item :label="$t('workflowTradeAdd.requirements')" prop="requirements">
                 <el-input v-model="ruleForm.requirements" 
                 rows="7"
-                placeholder="详细描述功能要求、技术要求等(50-2000字)
-建议分点说明:
-1.功能需求
-2.技术要求
-3.经验要求
-4.其他说明
+                :placeholder="t('workflowTradeAdd.requirementsTip')
++t('workflowTradeAdd.requirementsTip1')
                 "  maxlength="2000" type="textarea" show-word-limit/>
               </el-form-item>
             </div>
@@ -71,36 +67,36 @@
           <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
             <div class="gap10">
               <div class="line_vertical"></div>
-              <div class="font_size20 bold">项目信息</div>
+              <div class="font_size20 bold">{{$t('workflowTradeAdd.projectInfo')}}</div>
             </div>
             <div class="mt10">
               <el-row :gutter="20">
                 <el-col :span="12">
                   <el-form-item label="" prop="budgetMin">
                     <div>
-                      <span class="font_size16 bold">预算下限(元)</span>
-                      <span class="font_size14 gray999 ml20">选填,有助于吸引合适的服务者</span>
+                      <span class="font_size16 bold">{{$t('workflowTradeAdd.budgetLowerLimit')}}({{$t('common.RMB')}})</span>
+                      <span class="font_size14 gray999 ml20">{{$t('workflowTradeAdd.budgetLowerLimitTip')}}</span>
                     </div>
-                    <el-input v-model="ruleForm.budgetMin" placeholder="最低预算"  maxlength="11" type="number" />
+                    <el-input v-model="ruleForm.budgetMin" :placeholder="$t('workflowTradeAdd.placeholderBudgetLowerLimit')"  maxlength="11" type="number" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="" prop="budgetMax">
                     <div>
-                      <span class="font_size16 bold">预算上限(元)</span>
-                      <span class="font_size14 gray999 ml20">选填,有助于吸引合适的服务者</span>
+                      <span class="font_size16 bold">{{$t('workflowTradeAdd.budgetUpperLimit')}}({{$t('common.RMB')}})</span>
+                      <span class="font_size14 gray999 ml20">{{$t('workflowTradeAdd.budgetLowerLimitTip')}}</span>
                     </div>
-                    <el-input v-model="ruleForm.budgetMax" placeholder="最高预算"  maxlength="11" type="number" />
+                    <el-input v-model="ruleForm.budgetMax" :placeholder="$t('workflowTradeAdd.placeholderBudgetUpperLimit')"  maxlength="11" type="number" />
                   </el-form-item>
                 </el-col>
               </el-row>
-              <el-form-item label="报名截止时间" prop="deadline">
+              <el-form-item :label="$t('common.signUpDeadline')" prop="deadline">
                 <!-- 只能选择之后的时间 -->
                 <el-date-picker
                   v-model="ruleForm.deadline"
                   type="date"
                   value-format="YYYY-MM-DD"
-                  placeholder="选择报名截止时间"
+                  :placeholder="$t('workflowTradeAdd.selectSignUpDeadline')"
                   :disabled-date="time => time.getTime() < Date.now() - 8.64e7"
                 />
               </el-form-item>
@@ -110,28 +106,28 @@
           <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
             <div class="gap10">
               <div class="line_vertical"></div>
-              <div class="font_size20 bold">联系方式</div>
+              <div class="font_size20 bold">{{$t('workflowTradeAdd.contactInfo')}}</div>
             </div>  
             <div class="mt10">
-              <el-form-item label="手机号" prop="phone">
-                <el-input v-model="ruleForm.phone" placeholder="请输入手机号"  maxlength="11"/>
+              <el-form-item :label="$t('workflowTradeAdd.phoneNumber')" prop="phone">
+                <el-input v-model="ruleForm.phone" :placeholder="$t('workflowTradeAdd.placeholderPhoneNumber')"  maxlength="11"/>
               </el-form-item>
-              <el-form-item label="微信">
-                <el-input v-model="ruleForm.wechat" placeholder="请输入微信号"  maxlength="50"/>
+              <el-form-item :label="$t('workflowTradeAdd.wechat')" prop="wechat">
+                <el-input v-model="ruleForm.wechat" :placeholder="$t('workflowTradeAdd.placeholderWechat')"  maxlength="50"/>
               </el-form-item>
-              <el-form-item label="邮箱" prop="email">
-                <el-input v-model="ruleForm.email" placeholder="请输入邮箱"  maxlength="50"/>
+              <el-form-item :label="$t('workflowTradeAdd.email')" prop="email">
+                <el-input v-model="ruleForm.email" :placeholder="$t('workflowTradeAdd.placeholderEmail')"  maxlength="50"/>
               </el-form-item>
             </div>
           </div>
           <div class="mt20">
             <el-button type="primary" class="font_size16 gradient" @click="submitForm" size="large">
               <el-icon><Promotion /></el-icon>
-              <span class="ml10">发布需求</span>
+              <span class="ml10">{{$t('common.fabuxuqiu')}}</span>
             </el-button>
             <el-button class="font_size16" @click="goBack"  size="large">
               <el-icon><Close /></el-icon>
-              <span class="ml10">取消</span>
+              <span class="ml10">{{$t('common.cancel')}}</span>
             </el-button>
           </div>
         </el-form>
@@ -142,7 +138,7 @@
           <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
             <div class="gap10">
               <div class="line_vertical"></div>
-              <div class="font_size20 bold">发布提示</div>
+              <div class="font_size20 bold">{{$t('workflowTradeAdd.publishTip')}}</div>
             </div>
             <!-- 无序列表 -->
             <div class="font_size16">
@@ -156,7 +152,7 @@
           <div class="padding16 bg_color_fff border_radius_16 mt20 box_shadow_card">
             <div class="gap10">
               <div class="line_vertical"></div>
-              <div class="font_size20 bold">发布规则</div>
+              <div class="font_size20 bold">{{$t('workflowTradeAdd.publishRules')}}</div>
             </div>
             <!-- 有序列表 -->
             <div class="font_size16">
@@ -224,35 +220,35 @@ watchEffect(() => {
 // 校验规则
 const rules = reactive({
   title: [
-    { required: true, message: '请输入需求标题', trigger: 'blur' },
+    { required: true, message: t('workflowTradeAdd.placeholderDemandTitle'), trigger: 'blur' },
   ],
   categoryId3: [
-    { required: true, message: '请选择工作流类型', trigger: 'blur' },
+    { required: true, message: t('workflowTradeAdd.placeholderWorkflowType'), trigger: 'blur' },
   ],
   background: [
-    { required: true, message: '请输入需求背景', trigger: 'blur' },
+    { required: true, message: t('workflowTradeAdd.placeholderBackground'), trigger: 'blur' },
   ],
   requirements: [
-    { required: true, message: '请输入具体要求', trigger: 'blur' },
+    { required: true, message: t('workflowTradeAdd.placeholderRequirements'), trigger: 'blur' },
   ],
   budgetMin: [
     // { required: true, message: '请输入预算下限', trigger: 'blur' },
-    { validator: (rule, value, callback) => /^\d+(\.\d{1,2})?$/.test(value), message: '请输入正确的预算下限(最多两位小数)', trigger: 'blur' },
+    { validator: (rule, value, callback) => /^\d+(\.\d{1,2})?$/.test(value), message: t('workflowTradeAdd.pleaseInputRightBudgetLowerLimit'), trigger: 'blur' },
   ],
   budgetMax: [
     // { required: true, message: '请输入预算上限', trigger: 'blur' },
-    { validator: (rule, value, callback) => /^\d+(\.\d{1,2})?$/.test(value), message: '请输入正确的预算上限(最多两位小数)', trigger: 'blur' },
+    { validator: (rule, value, callback) => /^\d+(\.\d{1,2})?$/.test(value), message: t('workflowTradeAdd.pleaseInputRightBudgetUpperLimit'), trigger: 'blur' },
   ],
   deadline: [
-    { required: true, message: '请选择报名截止时间', trigger: 'change' },
+    { required: true, message: t('workflowTradeAdd.selectSignUpDeadline'), trigger: 'change' },
   ],
   phone: [
-    { required: true, message: '请输入手机号', trigger: 'blur' },
-    { validator: (rule, value, callback) => /^1[3456789]\d{9}$/.test(value), message: '请输入正确的手机号', trigger: 'blur' },
+    { required: true, message: t('workflowTradeAdd.placeholderPhoneNumber'), trigger: 'blur' },
+    { validator: (rule, value, callback) => /^1[3456789]\d{9}$/.test(value), message: t('common.pleaseInputRightPhoneNumber'), trigger: 'blur' },
   ],
   email: [
-    { required: true, message: '请输入邮箱', trigger: 'blur' },
-    { validator: (rule, value, callback) => /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value), message: '请输入正确的邮箱', trigger: 'blur' },
+    { required: true, message: t('workflowTradeAdd.placeholderEmail'), trigger: 'blur' },
+    { validator: (rule, value, callback) => /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value), message: t('common.pleaseInputRightEmail'), trigger: 'blur' },
   ],
 });