integral-shop/single_uniapp22miao/pages/sub-pages/agreement/my-contract.vue

<template>
  <view class="my-contract-page">
    <view class="contract-list">
      <view 
        v-for="(contract, index) in contractList" 
        :key="index"
        class="contract-item"
        @click="viewContract(contract)"
      >
        <view class="contract-info">
          <view class="title">{{ contract.title }}</view>
          <view class="time">{{ contract.created_at }}</view>
        </view>
        <view class="status">{{ contract.status_text }}</view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="contractList.length === 0 && !loading">
        <text class="icon">📄</text>
        <text class="text">暂无合同</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contractList: [],
      loading: false
    }
  },
  
  onLoad() {
    this.loadContractList();
  },
  
  methods: {
    async loadContractList() {
      this.loading = true;
      
      try {
        const res = await this.$http.get('/api/contract/list');
        if (res.code === 0) {
          this.contractList = res.data.list || [];
        }
      } catch (error) {
        console.error('加载合同列表失败:', error);
      } finally {
        this.loading = false;
      }
    },
    
    viewContract(contract) {
      uni.navigateTo({
        url: `/pages/sub-pages/webview/index?url=${encodeURIComponent(contract.url)}`
      });
    }
  }
}
</script>

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

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

.contract-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .contract-info {
    flex: 1;
    
    .title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .time {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .status {
    padding: 8rpx 20rpx;
    background-color: #4CAF50;
    color: #fff;
    font-size: 22rpx;
    border-radius: 20rpx;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
  
  .icon {
    font-size: 120rpx;
    margin-bottom: 20rpx;
  }
  
  .text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>