JewelryMall/miniprogram/pages/agreement/index.vue
2026-03-05 00:43:04 +08:00

107 lines
2.8 KiB
Vue

<template>
<view class="agreement-page">
<!-- 自定义导航栏 -->
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="custom-navbar__content" :style="{ height: navBarHeight + 'px' }">
<image class="custom-navbar__back" src="/static/ic_back.png" mode="aspectFit" @click="goBack" />
<text class="custom-navbar__title">{{ title }}</text>
<view class="custom-navbar__placeholder" />
</view>
</view>
<view :style="{ height: (statusBarHeight + navBarHeight) + 'px' }" />
<view class="agreement-content">
<text class="agreement-text">{{ content }}</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { get } from '../../utils/request'
const title = ref('')
const content = ref('')
const statusBarHeight = ref(20)
const navBarHeight = ref(44)
try {
const sysInfo = uni.getSystemInfoSync()
statusBarHeight.value = sysInfo.statusBarHeight || 20
// #ifdef MP-WEIXIN
const menuBtn = uni.getMenuButtonBoundingClientRect()
navBarHeight.value = (menuBtn.top - (sysInfo.statusBarHeight || 20)) * 2 + menuBtn.height
// #endif
} catch { /* fallback */ }
function goBack() {
uni.navigateBack({ delta: 1 })
}
onMounted(() => {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1] as any
const type = currentPage.options?.type || 'user'
if (type === 'user') {
title.value = '用户协议'
content.value = '欢迎使用珠宝商城小程序。使用本小程序即表示您同意遵守相关服务条款。'
get('/api/config/user_policy').then((data: any) => {
if (data && typeof data === 'string') content.value = data
}).catch(() => {})
} else {
title.value = '隐私协议'
content.value = '我们重视您的隐私保护。我们仅收集必要的信息以提供服务,不会向第三方泄露您的个人信息。'
get('/api/config/privacy_policy').then((data: any) => {
if (data && typeof data === 'string') content.value = data
}).catch(() => {})
}
})
</script>
<style scoped>
.agreement-page {
min-height: 100vh;
background: #f5f5f5;
}
.custom-navbar {
background: linear-gradient(to right, #FFCFDE, #FFA6C4);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.custom-navbar__content {
display: flex;
align-items: center;
padding: 0 24rpx;
}
.custom-navbar__back {
width: 44rpx;
height: 44rpx;
}
.custom-navbar__title {
flex: 1;
text-align: center;
font-size: 34rpx;
font-weight: bold;
color: #333;
}
.custom-navbar__placeholder {
width: 44rpx;
}
.agreement-content {
background: #fff;
margin: 20rpx 24rpx;
border-radius: 16rpx;
padding: 32rpx;
}
.agreement-text {
font-size: 28rpx;
color: #333;
line-height: 48rpx;
white-space: pre-wrap;
}
</style>