RedDragonfly/pages/bazaar/VaseYard/particulars.vue

<template>
	<view class="particulars">
		<view class="top">
			<text class="text" @click="$goBack(2,'/pages/bazaar/VaseYard/reported?bottleId='+id)">窜货上报</text>
		</view>
		<view class="main">
			<view class="commodity">
				<view class="img">
					<img :src="data.url" mode=""></image>
				</view>
				<view class="right">
					<view class="list">
						<view class="left">
							名称
						</view>
						<view class="right">
							{{data.fullName || ''}}
						</view>
					</view>
					<view class="list">
						<view class="left">
							保质期
						</view>
						<view class="right">
							{{data.keepDate || ''}}
						</view>
					</view>
					<view class="list">
						<view class="left">
							是否转基因
						</view>
						<view class="right">
							{{data.gene == 0 ? '转基因' : data.gene == 1 ? '非转基因' : '未说明'}}
						</view>
					</view>
					<view class="list">
						<view class="left">
							产品标准号
						</view>
						<view class="right">
							{{data.productStandard || ''}}
						</view>
					</view>
					<view class="list">
						<view class="left">
							许可证编码
						</view>
						<view class="right">
							{{data.foodLicense || ''}}
						</view>
					</view>
					<view class="list">
						<view class="left">
							配料
						</view>
						<view class="right">
							{{data.ingredients || ''}}
						</view>
					</view>
					<view class="list">
						<view class="left">
							原料
						</view>
						<view class="right">
							{{data.sources || ''}}
						</view>
					</view>
					<view class="list">
						<view class="left">
							制作工艺
						</view>
						<view class="right">
							{{data.technology || ''}}
						</view>
					</view>
					<view class="list">
						<view class="left">
							厂名
						</view>
						<view class="right">
							{{data.factory || ''}}
						</view>
					</view>
				</view>
			</view>
			<view class="record" v-if="details">
				<view class="details" v-for="(v,i) in details" :key="i">
					<view class="th">
						<view class="td">
							<uni-icons type="contact" size="20"></uni-icons>
							<text>{{v.opPerson}}</text>
							/
							<text class="text">{{v.location}}</text>
						</view>
						<view class="time">
							{{getTime(v.opTime)}}
						</view>
					</view>
					<view class="r2" v-if="v.rcvCorp">
						经销商: {{v.rcvCorp}},{{v.opSendNum}}
					</view>
					<view class="r2" v-if="v.rcvPlace">
						收货地址: {{v.rcvPlace}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		check,
		origin
	} from '../../../api/bazaar.js'
		import store from '../../../store/index.js'
	export default {
		data() {
			return {
				id: '',
				data: '',
				details: []
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getData()
			this.getDetails()
		},
		created() {
			
		},
		mounted() {},
		methods: {
			async getData() {
				uni.showLoading({
					title: '加载中'
				});
				const res = await check({
					bottleId: this.id,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				console.log(res);
				uni.hideLoading();
				this.data = res.data.data
				store.dispatch('addAppear',res.data.data)
			},
			async getDetails() {
				const res = await origin({
					bottleId: this.id,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				this.details = res.data.op
			},
			// 获取时间
			getTime(time = new Date()) {
				let date = new Date(time);
				let	year = date.getFullYear();
				let	month = date.getMonth() + 1;
				let	day = date.getDate();
					month >= 1 && month <= 9 ? (month = "0" + month) : "";
					day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let timer = year + '-' + month + '-' + day;
				return timer;
			}
		}
	}
</script>

<style lang="scss">
	.particulars {
		.top {
			height: 100rpx;
			line-height: 100rpx;
			background-color: #e40315;
			text-align: right;

			.text {
				padding: 30rpx;
				color: #fff;
			}
		}

		.main {
			padding: 20rpx;

			.commodity {
				display: flex;
				align-items: center;
				border-bottom: 2px solid #cacaca;

				.img {
					width: 220rpx;
					height: 360rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					flex: 1;

					.list {
						display: flex;
						justify-content: space-between;
						border-bottom: 1rpx solid #dfdfdf;
						padding: 15rpx 0;

						&:last-child {
							border-bottom: 0;
						}

						.left {
							width: 160rpx;
						}

						.right {
							flex: 1;
							text-align: right;
							color: #8f8f8f;
						}
					}
				}
			}

			.record {
				.details {
					padding: 20rpx 0;
					border-bottom: 1rpx solid #cacaca;
					.th{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.td {
						.text {
						color: #49bf5e;
					}
					}
				}

				.r2 {
					margin: 20rpx 0;
				}
			}
		}
	}
</style>