qjm/pages/index/index.vue

<template>
	<view class="container">
		<view class="vheigh"></view>
		<view class="top" @click="clickSearch()">
			<view class="top-icon"><image src="../../static/icon/icon.png" mode=""></image></view>
			<view class="top-main">输入你要查找的内容</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="navbar flex">
			<view class="navbar-item" @click="navTo('/pages/category/category')">
				<view class="navbar-image"><image src="../../static/icon/index1.png" mode=""></image></view>
				<view class="navbar-font">全部商品</view>
			</view>
			<view class="navbar-item" @click="navTo('/pages/index/detail?id=2')">
				<view class="navbar-image"><image src="../../static/icon/index2.png" mode=""></image></view>
				<view class="navbar-font">公司介绍</view>
			</view>
			<view class="navbar-item" @click="kfOpen">
				<view class="navbar-image"><image src="../../static/icon/index3.png" mode=""></image></view>
				<view class="navbar-font">联系客服</view>
			</view>
			<view class="navbar-item" @click="navTo('/pages/user/shareQrCode')">
				<view class="navbar-image"><image src="../../static/icon/index4.png" mode=""></image></view>
				<view class="navbar-font">邀请好友</view>
			</view>
		</view>
		<view class="xian"></view>
		<view class="hot-box">
			<view class="hot-title flex">
				<view class="hot-title-item flex">
					<view class="hot-title-image"><image src="../../static/icon/fire.png" mode=""></image></view>
					<view class="hot-title-font">好货上新</view>
				</view>
				<view class="hot-title-item flex" @click="navTo('/pages/product/classify?type=3')">
					<view class="hot-title-more">更多</view>
					<view class="hot-title-jt"><image src="../../static/icon/jt.png" mode=""></image></view>
				</view>
			</view>
			<view class="hot-main flex">
				<view class="hot-main-item" v-for="(item, index) in hotList" @click="navToDetailPage(item)">
					<view class="hot-main-image"><image :src="item.image" mode=""></image></view>
					<view class="hot-name clamp">{{ item.store_name }}</view>
					<view class="hot-price">
						￥{{ item.price * 1 }}
						<!-- <text class="yuan-price">￥{{ item.ot_price * 1 }}</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="xian"></view>
		<view class="guess-section-box">
			<view class="guess-section-title">
				<view class="guess-section-xian"></view>
				<view class="guess-section-title-font">爆款推荐</view>
				<view class="guess-section-xian"></view>
			</view>
			<view class="guess-section">
				<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
					<text class="title clamp margin-c-20">{{ item.store_name }}</text>
					<view class="cmy-hr"></view>
					<view class="price margin-c-20 flex">
						<view>
							￥{{ item.price }}
							<text class="yuan-price">￥{{ item.ot_price }}</text>
						</view>
						<!-- <view class="font-size-sm">
									<text class="font-color-gray">{{ item.sales }}人购买</text>
								</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="zb" @click="navTo('/pages/user/living')"><image src="../../static/img/living.png" mode=""></image></view>
		<uni-popup ref="popupkf" type="center">
			<view class="popup-box">
				<view class="img"><image src="../../static/img/img009.png" mode=""></image></view>
				<view class="mian">
					<view class="delivery">
						<view class="title">已经为您定制专属客服</view>
						<image src="../../static/img/img010.png" mode=""></image>
					</view>
					<view class="nocancel">客服VX:{{ text }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="kfClose()">取消</view>
						<view class="comfirm" @click="comfirm(text)">复制微信</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
import { getUserInfo } from '@/api/user.js';
import { setCoupons } from '@/api/functionalUnit.js';
import { getBargainList } from '@/api/product.js';
import { interceptor } from '@/utils/loginUtils';
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			carouselList: [''],
			hotList: [],
			text: '1111',
			bastList: []
		};
	},
	// #ifdef MP
	onShareAppMessage: function(res) {
		console.log(res);
		console.log('是否从按钮进入');
		if (res.from === 'button' || res.from === 'menu') {
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				path += i + '=' + page.options[i] + '&';
			}
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			let data = {
				path: path,
				imageUrl: this.bastList[0].pic,
				title: this.userInfo.nickname ? this.userInfo.nickname : '' + '邀请您进入亲家母优选'
			};
			return data;
		} else {
			console.log('else');
		}
	},
	// #endif
	computed: {
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	onLoad: function(option) {
		// #ifndef MP
		if (option.spread) {
			// 存储其他邀请人
			uni.setStorageSync('spread', option.spread);
		}
		// #endif
		// #ifdef MP
		if (option.scene) {
			// 存储小程序邀请人
			uni.setStorage({
				key: 'spread_code',
				data: option.scene
			});
		}
		// #endif
	},
	onShow: function() {
		// 判断是否强制登录
		if (this.loginInterceptor && !this.hasLogin) {
			// 登录拦截
			interceptor();
		}
		this.loadData();
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
	},
	methods: {
		kfOpen() {
			this.$refs.popupkf.open();
		},
		kfClose() {
			this.$refs.popupkf.close();
		},
		navTo(url) {
			uni.navigateTo({
				url,
				fail() {
					uni.switchTab({
						url
					});
				}
			});
		},
		comfirm(text) {
			console.log(text);
			const result = uniCopy(text);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
			this.$refs.popupkf.close();
		},
		cs() {
			uni.scanCode({
				success: function(res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
				}
			});
		},
		// 點擊搜索框
		clickSearch() {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		// 请求载入数据
		async loadData() {
			loadIndexs({})
				.then(({ data }) => {
					let goods = data.info;
					this.carouselList = data.banner;
					this.swiperLength = this.carouselList.length;
					this.hotList = goods.firstList; //最新商品
					this.bastList = data.likeInfo; //爆款推荐

					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		//轮播图切换修改背景色
		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
			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">
.vheigh {
	height: var(--status-bar-height);
	background-color: #ffffff;
}

.container,
page {
	height: auto;
	min-height: 100%;
	background: #ffffff;
}

.top {
	width: 689rpx;
	height: 58rpx;
	background: #ededed;
	border-radius: 29rpx;
	margin: 20rpx auto 0;
	display: flex;
	justify-content: center;
	align-items: center;

	.top-icon {
		width: 32rpx;
		height: 32rpx;

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

	.top-main {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #cbcbcb;
	}
}

.banner {
	margin: 20rpx auto 0;
	width: 690rpx;
	height: 350rpx;

	.banner-item {
		width: 690rpx;
		height: 350rpx;

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

.navbar {
	justify-content: space-around;
	margin-top: 50rpx;

	.navbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.navbar-image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.navbar-font {
			margin-top: 24rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
}

.xian {
	margin-top: 50rpx;
	width: 750rpx;
	height: 20rpx;
	background: #efefef;
	opacity: 0.61;
}

.hot-box {
	padding: 0 30rpx;

	.hot-title {
		padding-top: 50rpx;

		.hot-title-item {
			justify-content: flex-start;

			.hot-title-image {
				width: 36rpx;
				height: 36rpx;

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

			.hot-title-font {
				margin-left: 7rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #303030;
			}

			.hot-title-more {
				margin-right: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.hot-title-jt {
				width: 10rpx;
				height: 19rpx;
				position: relative;
				top: -8rpx;

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

	.hot-main {
		margin-top: 25rpx;

		.hot-main-item {
			width: 220rpx;
			background: #ffffff;
			border: 4rpx solid #f0e7d2;
			border-radius: 10rpx;
			padding: 0 0 34rpx;

			.hot-main-image {
				width: 212rpx;
				height: 212rpx;

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

			.hot-name {
				padding: 20rpx 12rpx 0;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #0a122b;
			}

			.hot-price {
				padding: 0 12rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #ff4c4c;

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

.guess-section-box {
	margin-top: 20rpx;
	width: 750rpx;
	background: #fff;
	padding-top: 30rpx;

	.guess-section-title {
		display: flex;
		justify-content: center;
		align-items: center;

		.guess-section-xian {
			width: 120rpx;
			height: 1px;
			background: #999999;
		}

		.guess-section-title-font {
			margin: 0 70rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #363636;
		}
	}
}

.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: 32rpx;
		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;
	}
}

/*公用边框样式*/
%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;
}
.popup-box {
	width: 640rpx;
	height: 605rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	position: relative;

	.img {
		position: relative;
		top: -56rpx;
		left: 0;
		width: 640rpx;
		height: 132rpx;
		display: flex;
		justify-content: center;

		image {
			border-radius: 20rpx 20rpx 0 0;
			width: 450rpx;
			height: 132rpx;
		}
	}

	.mian {
		margin-top: -44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding: 32rpx 32rpx;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;

		.delivery {
			font-size: 40rpx;
			color: #333333;
			display: flex;
			align-items: center;
			flex-direction: column;

			.title {
			}

			image {
				margin-top: 48rpx;
				width: 172rpx;
				height: 160rpx;
			}
		}

		.nocancel {
			font-size: 32rpx;
			color: #333333;
			margin-top: 14rpx;
		}

		.comfirm-box {
			margin-top: 52rpx;
			display: flex;
			// margin-bottom: 32rpx;

			// justify-content: space-around;
			.cancel {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 260rpx;
				height: 88rpx;
				border: 2rpx solid #dcc786;
				border-radius: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #605128;
			}

			.comfirm {
				margin-left: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 260rpx;
				height: 88rpx;
				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
				border-radius: 10rpx;
				font-size: 32rpx;
				color: #605128;
			}
		}
	}
}
.zb {
	position: fixed;
	right: 20rpx;
	bottom: 20%;
	width: 136rpx;
	height: 136rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>