konggang-city-miniprogram/pages/selfCenter/collection.vue

<template>
  <view class="content">
    <view class="supply-box">
      <view class="supply-item-box">
        <view
          v-for="(item, idx) in titleList"
          :key="idx"
          :class="{ active: active === idx }"
          class="supply-item-name"
          @click="active = idx"
        >
          {{ item }}
        </view>
      </view>
      <view class="policy-content" v-if="active == 0">
        <view class="policy-content-item" v-for="(item, idx) in policyData" :key="idx" @click="enterPolicyDeatil(item.source_id)" >
          <view class="policy-content-item-left">
            <p class="policy-content-item-left-title">
              {{ item.source_title }}
            </p>
            <view class="policy-content-item-left-time">
              <p class="moment">收藏时间： {{ item.addtime | globalTime }}</p>
            </view>
          </view>
        </view>
      </view>
      <view class="policy-content" v-if="active == 1">
        <view class="policy-content-item" v-for="(company, index) in companyList" :key="index" @click="toDetail(company.source_id)">
		   <view class="policy-content-item-left">
			 <p class="policy-content-item-left-title">
			   {{ company.source_title }}
			 </p>
			 <view class="policy-content-item-left-time">
			   <p class="moment">收藏时间： {{ company.addtime | globalTime }}</p>
			 </view>
       </view>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      titleList: ["政策", "企业"],
      active: 0,
      searchVal: "",
      policyData: [],
      // companyList: new Array(5).fill({
      //   logo: "/static/enterprise/logo.png",
      //   name: "康拓科技有限责任公司",
      //   info: {
      //     person: "马须伦",
      //     money: "1,776,759.3万（元）",
      //     time: "1995-03-25",
      //   },
      // }),
	  companyList: []
    };
  },
  onLoad() {
    //this.getCollection();
  },
  onShow() {
  	 this.getCollection();
  },
  methods: {
    toDetail(id) {
      uni.navigateTo({
        url: "/pages/enterprise/enterprise_detail?id=" + id,
      });
    },
    enterPolicyDeatil(id) {
      uni.navigateTo({
        url: "/pages/policy/policy_deatil?id=" + id,
      });
    },
    getCollection() {
      let md5Sign = md5(
        "method=" +
          "user" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=user&action=collect_list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        // page: 1,
        // page_size: 5,
        openId: getApp().globalData.open_id,
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            let list = res.data.data.list;
            this.policyData = list.filter((item) => {
              return item.source === 'policy'
            });
			this.companyList = list.filter((item) => {
			  return item.source === 'company'
			});
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
  },
};
</script>

<style lang="scss">
.content {
  padding: 4%;
  .supply-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    .supply-title {
      width: 100%;
      p {
        background-color: #02a7f0;
        width: 190rpx;
        height: 70rpx;
        color: #ffffff;
        border-radius: 0 40rpx 40rpx 0rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .supply-item-box {
      display: flex;
      justify-content: space-evenly;
      margin: 0 20rpx;
      margin-top: 10rpx;

      .supply-item-name {
        padding-bottom: 10rpx;
        font-size: 27rpx;
      }
      .active {
        font-weight: 600;
        border-bottom: 7rpx solid #02a7f0;
      }
    }
    .supply-content {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      font-size: 25rpx;
      .supplyCard {
        display: flex;
        width: 92%;
        margin: 2% 0;
        padding: 2% 4%;
        height: 5%;
        border-radius: 30rpx;
        box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 0rpx;
        .image_content {
          margin-right: 5%;
          image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 20rpx;
            background-color: rgb(228, 228, 228);
          }
        }
        .state {
          margin-left: 100rpx;
          image {
            width: 100rpx;
            height: 80rpx;
          }
        }
        .info {
          display: flex;
          flex-flow: column;
          justify-content: space-around;
          .time {
            font-weight: 100;
            font-size: 25rpx;
          }
        }
      }
    }
  }
  .policy-content {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    margin-top: 10rpx;
    .policy-content-item {
      margin: 0 20rpx;
      display: flex;
      overflow: hidden;
      box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
      border-radius: 32rpx;
      padding-bottom: 10rpx;
      margin-top: 20rpx;
      padding: 30rpx;
      justify-content: space-between;
      .policy-content-item-left {
        display: flex;
        flex-direction: column;
        width: 98%;
        .policy-content-item-left-title {
		  font-weight: 550;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 26rpx;
          margin-bottom: 20rpx;
        }
        .policy-content-item-left-time {
          width: 100%;
          display: flex;
          align-items: center;
          .moment {
            color: #c1c1c1;
            font-size: 22rpx;
            margin-right: 20rpx;
          }
          .maxMony {
            font-size: 22rpx;
            color: #00bfbf;
            border: 1px solid #00bfbf;
            padding: 10rpx;
            margin-right: 20rpx;
            border-radius: 12rpx;
          }
          .leftDay {
            font-size: 22rpx;
            background: #f7bbc3;
            color: #e32579;
            padding: 10rpx;
            border: 1px solid #f7bbc3;
            border-radius: 12rpx;
          }
        }
      }
      .policy-content-item-img {
        image {
          width: 180rpx;
          height: 120rpx;
          border-radius: 12rpx;
        }
      }
    }
  }
  .companys {
    margin-top: 3%;
    padding: 0 4%;
    font-size: 30rpx;
    .company {
      border-radius: 20rpx;
      box-shadow: rgba(0, 0, 0, 0.35) 0rpx 5rpx 15rpx;
      padding: 1%;
      margin: 2% 0;
      .title {
        display: flex;
        align-items: center;
        .logo {
          image {
            width: 100rpx;
            height: 70rpx;
            margin-right: 30rpx;
          }
        }
      }
      .line {
        width: 3rpx;
        height: 70rpx;
        background: rgb(175, 186, 197);
      }
      .info {
        font-size: 19rpx;
        font-weight: 100;
        display: flex;
        text-align: center;
        justify-content: space-between;
        align-items: center;
        padding: 0 2%;
        margin-top: 1%;
        .view {
          margin-top: 2%;
          .name {
            color: #02a7f0;
          }
          .info_t {
            margin-bottom: 10rpx;
            font-size: 25rpx;
          }
        }
      }
    }
  }
}
</style>