wx-qhb/pages/index/index.vue

<template>
	<!-- 商城 -->
	<view class="">

		<view style="position: relative;">
			<!-- 自定义导航栏 -->
			<image src="../../static/images/index/back.png"
				style="width: 750rpx;height: 1200rpx;position: absolute;top: 0;z-index: -1;" mode=""></image>
			<u-navbar bgColor="rgba(248, 50, 36, 0.2)" :placeholder='true' :safeAreaInsetTop="true"
				style="position: absolute;z-index: 110;background-color: rgba(0,0,0,0);">
				<view class="u-nav-slot" slot="left" style="display: flex;">
					<image src="../../static/images/index/xiaoxi.png" mode="" style="width: 40rpx;height: 40rpx;">
					</image>
					<image src="../../static/images/index/compile.png" mode=""
						style="width: 40rpx;height: 40rpx;margin-left: 22rpx;"></image>
					<image src="../../static/images/index/dianhua.png" mode=""
						style="width: 40rpx;height: 40rpx;margin-left: 22rpx;"></image>
				</view>
				<view class="u-nav-slot" slot="center" style="width: 226rpx;">
					<u-subsection bgColor='rgba(248, 50, 36, 0.1)' activeColor='#F83224' inactiveColor='#222'
						:list="list" :current="current" @change="sectionChange"></u-subsection>
				</view>
			</u-navbar>
			<view class="" style="margin-top: 30rpx;padding:0 24rpx;">
				<!-- 搜索 -->
				<view class="search">
					<view class="u-flex">
						<u-icon name="search" size='32'></u-icon>
						<input type="text" placeholder="请输入要搜索的内容" />
					</view>
					<view class="right">
						搜索
					</view>
				</view>
				<!-- tabs -->
				<view class=""
					style="display: flex;margin-top: 20rpx;align-items: center;justify-content: space-between;">
					<u-tabs :list="list1" @click="click"></u-tabs>
					<view class="border">

					</view>
					<view class="u-flex" style="margin-left: 24rpx;">
						<image src="../../static/images/index/fenlei.png" style="width: 24rpx;height: 24rpx;;" mode="">
						</image>
						<text class="fenlei">分类</text>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="" style="margin-top: 20rpx;">
					<u-swiper radius='10' :indicator='true' :list="banner" @click="click"></u-swiper>
				</view>
			</view>
			<view class="shopback">
				<view class="u-flex u-row-between">
					<view class="bigbox">
						<view class="u-flex">
							<image src="../../static/images/index/butie.png" style="width: 104rpx;height: 26rpx;"
								mode=""></image>
							<view class="biaoqian" style="background: #F35D22;">买贵必赔</view>
						</view>
						<view class="u-flex" style="flex-wrap: wrap;justify-content: space-between;">
							<view v-for="(item,idx) in 4" class="ssbox  " style="margin-top: 16rpx;">
								<view class="" style="position: relative">
									<image src=""
										style="background-color: rgba(119, 119, 119, 1);width: 144rpx;height: 144rpx;"
										mode=""></image>
									<view class="" style="position: absolute;bottom: 10rpx;margin-left: 8rpx">
										<view class="u-flex">
											<image src="../../static/images/index/down.png"
												style="width: 28rpx;height: 28rpx;position: relative;z-index: 3;"
												mode="">
											</image>
											<view class="tag" style="background: rgba(243, 93, 34, 1);">已补15元</view>
										</view>
									</view>
								</view>
								<view class="money" style="text-align: center;">
									￥59
								</view>
							</view>
						</view>
					</view>
					<view class="">
						<view class="smallbox">
							<view class="u-flex">
								<image src="../../static/images/index/pinbao.png" style="width: 164rpx;height: 26rpx;"
									mode=""></image>
								<view class="biaoqian" style="background: rgba(255, 148, 21, 1);">买贵必赔</view>
							</view>
							<view class="u-flex" style="flex-wrap: wrap;justify-content: space-between;">
								<view v-for="(item,idx) in 2" class="ssbox  " style="margin-top: 16rpx;">
									<view class="" style="position: relative">
										<image src=""
											style="background-color: rgba(119, 119, 119, 1);width: 144rpx;height: 144rpx;"
											mode=""></image>
										<view class="" style="position: absolute;bottom: 10rpx;margin-left: 8rpx">
											<view class="u-flex">
												<image src="../../static/images/index/label.png"
													style="width: 28rpx;height: 28rpx;position: relative;z-index: 3;"
													mode="">
												</image>
												<view class="tag" style="background-color: rgba(251, 73, 70, 1);">已补15元
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="smallbox">
							<view class="u-flex">
								<image src="../../static/images/index/postage.png" style="width: 116rpx;height: 26rpx;"
									mode=""></image>
								<view class="biaoqian" style="background:rgba(248, 50, 36, 1)">全球好物</view>
							</view>
							<view class="u-flex" style="flex-wrap: wrap;justify-content: space-between;">
								<view v-for="(item,idx) in 2" class="ssbox  " style="margin-top: 8rpx;">
									<view class="" style="position: relative">
										<image src=""
											style="background-color: rgba(119, 119, 119, 1);width: 124rpx;height: 124rpx;"
											mode=""></image>
										<view class="shopname">
											纯牛奶
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" style="flex-wrap: wrap;">
					<view class="bigbox" v-for="(item,index) in 6" style="position: relative;height: 556rpx;"
						@click="todetail">
						<image src="../../static/images/index/discount.png"
							style="width: 60rpx;height: 36rpx;position: absolute;left: 12rpx;top: 12rpx;" mode="">
						</image>
						<image src=""
							style="width: 340rpx;height: 340rpx;background-color: rgba(119, 119, 119, 1) ;margin-left: -20rpx;margin-top: -18rpx;"
							mode=""></image>
						<view class="title">
							INSTINCT天然百利狗粮 无谷泰迪去
						</view>
						<view class="">
							<text class="money">
								¥258.00
							</text>
							<text class="weight">
								¥2kg
							</text>
						</view>
						<view class="u-flex"
							style="flex-wrap: wrap;margin-top: 18rpx;column-gap: 12px;overflow: hidden;">
							<view class="taber" style="border: 1rpx solid #E5BC78;color: #E5BC78;">包邮</view>
							<view class="taber"
								style="border: 1rpx solid rgba(237, 9, 9, 1);color: rgba(237, 9, 9, 1);">以旧换新</view>
							<!-- <view class="taber" style="border: 1rpx solid #E5BC78;color: #E5BC78;">以旧换新</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode='center' :round='16' bgColor='transparent'>
			<view style="position: relative;">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
					style="width: 570rpx;height: 764rpx;border-radius: 16rpx;" mode=""></image>
				<view class="" style="text-align: center;" @click='show=false'>
					<image src="../../static/images/index/close.png" mode="" style="width: 70rpx;height: 70rpx;">
					</image>
				</view>
			</view>
		</u-popup>
		<kj-tabbar :value1=1></kj-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//顶部分段器
				list: ['跨境速递', '商城'],
				current: 1,
				//tabs
				list1: [{
					name: '推荐',
				}, {
					name: '数码'
				}, {
					name: '生鲜'
				}, {
					name: '美妆'
				}, {
					name: '生鲜'
				}, {
					name: '美妆'
				}],
				//轮播图
				banner: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				show: true
			}
		},
		onLoad(options) {
			if(options.current){
				this.current = options.current
			}
		},
		methods: {
			//分段器切换
			sectionChange(index) {
				this.current = index;
				console.log(index);
				if (this.current == 0) {
					uni.switchTab({
						url: '/pages/express/express?current=0'
					})
					this.current = 1
				}
			},
			//详情
			todetail() {
				uni.navigateTo({
					url: '/pageA/productdetails'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.taber {
		border-radius: 4rpx;
		padding: 4rpx 8rpx;
	}

	.title {
		font-family: SFPro, SFPro;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		width: 300rpx;
		height: 72rpx;
	}

	.weight {
		font-family: SFPro, SFPro;
		font-weight: 400;
		font-size: 20rpx;
		color: #888888;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		margin-left: 12rpx;
	}

	.shopname {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #666666;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	.money {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 28rpx;
		color: #F83224;
		line-height: 38rpx;
		text-align: right;
		font-style: normal;
	}

	.biaoqian {
		height: 28rpx;
		border-radius: 6rpx;
		padding: 6rpx;
		margin-left: 8rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: center;
	}

	.tag {
		// height: 28rpx;
		border-radius: 14rpx 14rpx 14rpx 0rpx;
		border: 1rpx solid #FFFFFF;
		padding: 6rpx 14rpx 6rpx 14rpx;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		box-sizing: border-box;
		margin-left: -15rpx;
	}

	.bigbox {
		width: 340rpx;
		height: 468rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #FFFFFF;
		margin-bottom: 22rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
	}

	.smallbox {
		width: 340rpx;
		height: 226rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #FFFFFF;
		margin-bottom: 22rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
	}

	.shopback {
		width: 750rpx;
		min-height: 1216rpx;
		background: #F4F4F4;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 26rpx 24rpx;
		box-sizing: border-box;

	}

	.fenlei {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
		margin-left: 8rpx;
	}

	.search {
		width: 702rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 6rpx 6rpx 6rpx 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;


		.right {
			width: 100rpx;
			height: 56rpx;
			background: #ED0909;
			border-radius: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
		}
	}

	.border {
		width: 2rpx;
		height: 24rpx;
		border: 2rpx solid #979797;
		opacity: 0.2;
		background-color: #979797;
	}

	::v-deep .u-navbar__content.data-v-1194bf80 {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	::v-deep .u-status-bar.data-v-13f16680 {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	::v-deep .u-subsection--button.data-v-b14d3440 {
		/* padding: 6rpx 34rpx !important; */
		border-radius: 64rpx !important;
	}

	::v-deep .u-subsection--button__bar.data-v-b14d3440 {
		border-radius: 32rpx !important;
	}
</style>