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.addtime }}</span>
		</view>
      <view class="view">
        <!-- <span class="label">详情：</span> -->
        <span>{{ item.content }}</span>
      </view>
      <view class="view">
        <!-- <span class="label">图片：</span> -->
        <view class="flex-box">
          <view v-if="item.attach_list.length == 0">-</view>
          <image :src="globalUrl + item1" v-for="(item1,index) in item.attach_list" :key="index" mode="aspectFit" @click="showlarge(item1)"/>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      id: "",
      details: "",
      imageList: [],
      time: "",
	  globalUrl:getApp().globalData.shareUrl,
	  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){
		src = this.globalUrl + src
		uni.previewImage({
		  urls: [src],
		  longPressActions: {
		    itemList: ["发送给朋友", "保存图片"],
		    success: function (data) {},
		    fail: function (err) {
		      console.log(err.errMsg);
		    },
		  },
		});
	},
	filterData(list){
		list.forEach((item)=>{
			 let time = this.$options.filters["globalTime"](item.addtime);
			 let timeSecond = this.$options.filters["globalTimeSecond"](item.addtime);
			 item.addtime = time + " " + timeSecond;
		})
	},
    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 : 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) {
			this.pageList = res.data.data.list;
			this.filterData(this.pageList)
          }
        },
        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: 3px 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: 3% 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>