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

pages/login/components/AgreePopup/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <uni-popup ref="popup" type="center" :mask-click="false">
+    <view class="agree-popup">
+      <!-- 弹窗头部 -->
+      <view class="popup-header">
+        <view class="popup-title">{{ title }}</view>
+        <view class="close-btn" @click="handleClose">
+          <uni-icons type="closeempty" size="24" color="#999" />
+        </view>
+      </view>
+
+      <!-- 弹窗内容 -->
+      <view class="popup-content">
+        <view class="content-text">
+          <text class="main-text">
+            您在使用朵花温泉服务前，请仔细阅读用户隐私条款及用户注册须知，当您点击同意，即表示您已经理解并同意该条款，该条款将构成对您具有法律约束力的文件。
+          </text>
+        </view>
+
+        <view class="notice-text">
+          <text>
+            请您注意：如果您不同意上述用户注册须知、隐私政策或其中任何约定，请您停止注册。如您阅读并点击同意即表示您已充分阅读理解并接受其全部内容，并表明您也同意朵花温泉可以依据以上隐私政策来处理您的个人信息。
+          </text>
+        </view>
+      </view>
+
+      <!-- 确认按钮 -->
+      <view class="button-area">
+        <view class="confirm-btn" @click="handleClose"> 我知道了 </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref, watch, defineProps, defineEmits, defineExpose } from "vue";
+
+// Props定义
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "温馨提示",
+  },
+});
+
+// Events定义
+const emits = defineEmits(["agree", "close", "cancel"]);
+
+// 响应式数据
+const popup = ref(null);
+
+// 监听visible变化
+watch(
+  () => props.visible,
+  (newVal) => {
+    if (newVal) {
+      show();
+    } else {
+      hide();
+    }
+  }
+);
+
+// 方法定义
+const show = () => {
+  popup.value?.open();
+};
+
+const hide = () => {
+  popup.value?.close();
+};
+
+const handleClose = () => {
+  hide();
+  emits("close");
+};
+
+// 暴露方法给父组件
+defineExpose({
+  show,
+  hide,
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>