首页和设置会员页，购买页的协议

src/components/MemberDialog.vue

@@ -237,7 +237,7 @@
                     <input type="checkbox" v-model="agreeProtocol" />
                     <span class="member-dialog__order-checkbox-mark"></span>
                   </label>
-                  <span>我已阅读并同意 <a href="javascript:;">《会员服务协议》</a> <a href="javascript:;">《自动续费协议》</a></span>
+                  <span>我已阅读并同意 <a href="javascript:;" @click.prevent="openMemberAgreement">《会员服务协议》</a> </span>
                 </div>
                 <!-- 立即开启按钮 -->
                 <button
@@ -355,6 +355,9 @@
         </div>
       </div>
     </div>
+
+    <!-- 协议预览弹窗 -->
+    <AgreementPreviewDialog v-model="showAgreementDialog" code="ae8065i3" />
   </Teleport>
 </template>
 
@@ -363,6 +366,7 @@ import { ref, computed, watch, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { fetchMemberProductList, createMemberOrder, fetchOrderDetail, type MemberProduct } from '@/api/member'
+import AgreementPreviewDialog from '@/components/tools/AgreementPreviewDialog.vue'
 
 /** 组件 Props — 控制弹窗显示/隐藏 */
 const props = defineProps<{ modelValue: boolean }>()
@@ -664,4 +668,12 @@ function handleViewMemberBenefits() {
   store.commit('SET_SETTINGS_TAB', 'member')
   store.commit('SET_SHOW_SETTINGS', true)
 }
+
+/** 协议预览弹窗显示状态 */
+const showAgreementDialog = ref(false)
+
+/** 打开会员服务协议 */
+function openMemberAgreement() {
+  showAgreementDialog.value = true
+}
 </script>