store/pages/goods-detail/goods-detail.vue

<template>
	<view class="rg">
		<view class="rg_swiper">
			<swiper @change="swiperChange">
				<swiper-item v-for="(item, index) in banner" :key="index">
					<image :src="item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<view class="rg_swiper_page">
				<text>{{ allImg ? current + 1 : current }}/{{ allImg }}</text>
			</view>
		</view>
		<view class="rg_info">
			<view class="goods_name">{{ goods.name }}</view>
			<view class="goods_price flexS">
				<view class="big_price">
					<text>¥</text>
					<text>{{ goods.price }}</text>
				</view>
				<view class="save_box">VIP可省{{ Number(goods.price) - Number(goods.vip_price) || 0 }}</view>
			</view>
			<view class="safe_box">
				<view>
					<text class="iconfont iconxuanzhong"></text>
					<text>支付安全有保障</text>
				</view>
				<view style="margin-top:20rpx;">
					<text class="iconfont iconxuanzhong"></text>
					<text>90天-366天不满意全额退款</text>
				</view>
				<view style="margin-top:20rpx;">
					<text class="iconfont iconxuanzhong"></text>
					<text>一次性购买满2套,在本店终身享受VIP价格</text>
				</view>
			</view>
		</view>
		<view class="rich">
			<rich-text :nodes="goods.content | formatRichText"></rich-text>
		</view>
		<view class="rg_bug" @click="shareNow()">立即分享</view>
		<view class="share_show" v-if="shareShow">
			<view class="share_con flexCC">
				<text class="iconfont iconguanbi" @click="shareShow = false"></text>
				<view class="canvas">
					<view class="canvas">
						<canvas canvas-id="canvas" style="width: 100%;height:100%;" id="canvas"><img :src="poster"
								class="poster_img" mode="widthFix" @longpress="saveImg" /></canvas>
					</view>
				</view>
				<view class="save_img">长按图片发送给朋友</view>
			</view>
		</view>
		<view class="qrimg">
			<tki-qrcode ref="qrcode" :val="code.val" :size="code.size" :icon="code.icon" :iconSize="code.iconsize"
				:onval="code.onval" :loadMake="code.loadMake" :showLoading="code.showLoading"
				:loadingText="code.loadingText" @result="drawPoster" />
		</view>
	</view>
