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/index/artList?cid=1&tit=' + encodeURI('众赢集团'))">
				<image src="/static/icon/in1.png"></image>
				<view class="cate-font">众赢集团</view>
			</view>
			<view class="cate-item" @click="nav('/pages/category/articleList')">
				<image src="/static/icon/in2.png"></image>
				<view class="cate-font">康养旅居</view>
			</view>

			<view class="cate-item">
				<image src="/static/icon/in3.png" @click="nav('/pages/index/vip')"></image>
				<view class="cate-font">调理养护</view>
			</view>
			<view class="cate-item">
				<image src="/static/icon/in4.png" @click="nav('/pages/index/vip')"></image>
				<view class="cate-font">专家专项</view>
			</view>
			<view class="cate-item">
				<image src="/static/icon/in5.png" @click="nav('/pages/index/vip')"></image>
				<view class="cate-font">商品分类</view>
			</view>
			<view class="cate-item">
				<image src="/static/icon/in6.png" @click="nav('/pages/index/vip')"></image>
				<view class="cate-font">热销推荐</view>
			</view>
			<view class="cate-item">
				<image src="/static/icon/in7.png" @click="nav('/pages/index/vip')"></image>
				<view class="cate-font">会员中心</view>
			</view>
			<view class="cate-item" @click="showPopup()">
				<image src="/static/icon/in8.png"></image>
				<view class="cate-font">分享有礼</view>
			</view>

		</view>
		<view class="jj-tit">
			<view class="left">
				<image src="../../static/icon/gsjj.png" mode="" class="jj-log"></image>
				<view class="jj-title">
					公司简介
				</view>
			</view>
			<view class="right" @click="nav('/pages/index/artList?cid=1')">
				<view class="jj-more-tit">
					更多
				</view>
				<image src="../../static/img/img39.png" mode="" class="jj-more"></image>
			</view>
		</view>
		<view class="jj-wrap" >
			<view class="jj" v-for="gs in 2" @click="nav('/pages/index/artDetail?id=' + gs.id)">
				<image src="" mode="" class="jj-img"></image>
				<view class="jj-info">
					<view class="jj-tit-tit clamp">
						标题
					</view>
					<view class="jj-val clamp2">
						更新时间：11111111
					</view>
				</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="main-t-t">
				<image src="../../static/img/jxhh.png" mode="" class="main-t-t-i"></image>
			</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, #52c696, #52c696);
		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(-240rpx + 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;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 60rpx 0 20rpx;

		.cate-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 4rpx;
			color: $font-color-dark;

			image {
				width: 118rpx;
				height: 103rpx;
			}

		}

		.cate-font {
			// margin-top: -26rpx;
			margin-bottom: 20rpx;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		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-t-t {
			// width: 100;
			display: flex;
			justify-content: center;
			.main-t-t-i {
				width: 376rpx;
				height: 34rpx;
				margin: auto;
			}
		}
		.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: #FF6F0F;
			}

			.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%;
		}
	}
	.jj-tit {
		display: flex;
		// height: 50rpx;
		justify-content: space-between;
		background-color: #fff;
		padding-top: 20rpx;
		.left {
			padding-left: 30rpx;
			display: flex;
			.jj-log {
				width: 45rpx;
				height: 45rpx;
			}
			.jj-title {
				font-weight: bold;
				font-size: 32rpx;
				padding-left: 15rpx;
			}
		}
		.right {
			display: flex;
			width: 200rpx;
			font-size: 22rpx;
			// justify-content: sp;
			justify-content: flex-end;
			align-items: center;
			padding-right: 30rpx;
			color: #999;
			.jj-more {
				margin-left: 10rpx;
				width: 15rpx;
				height: 22rpx;
			}
		}
	}
	.jj-wrap {
		background-color: #fff;
		// margin: 20rpx 0;
		.jj {
			margin: auto;
			width: 689rpx;
			height: 202rpx;
			border-bottom: 1px solid #e5e5e5;
			padding: 20rpx;
			padding-left: 0;
			display: flex;
			&:last-of-type {
				border-bottom: none;
			}
			.jj-img {
				flex-shrink: 0;
				width: 222rpx;
				height: 158rpx;
				background-color: #eee;
				border-radius: 10rpx;
			}
			.jj-info {
				width: 450rpx;
				// flex-shrink: 0;
				padding: 10rpx;
				padding-left: 15rpx;
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.jj-tit-tit {
					
				}
				.jj-val {
					padding-top: 20rpx;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
	}
</style>