konggang-city-miniprogram/pages/supply/mySupply.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="supply-content">
        <view
          class="supplyCard"
          v-for="(supply, i) in supplyList"
          :key="i"
          @tap="toDetail(i)"
        >
          <view class="image_content">
            <image :src="supply.image" />
          </view>
          <view class="info">
            <view class="title">
              {{ supply.title }}
            </view>
            <view class="time">发布时间：{{ supply.time }}</view>
          </view>
          <view class="state">
            <image src="/static/appeal/waited.svg" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      titleList: ["我的供需", "我的需求"],
      active: 0,
      supplyList:[],
    };
  },
  onLoad() {
    this.getMyList();
  },
  methods: {
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/supply/supply_detail?id=" + index,
      });
    },
    getMyList() {
      let md5Sign = md5(
        "method=" +
          "need" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=need&source=need&action=my_list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          openId: getApp().globalData.open_id,
          s_type: this.active == 0 ? 2 : 1,
        },
        success: (res) => {
          if (res.data.code === 200) {
            let list = res.data.data.list;
            /* 
                supplyList: new Array(5).fill({
                image: "/static/supply/u1779.png",
                title: "移动式空气消毒机",
                time: "2021-08-30 14:50:00",
                state: 1,
                }),
                
       */
            this.supplyList = list.map((item) => {
              let ob = {
                image: "",
                title: "",
                time: "",
                state: "",
                id: "",
              };
              ob.id = item.id;
              ob.title = item.title;
              let time = this.$options.filters["globalTime"](item.addtime);
              let timeSecond = this.$options.filters["globalTimeSecond"](
                item.addtime
              );
              ob.time = time + " " + timeSecond;
              ob.state = item.type;
              ob.image = item.url;
              return ob;
            });
            console.log(res.data.data.list);
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
  },
  watch: {
    active() {
      this.getMyList();
    },
  },
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5%;
  .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;
          }
        }
      }
    }
  }
}
</style>