📝 【TASK-20240819-02】TASK:积分活动，多语言

积分活动详情添加，多语言中文增加

src/api/integral.js

@@ -26,3 +26,22 @@ export function integralActivityList(data) {
     data
   })
 }
+
+// 获取会员信息
+export function getMemberInfo(data) {
+  return request({
+    url: `/app-api/member/user-score/info?id=${data.id}`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取活动详情
+export function integralActivityDetail(data) {
+  return request({
+    url: '/app-api/member/score-rule/get',
+    method: 'post',
+    data
+  })
+}
+

src/views/jiedao/profile/components/IntegralExchange.vue

 <template>
   <div class="integral-exchange">
     <div class="header">
-      <div class="text">选择兑换网点</div>
-      <div class="red">不同网点兑换积分不同</div>
+      <div class="text">{{ $t('integral.pointsTitle') }}</div>
+      <div class="red">{{ $t('integral.pointsRemark') }}</div>
     </div>
     <div class="content">
       <!-- <div class="content-text">1、2、3</div>
@@ -16,7 +16,7 @@
         class="cascader"
         :options="nodeList"
         clearable
-        placeholder="请选择网点"
+        :placeholder="$t('integral.outlets')"
       />
     </div>
     <div class="list">
@@ -29,7 +29,7 @@
               <div class="tag-text">{{ item.pointsRequire }}</div>
             </div>
           </div>
-          <div class="foot-tag">{{ item.quantityRemain }}</div>
+          <div class="foot-tag">{{ $t('integral.remainder',{value:item.quantityRemain}) }}</div>
         </div>
         <div class="item-text">{{ language == 'zh_CN' ? item.titleZh : item.titleEn }}</div>
         <div class="item-menu">

src/views/jiedao/profile/detailsActivity.vue

 <template>
-  <div class="app-container">details activity</div>
+  <div class="container">
+    <div class="activity-title">{{
+      locale === 'zh' ? detailInfo.titleZh : detailInfo.titleEn
+    }}</div>
+    <div class="img-box">
+      <img
+        class="img"
+        :src="locale === 'zh' ? detailInfo.coverImageZh : detailInfo.coverImageEn"
+      >
+    </div>
+    <div class="container-main">
+      <div v-if="detailInfo.extraRecommend" class="activity-remark">
+        {{
+          locale === 'zh'
+            ? detailInfo.extraRecommend.shareContentZh
+            : detailInfo.extraRecommend.shareContentEn
+        }}
+      </div>
+      <div class="activity-cell">
+        <div class="cell-label">{{ $t('integral.illustrate') }}</div>
+        <div class="cell-content">
+          <img class="cell-image" src="@/assets/integral/score_b.png">
+          <div class="cell-text">{{ detailInfo.getScoreOnce }}</div>
+        </div>
+      </div>
+      <div class="activity-cell">
+        <div class="cell-label">{{ $t('integral.maxIntegral') }}</div>
+        <div class="cell-content">
+          <img class="cell-image" src="@/assets/integral/score_b.png">
+          <div class="cell-text">{{ detailInfo.maxScoreTotal }}</div>
+        </div>
+      </div>
+      <div class="activity-cell">
+        <div class="cell-label">{{ $t('integral.date') }}</div>
+        <div class="cell-content">
+          {{ getTimeRange(detailInfo.startTime, detailInfo.endTime) }}
+        </div>
+      </div>
+      <div class="activity-cell">
+        <div class="cell-label">{{ $t('integral.rulesIllustrate') }}</div>
+        <div class="cell-content">
+          {{ locale === 'zh' ? detailInfo.descZh : detailInfo.descEn }}
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import { integralActivityDetail } from '@/api/integral'
+export default {
+  data() {
+    return {
+      detailInfo: {}
+    }
+  },
+  computed: {
+    locale() {
+      return this.$store.getters.language
+    }
+  },
+  created() {
+    this.getDetail()
+  },
+  methods: {
+    // 获取详情
+    async getDetail() {
+      try {
+        const { code, data } = await integralActivityDetail({
+          id: this.$route.query.id
+        })
+        if (code !== 0) return
+        this.detailInfo = data
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    // 时间范围返回
+    getTimeRange(start, end) {
+      const formatDate = (timestamp) => {
+        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}`
+      }
+      return `${formatDate(start)}至${formatDate(end)}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 10px;
+}
+.img-box {
+  margin: 10px 0;
+  width: 320px;
+  height: 180px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.container-main {
+  padding: 6px;
+}
+.activity-title {
+  font-size: 28px;
+  height: 42px;
+  display: flex;
+  font-weight: 700;
+  align-items: center;
+  color: #333;
+}
+.activity-remark {
+  font-size: 16px;
+  color: #333;
+}
+.activity-cell {
+  margin-top: 10px;
+  width: 100%;
+  display: flex;
+  font-size: 16px;
+  color: #333;
+}
+.cell-content {
+  max-width: 60%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.cell-image {
+  width: 12px;
+  height: 12px;
+}
+.cell-text {
+  margin-left: 4px;
+  font-weight: 600;
+  font-size: 16px;
+  color: #000;
+}
+.cell-label {
+  font-weight: 700;
+  margin-right: 10px;
+  &::after {
+    content: ':';
+  }
+}
+</style>

src/views/jiedao/profile/integral.vue

@@ -8,27 +8,28 @@
             <img class="imgs" src="@/assets/integral/vip_avatar.png" alt="">
           </div>
           <div class="content-text">
-            <div class="text-vip">尊贵的白金会员</div>
-            <div class="text-integral">已兑换积分为100&ensp;可用积分为80</div>
+            <div class="text-vip">{{ $t('integral.headerTitle') }}{{ integralInfo.levelName }}</div>
+            <div class="text-integral">{{ $t('integral.spend') }}{{ integralInfo.holdScore }}&ensp;{{ $t('integral.available') }}{{ integralInfo.usedScore }}</div>
           </div>
           <div class="content-image">
-            <img class="imgs" src="@/assets/integral/vip_avatar.png" alt="">
+            <img v-if="levelIcon" class="imgs" :src="levelIcon" alt="">
+            <img v-else class="imgs" src="@/assets/integral/vip_avatar.png" alt="">
           </div>
         </div>
         <div class="content-divider">
-          <div class="divider-vip">vip1</div>
-          <div class="divider-num">233</div>
-          <div class="divider-active" style="width: 50%;" />
+          <div class="divider-vip">{{ integralInfo.levelName }}</div>
+          <div class="divider-num">{{ integralInfo.totalScore }}</div>
+          <div class="divider-active" :style="{ width: `${score}%` }" />
         </div>
       </div>
       <div class="header-menu">
-        <div class="menu-item" @click="toJump(1)">积分日志&emsp;<i class="el-icon-arrow-right" /></div>
-        <div class="menu-item" @click="toJump(2)">兑换日志&emsp;<i class="el-icon-arrow-right" /></div>
+        <div class="menu-item" @click="toJump(1)">{{ $t('integral.logPoints') }}&emsp;<i class="el-icon-arrow-right" /></div>
+        <div class="menu-item" @click="toJump(2)">{{ $t('integral.logExchange') }}&emsp;<i class="el-icon-arrow-right" /></div>
       </div>
     </div>
     <div class="nav">
-      <div class="nav-item" :class="{'nav-item-active1':count ==1}" @click="count=1">兑换礼品</div>
-      <div class="nav-item" :class="{'nav-item-active2':count ==2}" @click="count=2">积分活动</div>
+      <div class="nav-item" :class="{'nav-item-active1':count ==1}" @click="count=1">{{ $t('integral.redeemGifts') }}</div>
+      <div class="nav-item" :class="{'nav-item-active2':count ==2}" @click="count=2">{{ $t('integral.pointsCampaign') }}</div>
     </div>
     <IntegralExchange v-show="count == 1" />
     <IntegralActivity v-show="count == 2 " />
@@ -37,6 +38,7 @@
 <script>
 import IntegralExchange from './components/IntegralExchange.vue'
 import IntegralActivity from './components/IntegralActivity.vue'
+import { getMemberInfo } from '@/api/integral'
 export default {
   name: 'JdIntegral',
   components: {
@@ -45,17 +47,49 @@ export default {
   },
   data() {
     return {
-      count: 1
+      count: 1,
+      // 会员积分信息
+      integralInfo: {},
+      // 会员图标
+      levelIcon: ''
+    }
+  },
+  computed: {
+    score() {
+      if (this.integralInfo.totalScore) {
+        return Math.min(
+          Math.floor((this.integralInfo.totalScore / this.integralInfo.upperCount) * 100),
+          100
+        )
+      }
+      return 0
     }
   },
   created() {
-
+    this.getIntegralInfo()
+    const { loginUser } = this.$store.state.user
+    if (loginUser) {
+      const userScoreLevelInfo = loginUser.userScoreLevelInfo
+      this.levelIcon = userScoreLevelInfo.levelIcon
+      console.log(this.levelIcon)
+    }
   },
   methods: {
     // 跳转 日志
     toJump(val) {
       const path = val === 1 ? '/jiedao/jd-integral-log' : '/jiedao/jd-exchange-log'
       this.$router.push({ path })
+    },
+    // 获取个人积分信息
+    async getIntegralInfo() {
+      try {
+        const id = this.$store.getters.id
+        const { code, data } = await getMemberInfo({ id })
+        if (code !== 0) return
+        this.integralInfo = data
+      } catch (err) {
+        console.log(err)
+      }
     }
   }
 }