Skip to content

Commit

Permalink
feat(point): add points system (#182)
Browse files Browse the repository at this point in the history 
* feat(point): add points system

* refactor(products): move pages

* refactor(products): add products from points mall

* style: replace tab with space

* fix(products): refresh products onShow

* fix(points): fix some errors

* fix(point): fix point mall‘s error

* fix(point): fix point mall‘s error

* fix(point): fix point mall‘s error

* fix(point): fix point mall‘s error

* fix(point): fix point mall‘s error

* fix(point): fix point mall‘s error

* fix(point):fix the error of getGoods in page

* fix(point):fix the error of getGoods in page,and cancel the upload button

* refactor(points): adjust urls

* fix: remove the unused page

---------

Co-authored-by: sheeplin <[email protected]>
  • Loading branch information
@daonan233 @lin594
daonan233 and lin594 authored Nov 27, 2023
1 parent 9656a44 commit df629a8
Show file tree
Hide file tree
Showing 10 changed files with 1,014 additions and 6 deletions.
17 changes: 17 additions & 0 deletions src/pages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,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": {}
Expand Down
166 changes: 166 additions & 0 deletions src/pages/products/details.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
187 changes: 187 additions & 0 deletions src/pages/products/history.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit df629a8

Please sign in to comment.