konggang-city-miniprogram/pages/supply/index.vue

<template>
  <view class="content">
    <div class="picker">
      <picker
        @change="bindPickerChange"
        :value="index"
        :range="array"
        range-key="name"
      >
        <div class="picker_title">
          <div class="pickername">
            <div v-if="array[index].name != undefind">
              {{ array[index].name }}
            </div>
            <div v-else>类型</div>
          </div>
          <div class="triangle-down"></div>
        </div>
      </picker>
    </div>
    <div class="supplyList">
      <div class="supplyCard" v-for="(supply, i) in supplyList" :key="i" @tap="toDetail(i)">
        <div class="img_content">
          <img :src="supply.img" />
        </div>
        <div class="info">
          <div class="title">
            {{ supply.title }}
          </div>
          <div class="time">发布时间：{{ supply.time }}</div>
        </div>
      </div>
    </div>
    <div class="menus">
      <navigator url="/pages/supply/putSupply">
        <div class="menu">
          <div>
            <img src="/static/supply/putSupply.png" />
          </div>
          <div class="menu_title">发布供需</div>
        </div>
      </navigator>
      <navigator url="/pages/supply/mySupply">
        <div class="menu">
          <div>
            <img src="/static/supply/mySupply.png" />
          </div>
          <div class="menu_title">我的供需</div>
        </div>
      </navigator>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      supplyList: [
        {
          img: "/static/logo.png",
          title: "移动式空气消毒机",
          time: "2021-08-30 14:50:00",
        },
        {
          img: "/static/logo.png",
          title: "视频监控产品及解决方案",
          time: "2021-08-30 14:50:00",
        },
        {
          img: "/static/logo.png",
          title: "超声波产品及解决方案",
          time: "2021-08-30 14:50:00",
        },
        {
          img: "/static/logo.png",
          title: "多平台游戏方向盘",
          time: "2021-08-30 14:50:00",
        },
        {
          img: "/static/logo.png",
          title: "超声波产品及解决方案",
          time: "2021-08-30 14:50:00",
        },
        {
          img: "/static/logo.png",
          title: "多平台游戏方向盘",
          time: "2021-08-30 14:50:00",
        },
      ],
      array: [{ name: "全部" }, { name: "供需" }, { name: "需求" }],
      index: undefined,
    };
  },
  methods: {
    bindPickerChange(e) {
      this.index = e.detail.value;
    },
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/supply/supply_detail?id=" + index,
      });
    },
  },
};
</script>

<style lang="scss" scope>
.content {
  font-size: 30rpx;
  margin: 0 5%;
  .picker {
    position: fixed;
    top: 3%;
    left: 5%;
    .picker_title {
      width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .triangle-down {
        width: 0;
        height: 0;
        border-top: 15rpx solid rgb(173, 173, 173);
        border-left: 15rpx solid transparent;
        border-right: 15rpx solid transparent;
      }
      .pickername {
        font-weight: 100;
      }
    }
  }
  .supplyList {
    margin-top: 12%;
    .supplyCard {
      display: flex;
      width: 92%;
      margin: 2% 0;
      padding: 4% 4%;
      height: 5%;
      border-radius: 50rpx;
      box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 0rpx;
      .img_content {
        margin-right: 5%;
        img {
          width: 100rpx;
          height: 100rpx;
          border-radius: 20rpx;
          background-color: rgb(228, 228, 228);
        }
      }
      .info {
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        .time {
          font-weight: 100;
          font-size: 25rpx;
        }
      }
    }
  }
  .menus {
    z-index: 999;
    display: flex;
    justify-content: space-around;
    width: 70%;
    height: 6%;
    position: fixed;
    top: 85%;
    left: 50%;
    padding: 3%;
    border-radius: 40rpx;
    box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 0rpx;
    transform: translateX(-50%);
    background-color: #fff;
    img {
      width: 50rpx;
      height: 50rpx;
      border-radius: 10rpx;
    }
    .menu {
      display: flex;
      flex-flow: column;
      align-items: center;
      .menu_title {
        text-align: center;
        font-size: 25rpx;
      }
    }
  }
}
</style>