静态页面

src/components/PrizeChangeListItem/index.css

@@ -0,0 +1,42 @@
+.PrizeChangeListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+  padding: 30px 0;
+  align-items: center;
+}
+.PrizeChangeListItem > .Img {
+  width: 180px;
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  background: #eee;
+  margin-left: 30px;
+  margin-right: 30px;
+}
+.PrizeChangeListItem > .Img > image {
+  width: 100%;
+  height: 100%;
+}
+.PrizeChangeListItem > .flex-item {
+  margin-right: 30px;
+}
+.PrizeChangeListItem > .flex-item > text {
+  display: block;
+  font-size: 24px;
+  overflow: hidden;
+  line-height: 40px;
+  color: #999;
+}
+.PrizeChangeListItem > .flex-item > text:first-child {
+  font-size: 28px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  color: #333;
+}

src/components/PrizeChangeListItem/index.jsx

@@ -0,0 +1,24 @@
+import React, { } from 'react'
+import Taro from '@tarojs/taro'
+import toolclass from '@/utils/toolclass.js'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function PrizeChangeListItem (props) {
+
+  const { Data } = props
+
+  return (
+    <view className='PrizeChangeListItem flex-h'>
+      <view className='Img'>
+        <image mode='aspectFill' src={Data.image}></image>
+      </view>
+      <view className='flex-item'>
+        <text>{Data.targetName}</text>
+        <text>{Data.points}积分</text>
+        <text>兑换时间：{toolclass.FormatDate(Data.createDate)}</text>
+      </view>
+    </view>
+  )
+}

src/components/PrizeChangeListItem/index.less

@@ -0,0 +1,47 @@
+.PrizeChangeListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+  padding: 30px 0;
+  align-items: center;
+
+  >.Img {
+    width: 180px;
+    height: 180px;
+    position: relative;
+    overflow: hidden;
+    background: #eee;
+    margin-left: 30px;
+    margin-right: 30px;
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.flex-item {
+    margin-right: 30px;
+
+    >text {
+      display: block;
+      font-size: 24px;
+      overflow: hidden;
+      line-height: 40px;
+      color: #999;
+
+      &:first-child {
+        font-size: 28px;
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        color: #333;
+      }
+    }
+  }
+}

src/pages/WoDe/WoDeDingDan/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import ActivityListItem from '@/components/ActivityListItem'
+import PrizeChangeListItem from '@/components/PrizeChangeListItem'
 import ScrollPageRefresh from '@/components/ScrollPageRefresh'
 import Page from '@/layouts'
 import '@/assets/css/reset.less'
@@ -28,12 +28,12 @@ export default function WoDeDingDan () {
   return (
     <Page>
       <view className='WoDeDingDan'>
-        <ScrollPageRefresh IsEmpty={IsEmpty} ApiName={`getActivityList`} RequestParams={{ mine: 1 }} Refresh={Refresh} Push={Push}>
-          <view className='Content Activity'>
+        <ScrollPageRefresh IsEmpty={IsEmpty} ApiName={`getUserChangePrizeList`} Refresh={Refresh} Push={Push}>
+          <view className='Content'>
             {
               PageList.map((item, index) => (
-                <view className='ListItem' key={`ActivityItem-${index}`}>
-                  <ActivityListItem Data={item}></ActivityListItem>
+                <view className='ListItem' key={`PrizeItem-${index}`}>
+                  <PrizeChangeListItem Data={item}></PrizeChangeListItem>
                 </view>
               ))
             }

src/utils/api.js

@@ -1,6 +1,10 @@
 const prefix = `${HOST}/api/wx`
 
 const $api = {
+  getUserChangePrizeList: { // 兑换商品记录
+    method: 'get',
+    url: `${prefix}/taPointsExchange`
+  },
   PostOwnerScore: { // 用户给生活管家评分
     method: 'post',
     url: `${prefix}/tpLifeConsultantEvaluate`