优化页面

pages/Mine/minecomponents/points.vue

@@ -0,0 +1,181 @@
+<template>
+  <view class="points">
+    <view class="bg">
+      <image
+        class="bgImg"
+        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
+        mode="scaleToFill"
+      />
+    </view>
+    <view class="Return" @click="onBack">
+      <image
+        class="ReturnImg"
+        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
+        mode="scaleToFill"
+      />
+    </view>
+    <view class="title">积分</view>
+    <view class="content">
+      <scroll-view
+        show-scrollbar="false"
+        scroll-y="true"
+        class="scroll"
+        refresher-enabled="true"
+        refresher-threshold="40"
+        @refresherrefresh="onRefresherRefresh"
+        lower-threshold="100"
+        @scrolltolower="onScrollToLower"
+        :refresher-triggered="triggered"
+        enable-flex="true"
+      >
+        <uni-card class="card" v-for="(item, index) in pointslist" :key="index">
+          <view
+            class="card-content"
+            :style="{ 'background-color': item.status == 0 ? '#11ff002b' : '#ff000011' }"
+          >
+            <view class="time">
+              {{ formatDate(item.time) }}
+            </view>
+            <view class="info">{{ item.info }}</view>
+            <view class="num">{{ item.num }}</view>
+          </view>
+        </uni-card>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+import request from "../../../components/request.js";
+import formatDate from "../../../components/formatDate.js";
+export default {
+  data() {
+    return {
+      title: "Hello",
+      userinfo: {},
+      page: 0,
+      triggered: false,
+      pointslist: [],
+    };
+  },
+  onLoad() {
+    uni.getStorage({
+      key: "userinfo",
+      success: (res) => {
+        this.userinfo = res.data;
+        this.getPointsDetail();
+      },
+    });
+  },
+  methods: {
+    formatDate: formatDate,
+    //下拉刷新
+    onRefresherRefresh() {
+      this.page = 0;
+      this.triggered = true;
+      this.pointslist = [];
+      this.getPointsDetail();
+    },
+    //上拉加载
+    onScrollToLower() {
+      this.page += 1;
+      this.getPointsDetail();
+    },
+    //获取积分详情
+    getPointsDetail() {
+      const res = request({
+        url: "user/pointsDetail",
+        method: "POST",
+        data: {
+          userId: this.userinfo.id,
+          page: this.page,
+          size: 10,
+        },
+        userInfo: true,
+      }).then((res) => {
+        if (res.code === 200) {
+          this.triggered = false;
+          this.pointslist.push(...res.data);
+        } else {
+          console.log(res.msg);
+        }
+      });
+    },
+    // 返回上一页
+    onBack() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+.bgImg {
+  width: 100%;
+  height: 100%;
+}
+.Return {
+  position: absolute;
+  top: 110rpx;
+  left: 35rpx;
+  width: 46rpx;
+  height: 46rpx;
+}
+.title {
+  position: absolute;
+  top: 120rpx;
+  left: 335rpx;
+  font-size: 34rpx;
+  color: #100e0f;
+  font-weight: bold;
+}
+.ReturnImg {
+  width: 100%;
+  height: 100%;
+}
+.content {
+  position: absolute;
+  top: 250rpx;
+  left: 0rpx;
+  right: 0rpx;
+  bottom: 50rpx;
+}
+.scroll {
+  height: 100%;
+  width: 750rpx;
+}
+.card-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100rpx;
+  width: 600rpx;
+  padding: 0 20rpx;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+  margin-left: 50rpx;
+}
+.time {
+  font-size: 24rpx;
+  color: #7b7b7b;
+}
+.info {
+  font-size: 24rpx;
+  color: #898989;
+}
+.num {
+  font-size: 24rpx;
+  color: #000000;
+  font-weight: bold;
+}
+</style>