160 lines
3.6 KiB
Vue
160 lines
3.6 KiB
Vue
<template>
|
|
<view class="album_page">
|
|
<view class="banner">
|
|
<view class="img">
|
|
<image :src="topImg" mode="aspectFill" style="width: 100%;height: 100%;"></image>
|
|
<view class="topText tn-flex tn-flex-center-between tn-w-full tn-p-lg">
|
|
<view class="icon">
|
|
<image :src="config.logo" mode="aspectFill" style="width: 100%;height: 100%;"></image>
|
|
</view>
|
|
<view class="title tn-text-2xl tn-mt-xl tn-pt-sm">
|
|
{{config.siteName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content tn-radius tn-shadow tn-pt-sm tn-pl-xs tn-pr-xs">
|
|
<view class="title tn-text-bold tn-text-xl tn-text-center tn-p-sm">
|
|
{{detail.title}}
|
|
</view>
|
|
<view class="info tn-p-xs tn-flex tn-flex-center-around tn-border-bottom tn-grey-light_border tn-gray-dark_text">
|
|
<view class="user tn-flex">
|
|
<view>
|
|
<tn-icon name="my-love" size="28"/>
|
|
</view>
|
|
<view class="">
|
|
{{detail.user}}
|
|
</view>
|
|
</view>
|
|
<view class="time tn-flex">
|
|
<view>
|
|
<tn-icon name="time" size="28"/>
|
|
</view>
|
|
<view class="">
|
|
{{dayjs(detail.createTime).format('YYYY-MM-DD')}}
|
|
</view>
|
|
</view>
|
|
<view class="click tn-flex">
|
|
<view>
|
|
<tn-icon name="eye" size="28"/>
|
|
</view>
|
|
<view>
|
|
{{Number(detail.clickNum) + Number(detail.addNum)}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="album tn-mt tn-mb tn-ml-sm">
|
|
<view class="summary tn-pt tn-pb" v-if="detail.summary">
|
|
{{detail.summary}}
|
|
</view>
|
|
<TnPhotoAlbum :data="detail.image" :max="100" :column="2"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import request from '@/utils/request';
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import TnPhotoAlbum from '@/uni_modules/tuniaoui-vue3/components/photo-album/src/photo-album.vue'
|
|
import dayjs from 'dayjs';
|
|
import config from '@/config/config';
|
|
const topImg = ref('/static/index_top.jpg')
|
|
|
|
const cateId = ref()
|
|
|
|
const id = ref()
|
|
|
|
const detail = reactive<{
|
|
image?:[],
|
|
title?:string,
|
|
user?:string,
|
|
createTime?:string,
|
|
clickNum?:number,
|
|
addNum?:number,
|
|
summary?:string
|
|
}>({})
|
|
|
|
|
|
const getDetail = (cateId:number,id:number) => {
|
|
request({
|
|
url: '/front/content/detail?id=' + id,
|
|
method:'GET',
|
|
data:{'id':id}
|
|
}).then(res =>{
|
|
Object.assign(detail,res.data.data)
|
|
if(res.data.data.image){
|
|
let images = JSON.parse(res.data.data.image)
|
|
detail.image = images
|
|
}else{
|
|
getMenuData(cateId)
|
|
}
|
|
uni.setNavigationBarTitle({
|
|
title:res.data.data.title
|
|
})
|
|
})
|
|
}
|
|
|
|
const getMenuData = (cateId:number) => {
|
|
request({
|
|
url: '/front/content/category/info',
|
|
method:'GET',
|
|
data:{'cateId':cateId}
|
|
}).then(res=>{
|
|
topImg.value = res.image
|
|
})
|
|
}
|
|
|
|
onLoad((options) => {
|
|
cateId.value = options.cateId
|
|
id.value = options.id
|
|
})
|
|
|
|
onMounted(()=>{
|
|
getDetail(cateId.value,id.value)
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.album_page{
|
|
background-color: #f3f4f6;
|
|
.banner{
|
|
height: 450rpx;
|
|
position: relative;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
.topText{
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 50rpx;
|
|
left: 0;
|
|
.icon{
|
|
width: 280rpx;
|
|
height: 100rpx;
|
|
}
|
|
.title{
|
|
letter-spacing: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
top: 330rpx;
|
|
left: 0;
|
|
background:linear-gradient(180deg,rgba(255, 255, 255, 0.01),rgba(255, 255, 255, 0.9))
|
|
}
|
|
}
|
|
.content{
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
top:-160rpx;
|
|
}
|
|
}
|
|
</style> |