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

<template>
  <view class="content">
    <view class="picker">
      <picker
        @change="bindPickerChange"
        :value="index"
        :range="array"
        range-key="name"
        class="picker_self"
      >
        <view class="picker_title active" style="padding-left: 1%;">
          {{ picker_title }}
        </view>
      </picker>
    </view>
    <view class="supplyList">
      <view
        class="supplyCard"
        v-for="(supply, i) in supplyList"
        :key="i"
        @tap="toDetail(supply.id)"
      >
        <view class="image_content">
          <image :src="supply.image" mode="aspectFill" />
        </view>
        <view class="info">
          <view class="title">
            {{ supply.title }}
          </view>
          <view class="time">发布时间：{{ supply.time }}</view>
        </view>
      </view>
    </view>
    <view class="menus">
      <view @click="goPutSupply()">
        <view class="menu">
          <view>
            <image src="/static/supply/putSupply.png" />
          </view>
          <view class="menu_title">发布供需</view>
        </view>
      </view>
      <navigator url="/pages/supply/mySupply">
        <view class="menu">
          <view>
            <image src="/static/supply/mySupply.png" />
          </view>
          <view class="menu_title">我的供需</view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      supplyList: [],
      array: [{ name: "全部" }, { name: "供需" }, { name: "需求" }],
      index: -1,
      picker_title: "类型",
    };
  },
  onLoad() {
    this.getMyList();
  },
  methods: {
    bindPickerChange(e) {
      this.index = e.detail.value;
      this.picker_title = this.array[this.index].name;
      this.getMyList();
    },
	goPutSupply(){
		if(!getApp().globalData.user_phone){
			uni.showToast({
			  title: "您还没有登录授权",
			  duration: 2500,
			  icon: "none",
			});
			uni.navigateTo({
				url:'/pages/auth/index'
			})
		}else {
			uni.navigateTo({
				url:'/pages/supply/putSupply'
			})
		}
	},
    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=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        s_type: this.index == 2 ? 1 : 2,
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: this.index == -1 || this.index == 0 ? {} : postData,
        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,
                }),
                
       */
            console.log(list);
            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 = "/static/nodata.svg";
              ob.image = item.attach_list[0]
                ? getApp().globalData.shareUrl + item.attach_list[0]
                : "/static/nodata.svg";
              return ob;
            });
            // console.log(res.data.data.list);
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
  },
};
</script>

<style lang="scss" scope>
.active {
  color: $uni-color-primary;
}
.content {
  font-size: 32rpx;
  margin: 0 5%;

  .picker {
    display: flex;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    margin: 20rpx 0;
    .picker_self {
      width: 100%;
    }
    .picker_title {
      z-index: 99;
      // width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
    }
  }
  .picker::after {
    content: "";
    position: absolute;
    left: 11%;
    top: 20%;
    width: 0;
    height: 0;
    border-top: 15rpx solid rgb(173, 173, 173);
    border-left: 15rpx solid transparent;
    border-right: 15rpx solid transparent;
  }
  .supplyList {
    .supplyCard {
      display: flex;
      width: 92%;
      margin: 3% 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%;
		display: flex;
		align-items: center;
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 20rpx;
          background-color: rgb(228, 228, 228);
        }
      }
      .info {
        display: flex;
        flex-flow: column;
        justify-content: space-around;
		.title {
			width: 100%;
			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: 32rpx;
		}
        .time {
          font-weight: 100;
          font-size: 26rpx;
        }
      }
    }
  }
  .menus {
    z-index: 999;
    display: flex;
    justify-content: space-around;
    width: 80%;
    // height: 6%;
    position: fixed;
    top: 85%;
    left: 50%;
    padding: 4%;
    border-radius: 40rpx;
    box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 0rpx;
    transform: translateX(-50%);
    background-color: #fff;
    image {
      width: 50rpx;
      height: 50rpx;
      border-radius: 10rpx;
    }
    .menu {
      display: flex;
      flex-flow: column;
      align-items: center;
      .menu_title {
        text-align: center;
        font-size: 28rpx;
      }
    }
  }
}
</style>