📝 【TASK-20240820-04】TASK:礼品详情

src/lang/zh.js

@@ -1115,6 +1115,18 @@ export default {
     rulesIllustrate: '规则说明'
   },
   log: {
-    redeemGifts: '礼品兑换'
+    total: '共计',
+    integral: '积分',
+    num: '共{value}件',
+    redeemGifts: '礼品兑换',
+    activityTime: '活动时间',
+    exchangeOutlets: '兑换网点',
+    exchangeType: '兑换方式',
+    address: '收货地址',
+    courierNum: '快递单号',
+    courierCompany: '快递公司',
+    courierTime: '快递日期',
+    remark: '备注',
+    errorMsg: '地址提交后无法修改，如需修改地址请联系客服'
   }
 }

src/views/jiedao/profile/detailsActivity.vue

 <template>
   <div class="container">
     <div class="activity-title">{{
-      locale === 'zh' ? detailInfo.titleZh : detailInfo.titleEn
+      locale === 'zh_CN' ? detailInfo.titleZh : detailInfo.titleEn
     }}</div>
     <div class="img-box">
       <img
         class="img"
-        :src="locale === 'zh' ? detailInfo.coverImageZh : detailInfo.coverImageEn"
+        :src="locale === 'zh_CN' ? detailInfo.coverImageZh : detailInfo.coverImageEn"
       >
     </div>
     <div class="container-main">
       <div v-if="detailInfo.extraRecommend" class="activity-remark">
         {{
-          locale === 'zh'
+          locale === 'zh_CN'
             ? detailInfo.extraRecommend.shareContentZh
             : detailInfo.extraRecommend.shareContentEn
         }}
@@ -40,7 +40,7 @@
       <div class="activity-cell">
         <div class="cell-label">{{ $t('integral.rulesIllustrate') }}</div>
         <div class="cell-content">
-          {{ locale === 'zh' ? detailInfo.descZh : detailInfo.descEn }}
+          {{ locale === 'zh_CN' ? detailInfo.descZh : detailInfo.descEn }}
         </div>
       </div>
     </div>

src/views/jiedao/profile/exchangeDetails.vue

 <template>
