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

<template>
  <view class="content">
    <view class="title">
      {{ title }}
    </view>
    <view class="details">
      <view class="view">
        <span class="label">详情：</span>
        <span style="width: 80%;">{{ details }}</span>
      </view>
      <view class="view">
        <span class="label">类型：</span>
        <span style="width: 80%;">{{ type }}</span>
      </view>
      <view class="view">
        <span class="label">图片：</span>
        <view class="flex-box">
          <view v-if="imageList.length == 0">-</view>
          <image :src="item.url" v-for="item in imageList" :key="item.id" mode="aspectFit" @click="showlarge(item.url)"/>
        </view>
      </view>
      <view class="view">
        <span class="label">发布时间：</span>
        <span style="width: 80%;">{{ time }}</span>
      </view>
    </view>
    <view class="info">
      <view class="title">企业信息</view>
      <view class="view">
        <span class="label">企业名称：</span>
        <span>{{ info.name }}</span>
      </view>
      <view class="view">
        <span class="label">统一社会信用代码：</span>
        <span>{{ info.code }}</span>
      </view>
      <view class="view">
        <span class="label">联系电话：</span>
        <span>{{ info.tel }}</span>
      </view>
    </view>
  </view>
</template>


<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      id: "",
      title: "",
      details: "",
      type: "",
      imageList: [],
      time: "",
      info: {
        name: "",
        code: "",
        tel: "",
      },
    };
  },
  onLoad(op) {
    this.id = op.id;
    this.getSupplyDeatil();
  },
  methods: {
	showlarge(src){
		uni.previewImage({
		  urls: [src],
		  longPressActions: {
		    itemList: ["发送给朋友", "保存图片"],
		    success: function (data) {},
		    fail: function (err) {
		      console.log(err.errMsg);
		    },
		  },
		});
	},
    getSupplyDeatil() {
      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=info_by_id&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        id: this.id,
        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.data.data);
          if (res.data.code === 200) {
            let data = res.data.data;
            this.details = data.content;
            this.title = data.title;
            this.type = data.type == 1 ? "需求" : "供需";
            let time = this.$options.filters["globalTime"](data.addtime);
            let timeSecond = this.$options.filters["globalTimeSecond"](
              data.addtime
            );
            this.time = time + " " + timeSecond;
            this.info.name = data.company_name;
            this.info.code = data.company_code;
            this.info.tel = data.phone;
            this.imageList = data.attach_list.map((item) => {
              item.url = getApp().globalData.shareUrl + item.url;
              return item;
            });
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-box {
  display: flex;
}
.view {
  display: flex;
}
.content {
  font-size: 32rpx;
  .title {
    margin: 4% 5%;
  }
  .details {
    font-size: 28rpx;
    width: 90%;
    margin: 0 2%;
    padding: 2% 3%;
    border-radius: 50rpx;
    box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 14rpx;
    image {
      width: 180rpx;
      height: 150rpx;
      border-radius: 30rpx;
      margin: 0 2%;
    }
    .view {
      margin: 5% 0;
    }
    .label {
      display: inline-block;
      width:150rpx;
      vertical-align: middle;
      margin-right: 10rpx;
    }
  }
  .info {
    font-size: 28rpx;
    width: 90%;
    margin: 4% 2%;
    padding: 2% 3%;
    border-radius: 40rpx;
    box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 14rpx;
    .title {
      margin: 4% 0;
      font-size: 32rpx;
    }
    .view {
      display: flex;
      align-items: center;
      margin: 5% 0;
    }
    .label {
      display: inline-block;
      width: 150rpx;
      vertical-align: middle;
      margin-right: 10rpx;
    }
  }
}
</style>