llll/shop.vue

<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>