feat: 商品详情支付交互调试

2025-08-06 21:43:08 +08:00
parent 5292ede3c5
commit e482ea5393
10 changed files with 673 additions and 137 deletions
--- a/pages/login/components/AgreePopup/demo.vue
+++ b/pages/login/components/AgreePopup/demo.vue
@@ -0,0 +1,133 @@
+<template>
+  <view class="demo-container">
+    <view class="demo-header">
+      <text class="demo-title">AgreePopup 组件演示</text>
+    </view>
+    
+    <view class="demo-content">
+      <button class="demo-btn" @click="showPopup">显示用户协议弹窗</button>
+      
+      <view class="demo-info">
+        <text class="info-title">组件状态：</text>
+        <text class="info-text">弹窗可见：{{ popupVisible }}</text>
+        <text class="info-text">用户操作：{{ userAction }}</text>
+      </view>
+    </view>
+    
+    <!-- AgreePopup 组件 -->
+    <AgreePopup 
+      :visible="popupVisible"
+      title="温馨提示"
+      @agree="handleAgree"
+      @close="handleClose"
+      @cancel="handleCancel"
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import AgreePopup from './index.vue'
+
+// 响应式数据
+const popupVisible = ref(false)
+const userAction = ref('无')
+
+// 方法定义
+const showPopup = () => {
+  popupVisible.value = true
+  userAction.value = '显示弹窗'
+}
+
+const handleAgree = () => {
+  popupVisible.value = false
+  userAction.value = '用户同意协议'
+  console.log('用户同意了协议')
+}
+
+const handleClose = () => {
+  popupVisible.value = false
+  userAction.value = '用户关闭弹窗'
+  console.log('用户关闭了弹窗')
+}
+
+const handleCancel = () => {
+  popupVisible.value = false
+  userAction.value = '用户取消操作'
+  console.log('用户取消了操作')
+}
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20px;
+  min-height: 100vh;
+  background: #f5f5f5;
+  
+  .demo-header {
+    text-align: center;
+    margin-bottom: 40px;
+    
+    .demo-title {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333333;
+    }
+  }
+  
+  .demo-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+    .demo-btn {
+      width: 200px;
+      height: 44px;
+      background: #007AFF;
+      color: #ffffff;
+      border: none;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 500;
+      margin-bottom: 40px;
+      cursor: pointer;
+      
+      &:hover {
+        background: #0056CC;
+      }
+      
+      &:active {
+        background: #004499;
+        transform: scale(0.98);
+      }
+    }
+    
+    .demo-info {
+      background: #ffffff;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      min-width: 300px;
+      
+      .info-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #333333;
+        display: block;
+        margin-bottom: 12px;
+      }
+      
+      .info-text {
+        font-size: 14px;
+        color: #666666;
+        display: block;
+        margin-bottom: 8px;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+</style>