📝 【TASK-20240819-03】TASK:兑换日志列表页

增加log.js文件存放日志类相关api

src/api/log.js

+import request from '@/utils/request'
+
+// 获取兑换日志列表
+export function logList(data) {
+  return request({
+    url: '/app-api/member/user-score/log',
+    method: 'post',
+    data
+  })
+}

src/views/jiedao/profile/integralLog.vue

-<template><div class="container">积分日志</div></template>
+<template>
+  <div class="container">
+    <div v-for="(item, index) in list" :key="index" class="item">
+      <div class="item-title">{{ locale == 'zh_CN' ? item.sourceTypeZh : item.sourceTypeEn }}</div>
+      <div class="item-box">
+        <div class="box-img">
+          <img
+            class="imgs"
+            :src="imgArr[item.sourceType]"
+          >
+        </div>
+        <div class="box-content">
+          <div class="content-text">
+            {{ locale == 'zh_CN' ? item.descZh : item.descEn }}
+          </div>
+          <div class="content-time">{{ formatDate(item.createTime) }}</div>
+        </div>
+        <div class="box-right">
+          <div v-if="item.rewardCount" class="box-right-num">X{{ item.rewardCount }}</div>
+          <div v-if="item.expired" class="box-right-img">
+            <img class="imgs" src="@/assets/log/overdue.png" alt>
+          </div>
+          <div class="box-right-text">{{ item.operateType }}&ensp;{{ item.scoreCount }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { logList } from '@/api/log'
+export default {
+  data() {
+    return {
+      list: []
+    }
+  },
+  computed: {
+    locale() {
+      return this.$store.getters.language
+    },
+    imgArr() {
+      return {
+        '1': require('@/assets/log/log_type1.png'),
+        '2': require('@/assets/log/log_type2.png'),
+        '4': require('@/assets/log/log_type4.png'),
+        '5': require('@/assets/log/log_type5.png'),
+        '6': require('@/assets/log/log_type6.png'),
+        '7': require('@/assets/log/log_type7.png'),
+        '8': require('@/assets/log/log_type8.png')
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        const id = this.$store.getters.id
+        const { code, data } = await logList({ id })
+        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
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 10px;
+  box-sizing: border-box;
+  .item {
+    padding: 10px 15px 15px 15px;
+    margin-bottom: 10px;
+    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: 12px;
+  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: 12px;
+    color: #7f7f7f;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+  }
+  .content-time {
+    font-size: 10px;
+    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-text {
+    margin-top: auto;
+  }
+}
+.box-right-img {
+  transform: translate(10px, -30px);
+  width: 60px;
+  height: 60px;
+  .imgs {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>