📝 【TASK-20240812-04】TASK:积分接口联调

src/pages/integral/components/gift.vue

@@ -4,11 +4,11 @@
     <view class="gift-select">
       <view class="select-list">
         <view class="list-item"
-          >中国
+          >{{ locale == 'zh' ? userInfo.countryTitleZh : userInfo.countryTitleEn }}
           <uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
         </view>
         <view class="list-item"
-          >大连
+          >{{ locale == 'zh' ? userInfo.cityTitleZh : userInfo.cityTitleEn }}
           <uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
         </view>
       </view>
@@ -42,9 +42,20 @@
 
 <script>
 export default {
+  props: {
+    userInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
   data() {
     return {}
   },
+  computed: {
+    locale() {
+      return this.$lang.locale == 'zh' ? 'zh' : 'en'
+    }
+  },
   methods: {
     toMail() {
       uni.navigateTo({

src/pages/integral/integral.vue

@@ -7,19 +7,21 @@
           <image src="../../static/img/vip_avatar.png" mode=""></image>
         </view>
         <view class="content">
-          <view class="content-title">{{ $lang.lang.integral.headerTitle }}白金会员</view>
+          <view class="content-title"
+            >{{ $lang.lang.integral.headerTitle }}{{ levelInfo.levelName }}</view
+          >
           <view class="content-text">
-            <view class="text">{{ $lang.lang.integral.spend }} 100</view>
-            <view class="text">{{ $lang.lang.integral.available }} 88</view>
+            <view class="text">{{ $lang.lang.integral.spend }} {{ levelInfo.holdScore }}</view>
+            <view class="text">{{ $lang.lang.integral.available }} {{ levelInfo.usedScore }}</view>
           </view>
           <view class="divider">
-            <view class="divider-active"></view>
-            <view class="divider-unm">238</view>
-            <view class="divider-level">VIP2</view>
+            <view class="divider-active" :style="{ width: `${score}%` }"></view>
+            <view class="divider-unm">{{ levelInfo.totalScore }}</view>
+            <view class="divider-level">{{ levelInfo.levelName }}</view>
           </view>
         </view>
         <view class="classification">
-          <image class="classification-image" src="../../static/img/vip_2.png"></image>
+          <image class="classification-image" :src="levelIcon"></image>
           <view class="log-menu">
             <view class="menu-item" @click="toLog(0)">积分日志 &gt;</view>
             <view class="menu-item" @click="toLog(1)">兑换日志 &gt;</view>
@@ -36,7 +38,7 @@
           >
         </view>
         <view class="main-content">
-          <gift v-if="navIndex === 0"></gift>
+          <gift v-if="navIndex === 0" :userInfo="userInfo"></gift>
           <points v-if="navIndex === 1"></points>
         </view>
       </view>
@@ -56,13 +58,56 @@ export default {
   },
   data() {
     return {
-      navIndex: 0
+      navIndex: 0,
+      // 会员信息
+      levelInfo: {},
+      // 会员图标
+      levelIcon: '',
+      userInfo: {}
+    }
+  },
+  computed: {
+    score() {
+      if (this.levelInfo.totalScore) {
+        return Math.min(
+          Math.floor((this.levelInfo.totalScore / this.levelInfo.upperCount) * 100),
+          100
+        )
+      }
+      return 0
     }
   },
+  created() {
+    this.getUserInfo()
+  },
   methods: {
     toLog(val) {
       const url = val === 1 ? '/pages/log/exchange' : '/pages/log/integral'
       uni.navigateTo({ url })
+    },
+    // 获取个人信息
+    async getUserInfo() {
+      try {
+        const { code, data } = await this.$request.get('/app-api/member/user/get')
+        if (code === 0 && data) {
+          const { userScoreLevelInfo, ...args } = data
+          this.userInfo = args
+          this.levelIcon = userScoreLevelInfo.levelIcon
+          this.getMemberScore(this.$store.getters.id)
+        }
+      } catch (err) {}
+    },
+    // 获取会员积分信息
+    async getMemberScore(id) {
+      try {
+        const { code, data } = await this.$request.post(
+          `/app-api/member/user-score/info?id=${id}`,
+          { id }
+        )
+        if (code === 0 && data) {
+          this.levelInfo = data
+        }
+      } catch (err) {}
     }
   }
 }

src/pages/log/integral.vue

@@ -2,8 +2,8 @@
   <view>
     <dHeader :title="'积分日志'"></dHeader>
     <view class="container">
-      <view class="item" v-for="item in 6" :key="item">
-        <div class="item-title">订单V值</div>
+      <view class="item" v-for="(item, index) in list" :key="index">
+        <div class="item-title">{{ locale == 'zh' ? item.sourceTypeZh : item.sourceTypeEn }}</div>
         <div class="item-box">
           <div class="box-img">
             <image
@@ -15,14 +15,14 @@
             <div class="content-text">
               购买/充值满1000元即可赠送50积 分，满2000元送80积分不可看加满2000元送80积分
             </div>
-            <div class="content-time">2024-01-01 11:11:11</div>
+            <div class="content-time">{{ formatDate(item.createTime) }}</div>
           </div>
           <div class="box-right">
             <view class="box-right-num" v-if="item == 2">X1</view>
             <view class="box-right-img" v-else>
               <image src="../../static/img/overdue.png"></image>
             </view>
-            <view class="box-right-text">+50</view>
+            <view class="box-right-text">{{ item.operateType }}&ensp;{{ item.scoreCount }}</view>
           </div>
         </div>
       </view>
@@ -35,6 +35,43 @@ import dHeader from '../../components/dHeader/index.vue'
 export default {
   components: {
     dHeader
+  },
+  data() {
+    return {
+      list: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  computed: {
+    locale() {
+      return this.$lang.locale
+    }
+  },
+  methods: {
+    // 获取列表
+    async getList() {
+      try {
+        const { code, data } = await this.$request.post('/app-api/member/user-score/log', {
+          id: 68
+        })
+        if (code == 0 && data) {
+          this.list = data
+        }
+      } catch (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>