1/pages/cloudStore/cloudStoreDetail.vue

<template>
	<view class="cloudStoreDeatil">
		<u-navbar
			fixed="true"
			leftIconColor="#FFF"
			:bgColor="background"
			@leftClick="clickBack"
		></u-navbar>
		<view class="topImgCon">
			<image src="https://wx1.sinaimg.cn/large/006WYq6ngy1hrj1dubvugj30u00u0n09.jpg" class="topBg" mode="aspectFill"></image>
		</view>
		<view class="shopTip">
			<view class="left">
				<image src="https://wx3.sinaimg.cn/large/006TzZ4Ugy1hs3zsj97f8j31jk1jkqep.jpg"></image>
			</view>
			<view class="right">
				<view class="box1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</view>
				<view class="box2">
					<u-rate :count="count" v-model="value" allowHalf="true"></u-rate>
					<text class="rateValue"> {{value}}</text>
				</view>
				<view class="box3">
					<view class="label1">
						<image src="https://files.hecrab.com/crab-net/cloud-store-list-5.png" mode="aspectFit"></image>
						<text>三码合一</text>
					</view>
					<view class="label2">
						<image src="https://files.hecrab.com/crab-net/cloud-store-list-1.png" mode="aspectFit"></image>
						<text>验蟹师品质保</text>
					</view>
				</view>
			</view>
		</view>
		<view class="shopBody">
			<view class="bodyHeader">
				<view v-for="(item,index) in tabList" :key="item.value" class="itemBox" @click="clickTab(item)" >{{item.name}}</view>
				<view :class="['active',`act-${activeID}`]">{{tabList[activeID].name}}</view>
			</view>
			<view class="body">
				<dropshipping v-if="activeID==0"></dropshipping>
				<coupons-act v-if="activeID==1"></coupons-act>
				<whole-sales v-if="activeID==2"></whole-sales>
				<shop-introduce v-if="activeID==3"></shop-introduce>
			</view>
		</view>
	</view>
</template>

<script>
	import dropshipping from './components/dropshipping.vue';
	import couponsAct from './components/couponsAct.vue';
	import wholeSales from './components/wholeSales.vue'
	import shopIntroduce from './components/shopIntroduce.vue';
	export default {
		components:{dropshipping,couponsAct,wholeSales,shopIntroduce},
		data(){
			return{
				background:'transparent',
				count:5,
				value:4.5,
				tabList:[{
					name:'一键代发',
					value:'0'
				},
				{
					name:'卡券激活',
					value:'1'
				},
				{
					name:'批量采购',
					value:'2'
				},
				{
					name:'商家介绍',
					value:'3'
				}],
				activeID:1
			}
		},
		methods:{
			clickTab(item){
				this.activeID = item.value;
				// console.log(item.value);
				// console.log("activeID",this.activeID);
			},
			clickBack(){
				let pageLength = getCurrentPages();
				if(pageLength.length == 1){
					this.$u.route({
						url:'/pages/index/index',
						type:'tab'
					})
				}else{
					uni.navigateBack();
				}
			}
		}
	}
</script>

<style lang="scss">
	.cloudStoreDeatil{
		min-height: 100vh;
		background: #F5F5F6;
	}
	.topImgCon{
		height: 300rpx;
		width: 752rpx;
		overflow-y: hidden;
	}
	.topBg{
		width: 752rpx;
		position: relative;
	}
	.shopTip{
		width: 678rpx;
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		margin: 0 auto;
		position: absolute;
		top: 248rpx;
		right: 0;
		left: 0;
		padding: 16rpx;
		box-sizing: border-box;
		.left>image{
			width: 144rpx;
			height: 144rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 2rpx solid rgba(0,0,0,0.1);
			margin-right: 12rpx;	
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.box1{
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				width: 490rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.box2{
				display: flex;
			}
			.box3{
				display: flex;
				.label1{
					width: 156rpx;
					height: 42rpx;
					border-radius: 12rpx;
					border: 2rpx solid rgba(6,115,237,0.3);
					display: flex;
					box-sizing: border-box;
					padding-top: 1rpx;
					justify-content: center;
					>image{
						width: 32rpx;
						height: 32rpx;
					}
					>text{
						font-weight: 500;
						font-size: 24rpx;
						color: #0673ED;
					}
				}
				.label2{
					width: 204rpx;
					height: 42rpx;
					border-radius: 8rpx;
					border: 2rpx solid rgba(155,118,56,0.3);
					display: flex;
					box-sizing: border-box;
					padding-top: 1rpx;
					justify-content: center;
					>image{
						width: 32rpx;
						height: 32rpx;
					}
					>text{
						font-weight: 500;
						font-size: 24rpx;
						color: #9B7638;
					}
				}
			}
		}
	}
	.shopBody{
		position: absolute;
		top: 452rpx;
		background: #FFFFFF;
		left: 0;
		right: 0;
		border-radius: 18rpx;
		.bodyHeader{
			height: 196rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%);
			display: flex;
			.itemBox{
				width: 196rpx;
				font-weight: 400;
				font-size: 32rpx;
				text-align: center;
				padding-top: 36rpx;
				box-sizing: border-box;
				color: #FFFFFF;
			}
			.active{
				width: 224rpx;
				height: 135rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #0066D6;
				line-height: 45rpx;
				background-size: 100% 100%;
				bottom: 70rpx;
				box-sizing: border-box;
				&.act-0{
					position: absolute;	
					left: 0;
					background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-rate-tab-left.png");
					padding-top: 42rpx;
					padding-left: 20rpx;
				}
				&.act-1{
					position: absolute;	
					left: 170rpx;
					background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-rate-tab-center.png");
					padding-top: 42rpx;
					text-align: center;
				}
				&.act-2{
					position: absolute;	
					left: 360rpx;
					background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-rate-tab-center.png");
					padding-top: 42rpx;
					text-align: center;
				}
				&.act-3{
					position: absolute;	
					right: 0;
					background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-rate-tab-right.png");
					padding-top: 42rpx;
					text-align: center;
				}
			}
		}
		
		.body{
			border-radius: 18rpx;
			position: absolute;
			top: 104rpx;
			box-sizing: border-box;
		}
	}
	
	
	
</style>