feat: 同意协议的弹窗搭建

src/views/components/AgreementTip.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="tip-wrapper">
+    <!-- 标题 -->
+    <h2 class="tip-title">温馨提示</h2>
+
+    <!-- 正文内容 -->
+    <div class="tip-content">
+      欢迎使用【智念科技服务有限公司】提供的AI生成合影服务。
+      本服务通过人工智能技术（AIGC）将您上传的照片与景区场景模板进行创意合成，
+      为您生成具有特定风格的纪念图片。请您仔细阅读
+      <span class="link-text" @click.stop="handleViewRule">《智念AI用户规则》</span>
+      ，您点击“我同意”等进行下一步操作的行为均视为您同意受本规则约束。
+      如您不同意，您可以直接关闭页面。
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="tip-footer">
+      <button class="btn-cancel" @click="$emit('cancel')">取消</button>
+      <button class="btn-confirm" @click="$emit('confirm')">我同意</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['cancel', 'confirm', 'view-rule']);
+
+const handleViewRule = () => {
+  emit('view-rule');
+};
+</script>
+
+<style scoped>
+.tip-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #fff;
+  /* 宽度自适应 popup */
+  width: 100%;
+}
+
+/* 标题样式 */
+.tip-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #000;
+  margin: 0 0 20px 0;
+  text-align: center;
+}
+
+/* 正文样式 */
+.tip-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  text-align: justify;
+  /* 两端对齐，更接近原图感 */
+  margin-bottom: 30px;
+}
+
+/* 绿色链接文字 */
+.link-text {
+  color: #07c160;
+  /* 微信绿 */
+  font-weight: 500;
+  cursor: pointer;
+}
+
+/* 底部按钮布局 */
+.tip-footer {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  gap: 15px;
+}
+
+/* 通用按钮基础 */
+button {
+  flex: 1;
+  height: 44px;
+  border-radius: 22px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  outline: none;
+}
+
+button:active {
+  opacity: 0.7;
+}
+
+/* 取消按钮：白底黑字带边框 */
+.btn-cancel {
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #e0e0e0;
+}
+
+/* 同意按钮：黑底白字 */
+.btn-confirm {
+  background-color: #000;
+  color: #fff;
+  border: none;
+}
+</style>

src/views/home/index.vue

@@ -34,6 +34,13 @@
     </div>
   </div>
 
+  <!-- 协议提示 -->
+  <van-popup v-model:show="showAgree" round :close-on-click-overlay="false"
+    :style="{ padding: '30px 24px', width: '80%' }">
+    <AgreementTip @cancel="showAgree = false" @confirm="onAgree" @view-rule="onViewRule" />
+  </van-popup>
+
+  <!-- 选图说明 -->
   <van-popup v-model:show="showGuide" round position="bottom" closeable close-icon-position="top-left">
     <PhotoGuide @start="onStartSelect" />
   </van-popup>
@@ -45,6 +52,7 @@ import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import NavBar from '../components/NavBar.vue';
 import PhotoGuide from '../components/PhotoGuide.vue';
+import AgreementTip from '../components/AgreementTip.vue';
 
 // --- 测试数据 ---
 const styles = [
@@ -68,12 +76,26 @@ const mockData = {
   ]
 };
 
+const router = useRouter();
+
 // --- 状态 ---
 const activeStyleId = ref('real');
 const activeSceneIndex = ref(0);
 const showGuide = ref(false);
 
-const router = useRouter();
+const showAgree = ref(true);
+
+const onAgree = () => {
+  console.log("用户同意了协议");
+  showAgree.value = false;
+  // 执行下一步选图逻辑
+};
+
+const onViewRule = () => {
+  console.log("跳转到规则详情页");
+  // 可以是打开另一个 popup 或者 router.push
+};
+
 
 const onBack = () => {
   router.back();