sct/pagesT/pointsMall/IntegralGoodsDetail.vue

<template>
	<view :class="['qn-page-' + theme]">
		<u-navbar :is-back="false" title-color="#000000" :title-bold="true" title-size="36" :title="goods_detail.title">
			<view class="back-icon ibonfont ibonfanhui" @click="back"></view>
		</u-navbar>
		<block v-if="goods_detail.id">
			<!-- 底部菜单 -->
			<view class="footer">
				<view class="icons">
					<view class="box" @click="goPage('/pages/index/index', 'switchTab')">
						<view class="icon ibonfont ibonhome"></view>
						<view class="text">首页</view>
					</view>
					<!-- <view class="box" @click="shareGoods">
						<view class="icon ibonfont ibonfenxiang2"></view>
						<view class="text">分享</view>
					</view> -->
				</view>
				<view class="btn"><view class="buy primary-bg" @click="openaddcartPop('btn')">立即兑换</view></view>
			</view>
			<!-- 商品主图轮播 -->
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="(item, index) in imgList" :key="index"><image :src="item" mode="aspectFit" @click="previewImage(index)"></image></swiper-item>
				</swiper>
				<view class="indicator">{{ currentSwiper + 1 }}/{{ imgList.length }}</view>
			</view>
			<!-- 标题 价格 -->
			<view class="goods-info">
				<!-- 商品信息 -->
				<view class="price-view primary-bg clearfix">
					<view class="float_left">
						<view style="display: inline-block;"><rich-text :nodes="$_utils.splitPrice(goods_detail.integral, 12)"></rich-text></view>
						<text style="font-size: 24rpx;margin-left: 6rpx;">股权</text>
					</view>
					<view class="right-view">
						<view class="goods-num">
							<view class="num-li">已兑换{{ goods_detail.changeNum }}件</view>
						</view>
					</view>
				</view>
				<view class="goods-info-main">
					<view class="title">{{ goods_detail.name || '' }}</view>
					<view class="desc">{{ goods_detail.desc || '' }}</view>
				</view>
			</view>
			<!-- 详情 -->
			<view class="description">
				<view class="title">———— 商品详情 ————</view>
				<view class="content"><u-parse :html="goods_detail.details"></u-parse></view>
			</view>
			<u-popup mode="bottom" v-model="sharePop">
				<view class="share-tit">分享</view>
				<view class="share-ul">
					<!-- #ifdef MP -->
					<view class="share-li">
						<button class="share-btn" open-type="share">
							<view class="icon-view"><u-icon name="weixin-fill" top="12" color="#ffffff" size="60"></u-icon></view>
							<view class="share-btn-label">分享给好友</view>
						</button>
					</view>
					<!-- #endif -->
					<view class="share-li" @click="generatePoster">
						<button class="share-btn">
							<view class="icon-view"><u-icon name="photo-fill" top="12" color="#ffffff" size="60"></u-icon></view>
							<view class="share-btn-label">生成分享海报</view>
						</button>
					</view>
				</view>
				<view class="share-cancel" @click="cancelPop">取消分享</view>
			</u-popup>
		</block>
	</view>
</template>

