分享功能页面修改（还未生成canvas）

shopping/productdetails.vue

@@ -91,11 +91,13 @@
 		<view class="details-tool-wrap">
 			<view class="details-tool u-flex u-row-between">
 				<view class="left u-flex">
-					<view class="icon-wrap">
-						<button class="share-btn" data-name="shareBtn" open-type="share">
+					<view class="icon-wrap" @click="shareShow=true">
+						<u-icon name="share" color="#676767" size="30"></u-icon>
+						分享
+						<!-- <button class="share-btn" data-name="shareBtn" open-type="share">
 							<u-icon name="share" color="#676767" size="30"></u-icon>
 							分享
-						</button>
+						</button> -->
 					</view>
 					<view class="icon-wrap" v-if="details.isCredit!=1"  @click="$u.route('/shopping/cart')">
 						<u-icon name="shopping-cart" color="#676767" size="30"></u-icon>
@@ -118,6 +120,45 @@
 				
 			</view>
 		</view>
+		
+		<!-- 分享选择弹出内容 -->
+		<view class="share-option" :class="{shareShow:shareShow}">
+			<view class="overlay" v-if="shareShow"  @click="shareShow=false"></view>
+			<button class="share-option-item wx-share" data-name="shareBtn" open-type="share">
+				发送给朋友
+			</button>
+			<view class="share-option-item" @click="getPoster">生成海报</view>
+			<view class="share-option-item" @click="shareShow=false">取消</view>
+		</view>
+		<u-popup :show="posterShow" @close="posterShow=false" ref="uni-popup">
+			<view class="poster-wrap u-flex u-col-center">
+				<view class="poster-inner">
+					<view class="close-wrap" @click="posterShow=false">
+						<u-icon name="close-circle" color="#fff" size="56rpx"></u-icon>
+					</view>
+					<view class="poster" id="poster" ref="poster" >
+						<img class="poster-bg" :src="staticUrl+'/img/poster-bg.png'" alt="">
+						<img class="placard" :src="details.placard" alt="">
+						<!-- <u--image  :showLoading="true" :src="details.placard" width="100%" mode="widthFix"></u--image> -->
+						<view class="bottom u-flex u-row-between">
+							<view class="left">
+								<view class="price">
+									¥<text class="num">{{details.salePrice}}</text>
+								</view>
+								<view class="goods-name ellipsis-2">{{details.goodsName}}</view>
+								<view class="slogan" v-if="details.slogan" :style="{color:details.sloganColor||'#00A447'}">{{details.slogan}}</view>
+							</view>
+							<view class="right">
+								<u--image :showLoading="true" :src="details.qrcodeUrl" width="108rpx" height="108rpx"></u--image>
+								<view class="img-tip">长按扫码购买</view>
+							</view>
+						</view>
+					</view>
+					<view class="poster-btn" @click="savePoster">保存图片</view>
+				</view>
+			</view>
+		</u-popup>
+		
 		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
@@ -126,6 +167,7 @@
 	export default {
 		data() {
 			return {
+				staticUrl:this.$commonConfig.staticUrl,
 				loadingPage:true,
 				id:'',
 				cartTotal:0,
@@ -135,6 +177,8 @@
 					slideImgList:[]
 				},
 				hasAddr:false,
+				shareShow:false,
+				posterShow:true
 			}
 		},
 		onLoad(page) {
@@ -346,6 +390,13 @@
 			            resolve('noNeedAuth'); // 实名认证已通过，使用 resolve 方法返回结果
 			        }
 			    });
+			},
+			getPoster(){
+				this.posterShow = true;
+				this.shareShow = false;
+			},
+			savePoster(){
+				console.log('savePoster');
 			}
 		}
 	}
@@ -468,4 +519,125 @@
 		}
 	}
 }
+.share-option{
+	transform: translateY(100%);
+	.overlay{
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100vw;
+		height: 100vh;
+		background-color: rgba(0, 0, 0, 0.35);
+		transform: translateY(-100%);
+	}
+	&.shareShow{
+		transform: translateY(0);
+	}
+	position: fixed;
+	width: 100%;
+	left: 0;
+	bottom: 0;
+	z-index: 50;
+	background-color: #fff;
+	.share-option-item{
+		position: relative;
+		height: 46px;
+		line-height: 46px;
+		border: 0;
+		background-color: #fff;
+		text-align: center;
+		border-radius: 0;
+		border-bottom: 1px solid #eee;
+		font-size: 30rpx;
+	}
+	.wx-share{
+		border-bottom: 0;
+	}
+}
+.poster-wrap{
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100vh;
+	.poster-inner{
+		flex: 1;
+		margin: 0 75rpx;
+		.close-wrap{
+			display: flex;
+			justify-content: flex-end;
+			margin-bottom: 16rpx;
+		}
+	}
+	.poster{
+		position: relative;
+		padding-bottom: 90rpx;
+		background-color: #fff;
+		.poster-bg{
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			width: 100%;
+			z-index: 1;
+		}
+		.placard{
+			position: relative;
+			z-index: 10;
+		}
+		.bottom{
+			position: relative;
+			z-index: 20;
+			margin: 33rpx 40rpx 0;
+			.left{
+				margin-right: 58rpx;
+				.price{
+					font-size: 22rpx;
+					font-weight: 600;
+					color: #FF3538;
+					line-height: 30rpx;
+					margin-bottom: 10rpx;
+					.num{
+						font-size: 40rpx;
+						font-weight: 600;
+						margin-left: 5rpx;
+					}
+				}
+				.goods-name{
+					font-size: 30rpx;
+					font-weight: 400;
+					color: #333333;
+					line-height: 38rpx;
+					margin-bottom: 16rpx;
+				}
+				.slogan{
+					font-size: 26rpx;
+					font-weight: 600;
+					line-height: 37rpx;
+				}
+			}
+			.right{
+				text-align: center;
+				.img-tip{
+					margin-top: 12rpx;
+					font-size: 20rpx;
+					font-weight: 400;
+					color: #333333;
+					line-height: 28rpx;
+				}
+			}
+		}
+	}
+	.poster-btn{
+		height: 88rpx;
+		line-height: 88rpx;
+		border-radius: 44rpx;
+		text-align: center;
+		color: #fff;
+		margin-top: 40rpx;
+		font-size: 32rpx;
+		font-weight: 600;
+		background: linear-gradient(90deg, #00DC84 0%, #00A447 100%);
+	}
+}
 </style>