sailun-tbr-web/pages/home/integral-mall/integral_mall_goods_details.vue

<template>
	<view>
		<!-- 线上订货详情页 -->
		<view class="demo-warter">
			<u-swiper height="750" :list="goodsDetails.imageList" image="image"></u-swiper>
			<view class="demo-info">
				<view class="demo-title">
					{{goodsDetails.title}}
				</view>
				<!-- <view class="demo-price">
					{{goodsDetails.price}}元
				</view> -->
				<!-- <view class="demo-tag">
					<view class="demo-tag-owner">
						自营
					</view>
					<view class="demo-tag-text">
						放心购
					</view>
				</view> -->
				<view class="demo-shop">
					库存：{{goodsDetails.count}}
				</view>
				<view class="demo-count">
					<view class="demo-count-seleced">
						已选：{{selectedCount}}
					</view>
					<view class="demo-count-box">
						<u-number-box v-model="selectedCount" :min="1" @change="selectedCountChange"></u-number-box>
					</view>
				</view>
			</view>
		</view>
		<u-sticky :enable="tabEnable" :offset-top="tabOffset">
			<u-tabs class="tabCustomStyle" :list="tabList" :is-scroll="false" :current="tabCurrent" @change="tabChange"
			 :bg-color="tabBg"></u-tabs>
		</u-sticky>
		<!-- 这里装商品和详情的内容 -->
		<view style="height: 750px;"></view>
		<view class="navigation">
			<!-- <view class="left">
				<view class="item">
					<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</view>
				<view class="item">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view>
				<view class="item car">
					<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view> -->
			<view class="right">
				<view class="cart btn u-line-1" @click="inShopcar">加入购物车</view>
				<view class="buy btn u-line-1" @click="handleGoConfirm">立即兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsDetails: {
					price: 35,
					title: '175/70R14 88T XL SH08 BGSL',
					count: '100',
					image: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
					imageList: [{
						price: 35,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
					}, {
						price: 35,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
					}],
				},
				selectedCount: 0, //选中的商品数量
				tabList: [{
					name: '商品'
				}, {
					name: '详情'
				}],
				tabCurrent: 0,
				tabBg: "#ffffff",
				tabEnable: false,
				tabOffset: 0
			}
		},
		methods: {
			selectedCountChange: function() {},
			tabChange: function(params) {
				this.tabCurrent = params
				console.log(params)
			},
			inShopcar(){
				this.$u.route({
					url: 'integral-mall/integral_mall_car',
				})
			},
			handleGoConfirm: function(){
				console.log("立即兑换")
				uni.navigateTo({
					url: "/pages/home/integral-mall/integral_mall_confirmorder"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		background-color: #ffffff;
		position: relative;
	}

	.demo-info {
		margin: 5px;
		padding: 8px;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.demo-count {
		display: flex;
		font-size: 22rpx;
		margin-top: 5px;
		justify-content: space-between;
		font-weight: 600;
	}

	.tabCustomStyle {
		border-top: 8rpx solid #EFEFEF;
		border-bottom: 8rpx solid #EFEFEF;
	}

	/* 底部提交栏目 */
	.navigation {
		display: flex;
		width: 100%;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 26rpx;
		position: fixed;
		bottom: 0;
		z-index: 100;
		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			width: 100%;
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
				text-align: center;
			}

			.cart {
				background-color: #ed3f14;
				width: 50%;
				margin-right: 30rpx;
			}

			.buy {
				width: 50%;
				background-color: #ff7900;
			}
		}
	}
</style>