|
|
<template>
|
|
|
<view class="product-list">
|
|
|
<h2>可用积分: {{ availablePoints }} 积分</h2> <!-- 显示用户的可用积分 -->
|
|
|
|
|
|
<!-- 遍历产品列表，生成每个产品的显示 -->
|
|
|
<view v-for="(product, index) in products" :key="index" class="product-item">
|
|
|
<h2>{{ product.name }}</h2> <!-- 产品名称 -->
|
|
|
<p class="shop-pri">
|
|
|
<span style="font-size: 48rpx;color: firebrick;font-weight:bold;margin-left: auto;">{{ product.price }}</span>
|
|
|
<span style="align-items: center;padding-left: 10rpx;" >积分</span>
|
|
|
</p> <!-- 产品价格 -->
|
|
|
|
|
|
<!-- 产品描述 -->
|
|
|
<p>介绍: {{ product.description }}</p>
|
|
|
|
|
|
<!-- 确认购买按钮，点击时调用 confirmPurchase 方法 -->
|
|
|
<view class="shop-btn">
|
|
|
<button @click="confirmPurchase(product)">确认购买</button>
|
|
|
</view>
|
|
|
|
|
|
<!-- 显示购买后的消息 -->
|
|
|
<view v-if="product.message" class="message">{{ product.message }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
availablePoints: 140, // 固定的个人可用积分
|
|
|
products: [
|
|
|
{ name: '提问转移', price: 25, description: '该商品允许用户将自己的提问转移到其他用户', message: '' }, // 产品1信息
|
|
|
{ name: '免密钥签到', price: 50, description: '购买此商品后，用户可以享受一次免密钥签到服务', message: '' }, // 产品2信息
|
|
|
{ name: '成绩+1', price: 200, description: '购买此商品后，用户可以获得额外的分数', message: '' }, // 产品3信息
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
confirmPurchase(product) {
|
|
|
// 检查用户是否有足够的积分来购买该产品
|
|
|
if (product.price > this.availablePoints) {
|
|
|
product.message = '积分不足，无法购买该商品！'; // 提示信息
|
|
|
} else {
|
|
|
// 减少可用积分
|
|
|
this.availablePoints -= product.price;
|
|
|
|
|
|
// 更新购买后的消息
|
|
|
product.message = `购买成功！${product.name} 已购买，消耗 ${product.price} 积分。`; // 成功提示信息
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.product-list {
|
|
|
max-width: 600px; /* 设置产品列表的最大宽度 */
|
|
|
margin: auto; /* 水平居中 */
|
|
|
padding: 20px; /* 内边距 */
|
|
|
background: #fff; /* 背景颜色 */
|
|
|
border-radius: 5px; /* 圆角 */
|
|
|
}
|
|
|
|
|
|
.product-item {
|
|
|
margin-bottom: 15px; /* 将下边距稍微减少 */
|
|
|
padding: 10px; /* 内边距 */
|
|
|
border: 1px solid #ddd; /* 边框颜色 */
|
|
|
border-radius: 5px; /* 圆角 */
|
|
|
}
|
|
|
|
|
|
.shop-pri {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
margin-top: 5px; /* 增加顶部边距以缩小产品名称和价格之间的距离 */
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
margin-top: 10px; /* 上边距 */
|
|
|
color: green; /* 字体颜色 */
|
|
|
font-weight: bold; /* 加粗字体 */
|
|
|
}
|
|
|
|
|
|
.shop-btn {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
