no message

src/components/trip/trip.vue

 <template>
   <div class="q-mt-lg" :class="{'q-px-md':$q.platform.is.mobile}">
     <div class="text-subtitle1 text-weight-bold row items-center">
-      <span class="col">每日行程</span>
+      <span class="col">{{$t('v103.details.daily')}}</span>
       <span class="">
-        <q-chip class="bg-transparent text-weight-light text-grey-7 f12" icon="iconfont icontime" :label="`行程時間：${trip.dayList.length}天`" />
+        <q-chip class="bg-transparent text-weight-light text-grey-7 f12" icon="iconfont icontime" :label="`${$t('v103.details.headerlabel.d2')}：${trip.dayList.length}${$t('v103.details.headerlabel.d21')}`" />
       </span>
     </div>
     <q-tabs
@@ -15,8 +15,8 @@
       active-class="text-primary"
       dense
     >
-      <q-tab name="image" @click="changeHandler()" icon="iconfont iconimage" class="no-padding q-mr-lg" label="圖文模式" />
-      <q-tab name="dates" @click="changeHandler()" icon="iconfont iconrili" class="no-padding q-mr-lg" label="日曆模式" />
+      <q-tab name="image" @click="changeHandler()" icon="iconfont iconimage" class="no-padding q-mr-lg" :label="$t('v103.details.graphicmode')" />
+      <q-tab name="dates" @click="changeHandler()" icon="iconfont iconrili" class="no-padding q-mr-lg" :label="$t('v103.details.calendarmode')" />
     </q-tabs>
     <list :days="trip.dayList" v-if="displayType=='image'"></list>
     <calendar :days="trip.dayList" v-if="displayType=='dates'"></calendar>

src/i18n/zh-TW/index.ts

@@ -1110,7 +1110,47 @@ export default {
     },
     details:{
       since: '起',
-      selectionscheme: '選擇方案'
+      selectionscheme: '選擇方案',
+      headerlabel:{
+        d1: '印象自組團',
+        d2: '行程時間',
+        d21: '天',
+        d3: '日本語/中文 導覽',
+        d4: '15天前可免費取消',
+      },
+      nooffer: '暫無報價',
+      selectdate: '選擇日期、選項',
+      travelplan: '行程標準出行方案',
+      deselect: '取消選擇',
+      choose: '選擇',
+      earliest: '最早可預訂日期',
+      thisscheme: '關於此方案',
+      confirmationtime: '6個工作日內（不含例休假）確認',
+      righttitle:{
+        d1: '行程特色',
+        d2: '行程介紹',
+        d3: '費用說明',
+        d31: '費用包含',
+        d32: '費用不含',
+        d4: '購買須知',
+        d5: '溫馨提示',
+        d6: '取消政策',
+        d7: '所选日期 15 天（含）之前取消，收取手续费 0%',
+        d8: '所选日期 8 ~ 14 天之间取消，收取手续费 30%',
+        d9: '所选日期 4 ~ 7 天之间取消，收取手续费 50%',
+        d10: '所选日期 1 ~ 3 天之间取消，收取手续费 80%',
+        d11: '所选日期 0 ~ 0 天之间取消，收取手续费 100%',
+        d12: '注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需 2-5 个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14 个工作天内退款。',
+      },
+      warnbuytext:{
+        d1: '未满 2 岁幼儿不占位可免费参加（不含座位，餐点，门票，床位），请先于下订时在「备注栏」告知。',
+        d2: '如需要單人房，請購買單房',
+        d3: '不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買成人價',
+        d4: '12歲以上皆視同成人售價',
+      },
+      daily: '每日行程',
+      graphicmode: '圖文模式',
+      calendarmode: '日曆模式'
     }
   }
   //#endregion

src/pages/scheduledTrip/detailsNew.vue

@@ -77,25 +77,25 @@
               class="transparent q-mr-xl no-padding"
               square
               icon="iconfont iconOwner-1"
-              label=" 印象自組團"
+              :label=" $t('v103.details.headerlabel.d1')"
             />
             <q-chip
               class="transparent q-mr-xl no-padding"
               square
               icon="iconfont icontime"
-              :label="` 行程時間 ${dataList.dayList.length} 天`"
+              :label="` ${$t('v103.details.headerlabel.d2')} ${dataList.dayList.length} ${$t('v103.details.headerlabel.d21')}`"
             />
             <q-chip
               class="transparent q-mr-xl no-padding"
               square
               icon="iconfont iconnetwork-fill"
-              label="日本語/中文 導覽"
+              :label="$t('v103.details.headerlabel.d3')"
             />
             <q-chip
               class="transparent q-mr-xl no-padding"
               square
               icon="iconfont iconcancel"
-              label="15天前可免費取消"
+              :label="$t('v103.details.headerlabel.d4')"
             />
           </div>
         </div>
