liedou_uniapp/pages/subPackages/dy/shareDetail....

<template>
	<view>
		<u-navbar :is-back="true" title="分享" :background="background" title-color="#181818" back-icon-color="#181818" />
		<image class="head_bg" src="https://ld.726p.com/ldyx_static/imgs/head_bg.png" mode="widthFix"></image>
		<!-- 商品文案 -->
		<view class="area_block">
			<view class="area_title">商品文案</view>
			<textarea class="h_block textare" v-model="share_content" placeholder-style="color:#ccc" placeholder="请输入文案"/>
			<view class="h_block">【商品详情】{{posterInfo && posterInfo.url_info && posterInfo.url_info.share_link ? posterInfo.url_info.share_link : '-'}}</view>
		</view>
		<!-- 图片选择 -->
		<view class="area_block area_block_image">
			<view class="area_title">图片选择</view>
			<scroll-view class="image_blcok" scroll-x="true">
				<view class="image_item" v-if="canvasImage" @click="openclickImage(-1)">
					<u-icon class="image_select"  @tap.stop="selectImg(-1)" name="checkmark-circle-fill" :color="select_share_image_id == -1 ? '#FB3F3C' : '#ccc'" size="40"></u-icon>
					<image class="image" :src="canvasImage"></image>
				</view>
				<view class="image_item" v-if="goodsParams.img" @click="openclickImage(-2)">
					<u-icon class="image_select"  @tap.stop="selectImg(-2)" name="checkmark-circle-fill" :color="select_share_image_id == -2 ? '#FB3F3C' : '#ccc'" size="40"></u-icon>
					<image class="image" :src="goodsParams.img"></image>
				</view>
				<view class="image_item" v-for="(img,index) in posterInfo.small_images" :key="index" @click="openclickImage(index)">
					<u-icon class="image_select" @tap.stop="selectImg(index)" name="checkmark-circle-fill" :color="select_share_image_id == index ? '#FB3F3C' : '#ccc'" size="40"></u-icon>
					<image class="image" :src="img"></image>
				</view>
			</scroll-view>
		</view>
		<!-- 提示语 -->
		<view class="share_hint">提示：点击【分享】将自动复制文案和转发选中图片，请前往对话框进行文字粘贴</view>
		<!-- 按钮 -->
		<view class="share_button_view">
			<button class="share_xcx" open-type="share">分享小程序</button>
			<button class="share_hint_img" @click="goShare">分享</button>
		</view>
		<!-- 海报 -->
		<createShareImage :goodsParams="goodsParams" :isDyGoods="true" @getCanvasImage="getCanvasImage"></createShareImage>
	</view>
</template>

