yubaitong-c/src/pages/contrast/contrast - 副本 (4).vue

<template>
	<view class="user-setting-box">
		<uni-nav-bar :status-bar="false" :shadow="false" :border="false" :fixed="true" color="#333" background-color=""
			height="88px" leftWidth="0" rightWidth="0">
			<view class="nav-bg">
				<view class="status-bar"></view>
				<view class="nav-title">
					<view class="left">
						<IconText style="padding: 5px;" @click.native="handleBack" color="#666" :code="`\ue709`"
							size="16" />
						<IconText style="padding: 5px;" @click.native="handleFront" color="#333" :code="`\ue8a0`"
							size="18" />
					</view>
					<view class="title">比奶粉</view>
					<view class="right"></view>
				</view>
			</view>
		</uni-nav-bar>
		<view class="content">
			<!-- <view class="left-fixed">
				<view class="info">
					
				</view>
			</view> -->
			<view class="top-goods-box">
				<view>
					<view class="left">
						<view class="info"></view>
					</view>
					<view class="goods-list">
						<view class="good-item" v-for="(item, index) in goodsList" :key="index">
							<image :src="item.masterPic" class="pic" mode="aspectFill">
							</image>
							<view class="name">{{item.name}}</view>
							<view class="price-box">参考价：<view class="price">¥{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-info-box">
				<view class="left">
					<view class="title"
						:style="{backgroundImage: `url(${staticUrl ? staticUrl + 'title-bg.png' : ''})`}">基础概况</view>
					<view class="table">
						<view class="row" v-for="(item, index) in baseInfo" :key="index">
							<view class="ceil">
								{{item.name}}
								<view class="hidden-box">
									
								</view>
							</view>
						</view>
					</view>
					<view class="title"
						:style="{backgroundImage: `url(${staticUrl ? staticUrl + 'title-bg.png' : ''})`}">综合对比</view>
					<view class="table">
						<view class="row" v-for="(item, index) in comprehensiveInfo" :key="index">
							<view class="ceil">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="title"
						:style="{backgroundImage: `url(${staticUrl ? staticUrl + 'title-bg.png' : ''})`}">营养成分</view>
					<view class="table">
						<view class="row">
							<view class="ceil head-ceil">基础营养</view>
						</view>
						<view class="row" v-for="(item, index) in componentInfo1" :key="index">
							<view class="ceil ceil2">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="table">
						<view class="row">
							<view class="ceil head-ceil">基础营养</view>
						</view>
						<view class="row" v-for="(item, index) in componentInfo2" :key="index">
							<view class="ceil ceil2">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="title"></view>
					<view class="table">
						<view class="row" v-for="(item, index) in baseInfo" :key="index">
							<view class="ceil" v-for="(ceil, ceilIndex) in goodsList" :key="ceilIndex">
								{{ceil[item.key] || '-'}}
							</view>
						</view>
					</view>
					<view class="title"></view>
					<view class="table">
						<view class="row" v-for="(item, index) in comprehensiveInfo" :key="index">
							<view class="ceil" v-for="(ceil, ceilIndex) in goodsList" :key="ceilIndex">
								<view v-if="item.type === 'list'">
									<view v-if="ceil[item.key] && ceil[item.key].length" class="ceil-list">
										<view v-for="(i,j) in ceil[item.key]" :key="j" class="ceil-list-item">
											{{i.labelName}}
										</view>
									</view>
									<view v-else>
										-
									</view>
								</view>
								<view v-else>
									{{ceil[item.key] || '-'}}
								</view>
							</view>
						</view>
					</view>
					<view class="title"></view>
					<view class="table">
						<view class="row">
							<view class="ceil head-ceil" v-for="(ceil, ceilIndex) in goodsList" :key="ceilIndex">
								每100g
							</view>
						</view>
						<view class="row" v-for="(item, index) in componentInfo1" :key="index">
							<view class="ceil ceil2" v-for="(ceil, ceilIndex) in goodsList" :key="ceilIndex">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="table">
						<view class="row">
							<view class="ceil head-ceil" v-for="(ceil, ceilIndex) in goodsList" :key="ceilIndex">
								每100g
							</view>
						</view>
						<view class="row" v-for="(item, index) in componentInfo2" :key="index">
							<view class="ceil ceil2" v-for="(ceil, ceilIndex) in goodsList" :key="ceilIndex">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <TabBar></TabBar> -->
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Mixins
	} from 'vue-property-decorator';
	import loginMixin from '@/common/mixins/loginMixin.ts';
	import {
		types
	} from '@/common/store/index';
	import {
		namespace
	} from 'vuex-class';
	const baseModule = namespace('base');
	@Component({})
	export default class SelectBaby extends Mixins(loginMixin) {
		// @baseModule.Getter('_userInfo') _userInfo: any;
		@baseModule.Mutation(types.SET_TABBARINDEX) setTabBarIndex : any;
		staticUrl : string = this.$oss_url; 	//oss地址\
		goodsList : any = []
		baseInfo : any = [
			{
				name: '品牌',
				key: 'brandName'
			},
			{
				name: '产地',
				key: 'milkOriginName'
			},
			{
				name: '版本',
				key: 'milkVersionName'
			},
			{
				name: '类别',
				key: 'milkCategoryName'
			},
			{
				name: '奶源',
				key: 'milkSourceName'
			},
			{
				name: '价格',
				key: 'price'
			},
			{
				name: '段位',
				key: 'milkStageName'
			},
			{
				name: '规格',
				key: 'milkSpecificationName'
			},
			{
				name: '适用年龄',
				key: 'milkRecommendedAgeName'
			},
		];

		comprehensiveInfo : any = [
			{
				name: '优点',
				key: 'advantageLabels',
				type: 'list'
			},
			{
				name: '常规配方',
				key: 'normalLabels',
				type: 'list'
			},
			{
				name: '强化配方',
				key: 'fortifyLabels',
				type: 'list'
			},
			// {
			// 	name: '注意',
			// 	key: 'a'
			// },
			{
				name: '奶源分析',
				key: 'sourceReview'
			},
			{
				name: '原料分析',
				key: 'materialReview'
			},
		];

		componentInfo1 : any = [
			{
				name: '能量(kJ)',
				key: 'a'
			},
			{
				name: '蛋白质(g)',
				key: 'a'
			},
			{
				name: '脂肪(g)',
				key: 'a'
			},
			{
				name: '亚油酸(g)',
				key: 'a'
			},
			{
				name: 'α-亚麻酸(mg)',
				key: 'a'
			},
			{
				name: '碳水化合物(g)',
				key: 'a'
			},
		];

		componentInfo2 : any = [
			{
				name: '维生素A(μgRE)',
				key: 'a'
			},
			{
				name: '维生素D(μg)',
				key: 'a'
			},
			{
				name: '维生素E(mgα-TE)',
				key: 'a'
			},
			{
				name: '牛磺酸(mg)',
				key: 'a'
			},
			{
				name: '左旋肉碱(mg)',
				key: 'a'
			},
			{
				name: 'DHA(mg)',
				key: 'a'
			},
			{
				name: 'ARA/AA(mg)',
				key: 'a'
			},
			{
				name: '低聚半乳糖(g)',
				key: 'a'
			},
			{
				name: '低聚果糖(g)',
				key: 'a'
			},
			{
				name: 'OPO(g)',
				key: 'a'
			},
			{
				name: '叶黄素(μg)',
				key: 'a'
			},
			{
				name: '核苷酸(mg)',
				key: 'a'
			},
			{
				name: '乳铁蛋白(mg)',
				key: 'a'
			},
			{
				name: 'HMO(g)',
				key: 'a'
			},
		];
		scrollLeft : any = 0;
		scrollTop : any = 0;
		ids : any = [];

		onShow() {
			console.log(this.$Route.query.ids)
			this.ids = [21, 19, 20];
			let promise = this.ids.map((item : any) => {
				return this.getGoodDetail(item);
			});
			Promise.all(promise).then((res : any) => {
				this.goodsList = res;
			})
		}

		getGoodDetail(id : any) {
			return this.$http
				.get({
					url: this.$api.getGoodInfo,
					data: {
						id
					}
				})
				.then((res : any) => {
					return res;
				}, (err : any) => {
					console.log(err);
				});
		}

		handleBack() {
			this.$Router.back(1);
		}

		handleFront() {
			this.$Router.pushTab({
				path: '/pages/front/front'
			})
		}

		scrollInfo(e : any) {
			console.log(e)
			this.scrollTop = e.detail.scrollTop;
			this.scrollLeft = e.detail.scrollLeft;
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	/deep/.uni-navbar__header {
		padding: 0 !important;

		.uni-navbar__header-container {
			padding: 0 !important;
		}
	}

	.user-setting-box {
		height: 100vh;
		@include flex-y(flex-start);

		.nav-bg {
			width: 100%;
			background: #fff;
			@include flex-y(flex-start);
			background: linear-gradient(180deg, #FFD9F9 0%, #F1E6FF 67.19%, #F1E9FE 82.84%, #FBF6FC 100%);

			.status-bar {
				// height: var(--status-bar-height);
				height: 44px;
			}

			.nav-title {
				width: 100%;
				box-sizing: border-box;
				height: 40px;
				padding: 0 vw(3);
				@include flex-x();
				@include word-vw(16, #000);

				.left,
				.right {
					width: vw(60);
					@include flex-x(flex-satrt);
				}

				.title {
					flex: 1;
					@include flex-x(center);
				}
			}
		}

		.content {
			width: 100%;
			height: 100%;
			overflow: auto;
			// padding: 0 vw(15);
			box-sizing: border-box;
			@include flex-y(flex-start, flex-start);

			&::-webkit-scrollbar {
				width: 0px;
				height: 0px;
			}

			.left-fixed {
				box-sizing: border-box;
				position: sticky;
				left: 0;
				top: 0;
				// top: 88px;
				// left: 0;
				z-index: 999;
				padding-top: vw(16);
				background: #F6F8FB;

				.info {
					width: vw(110);
					height: vw(144);
					border: vw(1) solid #EBEBEB;
					background: #fff;
					box-sizing: border-box;
				}
			}

			// padding-bottom: vw(50);
			.top-goods-box {
				width: 100%;
				height: vw(160);
				padding-top: vw(16);
				background: #F6F8FB;
				@include flex-x(flex-start, flex-end);
				box-sizing: border-box;
				position: sticky;
				top: 0;
				background: #F6F8FB;
				z-index: 100;

				.left {
					width: vw(110);
					padding-top: 16px;
					height: vw(160);
					flex-shrink: 0;
					box-sizing: border-box;
					position: sticky;
					left: 0;
					top: 0;

					.info {
						width: vw(110);
						height: vw(144);
						background: #fff;
						border: vw(1) solid #EBEBEB;
						border-left-width: 0;
						box-sizing: border-box;
					}

					// top: 104px;
				}

				.goods-list {
					@include flex-x(flex-start);
					padding-top: 16px;
					background: #F6F8FB;
					padding-left: vw(110);

					.good-item {
						width: vw(100);
						height: vw(144);
						border: vw(1) solid #EBEBEB;
						border-left-width: 0;
						box-sizing: border-box;
						flex-shrink: 0;
						@include flex-y(flex-start);
						background: #fff;

						.pic {
							@include wh(64, 64);
							margin-top: vw(16);
							background: red;
						}

						.name {
							@include flex-x(center);
							text-align: center;
							@include word-vw(10, #333);
							margin-top: vw(5);
							padding: 0 vw(3);
							box-sizing: border-box;
							font-weight: bold;
							@include multi(2);
						}

						.price-box {
							@include word-vw(10, #999);
							@include flex-x(center);
							margin-top: vw(5);

							.price {
								@include word-vw(12, #FF5733);
							}
						}
					}
				}
			}

			.title {
				// width: vw(98);
				background: #F6F8FB;
				@include word-vw(14, #333);
				font-weight: bold;
				height: vw(35);
				@include flex-x(flex-start);
				background-size: auto vw(6);
				background-position: vw(12) vw(22);
				background-repeat: no-repeat;
				// margin-left: vw(12);
				padding-left: vw(18);
				box-sizing: border-box;
			}

			.table {
				border-bottom: vw(1) solid #EBEBEB;

				.row {
					@include flex-x(flex-start);
					align-items: stretch;

					.ceil {
						width: vw(100);
						min-height: vw(32);
						// height: 100%;
						flex: 1;
						border-top: vw(1) solid #EBEBEB;
						border-right: vw(1) solid #EBEBEB;
						box-sizing: border-box;
						@include word-vw(12, #999);
						@include flex-x(center);
						flex-shrink: 0;
						background: #fff;

						&.ceil2 {
							min-height: vw(40);
						}

						&.head-ceil {
							min-height: vw(40);
							background: #6389FF;
							border: vw(1) solid #618AFF;
							box-sizing: border-box;
							@include word-vw(12, #fff);
						}
						.ceil-list{
							@include flex-y(flex-start);
						}
						.ceil-list-item{
							width: vw(86);
							background: #FFEEDE;
							@include word-vw(12, #FF7E33);
							border-radius: vw(5);
							height: vw(22);
							@include flex-x(center);
							margin: vw(3) 0;
						}
					}
				}
			}

			.bottom-info-box {
				// width: 100vw;
				// flex: 1;
				// overflow: auto;
				// padding-bottom: 80px;
				box-sizing: border-box;
				@include flex-x(flex-start, flex-start);

				.bottom-info-scroll {
					// width: vw(110);
					width: 100%;
					height: 100%;

					&::-webkit-scrollbar {
						width: 0px;
						height: 0px;
					}
				}

				.bottom-info-a {
					@include flex-x(flex-start);
				}

				.left {
					width: vw(110);
					position: sticky;
					left: 0;

					.ceil {
						width: vw(110);
						@include flex-x(center);
						.hidden-box{
							width: 0;
						}
					}

					.title {
						width: vw(110);
					}
				}

				.right {

					// flex:1;
					.ceil {
						width: vw(100);
					}

					.title {
						width: vw(100);
					}
				}
			}
		}
	}
</style>