hmd/pages/index/index.vue

<template>
	<view class="container">
		<view class="carousel-section">
			<image src="../../static/img/home-top.png" mode="widthFix" class="home-top"></image>
			<view class="search flex">
				<view class="input-box flex" @click.stop="clickSearch">
					<view class=" input-content flex">
						<view class="iconfont iconsearch"></view>
						<view class="input"><input type="text" disabled value="输入关键字搜索" /></view>
					</view>
				</view>
			</view>
			<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange"
				:indicator-dots="true" indicator-active-color="#FFFFFF">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.pic" mode="aspectFill" @click="bannerNavToUrl(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="top-tit">
			
			<image src="../../static/icon/fgq.png" mode="widthFix" v-if="userInfo && userInfo.pay_count >0"></image>
			<image src="../../static/icon/bdq.png" mode="widthFix" v-else></image>
		</view>
		<view class="good-wrap">
			<view class="good-img">
				<image :src="goodList.image" mode=""></image>
				<image src="../../static/img/goog-bg.png" mode=""></image>
			</view>
			<view class="good-tit clamp2">
				{{goodList.store_name}}
			</view>
			<view class="price-btn flex">
				<view class="price flex">
					<view class="old-price">
						原价￥{{goodList.ot_price*1 || '0'}}
					</view>
					<view class="new-price" v-if="userInfo && userInfo.identity == 1">
						{{goodList.vip_repurchase*1 || '0'}}
					</view>
					<view class="new-price" v-if="userInfo && userInfo.identity == 2">
						{{goodList.agent_repurchase*1 || '0'}}
					</view>
					<view class="new-price" v-if="(!hasLogin || userInfo.identity == 0)">
						{{goodList.price*1 || '0'}}
					</view>
				</view>
				<view class="btn flex">
					<view class="gobuy" @click="navTo('/pages/product/product?id=' + goodList.id)">
						去抢购
					</view>
					<view class="goshare" @click="getShow(goodList.id)">
						去分享
					</view>
				</view>
			</view>
			<view class="" style="height: 25rpx;">

			</view>
		</view>
		<!-- 分享弹出窗 -->
		<uni-popup ref="popupshare" type="center">
			<view class="share-box">
				<image :src="shareImage" mode="" class="box-img" @longpress="saveImg()"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		loadIndexs
	} from '@/api/index.js';
	import {
		getUserInfo,
		spread
	} from '@/api/user.js';
	import {
		getBargainList,
		getProducts,
		goodsDetail,
		poster
	} from '@/api/product.js';
	import {
		interceptor
	} from '@/utils/loginUtils';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// #ifdef H5
	import {
		weixindata,
		shareLoad
	} from '@/utils/wxAuthorized';
	// #endif
	export default {
		data() {
			return {
				page: 1,
				limitt: 20,
				loadingType: 'more',
				current: 0,
				shareShow: false, //分享海报
				pageProportion: 0, //保存页面基于750宽度的比例
				swiperHeight: 0,
				checkid: 0,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [], //轮播列表
				page: 1,
				limit: 5,
				firstList: [],
				goodList: {},
				shopList: [],
				period: 1,
				shareImage: '',
			};
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {}
			if(this.userInfo.uid) {
				shareObj = {
					title: this.userInfo.nickname + '邀请您加入北京鸿蒙德', // 默认是小程序的名称(可以写slogan等)
					path: url + '?scene=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '',
					success: function(res) {
						// 转发成功之后的回调
						if (res.errMsg == 'shareAppMessage:ok') {}
					},
					fail: function() {
						// 转发失败之后的回调
						if (res.errMsg == 'shareAppMessage:fail cancel') {
							// 用户取消转发
						} else if (res.errMsg == 'shareAppMessage:fail') {
							// 转发失败，其中 detail message 为详细失败信息
						}
					}
				};
			}else {
				shareObj = {
					title: '北京鸿蒙德', // 默认是小程序的名称(可以写slogan等)
					path: url, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '',
					success: function(res) {
						// 转发成功之后的回调
						if (res.errMsg == 'shareAppMessage:ok') {}
					},
					fail: function() {
						// 转发失败之后的回调
						if (res.errMsg == 'shareAppMessage:fail cancel') {
							// 用户取消转发
						} else if (res.errMsg == 'shareAppMessage:fail') {
							// 转发失败，其中 detail message 为详细失败信息
						}
					}
				};
			}
			
			return shareObj;
		},
		onReachBottom() {},
		onLoad: function(option) {
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
		},
		watch: {
			// PXType(val, old) {
			// 	console.log('切换显示')
			// 	this.getStoreList()
			// },
			// chooseDistrict(val,old) {
			// 	this.reGetStoreList()
			// }
		},
		onShow: function() {
			this.getGoodList()
			this.loadData();
		},
		methods: {
			getShow(id) {
				let obj = this;
				uni.showLoading({
					title: 'Loading...',
					mask: true
				});
				// // #ifdef H5
				// let fromname = 'wechat';
				// // #endif
				// // #ifdef MP
				let fromname = 'routine';
				////#endif
				poster({
					productId: id,
					from: 'routine'
				}).then(({data}) => {
					obj.shareImage = data.url;
					console.log(obj.shareImage, '123456');
					uni.hideLoading();
					this.$refs.popupshare.open();
				}).catch(err => {
					uni.hideLoading();
				})
			},
			getGoodList() {
				let obj = this
				getProducts({
					page: 1,
					limit: 50,
					cid: 1
				}).then(res => {
					console.log(res, 'libao')
					obj.goodList = res.data[0]
				})
			},
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			navTo(url) {
				if (url == '') {
					this.$api.msg('暂未开通，敬请期待');
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: ''
				});
			},
			// 监听图片加载完成
			onImageError(key, index) {
				this[key][index].image = '/static/error/errorImage.jpg';
			},
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						let goods = data.info;
						console.log(goods, '商品信息');
						this.carouselList = data.banner;
						this.swiperLength = this.carouselList.length;
						this.bastList = data.giftInfo; //会员礼包
						data.info.firstList.forEach(e => {
							e.isVip = e.store_type ? "3" : "0"
						})
						this.firstList = data.info.firstList //首页商品
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				console.log(item.wap_url.indexOf('http'), 'banner');
				if (item.wap_url.indexOf('http') >= 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url
				});
			},
			// 根据指定个数分割数组
			chunkArr(arr, size) {
				console.log(arr, 'arr+++++')
				//判断如果不是数组(就没有length)，或者size没有传值，size小于1，就返回空数组
				if (!arr.length || !size || size < 1) return []
				let [start, end, result] = [null, null, []]
				for (let i = 0; i < Math.ceil(arr.length / size); i++) {
					start = i * size
					end = start + size
					result.push(arr.slice(start, end))
				}
				return result
			},
			// 长按保存图片
			saveImg(w) {
				console.log(w);
				let obj = this;
				uni.downloadFile({
					//下载图片
					url: obj.shareImage,
					success: res => {
						console.log(res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							//将图片保存在手机
							filePath: res.tempFilePath, //保存的位置
							success: res => {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								});
							}
						});
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #ffff;
		min-height: 100%;
		height: auto;
	}

	.carousel-section {
		position: relative;

		// padding-top: 10px;
		.home-top {
			width: 750rpx;
			position: absolute;
			top: 0;
		}

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 378rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.titleNview-placing {
			height: var(--status-bar-height);
			box-sizing: content-box;
		}

		.search {
			justify-content: space-between;
			padding: 10rpx 32rpx 20rpx;
			align-items: center;
			// background-color: #ff5246;

			.address {
				width: 32rpx;
				height: 38rpx;
			}

			.shop-name {
				height: 38rpx;
				position: relative;
				top: -4rpx;
				z-index: 100;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				padding-left: 10rpx;
			}

			.shop-jt {
				margin-left: 8rpx;
				width: 16rpx;
				height: 10rpx;
			}

			.input-box {
				margin-left: 10rpx;
				position: relative;
				z-index: 99;
				width: 650rpx;
				height: 60rpx;
				background: #EEEEEE;
				border-radius: 30rpx;

				.input-content {
					position: relative;
					z-index: 11;
					border-radius: 99rpx;
					flex-grow: 1;
					padding: 5rpx 30rpx;
					background: #fff;

					.iconsearch {
						font-size: 50rpx;
						color: #CBCBCB;
					}

					.input {
						margin-left: 19rpx;
						flex-grow: 1;
						color: #CBCBCB;

						input {
							font-size: 28rpx;

							color: #CBCBCB;
						}
					}
				}

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

	.carousel {
		position: relative;
		z-index: 3;
		width: 100%;
		height: 360rpx;
		// background-color: #fff;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28rpx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: $border-radius-sm;
		}
	}

	.top-tit {
		width: 332rpx;
		height: 32rpx;
		margin: 36rpx auto 23rpx;

		image {
			width: 332rpx;
		}
	}

	.good-wrap {
		width: 700rpx;
		margin: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
		border-radius: 20px 20px 20px 20px;

		.good-img {
			width: 700rpx;
			height: 300rpx;
			position: relative;

			image {
				position: absolute;
				top: 0;
				width: 700rpx;
				height: 300rpx;
			}
		}

		.good-tit {
			padding: 15rpx 22rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.price-btn {
			padding: 0 22rpx;

			.price {
				.old-price {
					font-size: 26rpx;
					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
				}

				.new-price {
					font-size: 55rpx;
					font-weight: bold;
					color: #FF4C4C;

					&::before {
						content: '￥';
						font-size: 32rpx;
					}
				}
			}

			.btn {
				text-align: center;
				line-height: 53rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;

				.gobuy {
					width: 170rpx;
					height: 53rpx;
					background: #ff5346;
					border-radius: 27rpx;
					color: #fff;
					margin-right: 15rpx;
				}

				.goshare {
					width: 129rpx;
					height: 53rpx;
					border: 2rpx solid #ff5346;
					background: #fff;
					color: #ff5346;
					border-radius: 27rpx;
				}
			}
		}
	}

	.share-box {
		width: 600rpx;
		height: 1000rpx;
		background: red;

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