diff --git a/shop.vue b/shop.vue
new file mode 100644
index 0000000..7889392
--- /dev/null
+++ b/shop.vue
@@ -0,0 +1,93 @@
+<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>
+
+
+
+