zhongwin/pages/index/index.vue

<template>
	<view class="center">
		<!-- 小程序头部兼容 -->
		<!-- #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="top"></view>
		<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="item.pic" /></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/index/vip')"></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">
				<view class="popup-dox">
					<image class="popup-logo" src="../../static/img/img009.png"></image>
					<view class="pop-title">已为您定制专属客服</view>
					<view>{{ weixin }}</view>
					<image class="popup-text" @longtap="bc_code" :src="erweima"></image>
					<view class="btn" @click="copy(weixin)">复制微信号</view>
					<view class="pop-tip flex">
						<view class="weixin"><image src="../../static/img/weixin.png" mode=""></image></view>
						<view>长按保存二维码</view>
					</view>
				</view>
			</view>
			<view class="close_icon" @click="close"><image src="../../static/img/Close.png"></image></view>
		</uni-popup>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
import { mapState } from 'vuex';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { service } from '@/api/user.js';
// #ifdef H5
import { weixindata, weixinlocation, shareLoad } from '@/utils/wxAuthorized';
import weixinObj from '@/plugin/jweixin-module/index.js';
// #endif
export default {
	data() {
		return {
			carouselList: [], //轮播图
			swiperCurrent: 0,
			dataList: [],
			erweima: '',
			weixin: '', //客服微信
			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
		// #ifdef H5
		if (this.hasLogin) {
			console.log('显示');
			weixinObj.hideAllNonBaseMenuItem();
			this.IndexShare();
		} else {
			console.log('隐藏');
			weixinObj.hideAllNonBaseMenuItem();
		}
		//#endif
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
		...mapState(['baseURL'])
	},
	onShow: function() {
		// 判断是否强制登录
		if (!this.hasLogin) {
			// 登录拦截
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					if (e.confirm) {
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
		}
		this.loadData();
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
	},
	// #ifndef MP
	// 监听导航栏输入框点击事件
	onNavigationBarSearchInputClicked(e) {
		//跳转到搜索页面
		this.clickSearch();
	},
	//点击导航栏 buttons 时触发
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/user/notice'
		});
	},
	// #endif
	methods: {
		// #ifdef H5
		IndexShare() {
			let obj = this;
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/#/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				path += i + '=' + page.options[i] + '&';
			}
			console.log(obj.Path);
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			let data = {
				link: this.baseURL + '/index/' + path,
				title: this.userInfo.nickname + '邀请您进入鼎立足行',
				desc: '欢迎加入鼎立足行',
				imgUrl: 'https://dlzx.liuniu946.com/index/static/img/logo.png'
			};
			shareLoad(data);
		},
		// #endif
		// 监听切换事件
		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();
		},
		close() {
			this.$refs.popup.close();
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
		},
		copy(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();
		},
		bc_code() {
			let that = this;
			console.log('保存二维码', this.erweima);
			uni.downloadFile({
				//获得二维码的临时地址
				url: this.erweima,
				success: res => {
					//console.log('获取url',res)
					if (res.statusCode == 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath, //传入临时地址
							success() {
								that.$api.msg('保存成功'); //封装的提示
							},
							fail() {
								that.$api.msg('保存失败');
							}
						});
					}
				}
			});
		},
		// 请求载入数据
		async loadData() {
			loadIndexs({})
				.then(({ data }) => {
					console.log(data);
					this.carouselList = data.banner;
					this.swiperLength = this.carouselList.length;
					this.dataList = data.likeInfo; //最新商品
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
			service({}).then(({ data }) => {
				this.erweima = data.service_qr;
				this.weixin = data.service_wechat;
			});
		},
		//详情页
		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: #0fc8e4;
	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: 240rpx;
	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(-260rpx + var(--status-bar-height));
	.bor {
		border-radius: 14rpx;
		.carousel-item {
			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: 80rpx;
			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: #16cc9f;
			border-radius: 28rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 56rpx;
			text-align: center;
			position: absolute;
			bottom: 25rpx;
			right: 25rpx;
		}
	}
}
.popup {
	width: 640rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
	text-align: center;
	.popup-dox {
		position: relative;
		top: -60rpx;
		.popup-logo {
			width: 460rpx;
			height: 132rpx;
		}
		.pop-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
			padding: 25rpx 0rpx;
			margin-bottom: 50rpx;
		}
		.popup-text {
			width: 400rpx;
			height: 400rpx;
			margin-bottom: 50rpx;
		}
		.btn {
			width: 300rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #96e4f2;
			margin: 0 auto;
			color: #ffffff;
			border-radius: 25rpx;
		}
		.pop-tip {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			justify-content: center;
			margin-top: 20rpx;
			.weixin {
				width: 48rpx;
				height: 40rpx;
				margin-right: 14rpx;
				image {
					width: 48rpx;
					height: 40rpx;
				}
			}
		}
	}
}
.close_icon {
	width: 60rpx;
	height: 60rpx;
	margin: 88rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}</style>