📝 【TASK-20240819-01】TASK:

src/api/integral.js

+import request from '@/utils/request'
+
+// 获取礼品列表
+export function integralList(data) {
+  return request({
+    url: '/app-api/ecw/reward/list',
+    method: 'post',
+    data
+  })
+}
+
+// 获取网点列表
+export function getBranchList(params) {
+  return request({
+    url: '/admin-api/ecw/node/get-node-tree-region',
+    method: 'get',
+    params
+  })
+}
+
+// 获取积分活动列表
+export function integralActivityList(data) {
+  return request({
+    url: '/app-api/member/score-rule/list',
+    method: 'post',
+    data
+  })
+}

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

+<template>
+  <div class="int">
+    <div
+      v-for="item in list"
+      :key="item.id"
+      class="int-content"
+      @click="toDetail(item.id)"
+    >
+      <div class="int-content-left">
+        <div class="content-tag">
+          <div class="tag-text">{{ locale === 'zh_CN' ? item.typeZh : item.typeEn }}</div>
+        </div>
+        <img
+          class="content-image"
+          :src="locale === 'zh_CN' ? item.coverImageZh : item.coverImageEn"
+        >
+      </div>
+      <div class="int-content-right">
+        <div class="content-title">{{ locale === 'zh_CN' ? item.titleZh : item.titleEn }}</div>
+        <div class="content-text">{{ locale === 'zh_CN' ? item.descZh : item.descEn }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { integralActivityList } from '@/api/integral'
+export default {
+  name: 'IntegralActivity',
+  data() {
+    return {
+      list: []
+    }
+  },
+  computed: {
+    locale() {
+      return this.$store.getters.language
+    }
+  },
+  created() {
+    this.getIntegralList()
+  },
+  methods: {
+    // 获取活动列表
+    async getIntegralList() {
+      try {
+        const { code, data } = await integralActivityList({ platform: 2 })
+        if (code !== 0) return
+        this.list = data
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    // 跳转详情
+    toDetail(id) {
+      this.$router.push({ path: `/jiedao/jd-details-activity`, query: { id }})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.int {
+  padding: 15px 0;
+  height: inherit;
+  overflow-y: auto;
+}
+.int-content {
+  margin-bottom: 10px;
+  width: 100%;
+  height: 110px;
+  display: flex;
+  padding: 0 15px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e7e7e7;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.int-content-left {
+  position: relative;
+  width: 100px;
+  height: inherit;
+  .content-image {
+    width: 100px;
+    height: 100px;
+  }
+}
+.int-content-right {
+  flex: 1;
+  height: inherit;
+  padding-left: 10px;
+  box-sizing: border-box;
+  .content-title {
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 10px;
+  }
+  .content-text {
+    font-size: 12px;
+    color: #666;
+    line-height: 18px;
+  }
+}
+.content-tag {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: flex;
+  font-size: 12px;
+  min-width: 60px;
+  height: 20px;
+  color: #fff;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  transform: skewX(15deg);
+  background-color: #ff4d4f;
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.tag-text {
+  transform: skewX(-15deg);
+}
+</style>

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

+<template>
+  <div class="integral-exchange">
+    <div class="header">
+      <div class="text">选择兑换网点</div>
+      <div class="red">不同网点兑换积分不同</div>
+    </div>
+    <div class="content">
+      <!-- <div class="content-text">1、2、3</div>
+      <div class="content-select">请选择网点&ensp;<i class="el-icon-arrow-right" /></div> -->
+      <el-cascader
+        v-model="selectedNodeId"
+        :props="{
+          label:language == 'zh_CN' ?'labelZh' : 'labelEn',
+          value:'id'
+        }"
+        class="cascader"
+        :options="nodeList"
+        clearable
+        placeholder="请选择网点"
+      />
+    </div>
+    <div class="list">
+      <div v-for="item in list" :key="item.id" class="list-item" @click="toDetail(item.id)">
+        <div class="item-image">
+          <img class="imgs" :src="language == 'zh_CN' ? item.imgZh : item.imgEn" alt="">
+          <div class="gift-tag">
+            <div class="tags">
+              <img class="tag-image" src="@/assets/integral/score.png">
+              <div class="tag-text">{{ item.pointsRequire }}</div>
+            </div>
+          </div>
+          <div class="foot-tag">{{ item.quantityRemain }}</div>
+        </div>
+        <div class="item-text">{{ language == 'zh_CN' ? item.titleZh : item.titleEn }}</div>
+        <div class="item-menu">
+          <template v-if="item.pickMethodList">
+            <div v-for="ele in item.pickMethodList" :key="ele.value" class="menu-text">
+              {{ language == 'zh_CN' ? ele.labelZh : ele.labelEn }}
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { integralList, getBranchList } from '@/api/integral'
+export default {
+  name: 'IntegralExchange',
+  data() {
+    return {
+      list: [],
+      nodeId: null,
+      nodeList: [],
+      selectedNodeId: null
+    }
+  },
+  computed: {
+    language() {
+      return this.$store.getters.language
+    }
+  },
+  watch: {
+    selectedNodeId(val) {
+      this.nodeId = val[val.length - 1]
+      this.getIntegralList()
+    }
+  },
+  created() {
+    this.getIntegralList()
+    this.getNodeInfo()
+  },
+  methods: {
+    // 获取礼品列表
+    async getIntegralList() {
+      try {
+        const memberId = this.$store.getters.id
+        const { code, data } = await integralList({
+          memberId,
+          nodeId: this.nodeId
+        })
+        if (code !== 0) return
+        this.list = data
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    // 获取网点信息
+    async getNodeInfo() {
+      try {
+        const { code, data } = await getBranchList()
+        if (code !== 0) return
+        this.nodeList = data
+        console.log(data)
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    // 跳转详情
+    toDetail(id) {
+      this.$router.push({ path: `/jiedao/jd-exchange-operate`, query: { id }})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.integral-exchange {
+  padding: 10px;
+  .header {
+    display: flex;
+    width: 100%;
+    height: 60px;
+    align-items: center;
+    .text{
+      padding-right: 10px;
+      font-size: 22px;
+      font-weight: 700;
+      border-right: 4px solid #1890FF;
+    }
+    .red{
+      font-size: 14px;
+      color: red;
+      margin-left: 5px;
+    }
+  }
+  .content {
+    width: 100%;
+    display: flex;
+    align-items: end;
+    height: 40px;
+    justify-content: space-between;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e9e9e9;
+    .content-text {
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .content-select {
+      color: gray;
+      font-size: 16px;
+      padding-bottom: 10px;
+    }
+  }
+  .list{
+    padding: 20px 0;
+    display: grid;
+    width: 100%;
+    gap: 20px;
+    grid-template-columns: repeat(5, 1fr);
+
+    .list-item{
+      width: 180px;
+      box-sizing: border-box;
+    }
+    .item-image{
+      width: 180px;
+      height: 120px;
+      position: relative;
+      .imgs{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .item-text{
+      font-size: 16px;
+      color: #333;
+      padding: 10px 0;
+    }
+    .item-menu{
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 5px;
+      .menu-text{
+        padding: 4px 10px;
+        font-size: 14px;
+        color: #EF8D15;
+        box-sizing: border-box;
+        border: 2px solid #EF8D15;
+        border-radius: 20px;
+      }
+    }
+  }
+}
+.gift-tag {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  min-width: 40px;
+  height: 16px;
+  box-sizing: border-box;
+  background: linear-gradient(#ef7e1a, #f1b009);
+  transform: skewX(15deg);
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.tag-image {
+  width: 12px;
+  height: 12px;
+}
+.tags {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: skewX(-15deg);
+}
+.tag-text {
+  margin-left: 2px;
+  font-weight: 500;
+  color: #fff;
+  font-size: 12px;
+}
+.foot-tag {
+  position: absolute;
+  padding: 0 5px;
+  bottom: 0;
+  right: 0;
+  z-index: 9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 55px;
+  height: 16px;
+  color: #fff;
+  font-size: 12px;
+  box-sizing: border-box;
+  background: linear-gradient(#ef7e1a, #f1b009);
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.cascader{
+  width: 100%;
+
+}
+::v-deep{
+  .cascader .el-input__inner {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}
+</style>

src/views/jiedao/profile/integral.vue

@@ -5,19 +5,20 @@
       <div class="header-content">
         <div class="content-box">
           <div class="avatar">
-            <img class="imgs" src="@/assets/Integral/vip_avatar.png" alt="">
+            <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>
           <div class="content-image">
-            <img class="imgs" src="@/assets/Integral/vip_avatar.png" alt="">
+            <img 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>
       </div>
       <div class="header-menu">
@@ -25,15 +26,26 @@
         <div class="menu-item" @click="toJump(2)">兑换日志&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>
+    <IntegralExchange v-show="count == 1" />
+    <IntegralActivity v-show="count == 2 " />
   </div>
 </template>
 <script>
+import IntegralExchange from './components/IntegralExchange.vue'
+import IntegralActivity from './components/IntegralActivity.vue'
 export default {
   name: 'JdIntegral',
+  components: {
+    IntegralExchange,
+    IntegralActivity
+  },
   data() {
     return {
-      integral: 100,
-      available: 80
+      count: 1
     }
   },
   created() {
@@ -116,5 +128,83 @@ export default {
       }
     }
   }
+  .content-divider {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    background: #ccc;
+    margin: 20px 0;
+    border-radius: 2px;
+  }
+  .divider-active{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    background: #3461D4;
+    border-radius: 2px;
+  }
+  .divider-vip {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(120%,-50%);
+    font-size: 16px;
+    font-weight: 700;
+    color: #333;
+  }
+  .divider-num {
+    top: 0;
+    right: 50%;
+    transform: translate(-50%,-120%);
+    position: absolute;
+    font-size: 16px;
+    color: #3461D4;
+    font-weight: 700;
+  }
+  .content-text{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .text-vip{
+    font-size: 24px !important;
+    font-weight: 700;
+    color: #2A426B;
+  }
+}
+.nav{
+  display: flex;
+  justify-content: space-around;
+  box-sizing: border-box;
+  background-color: #D1D5E1;
+  border-bottom: 1px solid #e9e9e9;
+  .nav-item{
+    display: flex;
+    width: 50%;
+    height: 60px;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    &:hover{
+      color: #3461D4;
+    }
+  }
+  .nav-item-active1 {
+    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 80% 0%);
+    font-weight: 600;
+    background-color: #fff !important;
+    color: #000 !important;
+    overflow: hidden;
+  }
+
+  .nav-item-active2 {
+    clip-path: polygon(20% 0%, 0% 100%, 100% 100%, 100% 0%);
+    font-weight: 600;
+    background-color: #fff !important;
+    color: #000 !important;
+    overflow: hidden;
+  }
 }
 </style>