cgst/pages/index/index.vue

<template>
	<view class="container">
		<!-- 兼容小程序搜索 -->
		<!-- 顶部logo and 搜索 start-->
		<view class="top-search flex">
			<view class="search-box flex" @click="clickSearch()">
				<image class="search" src="../../static/icon/search-h.png" mode=""></image>
				<view class="search-font">输入关键词搜索</view>
			</view>
		</view>
		<!-- 顶部logo and 搜索 end-->
		<!-- 轮播图 start -->
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<!-- <view class="carousel-item"><image src="../../static/img/index.png" /></view> -->
			<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image :src="item.pic" /></swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		<!-- <view class="swiper-btm flex">
			<view class="btm-item flex">
				<image src="../../static/icon/index-gou.png" mode=""></image>
				<view class="">自用购物返利</view>
			</view>
			<view class="btm-item flex">
				<image src="../../static/icon/index-gou.png" mode=""></image>
				<view class="">分享好友赚钱</view>
			</view>
			<view class="btm-item flex">
				<image src="../../static/icon/index-gou.png" mode=""></image>
				<view class="">超值正品优惠</view>
			</view>
		</view> -->
		<!-- 预约 start-->
		<view class="yuyue-wrap">
			<view class="yuyue-top flex"><image src="../../static/img/yuyue-top.png" mode="heightFix"></image></view>
			<view class="yuyue-item" v-for="item in list" @click="navToDetailPage(item)">
				<view class="share" @click.stop="share(item)">
					<image class="share-img" src="../../static/img/share.png" mode=""></image>
					<view class="share-font">分享</view>
				</view>
				<!-- <button class="share" open-type="share">
					<image class="share-img" src="../../static/img/share.png" mode=""></image>
					<view class="share-font">分享</view>
				</button> -->
				<view class="yuyue-item-left">
					<view class="yuyue-item-left-bg"><image src="../../static/img/index-bg.png" mode=""></image></view>
					<image class="yuyue-item-left-image" :src="item.image" mode=""></image>
				</view>
				<view class="yuyue-item-right">
					<view class="yuyue-item-title clamp2">{{ item.store_name }}</view>
					<view class="yuyue-item-bottom-box">
						<view class="yuyue-item-price">￥{{ item.price }}</view>
						<view class="yuyue-item-btn">立即拼团</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popupshare" type="center">
			<view class="share-box"><image :src="shareimg" mode="" class="box-img" @longpress="saveImg()"></image></view>
		</uni-popup>
		<!-- 预约 end-->
		<u-tabbar
			v-if="userInfo.user_rule == 'leader' || userInfo.user_rule == 'admin'"
			v-model="current"
			:list="tabbar"
			active-color="#FF4C4C"
			inactive-color="#666666"
		></u-tabbar>
		<u-tabbar v-else v-model="current" :list="tabbar1" active-color="#FF4C4C" inactive-color="#666666"></u-tabbar>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
