📝 【TASK-20240820-01】TASK:兑换日志

兑换日志页完善，多语言增加log字段

src/api/log.js

 import request from '@/utils/request'
 
-// 获取兑换日志列表
+// 获取积分日志列表
 export function logList(data) {
   return request({
     url: '/app-api/member/user-score/log',
@@ -8,3 +8,21 @@ export function logList(data) {
     data
   })
 }
+
+// 获取兑换日志列表 礼品
+export function exchangeLogList(data) {
+  return request({
+    url: '/app-api/reward/redeem/record/list',
+    method: 'post',
+    data
+  })
+}
+
+// 获取礼品详情
+export function exchangeLogDetail(data) {
+  return request({
+    url: '/app-api/reward/redeem/record/detail',
+    method: 'post',
+    data
+  })
+}

src/lang/zh.js

@@ -1113,5 +1113,8 @@ export default {
     maxIntegral: '累计最高积分',
     date: '有效期',
     rulesIllustrate: '规则说明'
+  },
+  log: {
+    redeemGifts: '礼品兑换'
   }
 }

src/views/jiedao/profile/exchangeLog.vue

-<template><div class="container">兑换日志</div></template>
+<template>
+  <div class="container">
+    <div v-for="item in list" :key="item.id" class="item" @click="toDetail(item.id)">
+      <div class="item-title">{{ $t('log.redeemGifts') }}</div>
+      <div class="item-box">
+        <div class="box-img">
+          <img
+            class="imgs"
+            :src="locale === 'zh_CN' ? item.imgZh : item.imgEn"
+          >
+        </div>
+        <div class="box-content">
+          <div class="content-text">
+            {{ locale === 'zh_CN' ? item.rewardTitleZh : item.rewardTitleEn }}
+          </div>
+          <div class="content-time">{{ formatDate(item.createTime) }}</div>
+        </div>
+        <div class="box-right">
+          <div class="box-right-num">X{{ item.rewardCount }}</div>
+          <div class="box-right-text">-{{ item.scoreCount }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { exchangeLogList } from '@/api/log'
+export default {
+  data() {
+    return {
+      list: []
+    }
+  },
+  computed: {
+    locale() {
+      return this.$store.getters.language
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        const memberId = this.$store.getters.id
+        const { code, data } = await exchangeLogList({ memberId })
+        if (code === 0) {
+          this.list = data
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    // 时间戳转换为YYYY-MM-DD HH:mm:ss
+    formatDate(time) {
+      const date = new Date(time)
+      const Y = date.getFullYear() + '-'
+      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
+      const D = date.getDate() + ' '
+      const h = date.getHours() + ':'
+      const m = date.getMinutes() + ':'
+      const s = date.getSeconds()
+      return Y + M + D + h + m + s
+    },
+    // 跳转详情
+    toDetail(id) {
+      this.$router.push({ path: `/jiedao/jd-exchange-details`, query: { id }})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 10px;
+  box-sizing: border-box;
+  .item {
+    padding: 10px 15px 15px 15px;
+    margin-bottom: 15px;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 8px;
+    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+.item-title {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+.item-box {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+}
+.box-img {
+  width: 50px;
+  height: 60px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .imgs {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+  }
+}
+.box-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .content-text {
+    font-size: 14px;
+    color: #7f7f7f;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+  }
+  .content-time {
+    font-size: 12px;
+    color: #7f7f7f;
+  }
+}
+.box-right {
+  margin-left: 5px;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 50%;
+  font-size: 12px;
+  color: #333333;
+}
+.box-right-img {
+  transform: translate(10px, -30px);
+  width: 60upx;
+  height: 60upx;
+}
+</style>

src/views/jiedao/profile/integralLog.vue

@@ -95,7 +95,8 @@ export default {
   }
 }
 .item-title {
-  font-size: 12px;
+  font-size: 14px;
+  font-weight: 500;
   margin-bottom: 10px;
 }
 .item-box {
@@ -122,7 +123,7 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   .content-text {
-    font-size: 12px;
+    font-size: 14px;
     color: #7f7f7f;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -131,7 +132,7 @@ export default {
     overflow: hidden;
   }
   .content-time {
-    font-size: 10px;
+    font-size: 12px;
     color: #7f7f7f;
   }
 }