feat(point): add points system

src/pages.json

@@ -153,6 +153,23 @@
       "path": "pages/users/me/comments",
       "style": {}
     },
+    /*product区*/
+    {
+      "path": "pages/products/index",
+      "style": {}
+    },
+    {
+      "path": "pages/products/upload",
+      "style": {}
+    },
+    {
+      "path": "pages/products/details",
+      "style": {}
+    },
+    {
+      "path": "pages/products/history",
+      "style": {}
+    },
     {
       "path": "pages/users/settings/telephone",
       "style": {}

src/pages/products/details.vue

@@ -0,0 +1,166 @@
+<template>
+  <view>
+    <cu-custom title="商品详情" />
+    <view class="product-detail">
+      <!-- 商品图片 -->
+      <image
+        :src="product.picture"
+        class="product-image"
+      />
+      <!-- 商品信息 -->
+      <view class="product-info">
+        <view class="product-name">
+          {{ product.name }}
+        </view>
+        <view class="product-points">
+          所需积分: {{ product.points }}
+        </view>
+        <view class="product-quantity">
+          剩余数量: {{ product.quantity }}
+        </view>
+      </view>
+      <hr class="divider">
+      <br>
+      <!-- 商品详情 -->
+      <view class="product-details">
+        <p style="text-indent:2em;">
+          {{ product.details }}
+        </p>
+      </view>
+      <!-- 购买按钮 -->
+      <!--view class="buy-button-container">
+        <button
+          class="buy-button"
+          @click="buyProduct"
+        >
+          立即购买
+        </button>
+      </view-->
+    </view>
+  </view>
+</template>
+<script>
+// eslint-disable-next-line import/extensions
+import { getGoodDetail } from '@/services/point.js';
+
+export default {
+  data() {
+    return {
+      product: {
+        name: '',
+        points: 0,
+        quantity: 0,
+        picture: '',
+        details: '',
+        id: '',
+      },
+    };
+  },
+  onLoad() {
+    // 从路由参数中获取商品 ID 并加载商品详情
+    const { id } = this.$route.query;
+    if (id) {
+      this.showDetails(id);
+    }
+  },
+  methods: {
+    async showDetails(id) {
+      // 使用商品 ID 获取商品详情
+      const res = await getGoodDetail(id);
+      this.product = res.products;
+    },
+    buyProduct() {
+      uni.showToast({
+        title: '还没上线购买功能喵',
+        icon: 'none',
+        duration: 2000,
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+/* 商品详情页面样式 */
+
+.product-detail {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.product-image {
+  width: 100%;
+  max-height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  box-shadow: 0 0 10 rgba(0, 0, 0, 0.2); /* 添加图片阴影效果 */
+}
+
+.product-info {
+  margin-bottom: 20px;
+}
+
+.product-name {
+  font-size: 26px;
+  font-weight: bold;
+  color: #39C5BB;
+  margin-bottom: 10px;
+}
+
+.product-points {
+  font-size: 18px;
+  color: #666;
+  margin-bottom: 10px;
+}
+
+.product-quantity {
+  font-size: 18px;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.product-details {
+  font-size: 16px;
+  color: #333;
+  line-height: 1.6;
+  text-align: left;
+  margin-bottom: 20px;
+  line-height: 2;
+}
+
+.buy-button-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  width: 100%;
+}
+
+.buy-button {
+  width: 80%;
+  padding: 15px;
+  background-color: #39C5BB;
+  color: #fff;
+  font-size: 18px;
+  text-align: center;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s ease; /* 添加按钮颜色变化动画 */
+}
+
+.buy-button:hover {
+  background-color: #009688; /* 鼠标悬停时的背景色 */
+}
+
+/*分割线*/
+.divider {
+  align-self: center;
+  width: 100%;
+  color: #987cb9;
+  size: 10;
+}
+</style>

src/pages/products/history.vue

@@ -0,0 +1,187 @@
+<template>
+  <view>
+    <cu-custom title="我的积分" />
+
+    <view class="myPoints">
+      总积分: {{ points.amount }}
+    </view>
+    <!-- 积分列表 -->
+    <view
+      v-if="points.results&&points.results.length===0"
+      class="nohistory"
+    >
+      暂时没有积分历史哦
+    </view>
+    <view class="point-list">
+      <view
+        v-for="point in points.results"
+        :key="point.id"
+        class="point-item"
+      >
+        <image
+          class="user-avatar"
+          :src="point.user.avatar"
+        />
+        <view class="user-info">
+          <text class="user-nickname">
+            {{ point.user.nickname }}
+          </text>
+          <text class="point-reason">
+            {{ point.reason }}
+          </text>
+          <text class="point-amount">
+            {{ point.points }}积分
+          </text>
+          <text
+            v-if="point.action ==='earn'"
+            class="earnAction"
+          >
+            {{ point.action }}
+          </text>
+          <text
+            v-else
+            class="deAction"
+          >
+            {{ point.action }}
+          </text>
+        </view>
+      </view>
+    </view>
+    <button
+      class="PointMall"
+      @tap="goToPointMall"
+    >
+      积分商城
+    </button>
+  </view>
+</template>
+<script>
+
+import { getMyPoints } from '@/services/point';
+import { toPointMall, toUploadGoods } from '@/routers/points';
+
+const app = getApp();
+export default {
+  data() {
+    return {
+      points: {},
+      toPointMall,
+      toUploadGoods,
+    };
+  },
+  async onLoad() {
+    uni.pageScrollTo({
+      scrollTop: 0,
+      duration: 0,
+    });
+    this.getSMyPoints();
+  },
+  methods: {
+    getSMyPoints() {
+      const ress = getMyPoints(app.globalData.id);
+      ress.then((res) => {
+        this.points = res;
+      });
+    },
+    goToPointMall() {
+      uni.navigateTo({
+        url: '/pages/products/index',
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 样式可以根据需求进行自定义 */
+
+.myPoints {
+  background-color: #39C5BB;
+  color: #fff;
+  padding: 10px;
+  font-size: 20px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  border: 5px solid #31aba1;
+  letter-spacing: 3.9px; /*微操大师，凯申遗风*/
+  font-family: '幼圆';
+  font-weight: bold;
+}
+
+.point-list {
+  background-color: #f5f5f5;
+  padding: 10px;
+}
+
+.point-item {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.user-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.user-nickname {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.point-reason {
+  margin-left: 30 rpx;
+  font-size: 14px;
+  color: #666;
+}
+
+.point-amount {
+  margin-left: 30 rpx;
+  font-size: 18px;
+  color: #ff9900;
+  font-weight: bold;
+  margin-top: 5px;
+}
+
+.earnAction {
+  margin-left: 50 rpx;
+  font-size: 15px;
+  color: #ff9900;
+}
+
+.deAction {
+  margin-left: 50 rpx;
+  font-size: 15px;
+  color: #39C5BB;
+}
+
+.PointMall {
+  background-color: #39C5BB;
+  color: #ffffff;
+  width: 80%;
+  height: 5%;
+  position: fixed;
+  bottom: 50px;
+  margin-left: 10%;
+  border-radius: 50 rpx;
+}
+
+/*积分历史的时候*/
+.nohistory {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #333;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  font-size: 16px;
+}
+</style>