<script>
	import createShareImage from '@/components/createShareImage.vue'
	export default {
		components:{
			createShareImage
		},
		data() {
			return {
				background:{
					backgroundImage: 'transparent'
				},
				goods_id: '', // 商品id
				goodsParams: {}, // 商品参数（用于获取商品详情的相关参数 前一页面传入）
				canvasImage: '', // 二维码图片地址
				posterInfo: {}, // 商品分享数据
				share_content: '', // 分享文案
				select_share_image_id: -3, // 选择图片的ID，什么都没选择为-3，-1为canvas图片，-2是从列表带过来的商品主图，其他图片从0递增
				previous_page_options: {}, //上一页传入

				shop_type: '', // 商品店铺类型 4京东
			}
		},
		onLoad(options) {
			this.previous_page_options = options;
			const { img = '', goods_id = '', coupon_price = '', discount_price = '', price = '', is_coupon = '', commission_rate = '', is_high_commission = '', coupon_end_time = '', coupon_start_time = '', title = '' } = options
			// 接收前一页面传入的商品参数
			this.goods_id = decodeURIComponent(goods_id)
			this.goodsParams = {
			  goods_id: decodeURIComponent(goods_id),
			  coupon_price: decodeURIComponent(coupon_price),
			  discount_price: decodeURIComponent(discount_price),
			  price: decodeURIComponent(price),
			  is_coupon: decodeURIComponent(is_coupon),
			  commission_rate: decodeURIComponent(commission_rate),
			  is_high_commission: decodeURIComponent(is_high_commission),
			  coupon_end_time: decodeURIComponent(coupon_end_time),
			  coupon_start_time: decodeURIComponent(coupon_start_time),
			  img: decodeURIComponent(img),
				title: decodeURIComponent(title),
			}

			this.shop_type = options.shop_type || '' // 商品店铺类型 淘宝、天猫、京东
		},
		onShareAppMessage(res) {
			const title = this.posterInfo.title;
			let userInfo = uni.getStorageSync('userInfo') || '';
			// 将传入对象转为&连接的字符串
			let arr1 = [];
			Object.keys(this.previous_page_options).forEach((key)=>{
				arr1.push([key,this.previous_page_options[key]].join('='))
			})
			let str1 = arr1.join('&')
			let path = `/pages/subPackages/dy/goodsDetail?invite_code=${userInfo.invite_code}&${str1}`
		    return {
		        title: title,
		        path: path,
		        imageUrl: this.goodsParams.img ? this.goodsParams.img : this.posterInfo.small_images[0],
		        desc:'',
		        content:'',
		        success(res){
		            uni.showToast({
		                title:'分享成功'
		            })
		        },
		        fail(res){
		            uni.showToast({
		                title:'分享失败',
		                icon:'none'
		            })
		        }
		    }
		},
		methods: {
			// 点击查看大图
			  openclickImage (id) {
				  let img_url = ''
				  if(id == -2){
					  img_url = this.goodsParams.img
				  } else if(id == -1){
					  img_url = this.canvasImage;
				  }else{
					  img_url = this.posterInfo.small_images[id]
				  }
			    var url = img_url;
			    wx.previewImage({
			      current: url,
			      urls: [url],
			      fail: function () {
			        console.log('fail')
			      },
			      complete: function () {
			        console.info("点击图片了");
			      },
			    })
			  },
			// 图片选择
			selectImg(id){
				if ( this.select_share_image_id == id ) { // 点击同一个图片，选择取消
					this.select_share_image_id = -3
				} else {
					this.select_share_image_id = id;
				}
			},
			// 去分享
			goShare(){
				// 下单链接
				let placeOrderUrl = this.posterInfo && this.posterInfo.url_info && this.posterInfo.url_info.share_link
				// 复制文案
				const share_content = `${this.share_content}\n[爱心]下单链接：${placeOrderUrl}`
				this.$copyEvent( {text: share_content, toast_title: '文案已复制',cb:()=>{
					// 图片分享
					if ( this.select_share_image_id == -3 ) return ;
					if ( this.select_share_image_id == -2 ) { // 商品主图
						wx.downloadFile({
						  url: this.goodsParams.img,
						  success: (res) => {
						    wx.showShareImageMenu({
						      path: res.tempFilePath
						    })
						  }
						})
					} else if ( this.select_share_image_id == -1 ) { // canvas图片
						wx.showShareImageMenu({
						  path: this.canvasImage
						})
					} else {
						const img_url = this.posterInfo.small_images[this.select_share_image_id];
						 wx.downloadFile({
						   url: img_url,
						   success: (res) => {
						     wx.showShareImageMenu({
						       path: res.tempFilePath
						     })
						   }
						 })
					}
				}} )
			},
			// 获取二维码图片地址
			getCanvasImage({image, posterInfo}){
				this.canvasImage = image;
				this.posterInfo = posterInfo;
				this.share_content = `${posterInfo.title}\n${posterInfo.is_coupon == 1 && posterInfo.coupon_price != 0 ? `【在售】${posterInfo.price}\n【券后价】${posterInfo.discount_price}` : `【在售】${posterInfo.discount_price}`}\n`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head_bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.area_block{
		width: 702rpx;
		height: 594rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 18rpx auto 0;
		position: relative;
		.area_title{
			color: #181818;
			font-size: 32rpx;
			line-height: 106rpx;
			border-bottom: 2rpx solid #F9F9FA;
			padding-left: 42rpx;
		}
		.h_block{
			width: 662rpx;
			background: #F6F6F6;
			padding: 26rpx;
			color: #181818;
			font-size: 28rpx;
			line-height: 40rpx;
			margin: auto;
			box-sizing: border-box;
		}
		.textare{
			margin-top: 26rpx;
			margin-bottom: 10rpx;
			height: 336rpx;
		}
	}
	.area_block_image{
		height: 366rpx;
	}
	.image_blcok{
		white-space: nowrap;
		width: 100%;
		margin-top: 44rpx;
		.image_item{
			display: inline-block;
			width: 180rpx;
			height: 180rpx;
			margin-left: 20rpx;
			position: relative;
			.image_select{
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				padding: 10rpx 10rpx 40rpx 40rpx;
			}
			.image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.share_hint{
		width: 654rpx;
		height: 68rpx;
		font-size: 24rpx;
		color: #E55454;
		line-height: 34rpx;
		margin: 26rpx auto 0;
	}
	.share_button_view{
		width: 628rpx;
		height: 84rpx;
		background: #FFBB93;
		border-radius: 42rpx;
		margin: 56rpx auto 0;
		display: flex;
		align-items: center;
		button{
			background: transparent;
			margin: 0;
			width: 50%;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: bold;
			&::after{
				border: none;
			}
		}
		.share_hint_img{
			width: 366rpx;
			height: 100%;
			background: linear-gradient(90deg, #FF9048 0%, #FB3F3C 100%);
			border-radius: 42rpx;
		}
	}
</style>