import { getProducts, poster } from '@/api/product.js';
import { mapState, mapMutations } from 'vuex';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { tabbar, tabbar1 } from '@/utils/tabbar.js';
export default {
	// #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: 'http://zhibo.liuniu946.com/uploads/attach/2021/06/20210621/f24e2d3028d95db57944e1816ec464fc.jpg',
				title: this.userInfo.nickname + '邀请您进入城攻闪拓项目'
			};
			return data;
		} else {
			console.log('else');
		}
	},
	// #endif
	data() {
		return {
			shareimg: '',
			imging: 1, //生成海报中1没有2正在运行
			tabbar: tabbar,
			tabbar1: tabbar1,
			current: 0,
			carouselList: [],
			list: [],
			swiperLength: 0,
			swiperCurrent: 0,
			goodsObjact: {
				percent: 1
			} //保存商品数据
		};
	},
	onShow() {
		let pages = getCurrentPages(); //获取加载的页面
		let currentPage = pages[pages.length - 1]; //获取当前页面的对象
		let url = currentPage.route; //当前页面url
		let item = currentPage.options; //如果要获取url中所带的参数可以查看options

		this.url = this.$store.state.baseURL + '/index/#/' + url + '?id=' + item.id + '&spread=' + this.userInfo.uid;
	},
	onReady() {
		let obj = this;
		let query = uni.createSelectorQuery();
		// 获取页面比例
		query
			.select('.container')
			.fields(
				{
					size: true
				},
				e => {
					// 保存比例
					this.ratio = e.width / 750;
				}
			)
			.exec();
	},
	onLoad(option) {
		let res = uni.getSystemInfoSync();
		if (option.spread) {
			// 存储邀请人
			this.spread = option.spread;
			uni.setStorageSync('spread', option.spread);
		}
		if (option.scene) {
			// 存储邀请人
			this.spread = option.scene;
			uni.setStorageSync('spread_code', option.scene);
		}
		this.loadData();
	},

	computed: {
		...mapState(['userInfo', 'baseURL', 'hasLogin', 'urlFile'])
	},
	methods: {
		// 获取首页数据
		loadData() {
			loadIndexs({}).then(({ data }) => {
				this.carouselList = data.banner;
			});
			getProducts({ pages: 1, limit: 1000 }).then(({ data }) => {
				this.list = data;
			});
		},
		//轮播图跳转页面
		nav(item) {
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			console.log(item);
			if (item.url != '/') {
				console.log('11111');
				uni.navigateTo({
					url: '/' + item.url,
					fail(error) {
						console.log(error);
					}
				});
			}
		},
		// 保存海报
		saveImg(w) {
			let obj = this;
			console.log(w, obj.shareimg);
			uni.downloadFile({
				//下载图片
				url: obj.shareimg,
				success: res => {
					console.log(res.tempFilePath);
					uni.saveImageToPhotosAlbum({
						//将图片保存在手机
						filePath: res.tempFilePath, //保存的位置
						success: res => {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		// 分享海报
		share(item) {
			let obj = this;
			if (obj.imging == 2) {
				return;
			}
			uni.showLoading({
				title: '生成海报中'
			});
			obj.imging = 2;
			// #ifdef H5
			let fromname = 'wechat';
			// #endif
			// #ifdef MP
			let fromname = 'routine';
			// #endif
			poster({
				productId: item.id,
				from: fromname
			})
				.then(({ data }) => {
					console.log(data.url);
					obj.shareimg = data.url;
					obj.imging = 1;
					uni.hideLoading();
					this.$refs.popupshare.open();
				})
				.catch(err => {
					obj.imging = 1;
				});
		},
		// 点击跳转页面
		navTo(url) {
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			uni.navigateTo({
				url,
				fail(error) {
					uni.switchTab({
						url
					});
				}
			});
		},
		// 监听导航栏输入框点击事件
		onNavigationBarSearchInputClicked(e) {
			//跳转到搜索页面
			this.clickSearch();
		},
		// 點擊搜索框
		clickSearch() {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
			this.titleNViewBackground = this.carouselList[index].background;
		},
		// 跳转普通商品
		navToDetailPage(item) {
			uni.navigateTo({
				url: '/pages/product/product?id=' + item.id
			});
		},
		IndexShare() {
			let obj = this;
			let data = obj.onShareAppMessage();
			let item = {
				link: data.path, // 分享链接
				imgUrl: data.imgUrl,
				title: data.title
			};
			console.log('分享加', item);
			weixindata(item);
		}
	}
};
</script>

<style lang="scss">
/* #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-search {
	height: 80rpx;
	padding: 0 20rpx;
	background-color: #fff;
	.top-logo {
		width: 50rpx;
		// height: 50rpx;
		margin-right: 10rpx;

		image {
			width: 48rpx;
		}
	}

	.search-box {
		justify-content: center;
		width: 698rpx;
		height: 60rpx;
		background: #eeeeee;
		// box-shadow: 0px 10rpx 20rpx 0px rgba(4, 114, 69, 0.22);
		border-radius: 30rpx;

		.search {
			width: 34rpx;
			height: 34rpx;
		}

		.search-font {
			margin-left: 14rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cbcbcb;
		}
	}
}
// 顶部轮播图
.top-swiper {
	width: 750rpx;
	height: 360rpx;
	// margin: 20rpx 0 0;
	image {
		width: 750rpx;
		height: 360rpx;
	}
}
.swiper-btm {
	height: 60rpx;
	width: 750rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	font-size: 21rpx;
	font-weight: 500;
	color: #333333;
	.btm-item {
		flex-grow: 1;
		justify-content: center;
		image {
			width: 25rpx;
			height: 25rpx;
			margin-right: 14rpx;
		}
	}
}
/* 分类 */
.cate-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	padding: 30rpx 22rpx;
	background-color: #ffffff;

	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-sm + 2rpx;
		color: $font-color-dark;
	}

	/* 原图标颜色太深,不想改图了,所以加了透明度 */
	image {
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 14rpx;
		border-radius: 50%;
		opacity: 0.7;
	}
}

// 为你推荐
.recommend-box {
	background: linear-gradient(180deg, #ffffff, #f8f8f8);
	width: 100%;
	padding: 0 32rpx;
}

.f-header {
	display: flex;
	align-items: center;
	height: 92rpx;
	padding: 6rpx 30rpx 8rpx;
	border-radius: 12rpx 12rpx 0 0;
	color: #ffffff;
	background: linear-gradient(180deg, #fd4646, #ff3535);
	.tit-box {
		@extend %font-title-box;
		font-size: 20rpx;
		color: #ffffff;
		margin-left: 20rpx;
	}
	.iconenter {
		font-size: $font-lg + 2rpx;
		color: #ffffff;
	}

	.f-left-icon {
		font-size: 34rpx;
		border-right: 1rpx solid #ffffff;
		padding-right: 18rpx;
	}

	.iconfont {
		font-size: 26rpx;
	}
}

.guess-section {
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 0 0 12rpx 12rpx;
	.guess-item {
		display: flex;
		width: 100%;
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		&:nth-last-child(1) {
			border-bottom: none;
		}
	}

	.image-wrapper {
		width: 168rpx;
		height: 168rpx;
		border-radius: 3px;
		image {
			width: 168rpx;
			height: 168rpx;
			opacity: 1;
		}
	}
	.info-wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}
	.title {
		font-size: 32rpx;
		color: $font-color-dark;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.price-box {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		.price-left {
			display: flex;
			flex-direction: column;
			.price {
				margin-top: 8rpx;
				line-height: 30rpx;
				color: #ff0000;
				font-size: 40rpx;
				font-weight: 700;
				.price-tip {
					font-size: 28rpx;
				}
			}
			.ot_price {
				margin-top: 50rpx;
				line-height: 24rpx;
				font-size: 28rpx;
				margin-left: 4rpx;
				text-decoration: line-through;
				color: #aaaaaa;
				.price-tip {
					font-size: 22rpx;
				}
			}
		}
		.price-right {
			display: flex;
			flex-direction: column;
			.people {
				margin-top: 32rpx;
				font-weight: 700;
				color: #999999;
				font-size: 22rpx;
				text-align: right;
				margin-right: 4rpx;
			}
			.buyNow {
				margin-top: 68rpx;
				background: linear-gradient(180deg, #fd4646, #ff3535);
				border-radius: 26rpx;
				padding: 6rpx 18rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
}
// 热销产品
.hotgoodsheader {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32rpx 0 24rpx;
	image {
		width: 374rpx;
		height: 34rpx;
	}
}
.hotgoods {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0 32rpx 108rpx;

	.hotgoods-item {
		width: 48%;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		&:nth-child(2n + 1) {
			margin-right: 24rpx;
		}
		.image-wrapper {
			width: 100%;
			height: 330rpx;
			border-radius: 3px;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
				border-radius: 12rpx 12rpx 0 0;
			}
		}
		.title {
			font-size: $font-base;
			color: $font-color-dark;
			font-weight: bold;
			line-height: 80rpx;
		}
		.hot-price {
			display: flex;
			justify-content: space-between;
			padding: 0 16rpx 12rpx;

			.price {
				font-size: 40rpx;
				color: #ff0000;
				font-weight: 500;
			}
			.cart-icon {
				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}
}
.award-box {
	width: 100%;
	padding: 24rpx 24rpx 0;
	background: #ffffff;
	image {
		width: 100%;
		height: 170rpx;
	}
}
.yuyue-wrap {
	background-color: #fff;
	.yuyue-top {
		height: 117rpx;
		justify-content: center;
		image {
			display: inline-block;
			height: 31rpx;
			margin: auto;
		}
	}
	.yuyue-item {
		width: 710rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		padding: 20rpx 30rpx 20rpx 14rpx;
		position: relative;
		display: flex;
		justify-content: flex-start;
		.share {
			position: absolute;
			top: 0;
			right: 30rpx;
			width: 72rpx;
			height: 96rpx;
			background: linear-gradient(0deg, #fc773a, #ffa934);
			border-bottom-left-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			padding: 10rpx 16rpx 14rpx;
			line-height: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.share-img {
				width: 32rpx;
				height: 32rpx;
			}
			.share-font {
				margin-top: 8rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.yuyue-item-left {
			position: relative;
			.yuyue-item-left-bg {
				position: absolute;
				z-index: 2;
				top: 0;
				right: 0;
				left: 0;
				width: 236rpx;
				height: 236rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.yuyue-item-left-image {
				width: 236rpx;
				height: 236rpx;
			}
		}
		.yuyue-item-right {
			margin-left: 22rpx;
			padding: 10rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			.yuyue-item-title {
				width: 320rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.yuyue-item-bottom-box {
				display: flex;
				justify-content: space-between;
				.yuyue-item-price {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ff4c4c;
				}
				.yuyue-item-btn {
					width: 138rpx;
					height: 52rpx;
					background: linear-gradient(90deg, #fe6f61 0%, #ff4343 100%);
					border-radius: 26rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 52rpx;
					text-align: center;
				}
			}
		}
	}
}
.share-box {
	width: 600rpx;
	height: 1000rpx;
	background: red;

	.box-img {
		width: 600rpx;
		height: 1000rpx;
	}
}
</style>