ng_notes_mini/pages/index/record/record.vue

<template>
  <view class="content">
    <view class="details" v-for="item in pageList" :key="item.id">
		<view class="view">
		  <!-- <span class="label">发布时间：</span> -->
		  <span style="width: 80%;color: darkgray;">{{ item.publishTime }}</span>
		</view>
      <view class="view">
        <!-- <span class="label">详情：</span> -->
        <span style="width: 80%;">{{ item.content }}</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>
  </view>
</template>


<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      id: "",
      details: "",
      imageList: [],
      time: "",
	  pageList:[
		  {
			  id:'1',
			  content:'从现在起直到21世纪中叶的30年，将有可能成为“人类命运共同体”在世界范围逐步实现的关键阶段。随着“人类命运共同体”在世界范围逐步成为现实，大国关系包含中美关系经过种种曲折，逐步转化到一个相互尊重、平等相待、和平共处、合作共赢的轨道上来，这才是人心所向',
			  imgList:[],
			  publishTime:'2021.12.25 14:15:00'
		  },
		  {
			   id:'2',
			  content:'从现在起直到21世纪中叶的30年，将有可能成为“人类命运共同体”在世界范围逐步实现的关键阶段。随着“人类命运共同体”在世界范围逐步成为现实，大国关系包含中美关系经过种种曲折，逐步转化到一个相互尊重、平等相待、和平共处、合作共赢的轨道上来，这才是人心所向',
			  imgList:[],
			  publishTime:'2021.12.26 12:11:00'
		  },
		  {
			  id:'3',
			  content:'从现在起直到21世纪中叶的30年，将有可能成为“人类命运共同体”在世界范围逐步实现的关键阶段。随着“人类命运共同体”在世界范围逐步成为现实，大国关系包含中美关系经过种种曲折，逐步转化到一个相互尊重、平等相待、和平共处、合作共赢的轨道上来，这才是人心所向',
			  imgList:[],
			  publishTime:'2021.12.27 13:35:00'
		  },
	  ]
    };
  },
  onLoad() {
    this.getRecordList();
  },
  methods: {
	showlarge(src){
		uni.previewImage({
		  urls: [src],
		  longPressActions: {
		    itemList: ["发送给朋友", "保存图片"],
		    success: function (data) {},
		    fail: function (err) {
		      console.log(err.errMsg);
		    },
		  },
		});
	},
    getRecordList() {
      let md5Sign = md5(
        "method=" +
          "activity" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=activity&action=my_process&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        // id: this.id,
         openid : "asfsfsffa",
      };
      //获取文章
      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;
            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-bottom: 1px solid #f2f2f2;
    // 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: 2% 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>