index.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <view class="agreement-list-page">
  3. <view class="list-container">
  4. <view class="agreement-item" v-for="item in agreements" :key="item.id" @click="goToDetail(item)">
  5. <view class="item-info">
  6. <text class="item-title">{{ item.title }}</text>
  7. <text class="item-date">更新时间:{{ item.updateTime }}</text>
  8. </view>
  9. <uni-icons type="right" size="14" color="#ccc"></uni-icons>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script setup>
  15. import { ref } from 'vue'
  16. const agreements = ref([
  17. { id: 1, title: '隐私政策', updateTime: '2024-01-15' },
  18. { id: 2, title: '用户服务协议', updateTime: '2024-01-15' },
  19. { id: 3, title: '商家托运协议', updateTime: '2024-02-01' },
  20. { id: 4, title: '宠物洗护服务规范', updateTime: '2024-02-01' }
  21. ])
  22. const goToDetail = (item) => uni.navigateTo({ url: `/pages/my/agreement/detail/index?title=${item.title}` })
  23. </script>
  24. <style lang="scss" scoped>
  25. .agreement-list-page { min-height: 100vh; background: #f7f8fa; }
  26. .list-container { padding: 24rpx; }
  27. .agreement-item { display: flex; align-items: center; background: #fff; border-radius: 20rpx; padding: 32rpx; margin-bottom: 16rpx; }
  28. .item-info { flex: 1; }
  29. .item-title { display: block; font-size: 30rpx; color: #333; font-weight: 600; margin-bottom: 8rpx; }
  30. .item-date { display: block; font-size: 24rpx; color: #999; }
  31. </style>