<script>
import webUrl from '../../config.js';
export default {
	data() {
		return {
			//轮播图下标
			currentSwiper: 0,
			sharePop: false, // 分享弹窗
			canvasPop: false, // 海报弹窗
			is_poster: false,
			buy_num: 1,
			activity: [],
			indicatorDots: true, //是否显示面板指示点
			autoplay: true, //是否自动切换
			interval: 2000,
			duration: 500,
			goods_detail: {},
			goods_id: '',
			imgList: [],
			QrSrc: '',
			pageName: '', // 启动页标示
		};
	},
	onShareAppMessage() {
		return {
			title: this.goods_detail.title,
			path: `/pagesT/product/product?id=${this.goods_id}&businessmanId=${this.$store.state.userStatus.id||''}` ,
			imageUrl: this.imgList[0],
			success: res => {
				console.log(res);
			}
		};
	},
	// #ifdef MP-WEIXIN
	// 分享到朋友圈
	onShareTimeline(obj) {
		console.log('分享到朋友圈::', obj);
	},
	// 收藏小程序
	onAddToFavorites() {},
	// #endif
	async onLoad(options) {
		if (options.pageName) {
			this.pageName = options.pageName || '电饭锅';
		}
		// #ifdef MP-WEIXIN
		// 小程序的原生菜单中显示分享按钮
		uni.showShareMenu({
			withShareTicket: false,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		// 接收传值
		if (options.id) {
			this.goods_id = options.id;
		} else {
			// 扫码进入
			const scene = decodeURIComponent(options.scene);
			this.goods_id = scene;
		}

		await this.getIntegralGoodsInfo();
		// await this.getQrSrc();
	},
	methods: {
		getQrSrc() {
			// #ifdef MP-TOUTIAO
			let pathT = 'pagesT/product/product?id=' + this.goods_id;
			pathT = encodeURIComponent(pathT);
			this.$u.api
				.byteCreateQRCode({
					path: pathT,
					params: this.goods_id,
					appname: 'toutiao'
				})
				.then(data => {
					this.QrSrc = data.data.indexOf('https') > -1 ? data.data : webUrl.QRC_SRC + data.data;
				});
			// #endif
			// #ifdef MP-WEIXIN || H5
			let pathS = 'pagesT/product/product';
			this.$u.api
				.createwxaqrcode({
					path: pathS,
					params: this.goods_id
				})
				.then(data => {
					this.QrSrc = data.data.indexOf('https') > -1 ? data.data : webUrl.QRC_SRC + data.data;
					console.log(this.QrSrc);
				});
			// #endif
		},
		handelImg(url) {
			if (url.indexOf('?imageView2/2/w/750/h/750') > -1) {
				return url.replace('?imageView2/2/w/750/h/750', '');
			} else if (url.indexOf('?imageView2/2/w/750') > -1) {
				return url.replace('?imageView2/2/w/750', '');
			} else {
				return url;
			}
		},
		generatePoster() {
			// this.is_poster = true;
			// this.canvasPop = true;
			// this.sharePop = false;
			const pramas = {
				id: this.goods_detail.id,
				priceShop: '¥' + this.goods_detail.maxMarketPrice,
				headImgs: this.goods_detail.images.map(item => this.handelImg(item)),
				goodsImg: this.handelImg(this.goods_detail.images[0]),
				goodsName: this.goods_detail.title,
				goodsPrice: '¥' + this.goods_detail.minSalePrice,
				mainLogo: '',
				recommendCodeGoods: this.QrSrc,
				share: {
					shareContent: this.$store.state.baseSet.shop || '',
					shareImg: this.handelImg(this.goods_detail.images[0]),
					shareTitle: this.goods_detail.title,
					shareUrl: this.handelImg(this.goods_detail.images[0])
				}
			};
			console.log(pramas);
			uni.navigateTo({
				url: '/pagesT/product/goodsPoster?goodsData=' + JSON.stringify(pramas)
			});
			// this.goPage('/pages/index/goodsPoster?goodsData=' + JSON.stringify(pramas));
		},
		shareGoods() {
			this.sharePop = true;
		},
		//App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）
		shareFriend() {
			const path = '/pagesT/product/product?id=' + this.goods_id;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: this.imgList[0],
				title: this.goods_detail.title,
				miniProgram: {
					id: 'gh_16db94f79967', //微信小程序原始ID
					path: path,
					type: 0,
					webUrl: ''
				},
				success: ret => {
					console.log(JSON.stringify(ret));
				}
			});
		},
		// 分享弹窗关闭
		cancelPop() {
			this.sharePop = false;
		},
		// 请求商品品详情
		async getIntegralGoodsInfo() {
			this.$u.api.getIntegralGoodsInfo(this.goods_id).then(({ data }) => {
				uni.setNavigationBarTitle({
					title: data.name
				});
				this.imgList = data.images;
				this.goods_detail = data;
			});
		},
		//分享
		share() {
			this.$refs.share.toggleMask();
		},
		openaddcartPop(type) {
			this.goPage('/pagesT/pointsMall/ExchangeOrder?id='+this.goods_id)
		},
		previewImage(index) {
			let urls = JSON.parse(JSON.stringify(this.imgList));
			if (index > 0) {
				urls.unshift(urls[index]);
			}
			uni.previewImage({
				urls: urls,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: data => {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: err => {
						console.log(err.errMsg);
					}
				}
			});
		},
		//轮播图指示器
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
		},
		back() {
			if (this.pageName) {
				this.goPage('/pages/index/index', 'switchTab');
			} else {
				uni.navigateBack();
			}
		}
	}
};
</script>

