store/pages/goods-share/goods-share.vue

<template>
	<view class="goods">
		<view class="hint flexS">
			<image src="../../static/imgs/shop/goods_hint.png" class="hint_icon"></image>
			<text>点击图片可查看商品详情</text>
		</view>
		<!-- 		<view class="stock_box flexB" @click="skipStock">
			<view class="flexS">
				<view class="stock_icon_box flexC">
					<image src="../../static/imgs/shop/stock_icon.png" class="stock_icon"></image>
				</view>
				<view class="stock_con">
					<view>库存管理</view>
					<text>方便及时查库存、改库存</text>
				</view>
			</view>
			<image src="../../static/imgs/shop/arrow.png" class="arrow"></image>
		</view> -->
		<view class="goods_box" v-for="(item, idx) in goods" :key="item.id">
			<view class="goods_info flexS">
				<image :src="item.img" class="goods_img" @click="skipDetail(item.id)"></image>
				<view class="goods_con" @click.stop="checkGoods(item, idx)">
					<view class="goods_name">{{ item.name }}</view>
					<view class="one_year" style="width: 120rpx;">3条装</view>
					<view class="goods_price flexB">
						<view class="flexS">
							<view class="big_price">
								<text>¥</text>
								<text>{{ item.price }}</text>
							</view>
							<view class="save_box">VIP可省{{ Number(item.price) - Number(item.vip_price) || 0 }}</view>
						</view>
						<view class="check_icon">
							<text class="iconfont iconxuanzhong" v-if="item.checked"></text>
							<text class="iconfont iconweixuanzhong" v-else></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="share_btn flexCC" @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" @click="preview" /></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 tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	import {
		getSku
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				goods: '', //商品信息
				store: '', //店铺信息
				shareShow: false,
				poster: '',
				code: {
					val: '',
					size: 200,
					icon: '',
					iconsize: 25,
					onval: true,
					loadMake: '',
					showLoading: true,
					loadingText: '二维码生成中...'
				},
				codeImg: '',
				shareGoods: {}, //分享海报上的图片
				canvasWidth: '',
				canvasHeight: '',
				model: '',
				qr_code: '', //微信二维码
				store_img: '' //店铺头像
			};
		},
		onLoad() {
			this.getGoods();
			uni.getSystemInfo({
				success: res => {
					this.model = res.model;
					this.canvasWidth = res.windowWidth / 375;
					this.canvasHeight = res.windowHeight;
				}
			});

		},
		onShow() {
			this.store = uni.getStorageSync('store');
			this.qr_code = uni.getStorageSync('qrCode');
			if (this.store) {
				uni.getImageInfo({
					src: this.store.img,
					success: res => {
						this.store_img = res.path
					}
				})
			}

		},
		methods: {
			preview() {
				uni.previewImage({
					current: this.poster,
					urls: [this.poster]
				});
			},
			//跳转到库存管理
			skipStock() {
				uni.navigateTo({
					url: '../stock-manage/stock-manage'
				})
			},
			//跳转到商品详情
			skipDetail(id) {
				uni.navigateTo({
					url: '../goods-detail/goods-detail?goods_id=' + id
				});
			},
			//小计数量
			subNum(data) {
				let subNum = 0;
				data.sku.map(i => {
					subNum += i.num;
				});
				return subNum;
			},
			//立即分享
			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 arr = [];
				let ids = [];
				let list = this.goods;
				list.map(i => {
					if (i.checked) {
						arr.push(i);
						ids.push(i.id);
					}
				});
				if (ids.length == 0) {
					uni.showModal({
						content: '请先选择商品',
						showCancel: false
					});
					return false;
				}
				let goods_id = ids.join(',');
				this.code.val =
					`${this.$config.share_url}#pages/index/index?store_id=${this.store.id}&goods_id=${goods_id}`;
				this.$refs.qrcode._makeCode();
				this.shareShow = true;

			},
			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
				});
			},
			blobToDataURI(blob, callback) {
				var reader = new FileReader();
				reader.readAsDataURL(blob);
				reader.onload = function(e) {
					callback(e.target.result);
				};
			},
			/*生成canvas图片*/
			drawPoster(codeImg) {
				let that = this;
				let store = this.store;
				uni.getImageInfo({
					src: 'https://api.wd.cliu.cc/shop_poster.jpg',
					success: res => {
						uni.showLoading({
							title: '图片加载中...'
						});
						let shopName = store.name.length > 9 ? store.name.slice(0, 9) + '...的店铺' : store.name +
							'的店铺';
						let ctx = uni.createCanvasContext('canvas');
						let rpx = that.canvasWidth;
						ctx.drawImage(res.path, 0, 0, 270 * rpx, 480 * rpx);
						ctx.font = 'normal bold 16px pingfang';
						ctx.textAlign = 'center';
						ctx.fillText(shopName, uni.upx2px(270), uni.upx2px(390));
						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));

						ctx.beginPath();
						ctx.arc(uni.upx2px(100) / 2 + uni.upx2px(222), uni.upx2px(100) / 2 + uni.upx2px(240),
							uni.upx2px(100) / 2,
							0, Math.PI * 2, false); // 画一个圆形裁剪区域
						ctx.clip(); // 裁剪
						ctx.drawImage(this.store_img, uni.upx2px(222), uni.upx2px(240), uni.upx2px(100), uni
							.upx2px(
								100));
						ctx.restore(); //恢复之前保存的绘图上下文
						setTimeout(res => {
							ctx.draw(false, () => {
								uni.canvasToTempFilePath({
									width: 270 * rpx,
									height: 480 * rpx,
									canvasId: 'canvas',
									success: res => {
										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,
												'');
										}
									}
								});
							});

							uni.hideLoading();
						}, 2000);
					}
				})

			},
			//获取商品
			getGoods() {
				uni.showLoading({
					title: '加载中....'
				});
				getSku({
						type: 2
					})
					.then(res => {
						if (res.code == 200) {
							let list = res.data;
							list.map(i => {
								this.$set(i, 'checked', false);
							});
							this.goods = list;
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			checkGoods(item, idx) {
				this.goods[idx].checked = !this.goods[idx].checked;
			}
		}
	};
</script>

<style>
	page {
		width: 100vw;
		overflow-x: hidden;
		min-height: 100%;
		background: #f9f9fb;
	}
</style>
<style lang="scss" scoped>
	.goods {
		display: flex;
		flex-direction: column;
		position: relative;

		.hint {
			width: 100%;
			height: 88rpx;
			background: #fcf7c0;
			padding-left: 30rpx;

			.hint_icon {
				width: 56rpx;
				height: 56rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 32rpx;
				color: #ff6400;
			}
		}

		.stock_box {
			width: 690rpx;
			height: 160rpx;
			background: linear-gradient(267deg, #F1292C 0%, #D2118B 100%);
			border-radius: 24rpx;
			margin: 20rpx auto 0;
			padding: 0 30rpx;
			box-sizing: border-box;

			.stock_icon_box {
				width: 80rpx;
				height: 80rpx;
				background: linear-gradient(180deg, #FFA600 0%, #FCBC05 100%);
				border-radius: 8rpx;
				margin-right: 20rpx;

				.stock_icon {
					width: 56rpx;
					height: 54rpx;
				}
			}

			.stock_con {

				text,
				view {
					color: #fff;
				}

				view {
					font-size: 32rpx;
				}

				text {
					font-size: 28rpx;
				}
			}

			.arrow {
				width: 36rpx;
				height: 40rpx;
			}
		}

		.goods_box {
			margin-top: 30rpx;

			.goods_info {
				padding: 10rpx;
				width: 100%;
				min-height: 236rpx;
				background: #fff;

				.check_icon {
					.iconfont {
						font-size: 55rpx;
						margin-right: 30rpx;
					}

					.iconweixuanzhong {
						color: #999;
					}
				}

				.goods_img {
					width: 220rpx;
					height: 176rpx;
					border-radius: 24rpx;
					flex-shrink: 0;
					margin: 0 20rpx;
				}

				.goods_con {
					flex: 1;

					.goods_name {
						font-size: 30rpx;
						font-weight: 600;
					}

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

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

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

		.share_btn {
			width: 100%;
			height: 100rpx;
			background: $base-line-bg;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			color: #fff;
			font-size: 32rpx;
		}

		.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>