yicangzongtai_app_240321/pages/goodsDetail/index.vue

<template>
		<!-- 废弃页面 -->
		<view class="main">
			<navbar :config="config" backColor="#666"></navbar>
			<view id="page-top">
				<div class="banner"></div>
				<div class="price-box">
					<text v-if="goodsType == 1" class="integral">
						<text class="iconfont2 integral-icon">&#xe669;</text>
						<text class="integral-num">100</text>
					</text>
					<text v-if="goodsType == 3" class="new-price">
						<text class="company">¥</text>
						<text class="integer">269.</text>
						<text class="float">00</text>
					</text>
					<text v-if="goodsType == 2" class="tip">免费领</text>
					<text class="old-price">¥ 298.00</text>
					<text v-if="goodsType == 3" class="discount">4.0折</text>
				</div>
				<view class="title-box">
					<image src="/static/common/tag1.png" mode="aspectFit"></image>
					<text class="title">复合调味料/三烤竹盐复合调味料/竹 盐古味五味/竹盐古味香辣/富硒竹盐</text>
					<view class="buyed">
						已售
						<text>23</text>
						件，仅剩
						<text>87</text>
						件
					</view>
				</view>
				<view class="discount-notice">
					<view class="tag"><text>首单优惠</text></view>
					<view class="content">满500元减50元</view>
				</view>
				<view class="split"></view>
				<view class="shop-box">
					<image class="avatar"></image>
					<view class="right">
						<view class="title">岭南置业店</view>
						<view class="addr">湖北武汉市江岸区湖北武汉市江岸区</view>
					</view>
					<text class="right-icon iconfont">&#xe6c7;</text>
				</view>
				<view class="split"></view>
			</view>
			<view class="tab-box" :style="`top: calc(${statusBarHeight}px + 44px)`">
				<view v-for="(item, index) in tabList" :key="index" class="tab" :class="tabActiveIndex == index ? 'active' : ''" @click="tabClick(index)">{{ item.text }}</view>
			</view>
			<view>
				<view v-show="tabActiveIndex == 0">
					<image
						style="width: 500rpx;display: block;margin: 150rpx auto;"
						mode="widthFix"
						src="https://img1.baidu.com/it/u=2629574589,3187499507&fm=253&fmt=auto&app=138&f=JPEG?w=545&h=500"
					></image>
					<image
						style="width: 500rpx;display: block;margin: 150rpx auto;"
						mode="widthFix"
						src="https://img2.baidu.com/it/u=1496534469,791535097&fm=253&fmt=auto&app=138&f=JPEG?w=366&h=500"
					></image>
					<image
						style="width: 500rpx;display: block;margin: 150rpx auto;"
						mode="widthFix"
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.benlailife.com%2FProductImages%2F000%2F000%2F036%2F648%2Fbig%2Fc77f0865-632f-4120-ba69-fd80a81da655.jpg&refer=http%3A%2F%2Fimage.benlailife.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660444536&t=a102caf3ecd390e19d131c6f69657603"
					></image>
				</view>
				<view v-show="tabActiveIndex == 1">
					<view class="comment-list">
						<view class="item" v-for="(item,index) in 5" :key="index">
							<image class="avatar"></image>
							<view class="content">
								<view class="title">某人</view>
								<view class="star-box">
									<text v-for="item in 5" :key="item" class="iconfont2 star" :class="item < 6?'active':''">&#xe60f;</text>
								</view>
								<view class="desc">默认好评默认好评默认好评默认好评默认好评默认好评默认好评默认好评默认好评默认好评默认好评默认好评默认好评默认好评默认好评默认好评</view>
							</view>
							<view class="time">2022-07-05</view>
						</view>
					</view>
				</view>
			</view>
			<view class="seat"></view>
			<view class="bottom-box">
				<view class="box">
					<view class="iconfont2">&#xe684;</view>
					<text class="tip">分享</text>
				</view>
				<view class="box">
					<view class="iconfont2">&#xe6bf;</view>
					<text class="tip">收藏</text>
				</view>
				<!-- 带积分、免费领、礼包不能加入“购物车” -->
				<view class="box">
					<view class="iconfont2">&#xe600;</view>
					<text class="tip">购物车</text>
				</view>
				<button class="btn add-cart">加入购物车</button>
				<button @click="submit()" class="btn buy">立即购买</button>
			</view>
			<!-- 服务体系礼包才有的弹窗 -->
			<uni-popup class="tip-popup" ref="submitPopup" type="center" :mask-click="false">
				<view class="content-box">
					<view class="title">请确认所属区域</view>
					<view class="content">
						<view class="check-tip">请选择</view>
						<view class="check-input">
							<input placeholder="请选择所属地区" />
							<text class="iconfont2">&#xe65f;</text>
						</view>
						<view class="tip" style="width: 416rpx;">
							注意：请认证选择所属区域，选择 和自身属地收益相关
						</view>
						<view class="btn-box">
							<button @click="closePopup()">取消</button>
							<button @click="closePopup()">继续购买</button>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
</template>

