<template> <div id="growUpTrip"> <div class="position_box"> <div class="line" v-if="AlbumArr>0"></div> <div class="trip_item" v-for="(item,index) in AlbumArr" :key="index" @click="handleAlbum(item)"> <p class="time"><span>{{item.time}}</span><br><span class="year">{{item.year}}</span></p> <div class="point"></div> <div class="content"> <div class="img_box"> <img :src="item.img" alt=""> </div> <p class="title">{{item.className}}</p> <span class="btn">查看相册</span> </div> </div> <van-empty v-if="finished&&AlbumArr.length==0" :image="require('@/assets/empty.png')" description="暂无相册" /> </div> </div> </template> <script> export default { data () { return { userInfo: '', AlbumArr: [], finished:false } }, mounted () { var userInfo = localStorage.getItem('userInfo'); if (userInfo) { this.userInfo = JSON.parse(userInfo); } this.getPhotoBaseAlbumByUser()//获取当前用户相关的商户相册 }, methods: { // 点击查看相册,进入相册详情页 handleAlbum (item) { localStorage.setItem('albumTitle', item.className) localStorage.setItem('albumTime', this.Moment(item.timeName).format(('YYYY-MM-DD'))) this.$router.push({ name: "GrowUpAlbum", query: { timeNo: item.timeNo } }) }, //获取当前用户相关的商户相册 getPhotoBaseAlbumByUser () { this.http.getPhotoBaseAlbumByUser({ // "centerNo": '202110131742560412868180003634' "centerNo": this.userInfo.centerNo }).then((res) => { console.log('行程相册:', res) if (res.code == 200) { this.finished = true let AlbumArr = res.rows; for (let i in AlbumArr) { AlbumArr[i].time = this.Moment(AlbumArr[i].timeName).format(('MM-DD')) AlbumArr[i].year = this.Moment(AlbumArr[i].timeName).year() } this.AlbumArr = AlbumArr console.log(AlbumArr) } else { this.$toast(res.message); } }) } } } </script> <style lang="scss"> #growUpTrip { height: 100%; box-sizing: border-box; background: rgb(247, 246, 250); padding: 0 24px; padding-top: 70px; overflow: auto; .position_box { position: relative; .line { width: 1px; height: 100%; position: absolute; background: #dce7ff; top: 12px; left: 120px; } } .trip_item { display: flex; position: relative; padding-bottom: 40px; .time { font-size: 30px; line-height: 40px; width: 90px; .year{ font-size: 26px; color: #999; } } .point { width: 16px; height: 16px; border-radius: 50%; background: #3074ff; margin: 12px 34px 0 20px; border: 2px solid #c0d4ff; } .content { width: 528px; height: 216px; background: #fff; border-radius: 12px; padding: 18px; box-sizing: border-box; display: flex; position: relative; .img_box { width: 90px; height: 90px; border-radius: 8px; overflow: hidden; position: relative; margin-right: 22px; img { height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } } .title { font-size: 28px; } .btn { font-size: 24px; color: #21a3ff; position: absolute; bottom: 30px; right: 34px; } } } } </style>