</template>
<script>
	import {
		goodsDetail
	} from '../../apis/shop.js';
	import formatRichText from '@/filters/index.js';
	import QR from '@/common/util/wxqrcode.js'; // 二维码生成器
	import {
		handleClipboard
	} from '../../common/util/utils.js';
	export default {
		data() {
			return {
				goods: '', //商品详情
				banner: [],
				allImg: 0, //banner图总张数
				current: 0, //当前banner图
				shareShow: false, //显示海报
				canvasWidth: 0, //canvas 宽
				canvasHeight: 0, //canvas 高
				store: '', //店铺的信息
				poster: '', //海报图片
				imgPath: '',
				model: '', //手机机型
				isVip: '', // 0不是vip  1 是vip
				code: {
					val: '',
					size: 200,
					icon: '',
					iconsize: 25,
					onval: true,
					loadMake: '',
					showLoading: true,
					loadingText: '二维码生成中...'
				},
				shareGoods: {}, //分享海报上的图片
				qr_code: '', //微信二维码
				goods_img: '' //分享的商品图片
			};
		},
		onLoad(ops) {
			if (ops.goods_id) {
				this.getDetail(ops.goods_id);
				this.store = uni.getStorageSync('store');
			}
			wx.getSystemInfo({
				success: res => {
					this.model = res.model;
					this.canvasWidth = res.windowWidth / 375;
					this.canvasHeight = res.windowHeight;
				}
			});
		},
		onShow() {
			this.qr_code = uni.getStorageSync('qrCode');
		},
		methods: {
			//保存海报到相册
			saveImg() {
				uni.getSetting({
					success: res => {
						// 如果没有则获取授权
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: res => {
									uni.saveImageToPhotosAlbum({
										filePath: this.poster,
										success: res => {
											uni.showModal({
												content: '图片已保存到相册，赶快分享给好友吧~',
												showCancel: false
											})
										},
										fail: err => {
											uni.showToast({
												title: '保存失败',
												icon: 'none'
											})
										}
									})
								},
								fail: err => {
									uni.showModal({
										title: '提示',
										content: '需要获取相册访问权限，请到小程序设置页面打开授权',
										cancelText: '取消',
										cancelColor: '#999',
										confirmText: '确定',
										confirmColor: '#f94218',
										success: res => {
											if (res.confirm) {
												uni.openSetting({
													success: res => {
														console.log(res
															.authSetting
														)
													},
													fail: err => {
														uni.showModal({
															content: '调起设置失败，请手动设置相册权限',
															showCancel: false
														})
													}
												})
											} else if (res.cancel) {
												uni.showModal({
													content: '您取消了设置相册权限，不能保存图片到相册',
													showCancel: false
												})
											}
										}
									})
								}
							})
						} else {
							uni.showLoading({
								title: '保存中...'
							})
							// 有则直接保存不知道哦
							wx.saveImageToPhotosAlbum({
								filePath: this.poster,
								success: res => {
									uni.showModal({
										content: '图片已保存到相册，赶快分享给好友吧~',
										showCancel: false
									})
									uni.hideLoading()
								},
								fail: err => {
									uni.hideLoading()
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									})
								}
							})

						}
					}
				})
			},
			/*复制单号*/
			copy(data) {
				uni.setClipboardData({
					data,
					success: res => {
						uni.showToast({
							title: '复制成功'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					}
				})
			},
			/*立即分享*/
			shareNow() {
				if (!this.qr_code) {
					uni.showModal({
						content: '为了方便客户加你微信咨询购买，请先上传微信二维码',
						showCancel: false,
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../add-qrcode/add-qrcode'
								});
							}
						}
					});
					return false;
				}


				let goods = this.goods;
				uni.getImageInfo({
					src: goods.imgs,
					success: res => {
						this.goods_img = res.path
					}
				})
				this.shareGoods = {
					// img: goods.imgs,
					price: parseInt(goods.price),
					name: goods.main_attr
				};
				this.code.val =
					`${this.$config.share_url}#pages/index/index?store_id=${this.store.id}&goods_id=${this.goods.id}`;
				this.shareShow = true;
				this.$refs.qrcode._makeCode();

			},
			drawPoster(codeImg) {
				let _this = this;
				uni.showLoading({
					title: '图片生成中...'
				});
				let goods = _this.shareGoods;
				uni.getImageInfo({
					src: 'https://api.wd.cliu.cc/good_poster.png',
					success: res => {
						uni.showLoading({
							title: '图片加载中...'
						});
						let ctx = uni.createCanvasContext('canvas');
						let store = _this.store;
						store.name = store.name.length > 7 ? store.name.slice(0, 7) + '...的店铺' : store.name +
							'的店铺';
						let rpx = _this.canvasWidth;
						//背景图
						ctx.drawImage(res.path, 0, 0, 270 * rpx, 480 * rpx);
						//店铺名称
						ctx.font = 'normal bold 14px pingfang';
						ctx.textAlign = 'center';
						ctx.fillText(store.name, uni.upx2px(270), uni.upx2px(210));

						//商品图
						ctx.drawImage(this.goods_img, uni.upx2px(110), uni.upx2px(270), uni.upx2px(130), uni
							.upx2px(
								103));
						// ctx.drawImage(res.tempFilePath, uni.upx2px(110), uni.upx2px(270), uni.upx2px(130), uni.upx2px(103));
						//商品款式
						ctx.font = 'normal bold 14px pingfang';
						ctx.fillText(goods.name, goods.name == '纯棉老人版' ? uni.upx2px(320) : uni.upx2px(290), uni
							.upx2px(300));
						//商品数量
						ctx.font = 'normal normal 12px pingfang';
						ctx.setFillStyle('#999999');
						//商品价格
						ctx.font = 'normal bold 12px pingfang';
						ctx.setFillStyle('#FB231F');
						ctx.fillText(`¥`, uni.upx2px(256), uni.upx2px(365));
						ctx.font = 'normal bold 16px pingfang';
						ctx.setFillStyle('#FB231F');
						ctx.fillText(goods.price, uni.upx2px(300), uni.upx2px(365));
						//二维码
						ctx.drawImage(codeImg, uni.upx2px(110), uni.upx2px(420), uni.upx2px(320), uni.upx2px(
							320));
						//扫一扫下单，安全有保障
						ctx.font = 'noraml bold 14px pingfang';
						ctx.textAlign = 'center';
						ctx.setFillStyle('#060001');
						ctx.fillText('长按二维码-识别-进店铺', uni.upx2px(270), uni.upx2px(790));
						setTimeout(res => {
							ctx.draw(false, () => {
								uni.canvasToTempFilePath({
									width: 270 * rpx,
									height: 480 * rpx,
									canvasId: 'canvas',
									success: res => {
										uni.hideLoading();
										if (this.model == 'iPhone') {
											this.poster = this.dataURLtoFile(res
												.tempFilePath).name;
										} else {
											let url = res.tempFilePath.replace(
												/\. +/g, '');
											this.poster = url.replace(/[\r\n]/g,
												'');
										}
									},
									fail: () => {
										uni.hideLoading()
									}
								});
							});

						}, 500);
					}
				});
			},
			/*获取商品详情*/
			getDetail(goods_id) {
				let that = this;
				uni.showLoading({
					title: '加载中...'
				});
				goodsDetail({
						goods_id
					})
					.then(res => {
						if (res.code == 200) {
							this.goods = res.data;
							if (res.data.banner) {
								that.banner = JSON.parse(res.data.banner);
								that.allImg = that.banner.length;
							}
						} else {
							uni.showModal({
								content: res.data,
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			swiperChange(e) {
				this.current = e.target.current;
			},
			dataURLtoFile(dataurl, filename = 'file') {
				let arr = dataurl.split(',');
				let mime = arr[0].match(/:(.*?);/)[1];
				let suffix = mime.split('/')[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], `${filename}.${suffix}`, {
					type: mime
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.rg_info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-bottom: 2rpx solid #e9e9e9;

		.goods_name {
			font-size: 32rpx;
			font-weight: bold;
		}

		.safe {
			width: 690rpx;
			margin: 20rpx auto;
			font-size: 30rpx;
			background: linear-gradient(274deg, #edfdf3 0%, #e1f6e9 100%);
			border-radius: 24rpx;
			padding: 20rpx 30rpx;

			text {
				font-weight: bold;
			}

			.iconfont {
				color: #349e08;
				margin-right: 20rpx;
				font-weight: normal;
				vertical-align: 2rpx;
			}
		}

		.vip_con {
			width: 690rpx;
			margin: 0 auto;
			padding: 0 30rpx;
			height: 140rpx;
			background-size: 100% 100%;
			box-sizing: border-box;
			background: #fff4f3;
			border-radius: 16rpx;

			view {
				margin-left: 20rpx;

				text {
					font-size: 32rpx;
					color: $base-color;
					font-weight: bold;
				}

				text:last-child {
					display: inline-block;
					margin-top: 10rpx;
				}
			}

			.dart_icon {
				width: 56rpx;
				height: 56rpx;
				flex-shrink: 0;
			}
		}
	}

	.goods_price {
		margin-top: 20rpx;

		.old_price {
			color: #999999;
			text-decoration: line-through;
		}

		.price {
			color: $base-color;
			font-weight: 600;
			font-size: 36rpx;
		}

		.vip_img {
			width: 88rpx;
			height: 36rpx;
			vertical-align: -6rpx;
			margin-right: 10rpx;
		}

		.vip {
			font-size: 28rpx;
			font-weight: bold;
		}

		.vip_active {
			font-size: 36rpx;
			color: $base-color;
			font-weight: bold;
		}
	}

	.rich {
		width: 690rpx;
		margin: 0 auto;
		padding-bottom: 280rpx;
	}

	.richText {
		width: 690rpx;
		margin: 0 auto;
		padding: 20rpx;
		background-color: #fff;
		font-size: 28rpx;
	}

	uni-rich-text img {
		max-width: 100% !important;
	}

	.rg {
		padding-bottom: 50rpx;

		.rg_bug {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			font-size: 32rpx;
			color: #ffffff;
			background: $base-line-bg;
			text-align: center;
			line-height: 100rpx;
		}

		.rg_imgs {
			width: 100%;
			margin-bottom: 100rpx;
			text-align: center;
		}

		.rg_size {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			border-bottom: 2rpx solid #e9e9e9;

			.T {
				color: #999999;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			.B {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					color: #333333;
					font-size: 28rpx;
				}

				.B_counter {
					width: 180rpx;
					height: 64rpx;
				}
			}
		}

		.rg_info {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			border-bottom: 2rpx solid #e9e9e9;

			.B {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					&:nth-of-type(1) {
						color: #999999;
						font-size: 28rpx;
					}

					&:nth-last-of-type(1) {
						color: #f76454;
						font-size: 36rpx;
					}
				}
			}

			.T {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 20rpx;

				text {
					&:nth-of-type(1) {
						color: #333333;
						font-size: 36rpx;
						line-height: 48rpx;
					}

					&:nth-of-type(2) {
						color: #f76454;
						font-size: 28rpx;
						font-weight: 600;
						height: 50rpx;
						line-height: 50rpx;
						padding: 0 16rpx;
						width: max-content;
						border-radius: 46rpx;
						border: 2rpx solid $base-color;
						margin-right: 20rpx;
					}
				}
			}
		}

		.rg_swiper {
			width: 100%;
			height: 600rpx;
			position: relative;

			image,
			swiper {
				width: 100%;
				height: 600rpx;
			}

			.rg_swiper_page {
				height: 48rpx;
				border-radius: 48rpx;
				background-color: rgba(0, 0, 0, 0.6);
				font-size: 28rpx;
				line-height: 48rpx;

				text {
					color: #ffffff;

					&:nth-of-type(1) {
						font-size: 28rpx;
					}
				}

				padding: 0 36rpx;
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
			}
		}

		.share_show {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.7);
			z-index: 9999;

			.share_con {
				width: 80%;
				margin: 0 auto;
				height: 100%;
				z-index: 999999;

				.canvas {
					width: 540rpx;
					height: 960rpx;
					position: relative;

					#canvas {
						width: 540rpx;
						height: 960rpx;
						position: absolute;
						top: 0;
						left: 0;
					}

					.poster_img {
						-webkit-touch-callout: default;
						width: 100%;
						height: 100%;
						display: block;
					}

					img[src=''],
					img:not([src]) {
						opacity: 0;
					}
				}

				.save_img {
					color: #fff;
					width: 100%;
					text-align: center;
					font-size: 40rpx;
					margin-top: 20rpx;
				}

				.iconfont {
					position: absolute;
					top: 4vh;
					right: 25rpx;
					color: #dedede;
					font-size: 60rpx;
					z-index: 999;
				}
			}

			.sub_btn {
				margin-top: 76rpx;
			}
		}
	}

	.qrimg {
		opacity: 0;
	}
</style>