wx-qhb/pages/index/index.vue

<template>
	<!-- 商城 -->
	<view class="">
		<!-- <view class="index-navbar"> -->
			<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(255, 215,215, 1)' :placeholder='true' :fixed='true'
					>
					<view class="u-nav-slot" slot="left" style="display: flex;">
						<image @click="tochat" src="../../static/images/index/xiaoxi.png" mode=""
							style="width: 40rpx;height: 40rpx;">
						</image>
						<image @click="counter" 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="i18n.Searchcon" />
						</view>
						<view class="right">
							{{i18n.search}}
						</view>
					</view>
					<!-- tabs -->
					<view class=""
						style="display: flex;margin-top: 20rpx;align-items: center;justify-content: space-between;">
						<u-tabs :list="list1"></u-tabs>
						<view class="border">
						</view>
						<view class="u-flex" style="margin-left: 24rpx;width: 100rpx;" @click="shoptype">
							<image src="../../static/images/index/fenlei.png" style="width: 24rpx;height: 24rpx;;"
								mode="">
							</image>
							<text class="fenlei">{{i18n.sort}}</text>
						</view>
					</view>
					<!-- 轮播图 -->
					<view class="" style="margin-top: 20rpx;">
						<u-swiper radius='10' :indicator='true' :list="banner"></u-swiper>
					</view>
				</view>
			</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;">{{i18n.expensive}}</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="u-flex u-row-center"
									style="position: absolute;bottom: 10rpx;width: 144rpx;">
									<view class="u-flex">
										<view class="tag u-flex" style="background: rgba(243, 93, 34, 1);">
											<image src="../../static/images/index/down.png"
												style="width: 28rpx;height: 28rpx;position: relative;z-index: 3;"
												mode="">
											</image>
											<text>{{15 + i18n.RMB}}</text>
										</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);">{{i18n.expensive}}
							</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="u-flex u-row-center"
										style="position: absolute;bottom: 10rpx;width: 144rpx;">
										<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 u-flex" style="background-color: rgba(251, 73, 70, 1);">
												<image src="../../static/images/index/down.png"
													style="width: 28rpx;height: 28rpx;position: relative;z-index: 3;"
													mode="">
												</image>
												<text>{{15 + i18n.RMB}}</text>
											</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)">{{i18n.Something}}</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;" @click="todetail">
					<image src="../../static/images/index/discount.png"
						style="width: 60rpx;height: 36rpx;position: absolute;left: 12rpx;top: 12rpx;z-index: 10;" 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;">{{i18n.postage}}
						</view>
						<view class="taber" style="border: 1rpx solid rgba(237, 9, 9, 1);color: rgba(237, 9, 9, 1);">
							{{i18n.Trade}}
						</view>
						<!-- <view class="taber" style="border: 1rpx solid #E5BC78;color: #E5BC78;">以旧换新</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
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onLoad(options) {
			this.list = [this.i18n.border, this.i18n.shop]
			if (options.current) {
				this.current = options.current
			}
		},
		methods: {
			//物流计算器
			counter() {
				uni.navigateTo({
					url: '/pageA/counter'
				})
			},
			//消息
			tochat() {
				uni.navigateTo({
					url: '/pageA/chat/news'
				})
			},
			//商品分类
			shoptype() {
				uni.navigateTo({
					url: '/pageA/shoptype'
				})
			},
			//分段器切换
			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>
	.index-navbar {
		position: sticky;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 100;
	}

	::v-deep .u-tabs {
		width: 560rpx;
	}

	.taber {
		border-radius: 4rpx;
		padding: 4rpx 8rpx;
		margin-bottom: 10rpx;
	}

	.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;
		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>