-  <div class="app-container">兑换详情</div>
+  <div class="container">
+    <div class="header">
+      <div class="header-image">
+        <img class="imgs" src="@/assets/log/exchange.png">
+      </div>
+      <div class="header-content">
+        <div class="header-content-title">
+          {{ locale === 'zh_CN' ? detailInfo.statusZh : detailInfo.statusEn }}
+        </div>
+        <div class="header-content-text">
+          <div class="header-content-small">{{ $t('log.total') }}</div>{{ detailInfo.totalCount }}{{ $t('log.integral') }}
+        </div>
+      </div>
+    </div>
+    <div class="nav">
+      <div class="nav-image">
+        <img class="imgs" :src="locale === 'zh_CN' ? detailInfo.imgZh : detailInfo.imgEn">
+      </div>
+      <div class="nav-content">
+        <div class="nav-content-text">
+          {{ locale === 'zh_CN' ? detailInfo.rewardTitleZh : detailInfo.rewardTitleEn }}
+        </div>
+        <div class="nav-content-tag">
+          <div class="tag-image">
+            <img class="img" src="@/assets/integral/score_b.png">{{ detailInfo.oncePointsRequire }}
+          </div>
+          <div class="tag-text">
+            {{ $t('log.num',{value : detailInfo.rewardCount}) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main">
+      <div class="main-cell">
+        <div class="cell-label">{{ $t('log.activityTime') }}</div>
+        <div class="cell-content">
+          {{ getTimeRange(detailInfo.startTime, detailInfo.endTime) }}
+        </div>
+      </div>
+      <div class="main-cell">
+        <div class="cell-label">{{ $t('log.exchangeOutlets') }}</div>
+        <div class="cell-content">
+          {{ locale === 'zh_CN' ? detailInfo.nodeTitleZh : detailInfo.nodeTitleEn }}
+        </div>
+      </div>
+      <div class="main-cell">
+        <div class="cell-label">{{ $t('log.exchangeType') }}</div>
+        <div class="cell-content">
+          {{ locale === 'zh_CN' ? detailInfo.redeemTypeZh : detailInfo.redeemTypeEn }}
+        </div>
+      </div>
+      <template v-if="detailInfo.redeemType != 1">
+        <div class="main-cell">
+          <div class="cell-label">{{ $t('log.address') }}</div>
+          <div class="cell-content">
+            {{ detailInfo.recipientName }}&ensp;+{{ detailInfo.recipientPhoneNum }},
+            {{ detailInfo.recipientAddress }}
+            <div class="red">{{ $t('log.errorMsg') }}</div>
+          </div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">{{ $t('log.courierNum') }}</div>
+          <div class="cell-content">{{ detailInfo.expressNo }}</div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">{{ $t('log.courierCompany') }}</div>
+          <div class="cell-content">{{ detailInfo.courierCompanyName }}</div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">{{ $t('log.courierTime') }}</div>
+          <div class="cell-content">{{ formatDate(detailInfo.expressDate) }}</div>
+        </div>
+      </template>
+      <div class="main-cell">
+        <div class="cell-label">{{ $t('log.remark') }}</div>
+        <div class="cell-content">{{ detailInfo.remark }}</div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import { exchangeLogDetail } from '@/api/log'
+export default {
+  data() {
+    return {
+      detailInfo: {}
+    }
+  },
+  computed: {
+    locale() {
+      return this.$store.getters.language
+    }
+  },
+  created() {
+    this.getDetail()
+  },
+  methods: {
+    // 获取详情
+    async getDetail() {
+      try {
+        const { code, data } = await exchangeLogDetail({
+          redeemId: this.$route.query.id
+        })
+        if (code !== 0) return
+        this.detailInfo = data
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    // 时间范围返回
+    getTimeRange(start, end) {
+      return `${this.formatDate(start)}至${this.formatDate(end)}`
+    },
+    // 时间戳转换为YYYY-MM-DD HH:mm:ss
+    formatDate(timestamp) {
+      if (!timestamp) return ''
+      const date = new Date(timestamp)
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}:${month}:${day} ${hours}:${minutes}:${seconds}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  box-sizing: border-box;
+  .header-image {
+    width: 50px;
+    height: 50px;
+    .imgs {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .header-content {
+    margin-left: 10px;
+    display: flex;
+    height: inherit;
+    flex-direction: column;
+    justify-content: space-between;
+    .header-content-title {
+      font-size: 16px;
+      color: #333;
+    }
+    .header-content-text {
+      display: flex;
+      align-items: end;
+      font-size: 14px;
+      color: #666;
+
+      .header-content-small {
+        margin-right: 5px;
+        font-size: 14px;
+        color: #999;
+      }
+    }
+  }
+}
+.nav {
+  margin-top: 30px;
+  width: 100%;
+  display: flex;
+  .nav-image {
+    width: 90px;
+    height: 90px;
+    .imgs {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .nav-content {
+    flex: 1;
+    margin-left: 10px;
+    display: flex;
+    height: inherit;
+    flex-direction: column;
+    .nav-content-text {
+      width: 70%;
+      font-size: 16px;
+      color: #333;
+    }
+    .nav-content-tag {
+      margin-top: auto;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      .tag-image {
+        display: flex;
+        align-items: center;
+        .img {
+          width: 16px;
+          height: 16px;
+          object-fit: cover;
+        }
+      }
+      .tag-text {
+        font-size: 16px;
+        color: #333;
+        margin-left: 200px;
+      }
+    }
+  }
+}
+.main {
+  margin-top: 30px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .main-cell {
+    margin-top: 10px;
+    width: 100%;
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    .cell-label {
+      font-size: 14px;
+      color: #333;
+      font-weight: 700;
+      margin-right: 10px;
+      &::after {
+        content: ':';
+      }
+    }
+    .cell-content {
+      flex: 1;
+      font-size: 14px;
+      color: #333;
+      .red {
+        color: red;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>