优化分享海报绘制

components/views/cm-share-popup/cm-share-popup.vue

@@ -1,412 +1,424 @@
 <template>
-	<view class="share-popup">
-		<!-- 弹窗 -->
-		<uni-popup ref="sharePopup" type="bottom" @change="popupChange">
-			<view class="popup-content">
-				<view class="title" v-if="title" v-text="title"></view>
-				<view class="content">
-					<view class="row">
-						<button class="share item" open-type="share" @click="close">
-							<view class="icon-image"><image :src="staticUrl + 'icon-share-wechat.png'"></image></view>
-							<text class="label">微信</text>
-						</button>
-						<view class="poster item" @click="createPoster" v-if="!posterUrl">
-							<view class="icon-image"><image :src="staticUrl + 'icon-poster.png'"></image></view>
-							<text class="label">生成海报</text>
-						</view>
-						<view class="poster item" @click="savePoster" v-else>
-							<view class="icon-image"><image :src="staticUrl + 'icon-download.png'"></image></view>
-							<text class="label">保存相册</text>
-						</view>
-					</view>
-					<tui-divider :height="64"></tui-divider>
-					<view class="cancel" @click="close">取消</view>
-				</view>
-			</view>
-		</uni-popup>
-
-		<canvas canvas-id="poster" id="poster" class="canvas"></canvas>
-
-		<!-- 海报 -->
-		<view class="poster-container" v-show="visiable">
-			<!-- 画布 -->
-			<image :src="posterUrl" class="poster-image"></image>
-		</view>
-	</view>
+    <view class="share-popup">
+        <!-- 弹窗 -->
+        <uni-popup ref="sharePopup" type="bottom" @change="popupChange">
+            <view class="popup-content">
+                <view class="title" v-if="title" v-text="title"></view>
+                <view class="content">
+                    <view class="row">
+                        <button class="share item" open-type="share" @click="close">
+                            <view class="icon-image"><image :src="staticUrl + 'icon-share-wechat.png'"></image></view>
+                            <text class="label">微信</text>
+                        </button>
+                        <view class="poster item" @click="createPoster" v-if="!posterUrl">
+                            <view class="icon-image"><image :src="staticUrl + 'icon-poster.png'"></image></view>
+                            <text class="label">生成海报</text>
+                        </view>
+                        <view class="poster item" @click="savePoster" v-else>
+                            <view class="icon-image"><image :src="staticUrl + 'icon-download.png'"></image></view>
+                            <text class="label">保存相册</text>
+                        </view>
+                    </view>
+                    <tui-divider :height="64"></tui-divider>
+                    <view class="cancel" @click="close">取消</view>
+                </view>
+            </view>
+        </uni-popup>
+
+        <canvas canvas-id="poster" id="poster" class="canvas"></canvas>
+
+        <!-- 海报 -->
+        <view class="poster-container" v-show="visiable">
+            <!-- 画布 -->
+            <image :src="posterUrl" class="poster-image"></image>
+        </view>
+    </view>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { getUserProfile } from '@/common/auth.js'
 export default {
-	props: {
-		title: {
-			type: String,
-			default: ''
-		},
-		data: {
-			type: Object,
-			default: () => {}
-		},
-		type: {
-			type: String,
-			default: 'normal'
-		}
-	},
-	data() {
-		return {
-			visiable: false,
-			imageList: [],
-			posterUrl: '',
-			// 海报数据信息
-			posterData: {
-				avatar: '',
-				username: '',
-				porductName: '',
-				productPrice: '',
-				productOriginPrice: '',
-				productImage: '',
-				qrCodeImage: ''
-			}
-		}
-	},
-	computed: {
-		...mapGetters(['systemInfo'])
-	},
-	methods: {
-		// 绘制海报  初始化
-		initDrawPoster() {
-			this.downLoadImageTask()
-		},
-
-		// 下载图片任务
-		async downLoadImageTask() {
-			const { avatar, productImage, qrCodeImage } = this.posterData
-			// 图片资源链接
-			const bgImageUrl = this.staticUrl + 'bg-share-01.png'
-			const avatarUrl = avatar || this.staticUrl + 'icon-join-us.png'
-			let coverUrl = productImage || this.staticUrl + 'icon-share.png'
-			let ewmUrl = qrCodeImage || this.staticUrl + 'icon-ewm-hehe.jpg'
-			if (this.type === 'normal') {
-				coverUrl = this.staticUrl + 'icon-share.png'
-				ewmUrl = this.staticUrl + 'icon-ewm-hehe.jpg'
-			}
-
-			// 下载图片任务
-			const taskList = [this.downloadImage(bgImageUrl), this.downloadImage(avatarUrl), this.downloadImage(coverUrl), this.downloadImage(ewmUrl)]
-
-			// 执行下载图片
-			try {
-				this.imageList = await Promise.all(taskList)
-				this.drawPoster()
-			} catch (e) {
-				console.log(e)
-			}
-		},
-
-		// 绘制海报
-		drawPoster() {
-			const windowWidth = this.systemInfo.windowWidth
-			// const scale = this.systemInfo.windowWidth / 750
-			const scale = 1
-			var ctx = uni.createCanvasContext('poster', this)
-			// 绘制背景
-			ctx.drawImage(this.imageList[0].tempFilePath, 0, 0, 540 * scale, 878 * scale)
-			ctx.save()
-
-			// 绘制用户信息
-			this.drawPosterHead(ctx, scale)
-
-			// 绘制白色矩形区域
-			ctx.beginPath()
-			ctx.rect(20 * scale, 154 * scale, 500 * scale, 704 * scale)
-			ctx.setFillStyle('#FFFFFF')
-			ctx.fill()
-			ctx.clip()
-
-			const type = this.type
-			// 绘制底部内容
-			if (!type || type === 'normal') {
-				this.drawPosterFoot(ctx, scale)
-			} else {
-				this.drawGoodsInfo(ctx, scale)
-			}
-
-			ctx.restore()
-			ctx.draw(true, () => {
-				uni.canvasToTempFilePath(
-					{
-						canvasId: 'poster',
-						success: res => {
-							this.posterUrl = res.tempFilePath
-							this.visiable = true
-						},
-						complete: () => {
-							uni.hideLoading()
-						}
-					},
-					this
-				)
-			})
-		},
-
-		// 绘制海报头部
-		drawPosterHead(ctx, scale) {
-			const { username } = this.posterData
-			// 绘制头像
-			ctx.beginPath()
-			ctx.arc(40 * scale + (90 * scale) / 2, 32 * scale + (90 * scale) / 2, (90 * scale) / 2, 0, 2 * Math.PI)
-			ctx.setFillStyle('#fff')
-			ctx.fill()
-			ctx.clip()
-			ctx.drawImage(this.imageList[1].tempFilePath, 40 * scale, 32 * scale, 90 * scale, 90 * scale)
-			ctx.restore()
-			ctx.save()
-			// 绘制用户名和推荐语
-			ctx.setFillStyle('#FFFFFF')
-			ctx.font = 'bold 10px sans-serif'
-			ctx.setFontSize(30 * scale)
-			ctx.fillText(username, 146 * scale, (30 + 34) * scale, 350 * scale)
-			ctx.font = 'normal 10px sans-serif'
-			ctx.setFontSize(24 * scale)
-			let txt = '强烈为你推荐该商城'
-			if (this.type === 'product') {
-				txt = '强烈为你推荐该商品'
-			}
-			ctx.fillText(txt, 146 * scale, (87 + 24) * scale, 350 * scale)
-		},
-
-		// 绘制海报底部
-		drawPosterFoot(ctx, scale) {
-			// 绘制中心图片
-			ctx.drawImage(this.imageList[2].tempFilePath, 40 * scale, 174 * scale, 460 * scale, 460 * scale)
-			// 绘制底部
-			ctx.setFontSize(24 * scale)
-			ctx.setFillStyle('#333')
-			ctx.fillText('护肤上颜选，正品', 60 * scale, (710 + 24) * scale)
-			ctx.fillText('有好货', 60 * scale, (710 + 24 + 40) * scale)
-			// 绘制二维码
-			ctx.drawImage(this.imageList[3].tempFilePath, 364 * scale, 690 * scale, 116 * scale, 116 * scale)
-		},
-
-		// 绘制商品信息
-		drawGoodsInfo(ctx, scale) {
-			// 参数处理
-			let { porductName, productPrice, productOriginPrice } = this.posterData
-			productPrice = productPrice.toFixed(2)
-			if (productOriginPrice) {
-				productOriginPrice = '￥' + productOriginPrice.toFixed(2)
-			}
-			const porductNames = this.getProductNames(porductName)
-
-			// 绘制中心图片
-			ctx.drawImage(this.imageList[2].tempFilePath, 40 * scale, 174 * scale, 460 * scale, 460 * scale)
-			// 绘制价格符号
-			ctx.setFillStyle('#FF457B')
-			ctx.setFontSize(24 * scale)
-			ctx.fillText('￥', 40 * scale, (680 + 24) * scale)
-			// 绘制购买价格
-			ctx.setFontSize(40 * scale)
-			ctx.fillText(productPrice, 62 * scale, (665 + 40) * scale)
-			// 绘制原价
-			if (productOriginPrice) {
-				ctx.setFillStyle('#999')
-				ctx.setFontSize(24 * scale)
-				ctx.fillText(productOriginPrice, 200 * scale, (680 + 24) * scale)
-				let m = ctx.measureText(productOriginPrice)
-				ctx.fillRect(200 * scale, (680 + 16) * scale, parseInt(m.width), 1)
-			}
-			// 绘制商品标题
-			ctx.setFillStyle('#333')
-			ctx.setFontSize(26 * scale)
-
-			porductNames.forEach((text, index) => {
-				text = index === 1 ? text.slice(0, text.length - 1) + '...' : text
-				ctx.fillText(text, 40 * scale, (732 + 26 + 40 * index) * scale)
-			})
-			// 绘制商品二维码
-			ctx.drawImage(this.imageList[3].tempFilePath, 384 * scale, 702 * scale, 116 * scale, 116 * scale)
-		},
-
-		// 处理产品名称
-		getProductNames(porductName) {
-			const list = []
-			if (porductName.length > 12) {
-				for (let i = 0; i < porductName.length; i += 12) {
-					if (list.length < 2) {
-						list.push(porductName.slice(i, i + 12))
-					}
-				}
-			}
-			return list
-		},
-
-		// 下载图片
-		downloadImage(url) {
-			return new Promise((resolve, reject) => {
-				uni.downloadFile({
-					url: url,
-					success(data) {
-						resolve(data)
-					},
-					fail(err) {
-						reject(err)
-					}
-				})
-			})
-		},
-
-		open() {
-			this.$refs.sharePopup.open()
-			this.$emit('open')
-		},
-		close() {
-			this.$refs.sharePopup.close()
-			this.$emit('close')
-			this.visiable = false
-		},
-		popupChange(e) {
-			if (!e.show) {
-				this.visiable = false
-				this.posterUrl = ''
-			}
-			this.$emit('change', e)
-		},
-		async createPoster() {
-			// 合并海报数据
-			this.posterData = { ...this.posterData, ...this.data }
-			try {
-				// 从本地缓存中获取微信用户基本信息
-				let userProfile = this.$getStorage('USER_PROFILE')
-				if (!userProfile) {
-					userProfile = await getUserProfile()
-					this.$setStorage('USER_PROFILE', userProfile)
-				}
-				this.posterData.avatar = userProfile.avatarUrl
-				this.posterData.username = userProfile.nickName
-				uni.showLoading({
-					mask: true,
-					title: '正在为您生成海报'
-				})
-				// 绘制海报
-				this.initDrawPoster()
-			} catch (e) {
-				//TODO handle the exception
-				uni.hideLoading()
-			}
-		},
-		savePoster() {
-			console.log('保存图片到本地')
-			uni.saveImageToPhotosAlbum({
-				filePath: this.posterUrl,
-				success: res => {
-					this.close()
-					this.$emit('saveSuccess', this.posterUrl)
-				}
-			})
-		}
-	}
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        data: {
+            type: Object,
+            default: () => {}
+        },
+        type: {
+            type: String,
+            default: 'normal',
+            validator: value => {
+                return ['product', 'normal'].indexOf(value) > -1
+            }
+        }
+    },
+    data() {
+        return {
+            visiable: false,
+            imageList: [],
+            posterUrl: '',
+            // 海报数据信息
+            posterData: {
+                avatar: '',
+                username: '',
+                porductName: '',
+                productPrice: '',
+                productOriginPrice: '',
+                productImage: '',
+                qrCodeImage: ''
+            }
+        }
+    },
+    computed: {
+        ...mapGetters(['systemInfo'])
+    },
+    methods: {
+        // 绘制海报  初始化
+        initDrawPoster() {
+            this.downLoadImageTask()
+        },
+
+        // 下载图片任务
+        async downLoadImageTask() {
+            const { avatar, productImage, qrCodeImage } = this.posterData
+            // 图片资源链接
+            const bgImageUrl = this.staticUrl + 'bg-share-01.png'
+            const avatarUrl = avatar || this.staticUrl + 'icon-join-us.png'
+            let coverUrl = productImage || this.staticUrl + 'icon-share.png'
+            let ewmUrl = qrCodeImage || this.staticUrl + 'icon-ewm-hehe.jpg'
+            if (this.type === 'normal') {
+                coverUrl = this.staticUrl + 'icon-share.png'
+                ewmUrl = this.staticUrl + 'icon-ewm-hehe.jpg'
+            }
+
+            // 下载图片任务
+            const taskList = [
+                this.downloadImage(bgImageUrl),
+                this.downloadImage(avatarUrl),
+                this.downloadImage(coverUrl),
+                this.downloadImage(ewmUrl)
+            ]
+
+            // 执行下载图片
+            try {
+                this.imageList = await Promise.all(taskList)
+                this.drawPoster()
+            } catch (e) {
+                console.log(e)
+            }
+        },
+
+        // 绘制海报
+        drawPoster() {
+            const windowWidth = this.systemInfo.windowWidth
+            // const scale = this.systemInfo.windowWidth / 750
+            const scale = 1
+            var ctx = uni.createCanvasContext('poster', this)
+            // 绘制背景
+            ctx.drawImage(this.imageList[0].tempFilePath, 0, 0, 540 * scale, 878 * scale)
+            ctx.save()
+
+            // 绘制用户信息
+            this.drawPosterHead(ctx, scale)
+
+            // 绘制白色矩形区域
+            ctx.beginPath()
+            ctx.rect(20 * scale, 154 * scale, 500 * scale, 704 * scale)
+            ctx.setFillStyle('#FFFFFF')
+            ctx.fill()
+            ctx.clip()
+
+            const type = this.type
+            // 绘制底部内容
+            if (!type || type === 'normal') {
+                this.drawPosterFoot(ctx, scale)
+            } else {
+                this.drawGoodsInfo(ctx, scale)
+            }
+
+            ctx.restore()
+            ctx.draw(true, () => {
+                uni.canvasToTempFilePath(
+                    {
+                        canvasId: 'poster',
+                        success: res => {
+                            this.posterUrl = res.tempFilePath
+                            this.visiable = true
+                        },
+                        complete: () => {
+                            uni.hideLoading()
+                        }
+                    },
+                    this
+                )
+            })
+        },
+
+        // 绘制海报头部
+        drawPosterHead(ctx, scale) {
+            const { username } = this.posterData
+            // 绘制头像
+            ctx.beginPath()
+            ctx.arc(40 * scale + (90 * scale) / 2, 32 * scale + (90 * scale) / 2, (90 * scale) / 2, 0, 2 * Math.PI)
+            ctx.setFillStyle('#fff')
+            ctx.fill()
+            ctx.clip()
+            ctx.drawImage(this.imageList[1].tempFilePath, 40 * scale, 32 * scale, 90 * scale, 90 * scale)
+            ctx.restore()
+            ctx.save()
+            // 绘制用户名和推荐语
+            ctx.setFillStyle('#FFFFFF')
+            ctx.font = 'bold 10px sans-serif'
+            ctx.setFontSize(30 * scale)
+            ctx.fillText(username, 146 * scale, (30 + 34) * scale, 350 * scale)
+            ctx.font = 'normal 10px sans-serif'
+            ctx.setFontSize(24 * scale)
+            let txt = '强烈为你推荐该商城'
+            if (this.type === 'product') {
+                txt = '强烈为你推荐该商品'
+            }
+            ctx.fillText(txt, 146 * scale, (87 + 24) * scale, 350 * scale)
+        },
+
+        // 绘制海报底部
+        drawPosterFoot(ctx, scale) {
+            // 绘制中心图片
+            ctx.drawImage(this.imageList[2].tempFilePath, 40 * scale, 174 * scale, 460 * scale, 460 * scale)
+            // 绘制底部
+            ctx.setFontSize(24 * scale)
+            ctx.setFillStyle('#333')
+            ctx.fillText('护肤上颜选，正品', 60 * scale, (710 + 24) * scale)
+            ctx.fillText('有好货', 60 * scale, (710 + 24 + 40) * scale)
+            // 绘制二维码
+            ctx.drawImage(this.imageList[3].tempFilePath, 364 * scale, 690 * scale, 116 * scale, 116 * scale)
+        },
+
+        // 绘制商品信息
+        drawGoodsInfo(ctx, scale) {
+            // 参数处理
+            let { porductName, productPrice, productOriginPrice } = this.posterData
+            productPrice = productPrice.toFixed(2)
+            if (productOriginPrice) {
+                productOriginPrice = '￥' + productOriginPrice.toFixed(2)
+            }
+            const porductNames = this.getProductNames(porductName)
+
+            console.log(porductNames)
+
+            // 绘制中心图片
+            ctx.drawImage(this.imageList[2].tempFilePath, 40 * scale, 174 * scale, 460 * scale, 460 * scale)
+            // 绘制价格符号
+            ctx.setFillStyle('#FF457B')
+            ctx.setFontSize(24 * scale)
+            ctx.fillText('￥', 40 * scale, (680 + 24) * scale)
+            // 绘制购买价格
+            ctx.setFontSize(40 * scale)
+            ctx.fillText(productPrice, 62 * scale, (665 + 40) * scale)
+            // 绘制原价
+            if (productOriginPrice) {
+                ctx.setFillStyle('#999')
+                ctx.setFontSize(24 * scale)
+                ctx.fillText(productOriginPrice, 200 * scale, (680 + 24) * scale)
+                let m = ctx.measureText(productOriginPrice)
+                ctx.fillRect(200 * scale, (680 + 16) * scale, parseInt(m.width), 1)
+            }
+            // 绘制商品标题
+            ctx.setFillStyle('#333')
+            ctx.setFontSize(26 * scale)
+
+            porductNames.forEach((text, index) => {
+                text = index === 1 ? text.slice(0, text.length - 1) + '...' : text
+                ctx.fillText(text, 40 * scale, (732 + 26 + 40 * index) * scale)
+            })
+            // 绘制商品二维码
+            ctx.drawImage(this.imageList[3].tempFilePath, 384 * scale, 702 * scale, 116 * scale, 116 * scale)
+        },
+
+        // 处理产品名称
+        getProductNames(porductName) {
+            const list = []
+            if (porductName.length > 12) {
+                for (let i = 0; i < porductName.length; i += 12) {
+                    if (list.length < 2) {
+                        list.push(porductName.slice(i, i + 12))
+                    }
+                }
+            } else {
+                list.push(porductName)
+            }
+            return list
+        },
+
+        // 下载图片
+        downloadImage(url) {
+            return new Promise((resolve, reject) => {
+                uni.downloadFile({
+                    url: url,
+                    success(data) {
+                        resolve(data)
+                    },
+                    fail(err) {
+                        reject(err)
+                    }
+                })
+            })
+        },
+
+        open() {
+            this.$refs.sharePopup.open()
+            this.$emit('open')
+        },
+        close() {
+            this.$refs.sharePopup.close()
+            this.$emit('close')
+            this.visiable = false
+        },
+        popupChange(e) {
+            if (!e.show) {
+                this.visiable = false
+                this.posterUrl = ''
+            }
+            this.$emit('change', e)
+        },
+        async createPoster() {
+            // 合并海报数据
+            this.posterData = { ...this.posterData, ...this.data }
+            try {
+                // 从本地缓存中获取微信用户基本信息
+                let userProfile = this.$getStorage('USER_PROFILE')
+                if (!userProfile) {
+                    userProfile = await getUserProfile()
+                    this.$setStorage('USER_PROFILE', userProfile)
+                }
+                this.posterData.avatar = userProfile.avatarUrl
+                this.posterData.username = userProfile.nickName
+                uni.showLoading({
+                    mask: true,
+                    title: '正在为您生成海报'
+                })
+                // 绘制海报
+                this.initDrawPoster()
+            } catch (e) {
+                //TODO handle the exception
+                uni.hideLoading()
+            }
+        },
+        savePoster() {
+            console.log('保存图片到本地')
+            uni.saveImageToPhotosAlbum({
+                filePath: this.posterUrl,
+                success: res => {
+                    this.close()
+                    this.$emit('saveSuccess', this.posterUrl)
+                }
+            })
+        }
+    }
 }
 </script>
 
 <style lang="scss" scoped>
 .canvas {
-	position: fixed;
-	left: -600px;
-	top: 0;
-	width: 540px;
-	height: 878px;
-	opacity: 0;
+    position: fixed;
+    left: -600px;
+    top: 0;
+    width: 540px;
+    height: 878px;
+    opacity: 0;
 }
 
 .poster-container {
-	z-index: 100;
-	position: fixed;
-	top: 80rpx;
-	left: 50%;
-	transform: translateX(-50%);
-	width: 540rpx;
-	height: 878rpx;
-	background-color: #fff;
-	overflow: hidden;
-
-	.poster-image {
-		display: block;
-		width: 540rpx;
-		height: 878rpx;
-	}
+    z-index: 100;
+    position: fixed;
+    top: 80rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 540rpx;
+    height: 878rpx;
+    background-color: #fff;
+    overflow: hidden;
+
+    .poster-image {
+        display: block;
+        width: 540rpx;
+        height: 878rpx;
+    }
 }
 
 .popup-content {
-	position: relative;
-	padding: 40rpx;
-	padding-bottom: 0;
-	border-radius: 16rpx 16rpx 0 0;
-	background-color: #fff;
-
-	&::after {
-		position: absolute;
-		content: '';
-		width: 100%;
-		height: 80rpx;
-		bottom: -80rpx;
-		left: 0;
-		background-color: #fff;
-	}
-
-	.title {
-		font-size: 34rpx;
-		color: #666;
-		text-align: center;
-		padding-bottom: 28rpx;
-	}
-
-	.content {
-		.row {
-			@extend .cm-flex-around;
-		}
-
-		.item {
-			@extend .cm-flex-center;
-			flex-direction: column;
-
-			.label {
-				color: #333;
-				font-size: 26rpx;
-				margin-top: 16rpx;
-			}
-
-			.icon-image {
-				@extend .cm-flex-center;
-				width: 100rpx;
-				height: 100rpx;
-				background-color: #f7f7f7;
-
-				image {
-					width: 64rpx;
-					height: 64rpx;
-					display: block;
-				}
-			}
-
-			&.share {
-				line-height: inherit;
-				padding: 0;
-				margin: 0;
-				border: 0;
-				background: transparent;
-				&::after {
-					border: 0;
-				}
-			}
-		}
-		.cancel {
-			font-size: 28rpx;
-			color: #666;
-			font-weight: bold;
-			text-align: center;
-			padding-bottom: 32rpx;
-		}
-	}
+    position: relative;
+    padding: 40rpx;
+    padding-bottom: 0;
+    border-radius: 16rpx 16rpx 0 0;
+    background-color: #fff;
+
+    &::after {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 80rpx;
+        bottom: -80rpx;
+        left: 0;
+        background-color: #fff;
+    }
+
+    .title {
+        font-size: 34rpx;
+        color: #666;
+        text-align: center;
+        padding-bottom: 28rpx;
+    }
+
+    .content {
+        .row {
+            @extend .cm-flex-around;
+        }
+
+        .item {
+            @extend .cm-flex-center;
+            flex-direction: column;
+
+            .label {
+                color: #333;
+                font-size: 26rpx;
+                margin-top: 16rpx;
+            }
+
+            .icon-image {
+                @extend .cm-flex-center;
+                width: 100rpx;
+                height: 100rpx;
+                background-color: #f7f7f7;
+
+                image {
+                    width: 64rpx;
+                    height: 64rpx;
+                    display: block;
+                }
+            }
+
+            &.share {
+                line-height: inherit;
+                padding: 0;
+                margin: 0;
+                border: 0;
+                background: transparent;
+                &::after {
+                    border: 0;
+                }
+            }
+        }
+        .cancel {
+            font-size: 28rpx;
+            color: #666;
+            font-weight: bold;
+            text-align: center;
+            padding-bottom: 32rpx;
+        }
+    }
 }
 </style>

pages/views/goods/goods-detail.vue

@@ -77,7 +77,7 @@
         <!-- 领券购买 -->
         <goods-receive-buy-pupup ref="receiveBuyPopup" @detail="$refs.activitypPopup.open()"></goods-receive-buy-pupup>
         <!-- 分享弹窗 -->
-        <cm-share-popup ref="sharePopup"></cm-share-popup>
+        <cm-share-popup ref="sharePopup" :data="posterData" type="product"></cm-share-popup>
     </view>
 </template>
 
@@ -115,7 +115,8 @@ export default {
             // 锚点列表
             anchorList: [],
             scorllTop: 0,
-            productInfo: {}
+            productInfo: {},
+            posterData: {}
         }
     },
     computed: {
@@ -141,6 +142,12 @@ export default {
     methods: {
         // 分享事件
         onShare() {
+            this.posterData = {
+                porductName: '肌本演绎360愉悦修护套组标准版防晒修复补水',
+                productPrice: 500,
+                productOriginPrice: 800,
+                productImage: 'https://picsum.photos/1000/1000?random=1'
+            }
             this.$refs.sharePopup.open()
         },
         // 轮播图事件