dlzx/pages/index/index.vue

<template>
	<view class="center">
		<view class="top"></view>
		<!-- #ifdef MP -->
		<navigator url="/pages/product/search">
			<view class="input-box flex">
				<view class=" input-content flex">
					<view class="iconfont iconsearch"></view>
					<view class="input"><input disabled placeholder="请输入搜索内容" /></view>
				</view>
			</view>
		</navigator>
		<!-- #endif -->
		<view class="carousel">
			<swiper autoplay="true" duration="400" interval="5000" @change="swiperChange" class="bor">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image src="" /></swiper-item>
			</swiper>
		</view>
		<view class="swiper-dot">
			<template v-for="item in swiperLength">
				<view class="swiper-dots-item" :key="item" :class="{ action: swiperCurrent + 1 === item }"></view>
			</template>
		</view>
		<view class="cate-section">
			<view class="cate-item" @click="nav('/pages/category/category')">
				<image src="/static/icon/c3.png"></image>
				<view class="cate-font">品牌介绍</view>
			</view>
			<view class="cate-item" @click="nav('/pages/category/articleList')">
				<image src="/static/icon/c5.png"></image>
				<view class="cate-font">产品百科</view>
			</view>
			<view class="cate-item" @click="showPopup()">
				<image src="/static/icon/c7.png"></image>
				<view class="cate-font">免费咨询</view>
			</view>
			<view class="cate-item">
				<image src="/static/icon/c8.png"  @click="nav('/pages/user/shareQrCode')"></image>
				<view class="cate-font">邀请有礼</view>
			</view>
		</view>
		<view class="xian"></view>
		<view class="main">
			<view class="main-top flex">
				<view class="main-left">
					<view class="shu"></view>
					<view class="main-title">热销推荐</view>
					<view class="main-tip">在售精品</view>
				</view>
			</view>
			<view class="list-box-h">
				<view v-for="(item, index) in dataList" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<image :src="item.image"></image>
					<view class="guess-box">
						<view class="title clamp2">
							{{ item.store_name }}
						</view>
						<view class="price-box flex">
							<view class="yuanprice">{{ item.ot_price }}</view>
							<image src="../../static/img/jiantou.png" mode=""></image>
							<view class="jiang">直降{{ (item.ot_price - item.price).toFixed(2) }}元</view>
						</view>
						<view class="price">￥{{ item.price }}</view>
						<view class="btn">马上拼</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" 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">客服微信: {{ text }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel">取消</view>
						<view class="comfirm" @click="comfirm(text)">复制微信</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			carouselList: [''], //轮播图
			swiperCurrent: 0,
			dataList:[],
			text: 'Zjxwcm',//客服微信
			swiperLength: 1 //图片数量
		};
	},
	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();
	},
	// #ifndef MP
	// 监听导航栏输入框点击事件
	onNavigationBarSearchInputClicked(e) {
		//跳转到搜索页面
		this.clickSearch();
	},
	//点击导航栏 buttons 时触发
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/user/notice'
		});
	},
	// #endif
	methods: {
		// 监听切换事件
		listChange(e) {
			this.checkid = e.detail.current;
		},
		// 點擊搜索框
		clickSearch() {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		nav(url){
			uni.navigateTo({
				url,
				fail: () => {
					console.log(1)
					uni.switchTab({
						url
					})
				}
			})
		},
		showPopup() {
			this.$refs.popup.open();
		},
		cancel() {
			this.$refs.popup.close();
		},
		uniCopy(content) {
			/**
			 * 小程序端 和 app端的复制逻辑
			 */
			//#ifndef H5
			uni.setClipboardData({
				data: content,
				success: function() {
					console.log('success');
					return true;
				}
			});
			//#endif
		
			/**
			 * H5端的复制逻辑
			 */
			// #ifdef H5
			if (!document.queryCommandSupported('copy')) {
				//为了兼容有些浏览器 queryCommandSupported 的判断
				// 不支持
				return false;
			}
			let textarea = document.createElement('textarea');
			textarea.value = content;
			textarea.readOnly = 'readOnly';
			document.body.appendChild(textarea);
			textarea.select(); // 选择对象
			textarea.setSelectionRange(0, content.length); //核心
			let result = document.execCommand('copy'); // 执行浏览器复制命令
			textarea.remove();
			return result;
			// #endif
		},
		comfirm(text) {
			console.log(text);
			const result = this.uniCopy(text);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
			this.$refs.popup.close();
		},
		// 请求载入数据
		async loadData() {
			loadIndexs({})
				.then(({ data }) => {
					let goods = data.info;
					this.carouselList = data.banner;
					this.swiperLength = this.carouselList.length;
					this.menusList = data.menus;
					this.goodsList = goods.firstList; //最新商品
					this.bastList = goods.bastList; //精品推荐
					this.bastBanner = data.benefit; //促销单品
					this.$set(this, 'couponArray', data.couponList); //保存卡包券

					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		//详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
page,
.center {
	height: auto;
	min-height: 100%;
	background-color: #ffffff;
}
/* #ifdef MP || APP-PLUS*/
.input-box {
	padding: 25rpx;
	/* #ifdef APP-PLUS */
	margin-top: var(--status-bar-height);
	/* #endif */
	background-color: #fe8119;
	height: 44px;

	.iconsearch {
		font-size: 50rpx;
	}

	.input-content {
		border-radius: 99rpx;
		flex-grow: 1;
		padding: 5rpx 30rpx;
		// background-color: rgba(231, 231, 231, 0.7);
		background: #ffffff;

		.input {
			flex-grow: 1;

			input {
				font-size: $font-base;
			}
		}
	}

	.input-button {
		padding-left: 20rpx;
		font-size: $font-base;
		height: 100%;
	}
}

/* #endif */
.top {
	width: 1000rpx;
	height: 282rpx;
	background: linear-gradient(180deg, #08c4e6, #50ead2);
	overflow: hidden;
	text-align: center;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	margin-left: -125rpx;
}
.carousel {
	width: 700rpx;
	height: 300rpx;
	border-radius: 14rpx;
	margin: 0 auto;
	margin-top: calc(-128rpx + var(--status-bar-height));
	.bor {
		border-radius: 14rpx;
		.carousel-item {
			background-color: #4cd964;
			image {
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
			}
		}
	}
}
.swiper-dot {
	position: relative;
	z-index: 10;
	margin-top: -40rpx;
	display: flex;
	justify-content: center;

	.swiper-dots-item {
		width: 14rpx;
		height: 14rpx;
		background: #aaaaaa;
		border-radius: 50%;
		margin: 0 16rpx;
		// z-index: 999;
	}

	.action {
		background-color: #ffffff;
	}
}
.cate-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	padding: 40rpx 22rpx;
	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-sm + 4rpx;
		color: $font-color-dark;
	}
	.cate-font {
		margin-top: -26rpx;
	}
	/* 原图标颜色太深,不想改图了,所以加了透明度 */
	image {
		width: 150rpx;
		height: 150rpx;
		margin-bottom: 14rpx;
		border-radius: 50%;
	}
}
.xian {
	width: 750rpx;
	height: 20rpx;
	background: #f5f5f5;
}
.main {
	margin-top: 40rpx;
	padding: 0 40rpx;
	.main-top {
		align-items: center;
		.main-left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.shu {
				width: 8rpx;
				height: 38rpx;
				background: #05ab81;
				border-radius: 4rpx;
			}
			.main-title {
				margin-left: 10rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #202739;
			}
			.main-tip {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #95A0B1;
				margin-left: 14rpx;
			}
		}
	}
}
.guess-item {
	display: flex;
	width: 710rpx;
	height: 290rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 10rpx;
	padding: 15rpx;
	padding-bottom: 150rpx;
	margin: 20rpx auto 0;
	position: relative;
	image {
		width: 260rpx;
		height: 260rpx;
		border-radius: 10rpx;
	}
	.guess-box {
		padding: 12rpx 0 0 24rpx;
		width: 436rpx;
		.title {
			font-size: 30rpx;
			padding-left: 4rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			width: 368rpx;
			line-height: 36rpx;
			.tuanF {
				display: inline-block;
				margin-right: 4rpx;
				position: relative;
				top: -6rpx;
				.tuan {
					display: flex;
					align-items: center;
					padding: 10rpx;
					height: 36rpx;
					background: #ffebe9;
					border-radius: 18rpx;
					.tuan-image {
						width: 18rpx;
						height: 18rpx;
					}
					.tuan-font {
						display: inline;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ff1135;
						margin-left: 2rpx;
					}
				}
			}
		}
		.ping-box {
			margin-top: 15rpx;
			justify-content: flex-start;
			.ping {
				margin-left: 10rpx;
				height: 39rpx;
				background: #fdf7eb;
				border-radius: 5rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ff911f;
				display: flex;
				align-items: center;
				padding: 0 10rpx;
			}
		}
		.price-box {
			margin-top: 38rpx;
			justify-content: flex-start;
			.yuanprice {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-decoration: line-through;
				color: #999999;
				padding-right: 6rpx;
			}
			image {
				width: 14rpx;
				height: 16rpx;
			}
			.jiang {
				padding-left: 2rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #b59467;
			}
		}
		.price {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ff1135;
		}
		.btn {
			width: 137rpx;
			height: 56rpx;
			background: linear-gradient(-35deg, #f8dd4f, #fbeb77);
			border-radius: 28rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 56rpx;
			text-align: center;
			position: absolute;
			bottom: 25rpx;
			right: 25rpx;
		}
	}
}
.popup-box {
		width: 522rpx;
		height: 605rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: relative;

		.img {
			position: relative;
			top: -56rpx;
			left: 0;
			width: 522rpx;
			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: 197rpx;
					height: 74rpx;
					border: 1px solid #dcc786;
					border-radius: 38rpx;

					font-size: 32rpx;
					color: #605128;
				}

				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
					border-radius: 38px;
					font-size: 32rpx;
					color: #605128;
				}
			}
		}
	}

</style>