hhsc/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/vip')">
				<image src="/static/icon/c3.png"></image>
				<view class="cate-font">会员礼包</view>
			</view>
			<view class="cate-item" @click="nav('/pages/category/articleList')" v-if="iswz">
				<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="goldenBean" v-if="vipList.length > 0">
			<view class="title">
				<view class="shu"></view>
				<view class="title-t">会员礼包</view>
				<text class="about">超值体验</text>
			</view>
			<view class="box">
				<view class="header">
					<view class="left">
						<view class="title">购买商品赠送消费补贴券</view>
						<view class="about">买到就是赚到</view>
					</view>
					<view class="right"><image src="@/static/img/right.png" @click="navto('/pages/index/vip')"></image></view>
				</view>
				<view class="footer">
					<view class="list">
						<view class="item" v-for="d in vipList" @click="navToVipDetailPage(d)">
							<view class="img"><image :src="d.image" mode=""></image></view>
							<view class="name nowarp" :title="d.store_name">{{ d.store_name }}</view>
							<view class="price">￥{{ d.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="goldenBean" v-if="vipList.length > 0">
			<view class="title">
				<view class="shu"></view>
				<view class="title-t">会员礼包</view>
				<text class="about">超值体验</text>
			</view>
			<view class="box">
				<view class="header">
					<view class="left">
						<view class="title">购买商品赠送消费积分</view>
						<view class="about">买到就是赚到</view>
					</view>
					<view class="right"><image src="@/static/img/right.png" @click="navto('/pages/index/vip')"></image></view>
				</view>
				<view class="footer">
					<view class="list">
						<view class="item" v-for="d in vipList" @click="navToDetailPage(d)">
							<view class="img"><image :src="d.image" mode=""></image></view>
							<view class="name nowarp" :title="d.store_name">{{ d.store_name }}</view>
							<view class="price">￥{{ d.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="xian"></view>
		<view class="main" v-if="dataList.length > 0">
			<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" v-if="item.integral != 0">￥{{ item.price }} + {{ item.integral }}消费补贴券</view>
						<view class="price" v-else>￥{{ 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">客服VX:{{ weixin }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel">取消</view>
						<view class="comfirm" @click="comfirm(weixin)">复制微信</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 { dhList } from '@/api/product.js';
import { mapState } from 'vuex';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { article,articleList } from '@/api/user.js';
import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.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: [], //积分商品
			vipList: [], //身份商品
			erweima: '',
			weixin: 'lzmycd0408', //客服微信
			swiperLength: 1,//图片数量
			iswz: false,//是否显示文章
		};
	},
	onLoad: function(option) {
		// let agree = uni.getStorageSync("agree")||false;
		// // 判断是否已经同意协议
		// if(!agree){
		// 	uni.redirectTo({url:"/pages/contract/start"})
		// }
		if (option.spread) {
			// 存储邀请人
			uni.setStorage({
				key: 'spread',
				data: option.spread
			});
		}
		// #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);
		// 		}
		// 	});
		// }
		articleList({page:1,limit:10}).then(({data}) =>{
			let list = data.filter(e => {
				return (e.id !== 0)
			})
			if(list.length > 0) {
				this.iswz = true
			}
			
		})
		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) {
			let obj = this;
			let content = text; //需要复制的内容
			console.log('复制的内容:', content);
			// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
			const result = uniCopy(content);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		},
		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() {
			dhList({ page: 1, limit: 3 }).then(({ data }) => {
				if (data.length > 0) {
					this.vipList = data;
				}
			});
			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
			});
		},
		navToVipDetailPage(item) {
			uni.navigateTo({
				url: '/pages/product/vipProduct?id=' + item.id
			});
		},
		navto(url) {
			uni.switchTab({
				url,
				fail() {
					uni.navigateTo({
						url
					});
				}
			});
		}
	}
};
</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;
}
.shu {
	width: 8rpx;
	height: 38rpx;
	background: #05ab81;
	border-radius: 4rpx;
}
.main {
	margin-top: 40rpx;
	padding: 0 40rpx;
	.main-top {
		align-items: center;
		.main-left {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.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: 300rpx;
	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: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	.guess-box {
		padding: 12rpx 0 0 24rpx;
		width: 436rpx;
		.title {
			font-size: 36rpx;
			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: 50rpx;
			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: 10rpx;
			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;
				}
			}
		}
	}
.close_icon {
	width: 60rpx;
	height: 60rpx;
	margin: 88rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}
$grey: #95a0b1;
$text: #333333;
$red: #ff4c4c;
// 金豆专区
.goldenBean {
	font-family: PingFang-SC-Bold;
	margin-top: 20rpx;
	padding: 20rpx;
	background-color: #fff;

	.title {
		display: flex;
		line-height: 40rpx;
		.title-t {
			color: $text;
			font-weight: bold;
			margin: 0 20rpx;
			font-size: 34rpx;
		}
		.about {
			font-size: 24rpx;
			color: $grey;
		}
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.box {
		margin: 20rpx 0;
		border-radius: 10rpx;
		overflow: hidden;
		.header {
			padding: 20rpx;
			background: linear-gradient(90deg, #ff8f44 0%, #ffbd70 100%);
			padding-bottom: 80rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			color: #fff;
			.left {
				line-height: 40rpx;
				.title {
					font-size: 32rpx;
				}
				.about {
					opacity: 0.9;
					font-size: 24rpx;
				}
			}
			.right {
				margin: auto 0;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.footer {
			height: 300rpx;
			background-color: $page-color-base;
			padding: 20rpx;
			margin-bottom: -50rpx;
			.list {
				display: flex;
				overflow: auto;
				border-radius: 10rpx;
				position: relative;
				top: -90rpx;
				background-color: #fff;
				.item {
					padding: 30rpx;
					border-right: solid 1rpx $page-color-base;
					.name {
						font-size: 24rpx;
						color: #3f3f3f;
						width: 150rpx;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.price {
						font-size: 28rpx;
						color: $red;
						font-weight: bold;
					}
					.img {
						image {
							width: 150rpx;
							height: 150rpx;
						}
					}
				}
			}
		}
	}
}
</style>