<template>
  <view class="agreement-page">
    <view class="agreement-list">
      <view 
        v-for="(item, index) in agreementList" 
        :key="index"
        class="agreement-item"
        @click="viewAgreement(item)"
      >
        <text class="title">{{ item.title }}</text>
        <text class="arrow">›</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      agreementList: [
        { title: '用户协议', type: 'user', url: '/pages/sub-pages/agreement/contract' },
        { title: '隐私政策', type: 'privacy', url: '/pages/sub-pages/agreement/contract1' },
        { title: '购买委托代卖协议', type: 'sale', url: '/pages/sub-pages/agreement/contract' },
        { title: '我的合同', type: 'my', url: '/pages/sub-pages/agreement/my-contract' }
      ]
    }
  },
  
  methods: {
    viewAgreement(item) {
      uni.navigateTo({
        url: `${item.url}?type=${item.type}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.agreement-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx 30rpx;
}

.agreement-list {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.agreement-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .title {
    font-size: 28rpx;
    color: #333;
  }
  
  .arrow {
    font-size: 50rpx;
    color: #ccc;
  }
}
</style>