<style lang="scss">
@keyframes showPopup {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes hidePopup {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes showLayer {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

@keyframes hideLayer {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

.icon {
	font-size: 26upx;
}

.back-icon {
	font-size: 36rpx;
	padding-left: 24rpx;
	color: #2a2a2a;
}

.swiper-box {
	background-color: #ffffff;
	position: relative;
	width: 100%;
	height: 100vw;

	swiper {
		width: 100%;
		height: 100vw;

		swiper-item {
			image {
				width: 100%;
				height: 100vw;
			}
		}
	}

	.indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 4upx;
		font-size: 22upx;
		position: absolute;
		bottom: 50upx;
		right: 30upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
}

.goods-info {
	overflow: hidden;
	transform: translateY(-36rpx);
	.price-view {
		padding: 0 30rpx;
		height: 152rpx;
		background-color: #fa6400;
		color: #ffffff;
		border-radius: 48rpx 48rpx 0 0;
		position: relative;
		.float_left {
			line-height: 120rpx;
			font-size: 48rpx;
			font-family: DIN-Medium;
		}
		.right-view {
			position: absolute;
			right: 30rpx;
			top: calc(50% - 16rpx);
			transform: translateY(-50%);
			font-size: 24rpx;
			.goods-num {
				text-align: right;
				.num-li {
					display: inline-block;
					font-weight: 400;
					margin-left: 20rpx;
				}
			}
		}
	}

	.goods-info-main {
		transform: translateY(-32rpx);
		padding: 30rpx;
		background: #ffffff;
		border-radius: 32rpx 32rpx 8rpx 8rpx;

		.title {
			font-size: 32rpx;
			letter-spacing: 1px;
			color: #2a2a2a;
			font-weight: 500;
		}
		.desc {
			padding-top: 10rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
}

.info-box {
	padding: 16rpx 30upx;
	background-color: #fff;
	border-radius: 12upx;
	transform: translateY(-48rpx);
	margin-top: 16rpx;
	.row {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		line-height: 80rpx;
		.text {
			font-size: 28upx;
			color: #9a9a9a;
			margin-right: 40upx;
		}
		.content {
			.no-sel {
				color: #9a9a9a;
			}
		}
		.arrow {
			position: absolute;
			right: 0;

			.icon {
				color: #afafaf;
			}
		}
	}
}
.description {
	padding-bottom: 100upx;
	.title {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #999;
	}
}

.footer {
	position: fixed;
	bottom: 0upx;
	width: 100%;
	padding: 12upx 30rpx;
	background-color: #ffffff;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0px -3rpx 32rpx 0px rgba(156, 170, 175, 0.16);
	.icons {
		height: 74upx;
		.box {
			height: 64upx;
			margin-left: 32rpx;
			display: inline-block;
			text-align: center;

			.icon {
				font-size: 36upx;
				color: #000000;
			}
			.text {
				display: flex;
				justify-content: center;
				width: 100%;
				font-size: 20upx;
				color: #3c3c3c;
				padding-top: 5rpx;
			}
			&:first-child {
				margin-left: 10rpx;
				padding-right: 24rpx;
				position: relative;
				&::after {
					position: absolute;
					top: 10rpx;
					right: 0;
					content: ' ';
					display: inline-block;
					width: 1px;
					height: 48rpx;
					background: #d8d8d8;
					border-radius: 2rpx;
				}
			}
		}
	}

	.btn {
		overflow: hidden;
		.buy {
			border-radius: 8upx;
			height: 74upx;
			width: 480upx;
			color: #ffffff;
			display: inline-block;
			line-height: 74upx;
			text-align: center;
			font-size: 28upx;
		}
	}
}

.share {
	display: none;

	&.show {
		display: block;

		.mask {
			animation: showPopup 0.15s linear both;
		}

		.layer {
			animation: showLayer 0.15s linear both;
		}
	}

	&.hide {
		display: block;

		.mask {
			animation: hidePopup 0.15s linear both;
		}

		.layer {
			animation: hideLayer 0.15s linear both;
		}
	}

	&.none {
		display: none;
	}

	.mask {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 11;
	}

	.layer {
		width: 92%;
		position: fixed;
		z-index: 12;
		padding: 0 4%;
		top: 100%;
		background-color: rgba(255, 255, 255, 0.9);

		.list {
			width: 100%;
			display: flex;
			padding: 10upx 0 30upx 0;

			.box {
				width: 25%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				image {
					width: 13.8vw;
					height: 13.8vw;
				}

				.title {
					margin-top: 10upx;
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 26upx;
				}
			}
		}

		.btn {
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			border-top: solid 1upx #666666;
		}

		.h1 {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34upx;
		}
	}
}

.share-tit {
	line-height: 80upx;
	text-align: center;
	font-size: 32upx;
}

.share-cancel {
	line-height: 80upx;
	text-align: center;
	font-size: 28upx;
	border-top: 1px solid #f4f4f4;
}

.share-ul {
	display: flex;
	padding: 50upx 0;

	.share-li {
		flex: 3;

		.share-btn {
			background-color: #ffffff;
			font-size: 26upx;

			&::after {
				border: 0 none;
			}

			.icon-view {
				display: inline-block;
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
				background-color: #18b566;
				line-height: 100upx;
				text-align: center;
				margin-bottom: 10upx;
			}
		}
	}
}
</style>