hwyx/pages/index/index.vue

<template>
	<view class="container">
		<view class="titleNview-placing"></view>
		<view class="bg"></view>
		<view class="main-title">好运优选</view>
		<view class="top-search flex">
			<view class="search-box flex" @click="clickSearch()">
				<image class="search" src="../../static/icon/search-h.png" mode=""></image>
				<view class="search-font"><input type="text" placeholder="输入关键词搜索" /></view>
			</view>
		</view>
		<swiper class="banner" autoplay="true" duration="400" interval="5000">
			<swiper-item class="banner-item" v-for="(item, index) in carouselList"><image :src="item.pic" /></swiper-item>
		</swiper>
		<view class="tongz">
			<view class="tongz-left flex">
				<view class="left">
					<image class="image-left" src="../../static/img/ling.png" mode=""></image>
					<view class="tongz-title">系统公告</view>
				</view>
				<u-notice-bar
					style="width: 100%;"
					mode="vertical"
					type="none"
					:volume-icon="false"
					:more-icon="true"
					:list="text"
					@click="goDetails"
					@getMore="navTo('/pages/index/message?type=1')"
				></u-notice-bar>
			</view>
		</view>
		<view class="xian"></view>
		<view class="guess-section">
			<view v-for="(item, index) in integralList" :key="index" class="guess-item" @click="navToDetailPage(item)">
				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
				<text class="title clamp2 margin-c-20">{{ item.store_name }}</text>
				<view class="cmy-hr"></view>
				<view class="price margin-c-20 flex">
					<view>￥{{ item.price }}</view>
					<!-- <view class="font-size-sm">
						<text class="font-color-gray">月销：{{ item.sales }}</text>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
import { getUserInfo, spread } from '@/api/user.js';
import { interceptor } from '@/utils/loginUtils';
import { mapState, mapMutations } from 'vuex';
import { groomList } from '@/api/product.js';
// #ifdef H5
import { weixindata, shareLoad } from '@/utils/wxAuthorized';
// #endif
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
export default {
	data() {
		return {
			text: '',
			titleNViewBackground: '',
			swiperCurrent: 0,
			swiperLength: 0,
			carouselList: [], //轮播列表
			integralList: [], //商品列表
			page: 1,
			limit: 10,
			loadType: 'more'
		};
	},
	computed: {
		...mapState(['loginInterceptor', 'baseURL']),
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	onLoad: function(option) {
		// #ifdef MP
		if (option.scene) {
			// 存储小程序邀请人
			uni.setStorage({
				key: 'spread_code',
				data: option.scene
			});
		}
		// #endif
	},
	onShow: function() {
		// 判断是否强制登录
		// if (!this.hasLogin) {
		// 	// 登录拦截
		// 	interceptor();
		// }
		this.page = 1;
		this.limit = 10;
		this.loadType = 'more';
		this.integralList = [];
		this.loadData();
	},
	onReachBottom() {
		this.getProduct();
	},
	methods: {
		goDetails(e) {
			uni.navigateTo({
				url: '/pages/index/messageInfo?id=' + this.article[e].id
			});
		},
		navTo(url) {
			if (url == '') {
				this.$api.msg('暂未开通，敬请期待');
			} else {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						});
					}
				});
			}
		},
		clickSearch() {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		// 监听图片加载完成
		onImageError(key, index) {
			this[key][index].image = '/static/error/errorImage.jpg';
		},
		// 请求载入数据
		async loadData() {
			this.text = [];
			loadIndexs({})
				.then(({ data }) => {
					console.log(data);
					let goods = data.info;
					this.carouselList = data.banner;
					this.swiperLength = this.carouselList.length;
					this.integralList = goods.firstList;
				})
				.catch(e => {});
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
			this.titleNViewBackground = this.carouselList[index].background;
		},
		//详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		},
		// 轮播图跳转
		bannerNavToUrl(item) {
			// #ifdef H5
			console.log(item.wap_url.indexOf('http'), 'banner');
			if (item.wap_url.indexOf('http') >= 0) {
				window.location.href = item.wap_url;
			}
			// #endif
			//测试数据没有写id，用title代替
			uni.navigateTo({
				url: item.wap_url
			});
		}
	}
};
</script>

<style lang="scss">
page,
.container {
	height: auto;
	min-height: 100%;
	background: #ffffff;
}
.titleNview-placing {
	height: var(--status-bar-height);
	box-sizing: content-box;
}
.bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 750rpx;
	height: 460rpx;
	background: linear-gradient(#ff4c4c, #ffffff);
}
.main-title {
	padding: 20rpx 0 0;
	text-align: center;
	position: relative;
	z-index: 2;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.top-search {
	margin-top: 30rpx;
	height: 80rpx;
	padding: 0 20rpx;
	.search-box {
		position: relative;
		z-index: 2;
		justify-content: center;
		width: 740rpx;
		height: 60rpx;
		background: #fff;
		border-radius: 30rpx;
		.search {
			width: 26rpx;
			height: 30rpx;
		}
		.search-font input {
			width: 500rpx;
			margin-left: 14rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #aaaaaa;
		}
	}
}
.banner {
	margin: 20rpx auto 0;
	width: 690rpx;
	height: 350rpx;
	.banner-item {
		width: 690rpx;
		height: 350rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.tongz {
	width: 690rpx;
	height: 70rpx;
	margin: 32rpx auto 0;
	padding: 18rpx 30rpx 18rpx 24rpx;
	background: #f8f8fa;
	align-items: center;
	position: relative;
	.tongz-bg {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 690rpx;
		height: 70rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tongz-left {
		width: 640rpx;
		.left {
			display: flex;
			align-items: center;
		}
		.tongz-title {
			margin-left: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ff1a1a;
		}
		.image-left {
			width: 28rpx;
			height: 28rpx;
		}
		.tongz-font {
			margin-left: 22rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #0f253a;
		}
	}
	.tongz-right {
		position: relative;
		z-index: 11;
		width: 12rpx;
		height: 26rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.xian {
	margin-top: 30rpx;
	width: 750rpx;
	height: 20rpx;
	background: #f8f8f8;
}
%icon {
	margin-right: 10rpx;
	display: inline-block;
	padding: 2rpx 10rpx;
	border: 1rpx solid $color-yellow;
	color: $color-yellow;
	line-height: 1;
	font-size: $font-base;
	border-radius: 10rpx;
}
.guess-section {
	margin-top: 40rpx;
	display: flex;
	flex-wrap: wrap;
	padding: 0 30rpx;

	.guess-item {
		padding-bottom: 35rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 48%;
		margin-bottom: 4%;
		border-radius: $border-radius-sm;
		background-color: white;
		box-shadow: $box-shadow;

		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
	}

	.image-wrapper {
		width: 100%;
		height: 330rpx;
		border-radius: 3px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}

	.title {
		margin-top: 28rpx;
		font-size: $font-base;
		color: $font-color-dark;
		font-weight: bold;
	}

	.price {
		margin-top: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #ff4c4c;
		line-height: 1;

		.yuan-price {
			display: inline-block;
			margin-left: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-decoration: line-through;
			color: #969696;
		}
	}

	.icon {
		@extend %icon;
	}

	.detail {
		line-height: 1;
	}

	.tip {
		color: white;
		background-color: $color-yellow;
		line-height: 1.5;
		font-size: $font-sm;
		padding-left: 20rpx;
	}
}
</style>