newyqg/pages/hall/history.vue

<template>
	<view class="center">
		<view class="product">
			<image class="product-image" :src="info.image" mode=""></image>
			<view class="product-font font1">{{info.name}}</view>
			<view class="product-font font2">艺术家：{{info.user_nickname}}</view>
			<view class="product-font font2">{{info.create_time | time}}</view>
		</view>
		<view class="main">
			<view class="main-item">
				<view class="main-left">日期</view>
				<view class="main-right">归属人</view>
			</view>
			<view class="main-item">
				<view class="main-left">2022年01月20日</view>
				<view class="main-right">林兰</view>
			</view>
			<view class="main-item">
				<view class="main-left">2022年01月20日</view>
				<view class="main-right">林兰</view>
			</view>
			<view class="main-item">
				<view class="main-left">2022年01月20日</view>
				<view class="main-right">林兰</view>
			</view>
			<view class="main-item">
				<view class="main-left">2022年01月20日</view>
				<view class="main-right">林兰</view>
			</view>
		</view>
		<!-- <view class="ma">
			<view class="ma-main">
				
			</view>
			<view class="ma-font">
				溯源二维码
			</view>
		</view> -->
	</view>
</template>

<script>
import { belong,details } from '@/api/hall.js'
export default {
	data() {
		return {
			id:'',
			info:'',
		}
	},
	filters:{
		time(e){
			if(e != ''){
				let times = e.split(" ")
				let years = times[0].split("-")
				return years[0]+'年'+years[1]+'月'+years[2]+'日'
			}
			
		}
	},
	onLoad(option) {
		this.id = option.id;
		this.loadData();
	},
	methods: {
		loadData() {
			belong({product_id: this.id}).then(({data}) =>{
				console.log(data);
				details({product_id: this.id}).then(({data}) =>{
					this.info = data
				}).catch(e =>{
					
				})
			}).catch(e =>{
				console.log(e);
			})
		}
	},
}
</script>

<style lang="scss">
.center {
	background: #f8f8f8;
	height: auto;
	min-height: 100%;
}
.product {
	width: 670rpx;
	padding: 44rpx 0 40rpx 0;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 34rpx auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	.product-image {
		width: 300rpx;
		height: 300rpx;
		border-radius: 20rpx;
	}
	.product-font {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1d2023;
	}
	.font1 {
		margin-top: 34rpx;
	}
	.font2 {
		margin-top: 44rpx;
	}
}
.main {
	width: 670rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 30rpx auto 0;
	.main-item:first-child {
		border-top: none;
	}
	.main-item {
		padding: 2rpx 20rpx;
		display: flex;
		align-items: center;
		height: 104rpx;
		border-top: 1px solid #dddddd;
		.main-left {
			width: 50%;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1d2023;
		}
		.main-right {
			width: 50%;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1d2023;
		}
	}
}
.ma {
	width: 670rpx;
	padding: 46rpx 0;
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 30rpx auto 0;
	.ma-main {
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto;
		background: #000;
	}
	.ma-font {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1D2023;
		margin-top: 34rpx;
		text-align: center;
	}
}
</style>