@@ -111,12 +111,12 @@
           >
             <!-- CNY：{{ dataList. }} -->
             CNY：{{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}
-            <span class="f12 text-grey-6">起</span>
+            <span class="f12 text-grey-6">{{$t('v103.details.since')}}</span>
           </div>
-          <div v-else class="text-subtitle1 text-grey-6">暫無報價</div>
+          <div v-else class="text-subtitle1 text-grey-6">{{$t('v103.details.nooffer')}}</div>
           <q-btn
             color="primary"
-            label="選擇方案"
+            :label="$t('v103.details.selectionscheme')"
             unelevated
             @click="goScrollHandler(priceListHeight)"
             :class="{'q-mt-md full-width':$q.platform.is.desktop}"
@@ -132,9 +132,9 @@
     </div>
     <div v-if="dataList" class="q-pa-lg q-mt-lg text-grey-9" ref="pricelistref">
       <div style="max-width: 1200px; margin-left: auto; margin-right: auto">
-        <div class="text-h6">選擇方案</div>
+        <div class="text-h6">{{$t('v103.details.selectionscheme')}}</div>
         <div class="rounded-borders bg-white q-pa-md q-mt-md" v-if="$q.platform.is.mobile">
-          <q-field class="q-my-md" stack-label label="選擇日期、選項" standout dense>
+          <q-field class="q-my-md" stack-label :label="$t('v103.details.selectdate')" standout dense>
             <div class="self-center full-width no-outline" tabindex="0">{{currentPrice.startDate}}</div>
             <q-popup-proxy ref="qDateProxy">
               <calendar class="bg-white q-pa-md"
@@ -156,8 +156,8 @@
           <div class="q-pa-md row">
             <div class="col">
               <div class="text-subtitle1 text-weight-bold row items-center"  v-if="$q.platform.is.desktop">
-                <span class="q-mr-md">行程標準出行方案</span>
-                <q-chip square color="orange" size="sm" text-color="grey-2" class="text-light" label="15天前可免費取消" />
+                <span class="q-mr-md">{{$t('v103.details.travelplan')}}</span>
+                <q-chip square color="orange" size="sm" text-color="grey-2" class="text-light" :label="$t('v103.details.headerlabel.d4')" />
               </div>
               <div class="text-grey f12">
                 <ul class="q-pl-md no-margin">
@@ -170,16 +170,16 @@
             <div class="" v-if="$q.platform.is.desktop">
               <div class="row items-center">
                 <span class="product-price text-h6 q-mr-md">CNY {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span>
-                <q-btn color="primary" outline :label="showOrderPreview ? '取消選擇' : '選擇'" @click="showOrderPreview = !showOrderPreview" class="q-px-lg" />
+                <q-btn color="primary" outline :label="showOrderPreview ? $t('v103.details.deselect') : $t('v103.details.choose')" @click="showOrderPreview = !showOrderPreview" class="q-px-lg" />
               </div>
-              <div class="text-info q-mt-md text-right">最早可預訂日期：{{ dataList.priceList[0].startDate }}</div>
+              <div class="text-info q-mt-md text-right">{{$t('v103.details.earliest')}}：{{ dataList.priceList[0].startDate }}</div>
             </div>
           </div>
           <div class="q-pa-md" style="border-top: 1px solid #eee" v-if="showOrderPreview">
             <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
-              <div class="text-subtitle2 text-weight-bold q-mr-xl">關於此方案</div>
-              <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconcancel" label="15天前可免費取消" />
-              <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconroundcheck" label="6個工作日內（不含例休假）確認" />
+              <div class="text-subtitle2 text-weight-bold q-mr-xl">{{$t('v103.details.thisscheme')}}</div>
+              <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconcancel" :label="$t('v103.details.headerlabel.d4')" />
+              <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconroundcheck" :label="$t('v103.details.confirmationtime')" />
             </div>
             <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
               <div class="col">
@@ -218,10 +218,10 @@
         </div>
       </div>
       <div :class="{'col-8':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
-        <div class="text-h5 text-weight-bold text-left" id="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">行程特色</div>
+        <div class="text-h5 text-weight-bold text-left" id="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.details.righttitle.d1')}}</div>
         <div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.featureContent" v-if="dataList.feature.featureContent != ''" :class="{'q-px-md':$q.platform.is.mobile}"></div>
         <div class="q-mt-md q-pb-xl" id="setZoom" ref="diyContext" :style="{ zoom: zoomDiyContext }" v-html="dataList.feature.featureHtml" v-if="dataList.feature.featureHtml != ''"></div>
-        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="product" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">行程介紹</div>
+        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="product" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.details.righttitle.d2')}}</div>
         <div class="q-pb-xl">
           <smaple :trip="dataList" :class="{'q-px-md':$q.platform.is.mobile}"></smaple>
           <template v-if="dataList.dayList.length<=3">
@@ -231,27 +231,24 @@
             <block :currentHeightDay="currentHeight" :days="days" :tripList="dayList" :isDirect="isDirect" :clickDate="clickDate"></block>
           </template>
         </div>
-        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="price" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">費用說明</div>
-        <div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md':$q.platform.is.mobile}">費用包含</div>
+        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="price" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.details.righttitle.d3')}}</div>
+        <div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md':$q.platform.is.mobile}">{{$t('v103.details.righttitle.d31')}}</div>
         <div class="q-mt-md trip-text" v-html="dataList.feature.feeInclude" :class="{'q-px-md':$q.platform.is.mobile}"></div>
-        <div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md':$q.platform.is.mobile}">費用不含</div>
+        <div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md':$q.platform.is.mobile}">{{$t('v103.details.righttitle.d32')}}</div>
         <div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.feeNonInclude" :class="{'q-px-md':$q.platform.is.mobile}"></div>
-        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="warning" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">購買須知</div>
+        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="warning" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.details.righttitle.d4')}}</div>
         <div class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl" style="border: 1px dashed var(--q-color-warning)" v-html="dataList.feature.importantTip" :class="{'q-mx-md':$q.platform.is.mobile}"></div>
-        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="tips" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">溫馨提示</div>
+        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="tips" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.details.righttitle.d5')}}</div>
         <div class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl" style="border: 1px dashed var(--q-color-info)" v-html="dataList.feature.warmTip" :class="{'q-px-md':$q.platform.is.mobile}"></div>
-        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="cancelTips" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">取消政策</div>
+        <div class="text-h5 text-weight-bold text-left q-mt-xl" id="cancelTips" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.details.righttitle.d6')}}</div>
         <div class="q-mt-lg trip-text q-mb-xl" :class="{'q-px-md':$q.platform.is.mobile}">
           <ul class="no-padding text-grey-9 q-ml-md">
-            <li>所选日期 15 天（含）之前取消，收取手续费 0%</li>
-            <li class="q-mt-sm">所选日期 8 ~ 14 天之间取消，收取手续费 30%</li>
-            <li class="q-mt-sm">所选日期 4 ~ 7 天之间取消，收取手续费 50%</li>
-            <li class="q-mt-sm">所选日期 1 ~ 3 天之间取消，收取手续费 80%</li>
-            <li class="q-mt-sm">所选日期 0 ~ 0 天之间取消，收取手续费 100%</li>
+            <li v-for="(x,index) in 5"
+            :class="{'q-mt-sm':index!=0}">{{$t(`v103.details.righttitle.d${index+7}`)}}</li>
           </ul>
           <div class="q-mt-lg f12 text-grey-6">
             <q-icon name="iconfont icontishi" class="q-mr-sm" />
-            <span>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需 2-5 个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14 个工作天内退款。</span>
+            <span>{{$t('v103.details.righttitle.d12')}}</span>
           </div>
         </div>
       </div>
@@ -320,7 +317,7 @@ export default defineComponent({
     let { ctx: that, proxy } = getCurrentInstance()
     
     const data = reactive({
-      tab: '行程特色',
+      tab: t('v103.details.righttitle.d1'),
       searchDate:'',
       clickDate: '',
       scrollareaobj: null,
@@ -357,7 +354,11 @@ export default defineComponent({
         slidesToScroll: 1,
         loop: true
       },
-      warnBuy: ['未满 2 岁幼儿不占位可免费参加（不含座位，餐点，门票，床位），请先于下订时在「备注栏」告知。', '如需要單人房，請購買單房', '不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買成人價', '12歲以上皆視同成人售價'],
+      warnBuy: [
+        t('v103.details.warnbuytext.d1'), 
+        t('v103.details.warnbuytext.d2'), 
+        t('v103.details.warnbuytext.d3'), 
+        t('v103.details.warnbuytext.d4')],
       showOrderPreview: false,
       videoPosition: 0,
       currentHeight: 0,
@@ -368,37 +369,37 @@ export default defineComponent({
           val: 'feature',
           top: 0,
           isActive: false,
-          display: '行程特色'
+          display: t('v103.details.righttitle.d1')
         },
         {
           val: 'product',
           top: 0,
           isActive: false,
-          display: '產品介紹'
+          display: t('v103.details.righttitle.d2')
         },
         {
           val: 'price',
           top: 0,
           isActive: false,
-          display: '費用說明'
+          display: t('v103.details.righttitle.d3')
         },
         {
           val: 'warning',
           top: 0,
           isActive: false,
-          display: '購買須知'
+          display: t('v103.details.righttitle.d4')
         },
         {
           val: 'tips',
           top: 0,
           isActive: false,
-          display: '溫馨提示'
+          display: t('v103.details.righttitle.d5')
         },
         {
           val: 'cancelTips',
           top: 0,
           isActive: false,
-          display: '取消政策'
+          display: t('v103.details.righttitle.d6')
         }
       ],
       priceListHeight: 0,