Merge branch 'feature' of http://110.41.143.128:8081/lanbaoming/jiedao-web-master into feature

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/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/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)
+      }
     }
   }
 }

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>