<script>
export default {
	data() {
		return {
			//手机状态栏高度
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			config: {
				back: true,
				title: '商品详情',
				color: '#1a1a1a',
				backgroundColor: [1, '#fff'],
				statusBarFontColor: 'black'
			},
			tabList: [
				{
					text: '商品详情'
				},
				{
					text: '用户评论(198)'
				}
			],
			tabActiveIndex: 0,
			goodsType: 3, //商品类型 1 积分  2免费领 3 现金
		};
	},
	mounted() {},
	methods: {
		tabClick(index) {
			let that = this;
			this.tabActiveIndex = index;
			// this.$nextTick(function() {
			// 	const query = uni.createSelectorQuery().in(that);
			// 	query.select('#page-top').boundingClientRect(data => {
			// 	  uni.pageScrollTo({
			// 	  	scrollTop: data.height,
			// 			duration: 300
			// 	  })
			// 	}).exec();
			// });
		},
		submit(){
			this.$refs.submitPopup.open();
		},
		closePopup(){
			this.$refs.submitPopup.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	.split {
		width: 100%;
		height: 8rpx;
		background: #f5f5f5;
	}
	.banner {
		width: 100%;
		height: 620rpx;
		background-image: url('/static/freeCollection/banner.png');
		background-size: 100% 100%;
	}
	.price-box {
		width: 100%;
		height: 99rpx;
		background: linear-gradient(90deg, #20a733, #0a824b);
		border-radius: 20rpx 20rpx 0px 0px;
		margin-top: -25rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		.tip {
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #ffffff;
			line-height: 24rpx;
		}
		.integral {
			vertical-align: middle;
			.integral-icon {
				font-size: 50rpx;
				color: white;
				vertical-align: middle;
			}
			.integral-num {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: white;
				line-height: 24rpx;
				margin: 0 10rpx 0 0;
				vertical-align: middle;
			}
		}
		.new-price {
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: bold;
			text-align: left;
			color: white;
			line-height: 24rpx;
			.company {
				font-size: 20rpx;
				font-weight: 300;
				margin-right: 5rpx;
			}
			.integer {
				font-size: 38rpx;
			}
			.float {
				font-size: 20rpx;
				font-weight: 400;
			}
		}
		.old-price {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-decoration: line-through;
			text-align: left;
			color: #ffffff;
			line-height: 24rpx;
			margin-left: 19rpx;
			text-decoration: line-through;
		}
		.discount {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #ffffff;
			line-height: 24rpx;
			margin-left: 20rpx;
		}
	}
	.title-box {
		padding: 26rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
		image {
			width: 102rpx;
			height: 30rpx;
			margin-right: 20rpx;
			vertical-align: middle;
		}
		.title {
			vertical-align: middle;
			font-size: 35rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #1a1a1a;
			line-height: 50rpx;
		}
		.buyed {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #999999;
			margin-top: 18rpx;
			line-height: 1;
			text {
				color: #ff0000;
			}
		}
	}
	.discount-notice {
		height: 84rpx;
		width: 690rpx;
		margin: 0 auto 40rpx auto;
		background: #fff6ee;
		border-radius: 10rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		.tag {
			height: 45rpx;
			width: 120rpx;
			border: 1px solid #ff0000;
			border-radius: 24rpx;
			text-align: center;
			text {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #ff0000;
				line-height: 45rpx;
			}
		}
		.content {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #ca7e57;
			line-height: 84rpx;
			margin-left: 13rpx;
		}
	}
	.shop-box {
		padding: 35rpx 30rpx;
		display: flex;
		align-items: center;
		.avatar {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			margin-right: 25rpx;
			background-color: #f5f5f5;
		}
		.right {
			.title {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #1a1a1a;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 540rpx;
			}
			.addr {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #999999;
				line-height: 30rpx;
				margin-top: 5rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 540rpx;
			}
		}
		.right-icon {
			color: #000000;
			width: 15rpx;
			font-weight: bold;
		}
	}
	.comment-list{
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		.item{
			box-sizing: border-box;
			padding: 27rpx 0;
			border-top: 1px solid #f5f5f5;
			&:first-child{
				border-top: none;
			}
			.avatar{
				width: 83rpx;
				height: 83rpx;
				background: #f5f5f5;
				border-radius: 50%;
				vertical-align: top;
			}
			.content{
				width: 420rpx;
				display: inline-block;
				margin-left: 18rpx;
				.title{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #1a1a1a;
					margin-bottom: 11rpx;
				}
				.star-box{
					margin-bottom: 15rpx;
					.star{
						font-size: 35rpx;
						margin-right: 11.5rpx;
						color: #B3B3B3;
						&.active{
							color: #FFC336;
						}
					}
				}
				.desc{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #999999;
				}
			}
			.time{
				display: inline-block;
				vertical-align: top;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #808080;
				margin-left: 30rpx;
			}
		}
	}
	.seat{
		height: 148rpx;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.bottom-box {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		height: 148rpx;
		padding: 0 30rpx 0 36rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: white;
		border-top: 1px solid #f5f5f5;
		.box{
			text-align: center;
			margin-right: 23rpx;
			line-height: 45rpx;
			&:nth-child(2){
				.iconfont2{
					font-size: 35rpx;
				}
			}
			.iconfont2{
				font-size: 45rpx;
				color: #999999;
			}
			.tip{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #1a1a1a;
				margin-top: 4rpx;
			}
		}
		.btn{
			height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			padding: 0 30rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			line-height: 80rpx;
			&.add-cart{
				background-color: #f8a764;
				margin-right: 13rpx;
			}
			&.buy{
				background-color: #0b844a;
			}
		}
	}
	.tip-popup{
		.check-tip{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #1a1a1a;
			margin-bottom: 20rpx;
			padding: 0 30rpx;
		}
	}
	.check-input{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		border-radius: 10px;
		width: 390rpx;
		height: 70rpx;
		border: 1px solid #cccccc;
		margin: 0 30rpx;
		padding: 0 21rpx;
		margin-bottom: 25rpx;
		input{
			text-align: left;
		}
	}
}
</style>